burger bouton, need to improve css pour liste et affiche des tableaux

pong/static/game.js

@@ -1,4 +1,5 @@
 document.addEventListener('DOMContentLoaded', () => {
+    console.log('DOMContentLoaded event fired'); 
     const checkNicknameButton = document.getElementById('check-nickname');
     const registerButton = document.getElementById('register');
     const loginButton = document.getElementById('login');
@@ -11,9 +12,13 @@ document.addEventListener('DOMContentLoaded', () => {
     const loginForm = document.getElementById('login-form');
     const registerForm = document.getElementById('register-form');
     const formBlock = document.getElementById('block-form');
-    const viewSelector = document.getElementById('view-selector');
+    //const viewSelector = document.getElementById('view-selector');
+    //const viewPlayersButton = document.getElementById('view-players');
+    //const viewMatchesButton = document.getElementById('view-matches');
+    const menuButton = document.querySelector('.burger-menu');
     const playerList = document.getElementById('player-list');
     const matchList = document.getElementById('match-list');
+    const dropdownMenu = document.getElementById('dropdown-menu');
 
 
     let socket;
@@ -244,22 +249,75 @@ document.addEventListener('DOMContentLoaded', () => {
         player2Score.textContent = gameState.player2_score;
     }
 
-    viewSelector.addEventListener('change', function() {
+    // viewSelector.addEventListener('change', function() {
-        const selectedView = this.value;
+      //  const selectedView = this.value;
         
         // Masquer les deux listes par défaut
-        playerList.style.display = 'none';
+       // playerList.style.display = 'none';
-        matchList.style.display = 'none';
+       // matchList.style.display = 'none';
 
         // Afficher la liste sélectionnée
-        if (selectedView === 'player-list') {
+       // if (selectedView === 'player-list') {
+       //     playerList.style.display = 'block';
+       //     fetchPlayers();
+        //} else if (selectedView === 'match-list') {
+        //    matchList.style.display = 'block';
+        //    fetchMatches();
+        //}
+    //}) 
+
+    console.log('Here');
+
+    function toggleMenu() {
+        console.log('Menu toggled');
+        if (dropdownMenu.style.display === "block") {
+            dropdownMenu.style.display = "none";
+        } else {
+            dropdownMenu.style.display = "block";
+        }
+    }
+
+    function showTable(tableId) {
+        // Masquer tous les tableaux
+        if (playerList) {
+            playerList.style.display = 'none';
+        }
+        if (matchList) {
+            matchList.style.display = 'none';
+        }
+
+        // Afficher le tableau sélectionné
+        if (tableId === 'player-list') {
+            if (playerList) {
                 playerList.style.display = 'block';
+            }
             fetchPlayers();
-        } else if (selectedView === 'match-list') {
+        } else if (tableId === 'match-list') {
+            if (matchList) {
                 matchList.style.display = 'block';
+            }
             fetchMatches();
         }
-    })
+
+        // Masquer le menu après la sélection
+        if (dropdownMenu) {
+            dropdownMenu.style.display = 'none';
+        }
+    }
+
+    // Ajouter les gestionnaires d'événements
+    if (menuButton) {
+        menuButton.addEventListener('click', toggleMenu);
+    }
+
+    const links = document.querySelectorAll('#dropdown-menu a');
+    links.forEach(link => {
+        link.addEventListener('click', (event) => {
+            event.preventDefault(); // Empêche le comportement par défaut du lien
+            const tableId = link.getAttribute('data-table');
+            showTable(tableId);
+        });
+    });
 
     function fetchMatches() {
         fetch('/api/match_list/')

pong/static/index.html

@@ -45,12 +45,12 @@
         </div>
     </div>
 
-    <div class="menu">
+    <div class="navbar">
-        <select id="view-selector">
+        <button class="burger-menu">☰</button>
-            <option value="none">-- Select View --</option>
+        <div id="dropdown-menu" class="dropdown-content">
-            <option value="player-list">Players</option>
+            <a href="#" data-table="player-list">Players</a>
-            <option value="match-list">Matches</option>
+            <a href="#" data-table="match-list">Matches</a>
-        </select>
+        </div>
     </div>
 
     <div id="game1" style="display: none;">
@@ -66,9 +66,9 @@
         </div>
     </div>
 
-    <div id="match-list" style="display: none;">
+    <div id="match-list" class="content-list" style="display: none;">
-        <h1>Matches List</h1>
+        <h1>Matches</h1>
-        <table border="1">
+        <table>
             <thead>
                 <tr>
                     <th>ID</th>
@@ -110,9 +110,9 @@
         </table>
     </div>
 
-    <div id="player-list" style="display: none;">
+    <div id="player-list" class="content-list" style="display:none;">
-        <h1>Players List</h1>
+        <h1>Players</h1>
-        <table border="1">
+        <table>
             <thead>
                 <tr>
                     <th>ID</th>
@@ -172,6 +172,7 @@
 
         setInterval(createTrail, 100);
         
+
     </script>
 </body>
 

pong/static/styles.css

@@ -1,5 +1,6 @@
 /* General styles */
 body,
+
 html {
     font-family: Arial, sans-serif;
     color: #00ffff;
@@ -252,15 +253,39 @@ button:hover {
     max-width: 80%;
 }
 
-.menu {
+.navbar {
-    margin-top: 20px;
+    position: absolute;
-    text-align: center;
+    top: 0;
+    right: 0;
+    padding: 10px;
 }
 
-select#view-selector {
+.burger-menu {
-    padding: 10px;
+    font-size: 24px;
-    font-size: 16px;
+    background: none;
-    border-radius: 5px;
+    border: none;
-    border: 1px solid #ccc;
+    color: white; 
     cursor: pointer;
 }
+
+.dropdown-content {
+    display: none;
+    position: absolute;
+    right: 0;
+    background-color: #f9f9f9;
+    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
+    z-index: 1;
+}
+
+.dropdown-content a {
+    color: black;
+    padding: 12px 16px;
+    text-decoration: none;
+    display: block;
+}
+
+.dropdown-content a:hover {
+    background-color: #f1f1f1;
+}
+
+.show {display: block;}