Merge branch 'main' of github.com:AudebertAdrien/ft_transcendence into trash

pong/static/game.js

@@ -20,6 +20,8 @@ document.addEventListener('DOMContentLoaded', () => {
     const matchList = document.getElementById('match-list');
     const dropdownMenu = document.getElementById('dropdown-menu');
 
+    const pongElements = document.getElementById('pong-elements');
+    const logo = document.querySelector('.logo');
 
     let socket;
     let token;
@@ -38,7 +40,6 @@ document.addEventListener('DOMContentLoaded', () => {
     registerButton.addEventListener('click', handleRegister);
     loginButton.addEventListener('click', handleLogin);
 
-
     async function handleCheckNickname() {
         const nickname = nicknameInput.value.trim();
         if (nickname) {
@@ -101,10 +102,11 @@ document.addEventListener('DOMContentLoaded', () => {
             try {
                 const result = await registerUser(nickname, password);
                 if (result) {
-                    //await createPlayer(nickname);
                     registerForm.style.display = 'none';
                     gameContainer.style.display = 'flex';
                     formBlock.style.display = 'none';
+                    logo.style.display = 'none';
+                    pongElements.style.display = 'none';
                     startWebSocketConnection(token);
                 } else {
                     alert('Registration failed. Please try again.');
@@ -141,6 +143,8 @@ document.addEventListener('DOMContentLoaded', () => {
                 loginForm.style.display = 'none';
                 gameContainer.style.display = 'flex';
                 formBlock.style.display = 'none';
+                logo.style.display = 'none';
+                pongElements.style.display = 'none';
                 startWebSocketConnection(token);
             } else {
                 alert('Authentication failed. Please try again.');

pong/static/index.html

@@ -16,7 +16,7 @@
     <div class="background">
         <div class="stars" id="stars"></div>
     </div>
-    <div class="pong-elements">
+    <div id="pong-elements" style="display: flex;">
         <div class="paddle paddle-left"></div>
         <div class="paddle paddle-right"></div>
         <div class="ball_anim"></div>
@@ -169,10 +169,6 @@
             star.style.animationDuration = `${Math.random() * 2 + 1}s`;
             starsContainer.appendChild(star);
         }
-
-        setInterval(createTrail, 100);
-        
-
     </script>
 </body>
 

pong/static/styles.css

@@ -124,16 +124,22 @@ button:hover {
 
 #player1-pad {
     left: 10px;
+    background-color: #00ffff;
+    border-radius: 10px;
+    box-shadow: 0 0 15px #00ffff;
 }
 
 #player2-pad {
     right: 10px;
+    background-color: #00ffff;
+    border-radius: 10px;
+    box-shadow: 0 0 15px #00ffff;
 }
 
 #ball {
     width: 20px;
     height: 20px;
-    background-color: #ffffff;
+    background-color: #00ffff;
     border-radius: 50%;
     position: absolute;
 }
@@ -142,12 +148,14 @@ button:hover {
     position: absolute;
     top: 20px;
     left: 20px;
-    font-size: 3rem;
-    color: #00ffff;
-    text-shadow: 0 0 15px #00ffff;
     z-index: 20;
 }
 
+.logo img {
+    max-width: 100%;
+    height: auto;
+}
+
 .stars {
     position: absolute;
     width: 100%;