Skip to content

Commit

Permalink
Merge pull request #18 from utastudents/messaging_system
Browse files Browse the repository at this point in the history 
Messaging system
  • Loading branch information
@NotVeridion
NotVeridion authored Apr 23, 2024
2 parents e3ba964 + 6db589d commit 66fe7c4
Show file tree
Hide file tree
Showing 14 changed files with 8,848 additions and 8,821 deletions.
19 changes: 0 additions & 19 deletions html/bootstrap-5.3.3-dist/js/usernameValidation.js
View file

This file was deleted.

168 changes: 103 additions & 65 deletions html/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -117,8 +117,8 @@ <h1>LOBBY</h1>
<div class="container-fluid custom-body h-auto d-none" id="game">
<div id="home" class="container-fluid text-center d-flex justify-content-center align-items-center py-3" style="height: fit-content">
<div class="container">
<div class="py-3 justify-content-center text-center flex-column d-flex container ">
<table class="wordSearchTable" id="wordSearchTable"></table>
<div class="py-3 justify-content-center text-center flex-column d-flex container" id="grid">

</div>
</div>
<div>
Expand All @@ -143,7 +143,7 @@ <h1>LOBBY</h1>
</div>
<div class="card-footer container-fluid">
<input type="text" class="form-control" id="chatMessage" placeholder="Type your message">
<button class="btn btn-primary mt-2 container-fluid" id="sendMessage">Send</button>
<button class="btn btn-primary mt-2 container-fluid" id="sendMessage" onclick="sendChatMessage()">Send</button>
</div>
</div>
</div>
Expand Down Expand Up @@ -241,32 +241,74 @@ <h1>LEADERBOARD</h1>
<!-- <script src="usernameValidation.js"></script> -->

<script>
let UserId = null;

class UserEvent{
request;
GameId;
UserId;
chatMessage;
}

let currentUser = new UserEvent;
currentUser.UserId = this.UserId;


serverUrl = "ws://" + window.location.hostname +":"+ (parseInt(location.port) + 100);
connection = new WebSocket(serverUrl);

connection.onopen = function (evt) {
console.log("open");
}

// Received a broadcast from a different client
connection.onmessage = function(evt){

let lobby = document.getElementById("lobby-body");
lobby.innerHTML = "";

var msg;
msg = evt.data;

let obj = JSON.parse(msg);

console.log("Message received: " + msg);
console.log("NUM USERS: " + obj.length)

if('grid' in obj){ // Grid sent from server

// Generate and display the word search
generateWordSearch(obj.grid);
}

if('request' in obj){ // Is a UserEvent broadcast
if(obj.request == 3){ // Is a chatMessage
console.log("Chat message received from broadcast: " + obj.chatMessage + " From userid: " + obj.UserId);
const chatBox = document.getElementById("chatBox");

const para = document.createElement("p");
const node = document.createTextNode(obj.UserId + ":\n" + obj.chatMessage);
para.appendChild(node);

const rAlign = document.createAttribute("align");
rAlign.value = "right";

const lAlign = document.createAttribute("align");
lAlign.value = "left";

console.log("Current user Id: " + currentUser);
console.log("Object user Id: " + obj.UserId);

if(currentUser == obj.UserId){
para.setAttributeNode(rAlign);
}
else{
para.setAttributeNode(lAlign);
}

chatBox.appendChild(para);
}
}

lobby.innerHTML = "";

obj.forEach(function(obj){
console.log("OBJECT: " + obj)
var row = lobby.insertRow();
Expand All @@ -292,16 +334,39 @@ <h1>LEADERBOARD</h1>
U.request = 1;
connection.send(JSON.stringify(U));
let div = document.getElementById("log-in");
div.innerHTML = "";
div.classList.add("d-none");
} else if (value == 2){
U.UserId = this.UserId;
U.request = 2;
connection.send(JSON.stringify(U));
}
}

function sendChatMessage(){
const inputBox = document.getElementById("chatMessage");
let msg = inputBox.value;

let limit = 40;

if(msg == ""){
alert("Enter a message: ");
}
else if(msg.length > limit){
alert("Message exceeds " + limit + " character limit. Try again.");
}
else{
U = new UserEvent;
U.request = 3;
U.GameId = this.GameId;
U.UserId = this.UserId;
U.chatMessage = msg;

connection.send(JSON.stringify(U));

// Empty message box after "sending"
inputBox.value = "";
}
}

//document.getElementById("startMatchmakingBtn").addEventListener("click", startMatchmaking);

Expand All @@ -321,82 +386,55 @@ <h1>LEADERBOARD</h1>

</script>


<script>
/*
document.getElementById("startMatchmakingBtn").addEventListener("click", startMatchmaking);
function startMatchmaking() {
const username = document.forms["userForm"]["fname"].value;
if (username.trim() === "") {
alert("Please enter a username.");
return;
class Coordinate {
constructor(row, col){
this.row = row;
this.col = col;
}
// Hide matchmaking form
document.getElementById("matchmaking").classList.add("d-none");
// Show game elements
document.getElementById("game").classList.remove("d-none");
// Update player names
document.getElementById("playerOneName").innerText = "@" + username.toUpperCase();
document.getElementById("playerTwoName").innerText = "@opponent"; // Replace "opponent" with actual opponent's name
// Start matchmaking process or any other game initialization logic
}
*/

function getLetterLocation(button){
let id = button.id;
let row = Math.floor(id / 10);
let col = id % 10;

let location = new Coordinate(row, col);
}
</script>

<script>
const wordsToFind = ['apple', 'banana', 'cherry', 'grape', 'orange', 'pear', 'kiwi', 'peach', 'mango','melon' ];
const gridSize = 50;
const table = document.getElementById('wordSearchTable');
const gridSize = 40;
const gridDiv = document.getElementById('grid');
const wordListElement = document.getElementById('wordList');

// Function to generate a random letter
function getRandomLetter() {
const alphabet = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
return alphabet[Math.floor(Math.random() * alphabet.length)];
}
const letters = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";

// Function to generate the word search grid
function generateWordSearch() {
function generateWordSearch(grid) {
let n = 0;

for (let i = 0; i < gridSize; i++) {
const row = table.insertRow();
const div = document.createElement("div");
gridDiv.appendChild(div);

for (let j = 0; j < gridSize; j++) {
const cell = row.insertCell();
cell.textContent = getRandomLetter();
}
}
}
const button = document.createElement("button");
button.textContent = letters[Math.floor(Math.random() * letters.length)];

// Function to add words to the grid
function addWordsToGrid() {
for (const word of wordsToFind) {
const direction = Math.random() < 0.5 ? 'horizontal' : 'vertical';
const startX = Math.floor(Math.random() * (gridSize - word.length + 1));
const startY = Math.floor(Math.random() * (gridSize - word.length + 1));
const buttonAttr = document.createAttribute("id");
buttonAttr.value = `${n}`;
button.setAttributeNode(buttonAttr);

for (let i = 0; i < word.length; i++) {
const cell = direction === 'horizontal' ? table.rows[startY].cells[startX + i] : table.rows[startY + i].cells[startX];
cell.textContent = word[i].toUpperCase();
}
}
}
div.appendChild(button);

// Function to display the list of words to find
function displayWordList() {
n++;
}

wordListElement.textContent = wordsToFind.sort()
.map(word => word.toUpperCase())
.join(', ');
}
}

// Generate and display the word search
generateWordSearch();
addWordsToGrid();
displayWordList();
generateWordSearch(); // For testing. Will remove when grid is broadcasted.
</script>
</body>

Expand Down
Loading

0 comments on commit 66fe7c4

Please sign in to comment.