CloudHost/argument.es
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

logo, fix db loading

Browse Source
This commit is contained in:
Theo Browne
2026-02-20 04:49:40 -08:00
parent 593ad125ff
commit 77f68d440c
9 changed files with 656 additions and 720 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
check-db.ts Normal file
View File

@@ -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);

7
db.ts
View File

@@ -21,7 +21,7 @@ export function saveRound(round: RoundState) {
export function getRounds(page: number = 1, limit: number = 10) { export function getRounds(page: number = 1, limit: number = 10) {
const offset = (page - 1) * limit; const offset = (page - 1) * limit;
const countQuery = db.query("SELECT COUNT(*) as count FROM rounds").get() as { count: number }; 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 }[]; .all({ $limit: limit, $offset: offset }) as { data: string }[];
return { return {
rounds: rows.map(r => JSON.parse(r.data) as RoundState), 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) 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);
}

946
frontend.css
View File

File diff suppressed because it is too large Load Diff

370
frontend.tsx
View File

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

11
game.ts
View File

@@ -261,7 +261,14 @@ export async function runGame(
state: GameState, state: GameState,
rerender: () => void, 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) { while (state.isPaused) {
await new Promise((resolve) => setTimeout(resolve, 1000)); await new Promise((resolve) => setTimeout(resolve, 1000));
} }
@@ -270,7 +277,7 @@ export async function runGame(
const prompter = shuffled[0]!; const prompter = shuffled[0]!;
const contA = shuffled[1]!; const contA = shuffled[1]!;
const contB = shuffled[2]!; const contB = shuffled[2]!;
const voters = shuffled.slice(3); const voters = [prompter, ...shuffled.slice(3)];
const now = Date.now(); const now = Date.now();
const round: RoundState = { const round: RoundState = {

1
index.html
View File

@@ -4,6 +4,7 @@
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Quipslop — AI vs AI Comedy Showdown</title> <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.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> <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" /> <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" />

9
public/assets/logo.svg Normal file
View File

@@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

24
server.ts
View File

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

0
todo.md Normal file
View File