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 @@

Timer: 30 seconds

////////////////////////////////////////////// //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 = '' + + '' + game.gameName + '' + + '' + game.filledSlots + '/' + game.maxSlots + '' + + '' + game.players.join(', ') + '' + + ''; + tbody.innerHTML += row; + }); +} - function updateGameList(games) { - var tbody = document.getElementById('gameListBody'); - tbody.innerHTML = ''; - games.forEach(function(game) { - var row = '' + - '' + game.gameName + '' + - '' + game.filledSlots + '/' + game.maxSlots + '' + - '' + game.players.join(', ') + '' + - ''; - 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" })); - }); /*