theouche merge ok

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;
@@ -103,6 +105,8 @@ document.addEventListener('DOMContentLoaded', () => {
                     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.');
@@ -139,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

@@ -142,12 +142,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%;