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

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

View File

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

View File

@ -40,6 +40,35 @@ function getRandomName() {
function loadCurrentPuzzle(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) => {
const data = JSON.parse(message);
if (data.type === "change_name") {
const roomCode = ws.roomCode;
const room = rooms[ws.roomCode];
console.log(room);
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.
//if the leader wants to change their name account for this
//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.
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;
}
//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
//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") {
const roomCode = uuidv4().slice(0, 5);
ws.name = getRandomName();
ws.identifierToken = uuidv4().slice(0, 5);
rooms[roomCode] = {
clients: [ws],
leader: ws,
@ -97,10 +152,10 @@ wss.on("connection", (ws) => {
}
else {
ws.name = getRandomName();
ws.identifierToken = uuidv4().slice(0, 5);
rooms[roomCode].clients.push(ws);
ws.roomCode = roomCode;
const room = rooms[ws.roomCode];
ws.send(JSON.stringify({
type: "joined_room_you", roomCode,
isLeader: rooms[roomCode].leader === ws,
@ -125,6 +180,7 @@ wss.on("connection", (ws) => {
const room = rooms[ws.roomCode];
room.gameState.started = true;
console.log('game started for:',room);
if (room && room.leader === ws) {
room.clients.forEach((client) => {
client.send(JSON.stringify({