autofocus and key handling in the frontend forms

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

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

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>