Updateees

static/js/room.js

@@ -19,7 +19,9 @@ const resetBtn = document.getElementById('reset-btn');
 const terminalBtn = document.getElementById('terminal-btn');
 const shareLinkInput = document.getElementById('share-link');
 const shareAdminToggle = document.getElementById('share-admin-toggle');
-const roomStatus = document.getElementById('room-status');
+const votesCounter = document.getElementById('votes-counter');
+const roomMessage = document.getElementById('room-message');
+const changeNameBtn = document.getElementById('change-name-btn');
 const terminalModalOverlay = document.getElementById('terminal-modal-overlay');
 const terminalCloseBtn = document.getElementById('terminal-close-btn');
 const terminalLogOutput = document.getElementById('terminal-log-output');
@@ -37,6 +39,7 @@ const prefillUsername = params.get('username') || '';
 let eventSource = null;
 let latestLinks = { participantLink: '', adminLink: '' };
 let latestAdminLogs = [];
+let latestRole = joinRoleInput.value || 'participant';
 
 const savedUsername = localStorage.getItem(USERNAME_KEY) || '';
 joinUsernameInput.value = prefillUsername || savedUsername;
@@ -84,6 +87,10 @@ function activateRoomView() {
     joinPanel.classList.add('hidden');
 }
 
+function setRoomMessage(message) {
+    roomMessage.textContent = message;
+}
+
 async function joinRoom({ username, role, password, participantIdOverride }) {
     const response = await fetch(`/api/rooms/${encodeURIComponent(roomID)}/join`, {
         method: 'POST',
@@ -326,6 +333,11 @@ function renderState(state) {
     renderCards(state.cards, state.participants, state.revealed);
     renderSummary(state);
 
+    const self = state.participants.find((participant) => participant.id === participantID && participant.connected);
+    if (self && self.role) {
+        latestRole = self.role;
+    }
+
     latestLinks = state.links || { participantLink: '', adminLink: '' };
     updateShareLink();
 
@@ -344,7 +356,7 @@ function renderState(state) {
 
     const votedCount = state.participants.filter((p) => p.connected && p.role === 'participant' && p.hasVoted).length;
     const totalParticipants = state.participants.filter((p) => p.connected && p.role === 'participant').length;
-    roomStatus.textContent = `Votes: ${votedCount}/${totalParticipants}`;
+    votesCounter.textContent = `Votes: ${votedCount}/${totalParticipants}`;
 }
 
 function updateShareLink() {
@@ -364,13 +376,14 @@ function connectSSE() {
             const payload = JSON.parse(event.data);
             renderState(payload);
             activateRoomView();
+            setRoomMessage('Connected.');
         } catch (_err) {
-            roomStatus.textContent = 'Failed to parse room update.';
+            setRoomMessage('Failed to parse room update.');
         }
     });
 
     eventSource.onerror = () => {
-        roomStatus.textContent = 'Connection interrupted. Retrying...';
+        setRoomMessage('Connection interrupted. Retrying...');
     };
 }
 
@@ -388,10 +401,10 @@ async function castVote(card) {
 
         if (!response.ok) {
             const data = await response.json();
-            roomStatus.textContent = data.error || 'Vote rejected.';
+            setRoomMessage(data.error || 'Vote rejected.');
         }
     } catch (_err) {
-        roomStatus.textContent = 'Network error while casting vote.';
+        setRoomMessage('Network error while casting vote.');
     }
 }
 
@@ -409,10 +422,45 @@ async function adminAction(action) {
 
         if (!response.ok) {
             const data = await response.json();
-            roomStatus.textContent = data.error || `Unable to ${action}.`;
+            setRoomMessage(data.error || `Unable to ${action}.`);
         }
     } catch (_err) {
-        roomStatus.textContent = 'Network error while sending admin action.';
+        setRoomMessage('Network error while sending admin action.');
+    }
+}
+
+async function changeName() {
+    if (!participantID) {
+        return;
+    }
+
+    const current = joinUsernameInput.value.trim() || localStorage.getItem(USERNAME_KEY) || '';
+    const next = window.prompt('Enter your new name:', current);
+    if (next === null) {
+        return;
+    }
+
+    const username = next.trim();
+    if (!username) {
+        setRoomMessage('Name cannot be empty.');
+        return;
+    }
+
+    if (username === current) {
+        return;
+    }
+
+    try {
+        const result = await joinRoom({
+            username,
+            role: latestRole || joinRoleInput.value || 'participant',
+            password: joinPasswordInput.value,
+            participantIdOverride: participantID,
+        });
+        joinUsernameInput.value = result.username;
+        setRoomMessage('Name updated.');
+    } catch (err) {
+        setRoomMessage(err.message || 'Unable to change name.');
     }
 }
 
@@ -426,6 +474,9 @@ terminalModalOverlay.addEventListener('click', (event) => {
     }
 });
 shareAdminToggle.addEventListener('change', updateShareLink);
+changeNameBtn.addEventListener('click', () => {
+    void changeName();
+});
 window.addEventListener('keydown', (event) => {
     if (event.key === 'Escape') {
         closeTerminal();