deb history but still bug

This commit is contained in:
Theouche 2024-09-17 17:33:56 +02:00
parent 9fe444c65d
commit a60498a356
2 changed files with 69 additions and 22 deletions

View File

@ -46,6 +46,7 @@ document.addEventListener('DOMContentLoaded', () => {
// Auto-focus and key handling for AUTH-FORM // Auto-focus and key handling for AUTH-FORM
nicknameInput.focus(); nicknameInput.focus();
nicknameInput.addEventListener('keypress', function (event) { nicknameInput.addEventListener('keypress', function (event) {
history.pushState({ view: 'auth-form' }, '', `#${'auth-form'}`);
if (event.key === 'Enter') { if (event.key === 'Enter') {
event.preventDefault(); event.preventDefault();
checkNicknameButton.click(); checkNicknameButton.click();
@ -127,6 +128,7 @@ document.addEventListener('DOMContentLoaded', () => {
if (result) { if (result) {
registerForm.style.display = 'none'; registerForm.style.display = 'none';
document.getElementById("post-form-buttons").style.display = 'block'; document.getElementById("post-form-buttons").style.display = 'block';
history.pushState({ view: 'post-form-buttons' }, '', `#${'post-form-buttons'}`);
} else { } else {
alert('Registration failed. Please try again.'); alert('Registration failed. Please try again.');
} }
@ -161,6 +163,7 @@ document.addEventListener('DOMContentLoaded', () => {
if (result) { if (result) {
loginForm.style.display = 'none'; loginForm.style.display = 'none';
document.getElementById("post-form-buttons").style.display = 'block'; document.getElementById("post-form-buttons").style.display = 'block';
history.pushState({ view: 'post-form-buttons' }, '', `#${'post-form-buttons'}`);
} else { } else {
alert('Authentication failed. Please try again.'); alert('Authentication failed. Please try again.');
} }
@ -367,12 +370,18 @@ document.addEventListener('DOMContentLoaded', () => {
if (players === 1) { if (players === 1) {
console.log("Sending token for a quick match game"); console.log("Sending token for a quick match game");
socket.send(JSON.stringify({ type: 'authenticate', token: token })); socket.send(JSON.stringify({ type: 'authenticate', token: token }));
/* history.pushState({ view: 'game1' }, '', `#${'game1'}`);
console.log("view quick"); */
} else if (players === 2) { } else if (players === 2) {
console.log("Sending tokens for a local game"); console.log("Sending tokens for a local game");
socket.send(JSON.stringify({ type: 'authenticate2', token_1: token, token_2: token2 })); socket.send(JSON.stringify({ type: 'authenticate2', token_1: token, token_2: token2 }));
/* history.pushState({ view: 'game1' }, '', `#${'game1'}`);
console.log("view local"); */
} else { } else {
console.log("Sending token for a tournament game") console.log("Sending token for a tournament game")
socket.send(JSON.stringify({ type: 'authenticate3', token: token })); socket.send(JSON.stringify({ type: 'authenticate3', token: token }));
/* history.pushState({ view: 'game1' }, '', `#${'game1'}`);
console.log("view tournament"); */
} }
}; };
@ -510,15 +519,53 @@ document.addEventListener('DOMContentLoaded', () => {
function checkForWinner() { function checkForWinner() {
if (gameState.player1_score === 3 || gameState.player2_score === 3) { if (gameState.player1_score === 3 || gameState.player2_score === 3) {
if (saveData.type != "tournoi"){ if (saveData.type != "tournoi"){
gameControls.style.display = 'flex'; if (gameContainer.style.display != 'none'){
homeButton.style.display = 'block'; gameControls.style.display = 'flex';
replayButton.style.display = 'none'; homeButton.style.display = 'block';
console.log(saveData.type); replayButton.style.display = 'none';
if (saveData.type === 'local'){ console.log(saveData.type);
replayButton.style.display = 'block'; if (saveData.type === 'local'){
replayButton.style.display = 'block';
}
} }
} }
} }
} }
const initialView = window.location.hash ? window.location.hash.substring(1) : 'auth-form';
// Écouteur pour les boutons de retour et d'avance du navigateur
window.addEventListener('popstate', (event) => {
const view = event.state ? event.state.view : 'auth-form'; // Utilise l'état sauvegardé
showSection(view);
});
const sections = {
'auth-form': authForm,
'register-form': registerForm,
'login-form': loginForm,
'post-form-buttons': postFormButtons,
'game1': gameContainer,
'auth-form2': authForm2,
'register-form2': registerForm2,
'login-form2': loginForm2
};
function showSection(viewId) {
Object.values(sections).forEach(section => {
section.style.display = 'none';
});
console.log(viewId);
const sectionToShow = sections[viewId];
console.log(sectionToShow);
if (sectionToShow) {
if (viewId == 'auth-form' || viewId == 'post-form-buttons')
console.log("here");
formBlock.style.display = 'block';
sectionToShow.style.display = 'block';
} else {
console.error(`La section avec l'ID "${viewId}" n'a pas été trouvée.`);
}
}
}); });

View File

@ -51,45 +51,45 @@
<div class="container" id="block-form"> <div class="container" id="block-form">
<h1 id="welcome">BIENVENUE DANS LE PONG 42</h1> <h1 id="welcome">BIENVENUE DANS LE PONG 42</h1>
<div class="input-container"> <div class="input-container">
<div id="auth-form"> <section id="auth-form">
<label for="nickname" id="label-nickname">Enter your nickname:</label> <label for="nickname" id="label-nickname">Enter your nickname:</label>
<input type="text" id="nickname" name="nickname"> <input type="text" id="nickname" name="nickname">
<button id="check-nickname">Check Nickname</button> <button id="check-nickname">Check Nickname</button>
</div> </section>
<div id="register-form" style="display: none;"> <section id="register-form" style="display: none;">
<label for="password" id="label-password">Enter your password:</label> <label for="password" id="label-password">Enter your password:</label>
<input type="password" id="password" name="password"> <input type="password" id="password" name="password">
<label for="confirm-password" id="label-confirm-password">Confirm your password:</label> <label for="confirm-password" id="label-confirm-password">Confirm your password:</label>
<input type="password" id="confirm-password" name="confirm-password"> <input type="password" id="confirm-password" name="confirm-password">
<button id="register">Register</button> <button id="register">Register</button>
</div> </section>
<div id="login-form" style="display: none;"> <section id="login-form" style="display: none;">
<label for="login-password" id="label-login-password">Enter your password:</label> <label for="login-password" id="label-login-password">Enter your password:</label>
<input type="password" id="login-password" name="login-password"> <input type="password" id="login-password" name="login-password">
<button id="login">Login</button> <button id="login">Login</button>
</div> </section>
<div id="post-form-buttons" style="display: none;"> <section id="post-form-buttons" style="display: none;">
<button id="local-game">Local Game</button> <button id="local-game">Local Game</button>
<button id="quick-match">Quick Match</button> <button id="quick-match">Quick Match</button>
<button id="tournament">Tournament</button> <button id="tournament">Tournament</button>
</div> </section>
<div id="auth-form2" style="display: none;"> <section id="auth-form2" style="display: none;">
<label for="nickname" id="label-nickname2">Enter the second player's nickname:</label> <label for="nickname" id="label-nickname2">Enter the second player's nickname:</label>
<input type="text" id="nickname2" name="nickname"> <input type="text" id="nickname2" name="nickname">
<button id="check-nickname2">Check Nickname</button> <button id="check-nickname2">Check Nickname</button>
</div> </section>
<div id="register-form2" style="display: none;"> <section id="register-form2" style="display: none;">
<label for="password" id="label-password2">Enter the second player's password:</label> <label for="password" id="label-password2">Enter the second player's password:</label>
<input type="password" id="password2" name="password"> <input type="password" id="password2" name="password">
<label for="confirm-password" id="label-confirm-password2">Confirm the second player's password:</label> <label for="confirm-password" id="label-confirm-password2">Confirm the second player's password:</label>
<input type="password" id="confirm-password2" name="confirm-password"> <input type="password" id="confirm-password2" name="confirm-password">
<button id="register2">Register</button> <button id="register2">Register</button>
</div> </section>
<div id="login-form2" style="display: none;"> <section id="login-form2" style="display: none;">
<label for="login-password" id="label-login-password2">Enter the second player's password:</label> <label for="login-password" id="label-login-password2">Enter the second player's password:</label>
<input type="password" id="login-password2" name="login-password"> <input type="password" id="login-password2" name="login-password">
<button id="login2">Login</button> <button id="login2">Login</button>
</div> </section>
</div> </div>
</div> </div>
@ -110,7 +110,7 @@
<button id="retry">Rejouer</button> <button id="retry">Rejouer</button>
</div> </div>
<div id="game1" style="display: none;"> <section id="game1" style="display: none;">
<div id="player1-name" class="name"></div> <div id="player1-name" class="name"></div>
<div id="player2-name" class="name"></div> <div id="player2-name" class="name"></div>
<div id="game2"> <div id="game2">
@ -121,7 +121,7 @@
<div id="ball"></div> <div id="ball"></div>
<div id="game-text" class="gameText"></div> <div id="game-text" class="gameText"></div>
</div> </div>
</div> </section>
<div id="match-list" class="content-list" style="display: none;"> <div id="match-list" class="content-list" style="display: none;">
<h1>Matches</h1> <h1>Matches</h1>