Ladebeze66/ft_transcendence
1
0
Fork 0
mirror of https://github.com/AudebertAdrien/ft_transcendence.git synced 2025-12-16 14:07:49 +01:00
Code Issues Packages Projects Releases Wiki Activity

autofocus and key handling in the frontend forms

Browse Source
This commit is contained in:
CHIBOUB Chakib 2024-07-24 20:37:23 +02:00
parent f94083810c
commit 63ee8bc75b
3 changed files with 45 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
pong/game/game.py
View File

@ -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:

34
pong/static/game.js
View File

@ -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());
}
}

2
pong/static/index.html
View File

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