versionpostpull

pong/static/burger.js

@@ -75,18 +75,31 @@ document.addEventListener('DOMContentLoaded', () => {
             .catch(error => console.error('Error fetching match data:', error));
     }
 
-    function fetchPlayers(){
+    function fetchPlayers() {
         console.log('Fetching players...');
-        fetch('/api/player_list/')
-            .then(response => response.json())
+        // Retourner la promesse pour permettre l'utilisation de .then() plus tard
+        return fetch('/api/player_list/') 
+            .then(response => {
+                if (!response.ok) {
+                    throw new Error(`HTTP error! Status: ${response.status}`);
+                }
+                return response.json();
+            })
             .then(data => {
                 if (data.players) {
-                    displayPlayers(data.players);
+                    displayPlayers(data.players); // Affiche les joueurs récupérés
+                    return data.players; // Retourne les joueurs pour permettre de les traiter dans un .then
+                } else {
+                    throw new Error('No players found.');
                 }
             })
-            .catch(error => console.error('Error fetching match data:', error));
+            .catch(error => {
+                console.error('Error fetching match data:', error);
+                return null; // En cas d'erreur, retourne null
+            });
     }
-
+    // Expose fetchPlayers globalement
+    window.fetchPlayers = fetchPlayers;
     function fetchTournois(){
         console.log('Fetching tournois...');
         fetch('/api/tournoi_list/')
@@ -103,11 +116,10 @@ document.addEventListener('DOMContentLoaded', () => {
         console.log('Displaying matches:');
         const matchListBody = document.querySelector('#match-list tbody');
         matchListBody.innerHTML = '';
-        
+        const row = document.createElement('tr');
 
         if (matches.length != 0) {
             matches.forEach(match => {
-                const row = document.createElement('tr');
                 row.innerHTML = `
                     <td>${match.id}</td>
                     <td>${match.player1__name}</td>
@@ -125,7 +137,6 @@ document.addEventListener('DOMContentLoaded', () => {
                 matchListBody.appendChild(row);
             });
         } else {
-            const row = document.createElement('tr');
             row.innerHTML = `
                 <td colspan="12">No matches found.</td>
             `;
@@ -137,11 +148,10 @@ document.addEventListener('DOMContentLoaded', () => {
         console.log('Displaying players:');
         const playersListBody = document.querySelector('#player-list tbody');
         playersListBody.innerHTML = '';
-        
+        const row = document.createElement('tr');
 
         if (players.length != 0) {
             players.forEach(player => {
-                const row = document.createElement('tr');
                 row.innerHTML = `
                     <td>${player.id}</td>
                     <td>${player.name}</td>
@@ -160,9 +170,8 @@ document.addEventListener('DOMContentLoaded', () => {
                 playersListBody.appendChild(row);
             });
         } else {
-            const row = document.createElement('tr');
             row.innerHTML = `
-                <td colspan="12">No player found.</td>
+                <td colspan="12">No matches found.</td>
                 `
             playersListBody.appendChild(row);
         }
@@ -172,25 +181,22 @@ document.addEventListener('DOMContentLoaded', () => {
         console.log('Displaying tournois:');
         const tournoisListBody = document.querySelector('#tournoi-list tbody');
         tournoisListBody.innerHTML = '';
+        const row = document.createElement('tr');
 
         if (tournois.length != 0) {
             tournois.forEach(tournoi => {
-                console.log('Winner:', tournoi.winner); //debug !!!!!!!!!!!!!!!!!
-                console.log('Winner:', tournoi.winner__name); //debug !!!!!!!!!!!!!!!!!
-                const row = document.createElement('tr');
                 row.innerHTML = `
                     <td>${tournoi.id}</td>
                     <td>${tournoi.name}</td>
                     <td>${tournoi.nbr_player}</td>
                     <td>${tournoi.date}</td>
-                    <td>${tournoi.winner ? tournoi.winner.name : 'No one yet ...'}</td>
+                    <td>${tournoi.winner ? tournoi.winner.name : 'None'}</td>
                     `;
                 tournoisListBody.appendChild(row);
             });
         } else {
-            const row = document.createElement('tr');
             row.innerHTML = `
-                <td colspan="12">No tournoi found.</td>
+                <td colspan="12">No matches found.</td>
                 `
             tournoisListBody.appendChild(row);
         }

pong/static/index.html

@@ -200,9 +200,125 @@
     <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-moment@1.0.0/dist/chartjs-adapter-moment.min.js"></script>
 
-    <script src="{% static 'game.js' %}"></script>
+    
     <script src="{% static 'burger.js' %}"></script>
+    <script src="{% static 'game.js' %}"></script>
     <script src="{% static 'language.js' %}"></script>
 </body>
 
 </html>
+    <div id="player-stats" class="player-stats-popup" style="display: none;">
+        <h3>Player Statistics</h3>
+        <p id="stats-username"></p>
+        <p id="stats-total-matches"></p>
+        <p id="stats-total-wins"></p>
+        <p id="stats-win-percentage"></p>
+        <p id="stats-best-score"></p>
+    </div>
+
+	    <div id="chat-controls">
+            <button id="show-chat">Afficher le Chat</button>
+            <button id="hide-chat">Masquer le Chat</button>
+        </div>
+
+    <div id="chat-container">
+                <!-- Conteneur des journaux de chat -->
+        <div id="chat-log-container">
+            <div id="chat-log-main_room" class="chat-log" style="display:block;"></div>
+            <div id="chat-log-tournament" class="chat-log" style="display:none;"></div>
+            <div id="chat-log-quick_match" class="chat-log" style="display:none;"></div>
+        </div>
+
+        <!-- Entrées de texte et boutons d'envoi pour chaque room -->
+        <div id="chat-input-container">
+            <div id="chat-input-main_room" class="chat-input active">
+                <input type="text" placeholder="Tapez votre message...">
+                <button id="chat-button-main_room" class="chat-button">➤</button>
+            </div>
+            <div id="chat-input-tournament" class="chat-input">
+                <input type="text" placeholder="Tapez votre message...">
+                <button id="chat-button-tournament" class="chat-button">➤</button>
+            </div>
+            <div id="chat-input-quick_match" class="chat-input">
+                <input type="text" placeholder="Tapez votre message...">
+                <button id="chat-button-quick_match" class="chat-button">➤</button>
+            </div>
+        </div>
+
+        <!-- Conteneur des onglets de room -->
+        <div id="room-tabs-container">
+            <div class="room-tab active" data-room="main_room">Main Room</div>
+            <div class="room-tab" data-room="tournament">Tournament</div>
+            <div class="room-tab" data-room="quick_match">Quick Match</div>
+        </div>
+    </div>
+    
+
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            const chatContainer = document.getElementById('chat-container');
+            const showChatButton = document.getElementById('show-chat');
+            const hideChatButton = document.getElementById('hide-chat');
+
+            showChatButton.addEventListener('click', function() {
+                chatContainer.style.display = 'flex'; // Afficher le conteneur de chat
+            });
+
+            hideChatButton.addEventListener('click', function() {
+                chatContainer.style.display = 'none'; // Masquer le conteneur de chat
+            });
+
+            const tabs = document.querySelectorAll('.room-tab');
+            const chatLogs = document.querySelectorAll('.chat-log');
+            const chatInputs = document.querySelectorAll('.chat-input');
+            const chatButtons = document.querySelectorAll('.chat-button');
+
+            tabs.forEach(tab => {
+                tab.addEventListener('click', function() {
+                    const roomId = this.dataset.room;
+
+                    console.log(`Switching to room: ${roomId}`);
+
+                    // Afficher le journal de chat correspondant
+                    chatLogs.forEach(log => {
+                        if (log.id === `chat-log-${roomId}`) {
+                            log.style.display = 'block';
+                            console.log(`Displaying chat log for: ${roomId}`);
+                        } else {
+                            log.style.display = 'none';
+                        }
+                    });
+
+                    // Afficher l'entrée de texte correspondante
+                    chatInputs.forEach(input => {
+                        if (input.id === `chat-input-${roomId}`) {
+                            input.classList.add('active');
+                            input.style.display = 'flex';
+                            console.log(`Displaying chat input for: ${roomId}`);
+                        } else {
+                            input.classList.remove('active');
+                            input.style.display = 'none';
+                        }
+                    });
+
+                    // Afficher le bouton correspondant
+                    chatButtons.forEach(button => {
+                        if (button.id === `chat-button-${roomId}`) {
+                            button.style.display = 'flex';
+                            console.log(`Displaying chat button for: ${roomId}`);
+                        } else {
+                            button.style.display = 'none';
+                        }
+                    });
+
+                    // Mettre à jour l'onglet actif
+                    tabs.forEach(t => t.classList.remove('active'));
+                    this.classList.add('active');
+                    console.log(`Tab for ${roomId} is now active`);
+                });
+            });
+        });
+    </script>
+</body>
+
+</html>

pong/static/styles.css

@@ -469,4 +469,236 @@ canvas {
     background-color: #000033;
     color: #00ffff;
     box-shadow: 0 0 20px #00ffff;
-}
+}
+
+/**************************CHAT*************************************/
+@keyframes borderGlow {
+	0% {
+		box-shadow: 0 0 30px #00ffff, inset 0 0 20px #00ffff;
+	}
+	50% {
+		box-shadow: 0 0 60px #0099ff, inset 0 0 40px #0099ff;
+	}
+	100% {
+		box-shadow: 0 0 30px #00ffff, inset 0 0 20px #00ffff;
+	}
+}
+
+#chat-container {
+	display: none; /* Masquer par défaut */
+	position: fixed;
+	bottom: 10px;
+	left: 10px;
+	width: 300px;
+	background-color: rgba(0, 0, 0, 0.7); /* Couleur de fond semi-transparente par défaut */
+	border-radius: 10px;
+	padding: 10px;
+	box-shadow: 0 0 30px #00ffff, inset 0 0 20px #00ffff;
+	z-index: 1000;
+	box-sizing: border-box;
+	flex-direction: column;
+	animation: borderGlow 3s infinite; /* Ajouter l'animation */
+	transition: background-color 0.3s, transform 0.3s; /* Ajouter des transitions */
+}
+
+#chat-container:hover {
+	background-color: rgba(0, 0, 0, 1); /* Couleur de fond opaque au survol */
+	transform: scale(1.05); /* Agrandir légèrement au survol */
+}
+
+.chat-log {
+	max-height: 150px;
+	overflow-y: auto;
+	margin-bottom: 10px;
+	box-sizing: border-box;
+	background-color: transparent;
+	display: none;
+}
+
+.chat-input {
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	justify-content: center;
+	margin-bottom: 5px;
+	position: relative; /* Assurez-vous que le conteneur parent est positionné */
+}
+
+.chat-input.active {
+	display: flex; /* Afficher uniquement l'élément actif */
+}
+
+.chat-input input[type="text"] {
+    flex: 1;
+    padding: 5px;
+    font-size: 13px;
+    border: none;
+    border-radius: 5px;
+    box-sizing: border-box;
+    height: 28px;
+    width: 250px; /* Réduire la largeur */
+    align-items: center;
+    justify-content: center;
+}
+
+.chat-button {
+	height: 50px;
+	width: 50px; /* Réduire la taille du bouton */
+	border: none;
+	border-radius: 50%;
+	background: linear-gradient(45deg, #00ffff, #0099ff);
+	color: #000033;
+	cursor: pointer;
+	position: absolute; /* Positionner le bouton de manière absolue */
+	right: 10px; /* Ajuster la position à droite */
+	top: 10%; /* Centrer verticalement */
+	transform: translateY(-50%); /* Centrer verticalement */
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	text-align: center;
+	font-size: 20px;
+	padding: 0;
+	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
+	transition: background 0.3s, transform 0.3s;
+	animation: buttonGlow 3s infinite; /* Ajouter l'animation */
+}
+
+.chat-button:hover {
+	background: linear-gradient(45deg, #0099ff, #00ffff);
+	transform: translateY(-50%) scale(1.1); /* Agrandir légèrement au survol */
+}
+
+.chat-button:active {
+	transform: translateY(-50%) scale(0.95); /* Réduire légèrement à l'activation */
+}
+
+@keyframes buttonGlow {
+	0% {
+		box-shadow: 0 0 10px #00ffff, inset 0 0 5px #00ffff;
+	}
+	50% {
+		box-shadow: 0 0 20px #0099ff, inset 0 0 10px #0099ff;
+	}
+	100% {
+		box-shadow: 0 0 10px #00ffff, inset 0 0 5px #00ffff;
+	}
+}
+
+#room-tabs-container {
+	display: flex;
+	justify-content: space-between;
+	margin-top: 5px;
+}
+
+.room-tab {
+	font-size: 14px;
+	padding: 5px 10px;
+	margin-right: 5px;
+	cursor: pointer;
+	border: 1px solid #00ffff;
+	background-color: #000033;
+	color: #00ffff;
+	border-radius: 5px;
+	box-sizing: border-box;
+	opacity: 0.1;
+	transition: background 0.3s, transform 0.3s; /* Ajouter des transitions */
+	animation: tabGlow 3s infinite; /* Ajouter l'animation */
+}
+
+.room-tab:hover {
+	background-color: #00ffff;
+	color: #000033;
+	transform: scale(1.1); /* Agrandir légèrement au survol */
+}
+
+.room-tab:active {
+	transform: scale(0.95); /* Réduire légèrement à l'activation */
+}
+
+.room-tab.active {
+	background-color: #00ffff;
+	color: #000033;
+	opacity: 1;
+}
+
+@keyframes tabGlow {
+	0% {
+		box-shadow: 0 0 10px #00ffff, inset 0 0 5px #00ffff;
+	}
+	50% {
+		box-shadow: 0 0 20px #0099ff, inset 0 0 10px #0099ff;
+	}
+	100% {
+		box-shadow: 0 0 10px #00ffff, inset 0 0 5px #00ffff;
+	}
+}
+
+#chat-controls {
+    position: fixed;
+    bottom: 10px;
+    left: 320px; /* Correspondre à la position à côté du conteneur de chat */
+    display: flex;
+    flex-direction: column;
+    gap: 5px; /* Espacement entre les boutons */
+}
+
+#chat-controls button {
+    width: 100px; /* Correspondre à la taille des boutons */
+    height: 30px; /* Correspondre à la taille des boutons */
+    font-size: 12px; /* Correspondre à la taille de la police */
+    padding: 5px;
+    border-radius: 5px;
+    cursor: pointer;
+    background-color: #00ffff;
+    color: #000033;
+    border: none;
+    transition: background-color 0.3s, transform 0.3s;
+    animation: buttonGlow 3s infinite; /* Ajouter l'animation */
+}
+
+#chat-controls button:hover {
+    background-color: #0099ff;
+    transform: scale(1.05);
+}
+
+#chat-controls button:active {
+    transform: scale(0.95);
+}
+
+@keyframes buttonGlow {
+    0% {
+        box-shadow: 0 0 10px #00ffff, inset 0 0 5px #00ffff;
+    }
+    50% {
+        box-shadow: 0 0 20px #0099ff, inset 0 0 10px #0099ff;
+    }
+    100% {
+        box-shadow: 0 0 10px #00ffff, inset 0 0 5px #00ffff;
+    }
+}
+
+.player-stats-popup {
+    position: fixed;
+    bottom: 20px;
+    left: 320px; /* Adjust to appear above the chat */
+    width: 300px;
+    background-color: rgba(0, 0, 40, 0.9);
+    color: #00ffff;
+    border-radius: 10px;
+    padding: 15px;
+    box-shadow: 0 0 20px #00ffff, inset 0 0 10px #00ffff;
+    z-index: 2000;
+    transition: transform 0.3s ease-out, opacity 0.3s ease-out;
+}
+
+.player-stats-popup.show {
+    display: block;
+    transform: translateY(0);
+    opacity: 1;
+}
+
+.player-stats-popup.hide {
+    transform: translateY(20px);
+    opacity: 0;
+}