Updatezz

static/js/room.js

@@ -4,10 +4,15 @@ const roomID = document.body.dataset.roomId;
 const params = new URLSearchParams(window.location.search);
 
 const themeToggleBtn = document.getElementById('theme-toggle');
+const roomSkeleton = document.getElementById('room-skeleton');
+const roomGrid = document.getElementById('room-grid');
 const roomTitle = document.getElementById('room-title');
 const revealModeLabel = document.getElementById('reveal-mode-label');
 const roundStateLabel = document.getElementById('round-state-label');
 const votingBoard = document.getElementById('voting-board');
+const summaryBody = document.getElementById('summary-body');
+const summaryAverage = document.getElementById('summary-average');
+const summaryRecommended = document.getElementById('summary-recommended');
 const participantList = document.getElementById('participant-list');
 const adminControls = document.getElementById('admin-controls');
 const revealBtn = document.getElementById('reveal-btn');
@@ -28,7 +33,10 @@ let isDarkMode = false;
 let participantID = params.get('participantId') || '';
 let adminToken = params.get('adminToken') || '';
 let eventSource = null;
-let latestState = null;
+
+const savedUsername = localStorage.getItem(USERNAME_KEY) || '';
+joinUsernameInput.value = savedUsername;
+joinAdminTokenInput.value = adminToken;
 
 themeToggleBtn.addEventListener('click', () => {
     isDarkMode = !isDarkMode;
@@ -42,10 +50,6 @@ themeToggleBtn.addEventListener('click', () => {
     themeToggleBtn.textContent = 'Dark Mode';
 });
 
-const savedUsername = localStorage.getItem(USERNAME_KEY) || '';
-joinUsernameInput.value = savedUsername;
-joinAdminTokenInput.value = adminToken;
-
 function setJoinError(message) {
     if (!message) {
         joinError.classList.add('hidden');
@@ -64,14 +68,23 @@ function updateURL() {
     } else {
         next.searchParams.delete('participantId');
     }
+
     if (adminToken) {
         next.searchParams.set('adminToken', adminToken);
     } else {
         next.searchParams.delete('adminToken');
     }
+
     window.history.replaceState({}, '', next.toString());
 }
 
+function activateRoomView() {
+    document.body.classList.remove('prejoin');
+    roomSkeleton.classList.add('hidden');
+    roomGrid.classList.remove('hidden');
+    joinPanel.classList.add('hidden');
+}
+
 async function joinRoom({ username, role, password, participantIdOverride }) {
     const response = await fetch(`/api/rooms/${encodeURIComponent(roomID)}/join`, {
         method: 'POST',
@@ -91,18 +104,14 @@ async function joinRoom({ username, role, password, participantIdOverride }) {
     }
 
     participantID = data.participantId;
-    if (data.isAdmin && !adminToken) {
-        adminToken = joinAdminTokenInput.value.trim();
-    }
-
     localStorage.setItem(USERNAME_KEY, data.username);
     updateURL();
-    joinPanel.classList.add('hidden');
     setJoinError('');
 }
 
 function renderParticipants(participants, isRevealed) {
     participantList.innerHTML = '';
+
     participants.forEach((participant) => {
         const item = document.createElement('li');
         item.className = 'participant-item';
@@ -134,12 +143,93 @@ function renderParticipants(participants, isRevealed) {
     });
 }
 
+function parseNumericVote(value) {
+    if (!/^-?\d+(\.\d+)?$/.test(value)) {
+        return null;
+    }
+    return Number(value);
+}
+
+function calculateSummary(state) {
+    const rows = new Map();
+    const numericVotes = [];
+
+    state.participants.forEach((participant) => {
+        if (participant.role !== 'participant' || !participant.hasVoted || !participant.voteValue) {
+            return;
+        }
+
+        if (!rows.has(participant.voteValue)) {
+            rows.set(participant.voteValue, []);
+        }
+        rows.get(participant.voteValue).push(participant.username);
+
+        const numeric = parseNumericVote(participant.voteValue);
+        if (numeric !== null) {
+            numericVotes.push(numeric);
+        }
+    });
+
+    let average = null;
+    if (numericVotes.length > 0) {
+        average = numericVotes.reduce((acc, value) => acc + value, 0) / numericVotes.length;
+    }
+
+    const deckNumeric = state.cards
+        .map(parseNumericVote)
+        .filter((value) => value !== null)
+        .sort((a, b) => a - b);
+
+    let recommended = null;
+    if (average !== null && deckNumeric.length > 0) {
+        recommended = deckNumeric.find((value) => value >= average) ?? deckNumeric[deckNumeric.length - 1];
+    }
+
+    return { rows, average, recommended };
+}
+
+function renderSummary(state) {
+    if (!state.revealed) {
+        summaryBody.innerHTML = '<tr><td colspan="2">Results hidden until reveal.</td></tr>';
+        summaryAverage.textContent = 'Average: -';
+        summaryRecommended.textContent = 'Recommended: -';
+        return;
+    }
+
+    const { rows, average, recommended } = calculateSummary(state);
+    summaryBody.innerHTML = '';
+
+    if (rows.size === 0) {
+        summaryBody.innerHTML = '<tr><td colspan="2">No votes submitted.</td></tr>';
+    } else {
+        state.cards.forEach((cardValue) => {
+            const users = rows.get(cardValue);
+            if (!users || users.length === 0) {
+                return;
+            }
+
+            const row = document.createElement('tr');
+            const left = document.createElement('td');
+            const right = document.createElement('td');
+            left.textContent = cardValue;
+            right.textContent = users.join(', ');
+            row.appendChild(left);
+            row.appendChild(right);
+            summaryBody.appendChild(row);
+        });
+    }
+
+    summaryAverage.textContent = average === null ? 'Average: -' : `Average: ${average.toFixed(2)}`;
+    summaryRecommended.textContent = recommended === null ? 'Recommended: -' : `Recommended: ${recommended}`;
+}
+
 function renderCards(cards, participants, isRevealed) {
     const self = participants.find((participant) => participant.id === participantID);
     const canVote = self && self.role === 'participant';
     const selfVote = self ? self.voteValue : '';
 
     votingBoard.innerHTML = '';
+
     cards.forEach((value) => {
         const card = document.createElement('button');
         card.type = 'button';
@@ -151,19 +241,25 @@ function renderCards(cards, participants, isRevealed) {
         }
 
         card.disabled = !canVote;
-        card.addEventListener('click', () => castVote(value));
+        card.addEventListener('click', () => {
+            card.classList.remove('impact');
+            void card.offsetWidth;
+            card.classList.add('impact');
+            castVote(value);
+        });
+
         votingBoard.appendChild(card);
     });
 }
 
 function renderState(state) {
-    latestState = state;
     roomTitle.textContent = `${state.roomName} (${state.roomId})`;
     revealModeLabel.textContent = `Reveal mode: ${state.revealMode}`;
     roundStateLabel.textContent = state.revealed ? 'Cards revealed' : 'Cards hidden';
 
     renderParticipants(state.participants, state.revealed);
     renderCards(state.cards, state.participants, state.revealed);
+    renderSummary(state);
 
     participantLinkInput.value = `${window.location.origin}${state.links.participantLink}`;
     adminLinkInput.value = state.links.adminLink ? `${window.location.origin}${state.links.adminLink}` : '';
@@ -189,6 +285,7 @@ function connectSSE() {
         try {
             const payload = JSON.parse(event.data);
             renderState(payload);
+            activateRoomView();
         } catch (_err) {
             roomStatus.textContent = 'Failed to parse room update.';
         }
@@ -260,9 +357,14 @@ joinForm.addEventListener('submit', async (event) => {
             username,
             role: joinRoleInput.value,
             password: joinPasswordInput.value,
+            participantIdOverride: participantID,
         });
         connectSSE();
     } catch (err) {
+        if (participantID) {
+            participantID = '';
+            updateURL();
+        }
         setJoinError(err.message);
     }
 });
@@ -275,32 +377,3 @@ window.addEventListener('pagehide', () => {
     const payload = JSON.stringify({ participantId: participantID });
     navigator.sendBeacon(`/api/rooms/${encodeURIComponent(roomID)}/leave`, new Blob([payload], { type: 'application/json' }));
 });
-
-async function bootstrap() {
-    if (!participantID) {
-        joinPanel.classList.remove('hidden');
-        return;
-    }
-
-    if (!savedUsername) {
-        joinPanel.classList.remove('hidden');
-        return;
-    }
-
-    try {
-        await joinRoom({
-            username: savedUsername,
-            role: 'participant',
-            password: '',
-            participantIdOverride: participantID,
-        });
-        connectSSE();
-    } catch (_err) {
-        participantID = '';
-        updateURL();
-        joinPanel.classList.remove('hidden');
-        setJoinError('Please join this room to continue.');
-    }
-}
-
-bootstrap();