Update alphabet.html

Bugfix for mobile

Author: TobiasMue91

games/alphabet.html

@@ -493,13 +493,7 @@
             }
         }
 
-        #mobile-input {
-            position: absolute;
-            opacity: 0;
-            height: 0;
-            width: 0;
-            pointer-events: none
-        }
+        #mobile-input{position:absolute;opacity:0;height:0;width:0;top:0;left:0}
 
         .mobile-keyboard-note {
             display: none
@@ -711,7 +705,8 @@ <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;
     }
@@ -1144,7 +1139,18 @@ <h3 class="text-lg font-medium mb-2">Letter Performance</h3>
     }
 
     function handleKeyPress(event) {
-        const key = event.key.toLowerCase();
+    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) {
             document.querySelectorAll('.letter')[0].classList.remove('current');
             currentIndex = 1;
@@ -1188,57 +1194,49 @@ <h3 class="text-lg font-medium mb-2">Letter Performance</h3>
         }
     }
 
-    function handleMobileInput(event) {
-        const input = event.target;
-        const lastChar = input.value.slice(-1).toLowerCase();
-        if (lastChar) {
-            handleKeyboardInput(lastChar);
-            input.value = '';
-        }
+    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 handleKeyboardInput(key) {
-        if (key === '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;
-        }
-        if (currentState !== GameState.PLAYING) return;
-        if (key === 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();
+    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 {
-            const letterEls = document.querySelectorAll('.letter');
-            letterEls[currentIndex].classList.add('text-red-600');
-            updateGameState(GameState.ERROR);
+            highlightCurrentLetter();
         }
+    } else {
+        const letterEls = document.querySelectorAll('.letter');
+        letterEls[currentIndex].classList.add('text-red-600');
+        updateGameState(GameState.ERROR);
+    }
     }
 
     window.addEventListener("resize", () => {
@@ -1286,4 +1284,4 @@ <h3 class="text-lg font-medium mb-2">Letter Performance</h3>
 </script>
 <script src="../sidebar.js"></script>
 </body>
-</html>
+</html>