From 1bfea694f69a3b4401e6754ea940f35ba9fcb72b Mon Sep 17 00:00:00 2001
From: Meleeman01 <meleeman01@live.com>
Date: Sat, 14 Dec 2024 21:45:58 -0600
Subject: [PATCH] added 'you' identifier, and added name change dialog. needs
 endpoints

---
 index.html | 92 +++++++++++++++++++++++++++++++++++++++++++++++++-----
 server.js  | 30 +++++++++++++++---
 2 files changed, 109 insertions(+), 13 deletions(-)
diff --git a/index.html b/index.html
index c53f46b..c8f9ff9 100644
--- a/index.html
+++ b/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 === 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
-          } else {
-              return `<span class='mr-2 btn is-round text-with-shadow' style='background-color:${client.color};'>${client.name}</span>`;
+          if(client.name != window.you) {
+            if (client.name === message.leaderName) {
+              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 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,15 +340,18 @@
       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);
         const status = message.isLeader ? "You are the party leader!" : "You joined the room!";
         // document.querySelector('.players').innerHtml += `<span>${}<span>`
diff --git a/server.js b/server.js
index b32bd93..4b84267 100644
--- a/server.js
+++ b/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);
     }
