From 91a856e2fd8ca6575bf9ff169a1eda4a992fb28a Mon Sep 17 00:00:00 2001
From: Ladebeze66 <fgras.ca@gmail.com>
Date: Sun, 15 Sep 2024 19:51:33 +0200
Subject: [PATCH] chatf

---
 .../migrations/0002_alter_match_winner.py     |  19 ++
 pong/static/game.js                           |   2 +
 pong/static/index.html                        | 174 ++++++-----
 pong/static/styles.css                        | 274 ++++++++++--------
 4 files changed, 273 insertions(+), 196 deletions(-)
 create mode 100644 pong/game/migrations/0002_alter_match_winner.py

diff --git a/pong/game/migrations/0002_alter_match_winner.py b/pong/game/migrations/0002_alter_match_winner.py
new file mode 100644
index 0000000..c53fc0b
--- /dev/null
+++ b/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'),
+        ),
+    ]
diff --git a/pong/static/game.js b/pong/static/game.js
index ac3daaa..8efd2f6 100644
--- a/pong/static/game.js
+++ b/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';
 		}
 }
 
diff --git a/pong/static/index.html b/pong/static/index.html
index db8d3f4..ed7361d 100644
--- a/pong/static/index.html
+++ b/pong/static/index.html
@@ -198,78 +198,108 @@
 	<script src="{% static 'burger.js' %}"></script>
 	<script src="{% static 'language.js' %}"></script>
 
-	<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 tabs = document.querySelectorAll('.room-tab');
-			const chatLogs = document.querySelectorAll('.chat-log');
-			const chatInputs = document.querySelectorAll('.chat-input');
-	
-			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');
-							console.log(`Displaying chat input for: ${roomId}`);
-						} else {
-							input.classList.remove('active');
-						}
-					});
-	
-					// 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>
+	<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>
 
 	<script>
 		const starsContainer = document.getElementById('stars');
diff --git a/pong/static/styles.css b/pong/static/styles.css
index 7e7354c..f456fd6 100644
--- a/pong/static/styles.css
+++ b/pong/static/styles.css
@@ -475,105 +475,60 @@ 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;
-    }
-    50% {
-        box-shadow: 0 0 60px #0099ff, inset 0 0 40px #0099ff;
-    }
-    100% {
-        box-shadow: 0 0 30px #00ffff, inset 0 0 20px #00ffff;
-    }
+	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;
+	}
 }
-/* Styles pour le conteneur principal du chat */
+
 #chat-container {
-    position: fixed;
-    bottom: 10px;
-    left: 10px;
-    width: 300px;
-    background-color: rgba(0, 0, 0, 0.7);
-    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;
+	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 */
 }
 
-/* Styles pour le conteneur du chat log */
-#chat-log-container {
-    width: 100%;
-    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-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;
-}
-
-/* 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;
+	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;
-    display: none; /* Masquer par défaut */
+	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 */
+	display: flex; /* Afficher uniquement l'élément actif */
 }
 
 .chat-input input[type="text"] {
@@ -584,73 +539,144 @@ canvas {
     border-radius: 5px;
     box-sizing: border-box;
     height: 28px;
-	align-items: center;
+    width: 250px; /* Réduire la largeur */
+    align-items: center;
     justify-content: center;
 }
 
 .chat-button {
-    height: 50px;
-    width: 225px;
-    border: none;
-    border-radius: 50%;
-    background: linear-gradient(45deg, #00ffff, #0099ff);
-    color: #000033;
-    cursor: pointer;
-    margin-left: 15px;
-    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 */
+	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: scale(1.1);
+	background: linear-gradient(45deg, #0099ff, #00ffff);
+	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;
-    margin-top: 5px;
+	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 */
+	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 */
+	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 */
+	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; /* 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;
-    opacity: 1;
+    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;
+    }
 }
\ No newline at end of file