← back to Debate Ring Viewer
public/index.html
142 lines
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>Debate Ring — claude-codex 8-way</title>
<link rel="stylesheet" href="/style.css" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
</head>
<body>
<aside id="rail">
<h1>Debate Ring</h1>
<p class="sub">8-way LLM brawl viewer</p>
<div class="rail-section">
<h2>Runs</h2>
<ul id="runs"></ul>
</div>
<div class="rail-section">
<h2>Now playing</h2>
<div id="now">—</div>
<div class="ctrls">
<button id="prev">◀ Prev</button>
<button id="play">▶ Fight</button>
<button id="next">Next ▶</button>
</div>
<label class="speed" for="speed">Speed
<input type="range" id="speed" min="0.4" max="2.5" step="0.1" value="1.0"
aria-label="Playback speed multiplier" />
<span id="speedV" aria-live="polite">1.0×</span>
</label>
<label class="speed" for="sound">Sound
<input type="checkbox" id="sound" checked aria-label="Toggle sound effects" />
</label>
</div>
<div class="rail-section" id="finalWrap" hidden>
<h2>Final report</h2>
<pre id="final"></pre>
</div>
</aside>
<main id="stage">
<div class="arena-frame">
<div class="audience"></div>
<div class="ring" id="ring">
<div class="ring-mat"></div>
<div class="ring-rope rope-top"></div>
<div class="ring-rope rope-mid"></div>
<div class="ring-rope rope-bot"></div>
<div class="ring-post post-tl"></div>
<div class="ring-post post-tr"></div>
<div class="ring-post post-bl"></div>
<div class="ring-post post-br"></div>
<div class="ring-light light-l"></div>
<div class="ring-light light-r"></div>
<div id="fighters"></div>
<div id="bubbles" aria-live="polite" aria-atomic="false"></div>
<div id="bell"></div>
</div>
<div class="hud">
<div class="hud-round">ROUND <span id="roundN">–</span> / <span id="roundT">–</span></div>
<div class="hud-bell">🔔</div>
</div>
</div>
</main>
<template id="fighter-tpl">
<div class="fighter">
<svg viewBox="0 0 200 380" xmlns="http://www.w3.org/2000/svg" class="body">
<!-- shadow on canvas -->
<ellipse cx="100" cy="372" rx="64" ry="7" fill="rgba(0,0,0,.4)" />
<!-- back leg -->
<path d="M82,330 L70,372 L96,372 L98,310 Z" fill="var(--skin-d)" stroke="#1a0e08" stroke-width="2"/>
<!-- shorts -->
<path d="M64,238 Q100,232 136,238 L142,300 Q100,312 58,300 Z" fill="var(--shorts)" stroke="#1a0e08" stroke-width="2"/>
<path d="M64,238 Q100,232 136,238 L138,260 Q100,266 62,260 Z" fill="var(--shorts-d)" opacity=".55"/>
<text x="100" y="282" text-anchor="middle" font-family="'Bebas Neue','Arial Narrow',sans-serif" font-size="14" fill="#fffbe6" font-weight="700" letter-spacing="2">FIGHTER</text>
<!-- waistband -->
<rect x="58" y="232" width="84" height="9" fill="var(--shorts-d)" stroke="#1a0e08" stroke-width="2"/>
<!-- front leg -->
<path d="M118,330 L130,372 L104,372 L102,310 Z" fill="var(--skin)" stroke="#1a0e08" stroke-width="2"/>
<!-- torso -->
<path d="M68,150 Q100,138 132,150 L142,236 Q100,250 58,236 Z" fill="var(--skin)" stroke="#1a0e08" stroke-width="2"/>
<path d="M68,150 Q100,144 132,150 L132,178 Q100,184 68,178 Z" fill="var(--skin-d)" opacity=".4"/>
<!-- pec shading -->
<path d="M84,162 Q100,176 116,162 L116,196 Q100,206 84,196 Z" fill="var(--skin-d)" opacity=".35"/>
<line x1="100" y1="156" x2="100" y2="232" stroke="#1a0e08" stroke-opacity=".25" stroke-width="1.5"/>
<!-- back arm (rear hand guard) -->
<g class="arm-back" style="transform-origin:78px 162px">
<path d="M70,160 Q60,196 64,232" fill="none" stroke="var(--skin)" stroke-width="22" stroke-linecap="round"/>
<path d="M70,160 Q60,196 64,232" fill="none" stroke="var(--skin-d)" stroke-width="22" stroke-linecap="round" opacity=".25"/>
<circle cx="62" cy="240" r="22" fill="var(--glove)" stroke="#1a0e08" stroke-width="2"/>
<path d="M52,238 Q62,232 74,240" stroke="#1a0e08" stroke-width="1.6" fill="none" opacity=".45"/>
</g>
<!-- front arm (jab arm — animated) -->
<g class="arm-front" style="transform-origin:128px 162px">
<path d="M128,160 Q160,180 180,210" fill="none" stroke="var(--skin)" stroke-width="22" stroke-linecap="round"/>
<path d="M128,160 Q160,180 180,210" fill="none" stroke="var(--skin-d)" stroke-width="22" stroke-linecap="round" opacity=".25"/>
<circle cx="184" cy="214" r="22" fill="var(--glove)" stroke="#1a0e08" stroke-width="2"/>
<path d="M174,212 Q184,206 196,214" stroke="#1a0e08" stroke-width="1.6" fill="none" opacity=".45"/>
<text x="184" y="218" text-anchor="middle" font-size="11" fill="#fff" font-family="serif" font-weight="700" opacity=".7">★</text>
</g>
<!-- head -->
<g class="head">
<ellipse cx="100" cy="98" rx="34" ry="40" fill="var(--skin)" stroke="#1a0e08" stroke-width="2"/>
<ellipse cx="100" cy="98" rx="34" ry="40" fill="var(--skin-d)" opacity=".25"/>
<!-- hair -->
<path d="M68,82 Q100,40 132,82 L130,72 Q100,52 70,72 Z" fill="var(--hair)" stroke="#1a0e08" stroke-width="2"/>
<!-- ear -->
<ellipse cx="68" cy="100" rx="5" ry="9" fill="var(--skin-d)"/>
<!-- brow + eyes -->
<path d="M84,90 L96,88" stroke="#1a0e08" stroke-width="2.5" stroke-linecap="round"/>
<path d="M104,88 L116,90" stroke="#1a0e08" stroke-width="2.5" stroke-linecap="round"/>
<circle cx="90" cy="98" r="2.4" fill="#1a0e08"/>
<circle cx="110" cy="98" r="2.4" fill="#1a0e08"/>
<!-- nose -->
<path d="M99,102 L97,116 L103,118" fill="none" stroke="#1a0e08" stroke-width="1.6" stroke-linecap="round"/>
<!-- mouth (mouthguard color = team) -->
<path d="M88,124 Q100,132 112,124" fill="var(--shorts)" stroke="#1a0e08" stroke-width="1.8"/>
<!-- chin shadow -->
<path d="M82,126 Q100,142 118,126" fill="none" stroke="var(--skin-d)" stroke-width="3" opacity=".35"/>
<!-- sweat drop -->
<ellipse class="sweat" cx="74" cy="120" rx="2.2" ry="3.4" fill="#bce3ff" opacity="0"/>
</g>
<!-- neck -->
<rect x="92" y="132" width="16" height="22" fill="var(--skin)" stroke="#1a0e08" stroke-width="2"/>
</svg>
<div class="nameplate">
<span class="nm"></span>
<span class="rec">0-0</span>
</div>
</div>
</template>
<script src="/app.js"></script>
</body>
</html>