add bouton pour quick match et tournament

pong/static/game.js

@@ -12,9 +12,6 @@ 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 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');
@@ -24,6 +21,9 @@ document.addEventListener('DOMContentLoaded', () => {
     const pongElements = document.getElementById('pong-elements');
     const logo = document.querySelector('.logo');
 
+    const quickMatchButton = document.getElementById('quick-match');
+    const tournamentButton = document.getElementById('tournament');
+
     let socket;
     let token;
     let gameState;
@@ -41,6 +41,11 @@ document.addEventListener('DOMContentLoaded', () => {
     registerButton.addEventListener('click', handleRegister);
     loginButton.addEventListener('click', handleLogin);
 
+    quickMatchButton.addEventListener('click', startQuickMatch);
+    tournamentButton.addEventListener('click', startTournament);
+
+
+
     async function handleCheckNickname() {
         const nickname = nicknameInput.value.trim();
         if (nickname) {
@@ -104,11 +109,13 @@ document.addEventListener('DOMContentLoaded', () => {
                 const result = await registerUser(nickname, password);
                 if (result) {
                     registerForm.style.display = 'none';
-                    gameContainer.style.display = 'flex';
+                    //gameContainer.style.display = 'flex';
-                    formBlock.style.display = 'none';
+                    //formBlock.style.display = 'none';
-                    logo.style.display = 'none';
+                    //logo.style.display = 'none';
                     pongElements.style.display = 'none';
-                    startWebSocketConnection(token);
+                    console.log("new button must appear !");
+                    document.getElementById("post-form-buttons").style.display = 'block';
+                    //startWebSocketConnection(token);
                 } else {
                     alert('Registration failed. Please try again.');
                 }
@@ -133,7 +140,8 @@ document.addEventListener('DOMContentLoaded', () => {
             token = data.token;
         }
         return data.registered;
-    }
+    }quickMatchButton.style.display = 'block';
+    tournamentButton.style.display = 'block';
 
     async function handleLogin() {
         const nickname = nicknameInput.value.trim();
@@ -142,11 +150,13 @@ document.addEventListener('DOMContentLoaded', () => {
             const result = await authenticateUser(nickname, password);
             if (result) {
                 loginForm.style.display = 'none';
-                gameContainer.style.display = 'flex';
+                //gameContainer.style.display = 'flex';
-                formBlock.style.display = 'none';
+                //formBlock.style.display = 'none';
-                logo.style.display = 'none';
+                //logo.style.display = 'none';
-                pongElements.style.display = 'none';
+                //pongElements.style.display = 'none';
-                startWebSocketConnection(token);
+                console.log("new button must appear !");
+                document.getElementById("post-form-buttons").style.display = 'block';
+                //startWebSocketConnection(token);
             } else {
                 alert('Authentication failed. Please try again.');
             }
@@ -155,6 +165,18 @@ document.addEventListener('DOMContentLoaded', () => {
         }
     }
 
+    function startQuickMatch() {
+        gameContainer.style.display = 'flex';
+        logo.style.display = 'none';
+        menuButton.style.display = 'none';
+        formBlock.style.display = 'none';
+        startWebSocketConnection(token);
+    }
+
+    function startTournament() {
+        console.log("For now, do nothing, hurry up and work Senor chaku !!!!")
+    }
+
     async function authenticateUser(username, password) {
         const response = await fetch('/authenticate_user/', {
             method: 'POST',
@@ -254,27 +276,7 @@ document.addEventListener('DOMContentLoaded', () => {
         player2Score.textContent = gameState.player2_score;
     }
 
-    // viewSelector.addEventListener('change', function() {
+    menuButton.addEventListener('click', toggleMenu);
-      //  const selectedView = this.value;
-        
-        // Masquer les deux listes par défaut
-       // playerList.style.display = 'none';
-       // matchList.style.display = 'none';
-
-        // Afficher la liste sélectionnée
-       // if (selectedView === 'player-list') {
-       //     playerList.style.display = 'block';
-       //     fetchPlayers();
-        //} else if (selectedView === 'match-list') {
-        //    matchList.style.display = 'block';
-        //    fetchMatches();
-        //}
-    //}) 
-
-    //if (menuButton) {
-        //console.log("menu bouton ok")
-        menuButton.addEventListener('click', toggleMenu);
-    //}
 
     function toggleMenu() {
         console.log('Menu toggled');

pong/static/index.html

@@ -10,117 +10,9 @@
     <div class="logo">
         <img src="{% static 'logo-42-perpignan.png' %}" alt="Logo">
     </div>
-    <style>
-        .language-switcher {
-            position: absolute;
-            top: 10px;
-            right: 10px;
-            display: flex;
-            gap: 10px;
-        }
-
-        .language-switcher img {
-            width: 30px;
-            height: 20px;
-            cursor: pointer;
-        }
-    </style>
-    <style>
-        body {
-            color: rgb(0, 255, 255); /* Valeur par défaut */
-            font-family: Arial, sans-serif;
-            font-size: 16px;
-        }
-    </style>
-    <style>
-        #settings-btn {
-            position: fixed;
-            bottom: 10px;
-            right: 10px;
-            cursor: pointer;
-            z-index: 1000;
-            border: none;
-            border-radius: 50%;
-            padding: 10px;
-            font-size: 18px;
-        }
-    
-        #settings-menu {
-            position: fixed;
-            bottom: 50px;
-            right: 10px;
-            padding: 20px;
-            background-color: rgb(66, 63, 63);
-            border: 1px solid #ccc;
-            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
-            width: 250px;
-            z-index: 1000;
-        }
-    
-        #close-settings {
-            position: absolute;
-            top: 10px;
-            right: 10px;
-            background: none;
-            border: none;
-            cursor: pointer;
-            font-size: 16px;
-        }
-    </style>
-    <style>
-        .modal {
-            display: none;
-            position: fixed;
-            z-index: 1;
-            left: 0;
-            top: 0;
-            width: 100%;
-            height: 100%;
-            overflow: auto;
-            background-color: rgb(0,0,0);
-            background-color: rgba(0,0,0,0.4);
-            padding-top: 60px;
-        }
-
-        .modal-content {
-            background-color: #fefefe;
-            margin: 5% auto;
-            padding: 20px;
-            border: 5px solid #888;
-            width: 80%;
-            max-height: 70vh;
-            overflow-y: auto;
-        }
-
-        .close {
-            color: #aaa;
-            float: right;
-            font-size: 28px;
-            font-weight: bold;
-        }
-
-        .close:hover,
-        .close:focus {
-            color: black;
-            text-decoration: none;
-            cursor: pointer;
-        }
-
-        pre {
-            white-space: pre-wrap;
-            word-wrap: break-word;
-        }
-    </style>
     
 </head>
 <body>
-    <div class="language-switcher">
-        <img src="{% static 'flags/fr.svg' %}" alt="Français" onclick="changeLanguage('fr')">
-        <img src="{% static 'flags/us.svg' %}" alt="English" onclick="changeLanguage('en')">
-        <img src="{% static 'flags/it.svg' %}" alt="Italiano" onclick="changeLanguage('it')">
-        <img src="{% static 'flags/es.svg' %}" alt="Español" onclick="changeLanguage('es')">
-        <img src="{% static 'flags/de.svg' %}" alt="Deutsch" onclick="changeLanguage('de')">
-    </div>
     <div class="background">
         <div class="stars" id="stars"></div>
     </div>
@@ -129,57 +21,6 @@
         <div class="paddle paddle-right"></div>
         <div class="ball_anim"></div>
     </div>
-    <button id="settings-btn">⚙️ Réglages</button>
-    <div id="settings-menu" style="display: none;">
-        <button id="close-settings">✖️</button>
-        <h2>Reglages</h2>
-        <label for="color-picker">Couleur:</label>
-        <input type="color" id="color-picker">
-        <br>
-        <label for="font-selector">Police:</label>
-        <select id="font-selector">
-            <option value="Arial">Arial</option>
-            <option value="Verdana">Verdana</option>
-            <option value="Times New Roman">Times New Roman</option>
-            <option value="Courier New">Courier New</option>
-        </select>
-        <br>
-        <label for="font-size-slider">Taille:</label>
-        <input type="range" id="font-size-slider" min="12" max="36" value="16">
-    </div>
-    
-
-    <button id="myBtn">Resultat</button>
-    <div id="myModal" class="modal">
-      <div class="modal-content">
-        <span class="close">&times;</span>
-        <pre id="jsonContent"></pre>
-      </div>
-    </div>
-    <script>
-        document.addEventListener('DOMContentLoaded', function() {
-            var modal = document.getElementById("myModal");
-            var btn = document.getElementById("myBtn");
-            var span = document.getElementsByClassName("close")[0];
-            var jsonContent = document.getElementById("jsonContent");
-            btn.onclick = function() {
-                fetch('/web3/')
-                    .then(response => response.json())
-                    .then(data => {
-                        jsonContent.textContent = JSON.stringify(data, null, 2);
-                        modal.style.display = "block";
-                    });
-            }
-            span.onclick = function() {
-                modal.style.display = "none";
-            }
-            window.onclick = function(event) {
-                if (event.target == modal) {
-                    modal.style.display = "none";
-                }
-            }
-        });
-    </script>
     <div class="container" id="block-form">
         <h1 id="welcome">BIENVENUE DANS LE PONG 42</h1>
         <div class="input-container">
@@ -200,6 +41,10 @@
                 <input type="password" id="login-password" name="login-password">
                 <button id="login">Login</button>
             </div>
+            <div id="post-form-buttons" style="display: none;">
+                <button id="quick-match">Quick Match</button>
+                <button id="tournament">Tournament</button>
+            </div>
         </div>
     </div>
 
@@ -347,136 +192,6 @@
     </div>
 
     <script src="{% static 'game.js' %}"></script>
-    <script>
-        const translations = {
-            fr: {
-                welcome: "BIENVENUE DANS LE PONG 42",
-                labelNickname: "Entrez votre surnom:",
-                labelPassword: "Entrez votre mot de passe:",
-                labelConfirmPassword: "Confirmez votre mot de passe:",
-                labelLoginPassword: "Entrez votre mot de passe:"
-            },
-            en: {
-                welcome: "WELCOME TO PONG 42",
-                labelNickname: "Enter your nickname:",
-                labelPassword: "Enter your password:",
-                labelConfirmPassword: "Confirm your password:",
-                labelLoginPassword: "Enter your password:"
-            },
-            it: {
-                welcome: "BENVENUTO A PONG 42",
-                labelNickname: "Inserisci il tuo soprannome:",
-                labelPassword: "Inserisci la tua password:",
-                labelConfirmPassword: "Conferma la tua password:",
-                labelLoginPassword: "Inserisci la tua password:"
-            },
-            es: {
-                welcome: "BIENVENIDO A PONG 42",
-                labelNickname: "Introduce tu apodo:",
-                labelPassword: "Introduce tu contraseña:",
-                labelConfirmPassword: "Confirma tu contraseña:",
-                labelLoginPassword: "Introduce tu contraseña:"
-            },
-            de: {
-                welcome: "WILLKOMMEN BEI PONG 42",
-                labelNickname: "Geben Sie Ihren Spitznamen ein:",
-                labelPassword: "Geben Sie Ihr Passwort ein:",
-                labelConfirmPassword: "Bestätigen Sie Ihr Passwort:",
-                labelLoginPassword: "Geben Sie Ihr Passwort ein:"
-            }
-        };
-
-        function changeLanguage(lang) {
-            document.getElementById('welcome').innerText = translations[lang].welcome;
-            document.getElementById('label-nickname').innerText = translations[lang].labelNickname;
-            document.getElementById('label-password').innerText = translations[lang].labelPassword;
-            document.getElementById('label-confirm-password').innerText = translations[lang].labelConfirmPassword;
-            document.getElementById('label-login-password').innerText = translations[lang].labelLoginPassword;
-        }
-
-        const starsContainer = document.getElementById('stars');
-        for (let i = 0; i < 500; i++) {
-            const star = document.createElement('div');
-            star.className = 'star';
-            star.style.width = `${Math.random() * 3}px`;
-            star.style.height = star.style.width;
-            star.style.left = `${Math.random() * 100}%`;
-            star.style.top = `${Math.random() * 100}%`;
-            star.style.animationDuration = `${Math.random() * 2 + 1}s`;
-            starsContainer.appendChild(star);
-        }
-    </script>
-    <script>
-        function setCookie(name, value, days) {
-            const d = new Date();
-            d.setTime(d.getTime() + (days*24*60*60*1000));
-            const expires = "expires=" + d.toUTCString();
-            document.cookie = name + "=" + value + ";" + expires + ";path=/";
-        }
-    
-        function getCookie(name) {
-            const cname = name + "=";
-            const decodedCookie = decodeURIComponent(document.cookie);
-            const ca = decodedCookie.split(';');
-            for(let i = 0; i < ca.length; i++) {
-                let c = ca[i];
-                while (c.charAt(0) === ' ') {
-                    c = c.substring(1);
-                }
-                if (c.indexOf(cname) === 0) {
-                    return c.substring(cname.length, c.length);
-                }
-            }
-            return "";
-        }
-    
-        function changeLanguage(lang) {
-            setCookie('preferredLanguage', lang, 365);  // Store the language preference for 1 year
-            document.getElementById('welcome').innerText = translations[lang].welcome;
-            document.getElementById('label-nickname').innerText = translations[lang].labelNickname;
-            document.getElementById('label-password').innerText = translations[lang].labelPassword;
-            document.getElementById('label-confirm-password').innerText = translations[lang].labelConfirmPassword;
-            document.getElementById('label-login-password').innerText = translations[lang].labelLoginPassword;
-        }
-    
-        // Function to set the language based on the cookie
-        function setLanguageFromCookie() {
-            const preferredLanguage = getCookie('preferredLanguage');
-            if (preferredLanguage && translations[preferredLanguage]) {
-                changeLanguage(preferredLanguage);
-            } else {
-                changeLanguage('fr'); // Default to French if no cookie is found
-            }
-        }
-    
-        // Set the language when the page loads
-        window.onload = setLanguageFromCookie;
-    </script>
-    <script>
-    document.getElementById('settings-btn').addEventListener('click', function() {
-        document.getElementById('settings-menu').style.display = 'block';
-    });
-
-    document.getElementById('close-settings').addEventListener('click', function() {
-        document.getElementById('settings-menu').style.display = 'none';
-    });
-
-    // Change the color of the text
-    document.getElementById('color-picker').addEventListener('input', function() {
-        document.body.style.color = this.value;
-        document.querySelectorAll('button').forEach(function(button) {
-            button.style.backgroundColor = this.value;  // Change la couleur de fond des boutons
-        }, this);
-    });
-
-    document.getElementById('font-selector').addEventListener('change', function() {
-        document.body.style.fontFamily = this.value;
-    });
-
-    document.getElementById('font-size-slider').addEventListener('input', function() {
-        document.body.style.fontSize = this.value + 'px';
-    });
-    </script>
 </body>
 
 </html>