fixed game menu visual incongruencies

pong/static/burger.js

@@ -8,8 +8,6 @@ document.addEventListener('DOMContentLoaded', () => {
     const tournoiList = document.getElementById('tournoi-list');
     const blockchainList = document.getElementById('blockchain-list');
 
-    const logo = document.querySelector('.logo');
-
     menuButton.addEventListener('click', toggleMenu);
 
     function toggleMenu() {
@@ -27,7 +25,6 @@ document.addEventListener('DOMContentLoaded', () => {
         if (matchList) matchList.style.display = 'none';
         if (tournoiList) tournoiList.style.display = 'none';
         if (blockchainList) blockchainList.style.display = 'none';
-        logo.style.display = 'block';
     }
 
     const links = document.querySelectorAll('#dropdown-menu a');
@@ -42,7 +39,6 @@ document.addEventListener('DOMContentLoaded', () => {
     
     function showTable(tableId) {
         hideAllTables();
-        logo.style.display = 'none';
         
         if (tableId === 'player-list') {
             playerList.style.display = 'block';
@@ -262,9 +258,6 @@ document.addEventListener('DOMContentLoaded', () => {
             return ;
         }
 
-        if (logo.style.display === 'block'){
-            logo.style.display = 'none';
-        }
         const rows = document.querySelectorAll('#player-list tbody tr');
         const playerNames = [];
         const totalMatches = [];
@@ -401,4 +394,4 @@ document.addEventListener('DOMContentLoaded', () => {
         return color;
     }
 
-});
+});

pong/static/game.js

@@ -30,6 +30,8 @@ document.addEventListener('DOMContentLoaded', () => {
     const gameContainer = document.getElementById('game1');
     const tournamentContainer = document.getElementById('tournament-bracket');
 
+    const burgerMenu = document.querySelector('.navbar');
+
     const pongElements = document.getElementById('pong-elements');
     const logo = document.querySelector('.logo');
 
@@ -161,6 +163,9 @@ document.addEventListener('DOMContentLoaded', () => {
             if (result) {
                 loginForm.style.display = 'none';
                 document.getElementById("post-form-buttons").style.display = 'block';
+                burgerMenu.style.display = 'block';
+                logo.style.display = 'none';
+                pongElements.style.display = 'none';        
             } else {
                 alert('Authentication failed. Please try again.');
             }
@@ -325,8 +330,6 @@ document.addEventListener('DOMContentLoaded', () => {
             player2_name: nickname2
         };
         gameContainer.style.display = 'flex';
-        logo.style.display = 'none';
-        pongElements.style.display = 'none';
         formBlock.style.display = 'none';
         startWebSocketConnection(token, 2);
     }
@@ -336,8 +339,6 @@ document.addEventListener('DOMContentLoaded', () => {
             type: 'quick'
         }
         gameContainer.style.display = 'flex';
-        logo.style.display = 'none';
-        pongElements.style.display = 'none';
         formBlock.style.display = 'none';
         document.getElementById('player1-name').textContent = "player 1";
         document.getElementById('player2-name').textContent = "player 2";
@@ -353,8 +354,6 @@ document.addEventListener('DOMContentLoaded', () => {
             type: 'tournoi'
         }
         tournamentContainer.style.display = 'flex';
-        logo.style.display = 'none';
-        pongElements.style.display = 'none';
         formBlock.style.display = 'none';
         startWebSocketConnection(token, 42);
     }
@@ -398,7 +397,7 @@ document.addEventListener('DOMContentLoaded', () => {
                 console.error(data.message);
             } else if (data.type === 'update_tournament_waiting_room') {
                 // Update the HTML content of the tournament bracket
-                document.getElementById('tournament-bracket').innerHTML = data.html;
+                tournamentContainer.innerHTML = data.html;
                 // Reattach the event listener to the "Start Tournament" button
                 const startButton = document.getElementById('start-tournament-btn');
                 if (startButton) {
@@ -413,7 +412,7 @@ document.addEventListener('DOMContentLoaded', () => {
                 }
             } else if (data.type === 'update_brackets') {
                 // Update the HTML content of the tournament bracket
-                document.getElementById('tournament-bracket').innerHTML = data.html;
+                tournamentContainer.innerHTML = data.html;
             } else if (data.type === 'tournament_end') {
                 console.log('Tournament ended, the winner is:', data.winner);
             } else {
@@ -487,12 +486,8 @@ document.addEventListener('DOMContentLoaded', () => {
     homeButton.addEventListener('click', () => {
         gameContainer.style.display = 'none';
         gameControls.style.display = 'none';
-
-        logo.style.display = 'block'
-
         formBlock.style.display = 'block';
-        postFormButtons.style.display = 'flex';
-    
+        postFormButtons.style.display = 'block';    
         setupFirstPlayer();
     });
 

pong/static/index.html

@@ -92,7 +92,7 @@
         </div>
     </div>
 
-    <div class="navbar">
+    <div class="navbar" style="display: none;">
         <button class="burger-menu">☰</button>
         <div id="dropdown-menu" class="dropdown-content">
             <a href="#" data-table="player-list">Players</a>
@@ -104,11 +104,6 @@
 
     <div id="tournament-bracket" style="display: none;"></div>
 
-    <div id="game-controls" style="display: none;">
-        <button id="home">Home</button>
-        <button id="retry">Rejouer</button>
-    </div>
-
     <div id="game1" style="display: none;">
         <div id="player1-name" class="name"></div>
         <div id="player2-name" class="name"></div>
@@ -122,6 +117,11 @@
         </div>
     </div>
 
+    <div id="game-controls" style="display: none;">
+        <button id="home">Home</button>
+        <button id="retry">Rejouer</button>
+    </div>
+
     <div id="match-list" class="content-list" style="display: none;">
         <h1>Matches</h1>
         <input type="text" id="search-match-player" placeholder="Rechercher par nom de joueur">

pong/static/styles.css

@@ -258,7 +258,6 @@ button:hover {
     overflow: auto;
 }
 
-
 .navbar {
     position: absolute;
     top: 30px;
@@ -401,7 +400,7 @@ pre {
     white-space: pre-wrap;
     word-wrap: break-word;
 }
-/*
+
 .tournament-waiting-room {
     background-color: rgba(0, 0, 0, 0.6);
     padding: 20px;
@@ -432,7 +431,7 @@ pre {
     list-style-type: none;
     padding: 0;
 }
-*/
+
 body {
     color: rgb(0, 255, 255); /* Valeur par défaut */
     font-family: Arial, sans-serif;