diff --git a/game.js b/game.js index 01812cc..ba75f31 100644 --- a/game.js +++ b/game.js @@ -13,6 +13,18 @@ const finalLevelElement = document.getElementById('finalLevel'); const overlayRestartBtn = document.getElementById('overlayRestartBtn'); const confirmUsernameBtn = document.getElementById('confirmUsernameBtn'); +// === GESTION DU MENU === +const mainMenu = document.getElementById('mainMenu'); +const gameWrapper = document.getElementById('gameWrapper'); +const playBtn = document.getElementById('playBtn'); +const scoresBtn = document.getElementById('scoresBtn'); +const backToMenuBtn = document.getElementById('backToMenuBtn'); +const leaderboardModal = document.getElementById('leaderboardModal'); +const closeModalBtn = document.getElementById('closeModalBtn'); +const menuLeaderboard = document.getElementById('menuLeaderboard'); +const leaderboardContainer = document.getElementById('leaderboardContainer'); +const closeLeaderboardBtn = document.getElementById('closeLeaderboardBtn'); + let usernameConfirmed = false; const CELL_SIZE = 20; @@ -1240,6 +1252,89 @@ function animateScore() { } animateScore(); -updateLeaderboard(); -initGame(); +// === GESTION DU MENU === +// Afficher le jeu +playBtn.addEventListener('click', () => { + mainMenu.style.display = 'none'; + gameWrapper.style.display = 'block'; + resetUsernameInput(); + // Toujours initialiser le jeu quand on clique sur JOUER + gameRunning = false; // S'assurer que le jeu est arrêté + initGame(); +}); + +// Retour au menu depuis le jeu +backToMenuBtn.addEventListener('click', () => { + if (confirm('Voulez-vous vraiment retourner au menu ? Votre partie en cours sera perdue.')) { + gameWrapper.style.display = 'none'; + mainMenu.style.display = 'flex'; + gameRunning = false; + } +}); + +// Afficher le classement depuis le menu +scoresBtn.addEventListener('click', () => { + updateMenuLeaderboard(); + leaderboardModal.style.display = 'flex'; +}); + +// Fermer le modal de classement +closeModalBtn.addEventListener('click', () => { + leaderboardModal.style.display = 'none'; +}); + +// Fermer le classement dans le jeu +if (closeLeaderboardBtn) { + closeLeaderboardBtn.addEventListener('click', () => { + leaderboardContainer.style.display = 'none'; + }); +} + +// Fermer le modal en cliquant à l'extérieur +leaderboardModal.addEventListener('click', (e) => { + if (e.target === leaderboardModal) { + leaderboardModal.style.display = 'none'; + } +}); + +// Fonction pour mettre à jour le classement du menu +function updateMenuLeaderboard() { + const scores = getScores(); + menuLeaderboard.innerHTML = ''; + + if (scores.length === 0) { + menuLeaderboard.innerHTML = '
Aucun score enregistré
'; + return; + } + + scores.forEach((entry, index) => { + const item = document.createElement('div'); + item.className = 'leaderboard-item' + (index < 3 ? ' top' : ''); + + const rank = document.createElement('div'); + rank.className = 'leaderboard-rank'; + rank.textContent = (index + 1) + '.'; + + const name = document.createElement('div'); + name.className = 'leaderboard-name'; + name.textContent = entry.username; + + const levelDiv = document.createElement('div'); + levelDiv.className = 'leaderboard-level'; + levelDiv.textContent = 'Niv. ' + (entry.level || 1); + + const scoreDiv = document.createElement('div'); + scoreDiv.className = 'leaderboard-score'; + scoreDiv.textContent = entry.score; + + item.appendChild(rank); + item.appendChild(name); + item.appendChild(levelDiv); + item.appendChild(scoreDiv); + menuLeaderboard.appendChild(item); + }); +} + +// Initialiser seulement le menu au chargement +updateMenuLeaderboard(); diff --git a/index.html b/index.html index bada8ba..6db5640 100644 --- a/index.html +++ b/index.html @@ -7,55 +7,89 @@ -
-
+ +