Merge pull request #8 from OlaketalAmigo/global_chat

chat global fonctionnel (par contre doublons a regler)

srcs/frontend/src/global_chat.js

@@ -24,7 +24,56 @@ export class GlobalChat extends fenetre {
 
         this.applyStyles();
         this.applyEvents();
-        this.connect_sockio_global_chat();
+        // Connexion au chat global est déclenchée via des contrôles dédiés
+        this.connected = false;
+        this.createConnectControls();
+    }
+
+    // Crée les contrôles Connect / Reconnect dans la fenêtre du chat
+    createConnectControls() {
+        this.controls = document.createElement("div");
+        this.controls.style.display = "flex";
+        this.controls.style.gap = "8px";
+        this.controls.style.marginTop = "6px";
+
+        this.connectButton = document.createElement("button");
+        this.connectButton.textContent = "Connecter";
+        this.connectButton.style.padding = "6px 12px";
+        this.connectButton.style.background = "#28a745";
+        this.connectButton.style.color = "white";
+        this.connectButton.style.border = "none";
+        this.connectButton.style.borderRadius = "6px";
+        this.connectButton.style.cursor = "pointer";
+
+        this.reconnectButton = document.createElement("button");
+        this.reconnectButton.textContent = "Reconnecter";
+        this.reconnectButton.style.padding = "6px 12px";
+        this.reconnectButton.style.background = "#007bff";
+        this.reconnectButton.style.color = "white";
+        this.reconnectButton.style.border = "none";
+        this.reconnectButton.style.borderRadius = "6px";
+        this.reconnectButton.style.cursor = "pointer";
+
+        this.controls.append(this.connectButton, this.reconnectButton);
+        this.body.appendChild(this.controls);
+
+        this.connectButton.addEventListener("click", () => this.connect_sockio_global_chat());
+        this.reconnectButton.addEventListener("click", () => this.reconnect_sockio_global_chat());
+    }
+
+    async reconnect_sockio_global_chat() {
+        // Déconnecte et reconnecte le socket si nécessaire
+        if (this.socket) {
+            try {
+                this.socket.close();
+            } catch (e) {
+                // ignore
+            }
+            this.socket = null;
+            this.output.innerHTML += '<div class="system">Reconnexion en cours...</div>';
+        }
+        this.connected = false;
+        await this.connect_sockio_global_chat();
     }
 
     applyStyles() {
@@ -40,7 +89,7 @@ export class GlobalChat extends fenetre {
         this.output.style.flex = "1";
         this.output.style.overflowY = "auto";
         this.output.style.padding = "8px";
-        this.output.style.background = "#f8f9fa";
+        this.output.style.background = "#7fb8f1";
         this.output.style.borderRadius = "6px";
         this.output.style.display = "flex";
         this.output.style.flexDirection = "column";
@@ -81,6 +130,30 @@ export class GlobalChat extends fenetre {
         });
     }
 
+    // Envoie le message courant via Socket.IO
+    sendMessage() {
+        const content = this.input.value.trim();
+        if (!content) return;
+
+        // Envoi au backend si connecté
+        if (this.socket && this.socket.connected) {
+            this.socket.emit("chat-message", { content });
+        } else {
+            this.output.innerHTML += '<div class="system error">Erreur: vous n\'êtes pas connecté au chat global</div>';
+            return;
+        }
+
+        // Affichage immédiat dans l'interface pour feedback utilisateur
+        const div = document.createElement("div");
+        div.className = "chat-message";
+        div.innerHTML = `<strong>Moi:</strong> ${content}`;
+        this.output.appendChild(div);
+        this.output.scrollTop = this.output.scrollHeight;
+
+        // Reset input
+        this.input.value = "";
+    }
+
     async connect_sockio_global_chat() {
         const token = localStorage.getItem("auth_token");
 
@@ -94,6 +167,12 @@ export class GlobalChat extends fenetre {
             return;
         }
 
+        // Si déjà connecté, ne pas tenter de nouveau
+        if (this.socket && this.socket.connected) {
+            this.output.innerHTML += '<div class="system">Déjà connecté au chat global</div>';
+            return;
+        }
+
         if (!window.io) {
             const script = document.createElement("script");
             script.src = "/socket.io/socket.io.js";
@@ -108,13 +187,21 @@ export class GlobalChat extends fenetre {
             });
         }
 
-        this.socket = io({
+        const ioConfig = {
             auth: { token },
             reconnection: true,
             reconnectionAttempts: 5,
             reconnectionDelay: 1000,
             transports: ["websocket", "polling"]
-        });
+        };
+        // Optionnel: se connecter via un port alternatif si défini (ex: pour contourner le proxy)
+        const altPort = window.GLOBAL_CHAT_ALT_PORT;
+        if (altPort) {
+            const host = location.hostname || 'localhost';
+            this.socket = io(`http://${host}:${altPort}`, ioConfig);
+        } else {
+            this.socket = io(ioConfig);
+        }
 
         this.socket.on("connect", () => {
             console.log("→ SOCKET CONNECTÉ ! ID =", this.socket.id);
@@ -140,4 +227,4 @@ export class GlobalChat extends fenetre {
             this.output.scrollTop = this.output.scrollHeight;
         });
     }
-}
+}

srcs/frontend/src/index.html

@@ -4,7 +4,7 @@
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>scribl.lidl_edition</title>
-    <link rel="stylesheet" href="styles.css" />
+    <link rel="stylesheet" href="style.css" />
     <script src="https://cdn.socket.io/4.8.1/socket.io.min.js"></script>
   </head>
   <body>
@@ -30,4 +30,4 @@
   
 </html></script>
   
-</html>
+</html>

srcs/frontend/src/login.js

@@ -109,7 +109,10 @@ export class LoginWindow extends fenetre {
             }
         } 
         else {
-            console.error("ERROR", data);
+            // Afficher une erreur utilisateur plus visible
+            const errMsg = data && data.message ? data.message : "Échec de la connexion";
+            this.message.innerText = errMsg;
+            this.message.style.color = "#ff4d4d";
         }
     }
 

srcs/frontend/src/style.css

@@ -48,3 +48,11 @@ h1 {
   position: fixed;
   z-index: 3;
 }
+
+/* Message styling for system/info messages in windows */
+.system {
+  color: #333;
+}
+.system.error {
+  color: #ff4d4d;
+}