Update public/index.html

public/index.html

@@ -140,10 +140,10 @@
   // --- Elements ---
   const adminView = document.getElementById('adminView');
   const clientView = document.getElementById('clientView');
-  const roomBadge = document.getElementById('roomBadge');
+  const roomBadge  = document.getElementById('roomBadge');
   const stateBadge = document.getElementById('stateBadge');
   const blackoutEl = document.getElementById('blackout');
-  const timeEl = document.getElementById('time');
+  const timeEl     = document.getElementById('time');
 
   // Show correct view
   if (role === 'admin') {
@@ -154,7 +154,10 @@
     stateBadge.classList.remove('hidden');
   }
 
-  // --- Socket.IO connection (rooms + role passed as query) ---
+  // Optional: guard admin from any blackout element existing
+  if (role !== 'client') { const el = document.getElementById('blackout'); if (el) el.remove(); }
+
+  // --- Socket.IO connection (rooms + role) ---
   const socket = io({ query: { role, room } });
 
   // Ask server to refresh stats on admin load
@@ -162,96 +165,82 @@
 
   // --- Wake lock (client) ---
   let wakeLock;
-  async function keepAwake() {
-    try { if ('wakeLock' in navigator) wakeLock = await navigator.wakeLock.request('screen'); }
-    catch(_) {}
-  }
+  async function keepAwake() { try { if ('wakeLock' in navigator) wakeLock = await navigator.wakeLock.request('screen'); } catch(_) {} }
   if (role === 'client') {
     keepAwake();
-    document.addEventListener('visibilitychange', () => {
-      if (document.visibilityState === 'visible') keepAwake();
-    });
+    document.addEventListener('visibilitychange', () => { if (document.visibilityState === 'visible') keepAwake(); });
   }
 
-  // --- Admin: server clock via NTP-style sync ---
-  const roomNameEl = document.getElementById('roomName');
-  const statsEl = document.getElementById('stats');
-  const serverNowEl = document.getElementById('serverNow');
-  if (roomNameEl) roomNameEl.textContent = room;
+  // =========================
+  // Precise clock sync pieces
+  // =========================
+  const offsets = []; // { delay, offset, ts }
+  let preSyncFast = false;   // enable high-rate sync until start
+  let preSyncUntil = 0;
 
   function syncOnce() { socket.emit('sync:ping', { t0: Date.now() }); }
-  if (role === 'admin') {
-    setInterval(syncOnce, 1000);
-    syncOnce();
-  }
-  socket.on('sync:pong', ({ t0, t1, t2 }) => {
-    if (role !== 'admin') return;
-    const t3 = Date.now();
-    const offset = ((t1 - t0) + (t2 - t3)) / 2;
-    serverNowEl.textContent = String((Date.now() + offset)|0);
-  });
 
-  socket.on('stats', ({ numAdmins, numClients }) => {
-    if (statsEl) statsEl.textContent = `Clients: ${numClients} • Admins: ${numAdmins}`;
-  });
-
-  // --- Admin buttons ---
-  const delayEl = document.getElementById('delay');
-  const labelEl = document.getElementById('label');
-  const startBtn = document.getElementById('start');
-  const stopBtn  = document.getElementById('stop');
-  const resetBtn = document.getElementById('reset');
-  const blackOnBtn  = document.getElementById('blackOn');
-  const blackOffBtn = document.getElementById('blackOff');
+  // normal cadence
+  let syncNormal = setInterval(syncOnce, 3000);
+  // burst cadence (activated by 'preSync' or when start is scheduled)
+  let syncBurstTimer = null;
+  function startBurstSync() {
+    if (syncBurstTimer) return;
+    preSyncFast = true;
+    syncBurstTimer = setInterval(syncOnce, 50); // 20 Hz
+  }
+  function stopBurstSync() {
+    preSyncFast = false;
+    if (syncBurstTimer) { clearInterval(syncBurstTimer); syncBurstTimer = null; }
+  }
 
