feat: add tokens column to dashboard and update rendering logic

public/js/dom.js

@@ -7,7 +7,6 @@ export const $nameDisplay = el('nameDisplay');
 export const $status = el('status');
 export const $guesser = el('guesser');
 export const $timeline = el('timeline');
-export const $tokens = el('tokens');
 export const $audio = el('audio');
 export const $np = el('nowPlaying');
 export const $npTitle = el('npTitle');

public/js/render.js

@@ -18,7 +18,6 @@ import {
   $startGame,
   $status,
   $timeline,
-  $tokens,
 } from './dom.js';
 
 export function renderRoom(room) {
@@ -58,6 +57,7 @@ export function renderRoom(room) {
           ? '<span class="text-emerald-600">bereit</span>'
           : '<span class="text-slate-400">-</span>';
         const score = room.state.timeline?.[p.id]?.length ?? 0;
+        const tokens = room.state.tokens?.[p.id] ?? 0;
         const isMe = p.id === state.playerId;
         return `
         <tr class="align-top">
@@ -71,6 +71,7 @@ export function renderRoom(room) {
           <td class="py-2 pr-3">${connected}</td>
           <td class="py-2 pr-3">${ready}</td>
           <td class="py-2 pr-3 font-semibold tabular-nums">${score}</td>
+          <td class="py-2 pr-3 font-semibold tabular-nums">${tokens}</td>
         </tr>`;
       })
       .join('');
@@ -93,7 +94,6 @@ export function renderRoom(room) {
     `;
     })
     .join('');
-  $tokens.textContent = room.state.tokens?.[state.playerId] ?? 0;
   if ($readyChk) {
     const serverReady = !!me?.ready;
     if (state.pendingReady === null || state.pendingReady === undefined) {