added LOCAL GAME mode

2026-11-09 18:17:07 +01:00 · 2024-08-18 19:34:17 +02:00
parent 0595dccb21
commit f747e4a00f
8 changed files with 339 additions and 106 deletions
--- a/pong/static/game.js
+++ b/pong/static/game.js
@@ -1,26 +1,45 @@
 document.addEventListener('DOMContentLoaded', () => {
-    console.log('DOMContentLoaded event fired'); 
-    const checkNicknameButton = document.getElementById('check-nickname');
-    const registerButton = document.getElementById('register');
-    const loginButton = document.getElementById('login');
+    const formBlock = document.getElementById('block-form');
+
    const authForm = document.getElementById('auth-form');
-    const gameContainer = document.getElementById('game1');
    const nicknameInput = document.getElementById('nickname');
+    const checkNicknameButton = document.getElementById('check-nickname');
+
+    const registerForm = document.getElementById('register-form');
    const passwordInput = document.getElementById('password');
    const confirmPasswordInput = document.getElementById('confirm-password');
-    const loginPasswordInput = document.getElementById('login-password');
+    const registerButton = document.getElementById('register');
+
    const loginForm = document.getElementById('login-form');
-    const registerForm = document.getElementById('register-form');
-    const formBlock = document.getElementById('block-form');
+    const loginPasswordInput = document.getElementById('login-password');
+    const loginButton = document.getElementById('login');
+
+    const authForm2 = document.getElementById('auth-form2');
+    const nicknameInput2 = document.getElementById('nickname2');
+    const checkNicknameButton2 = document.getElementById('check-nickname2');
+
+    const registerForm2 = document.getElementById('register-form2');
+    const passwordInput2 = document.getElementById('password2');
+    const confirmPasswordInput2 = document.getElementById('confirm-password2');
+    const registerButton2 = document.getElementById('register2');
+
+    const loginForm2 = document.getElementById('login-form2');
+    const loginPasswordInput2 = document.getElementById('login-password2');
+    const loginButton2 = document.getElementById('login2');
+
+    const gameContainer = document.getElementById('game1');
+
    const menuButton = document.querySelector('.burger-menu');
+    const dropdownMenu = document.getElementById('dropdown-menu');
+
    const playerList = document.getElementById('player-list');
    const matchList = document.getElementById('match-list');
    const tournoiList = document.getElementById('tournoi-list');
-    const dropdownMenu = document.getElementById('dropdown-menu');

    const pongElements = document.getElementById('pong-elements');
    const logo = document.querySelector('.logo');

+    const localGameButton = document.getElementById('local-game');
    const quickMatchButton = document.getElementById('quick-match');
    const tournamentButton = document.getElementById('tournament');

@@ -41,11 +60,15 @@ document.addEventListener('DOMContentLoaded', () => {
    registerButton.addEventListener('click', handleRegister);
    loginButton.addEventListener('click', handleLogin);

+    checkNicknameButton2.addEventListener('click', handleCheckNickname2);
+    registerButton2.addEventListener('click', handleRegister2);
+    loginButton2.addEventListener('click', handleLogin2);
+
+    localGameButton.addEventListener('click', startLocalGame);
    quickMatchButton.addEventListener('click', startQuickMatch);
    tournamentButton.addEventListener('click', startTournament);


-
    async function handleCheckNickname() {
        const nickname = nicknameInput.value.trim();
        if (nickname) {
@@ -109,13 +132,7 @@ document.addEventListener('DOMContentLoaded', () => {
                const result = await registerUser(nickname, password);
                if (result) {
                    registerForm.style.display = 'none';
-                    //gameContainer.style.display = 'flex';
-                    //formBlock.style.display = 'none';
-                    //logo.style.display = 'none';
-                    pongElements.style.display = 'none';
-                    console.log("new button must appear !");
-                    document.getElementById("post-form-buttons").style.display = 'inline-block';
-                    //startWebSocketConnection(token);
+                    document.getElementById("post-form-buttons").style.display = 'block';
                } else {
                    alert('Registration failed. Please try again.');
                }
@@ -149,13 +166,7 @@ document.addEventListener('DOMContentLoaded', () => {
            const result = await authenticateUser(nickname, password);
            if (result) {
                loginForm.style.display = 'none';
-                //gameContainer.style.display = 'flex';
-                //formBlock.style.display = 'none';
-                //logo.style.display = 'none';
-                //pongElements.style.display = 'none';
-                console.log("new button must appear !");
-                document.getElementById("post-form-buttons").style.display = 'inline-block';
-                //startWebSocketConnection(token);
+                document.getElementById("post-form-buttons").style.display = 'block';
            } else {
                alert('Authentication failed. Please try again.');
            }
@@ -164,18 +175,6 @@ 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',
@@ -191,12 +190,176 @@ document.addEventListener('DOMContentLoaded', () => {
        return data.authenticated;
    }

-    function startWebSocketConnection(token) {
+    // functions to handle the second player
+
+    async function handleCheckNickname2() {
+        const nickname2 = nicknameInput2.value.trim();
+        if (nickname2) {
+            try {
+                const exists = await checkUserExists2(nickname2);
+                if (exists) {
+                    authForm2.style.display = 'none';
+                    loginForm2.style.display = 'block';
+                    // Auto-focus and key handling for LOGIN-FORM2
+                    loginPasswordInput2.focus();
+                    loginPasswordInput2.addEventListener('keypress', function (event) {
+                        if (event.key === 'Enter') {
+                            event.preventDefault();
+                            loginButton2.click();
+                        }
+                    });
+                } else {
+                    authForm2.style.display = 'none';
+                    registerForm2.style.display = 'block';
+                    // Auto-focus and key handling for REGISTER-FORM2
+                    passwordInput2.focus();
+                    passwordInput2.addEventListener('keypress', function (event) {
+                        if (event.key === 'Enter') {
+                            confirmPasswordInput2.focus();
+                            confirmPasswordInput2.addEventListener('keypress', function (event) {
+                                if (event.key === 'Enter') {
+                                    event.preventDefault();
+                                    registerButton2.click();
+                                }
+                            });
+                        }
+                    });
+                }
+            } catch (error) {
+                console.error('Error checking user existence:', error);
+            }
+        } else {
+            alert('Please enter a nickname.');
+        }
+    }
+
+    async function checkUserExists2(username) {
+        const response = await fetch('/check_user_exists/', {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json'
+            },
+            body: JSON.stringify({ username })
+        });
+        const data = await response.json();
+        return data.exists;
+    }
+
+    async function handleRegister2() {
+        const nickname2 = nicknameInput2.value.trim();
+        const password2 = passwordInput2.value.trim();
+        const confirmPassword2 = confirmPasswordInput2.value.trim();
+
+        if (password2 === confirmPassword2) {
+            try {
+                const result = await registerUser2(nickname2, password2);
+                if (result) {
+                    registerForm2.style.display = 'none';
+                    startLocalGame2();
+                } else {
+                    alert('Registration failed. Please try again.');
+                }
+            } catch (error) {
+                console.error('Error registering user:', error);
+            }
+        } else {
+            alert('Passwords do not match.');
+        }
+    }
+
+    async function registerUser2(username, password) {
+        const response = await fetch('/register_user/', {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json'
+            },
+            body: JSON.stringify({ username, password })
+        });
+        const data = await response.json();
+        if (data.registered) {
+            token2 = data.token;
+        }
+        return data.registered;
+    }
+
+    async function handleLogin2() {
+        const nickname2 = nicknameInput2.value.trim();
+        const password2 = loginPasswordInput2.value.trim();
+        try {
+            const result = await authenticateUser2(nickname2, password2);
+            if (result) {
+                loginForm2.style.display = 'none';
+                startLocalGame2();
+            } else {
+                alert('Authentication failed. Please try again.');
+            }
+        } catch (error) {
+            console.error('Error authenticating user:', error);
+        }
+    }
+
+    async function authenticateUser2(username, password) {
+        const response = await fetch('/authenticate_user/', {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json'
+            },
+            body: JSON.stringify({ username, password })
+        });
+        const data = await response.json();
+        if (data.authenticated) {
+            token2 = data.token;
+        }
+        return data.authenticated;
+    }
+
+    function startLocalGame() {
+        console.log("starting a Local Game..");
+        document.getElementById("post-form-buttons").style.display = 'none';
+        authForm2.style.display = 'block';
+        nicknameInput2.focus();
+        nicknameInput2.addEventListener('keypress', function (event) {
+            if (event.key === 'Enter') {
+                event.preventDefault();
+                checkNicknameButton2.click();
+            }
+        });
+    }
+
+    function startLocalGame2() {
+        gameContainer.style.display = 'flex';
+        logo.style.display = 'none';
+        pongElements.style.display = 'none';
+        menuButton.style.display = 'none';
+        formBlock.style.display = 'none';
+        startWebSocketConnection(token, 2);
+    }
+
+    function startQuickMatch() {
+        gameContainer.style.display = 'flex';
+        logo.style.display = 'none';
+        pongElements.style.display = 'none';
+        menuButton.style.display = 'none';
+        formBlock.style.display = 'none';
+        startWebSocketConnection(token, 1);
+    }
+
+    function startTournament() {
+        console.log("For now, do nothing, hurry up and work Senor chaku !!!!")
+    }
+
+    function startWebSocketConnection(token, players) {
        socket = new WebSocket(`ws://${window.location.host}/ws/game/`);

        socket.onopen = function (event) {
            console.log('WebSocket connection established');
-            socket.send(JSON.stringify({ type: 'authenticate', token: token }));
+            if (players === 1) {
+                console.log("Sending token for 1 player game");
+                socket.send(JSON.stringify({ type: 'authenticate', token: token }));
+            } else {
+                console.log("Sending tokens for 2 player game");
+                socket.send(JSON.stringify({ type: 'authenticate2', token_1: token, token_2: token2 }));
+            }
        };

        socket.onmessage = function (event) {
@@ -239,15 +402,15 @@ document.addEventListener('DOMContentLoaded', () => {
    }

    function handleKeyDown(event) {
-        if (event.key === 'ArrowUp' || event.key === 'ArrowDown') {
-            console.log('Key press: ', event.key);
+        if (event.key === 'ArrowUp' || event.key === 'ArrowDown' || event.key === 'w' || event.key === 's') {
+            //console.log('Key press: ', event.key);
            sendKeyPress(event.key.toLowerCase());
        }
    }

    function sendKeyPress(key) {
        if (socket.readyState === WebSocket.OPEN) {
-            console.log('Key sent: ', key);
+            //console.log('Key sent: ', key);
            socket.send(JSON.stringify({ type: 'key_press', key }));
        }
    }
@@ -403,7 +566,6 @@ document.addEventListener('DOMContentLoaded', () => {
            console.log('No players to display');
        }

-
        players.forEach(player => {
            const row = document.createElement('tr');
            row.innerHTML = `
--- a/pong/static/index.html
+++ b/pong/static/index.html
@@ -110,9 +110,27 @@
                <button id="login">Login</button>
            </div>
            <div id="post-form-buttons" style="display: none;">
+                <button id="local-game">Local Game</button>
                <button id="quick-match">Quick Match</button>
                <button id="tournament">Tournament</button>
            </div>
+            <div id="auth-form2" style="display: none;">
+                <label for="nickname" id="label-nickname2">Enter the second player's nickname:</label>
+                <input type="text" id="nickname2" name="nickname">
+                <button id="check-nickname2">Check Nickname</button>
+            </div>
+            <div id="register-form2" style="display: none;">
+                <label for="password" id="label-password2">Enter the second player's password:</label>
+                <input type="password" id="password2" name="password">
+                <label for="confirm-password" id="label-confirm-password2">Confirm the second player's password:</label>
+                <input type="password" id="confirm-password2" name="confirm-password">
+                <button id="register2">Register</button>
+            </div>
+            <div id="login-form2" style="display: none;">
+                <label for="login-password" id="label-login-password2">Enter the second player's password:</label>
+                <input type="password" id="login-password2" name="login-password">
+                <button id="login2">Login</button>
+            </div>
        </div>
    </div>