-  if (startBtn) startBtn.onclick = () => {
-    socket.emit('admin:start', {
-      delayMs: Number(delayEl.value || 3000),
-      label: labelEl.value || ''
-    });
-  };
-  if (stopBtn)  stopBtn.onclick  = () => socket.emit('admin:stop');
-  if (resetBtn) resetBtn.onclick = () => socket.emit('admin:reset');
-  if (blackOnBtn)  blackOnBtn.onclick  = () => socket.emit('admin:blackout', { on: true });
-  if (blackOffBtn) blackOffBtn.onclick = () => socket.emit('admin:blackout', { on: false });
+  // do some quick initial samples
+  for (let i = 0; i < 10; i++) setTimeout(syncOnce, i * 120);
 
-  // --- Client clock sync (best-of samples) ---
-  const offsets = []; // {delay, offset}
-  function clientSyncOnce() { socket.emit('sync:ping', { t0: Date.now() }); }
-  if (role === 'client') {
-    for (let i=0;i<10;i++) setTimeout(clientSyncOnce, i*150);
-    setInterval(clientSyncOnce, 3000);
-  }
+  // ingest samples
   socket.on('sync:pong', ({ t0, t1, t2 }) => {
-    if (role !== 'client') return;
     const t3 = Date.now();
     const delay  = (t3 - t0) - (t2 - t1);
     const offset = ((t1 - t0) + (t2 - t3)) / 2; // server - client
     offsets.push({ delay, offset, ts: t3 });
-    if (offsets.length > 40) offsets.shift();
+    if (offsets.length > 120) offsets.shift();
   });
+
   function bestOffset() {
     if (!offsets.length) return 0;
-    const best = [...offsets].sort((a,b)=>a.delay-b.delay).slice(0,7).map(x=>x.offset);
-    return Math.round(best.reduce((s,v)=>s+v,0)/best.length);
+    // choose the lowest-delay decile and average
+    const sorted = [...offsets].sort((a,b)=>a.delay-b.delay);
+    const slice  = sorted.slice(0, Math.max(5, Math.floor(sorted.length/10)));
+    return Math.round(slice.reduce((s,x)=>s+x.offset,0) / slice.length);
   }
 
-  // --- Client timer state machine ---
+  // derive server time on this client (ms)
+  function serverNow() { return Date.now() + bestOffset(); }
+
+  // --- Admin: server clock view + stats
+  const roomNameEl = document.getElementById('roomName');
+  const statsEl    = document.getElementById('stats');
+  const serverNowEl= document.getElementById('serverNow');
+  if (roomNameEl) roomNameEl.textContent = room;
+
+  if (role === 'admin') {
+    setInterval(() => { serverNowEl.textContent = String(serverNow()|0); }, 1000);
+  }
+  socket.on('stats', ({ numAdmins, numClients }) => {
+    if (statsEl) statsEl.textContent = `Clients: ${numClients} • Admins: ${numAdmins}`;
+  });
+
+  // =========================
+  // Timer state (client side)
+  // =========================
   const State = { IDLE:'IDLE', RUNNING:'RUNNING', STOPPED:'STOPPED' };
   let state = State.IDLE;
-  let zeroPerfTs = null;  // when timer hits 00:00 (in performance.now() space)
+  let startAtServerMs = 0;   // the server-time moment when timer hits 00:00
   let rafId = 0;
 
   function setState(s){ state=s; if (stateBadge) stateBadge.textContent = s; }
-  function serverMsToLocalPerf(msServer) {
-    const off = bestOffset(); // server - client
-    const localNowWall = Date.now();
-    const localNowPerf = performance.now();
-    const whenLocalWall = msServer - off;
-    const delta = whenLocalWall - localNowWall;
-    return localNowPerf + delta;
-  }
-  // Fixed 5-char format "SS:CC"
+
+  // Fixed 5-char format "SS:CC" (centiseconds)
   function fmt(ms) {
     if (ms < 0) ms = 0;
     const totalCs = Math.floor(ms / 10);
@@ -259,19 +248,43 @@
     const cs   = totalCs % 100;
     return `${String(secs).padStart(2,'0')}:${String(cs).padStart(2,'0')}`;
   }
