Skip to content

Commit

Permalink
Add files via upload
Browse files Browse the repository at this point in the history
  • Loading branch information
@TresEberle
TresEberle authored May 2, 2024
1 parent f8c5bb0 commit 592e1d6
Showing 1 changed file with 29 additions and 68 deletions.
97 changes: 29 additions & 68 deletions html/index.html
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
<!DOCTYPE html>

<html lang="en">
<head>
<meta charset="UTF-8">
Expand Down Expand Up @@ -31,23 +30,25 @@ <h1 style="text-align: center;">WORD GAME LOBBY</h1>
<div class="box">
<h1 class="header_text">Nicknames</h1>
<ol id="playerNick" class="player-nick"></ol>
<div class = "button-container">
<button id="button" onclick="EnterQueue()">Join Queue</button>
</div>
</div>
<div class="box">
<h1 class="header_text">Leaderboard</h1>

<ol id="leaderboard" style="list-style-type:none;"></ol>

<div class="button-container">
<button id="button" onclick="">Click to View</button>
</div>

</div>
</div>

<div class="chatbox-container">
<div class="chatbox" id="chatbox">
<div class="message bot-message">Display Message</div>
</div>
<input type="text" id="userInput" placeholder="Type your message...">
<button onclick="sendMessage()">Send</button>
</div>

<div class="right-column">
Expand All @@ -62,8 +63,7 @@ <h1 class="header_text">Start Game With</h1>
</div>
</div>

<input type="text" id="userInput" placeholder="Type your message...">
<button onclick="sendMessage()">Send</button>

</div>

<div class="game-page">
Expand Down Expand Up @@ -116,19 +116,13 @@ <h2 id="player2name"> </h2>
// 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);
Expand All @@ -143,32 +137,14 @@ <h2 id="player2name"> </h2>
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;
Expand All @@ -180,7 +156,6 @@ <h2 id="player2name"> </h2>
console.log("Lobby Message Recieved");
updatePlayerList(message.players);
UpdateQueue(message.readyQueue);
updateLeaderboard(message.players)
break;
case 'Game':
console.log("Game Message Recieved");
Expand All @@ -198,9 +173,11 @@ <h2 id="player2name"> </h2>
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")
Expand Down Expand Up @@ -278,21 +255,22 @@ <h2 id="player2name"> </h2>

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
}
Expand Down Expand Up @@ -401,21 +379,8 @@ <h2 id="player2name"> </h2>
}


//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);

Expand All @@ -432,10 +397,8 @@ <h2 id="player2name"> </h2>

//update leaderboard
view_leaderboard();
*/
}


function view_leaderboard() {
// window.location.href = 'Leaderboard.html';
// causes the page to be loaded
Expand Down Expand Up @@ -528,9 +491,10 @@ <h2 id="player2name"> </h2>
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];
Expand All @@ -539,10 +503,9 @@ <h2 id="player2name"> </h2>
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;
Expand All @@ -561,10 +524,8 @@ <h2 id="player2name"> </h2>
}
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
Expand Down

0 comments on commit 592e1d6

Please sign in to comment.