From 3564ef6ee24b451f88a80dffa8b3a475c15c42ee Mon Sep 17 00:00:00 2001
From: estellon <yestello@student.42perpignan.fr>
Date: Tue, 30 Jul 2024 18:52:14 +0200
Subject: [PATCH] ball

---
 pong/static/game.js    | 24 +++++++-----
 pong/static/index.html | 84 +++++++++++++++++++++---------------------
 pong/static/styles.css | 44 +++++++++++++++++-----
 3 files changed, 91 insertions(+), 61 deletions(-)

diff --git a/pong/static/game.js b/pong/static/game.js
index 8c5a1b1..b7d38cb 100644
--- a/pong/static/game.js
+++ b/pong/static/game.js
@@ -10,6 +10,8 @@ document.addEventListener('DOMContentLoaded', () => {
     const loginPasswordInput = document.getElementById('login-password');
     const loginForm = document.getElementById('login-form');
     const registerForm = document.getElementById('register-form');
+    const formBlock = document.getElementById('block-form');
+
 
     let socket;
     let token;
@@ -17,7 +19,7 @@ document.addEventListener('DOMContentLoaded', () => {
 
     // Auto-focus and key handling for AUTH-FORM
     nicknameInput.focus();
-    nicknameInput.addEventListener('keypress', function(event) {
+    nicknameInput.addEventListener('keypress', function (event) {
         if (event.key === 'Enter') {
             event.preventDefault();
             checkNicknameButton.click();
@@ -52,15 +54,15 @@ document.addEventListener('DOMContentLoaded', () => {
                     num_won_tournaments: numWonTournaments
                 })
             });
-    
+
             if (!response.ok) {
                 const errorData = await response.json();
                 throw new Error(errorData.error || 'Network response was not ok');
             }
-    
+
             const data = await response.json();
             return data;
-    
+
         } catch (error) {
             // Afficher l'erreur avec un message plus spécifique
             console.error('Error creating player:', error.message);
@@ -118,28 +120,28 @@ document.addEventListener('DOMContentLoaded', () => {
                     loginForm.style.display = 'block';
                     // Auto-focus and key handling for LOGIN-FORM
                     loginPasswordInput.focus();
-                    loginPasswordInput.addEventListener('keypress', function(event) {
+                    loginPasswordInput.addEventListener('keypress', function (event) {
                         if (event.key === 'Enter') {
                             event.preventDefault();
                             loginButton.click();
                         }
-                    });                    
+                    });
                 } else {
                     authForm.style.display = 'none';
                     registerForm.style.display = 'block';
                     // Auto-focus and key handling for REGISTER-FORM
                     passwordInput.focus();
-                    passwordInput.addEventListener('keypress', function(event) {
+                    passwordInput.addEventListener('keypress', function (event) {
                         if (event.key === 'Enter') {
                             confirmPasswordInput.focus();
-                            confirmPasswordInput.addEventListener('keypress', function(event) {
+                            confirmPasswordInput.addEventListener('keypress', function (event) {
                                 if (event.key === 'Enter') {
                                     event.preventDefault();
                                     registerButton.click();
                                 }
-                            });        
+                            });
                         }
-                    });                    
+                    });
                 }
             } catch (error) {
                 console.error('Error checking user existence:', error);
@@ -173,6 +175,7 @@ document.addEventListener('DOMContentLoaded', () => {
                     //await createPlayer(nickname);
                     registerForm.style.display = 'none';
                     gameContainer.style.display = 'flex';
+                    formBlock.style.display = 'none';
                     startWebSocketConnection(token);
                 } else {
                     alert('Registration failed. Please try again.');
@@ -208,6 +211,7 @@ document.addEventListener('DOMContentLoaded', () => {
             if (result) {
                 loginForm.style.display = 'none';
                 gameContainer.style.display = 'flex';
+                formBlock.style.display = 'none';
                 startWebSocketConnection(token);
             } else {
                 alert('Authentication failed. Please try again.');
diff --git a/pong/static/index.html b/pong/static/index.html
index e2ff4ed..63fc79c 100644
--- a/pong/static/index.html
+++ b/pong/static/index.html
@@ -1,6 +1,7 @@
 {% load static %}
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -9,42 +10,42 @@
     <div class="logo">
         <img src="{% static 'logo-42-perpignan.png' %}" alt="Logo">
     </div>
-    <div class="background">
-        <div class="stars" id="stars"></div>
-    </div>
-</div>
-<div class="pong-elements">
-    <div class="paddle paddle-left"></div>
-    <div class="paddle paddle-right"></div>
-    <div class="ball_anim"></div>
-</div>
+
 </head>
+
 <body>
     <div class="background">
         <div class="stars" id="stars"></div>
     </div>
-</div>
-<div class="container">
-    <h1>BIENVENUE DANS LE PONG 42</h1>
-    <div class="input-container">
-    <div id="auth-form">
-        <label for="nickname">Enter your nickname:</label>
-        <input type="text" id="nickname" name="nickname">
-        <button id="check-nickname">Check Nickname</button>
+    <div class="pong-elements">
+        <div class="paddle paddle-left"></div>
+        <div class="paddle paddle-right"></div>
+        <div class="ball_anim"></div>
     </div>
-    <div id="register-form" style="display: none;">
-        <label for="password">Enter your password:</label>
-        <input type="password" id="password" name="password">
-        <label for="confirm-password">Confirm your password:</label>
-        <input type="password" id="confirm-password" name="confirm-password">
-        <button id="register">Register</button>
+
+    <div class="container" id="block-form">
+        <h1>BIENVENUE DANS LE PONG 42</h1>
+        <div class="input-container">
+            <div id="auth-form">
+                <label for="nickname">Enter your nickname:</label>
+                <input type="text" id="nickname" name="nickname">
+                <button id="check-nickname">Check Nickname</button>
+            </div>
+            <div id="register-form" style="display: none;">
+                <label for="password">Enter your password:</label>
+                <input type="password" id="password" name="password">
+                <label for="confirm-password">Confirm your password:</label>
+                <input type="password" id="confirm-password" name="confirm-password">
+                <button id="register">Register</button>
+            </div>
+            <div id="login-form" style="display: none;">
+                <label for="login-password">Enter your password:</label>
+                <input type="password" id="login-password" name="login-password">
+                <button id="login">Login</button>
+            </div>
+        </div>
     </div>
-    <div id="login-form" style="display: none;">
-        <label for="login-password">Enter your password:</label>
-        <input type="password" id="login-password" name="login-password">
-        <button id="login">Login</button>
-    </div>
-</div>
+
     <div id="game1" style="display: none;">
         <div id="gameCode" class="game-code">Game Code : </div>
         <div id="player1-name" class="name">Player 1</div>
@@ -60,18 +61,19 @@
     <script src="{% static 'game.js' %}"></script>
     <script>
         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);
+        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);
         }
-       
-setInterval(createTrail, 100);
+
+        setInterval(createTrail, 100);
     </script>
 </body>
-</html>
+
+</html>
\ No newline at end of file
diff --git a/pong/static/styles.css b/pong/static/styles.css
index c07dbd0..3a5bf88 100644
--- a/pong/static/styles.css
+++ b/pong/static/styles.css
@@ -1,5 +1,6 @@
 /* General styles */
-body, html {
+body,
+html {
     font-family: Arial, sans-serif;
     color: #00ffff;
     background-color: #0a0a2a;
@@ -25,8 +26,17 @@ input {
 }
 
 button {
-    padding: 10px 20px;
+    background-color: #00ffff;
+    color: #000033;
+    border: none;
+    padding: 1rem 2rem;
+    font-size: 1.5rem;
     cursor: pointer;
+    transition: all 0.3s ease;
+    border-radius: 10px;
+    margin-top: 1rem;
+    text-transform: uppercase;
+    letter-spacing: 2px;
 }
 
 #game1 {
@@ -34,6 +44,8 @@ button {
     height: 500px;
     position: relative;
     background-color: #000;
+    border: 3px solid #00ffff;
+    box-shadow: 0 0 30px #00ffff, inset 0 0 20px #00ffff;
     overflow: hidden;
     display: flex;
     justify-content: center;
@@ -57,11 +69,13 @@ button {
 }
 
 #player1-name {
-    left: 10px; /* Adjust player score position */
+    left: 10px;
+    /* Adjust player score position */
 }
 
 #player2-name {
-    right: 10px; /* Adjust bot score position */
+    right: 10px;
+    /* Adjust bot score position */
 }
 
 #game2 {
@@ -71,7 +85,8 @@ button {
     position: absolute;
     background-color: #000;
     overflow: hidden;
-    border: 2px solid red; /* Add red border */
+    border: 2px solid white;
+    /* Add red border */
     display: flex;
     justify-content: center;
     align-items: center;
@@ -84,11 +99,13 @@ button {
 }
 
 #player1-score {
-    left: 50px; /* Adjust player score position */
+    left: 50px;
+    /* Adjust player score position */
 }
 
 #player2-score {
-    right: 50px; /* Adjust bot score position */
+    right: 50px;
+    /* Adjust bot score position */
 }
 
 .pad {
@@ -109,7 +126,7 @@ button {
 #ball {
     width: 20px;
     height: 20px;
-    background-color: #ff0000;
+    background-color: #ffffff;
     border-radius: 50%;
     position: absolute;
 }
@@ -190,17 +207,24 @@ button {
 }
 
 @keyframes paddleMove {
-    0% { transform: translateY(10vh); }
-    100% { transform: translateY(70vh); }
+    0% {
+        transform: translateY(10vh);
+    }
+
+    100% {
+        transform: translateY(70vh);
+    }
 }
 
 @keyframes ballMove {
     0% {
         transform: translateZ(0) scale(1);
     }
+
     50% {
         transform: translateZ(-500px) scale(0.5);
     }
+
     100% {
         transform: translateZ(0) scale(1);
     }