pb

makefile

@@ -28,11 +28,11 @@ destroy:
 logs:
 	$(COMPOSE) logs -f $(CONTAINER)
 
+re: destroy up
+
 ps:
 	$(COMPOSE) ps
 
-re: destroy up
-
 db-shell:
 	$(COMPOSE) exec db psql -U 42student players_db 
 
@@ -48,4 +48,3 @@ help:
 	@echo "  make logs [c=service]         # Tail logs of containers"
 	@echo "  make ps                       # List containers"
 	@echo "  make help                     # Show this help"
-

pong/game/views.py

@@ -15,11 +15,6 @@ from django.views.decorators.csrf import csrf_exempt
 import json
 import uuid
 
-
-def index(request):
-    return render(request, 'index.html')
-
-
 @csrf_exempt
 def register_user(request):
     if request.method == 'POST':

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();
@@ -29,85 +31,6 @@ document.addEventListener('DOMContentLoaded', () => {
     loginButton.addEventListener('click', handleLogin);
 
 
-    /// THEOUCHE NOT CERTAIN ///
-    async function createPlayer(name, totalMatch = 0, totalWin = 0, pWin = null, mScoreMatch = null, mScoreAdvMatch = null, bestScore = 0, mNbrBallTouch = null, totalDuration = null, mDuration = null, numParticipatedTournaments = 0, numWonTournaments = 0) {
-        try {
-            const response = await fetch('/api/create_player/', {
-                method: 'POST',
-                headers: {
-                    'Content-Type': 'application/json'
-                },
-                body: JSON.stringify({
-                    name,
-                    total_match: totalMatch,
-                    total_win: totalWin,
-                    p_win: pWin,
-                    m_score_match: mScoreMatch,
-                    m_score_adv_match: mScoreAdvMatch,
-                    best_score: bestScore,
-                    m_nbr_ball_touch: mNbrBallTouch,
-                    total_duration: totalDuration,
-                    m_duration: mDuration,
-                    num_participated_tournaments: numParticipatedTournaments,
-                    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);
-            alert(`Failed to create player: ${error.message}`);
-        }
-    }
-
-    async function createTournoi(name, nbr_player, date, winner_id) {
-        try {
-            const response = await fetch('/api/create_tournoi/', {
-                method: 'POST',
-                headers: {
-                    'Content-Type': 'application/json'
-                },
-                body: JSON.stringify({ name, nbr_player, date, winner_id })
-            });
-            if (!response.ok) {
-                throw new Error('Network response was not ok');
-            }
-            const data = await response.json();
-            return data;
-        } catch (error) {
-            console.error('Error creating tournoi:', error);
-        }
-    }
-
-    async function createMatch(player1_id, player2_id, score_player1, score_player2, nbr_ball_touch_p1, nbr_ball_touch_p2, duration, is_tournoi, tournoi_id) {
-        try {
-            const response = await fetch('/api/create_match/', {
-                method: 'POST',
-                headers: {
-                    'Content-Type': 'application/json'
-                },
-                body: JSON.stringify({ player1_id, player2_id, score_player1, score_player2, nbr_ball_touch_p1, nbr_ball_touch_p2, duration, is_tournoi, tournoi_id })
-            });
-            if (!response.ok) {
-                throw new Error('Network response was not ok');
-            }
-            const data = await response.json();
-            return data;
-        } catch (error) {
-            console.error('Error creating match:', error);
-        }
-    }
-
-    /// THEOUCHE NOT CERTAIN ///
-
     async function handleCheckNickname() {
         const nickname = nicknameInput.value.trim();
         if (nickname) {
@@ -118,7 +41,7 @@ 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();
@@ -129,10 +52,10 @@ document.addEventListener('DOMContentLoaded', () => {
                     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();
@@ -173,6 +96,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 +132,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.');
@@ -280,6 +205,7 @@ document.addEventListener('DOMContentLoaded', () => {
     }
 
     function handleKeyDown(event) {
+        console.log('Key press: ', event.key);
         if (event.key === 'ArrowUp' || event.key === 'ArrowDown') {
             sendKeyPress(event.key.toLowerCase());
         }

pong/static/index.html

@@ -1,13 +1,31 @@
 {% load static %}
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Pong Game</title>
     <link rel="stylesheet" type="text/css" href="{% static 'styles.css' %}">
+    <div class="logo">
+        <img src="{% static 'logo-42-perpignan.png' %}" alt="Logo">
+    </div>
+
 </head>
+
 <body>
+    <div class="background">
+        <div class="stars" id="stars"></div>
+    </div>
+    <div class="pong-elements">
+        <div class="paddle paddle-left"></div>
+        <div class="paddle paddle-right"></div>
+        <div class="ball_anim"></div>
+    </div>
+
+    <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">
@@ -25,6 +43,9 @@
                 <input type="password" id="login-password" name="login-password">
                 <button id="login">Login</button>
             </div>
+        </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>
@@ -38,5 +59,21 @@
         </div>
     </div>
     <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);
+        }
+
+        setInterval(createTrail, 100);
+    </script>
 </body>
+
 </html>

pong/static/styles.css

@@ -1,15 +1,18 @@
 /* General styles */
-body {
+body,
+html {
     font-family: Arial, sans-serif;
-    color: #ffffff;
-    background-color: #000000;
+    color: #00ffff;
+    background-color: #0a0a2a;
     margin: 0;
     padding: 0;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
-    height: 100vh;
+    height: 100%;
+    overflow: hidden;
+
 }
 
 label {
@@ -23,8 +26,23 @@ 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;
+}
+
+button:hover {
+    background-color: #000033;
+    color: #00ffff;
+    box-shadow: 0 0 20px #00ffff;
 }
 
 #game1 {
@@ -32,6 +50,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;
@@ -55,11 +75,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 {
@@ -69,7 +91,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;
@@ -82,11 +105,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 {
@@ -107,7 +132,122 @@ button {
 #ball {
     width: 20px;
     height: 20px;
-    background-color: #ff0000;
+    background-color: #ffffff;
     border-radius: 50%;
     position: absolute;
 }
+
+.logo {
+    position: absolute;
+    top: 20px;
+    left: 20px;
+    font-size: 3rem;
+    color: #00ffff;
+    text-shadow: 0 0 15px #00ffff;
+    z-index: 20;
+}
+
+.stars {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+}
+
+.star {
+    position: absolute;
+    background-color: #ffffff;
+    border-radius: 50%;
+    animation: twinkle 2s infinite alternate;
+}
+
+.background {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 0;
+    pointer-events: none;
+}
+
+.pong-elements {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 5;
+    pointer-events: none;
+}
+
+.paddle {
+    position: absolute;
+    width: 20px;
+    height: 100px;
+    background-color: #00ffff;
+    border-radius: 10px;
+    box-shadow: 0 0 15px #00ffff;
+}
+
+.paddle-left {
+    left: 50px;
+    animation: paddleMove 5s infinite alternate ease-in-out;
+}
+
+.paddle-right {
+    right: 50px;
+    animation: paddleMove 4s infinite alternate-reverse ease-in-out;
+}
+
+.ball_anim {
+    position: absolute;
+    width: 30px;
+    height: 30px;
+    background-color: #00ffff;
+    border-radius: 50%;
+    box-shadow: 0 0 20px #00ffff;
+    left: 80px;
+    top: 50%;
+    transform-style: preserve-3d;
+    animation: ballMove 3s linear infinite;
+}
+
+@keyframes paddleMove {
+    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);
+    }
+}
+
+.input-container {
+    margin-bottom: 2rem;
+}
+
+.container {
+    text-align: center;
+    background-color: rgba(0, 0, 40, 0.8);
+    padding: 3rem;
+    border-radius: 15px;
+    border: 3px solid #00ffff;
+    box-shadow: 0 0 30px #00ffff, inset 0 0 20px #00ffff;
+    position: relative;
+    z-index: 10;
+    max-width: 80%;
+}