Meleeman/WheelOfFortune
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

added name change endpoints, added puzzle generation, fixed name collisions and stylized name change dialog

Browse Source
This commit is contained in:
Meleeman01 2024-12-15 18:41:54 -06:00
parent 1bfea694f6
commit d213fced52
2 changed files with 75 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
index.html
View File

@ -32,13 +32,6 @@
margin-top: 0; margin-top: 0;
font-size: 18px; font-size: 18px;
} }
dialog label {
display: block;
margin-bottom: 8px;
font-size: 14px;
font-weight: bold;
}
.nameInput { .nameInput {
text-align: center; text-align: center;
} }
@ -47,13 +40,15 @@
<body> <body>
<!-- Dialog --> <!-- Dialog -->
<dialog class="nameDialog"> <dialog class="nameDialog">
<div class="flx(column) space-evenly">
<h2>Change Your Name?</h2> <h2>Change Your Name?</h2>
<label for="nameInput">Name:</label> <label for="nameInput">Name:</label>
<input type="text" class="nameInput" /> <input type="text" class="nameInput is-round" style="padding: .25rem; ">
<div> <div class="mt-4 flx(wrap) space-evenly">
<button class="saveButton">Save</button> <button class="saveButton btn is-success is-round mr-1 div-shadow">save</button>
<button class="closeDialogButton">Close</button> <button class="closeDialogButton btn is-error is-round ml-1 div-shadow">close</button>
</div> </div>
<div>
</dialog> </dialog>
<button id="create-room">Create Room</button> <button id="create-room">Create Room</button>
@ -347,6 +342,14 @@
document.getElementById("start-game").style.display = "inline"; document.getElementById("start-game").style.display = "inline";
} }
} }
if (message.type === "changed_name_you") {
window.you = message.you;
console.log('server has changed your name!');
}
if (message.type === "changed_name") {
drawPlayers(message);
console.log('server has changed your name!');
}
if (message.type === "joined_room_you") { if (message.type === "joined_room_you") {
window.you = message.you; window.you = message.you;
} }
@ -366,6 +369,7 @@
} }
if (message.type === "game_started") { if (message.type === "game_started") {
console.log(message);
document.getElementById("status").innerText = "The game has started!"; document.getElementById("status").innerText = "The game has started!";
document.getElementById("start-game").style.display = "none"; document.getElementById("start-game").style.display = "none";
document.getElementById("start-game").style.display = "inline"; document.getElementById("start-game").style.display = "inline";

60
server.js
View File

@ -40,6 +40,35 @@ function getRandomName() {
function loadCurrentPuzzle(gameStateObject) { function loadCurrentPuzzle(gameStateObject) {
console.log(gameStateObject); console.log(gameStateObject);
//calculate the puzzle for now we'll just go through however many iterations there are
//for each slot
let letterArray = gameStateObject.puzzles[gameStateObject.puzzleLevel].answer.split('');
const given =gameStateObject.puzzles[gameStateObject.puzzleLevel].given;
console.log('letterArray',letterArray);
let puzzleArray = [];
for (let letter of letterArray) {
if (letter == ' ') {
puzzleArray.push(' ');
}
letterFound = false;
for (let g of given ) {
if(g.toUpperCase() == letter.toUpperCase()) {
puzzleArray.push(g);
letterFound = true;
}
}
if (!letterFound) {puzzleArray.push('');}
}
console.log(puzzleArray);
gameStateObject.puzzles[gameStateObject.puzzleLevel].puzzle = puzzleArray;
return {
'puzzleLevel':gameStateObject.puzzleLevel,
'given':gameStateObject.puzzles[gameStateObject.puzzleLevel].given,
'category':gameStateObject.puzzles[gameStateObject.puzzleLevel].category,
'puzzle':puzzleArray,
'levelsRemaining':(gameStateObject.puzzles.length - 1 - gameStateObject.puzzleLevel)
}
} }
@ -48,24 +77,50 @@ wss.on("connection", (ws) => {
ws.on("message", (message) => { ws.on("message", (message) => {
const data = JSON.parse(message); const data = JSON.parse(message);
if (data.type === "change_name") { if (data.type === "change_name") {
const roomCode = ws.roomCode;
const room = rooms[ws.roomCode]; const room = rooms[ws.roomCode];
console.log(room); console.log(room);
console.log(room.leader.name,room.clients[0].name); console.log(room.leader.name,room.clients[0].name);
console.log(room.clients.filter((i)=> i.name == data.deadName));
console.log(ws.name,ws.identifierToken);
//change names in all places. //change names in all places.
//if the leader wants to change their name account for this //if the leader wants to change their name account for this
//note this could probably be exploited oneday and break the game but whatever //note this could probably be exploited oneday and break the game but whatever
//since there is no logging in of users this is bound to happen. //since there is no logging in of users this is bound to happen.
if (room.leader.name == data.deadName) { //find the names by index using the identifier Token which i user can't easily create
//a name collision.
const nameToChange = room.clients.findIndex((i)=> i.identifierToken == ws.identifierToken )
console.log(nameToChange);
if (nameToChange != -1) {
room.clients[nameToChange].name = data.newName;
}
if (room.leader.identifierToken == room.clients[nameToChange].identifierToken) {
room.leader.name = data.newName; room.leader.name = data.newName;
} }
//if the user is not the leader, in theory just change the name on the clients list //if the user is not the leader, in theory just change the name on the clients list
//not sure if it exists in other places but test and see //not sure if it exists in other places but test and see
//send name changed event to client, similar to joined room but it will work when people are in game.
ws.send(JSON.stringify({
type: "changed_name_you", roomCode,
isLeader: rooms[roomCode].leader === ws,
you:data.newName
}));
room.clients.forEach((client) => {
client.send(JSON.stringify({
type: "changed_name", roomCode,
isLeader: room.leader === ws ,
clients: room.clients.map((i)=> i.name),
leaderName:room.leader.name
}));
});
} }
if (data.type === "create_room") { if (data.type === "create_room") {
const roomCode = uuidv4().slice(0, 5); const roomCode = uuidv4().slice(0, 5);
ws.name = getRandomName(); ws.name = getRandomName();
ws.identifierToken = uuidv4().slice(0, 5);
rooms[roomCode] = { rooms[roomCode] = {
clients: [ws], clients: [ws],
leader: ws, leader: ws,
@ -97,10 +152,10 @@ wss.on("connection", (ws) => {
} }
else { else {
ws.name = getRandomName(); ws.name = getRandomName();
ws.identifierToken = uuidv4().slice(0, 5);
rooms[roomCode].clients.push(ws); rooms[roomCode].clients.push(ws);
ws.roomCode = roomCode; ws.roomCode = roomCode;
const room = rooms[ws.roomCode]; const room = rooms[ws.roomCode];
ws.send(JSON.stringify({ ws.send(JSON.stringify({
type: "joined_room_you", roomCode, type: "joined_room_you", roomCode,
isLeader: rooms[roomCode].leader === ws, isLeader: rooms[roomCode].leader === ws,
@ -125,6 +180,7 @@ wss.on("connection", (ws) => {
const room = rooms[ws.roomCode]; const room = rooms[ws.roomCode];
room.gameState.started = true; room.gameState.started = true;
console.log('game started for:',room); console.log('game started for:',room);
if (room && room.leader === ws) { if (room && room.leader === ws) {
room.clients.forEach((client) => { room.clients.forEach((client) => {
client.send(JSON.stringify({ client.send(JSON.stringify({