diff --git a/html/index.html b/html/index.html index bc3e5d1..0effe2b 100644 --- a/html/index.html +++ b/html/index.html @@ -1,5 +1,4 @@ - @@ -31,16 +30,16 @@

WORD GAME LOBBY

Nicknames

    +
    +

    Leaderboard

      -
      - -
      +
      @@ -48,6 +47,8 @@

      Leaderboard

      Display Message
      + +
      @@ -62,8 +63,7 @@

      Start Game With

      - - +
      @@ -116,19 +116,13 @@

      // Update title to reflect the current version // var titleVersion = " "; // Add the JSON variable for the string // document.getElementById("title").innerHTML = titleVersion; // Set the title as the titleVersion - - document.title = "group 24: " + message.versionNumber; }; socket.onmessage = function(event) { console.log('Message from server: ' + event.data); const message = JSON.parse(event.data); - + switch(message.type){ - case 'typehash': - document.title = "group 24: " + message.versionNumber; - break; - case 'Grid': console.log("Grid recieved"); displayWordSearch(message.grid); @@ -143,32 +137,14 @@

      var playerColor = document.getElementById("playerColor").value; if(playerName === message.player1.PlayerName || playerName === message.player2.PlayerName){ playerName = message.FindersName; - - var foundWord = message.WordsUsed[message.FoundWordIndex]; - console.log("found word = " + foundWord); - if(playerName === message.player1.PlayerName){ playerColor = message.player1.PlayerColor; - playerName = message.player1.PlayerName; - if(message.FoundWordIndex != -1){ - var leftbox = document.getElementById("leftbox"); - var messageElement = document.createElement("div"); - messageElement.textContent = "FOUND: " + foundWord; - leftbox.appendChild(messageElement); - } }else{ playerColor = message.player2.PlayerColor; - playerName = message.player2.PlayerName; - if(message.FoundWordIndex != -1){ - var rightbox = document.getElementById("rightbox"); - var messageElement = document.createElement("div"); - messageElement.textContent = "FOUND: " + foundWord; - rightbox.appendChild(messageElement); - } } - crossOutWord(message.FoundWordIndex, message.cIndex1, message.rIndex1, message.cIndex2, message.rIndex2, playerColor, playerName, message.WordsUsed); - //FUNCTION TO ADD FOUND WORD TO SIDE LIST + crossOutWord(message.FoundWordIndex, message.cIndex1, message.rIndex1, message.cIndex2, message.rIndex2, playerColor); + //FUNCTION TO ADD FOUND WORD TO SIDE LISTS } break; @@ -180,7 +156,6 @@

      console.log("Lobby Message Recieved"); updatePlayerList(message.players); UpdateQueue(message.readyQueue); - updateLeaderboard(message.players) break; case 'Game': console.log("Game Message Recieved"); @@ -198,9 +173,11 @@

      gameID = message.gameID; } break; - case 'ChatMessage': - console.log("ChatMessage Received") + case 'sender': + updatePlayerList(message.players); + if ('sender' in message) { displayMessage(message.sender, message.content); + } break; default: console.log("Unknown message") @@ -278,21 +255,22 @@

      function sendMessage() { const userInput = document.getElementById("userInput"); - var content = userInput.value.trim(); - const playerName = document.getElementById("playerName").value.trim(); + const content = userInput.value.trim(); + const playerName = document.getElementById("playerName").value.trim(); //sessionStorage.getItem('playerName') || 'Anonymous'; if (content) { - const message = "ChatMessage|" + playerName + "|" + content + "|"; - socket.send(message); - console.log("sending " + message); + const message = { sender: playerName, content: content }; + socket.send(JSON.stringify(message)); + console.log("sending "+JSON.stringify(message)); + displayMessage(`${playerName}: ${content}`, "user-message"); userInput.value = ''; } } - function displayMessage(sender, content) { + function displayMessage(message, className) { const chatbox = document.getElementById("chatbox"); const messageElement = document.createElement("div"); - - messageElement.textContent = sender + ": " + content; + messageElement.textContent = message; + messageElement.classList.add("message", className); chatbox.appendChild(messageElement); chatbox.scrollTop = chatbox.scrollHeight; // Keep the chat scrolled to the bottom } @@ -401,21 +379,8 @@

      } - //let leaderboardData = []; - function updateLeaderboard(players) { - const Leaderboard = document.getElementById('leaderboard'); - Leaderboard.innerHTML = ''; // Clear the existing player list - - // Add each player to the player list in the HTML - players.forEach(player => { - const li = document.createElement('li'); - li.textContent = player.PlayerName + " " + player.PlayerPoints; - li.style.color = player.PlayerColor - li.style.fontSize = "15px"; - Leaderboard.appendChild(li); - }); - - /* + let leaderboardData = []; + function updateLeaderboard(playerName, score) { // Check player is in leaderboard const existPlayer = leaderboardData.findIndex(player => player.name === playerName); @@ -432,10 +397,8 @@

      //update leaderboard view_leaderboard(); - */ } - function view_leaderboard() { // window.location.href = 'Leaderboard.html'; // causes the page to be loaded @@ -528,9 +491,10 @@

      socket.send("WordCheck" + " " + playerName + " " + gameID + " (" + cIndexOne + "," + rIndexOne + ")(" + cIndexTwo + "," + rIndexTwo + ") " + cIndexOne + " " + rIndexOne + " " + cIndexTwo + " " + rIndexTwo + " "); } - function crossOutWord(FoundWordIndex, cIndex1, rIndex1, cIndex2, rIndex2, playerColor, playerName, WordsUsed){ + function crossOutWord(FoundWordIndex, cIndex1, rIndex1, cIndex2, rIndex2, playerColor){ var WordGrid = document.getElementById('WordGrid'); + var ColDiff = (cIndex2 - cIndex1); var RowDiff = (rIndex2 - rIndex1); var row = WordGrid.rows[rIndex1]; @@ -539,10 +503,9 @@

      if(FoundWordIndex != -1){ //Cross Out Word in wordbank IF found word was correct var wordBank = document.getElementById('WordBank'); - wordBank.children[FoundWordIndex].classList.add('crossed-out'); - wordBank.children[FoundWordIndex].style.color = playerColor; - + + //Create line of highlighted boxes to fill out the whole word for(var i = 0; i < Math.max(Math.abs(ColDiff), Math.abs(RowDiff)); i++){ cell.style.backgroundColor = playerColor; @@ -561,10 +524,8 @@

      } cell = row.cells[cIndex1]; cell.style.backgroundColor = playerColor; - - } - socket.send("Leaderboard " + playerName + " "); + }else{ //If FoundWordIndex was -1 that means no correct word was found so selected sqaure goes back //to default color