From 42af49fceccd9618855d625a3e4d0b76f8d2d3cc Mon Sep 17 00:00:00 2001
From: ThiML10 <157675695+ThiML10@users.noreply.github.com>
Date: Sat, 27 Apr 2024 02:56:44 +0000
Subject: [PATCH] commit3

---
 html/index.html | 112 ++++++++++++++++++++++++------------------------
 1 file changed, 57 insertions(+), 55 deletions(-)

diff --git a/html/index.html b/html/index.html
index 559946f..2299ef0 100644
--- a/html/index.html
+++ b/html/index.html
@@ -306,68 +306,70 @@ <h2>Timer: <span id="timer">30</span> seconds</h2>
   //////////////////////////////////////////////
     //Welcome and Lobby
 
-    document.getElementById('nickForm').addEventListener('submit', function(event) {
-            event.preventDefault();
-            var nick = document.getElementById('nickInput').value.trim();
-            if (nick) {
-                socket.send(JSON.stringify({ type: "CheckNick", nick: nick }));
-            }
-        });
+   // var socket = new WebSocket("ws://" + window.location.hostname + ":9105");
 
-        document.getElementById('confirmButton').addEventListener('click', function() {
-            var game = document.getElementById('gameSelect').value;
-            var mode = document.getElementById('modeSelect').value;
-            socket.send(JSON.stringify({ type: "JoinGame", game: game, mode: mode }));
-        });
+document.getElementById('nickForm').addEventListener('submit', function(event) {
+    event.preventDefault(); // Prevent the default form submission
+    var nick = document.getElementById('nickInput').value.trim();
+    if (nick) {
+        // Send nickname to the server for uniqueness check
+        socket.send(JSON.stringify({type: "CheckNick", nick: nick}));
+    }
+});
 
-        socket.onmessage = function(event) {
-            var data = JSON.parse(event.data);
-            switch (data.type) {
-                case "NickChecked":
-                    if (data.isUnique) {
-                        document.getElementById('welcomeContainer').style.display = 'none';
-                        document.getElementById('lobbyContainer').style.display = 'block';
-                    } else {
-                        document.getElementById('error').style.display = 'block';
-                        document.getElementById('error').textContent = 'Nickname already taken, please try another one.';
-                    }
-                    break;
-                case "UpdateGameList":
-                    updateGameList(data.games);
-                    break;
-                case "GameReady":
-                    document.getElementById('startButton').disabled = false;
-                    break;
+// Handling messages from the server
+socket.onmessage = function(event) {
+    var data = JSON.parse(event.data);
+    switch (data.type) {
+        case "NickResponse":
+            if (data.isUnique) {
+                // If the nickname is unique, display the lobby
+                document.getElementById('welcomeContainer').style.display = 'none';
+                document.getElementById('lobbyContainer').style.display = 'block';
+            } else {
+                // If the nickname is not unique, show an error message
+                document.getElementById('error').style.display = 'block';
+                document.getElementById('error').textContent = 'Nickname already taken, please try another one.';
             }
-        };
+            break;
+        case "UpdateGameList":
+            updateGameList(data.games);
+            break;
+        case "GameReady":
+            // Enable the start button if the game is ready
+            document.getElementById('startButton').disabled = false;
+            break;
+    }
+};
+
+function updateGameList(games) {
+    var tbody = document.getElementById('gameListBody');
+    tbody.innerHTML = '';
+    games.forEach(function(game) {
+        var row = '<tr>' +
+                  '<td>' + game.gameName + '</td>' +
+                  '<td>' + game.filledSlots + '/' + game.maxSlots + '</td>' +
+                  '<td>' + game.players.join(', ') + '</td>' +
+                  '</tr>';
+        tbody.innerHTML += row;
+    });
+}
 
-        function updateGameList(games) {
-            var tbody = document.getElementById('gameListBody');
-            tbody.innerHTML = '';
-            games.forEach(function(game) {
-                var row = '<tr>' +
-                          '<td>' + game.gameName + '</td>' +
-                          '<td>' + game.filledSlots + '/' + game.maxSlots + '</td>' +
-                          '<td>' + game.players.join(', ') + '</td>' +
-                          '</tr>';
-                tbody.innerHTML += row;
-            });
-        }
+document.getElementById('startButton').addEventListener('click', function() {
+    if (!this.disabled) {
+        socket.send(JSON.stringify({ type: "StartGame" }));
+    }
+});
 
-        document.getElementById('startButton').addEventListener('click', function() {
-            if (!this.disabled) {
-                socket.send(JSON.stringify({ type: "StartGame" }));
-            }
-        });
+document.getElementById('leaveButton').addEventListener('click', function() {
+    var nick = document.getElementById('nickInput').value;
+    socket.send(JSON.stringify({ type: "LeaveGame", nick: nick }));
+});
 
-        document.getElementById('leaveButton').addEventListener('click', function() {
-            var nick = document.getElementById('nickInput').value;
-            socket.send(JSON.stringify({ type: "LeaveGame", nick: nick }));
-        });
+document.getElementById('refreshButton').addEventListener('click', function() {
+    socket.send(JSON.stringify({ type: "RequestGameList" }));
+});
 
-        document.getElementById('refreshButton').addEventListener('click', function() {
-            socket.send(JSON.stringify({ type: "RequestGameList" }));
-        });
 
 /*