Skip to content

Commit

Permalink
hash final
Browse files Browse the repository at this point in the history
  • Loading branch information
@mtrey0220
mtrey0220 committed May 4, 2024
1 parent 5f8eb10 commit 707fbf9
Show file tree
Hide file tree
Showing 2 changed files with 136 additions and 129 deletions.
4 changes: 3 additions & 1 deletion html/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -70,13 +70,15 @@
#player-list {
list-style-type: none;
padding: 0;

}

</style>
</head>
<body>
<!-- Entry Screen -->
<div class="container" id="main-container">
<h1 id="title" style="color: black; position: absolute; left: 20px; top: 30px; font-size: 15px;"></h1>
<div class="nickname-form" id="nickname-form">
<h1 class="main-heading">Welcome to The Word Search Game!</h1>
<label class="nickname" for="nickname">Enter Your Nickname:</label>
Expand Down Expand Up @@ -104,7 +106,7 @@ <h4 id="lobbyh4"></h4>
</div>


<div id= "gameScreen" style="display:none">
<div id= "gameScreen" style="display:none;">
<div id="gameTable"></div>
<div id="sidePanels" style="position: absolute; right: 20px; top: 20px; width: 30%;">
<div id="scoreBoard" style="border: 1px solid black; padding: 10px; margin-bottom: 10px;"></div>
Expand Down
261 changes: 133 additions & 128 deletions html/script.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,133 +23,137 @@ class UserEvent {
let start = [-1, -1];
let end = [-1, -1];

window.onload = function() {
getVersion("1.0.0 (EST. 2024)");
}

// Function to handle nickname submission
function handleSubmission() {
const nickname = usernameInput.value.trim();
const nickname = usernameInput.value.trim();

if (nickname === "") {
console.log("Nickname is empty.");
return;
}
console.log("Submitting nickname to server: " + nickname);
socket = new WebSocket("ws://" + window.location.hostname + ":9107");
// Handle WebSocket socket opened
socket.onopen = function(event) {
console.log("WebSocket socket opened successfully.");
const message = {
type: "nickname",
value: nickname
};
socket.send(JSON.stringify(message)); // Send nickname to server
if (nickname === "") {
console.log("Nickname is empty.");
return;
}

console.log("Submitting nickname to server: " + nickname);

socket = new WebSocket("ws://" + window.location.hostname + ":9107");

// Handle WebSocket socket opened
socket.onopen = function(event) {
console.log("WebSocket socket opened successfully.");
const message = {
type: "nickname",
value: nickname
};
socket.send(JSON.stringify(message)); // Send nickname to server
};

// Handle WebSocket message received
socket.onmessage = function(event) {
console.log("Message received from server:", event.data);
const response = JSON.parse(event.data);
if (response.type === "acknowledge") {
document.getElementById("nickname-form").style.display = "none";
document.getElementById("lobby").style.display = "block";
if ('YouAre' in response) {
if (response.YouAre == "PLAYER1") {
idx = 0;
} else if (response.YouAre == "PLAYER2") {
idx = 1;
} else if (response.YouAre == "PLAYER3") {
idx = 2;
} else if (response.YouAre == "PLAYER4") {
idx = 3;
}
gameId = response.GameId;
// Handle WebSocket message received
socket.onmessage = function(event) {
console.log("Message received from server:", event.data);
const response = JSON.parse(event.data);
if (response.type === "acknowledge") {
document.getElementById("nickname-form").style.display = "none";
document.getElementById("lobby").style.display = "block";
if ('YouAre' in response) {
if (response.YouAre == "PLAYER1") {
idx = 0;
} else if (response.YouAre == "PLAYER2") {
idx = 1;
} else if (response.YouAre == "PLAYER3") {
idx = 2;
} else if (response.YouAre == "PLAYER4") {
idx = 3;
}
addPlayerToLobby(nickname, response.playerId); // Add the player to the lobby with player ID
addUserToGame(response.gameId, nickname);
updateLobbyWithActiveUsers(activeUsers); // Update the lobby with the active users list
gameId = response.GameId;
}
addPlayerToLobby(nickname, response.playerId); // Add the player to the lobby with player ID
addUserToGame(response.gameId, nickname);
updateLobbyWithActiveUsers(activeUsers); // Update the lobby with the active users list


// Check if there are already four players
if (activeUsers.length >= 4) {
startGame(); // Start the game if there are four players
}
} else if (response.type === "nickname_error") {

// Check if there are already four players
if (activeUsers.length >= 4) {
startGame(); // Start the game if there are four players
}
} else if (response.type === "nickname_error") {
console.error("Nickname error:", response.message);
alert("Error: " + response.message);
document.getElementById("nickname").value = ""; // Clear the input field
} else if (response.type === "player_list_update") {
activeUsers = response.players; // Update the activeUsers array with the list from the server
updateLobbyWithActiveUsers(activeUsers); // Update the lobby with the active users list
// Check if there are already four players
if (activeUsers.length >= 4) {
startGame(); // Start the game if there are four players
}
} else if (response.type === "nickname_error") {
console.error("Nickname error:", response.message);
alert("Error: " + response.message);
document.getElementById("nickname").value = ""; // Clear the input field
} else if (response.type === "player_list_update") {
activeUsers = response.players; // Update the activeUsers array with the list from the server
updateLobbyWithActiveUsers(activeUsers); // Update the lobby with the active users list
// Check if there are already four players
if (activeUsers.length >= 4) {
startGame(); // Start the game if there are four players
}
} else if (response.type === "nickname_error") {
console.error("Nickname error:", response.message);
alert("Error: " + response.message);
document.getElementById("nickname").value = ""; // Clear the input field
}
else if (response.type == "game_started") {
// Reset
clearLobbyTable();
document.getElementById('lobby').style.display = "none";
document.getElementById('gameScreen').style.display = "block";
}
else if (response.type === "chat_message") {
// Handle chat messages
handleChatMessage(response.message);
}
else {

var msg;
msg = event.data;

console.log("Message received: " + msg);
const obj = JSON.parse(msg);


playersJoined = obj.playersJoined;

if(gameId == obj.GameId)
{
if(obj.playersJoined == 4)
{
clearLobbyTable(); // Clear the lobby table and reset the player count
document.getElementById('lobby').style.display = "none";
document.getElementById('gameScreen').style.display = "block";
generateGrid(obj.wordBank.grid);
generateScoreboard(obj.scoreBoard.scores);
displayWords(obj.wordBank.wordsPlaced);
}
else
{
updateGrid(obj.pickedLetters);
updateScoreboard(obj.scoreBoard.scores);

if (obj.chatBox.messageSent == true) {
var messages = obj.chatBox.messages;
var lastMessage = messages[messages.length - 1]; // Get the last message from the messages array
var messagesDiv = document.getElementById('messages');
var messageElement = document.createElement('div');
messageElement.textContent = lastMessage; // Display the last message
messagesDiv.appendChild(messageElement);
messagesDiv.scrollTop = messagesDiv.scrollHeight; // Auto scroll to the bottom
}//ERROR typing in chat before two players in game messes it up
}
}
else if (response.type == "game_started") {
// Reset
clearLobbyTable();
document.getElementById('lobby').style.display = "none";
document.getElementById('gameScreen').style.display = "block";
}
else if (response.type === "chat_message") {
// Handle chat messages
handleChatMessage(response.message);
}
else {

var msg;
msg = event.data;

console.log("Message received: " + msg);
const obj = JSON.parse(msg);


playersJoined = obj.playersJoined;

if(gameId == obj.GameId)
{
if(obj.playersJoined == 4)
{
clearLobbyTable(); // Clear the lobby table and reset the player count
document.getElementById('lobby').style.display = "none";
document.getElementById('gameScreen').style.display = "block";
generateGrid(obj.wordBank.grid);
generateScoreboard(obj.scoreBoard.scores);
displayWords(obj.wordBank.wordsPlaced);
}
else
{
updateGrid(obj.pickedLetters);
updateScoreboard(obj.scoreBoard.scores);

if (obj.chatBox.messageSent == true) {
var messages = obj.chatBox.messages;
var lastMessage = messages[messages.length - 1]; // Get the last message from the messages array
var messagesDiv = document.getElementById('messages');
var messageElement = document.createElement('div');
messageElement.textContent = lastMessage; // Display the last message
messagesDiv.appendChild(messageElement);
messagesDiv.scrollTop = messagesDiv.scrollHeight; // Auto scroll to the bottom
}//ERROR typing in chat before two players in game messes it up
}
}
}
};


socket.onclose = function(event) {
console.log("WebSocket socket closed.");
alert("WebSocket socket closed. Please try again later.");
console.log("WebSocket socket closed.");
alert("WebSocket socket closed. Please try again later.");
};

socket.onerror = function(error) {
console.error("WebSocket encountered error:", error);
alert("WebSocket encountered error: " + error.message);
console.error("WebSocket encountered error:", error);
alert("WebSocket encountered error: " + error.message);
};
}

Expand Down Expand Up @@ -305,8 +309,9 @@ function chat() {
console.log(JSON.stringify(U));
} // Existing game UI update logic here


function generateGrid(grid) {
var table = document.createElement('table');
var table = document.createElement('gameTable');
grid.forEach(function (row, rowIndex) {
var tr = document.createElement('tr');
row.forEach(function (column, columnIndex) {
Expand All @@ -322,23 +327,23 @@ function generateGrid(grid) {
});
table.appendChild(tr);
});
var container = document.getElementById('grid');
var container = document.getElementById('gameTable');
container.innerHTML = ''; // Clear previous table
container.appendChild(table);
}

function updateGrid(letters) {
if(start[0] != -1 && end[0] != -1)
{
var buttonElementStart = document.querySelector('#grid tr:nth-child(' + (start[0] + 1) + ') td:nth-child(' + (start[1] + 1) + ') button');
var buttonElementEnd = document.querySelector('#grid tr:nth-child(' + (end[0] + 1) + ') td:nth-child(' + (end[1] + 1) + ') button');
var buttonElementStart = document.querySelector('#gameTable tr:nth-child(' + (start[0] + 1) + ') td:nth-child(' + (start[1] + 1) + ') button');
var buttonElementEnd = document.querySelector('#gameTable tr:nth-child(' + (end[0] + 1) + ') td:nth-child(' + (end[1] + 1) + ') button');
buttonElementStart.style.backgroundColor = '';
buttonElementEnd.style.backgroundColor = '';
start = [-1, -1];
end = [-1, -1];
}
letters.forEach(function (letter) {
var buttonElement = document.querySelector('#grid tr:nth-child(' + (letter.row + 1) + ') td:nth-child(' + (letter.col + 1) + ') button');
var buttonElement = document.querySelector('#gameTable tr:nth-child(' + (letter.row + 1) + ') td:nth-child(' + (letter.col + 1) + ') button');
if (letter.playerId == 'PLAYER1') {
buttonElement.style.backgroundColor = 'yellow';
} else if (letter.playerId == 'PLAYER2') {
Expand All @@ -351,24 +356,22 @@ function generateGrid(grid) {
});
}

function generateScoreboard(obj) {
var scores = obj.scoreBoard.scores;
function generateScoreboard(scores) {
var scoreboard = document.getElementById('scoreBoard');
scoreboard.innerHTML = ''; // Clear previous scores
scores.forEach(function (score, index) {
var p = document.createElement('p');
p.textContent = obj.playerNames[index] + ": 0";
p.textContent = "Player " + (index + 1) + ": 0";
scoreboard.appendChild(p);
});
}

function updateScoreboard(obj) {
var scores = obj.scoreBoard.scores;
function updateScoreboard(scores) {
var scoreboard = document.getElementById('scoreBoard');
scoreboard.innerHTML = ''; // Clear previous scores
scores.forEach(function (score, index) {
var p = document.createElement('p');
p.textContent = obj.playerNames[index] + ": " + score;
p.textContent = "Player " + (index + 1) + ": " + score;
scoreboard.appendChild(p);
});
}
Expand Down Expand Up @@ -399,11 +402,11 @@ function updateScoreboard(obj) {
else if (idx == 3)
U.PlayerIdx = "PLAYER4";

U.GameId = gameid;
U.GameId = gameId;

if(start[0] == -1)
{
var buttonElement = document.querySelector('#grid tr:nth-child(' + (i + 1) + ') td:nth-child(' + (j + 1) + ') button');
var buttonElement = document.querySelector('#gameTable tr:nth-child(' + (i + 1) + ') td:nth-child(' + (j + 1) + ') button');

if(U.PlayerIdx == "PLAYER1"){
buttonElement.style.backgroundColor = 'yellow';
Expand All @@ -425,7 +428,7 @@ function updateScoreboard(obj) {
}
else if(end[0] == -1)
{
var buttonElement = document.querySelector('#grid tr:nth-child(' + (i + 1) + ') td:nth-child(' + (j + 1) + ') button');
var buttonElement = document.querySelector('#gameTable tr:nth-child(' + (i + 1) + ') td:nth-child(' + (j + 1) + ') button');

if(U.PlayerIdx == 'PLAYER1'){
buttonElement.style.backgroundColor = 'yellow';
Expand All @@ -451,9 +454,11 @@ socket.send(JSON.stringify(U));
console.log(JSON.stringify(U));
}

function getVersion(version)
{
head = document.getElementById("title");
head.innerHTML = version;
}

function getVersion(version) {
var head = document.getElementById("title");
if (head) {
head.innerHTML = version;
} else {
console.error("Element with ID 'title' not found in the DOM.");
}
}

0 comments on commit 707fbf9

Please sign in to comment.