interface qui marche

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 = '<div class="empty-leaderboard">Aucun score enregistré</div>';
+        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();