auto refresh

broadcast.ts

@@ -38,6 +38,7 @@ type ServerMessage = {
   data: GameState;
   totalRounds: number;
   viewerCount: number;
+  version?: string;
 };
 
 const MODEL_COLORS: Record<string, string> = {
@@ -73,6 +74,7 @@ let connected = false;
 let ws: WebSocket | null = null;
 let reconnectTimer: number | null = null;
 let lastMessageAt = 0;
+let knownVersion: string | null = null;
 
 function getColor(name: string): string {
   return MODEL_COLORS[name] ?? "#aeb6d6";
@@ -128,6 +130,10 @@ function setupWebSocket() {
     try {
       const msg = JSON.parse(String(e.data)) as ServerMessage;
       if (msg.type === "state") {
+        if (msg.version) {
+          if (!knownVersion) knownVersion = msg.version;
+          else if (knownVersion !== msg.version) return location.reload();
+        }
         state = msg.data;
         totalRounds =
           Number.isFinite(msg.totalRounds) && msg.totalRounds >= 0

frontend.tsx

@@ -44,6 +44,7 @@ type ServerMessage = {
   data: GameState;
   totalRounds: number;
   viewerCount: number;
+  version?: string;
 };
 
 // ── Model colors & logos ─────────────────────────────────────────────────────
@@ -410,6 +411,7 @@ function App() {
     let ws: WebSocket;
     let reconnectTimer: ReturnType<typeof setTimeout>;
 
+    let knownVersion: string | null = null;
     function connect() {
       ws = new WebSocket(wsUrl);
       ws.onopen = () => setConnected(true);
@@ -420,6 +422,10 @@ function App() {
       ws.onmessage = (e) => {
         const msg: ServerMessage = JSON.parse(e.data);
         if (msg.type === "state") {
+          if (msg.version) {
+            if (!knownVersion) knownVersion = msg.version;
+            else if (knownVersion !== msg.version) return location.reload();
+          }
           setState(msg.data);
           setTotalRounds(msg.totalRounds);
           setViewerCount(msg.viewerCount);

server.ts

@@ -14,6 +14,8 @@ import {
   type RoundState,
 } from "./game.ts";
 
+const VERSION = crypto.randomUUID().slice(0, 8);
+
 // ── Game state ──────────────────────────────────────────────────────────────
 
 const runsArg = process.argv.find((a) => a.startsWith("runs="));
@@ -225,6 +227,7 @@ function broadcast() {
     data: gameState,
     totalRounds: runs,
     viewerCount: clients.size,
+    version: VERSION,
   });
   for (const ws of clients) {
     ws.send(msg);