chatf

pong/game/migrations/0002_alter_match_winner.py

@@ -0,0 +1,19 @@
+# Generated by Django 5.1.1 on 2024-09-15 16:40
+
+import django.db.models.deletion
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('game', '0001_initial'),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name='match',
+            name='winner',
+            field=models.ForeignKey(null=True, on_delete=django.db.models.deletion.CASCADE, related_name='won_matches', to='game.player'),
+        ),
+    ]

pong/static/game.js

@@ -948,6 +948,8 @@ document.addEventListener('DOMContentLoaded', () => {
 			}
 		
 			this.switchRoom(roomName);
+			// Activer l'affichage du conteneur de chat
+    		document.getElementById('chat-container').style.display = 'flex';
 		}
 }
 

pong/static/index.html

@@ -198,6 +198,11 @@
 	<script src="{% static 'burger.js' %}"></script>
 	<script src="{% static 'language.js' %}"></script>
 
+	<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">
@@ -232,9 +237,22 @@
 
     <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() {
@@ -256,9 +274,21 @@
                     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';
                         }
                     });
 

pong/static/styles.css

@@ -475,30 +475,6 @@ canvas {
 }
 
 /**************************CHAT*************************************/
-@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;
-    }
-}
-
-@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;
-    }
-}
-
 @keyframes borderGlow {
 	0% {
 		box-shadow: 0 0 30px #00ffff, inset 0 0 20px #00ffff;
@@ -510,36 +486,27 @@ canvas {
 		box-shadow: 0 0 30px #00ffff, inset 0 0 20px #00ffff;
 	}
 }
-/* Styles pour le conteneur principal du chat */
+
 #chat-container {
+	display: none; /* Masquer par défaut */
 	position: fixed;
 	bottom: 10px;
 	left: 10px;
 	width: 300px;
-    background-color: rgba(0, 0, 0, 0.7);
+	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;
-    display: flex;
 	flex-direction: column;
 	animation: borderGlow 3s infinite; /* Ajouter l'animation */
 	transition: background-color 0.3s, transform 0.3s; /* Ajouter des transitions */
 }
 
-/* Styles pour le conteneur du chat log */
+#chat-container:hover {
-#chat-log-container {
+	background-color: rgba(0, 0, 0, 1); /* Couleur de fond opaque au survol */
-    width: 100%;
+	transform: scale(1.05); /* Agrandir légèrement au survol */
-    background-color: transparent;
-    padding: 10px;
-    border-radius: 10px;
-    color: #fff;
-    font-size: 14px;
-    max-height: 150px;
-    margin-bottom: 10px;
-    box-sizing: border-box;
-    flex: 1;
 }
 
 .chat-log {
@@ -551,25 +518,13 @@ canvas {
 	display: none;
 }
 
-/* Styles pour l'entrée de texte du chat */
-#chat-input-container {
-    width: 100%;
-    display: flex;
-    flex-direction: column;
-    background-color: transparent;
-    padding: 5px;
-    border-radius: 10px;
-    box-sizing: border-box;
-    margin-bottom: 5px;
-}
-
 .chat-input {
 	display: flex;
 	flex-direction: row;
 	align-items: center;
 	justify-content: center;
 	margin-bottom: 5px;
-    display: none; /* Masquer par défaut */
+	position: relative; /* Assurez-vous que le conteneur parent est positionné */
 }
 
 .chat-input.active {
@@ -584,19 +539,23 @@ canvas {
     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: 225px;
+	width: 50px; /* Réduire la taille du bouton */
 	border: none;
 	border-radius: 50%;
 	background: linear-gradient(45deg, #00ffff, #0099ff);
 	color: #000033;
 	cursor: pointer;
-    margin-left: 15px;
+	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;
@@ -610,14 +569,25 @@ canvas {
 
 .chat-button:hover {
 	background: linear-gradient(45deg, #0099ff, #00ffff);
-    transform: scale(1.1);
+	transform: translateY(-50%) scale(1.1); /* Agrandir légèrement au survol */
 }
 
 .chat-button:active {
-    transform: scale(0.95);
+	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;
+	}
 }
 
-/* Styles pour les onglets de room */
 #room-tabs-container {
 	display: flex;
 	justify-content: space-between;
@@ -654,3 +624,59 @@ canvas {
 	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; /* Ajuster la position à côté du conteneur de chat */
+    display: flex;
+    flex-direction: column;
+    gap: 5px; /* Espacement entre les boutons */
+}
+
+#chat-controls button {
+    width: 100px; /* Réduire la taille des boutons */
+    height: 30px; /* Réduire la taille des boutons */
+    font-size: 12px; /* Ajuster 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;
+    }
+}