autofocus and key handling in the frontend forms

pong/game/game.py

@@ -91,15 +91,23 @@ class Game:
 
     async def handle_key_press(self, player, key):
         if player == self.player1:
-            if key == 'arrowup' and self.game_state['player1_position'] >= 25:
+            if key == 'arrowup':
                 self.game_state['player1_position'] -= 25
-            elif key == 'arrowdown' and self.game_state['player1_position'] <= 275:
+                if self.game_state['player1_position'] < 0:
+                    self.game_state['player1_position'] = 0
+            elif key == 'arrowdown':
                 self.game_state['player1_position'] += 25
+                if self.game_state['player1_position'] > 300:
+                    self.game_state['player1_position'] = 300
         elif player == self.player2:
-            if key == 'arrowup' and self.game_state['player2_position'] >= 25:
+            if key == 'arrowup':
                 self.game_state['player2_position'] -= 25
-            elif key == 'arrowdown' and self.game_state['player2_position'] <= 275:
+                if self.game_state['player2_position'] < 0:
+                    self.game_state['player2_position'] = 0
+            elif key == 'arrowdown':
                 self.game_state['player2_position'] += 25
+                if self.game_state['player2_position'] > 300:
+                    self.game_state['player2_position'] = 300
 
     async def end_game(self):
         if self.game_loop_task:

pong/static/game.js

@@ -15,6 +15,15 @@ document.addEventListener('DOMContentLoaded', () => {
     let token;
     let gameState;
 
+    // Auto-focus and key handling for AUTH-FORM
+    nicknameInput.focus();
+    nicknameInput.addEventListener('keypress', function(event) {
+        if (event.key === 'Enter') {
+            event.preventDefault();
+            checkNicknameButton.click();
+        }
+    });
+
     checkNicknameButton.addEventListener('click', handleCheckNickname);
     registerButton.addEventListener('click', handleRegister);
     loginButton.addEventListener('click', handleLogin);
@@ -27,9 +36,30 @@ document.addEventListener('DOMContentLoaded', () => {
                 if (exists) {
                     authForm.style.display = 'none';
                     loginForm.style.display = 'block';
+                    // Auto-focus and key handling for LOGIN-FORM
+                    loginPasswordInput.focus();
+                    loginPasswordInput.addEventListener('keypress', function(event) {
+                        if (event.key === 'Enter') {
+                            event.preventDefault();
+                            loginButton.click();
+                        }
+                    });                    
                 } else {
                     authForm.style.display = 'none';
                     registerForm.style.display = 'block';
+                    // Auto-focus and key handling for REGISTER-FORM
+                    passwordInput.focus();
+                    passwordInput.addEventListener('keypress', function(event) {
+                        if (event.key === 'Enter') {
+                            confirmPasswordInput.focus();
+                            confirmPasswordInput.addEventListener('keypress', function(event) {
+                                if (event.key === 'Enter') {
+                                    event.preventDefault();
+                                    registerButton.click();
+                                }
+                            });        
+                        }
+                    });                    
                 }
             } catch (error) {
                 console.error('Error checking user existence:', error);
@@ -134,7 +164,7 @@ document.addEventListener('DOMContentLoaded', () => {
             if (data.type === 'authenticated') {
                 console.log('Authentication successful');
             } else if (data.type === 'waiting_room') {
-                console.log('Entered the waiting room');
+                console.log('Entered the WAITING ROOM');
             } else if (data.type === 'game_start') {
                 console.log('Game started:', data.game_id, '(', data.player1, 'vs', data.player2, ')');
                 startGame(data.game_id, data.player1, data.player2);
@@ -164,7 +194,7 @@ document.addEventListener('DOMContentLoaded', () => {
     }
 
     function handleKeyDown(event) {
-        if (event.key === 'ArrowUp' || event.key === 'ArrowDown' || event.key === '+') {
+        if (event.key === 'ArrowUp' || event.key === 'ArrowDown') {
             sendKeyPress(event.key.toLowerCase());
         }
     }

pong/static/index.html

@@ -37,6 +37,6 @@
             <div id="ball"></div>
         </div>
     </div>
-    <script src="{% static 'game.js' %}"></script>
+    <script src="{% static 'game.js' %}"></script>   
 </body>
 </html>