- fix alphabet game for mobile

Author: TobiasMue91

games/alphabet.html

@@ -493,7 +493,14 @@
             }
         }
 
-        #mobile-input{position:absolute;opacity:0;height:0;width:0;top:0;left:0}
+        #mobile-input {
+            position: absolute;
+            opacity: 0;
+            height: 0;
+            width: 0;
+            top: 0;
+            left: 0
+        }
 
         .mobile-keyboard-note {
             display: none
@@ -682,6 +689,7 @@ <h3 class="text-lg font-medium mb-2">Letter Performance</h3>
     let letterTimestamps = [];
     let attempts = parseInt(localStorage.getItem("attempts") || "0");
     const MAX_HISTORY = 10;
+    const lastKeyPressed = {};
     const alphabetEl = document.getElementById('alphabet');
     const resultEl = document.getElementById('result');
     const highscoreEl = document.getElementById('highscore');
@@ -705,8 +713,7 @@ <h3 class="text-lg font-medium mb-2">Letter Performance</h3>
     const tabButtons = document.querySelectorAll('.tab-button');
     const tabContents = document.querySelectorAll('.tab-content');
     const mobileInputEl = document.getElementById('mobile-input');
-    const lastKeyPressed = {};
-    
+
     function isMobileDevice() {
         return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) || window.innerWidth < 768;
     }
@@ -1138,20 +1145,9 @@ <h3 class="text-lg font-medium mb-2">Letter Performance</h3>
         }
     }
 
-    function handleKeyPress(event) {
-    processKeyPress(event.key);
-}
-
-    function handleMobileInput(event) {
-    const inputValue = event.target.value.toLowerCase();
-    for(let i = 0; i < inputValue.length; i++) {
-        processKeyPress(inputValue[i]);
-    }
-    mobileInputEl.value = '';
-}
-
-    function handleKeyboardInput(key) {
-        if (key === 'a' && currentState !== GameState.PLAYING) {
+    function processKeyPress(key) {
+        const lowerKey = key.toLowerCase();
+        if (lowerKey === 'a' && currentState !== GameState.PLAYING) {
             document.querySelectorAll('.letter')[0].classList.remove('current');
             currentIndex = 1;
             attempts++;
@@ -1169,7 +1165,7 @@ <h3 class="text-lg font-medium mb-2">Letter Performance</h3>
             return;
         }
         if (currentState !== GameState.PLAYING) return;
-        if (key === alphabet[currentIndex]) {
+        if (lowerKey === alphabet[currentIndex]) {
             const letterEls = document.querySelectorAll('.letter');
             letterEls[currentIndex].classList.add('letter-typed');
             currentIndex++;
@@ -1194,49 +1190,16 @@ <h3 class="text-lg font-medium mb-2">Letter Performance</h3>
         }
     }
 
-    function processKeyPress(key) {
-    const lowerKey = key.toLowerCase();
-    if(lowerKey === 'a' && currentState !== GameState.PLAYING) {
-        document.querySelectorAll('.letter')[0].classList.remove('current');
-        currentIndex = 1;
-        attempts++;
-        localStorage.setItem("attempts", attempts);
-        attemptsEl.textContent = attempts;
-        updateGameState(GameState.PLAYING);
-        startTime = new Date().getTime();
-        letterTimestamps[0] = startTime;
-        letterTimestamps[1] = startTime;
-        const letterEls = document.querySelectorAll('.letter');
-        letterEls[0].classList.add('text-green-600');
-        const progress = (currentIndex / alphabet.length) * 100;
-        updateProgress(progress);
-        highlightCurrentLetter();
-        return;
+    function handleKeyPress(event) {
+        processKeyPress(event.key);
     }
-    if(currentState !== GameState.PLAYING) return;
-    if(lowerKey === alphabet[currentIndex]) {
-        const letterEls = document.querySelectorAll('.letter');
-        letterEls[currentIndex].classList.add('letter-typed');
-        currentIndex++;
-        letterTimestamps[currentIndex] = new Date().getTime();
-        const progress = (currentIndex / alphabet.length) * 100;
-        updateProgress(progress);
-        if(currentIndex === alphabet.length) {
-            const finalTime = new Date().getTime() - startTime;
-            resultEl.textContent = `${finalTime.toLocaleString()}ms`;
-            const isNewHighScore = updateHighScore(finalTime);
-            if(isNewHighScore) {
-                gameMessageEl.textContent = "New high score! Press 'A' to try again";
-            }
-            updateGameState(GameState.COMPLETED);
-        } else {
-            highlightCurrentLetter();
+
+    function handleMobileInput(event) {
+        const inputValue = event.target.value.toLowerCase();
+        for (let i = 0; i < inputValue.length; i++) {
+            processKeyPress(inputValue[i]);
         }
-    } else {
-        const letterEls = document.querySelectorAll('.letter');
-        letterEls[currentIndex].classList.add('text-red-600');
-        updateGameState(GameState.ERROR);
-    }
+        mobileInputEl.value = '';
     }
 
     window.addEventListener("resize", () => {
@@ -1284,4 +1247,4 @@ <h3 class="text-lg font-medium mb-2">Letter Performance</h3>
 </script>
 <script src="../sidebar.js"></script>
 </body>
-</html>
+</html>