logo, fix db loading

check-db.ts

@@ -0,0 +1,4 @@
+import { Database } from "bun:sqlite";
+const db = new Database("quipslop.sqlite");
+const rows = db.query("SELECT id, num FROM rounds ORDER BY id DESC LIMIT 20").all();
+console.log(rows);

db.ts

@@ -21,7 +21,7 @@ export function saveRound(round: RoundState) {
 export function getRounds(page: number = 1, limit: number = 10) {
   const offset = (page - 1) * limit;
   const countQuery = db.query("SELECT COUNT(*) as count FROM rounds").get() as { count: number };
-  const rows = db.query("SELECT data FROM rounds ORDER BY id DESC LIMIT $limit OFFSET $offset")
+  const rows = db.query("SELECT data FROM rounds ORDER BY num DESC, id DESC LIMIT $limit OFFSET $offset")
     .all({ $limit: limit, $offset: offset }) as { data: string }[];
   return {
     rounds: rows.map(r => JSON.parse(r.data) as RoundState),
@@ -31,3 +31,8 @@ export function getRounds(page: number = 1, limit: number = 10) {
     totalPages: Math.ceil(countQuery.count / limit)
   };
 }
+
+export function getAllRounds() {
+  const rows = db.query("SELECT data FROM rounds ORDER BY num ASC, id ASC").all() as { data: string }[];
+  return rows.map(r => JSON.parse(r.data) as RoundState);
+}

frontend.tsx

@@ -1,8 +1,8 @@
-import React, { useState, useEffect, useRef } from "react";
+import React, { useState, useEffect } from "react";
 import { createRoot } from "react-dom/client";
 import "./frontend.css";
 
-// ── Types (mirrors game.ts) ─────────────────────────────────────────────────
+// ── Types ────────────────────────────────────────────────────────────────────
 
 type Model = { id: string; name: string };
 type TaskInfo = { model: Model; startedAt: number; finishedAt?: number; result?: string; error?: string };
@@ -22,7 +22,7 @@ type RoundState = {
 type GameState = { completed: RoundState[]; active: RoundState | null; scores: Record<string, number>; done: boolean };
 type ServerMessage = { type: "state"; data: GameState; totalRounds: number };
 
-// ── Model Assets & Colors ───────────────────────────────────────────────────
+// ── Model colors & logos ─────────────────────────────────────────────────────
 
 const MODEL_COLORS: Record<string, string> = {
   "Gemini 3.1 Pro": "#4285F4",
@@ -52,69 +52,57 @@ function getLogo(name: string): string | null {
   return null;
 }
 
-// ── Components ──────────────────────────────────────────────────────────────
+// ── Helpers ──────────────────────────────────────────────────────────────────
 
-function Timer({ startedAt, finishedAt }: { startedAt: number; finishedAt?: number }) {
-  const [now, setNow] = useState(Date.now());
-  useEffect(() => {
-    if (finishedAt) return;
-    const id = setInterval(() => setNow(Date.now()), 100);
-    return () => clearInterval(id);
-  }, [finishedAt]);
-  const elapsed = ((finishedAt ?? now) - startedAt) / 1000;
-  return <span className="timer">{elapsed.toFixed(1)}s</span>;
+function Dots() {
+  return <span className="dots"><span>.</span><span>.</span><span>.</span></span>;
 }
 
-function ModelName({ model, className = "", showLogo = true }: { model: Model; className?: string, showLogo?: boolean }) {
+function ModelTag({ model, small }: { model: Model; small?: boolean }) {
   const logo = getLogo(model.name);
   const color = getColor(model.name);
   return (
-    <span className={`model-name ${className}`} style={{ color }}>
-      {showLogo && logo && <img src={logo} alt="" className="model-logo" />}
+    <span className={`model-tag ${small ? "model-tag--sm" : ""}`} style={{ color }}>
+      {logo && <img src={logo} alt="" className="model-tag__logo" />}
       {model.name}
     </span>
   );
 }
 
+// ── Prompt ───────────────────────────────────────────────────────────────────
+
 function PromptCard({ round }: { round: RoundState }) {
   if (round.phase === "prompting" && !round.prompt) {
     return (
-      <div className="prompt-card prompt-card--loading">
-        <div className="prompt-card__by">
-          <ModelName model={round.prompter} /> is cooking up a prompt…
-        </div>
-        <div className="prompt-card__text prompt-card__text--loading">
-          <span className="dots"><span>.</span><span>.</span><span>.</span></span>
+      <div className="prompt">
+        <div className="prompt__by">
+          <ModelTag model={round.prompter} small /> is writing a prompt<Dots />
         </div>
+        <div className="prompt__text prompt__text--loading"><Dots /></div>
       </div>
     );
   }
 
   if (round.promptTask.error) {
     return (
-      <div className="prompt-card prompt-card--error">
-        <div className="prompt-card__text" style={{ color: "#ef4444" }}>Prompt generation failed</div>
+      <div className="prompt">
+        <div className="prompt__text prompt__text--error">Prompt generation failed</div>
       </div>
     );
   }
 
   return (
-    <div className="prompt-card">
-      <div className="prompt-card__by">
-        Prompted by <ModelName model={round.prompter} />
-      </div>
-      <div className="prompt-card__text">{round.prompt}</div>
+    <div className="prompt">
+      <div className="prompt__by">Prompted by <ModelTag model={round.prompter} small /></div>
+      <div className="prompt__text">{round.prompt}</div>
     </div>
   );
 }
 
-function ContestantPanel({
-  task,
-  voteCount,
-  totalVotes,
-  isWinner,
-  showVotes,
-  voters,
+// ── Contestant ───────────────────────────────────────────────────────────────
+
+function ContestantCard({
+  task, voteCount, totalVotes, isWinner, showVotes, voters,
 }: {
   task: TaskInfo;
   voteCount: number;
@@ -127,43 +115,45 @@ function ContestantPanel({
   const pct = totalVotes > 0 ? Math.round((voteCount / totalVotes) * 100) : 0;
 
   return (
-    <div className={`contestant ${isWinner ? "contestant--winner" : ""}`} style={{ borderColor: color }}>
-      <div className="contestant__header">
-        <div className="contestant__name">
-          <ModelName model={task.model} />
-        </div>
-        {isWinner && <div className="contestant__winner-badge">WINNER</div>}
+    <div
+      className={`contestant ${isWinner ? "contestant--winner" : ""}`}
+      style={{ "--accent": color } as React.CSSProperties}
+    >
+      <div className="contestant__head">
+        <ModelTag model={task.model} />
+        {isWinner && <span className="win-tag">WIN</span>}
       </div>
-      
-      <div className="contestant__answer">
+
+      <div className="contestant__body">
         {!task.finishedAt ? (
-          <span className="contestant__thinking">
-            <span className="dots"><span>.</span><span>.</span><span>.</span></span>
-          </span>
+          <p className="answer answer--loading"><Dots /></p>
         ) : task.error ? (
-          <span className="contestant__error">✗ {task.error}</span>
+          <p className="answer answer--error">{task.error}</p>
         ) : (
-          <span className="contestant__text">&ldquo;{task.result}&rdquo;</span>
+          <p className="answer">&ldquo;{task.result}&rdquo;</p>
         )}
       </div>
 
       {showVotes && (
-        <div className="contestant__votes-container">
-          <div className="contestant__votes">
-            <div className="vote-bar">
-              <div className="vote-bar__fill" style={{ width: `${pct}%`, background: color }} />
-            </div>
-            <div className="vote-bar__label">
-              <span className="vote-bar__count" style={{ color }}>{voteCount}</span>
-              <span className="vote-bar__pct">{pct}%</span>
-            </div>
+        <div className="contestant__foot">
+          <div className="vote-bar">
+            <div className="vote-bar__fill" style={{ width: `${pct}%`, background: color }} />
           </div>
-          <div className="contestant__voters">
-            {voters.map((v, i) => (
-               <div key={i} className="voter-badge">
-                 <ModelName model={v.voter} showLogo={true} />
-               </div>
-            ))}
+          <div className="vote-meta">
+            <span className="vote-meta__count" style={{ color }}>{voteCount}</span>
+            <span className="vote-meta__label">vote{voteCount !== 1 ? "s" : ""}</span>
+            <span className="vote-meta__dots">
+              {voters.map((v, i) => {
+                const logo = getLogo(v.voter.name);
+                return logo ? (
+                  <img key={i} src={logo} alt={v.voter.name} title={v.voter.name} className="voter-dot" />
+                ) : (
+                  <span key={i} className="voter-dot voter-dot--letter" style={{ color: getColor(v.voter.name) }} title={v.voter.name}>
+                    {v.voter.name[0]}
+                  </span>
+                );
+              })}
+            </span>
           </div>
         </div>
       )}
@@ -171,191 +161,144 @@ function ContestantPanel({
   );
 }
 
-function PendingVotes({ votes }: { votes: VoteInfo[] }) {
-  if (votes.length === 0) return null;
-  return (
-    <div className="pending-votes">
-      {votes.map((v, i) => (
-        <div key={i} className={`voter-badge ${!v.finishedAt ? 'voter-badge--pending' : 'voter-badge--error'}`}>
-          <ModelName model={v.voter} showLogo={true} /> 
-          {!v.finishedAt ? " deliberating…" : " abstained"}
-        </div>
-      ))}
-    </div>
-  );
-}
+// ── Arena ─────────────────────────────────────────────────────────────────────
 
-function Arena({ round, total }: { round: RoundState; total: number }) {
+function Arena({ round, total }: { round: RoundState; total: number | null }) {
   const [contA, contB] = round.contestants;
   const showVotes = round.phase === "voting" || round.phase === "done";
   const isDone = round.phase === "done";
 
-  let votesA = 0,
-    votesB = 0;
+  let votesA = 0, votesB = 0;
   for (const v of round.votes) {
     if (v.votedFor?.name === contA.name) votesA++;
     else if (v.votedFor?.name === contB.name) votesB++;
   }
   const totalVotes = votesA + votesB;
-  
   const votersA = round.votes.filter(v => v.votedFor?.name === contA.name);
   const votersB = round.votes.filter(v => v.votedFor?.name === contB.name);
-  const pendingOrAbstained = round.votes.filter(v => !v.finishedAt || v.error || !v.votedFor);
 
-  const phaseLabel =
-    round.phase === "prompting"
-      ? "✍️ WRITING PROMPT"
-      : round.phase === "answering"
-        ? "💭 ANSWERING"
-        : round.phase === "voting"
-          ? "🗳️ JUDGES VOTING"
-          : "✅ ROUND COMPLETE";
+  const phaseText =
+    round.phase === "prompting" ? "Writing prompt" :
+    round.phase === "answering" ? "Answering" :
+    round.phase === "voting" ? "Judges voting" :
+    "Complete";
 
   return (
     <div className="arena">
-      <div className="arena__header-row">
-        <div className="arena__round-badge">
-          ROUND {round.num} {total !== null && <span className="arena__round-of">/ {total}</span>}
-        </div>
-        <div className="arena__phase">{phaseLabel}</div>
+      <div className="arena__meta">
+        <span className="arena__round">
+          Round {round.num}{total ? <span className="dim">/{total}</span> : null}
+        </span>
+        <span className="arena__phase">{phaseText}</span>
       </div>
 
       <PromptCard round={round} />
 
       {round.phase !== "prompting" && (
-        <>
-          <div className="showdown">
-            <ContestantPanel
-              task={round.answerTasks[0]}
-              voteCount={votesA}
-              totalVotes={totalVotes}
-              isWinner={isDone && votesA > votesB}
-              showVotes={showVotes}
-              voters={votersA}
-            />
-            <ContestantPanel
-              task={round.answerTasks[1]}
-              voteCount={votesB}
-              totalVotes={totalVotes}
-              isWinner={isDone && votesB > votesA}
-              showVotes={showVotes}
-              voters={votersB}
-            />
-          </div>
+        <div className="showdown">
+          <ContestantCard
+            task={round.answerTasks[0]}
+            voteCount={votesA}
+            totalVotes={totalVotes}
+            isWinner={isDone && votesA > votesB}
+            showVotes={showVotes}
+            voters={votersA}
+          />
+          <ContestantCard
+            task={round.answerTasks[1]}
+            voteCount={votesB}
+            totalVotes={totalVotes}
+            isWinner={isDone && votesB > votesA}
+            showVotes={showVotes}
+            voters={votersB}
+          />
+        </div>
+      )}
 
-          {showVotes && <PendingVotes votes={pendingOrAbstained} />}
-
-          {isDone && votesA === votesB && (
-            <div className="round-result">IT&rsquo;S A TIE!</div>
-          )}
-        </>
+      {isDone && votesA === votesB && totalVotes > 0 && (
+        <div className="tie-label">Tie</div>
       )}
     </div>
   );
 }
 
+// ── Game Over ────────────────────────────────────────────────────────────────
+
 function GameOver({ scores }: { scores: Record<string, number> }) {
   const sorted = Object.entries(scores).sort((a, b) => b[1] - a[1]);
   const champion = sorted[0];
 
   return (
     <div className="game-over">
-      <div className="game-over__title">GAME OVER</div>
+      <div className="game-over__label">Game Over</div>
       {champion && champion[1] > 0 && (
-        <div className="game-over__champion">
-          <div className="game-over__crown">👑</div>
-          <div className="game-over__name" style={{ color: getColor(champion[0]) }}>
+        <div className="game-over__winner">
+          <span className="game-over__crown">👑</span>
+          <span className="game-over__name" style={{ color: getColor(champion[0]) }}>
             {getLogo(champion[0]) && <img src={getLogo(champion[0])!} alt="" />}
             {champion[0]}
-          </div>
-          <div className="game-over__subtitle">is the funniest AI!</div>
+          </span>
+          <span className="game-over__sub">is the funniest AI</span>
         </div>
       )}
     </div>
   );
 }
 
-function Sidebar({ scores, activeRound, completed }: { scores: Record<string, number>; activeRound: RoundState | null; completed: RoundState[] }) {
+// ── Standings ────────────────────────────────────────────────────────────────
+
+function Standings({ scores, activeRound }: { scores: Record<string, number>; activeRound: RoundState | null }) {
   const sorted = Object.entries(scores).sort((a, b) => b[1] - a[1]);
   const maxScore = sorted[0]?.[1] || 1;
 
   const competing = activeRound
     ? new Set([activeRound.contestants[0].name, activeRound.contestants[1].name])
     : new Set<string>();
-  const judging = activeRound ? new Set(activeRound.votes.map((v) => v.voter.name)) : new Set<string>();
-  const prompting = activeRound?.prompter.name ?? null;
 
   return (
-    <aside className="sidebar">
-      <div className="sidebar__section">
-        <div className="sidebar__header">STANDINGS</div>
-        <div className="sidebar__list">
-          {sorted.map(([name, score], i) => {
-            const pct = maxScore > 0 ? Math.round((score / maxScore) * 100) : 0;
-            const color = getColor(name);
-            const isActive = competing.has(name);
-            const isJudging = judging.has(name);
-            const isPrompting = name === prompting;
-
-            let role = "";
-            if (isActive) role = "⚔️";
-            else if (isPrompting) role = "✍️";
-            else if (isJudging) role = "🗳️";
-
-            return (
-              <div key={name} className={`standing ${isActive ? "standing--active" : ""}`}>
-                <div className="standing__rank">{i === 0 && score > 0 ? "👑" : `${i + 1}.`}</div>
-                <div className="standing__info">
-                  <div className="standing__name-row">
-                    <ModelName model={{id: name, name}} />
-                    {role && <span className="standing__role">{role}</span>}
-                  </div>
-                  <div className="standing__bar-row">
-                    <div className="standing__bar">
-                      <div className="standing__bar-fill" style={{ width: `${pct}%`, background: color }} />
-                    </div>
-                    <span className="standing__score">{score} {score === 1 ? 'win' : 'wins'}</span>
-                  </div>
-                </div>
-              </div>
-            );
-          })}
-        </div>
-        {activeRound && (
-          <div className="sidebar__legend">
-            <span>⚔️ COMPETING</span>
-            <span>✍️ PROMPTING</span>
-            <span>🗳️ JUDGING</span>
-          </div>
-        )}
+    <aside className="standings">
+      <div className="standings__head">
+        <span className="standings__title">Standings</span>
+        <a href="/history" className="standings__link">History →</a>
       </div>
-
-      <div className="sidebar__section sidebar__section--link">
-        <a href="/history" className="history-link">
-          <span>📚 View Past Games</span>
-          <span>→</span>
-        </a>
+      <div className="standings__list">
+        {sorted.map(([name, score], i) => {
+          const pct = maxScore > 0 ? Math.round((score / maxScore) * 100) : 0;
+          const color = getColor(name);
+          const active = competing.has(name);
+          return (
+            <div key={name} className={`standing ${active ? "standing--active" : ""}`}>
+              <span className="standing__rank">{i === 0 && score > 0 ? "👑" : i + 1}</span>
+              <ModelTag model={{ id: name, name }} small />
+              <div className="standing__bar">
+                <div className="standing__fill" style={{ width: `${pct}%`, background: color }} />
+              </div>
+              <span className="standing__score">{score}</span>
+            </div>
+          );
+        })}
       </div>
     </aside>
   );
 }
 
+// ── Connecting ───────────────────────────────────────────────────────────────
+
 function ConnectingScreen() {
   return (
     <div className="connecting">
-      <div className="connecting__logo">QUIPSLOP</div>
-      <div className="connecting__text">Connecting<span className="dots"><span>.</span><span>.</span><span>.</span></span></div>
+      <div className="connecting__logo"><img src="/assets/logo.svg" alt="Quipslop" /></div>
+      <div className="connecting__sub">Connecting<Dots /></div>
     </div>
   );
 }
 
-// ── App ─────────────────────────────────────────────────────────────────────
+// ── App ──────────────────────────────────────────────────────────────────────
 
 function App() {
   const [state, setState] = useState<GameState | null>(null);
-  const [totalRounds, setTotalRounds] = useState(5);
+  const [totalRounds, setTotalRounds] = useState<number | null>(null);
   const [connected, setConnected] = useState(false);
-  const mainRef = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
     const wsProtocol = window.location.protocol === "https:" ? "wss:" : "ws:";
@@ -386,59 +329,44 @@ function App() {
     };
   }, []);
 
-  if (!connected || !state) {
-    return <ConnectingScreen />;
-  }
+  if (!connected || !state) return <ConnectingScreen />;
+
+  const lastCompleted = state.completed[state.completed.length - 1];
+  const isNextPrompting = state.active?.phase === "prompting" && !state.active.prompt;
+  const displayRound = isNextPrompting && lastCompleted ? lastCompleted : state.active;
 
   return (
     <div className="app">
       <div className="layout">
-        <main className="main" ref={mainRef}>
-          <a href="/" className="main-logo">QUIPSLOP</a>
-          {(() => {
-            const isGeneratingNextPrompt = state.active && state.active.phase === "prompting" && !state.active.prompt;
-            const lastCompleted = state.completed[state.completed.length - 1];
+        <main className="main">
+          <header className="header">
+            <a href="/" className="logo">
+              <img src="/assets/logo.svg" alt="Quipslop" />
+            </a>
+          </header>
 
-            if (isGeneratingNextPrompt && lastCompleted) {
-              return (
-                <>
-                  <Arena round={lastCompleted} total={totalRounds} />
-                  <div className="next-round-toast">
-                    <ModelName model={state.active!.prompter} /> is cooking up the next prompt<span className="dots"><span>.</span><span>.</span><span>.</span></span>
-                  </div>
-                </>
-              );
-            }
+          {state.done ? (
+            <GameOver scores={state.scores} />
+          ) : displayRound ? (
+            <Arena round={displayRound} total={totalRounds} />
+          ) : (
+            <div className="waiting">Starting<Dots /></div>
+          )}
 
-            if (state.active) {
-              return <Arena round={state.active} total={totalRounds} />;
-            }
-
-            if (!state.active && !state.done && state.completed.length > 0) {
-              return <Arena round={lastCompleted!} total={totalRounds} />;
-            }
-
-            if (!state.active && !state.done && state.completed.length === 0) {
-              return (
-                <div className="arena-waiting">
-                  Game starting<span className="dots"><span>.</span><span>.</span><span>.</span></span>
-                </div>
-              );
-            }
-
-            return null;
-          })()}
-
-          {state.done && <GameOver scores={state.scores} />}
+          {isNextPrompting && lastCompleted && (
+            <div className="next-toast">
+              <ModelTag model={state.active!.prompter} small /> is writing the next prompt<Dots />
+            </div>
+          )}
         </main>
 
-        <Sidebar scores={state.scores} activeRound={state.active} completed={state.completed} />
+        <Standings scores={state.scores} activeRound={state.active} />
       </div>
     </div>
   );
 }
 
-// ── Mount ───────────────────────────────────────────────────────────────────
+// ── Mount ────────────────────────────────────────────────────────────────────
 
 const root = createRoot(document.getElementById("root")!);
-root.render(<App />);
+root.render(<App />);

game.ts

@@ -261,7 +261,14 @@ export async function runGame(
   state: GameState,
   rerender: () => void,
 ) {
-  for (let r = 1; r <= runs; r++) {
+  let startRound = 1;
+  if (state.completed.length > 0) {
+    startRound = state.completed[state.completed.length - 1].num + 1;
+  }
+  
+  const endRound = startRound + runs - 1;
+  
+  for (let r = startRound; r <= endRound; r++) {
     while (state.isPaused) {
       await new Promise((resolve) => setTimeout(resolve, 1000));
     }
@@ -270,7 +277,7 @@ export async function runGame(
     const prompter = shuffled[0]!;
     const contA = shuffled[1]!;
     const contB = shuffled[2]!;
-    const voters = shuffled.slice(3);
+    const voters = [prompter, ...shuffled.slice(3)];
     const now = Date.now();
 
     const round: RoundState = {

index.html

@@ -4,6 +4,7 @@
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>Quipslop — AI vs AI Comedy Showdown</title>
+  <link rel="icon" type="image/svg+xml" href="./public/assets/logo.svg" />
   <link rel="preconnect" href="https://fonts.googleapis.com" />
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
   <link href="https://fonts.googleapis.com/css2?family=DM+Serif+Display&family=Inter:wght@400;500;600;700;900&family=JetBrains+Mono:wght@400;700&display=swap" rel="stylesheet" />

public/assets/logo.svg

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="1200pt" height="1200pt" version="1.1" viewBox="0 0 1200 1200" xmlns="http://www.w3.org/2000/svg" fill="#ededed">
+ <path d="m900 1200h-600c-110.3 0-200-89.699-200-200v-600c0-110.3 89.699-200 200-200h600c110.3 0 200 89.699 200 200v600c0 110.3-89.699 200-200 200zm-600-950c-82.699 0-150 67.301-150 150v600c0 82.699 67.301 150 150 150h600c82.699 0 150-67.301 150-150v-600c0-82.699-67.301-150-150-150z"/>
+ <path d="m925 1050h-650c-13.801 0-25-11.25-25-25v-225c0-13.75 11.199-25 25-25s25 11.25 25 25v200h600v-200c0-13.75 11.25-25 25-25s25 11.25 25 25v225c0 13.75-11.25 25-25 25z"/>
+ <path d="m525 650h-150c-13.801 0-25-11.25-25-25v-150c0-13.801 11.199-25 25-25h150c13.801 0 25 11.199 25 25v150c0 13.75-11.199 25-25 25zm-125-50h100v-100h-100z"/>
+ <path d="m825 650h-150c-13.75 0-25-11.25-25-25v-150c0-13.801 11.25-25 25-25h150c13.75 0 25 11.199 25 25v150c0 13.75-11.25 25-25 25zm-125-50h100v-100h-100z"/>
+ <path d="m475 150h-100c-13.801 0-25-11.199-25-25v-100c0-13.801 11.199-25 25-25h100c13.801 0 25 11.199 25 25v100c0 13.801-11.199 25-25 25zm-75-50h50v-50h-50z"/>
+ <path d="m650 225c-13.75 0-25-11.199-25-25 0-68.898-56.102-125-125-125-13.801 0-25-11.199-25-25s11.199-25 25-25c96.5 0 175 78.5 175 175 0 13.801-11.25 25-25 25z"/>
+</svg>

server.ts

@@ -1,13 +1,14 @@
 import type { ServerWebSocket } from "bun";
 import indexHtml from "./index.html";
 import historyHtml from "./history.html";
-import { getRounds } from "./db.ts";
+import { getRounds, getAllRounds } from "./db.ts";
 import {
   MODELS,
   LOG_FILE,
   log,
   runGame,
   type GameState,
+  type RoundState,
 } from "./game.ts";
 
 // ── Game state ──────────────────────────────────────────────────────────────
@@ -21,10 +22,27 @@ if (!process.env.OPENROUTER_API_KEY) {
   process.exit(1);
 }
 
+const allRounds = getAllRounds();
+const initialScores = Object.fromEntries(MODELS.map((m) => [m.name, 0]));
+
+let initialCompleted: RoundState[] = [];
+if (allRounds.length > 0) {
+  for (const round of allRounds) {
+    if (round.scoreA !== undefined && round.scoreB !== undefined) {
+      if (round.scoreA > round.scoreB) {
+        initialScores[round.contestants[0].name] = (initialScores[round.contestants[0].name] || 0) + 1;
+      } else if (round.scoreB > round.scoreA) {
+        initialScores[round.contestants[1].name] = (initialScores[round.contestants[1].name] || 0) + 1;
+      }
+    }
+  }
+  initialCompleted = [allRounds[allRounds.length - 1]];
+}
+
 const gameState: GameState = {
-  completed: [],
+  completed: initialCompleted,
   active: null,
-  scores: Object.fromEntries(MODELS.map((m) => [m.name, 0])),
+  scores: initialScores,
   done: false,
   isPaused: false,
 };