added 'you' identifier, and added name change dialog. needs endpoints
This commit is contained in:
Meleeman01
parent
24e2c2735e
commit
1bfea694f6
86
index.html
86
index.html
@ -9,13 +9,59 @@
|
||||
text-shadow: -1px -1px 1px #000, 1px -1px 1px #000,
|
||||
-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>
|
||||
</head>
|
||||
<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>
|
||||
<input id="join-code" placeholder="Enter room code">
|
||||
<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>
|
||||
<button id="start-game" style="display: none;">Start Game</button>
|
||||
<button id="spin-wheel" style="display: none;">Spin Wheel</button>
|
||||
@ -27,7 +73,6 @@
|
||||
</span>
|
||||
<canvas id="wheelCanvas" width="500" height="500"></canvas>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
//================general Purpose functions=========================================//
|
||||
function cryptoSecureShuffle(array) {
|
||||
@ -223,19 +268,47 @@
|
||||
|
||||
//==================================end of Wheel=====================================//
|
||||
function drawPlayers(message) {
|
||||
console.log(message);
|
||||
let players = document.querySelector('.players');
|
||||
//assignColors(names, colors) {
|
||||
let processedNametags = assignColors(message.clients,nameColors);
|
||||
const playersHtml = processedNametags.map(client => {
|
||||
if(client.name != window.you) {
|
||||
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 {
|
||||
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
|
||||
|
||||
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");
|
||||
|
||||
document.getElementById("create-room").onclick = () => {
|
||||
@ -267,13 +340,16 @@
|
||||
const message = JSON.parse(event.data);
|
||||
|
||||
if (message.type === "room_created") {
|
||||
window.you = message.you;
|
||||
document.getElementById("status").innerText = `Room created! Code: ${message.roomCode}`;
|
||||
drawPlayers(message);
|
||||
if (message.isLeader) {
|
||||
document.getElementById("start-game").style.display = "inline";
|
||||
}
|
||||
}
|
||||
|
||||
if (message.type === "joined_room_you") {
|
||||
window.you = message.you;
|
||||
}
|
||||
if (message.type === "joined_room") {
|
||||
|
||||
drawPlayers(message);
|
||||
|
||||
30
server.js
30
server.js
@ -47,7 +47,22 @@ function loadCurrentPuzzle(gameStateObject) {
|
||||
wss.on("connection", (ws) => {
|
||||
ws.on("message", (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") {
|
||||
const roomCode = uuidv4().slice(0, 5);
|
||||
ws.name = getRandomName();
|
||||
@ -63,7 +78,9 @@ wss.on("connection", (ws) => {
|
||||
ws.roomCode = roomCode;
|
||||
ws.send(JSON.stringify({ type: "room_created", roomCode,
|
||||
isLeader: true,
|
||||
leaderName: ws.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);
|
||||
ws.roomCode = 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) => {
|
||||
client.send(JSON.stringify({
|
||||
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);
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user