-  function renderElapsed(ms){ if (timeEl) timeEl.textContent = fmt(ms); }
-  function loop(){
-    const now = performance.now();
-    const ms = now - zeroPerfTs;
-    renderElapsed(ms);
-    rafId = requestAnimationFrame(loop);
+
+  // Renders from *server* clock so all clients show the same number at the same instant
+  function render() {
+    const elapsed = serverNow() - startAtServerMs;
+    timeEl.textContent = fmt(elapsed);
+    rafId = requestAnimationFrame(render);
   }
-  function startAtServerTime(startAt){
-    zeroPerfTs = serverMsToLocalPerf(startAt);
+
+  // Optional: final busy-wait in the last ~3 ms before T0 to reduce sub-frame wobble
+  const BUSY_WAIT_MS = 0; // set to 3 for ultra-tight start; 0 keeps CPU friendly
+
+  function armStartAt(startAt) {
+    startAtServerMs = startAt;
     setState(State.RUNNING);
+
+    // stop any previous loop
     cancelAnimationFrame(rafId);
-    rafId = requestAnimationFrame(loop);
+
+    // schedule first frame near T0
+    const schedule = () => {
+      const dt = startAtServerMs - serverNow();
+      if (dt <= (BUSY_WAIT_MS || 1)) {
+        // optional busy-wait
+        if (BUSY_WAIT_MS > 0) {
+          const end = performance.now() + BUSY_WAIT_MS;
+          while (performance.now() < end) {} // spin ~3ms
+        }
+        // start rendering loop
+        rafId = requestAnimationFrame(render);
+      } else {
+        // check again soon; use shorter checks as we approach T0
+        setTimeout(schedule, Math.min(50, Math.max(5, dt/10)));
+      }
+    };
+    schedule();
   }
+
   function stopPause(){
     if (state !== State.RUNNING) return;
     setState(State.STOPPED);
@@ -280,18 +293,41 @@
   function resetAll(){
     cancelAnimationFrame(rafId);
     setState(State.IDLE);
-    renderElapsed(0);
+    if (timeEl) timeEl.textContent = "00:00";
   }
 
-  // --- Command handling ---
+  // ==============
+  // Command intake
+  // ==============
   socket.on('cmd', (msg) => {
     if (!msg || !msg.type) return;
     switch (msg.type) {
-      case 'start':  startAtServerTime(msg.startAt); break;
-      case 'stop':   stopPause(); break;
-      case 'reset':  resetAll();  break;
+      case 'preSync':
+        // enter high-rate sync until start
+        preSyncUntil = msg.until || 0;
+        startBurstSync();
+        // automatically stop burst shortly after T0
+        setTimeout(() => stopBurstSync(), Math.max(1000, preSyncUntil - Date.now() + 1000));
+        break;
+
+      case 'start':
+        // If we didn't receive preSync for some reason, still start burst now
+        if (!preSyncFast) {
+          preSyncUntil = msg.startAt;
+          startBurstSync();
+          setTimeout(() => stopBurstSync(), Math.max(1000, preSyncUntil - Date.now() + 1000));
+        }
+        armStartAt(msg.startAt);
+        break;
+
+      case 'stop':
+        stopPause(); break;
+
+      case 'reset':
+        resetAll(); break;
+
       case 'blackout':
-        // Only clients should go black
+        // Only clients go black
         if (role === 'client') {
           blackoutEl.style.display = msg.on ? 'block' : 'none';
           document.documentElement.style.cursor = msg.on ? 'none' : 'auto';
@@ -304,8 +340,26 @@
   if (role === 'client') {
     document.getElementById('roomBadge').textContent = `room: ${room}`;
     setState(State.IDLE);
-    renderElapsed(0);
+    timeEl.textContent = "00:00";
   }
+
+  // --- Admin controls wiring ---
+  const delayEl   = document.getElementById('delay');
+  const labelEl   = document.getElementById('label');
+  const startBtn  = document.getElementById('start');
+  const stopBtn   = document.getElementById('stop');
+  const resetBtn  = document.getElementById('reset');
+  const blackOnBtn  = document.getElementById('blackOn');
+  const blackOffBtn = document.getElementById('blackOff');
+
+  if (startBtn) startBtn.onclick = () => socket.emit('admin:start', {
+    delayMs: Number(delayEl.value || 3000),
+    label: labelEl.value || ''
+  });
+  if (stopBtn)  stopBtn.onclick  = () => socket.emit('admin:stop');
+  if (resetBtn) resetBtn.onclick = () => socket.emit('admin:reset');
+  if (blackOnBtn)  blackOnBtn.onclick  = () => socket.emit('admin:blackout', { on: true });
+  if (blackOffBtn) blackOffBtn.onclick = () => socket.emit('admin:blackout', { on: false });
 </script>
 </body>
 </html>