feat: add keyboard shortcuts and hints for RPS, Number Guessing and Hangman

Author: avzuha

web-app/js/projects/hangman.js

@@ -24,6 +24,8 @@ function getHangmanHTML() {
                 </div>
                 
                 <div class="keyboard" id="keyboard"></div>
+
+                <p class="keyboard-hint">⌨️ Type any letter key to guess directly</p>
                 
                 <div class="game-message" id="gameMessage"></div>
                 
@@ -156,6 +158,11 @@ function getHangmanHTML() {
             .key-btn.wrong {
                 background: var(--danger-color);
             }
+
+            .key-btn.key-flash {
+                transform: scale(1.2);
+                box-shadow: 0 3px 10px rgba(99, 102, 241, 0.6);
+            }
             
             .game-message {
                 font-size: 1.5rem;
@@ -171,6 +178,24 @@ function getHangmanHTML() {
             .game-message.lose {
                 color: var(--danger-color);
             }
+
+            .keyboard-hint {
+                font-size: 0.9rem;
+                color: var(--text-secondary);
+                margin-bottom: 1rem;
+            }
+
+            .keyboard-hint kbd {
+                display: inline-block;
+                padding: 0.15rem 0.45rem;
+                font-size: 0.85rem;
+                font-family: monospace;
+                background: var(--surface-color);
+                border: 1px solid var(--border-color);
+                border-radius: 5px;
+                color: var(--primary-color);
+                font-weight: bold;
+            }
             
             .btn-new-game {
                 background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
@@ -340,11 +365,16 @@ function initHangman() {
         guessedLetters.push(letter);
 
         const btn = keyboard.querySelector(`[data-letter="${letter}"]`);
-        btn.disabled = true;
+        if (btn) {
+            btn.disabled = true;
+            // Flash the button briefly when triggered by keyboard
+            btn.classList.add('key-flash');
+            setTimeout(() => btn.classList.remove('key-flash'), 150);
+        }
 
         if (currentWord.includes(letter)) {
             correctLetters.push(letter);
-            btn.classList.add('correct');
+            btn && btn.classList.add('correct');
 
             updateWordDisplay();
 
@@ -356,7 +386,7 @@ function initHangman() {
             }
         } else {
             wrongAttempts++;
-            btn.classList.add('wrong');
+            btn && btn.classList.add('wrong');
 
             const drawStage = wrongAttempts + 4;
             drawHangman(drawStage);
@@ -368,7 +398,6 @@ function initHangman() {
                 gameMessage.innerHTML = `😔 Game Over! The word was: <strong>${currentWord.toUpperCase()}</strong>`;
                 gameMessage.className = 'game-message lose';
                 disableAllKeys();
-                updateWordDisplay();
                 wordDisplay.innerHTML = '';
                 for (let letter of currentWord) {
                     const letterBox = document.createElement('div');
@@ -400,15 +429,28 @@ function initHangman() {
         initGame();
         drawGallows();
     });
-    
-    document.addEventListener('keypress', (e) => {
+
+    // Keyboard handler — using keydown instead of deprecated keypress
+    function handleKeydown(e) {
         if (gameOver) return;
+        // Ignore if user is typing in an input field
+        if (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA') return;
         const letter = e.key.toLowerCase();
         if (/^[a-z]$/.test(letter) && !guessedLetters.includes(letter)) {
             guessLetter(letter);
         }
+    }
+    document.addEventListener('keydown', handleKeydown);
+
+    // Clean up listener when modal closes
+    const observer = new MutationObserver(() => {
+        if (!document.getElementById('newGameBtn')) {
+            document.removeEventListener('keydown', handleKeydown);
+            observer.disconnect();
+        }
     });
+    observer.observe(document.body, { childList: true, subtree: true });
 
     initGame();
     drawGallows();
-}
+}

web-app/js/projects/number-guessing.js

@@ -9,6 +9,8 @@ function getNumberGuessingHTML() {
                     <input type="number" id="guessInput" min="1" max="100" placeholder="Enter your guess">
                     <button class="btn-guess" id="submitGuess">Guess!</button>
                 </div>
+
+                <p class="keyboard-hint">⌨️ Press <kbd>Enter</kbd> to submit your guess</p>
                 
                 <div class="feedback" id="feedback"></div>
                 
@@ -46,7 +48,7 @@ function getNumberGuessingHTML() {
                 display: flex;
                 gap: 1rem;
                 justify-content: center;
-                margin-bottom: 2rem;
+                margin-bottom: 0.75rem;
             }
             
             .guess-input-group input {
@@ -78,6 +80,25 @@ function getNumberGuessingHTML() {
                 cursor: pointer;
                 font-size: 1.2rem;  
             }
+
+            .keyboard-hint {
+                font-size: 0.9rem;
+                color: var(--text-secondary);
+                margin-bottom: 1rem;
+            }
+
+            .keyboard-hint kbd {
+                display: inline-block;
+                padding: 0.15rem 0.45rem;
+                font-size: 0.85rem;
+                font-family: monospace;
+                background: var(--surface-color);
+                border: 1px solid var(--border-color);
+                border-radius: 5px;
+                color: var(--primary-color);
+                font-weight: bold;
+            }
+
             .feedback {
                 font-size: 1.5rem;
                 font-weight: bold;
@@ -128,8 +149,11 @@ function initNumberGuessing() {
     let bestScore = storage.loadFromStorage('numberGuessBest', null);
     updateBestScoreDisplay();
 
+    // Focus input automatically so Enter works right away
+    guessInput.focus();
+
     submitBtn.addEventListener('click', makeGuess);
-    guessInput.addEventListener('keypress', (e) => {
+    guessInput.addEventListener('keydown', (e) => {
         if (e.key === 'Enter') makeGuess();
     });
 
@@ -144,6 +168,7 @@ function initNumberGuessing() {
         guessInput.value = '';
         guessInput.disabled = false;
         submitBtn.disabled = false;
+        guessInput.focus();
     });
 
     function updateBestScoreDisplay() {
@@ -189,4 +214,4 @@ function initNumberGuessing() {
         rangeDisplay.textContent = `${minRange}-${maxRange}`;
         guessInput.value = '';
     }
-}
+}

web-app/js/projects/rock-paper-scissor.js

@@ -83,6 +83,8 @@ function getRockPaperScissorHTML() {
                         <span>Scissors</span>
                     </button>
                 </div>
+
+                <p class="keyboard-hint">⌨️ Press <kbd>R</kbd> Rock · <kbd>P</kbd> Paper · <kbd>S</kbd> Scissors</p>
                 
                 <button class="btn-reset" id="resetRPS">Reset Game</button>
             </div>
@@ -235,10 +237,34 @@ function getRockPaperScissorHTML() {
                 border-color: var(--primary-color);
                 box-shadow: 0 5px 20px rgba(99, 102, 241, 0.3);
             }
+
+            .choice-btn.key-active {
+                transform: translateY(-5px);
+                border-color: var(--primary-color);
+                box-shadow: 0 5px 20px rgba(99, 102, 241, 0.3);
+            }
             
             .choice-icon {
                 font-size: 3rem;
             }
+
+            .keyboard-hint {
+                font-size: 0.9rem;
+                color: var(--text-secondary);
+                margin-bottom: 1rem;
+            }
+
+            .keyboard-hint kbd {
+                display: inline-block;
+                padding: 0.15rem 0.45rem;
+                font-size: 0.85rem;
+                font-family: monospace;
+                background: var(--surface-color);
+                border: 1px solid var(--border-color);
+                border-radius: 5px;
+                color: var(--primary-color);
+                font-weight: bold;
+            }
             
             .btn-reset {
                 background: var(--danger-color);
@@ -271,6 +297,7 @@ function initRockPaperScissor() {
 
     const choices = ['rock', 'paper', 'scissors'];
     const emojis = { rock: '🪨', paper: '📄', scissors: '✂️' };
+    const keyMap = { r: 'rock', p: 'paper', s: 'scissors' };
 
     const storage = window.appStorage || {
         saveToStorage(key, value) {
@@ -315,6 +342,22 @@ function initRockPaperScissor() {
             playRound(playerChoice);
         });
     });
+
+    // Keyboard shortcut handler
+    function handleKeydown(e) {
+        const key = e.key.toLowerCase();
+        if (keyMap[key]) {
+            const choice = keyMap[key];
+            // Briefly highlight the matching button
+            const matchingBtn = document.querySelector(`.choice-btn[data-choice="${choice}"]`);
+            if (matchingBtn) {
+                matchingBtn.classList.add('key-active');
+                setTimeout(() => matchingBtn.classList.remove('key-active'), 200);
+            }
+            playRound(choice);
+        }
+    }
+    document.addEventListener('keydown', handleKeydown);
 
     resetBtn.addEventListener('click', () => {
         playerScore = 0;
@@ -333,6 +376,15 @@ function initRockPaperScissor() {
         });
     });
 
+    // Clean up keydown listener when modal closes
+    const observer = new MutationObserver(() => {
+        if (!document.getElementById('resetRPS')) {
+            document.removeEventListener('keydown', handleKeydown);
+            observer.disconnect();
+        }
+    });
+    observer.observe(document.body, { childList: true, subtree: true });
+
     function updateStatsDisplay() {
         gamesPlayedDisplay.textContent = stats.gamesPlayed;
         winsDisplay.textContent = stats.wins;
@@ -398,4 +450,4 @@ function initRockPaperScissor() {
         document.getElementById('playerScore').textContent = playerScore;
         document.getElementById('computerScore').textContent = computerScore;
     }
-}
+}