Persistant rooms

public/index.html

@@ -75,6 +75,14 @@
         button:hover {
             background: #34495e;
         }
+
+        #exitBtn {
+            background: #e74c3c;
+        }
+
+        #exitBtn:hover {
+            background: #c0392b;
+        }
     </style>
 </head>
 
@@ -86,8 +94,16 @@
     <br>
     <button id="restartBtn">🔄 Neustart</button>
     <button id="copyRoomBtn">📋 Link kopieren</button>
+    <button id="exitBtn">🚪 Raum verlassen</button>
 
     <script>
+        // Session Management
+        let sessionId = localStorage.getItem("game_session_id");
+        if (!sessionId) {
+            sessionId = Math.random().toString(36).substring(2) + Date.now().toString(36);
+            localStorage.setItem("game_session_id", sessionId);
+        }
+
         const params = new URLSearchParams(window.location.search);
         let roomId = params.get("room");
 
@@ -96,7 +112,7 @@
         }
 
         const protocol = location.protocol === "https:" ? "wss" : "ws";
-        const ws = new WebSocket(`${protocol}://${location.host}?room=${roomId}`);
+        const ws = new WebSocket(`${protocol}://${location.host}?room=${roomId}&sessionId=${sessionId}`);
         const svg = document.querySelector("svg");
 
         let myRole = null, state = null, selected = null, currentRoomId = null;
@@ -112,19 +128,17 @@
                 myRole = msg.role;
                 currentRoomId = msg.roomId;
                 document.getElementById("roleHeader").innerText = `Du bist: ${myRole.toUpperCase()} | Raum: ${currentRoomId}`;
+                if (!params.has("room")) {
+                    window.history.replaceState({}, '', `?room=${currentRoomId}`);
+                }
             }
-            if (msg.type === "state") {
-                state = msg.game;
-                render();
-            }
+            if (msg.type === "state") { state = msg.game; render(); }
             if (msg.type === "full") alert("Dieser Raum ist leider voll!");
         };
 
         function render() {
             if (!state) return;
             svg.innerHTML = "";
-
-            // Update Status UI
             const statusEl = document.getElementById("status");
             if (state.winner) {
                 statusEl.innerHTML = `<span style="color:${state.winner === myRole ? 'green' : 'red'}">SPIEL ENDE: ${state.winner.toUpperCase()} GEWINNT!</span>`;
@@ -133,17 +147,14 @@
                 statusEl.innerHTML = `${turnText}<br><small>Zug: ${state.moveCount} / 40</small>`;
             }
 
-            // Draw Lines
             edges.forEach(([a, b]) => {
                 const [x1, y1] = pos[a], [x2, y2] = pos[b];
                 const line = document.createElementNS("http://www.w3.org/2000/svg", "line");
-                line.setAttribute("x1", x1); line.setAttribute("y1", y1);
-                line.setAttribute("x2", x2); line.setAttribute("y2", y2);
+                line.setAttribute("x1", x1); line.setAttribute("y1", y1); line.setAttribute("x2", x2); line.setAttribute("y2", y2);
                 line.setAttribute("stroke", "#bdc3c7"); line.setAttribute("stroke-width", "3");
                 svg.appendChild(line);
             });
 
-            // Draw Nodes
             for (let i = 0; i <= 10; i++) {
                 const [x, y] = pos[i];
                 let type = "empty";
@@ -157,7 +168,6 @@
                 const circle = document.createElementNS("http://www.w3.org/2000/svg", "circle");
                 circle.setAttribute("cx", x); circle.setAttribute("cy", y); circle.setAttribute("r", 25);
                 circle.setAttribute("class", `node ${type} ${selected === i ? 'selected' : ''} ${isPossible ? 'possible' : ''}`);
-
                 circle.onclick = () => handleClick(i);
                 svg.appendChild(circle);
 
@@ -172,15 +182,12 @@
 
         function handleClick(i) {
             if (!state || state.turn !== myRole || state.winner) return;
-
-            const isMyPiece = (myRole === "wolf" && state.wolf === i) ||
-                (myRole === "sheep" && state.sheep.includes(i));
-
+            const isMyPiece = (myRole === "wolf" && state.wolf === i) || (myRole === "sheep" && state.sheep.includes(i));
             if (selected === null) {
                 if (isMyPiece) { selected = i; render(); }
             } else {
                 if (isMyPiece) {
-                    selected = (selected === i) ? null : i; // Toggle selection
+                    selected = (selected === i) ? null : i;
                 } else {
                     ws.send(JSON.stringify({ from: selected, to: i }));
                     selected = null;
@@ -190,11 +197,16 @@
         }
 
         document.getElementById("restartBtn").onclick = () => ws.send(JSON.stringify({ type: "restart" }));
-
         document.getElementById("copyRoomBtn").onclick = () => {
             const url = `${location.origin}${location.pathname}?room=${currentRoomId}`;
             navigator.clipboard.writeText(url).then(() => alert("Link kopiert!"));
         };
+        document.getElementById("exitBtn").onclick = () => {
+            if (confirm("Möchtest du den Raum verlassen?")) {
+                ws.send(JSON.stringify({ type: "leave" }));
+                window.location.href = window.location.pathname;
+            }
+        };
     </script>
 </body>