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

added 'you' identifier, and added name change dialog. needs endpoints

Browse Source
This commit is contained in:
Meleeman01 2024-12-14 21:45:58 -06:00
parent 24e2c2735e
commit 1bfea694f6
2 changed files with 109 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

86
index.html
View File

@ -9,13 +9,59 @@
text-shadow: -1px -1px 1px #000, 1px -1px 1px #000, text-shadow: -1px -1px 1px #000, 1px -1px 1px #000,
-1px 1px 1px #000, 1px 1px 1px #000; color: white; -1px 1px 1px #000, 1px 1px 1px #000; color: white;
} }
.div-shadow {
box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
}
/* Dialog styling */
dialog {
border: none;
border-radius: 8px;
padding: 20px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
font-family: Arial, sans-serif;
max-width: 300px;
text-align: center;
}
dialog::backdrop {
background-color: rgba(0, 0, 0, 0.5);
}
dialog h2 {
margin-top: 0;
font-size: 18px;
}
dialog label {
display: block;
margin-bottom: 8px;
font-size: 14px;
font-weight: bold;
}
.nameInput {
text-align: center;
}
</style> </style>
</head> </head>
<body> <body>
<!-- Dialog -->
<dialog class="nameDialog">
<h2>Change Your Name?</h2>
<label for="nameInput">Name:</label>
<input type="text" class="nameInput" />
<div>
<button class="saveButton">Save</button>
<button class="closeDialogButton">Close</button>
</div>
</dialog>
<button id="create-room">Create Room</button> <button id="create-room">Create Room</button>
<input id="join-code" placeholder="Enter room code"> <input id="join-code" placeholder="Enter room code">
<button id="join-room">Join Room</button> <button id="join-room">Join Room</button>
<div class="flx(wrap) players"></div>
<div class="flx(wrap) mb-2 players"></div>
<div id="status"></div> <div id="status"></div>
<button id="start-game" style="display: none;">Start Game</button> <button id="start-game" style="display: none;">Start Game</button>
<button id="spin-wheel" style="display: none;">Spin Wheel</button> <button id="spin-wheel" style="display: none;">Spin Wheel</button>
@ -27,7 +73,6 @@
</span> </span>
<canvas id="wheelCanvas" width="500" height="500"></canvas> <canvas id="wheelCanvas" width="500" height="500"></canvas>
</div> </div>
<script> <script>
//================general Purpose functions=========================================// //================general Purpose functions=========================================//
function cryptoSecureShuffle(array) { function cryptoSecureShuffle(array) {
@ -223,19 +268,47 @@
//==================================end of Wheel=====================================// //==================================end of Wheel=====================================//
function drawPlayers(message) { function drawPlayers(message) {
console.log(message);
let players = document.querySelector('.players'); let players = document.querySelector('.players');
//assignColors(names, colors) { //assignColors(names, colors) {
let processedNametags = assignColors(message.clients,nameColors); let processedNametags = assignColors(message.clients,nameColors);
const playersHtml = processedNametags.map(client => { const playersHtml = processedNametags.map(client => {
if(client.name != window.you) {
if (client.name === message.leaderName) { if (client.name === message.leaderName) {
return `<span class='mr-2 btn is-round text-with-shadow' style='background-color:${client.color};'>⭐ ${client.name} ⭐</span>`; // Highlight the leader with stars return `<span class='mr-2 btn is-round text-with-shadow div-shadow' style='background-color:${client.color};'>⭐ ${client.name} ⭐</span>`; // Highlight the leader with stars
} else { } else {
return `<span class='mr-2 btn is-round text-with-shadow' style='background-color:${client.color};'>${client.name}</span>`; return `<span class='mr-2 btn is-round text-with-shadow div-shadow' style='background-color:${client.color};'>${client.name}</span>`;
} }
}
else if (client.name === message.leaderName) {
return `<span class='mr-2 btn is-round text-with-shadow div-shadow' style='background-color:${client.color};' onclick="changeName()">⭐ ${client.name} ⭐ (you)</span>`; // Highlight the leader with stars
}
else {
return `<span class='mr-2 btn is-round text-with-shadow div-shadow' style='background-color:${client.color};' onclick="changeName()">${client.name} (you)</span>`;
}
}).join(""); // Combine all elements into a single string }).join(""); // Combine all elements into a single string
players.innerHTML = playersHtml; players.innerHTML = playersHtml;
} }
function changeName() {
console.log('change name hit.');
const nameDialog = document.querySelector('.nameDialog');
const nameInput = document.querySelector('.nameInput');
const saveButton = document.querySelector('.saveButton');
const closeDialogButton = document.querySelector('.closeDialogButton');
nameDialog.showModal();
nameInput.value = window.you;
closeDialogButton.addEventListener('click',() => {nameDialog.close()});
saveButton.addEventListener('click',() => {
socket.send(JSON.stringify({ type: "change_name", deadName:window.you, newName:nameInput.value }));
console.log('you changed your name.');
nameDialog.close();
});
}
const socket = new WebSocket("ws://localhost:8080"); const socket = new WebSocket("ws://localhost:8080");
document.getElementById("create-room").onclick = () => { document.getElementById("create-room").onclick = () => {
@ -267,13 +340,16 @@
const message = JSON.parse(event.data); const message = JSON.parse(event.data);
if (message.type === "room_created") { if (message.type === "room_created") {
window.you = message.you;
document.getElementById("status").innerText = `Room created! Code: ${message.roomCode}`; document.getElementById("status").innerText = `Room created! Code: ${message.roomCode}`;
drawPlayers(message); drawPlayers(message);
if (message.isLeader) { if (message.isLeader) {
document.getElementById("start-game").style.display = "inline"; document.getElementById("start-game").style.display = "inline";
} }
} }
if (message.type === "joined_room_you") {
window.you = message.you;
}
if (message.type === "joined_room") { if (message.type === "joined_room") {
drawPlayers(message); drawPlayers(message);

30
server.js
View File

@ -47,7 +47,22 @@ function loadCurrentPuzzle(gameStateObject) {
wss.on("connection", (ws) => { 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") {
const room = rooms[ws.roomCode];
console.log(room);
console.log(room.leader.name,room.clients[0].name);
//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) {
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
}
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();
@ -63,7 +78,9 @@ wss.on("connection", (ws) => {
ws.roomCode = roomCode; ws.roomCode = roomCode;
ws.send(JSON.stringify({ type: "room_created", roomCode, ws.send(JSON.stringify({ type: "room_created", roomCode,
isLeader: true, isLeader: true,
leaderName: ws.name,
clients: rooms[roomCode].clients.map((i)=> i.name), clients: rooms[roomCode].clients.map((i)=> i.name),
you:ws.name
})); }));
} }
@ -83,6 +100,13 @@ wss.on("connection", (ws) => {
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({
type: "joined_room_you", roomCode,
isLeader: rooms[roomCode].leader === ws,
you:ws.name
}));
room.clients.forEach((client) => { room.clients.forEach((client) => {
client.send(JSON.stringify({ client.send(JSON.stringify({
type: "joined_room", roomCode, type: "joined_room", roomCode,
@ -92,11 +116,7 @@ wss.on("connection", (ws) => {
})); }));
}); });
ws.send(JSON.stringify({
type: "joined_room_you", roomCode,
isLeader: rooms[roomCode].leader === ws,
you:ws.name
}));
} }
//console.log('clients: ',rooms[roomCode].leader.name); //console.log('clients: ',rooms[roomCode].leader.name);
} }