Spaces:

MostLime
/

lcm-chess-playground

Sleeping

App Files Files Community

MostLime commited on Mar 11

Commit

7021e31

verified ·

1 Parent(s): 9e8f8b5

Create frontend.html

Browse files

Files changed (1) hide show

frontend.html +884 -0

frontend.html ADDED Viewed

	@@ -0,0 +1,884 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
+<title>LCM Chess</title>
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/chessboard-js/1.0.0/chessboard-1.0.0.min.css">
+<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/chess.js/0.10.3/chess.min.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/chessboard-js/1.0.0/chessboard-1.0.0.min.js"></script>
+<style>
+*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+:root {
+  --bg:       #1a1a1a;
+  --bg-side:  #141210;
+  --bg-card:  #1e1c1a;
+  --border:   #2e2820;
+  --border2:  #3a3530;
+  --text:     #e8e0d0;
+  --dim:      #8a7a6a;
+  --faint:    #6a5a4a;
+  --accent:   #b58863;
+  --accent-h: #c9956c;
+  --sq-light: #f0d9b5;
+  --sq-dark:  #b58863;
+  --mono:     'Courier New', monospace;
+}
+html, body {
+  width: 100%; height: 100%;
+  background: var(--bg);
+  color: var(--text);
+  font-family: Georgia, serif;
+  overflow: hidden;
+  touch-action: manipulation;
+  -webkit-user-select: none;
+  user-select: none;
+}
+#app { display: flex; width: 100vw; height: 100vh; overflow: hidden; }
+/* ── Sidebar ── */
+#sidebar {
+  width: 220px; min-width: 220px;
+  background: var(--bg-side);
+  border-right: 1px solid var(--border);
+  display: flex; flex-direction: column;
+  padding: 18px 14px; gap: 16px;
+  overflow: hidden;
+}
+.lbl {
+  font-size: 0.68rem; color: var(--faint);
+  text-transform: uppercase; letter-spacing: 0.09em;
+}
+.side-btns { display: flex; gap: 4px; }
+.side-btn {
+  flex: 1; padding: 7px 2px;
+  background: #252220; border: 1px solid var(--border2);
+  color: var(--dim); font-size: 0.78rem; border-radius: 4px;
+  cursor: pointer; transition: all 0.12s; font-family: Georgia, serif;
+  -webkit-tap-highlight-color: transparent;
+}
+.side-btn:hover  { background: #2e2820; color: var(--text); }
+.side-btn.active { background: var(--accent); border-color: var(--accent); color: #1a1a1a; font-weight: bold; }
+.sg { display: flex; flex-direction: column; gap: 5px; }
+.sr { display: flex; align-items: center; gap: 8px; }
+input[type=range] { flex: 1; accent-color: var(--accent); cursor: pointer; }
+.sv {
+  font-size: 0.76rem; color: var(--text);
+  font-family: var(--mono); min-width: 32px; text-align: right;
+}
+#new-game-btn {
+  width: 100%; padding: 9px;
+  background: var(--accent); border: none; border-radius: 6px;
+  color: #1a1a1a; font-size: 0.88rem; font-weight: bold;
+  font-family: Georgia, serif; cursor: pointer;
+  transition: background 0.12s;
+  -webkit-tap-highlight-color: transparent;
+}
+#new-game-btn:hover    { background: var(--accent-h); }
+#new-game-btn:disabled { background: #3a2e22; color: #6a5a4a; cursor: not-allowed; }
+hr.div { border: none; border-top: 1px solid #252220; flex-shrink: 0; }
+#hw { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 5px; overflow: hidden; }
+#mh {
+  flex: 1; min-height: 0; overflow-y: auto;
+  font-family: var(--mono); font-size: 0.74rem; color: #c8b89a; line-height: 1.9;
+}
+#mh::-webkit-scrollbar { width: 3px; }
+#mh::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 2px; }
+/* ── Main ── */
+#main {
+  flex: 1; min-width: 0;
+  display: flex; flex-direction: column;
+  align-items: center; justify-content: center;
+  gap: 10px; padding: 16px; overflow: hidden;
+}
+#title { text-align: center; flex-shrink: 0; }
+#title h1 { font-size: clamp(1.1rem, 3vw, 1.5rem); color: var(--sq-light); letter-spacing: 0.02em; }
+#title p  { font-size: clamp(0.68rem, 1.5vw, 0.8rem); color: var(--faint); font-style: italic; margin-top: 2px; }
+#board-wrap { flex-shrink: 0; position: relative; }
+#board { width: 100% !important; }
+/* board square colors */
+#board .white-1e1d7 { background-color: var(--sq-light) !important; }
+#board .square-55d63 { cursor: default; }
+#board.my-turn .square-55d63 { cursor: grab; }
+#board .black-3c85d { background-color: var(--sq-dark)  !important; }
+/* highlights — inset box-shadow overlays the square without fighting chessboard.js bg */
+.hl-from    { box-shadow: inset 0 0 0 1000px rgba(205,210,106,0.65) !important; }
+.hl-to      { box-shadow: inset 0 0 0 1000px rgba(205,210,106,0.85) !important; }
+.hl-sel     { box-shadow: inset 0 0 0 1000px rgba(205,210,106,0.65) !important; }
+.hl-check   { box-shadow: inset 0 0 0 1000px rgba(210,50,50,0.65)   !important; }
+.hl-legal   { background-image: radial-gradient(circle, rgba(0,0,0,0.22) 28%, transparent 30%) !important; }
+.hl-capture { background-image: radial-gradient(circle, transparent 57%, rgba(0,0,0,0.22) 58%, rgba(0,0,0,0.22) 72%, transparent 74%) !important; }
+/* drag hover — outline so it layers on top of box-shadow yellow fill */
+.highlight-hover { outline: 4px solid rgba(255,255,255,0.5) !important; outline-offset: -4px !important; }
+#status-bar {
+  flex-shrink: 0; width: 100%; max-width: 480px;
+  background: var(--bg-card); border: 1px solid var(--border); border-radius: 6px;
+  padding: 8px 14px;
+  font-family: var(--mono); font-size: clamp(0.7rem, 1.5vw, 0.8rem);
+  color: var(--text); text-align: center;
+}
+#thinking {
+  flex-shrink: 0; height: 18px;
+  display: none; align-items: center; gap: 6px;
+  font-size: 0.78rem; color: var(--accent); font-style: italic;
+}
+#thinking.on { display: flex; }
+.dots span {
+  display: inline-block; width: 4px; height: 4px;
+  background: var(--accent); border-radius: 50%;
+  animation: bop 1.2s infinite;
+}
+.dots span:nth-child(2) { animation-delay: 0.2s; }
+.dots span:nth-child(3) { animation-delay: 0.4s; }
+@keyframes bop { 0%,80%,100%{transform:translateY(0)} 40%{transform:translateY(-5px)} }
+/* ── Time controls ── */
+.tc-btns { display: flex; gap: 4px; }
+.tc-btn {
+  flex: 1; padding: 6px 2px;
+  background: #252220; border: 1px solid var(--border2);
+  color: var(--dim); font-size: 0.75rem; border-radius: 4px;
+  cursor: pointer; transition: all 0.12s; font-family: var(--mono);
+  -webkit-tap-highlight-color: transparent;
+}
+.tc-btn:hover  { background: #2e2820; color: var(--text); }
+.tc-btn.active { background: #2a3a2a; border-color: #4a7a4a; color: #8aba8a; font-weight: bold; }
+/* ── Clock display (shows below board when active) ── */
+#clocks {
+  display: none;
+  flex-shrink: 0;
+  width: 100%; max-width: 480px;
+  gap: 8px;
+}
+#clocks.on { display: flex; }
+.clock-box {
+  flex: 1; padding: 8px 12px;
+  background: var(--bg-card); border: 1px solid var(--border);
+  border-radius: 6px; text-align: center;
+  font-family: var(--mono); font-size: 1.3rem; font-weight: bold;
+  color: var(--dim); transition: all 0.2s;
+}
+.clock-box.active { color: var(--sq-light); border-color: #5a5040; background: #252215; }
+.clock-box.low    { color: #e05050; border-color: #7a2020; background: #251515; animation: pulse-red 1s infinite; }
+.clock-box .clk-lbl {
+  font-size: 0.62rem; color: var(--faint); letter-spacing: 0.08em;
+  text-transform: uppercase; display: block; margin-bottom: 2px;
+}
+@keyframes pulse-red { 0%,100%{opacity:1} 50%{opacity:0.65} }
+/* ── PGN button ── */
+#pgn-btn {
+  width: 100%; padding: 7px;
+  background: #1e1c1a; border: 1px solid var(--border2); border-radius: 5px;
+  color: var(--dim); font-size: 0.78rem; font-family: Georgia, serif;
+  cursor: pointer; transition: all 0.12s; margin-top: 2px;
+  -webkit-tap-highlight-color: transparent;
+}
+#pgn-btn:hover { background: #252220; color: var(--text); border-color: #5a4a3a; }
+#pgn-btn:disabled { opacity: 0.35; cursor: not-allowed; }
+/* ── Mobile ── */
+#mob-fab {
+  display: none;
+  position: fixed; bottom: 14px; right: 14px;
+  width: 46px; height: 46px;
+  background: var(--accent); border: none; border-radius: 50%;
+  font-size: 1.3rem; cursor: pointer; z-index: 50;
+  align-items: center; justify-content: center;
+  box-shadow: 0 2px 12px rgba(0,0,0,0.5);
+  -webkit-tap-highlight-color: transparent;
+}
+#mob-overlay {
+  display: none; position: fixed; inset: 0;
+  background: rgba(0,0,0,0.55); z-index: 98; opacity: 0;
+  pointer-events: none; transition: opacity 0.25s;
+}
+#mob-overlay.on { opacity: 1; pointer-events: auto; }
+#mob-panel {
+  display: none; position: fixed;
+  bottom: 0; left: 0; right: 0;
+  background: var(--bg-side);
+  border-top: 1px solid var(--border);
+  border-radius: 14px 14px 0 0;
+  padding: 18px 16px 30px;
+  flex-direction: column; gap: 16px;
+  z-index: 99;
+  transform: translateY(100%); transition: transform 0.28s ease;
+}
+#mob-panel.on { transform: translateY(0); }
+@media (max-width: 680px) {
+  #sidebar  { display: none; }
+  #mob-fab  { display: flex; }
+  #mob-panel, #mob-overlay { display: flex; }
+  #mob-panel { display: flex; }
+  #main { padding: 10px; gap: 8px; }
+}
+/* ── Promotion modal ── */
+#promo-modal {
+  display: none; position: fixed; inset: 0;
+  background: rgba(0,0,0,0.8); z-index: 200;
+  align-items: center; justify-content: center;
+}
+#promo-modal.on { display: flex; }
+#promo-box {
+  background: #252220; border: 1px solid #4a4035;
+  border-radius: 10px; padding: 22px 28px; text-align: center;
+}
+#promo-box h3 { color: var(--sq-light); margin-bottom: 14px; font-size: 0.92rem; letter-spacing: 0.04em; }
+.pb { display: flex; gap: 10px; }
+.pb button {
+  width: 58px; height: 58px;
+  background: #1a1a1a; border: 1px solid #4a4035; border-radius: 6px;
+  cursor: pointer; font-size: 2rem;
+  display: flex; align-items: center; justify-content: center;
+  color: var(--text); transition: background 0.12s;
+  -webkit-tap-highlight-color: transparent;
+}
+.pb button:hover { background: var(--border2); }
+</style>
+</head>
+<body>
+<div id="app">
+  <!-- Desktop sidebar -->
+  <div id="sidebar">
+    <div>
+      <div class="lbl" style="margin-bottom:7px">Play as</div>
+      <div class="side-btns">
+        <button class="side-btn" data-side="white" onclick="setSide('white')">White</button>
+        <button class="side-btn active" data-side="random" onclick="setSide('random')">Rnd</button>
+        <button class="side-btn" data-side="black" onclick="setSide('black')">Black</button>
+      </div>
+    </div>
+    <div class="sg">
+      <div class="lbl">Temperature</div>
+      <div class="sr">
+        <input type="range" id="td" min="0.1" max="2.0" step="0.05" value="1.0" oninput="syncS('t',false)">
+        <span class="sv" id="tv">1.00</span>
+      </div>
+    </div>
+    <div class="sg">
+      <div class="lbl">Top-K <span style="color:#4a3a2a;font-size:0.66rem">(0=off)</span></div>
+      <div class="sr">
+        <input type="range" id="kd" min="0" max="20" step="1" value="0" oninput="syncS('k',false)">
+        <span class="sv" id="kv">0</span>
+      </div>
+    </div>
+    <div>
+      <div class="lbl" style="margin-bottom:7px">Time Control</div>
+      <div class="tc-btns">
+        <button class="tc-btn active" data-tc="0"   onclick="setTC(0)">∞</button>
+        <button class="tc-btn"       data-tc="60"   onclick="setTC(60)">1m</button>
+        <button class="tc-btn"       data-tc="300"  onclick="setTC(300)">5m</button>
+        <button class="tc-btn"       data-tc="600"  onclick="setTC(600)">10m</button>
+      </div>
+    </div>
+    <button id="new-game-btn" onclick="newGame()">New Game</button>
+    <hr class="div">
+    <div id="hw">
+      <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:3px"><span class="lbl">Move History</span><button id="pgn-btn" style="width:auto;padding:3px 8px;margin-top:0;font-size:0.68rem" onclick="copyPGN()" disabled>PGN ↓</button></div>
+      <div id="mh"></div>
+    </div>
+  </div>
+  <!-- Board -->
+  <div id="main">
+    <div id="title">
+      <h1>♟ Liquid Chess Model</h1>
+      <p>29.2M parameter hybrid transformer</p>
+    </div>
+    <div id="board-wrap"><div id="board"></div></div>
+    <div id="clocks">
+      <div class="clock-box" id="clk-top"><span class="clk-lbl" id="clk-top-lbl">Model</span><span id="clk-top-val">—</span></div>
+      <div class="clock-box active" id="clk-bot"><span class="clk-lbl" id="clk-bot-lbl">You</span><span id="clk-bot-val">—</span></div>
+    </div>
+    <div id="status-bar">Loading…</div>
+  </div>
+</div>
+<!-- Mobile FAB + panel -->
+<button id="mob-fab" onclick="mobToggle()">⚙</button>
+<div id="mob-overlay" onclick="mobClose()"></div>
+<div id="mob-panel">
+  <div style="display:flex;justify-content:space-between;align-items:center">
+    <span style="font-size:0.9rem;color:var(--sq-light)">Settings</span>
+    <button onclick="mobClose()" style="background:none;border:none;color:var(--dim);font-size:1.3rem;cursor:pointer">✕</button>
+  </div>
+  <div>
+    <div class="lbl" style="margin-bottom:7px">Play as</div>
+    <div class="side-btns">
+      <button class="side-btn" data-side="white" onclick="setSide('white')">White</button>
+      <button class="side-btn active" data-side="random" onclick="setSide('random')">Rnd</button>
+      <button class="side-btn" data-side="black" onclick="setSide('black')">Black</button>
+    </div>
+  </div>
+  <div class="sg">
+    <div class="lbl">Temperature</div>
+    <div class="sr">
+      <input type="range" id="tm" min="0.1" max="2.0" step="0.05" value="1.0" oninput="syncS('t',true)">
+      <span class="sv" id="tvm">1.00</span>
+    </div>
+  </div>
+  <div class="sg">
+    <div class="lbl">Top-K <span style="color:#4a3a2a;font-size:0.66rem">(0=off)</span></div>
+    <div class="sr">
+      <input type="range" id="km" min="0" max="20" step="1" value="0" oninput="syncS('k',true)">
+      <span class="sv" id="kvm">0</span>
+    </div>
+  </div>
+  <div>
+    <div class="lbl" style="margin-bottom:7px">Time Control</div>
+    <div class="tc-btns">
+      <button class="tc-btn active" data-tc="0"   onclick="setTC(0)">∞</button>
+      <button class="tc-btn"       data-tc="60"   onclick="setTC(60)">1m</button>
+      <button class="tc-btn"       data-tc="300"  onclick="setTC(300)">5m</button>
+      <button class="tc-btn"       data-tc="600"  onclick="setTC(600)">10m</button>
+    </div>
+  </div>
+  <button onclick="newGame();mobClose()" style="width:100%;padding:10px;background:var(--accent);border:none;border-radius:6px;color:#1a1a1a;font-size:0.9rem;font-weight:bold;font-family:Georgia,serif;cursor:pointer">New Game</button>
+  <button onclick="copyPGN();mobClose()" style="width:100%;padding:8px;background:#1e1c1a;border:1px solid var(--border2);border-radius:5px;color:var(--dim);font-size:0.82rem;font-family:Georgia,serif;cursor:pointer">Copy PGN</button>
+</div>
+<!-- Promotion modal -->
+<div id="promo-modal">
+  <div id="promo-box">
+    <h3>Promote to…</h3>
+    <div class="pb">
+      <button onclick="pickPromo('q')">♛</button>
+      <button onclick="pickPromo('r')">♜</button>
+      <button onclick="pickPromo('b')">♝</button>
+      <button onclick="pickPromo('n')">♞</button>
+    </div>
+  </div>
+</div>
+<script>
+// ── State ─────────────────────────────��────────────────────────────────────────
+let game         = new Chess();
+let board        = null;
+let playerWhite  = true;
+let moveHistory  = [];
+let chosenSide   = 'random';
+let pendingPromo = null;
+let gameOver     = false;
+let selectedSq   = null;
+const el = id => document.getElementById(id);
+// ── Gradio SSE API ─────────────────────────────────────────────────────────────
+// Gradio 4+ two-step: POST → get event_id, then GET stream → parse last data line
+async function apiPost(endpoint, body) {
+  const r = await fetch('/api/' + endpoint, {
+    method:  'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body:    JSON.stringify(body),
+  });
+  if (!r.ok) throw new Error('Request failed: ' + r.status);
+  return r.json();
+}
+// ── Board size ─────────────────────────────────────────────────────────────────
+function calcSize() {
+  const sideW  = window.innerWidth > 680 ? 220 : 0;
+  const availW = window.innerWidth  - sideW - 32;
+  const availH = window.innerHeight - 180;
+  return Math.floor(Math.min(availW, availH, 480));
+}
+// ── Board init ─────────────────────────────────────────────────────────────────
+function initBoard(orientation) {
+  const size = calcSize();
+  el('board-wrap').style.width = size + 'px';
+  if (board) board.destroy();
+  board = Chessboard('board', {
+    position:          game.fen(),
+    orientation:       orientation,
+    draggable:         true,
+    onDragStart:       onDragStart,
+    onDrop:            onDrop,
+    onSnapEnd:         () => { board.position(game.fen()); applyHL(); },
+    onMouseoverSquare: onMouseOver,
+    onMouseoutSquare:  onMouseOut,
+    onDragMove:        onDragMoveBoard,
+    pieceTheme:        'https://chessboardjs.com/img/chesspieces/wikipedia/{piece}.png',
+    moveSpeed:         150,
+    snapbackSpeed:     200,
+  });
+}
+window.addEventListener('resize', () => {
+  if (!board) return;
+  const size = calcSize();
+  el('board-wrap').style.width = size + 'px';
+  board.resize();
+});
+// ── Highlight state ────────────────────────────────────────────────────────────
+// Single source of truth. Call applyHL() after any state change or board.position().
+let lastFrom = null;
+let lastTo   = null;
+let isDrag            = false;
+let suppressNextClick = false;
+function applyHL() {
+  clearHL();
+  if (lastFrom) hl(lastFrom, 'hl-from');
+  if (lastTo)   hl(lastTo,   'hl-to');
+  if (selectedSq) {
+    hl(selectedSq, 'hl-sel');
+    legalDots(selectedSq);
+  }
+  if (game.in_check()) {
+    const t = game.turn();
+    for (let r = 1; r <= 8; r++) for (const f of 'abcdefgh') {
+      const sq = f + r, p = game.get(sq);
+      if (p && p.type === 'k' && p.color === t) hl(sq, 'hl-check');
+    }
+  }
+}
+// ── Drag ───────────────────────────────────────────────────────────────────────
+function onDragStart(source, piece) {
+  if (!canMove()) return false;
+  if (!myPiece(piece)) return false;
+  isDrag = false;
+  // show legal dots for the piece being dragged
+  selectedSq = source;
+  applyHL();
+  return true;
+}
+function onDragMoveBoard(newSq) {
+  isDrag = true;
+  // hover border — outline, independent of box-shadow yellow
+  document.querySelectorAll('.highlight-hover').forEach(e => e.classList.remove('highlight-hover'));
+  if (newSq !== 'offboard') hl(newSq, 'highlight-hover');
+}
+function onDrop(source, target) {
+  document.querySelectorAll('.highlight-hover').forEach(e => e.classList.remove('highlight-hover'));
+  // Suppress the DOM click/touchend that always fires after mouseup/touchend,
+  // because the drag system (onDragStart/onDrop) already handled this interaction.
+  suppressNextClick = true;
+  setTimeout(() => { suppressNextClick = false; }, 100);
+  if (source === target || !isDrag) {
+    // User clicked without dragging — onDragStart already set selectedSq, keep it.
+    isDrag = false;
+    return 'snapback';
+  }
+  isDrag = false;
+  return tryMove(source, target) ? undefined : 'snapback';
+}
+function onMouseOver() {}
+function onMouseOut()  {}
+// ── Click to move ──────────────────────────────────────────────────────────────
+function onSquareClick(sq, pStr) {
+  if (!canMove()) return;
+  if (selectedSq) {
+    if (sq === selectedSq) {
+      selectedSq = null;
+      applyHL();
+      return;
+    }
+    // Reselect another own piece
+    const p = game.get(sq);
+    if (p && myPieceObj(p)) {
+      selectedSq = sq;
+      applyHL();
+      return;
+    }
+    // Attempt move
+    if (!tryMove(selectedSq, sq)) {
+      selectedSq = null;
+      applyHL();
+    }
+    return;
+  }
+  // Select piece
+  if (!pStr || !myPiece(pStr)) return;
+  selectedSq = sq;
+  applyHL();
+}
+// ── Move logic ─────────────────────────────────────────────────────────────────
+function tryMove(from, to) {
+  const p = game.get(from);
+  const isPromo = p && p.type === 'p' &&
+    ((p.color === 'w' && to[1] === '8') || (p.color === 'b' && to[1] === '1'));
+  if (isPromo) {
+    // Check it's actually a legal move before showing modal
+    const test = game.move({ from, to, promotion: 'q' });
+    if (!test) return false;
+    game.undo();
+    pendingPromo = { from, to };
+    selectedSq = null;
+    clearHL();
+    el('promo-modal').classList.add('on');
+    return true;
+  }
+  const fenBefore = game.fen();
+  const mv = game.move({ from, to });
+  if (!mv) return false;
+  board.position(game.fen(), false);
+  hlLast(from, to);
+  sendMove(mv.from + mv.to + (mv.promotion || ''), fenBefore);
+  return true;
+}
+function pickPromo(piece) {
+  el('promo-modal').classList.remove('on');
+  if (!pendingPromo) return;
+  const { from, to } = pendingPromo;
+  pendingPromo = null;
+  const fenBefore = game.fen();
+  const mv = game.move({ from, to, promotion: piece });
+  if (!mv) return;
+  board.position(game.fen(), false);
+  hlLast(from, to);
+  sendMove(from + to + piece, fenBefore);
+}
+// ── Backend call ───────────────────────────────────────────────────────────────
+async function sendMove(uci, fenBefore) {
+  stopClock();
+  startClock('model');
+  lockBoard(true);
+  try {
+    const r = await apiPost('make_move', {
+      move_uci: uci, fen: fenBefore, history: moveHistory,
+      temperature: parseFloat(getVal('t')),
+      top_k: parseInt(getVal('k')),
+    });
+    moveHistory = r.history;
+    game.load(r.fen);
+    board.position(r.fen, true);
+    if (r.model_move) { lastFrom = r.model_move.slice(0,2); lastTo = r.model_move.slice(2,4); }
+    else { lastFrom = null; lastTo = null; }
+    selectedSq = null;
+    applyHL();
+    updateHist(r.history_text);
+    setStatus(r.status);
+    gameOver = isOver(r.status);
+    lockBoard(gameOver);
+    updateTurnClass();
+    stopClock();
+    if (!gameOver) startClock('player');
+  } catch(e) {
+    setStatus('Error: ' + e.message);
+    game.undo();
+    board.position(game.fen());
+    lockBoard(false);
+    updateTurnClass();
+    stopClock();
+    startClock('player');
+  }
+}
+async function newGame() {
+  gameOver = false; selectedSq = null; clearHL();
+  el('new-game-btn').disabled = true;
+  setStatus('Starting…');
+  try {
+    const r = await apiPost('start_game', {
+      side: chosenSide,
+      temperature: parseFloat(getVal('t')),
+      top_k: parseInt(getVal('k')),
+    });
+    playerWhite = r.player_is_white;
+    moveHistory = r.history;
+    game = new Chess(r.fen);
+    // ← This is the fix: pass correct orientation based on actual assigned side
+    initBoard(playerWhite ? 'white' : 'black');
+    lastFrom = r.model_move ? r.model_move.slice(0,2) : null;
+    lastTo   = r.model_move ? r.model_move.slice(2,4)   : null;
+    selectedSq = null;
+    applyHL();
+    updateHist(r.history_text);
+    setStatus(r.status);
+    lockBoard(false);
+    resetClocks();
+    // if model went first (player is black), model already moved — start player clock
+    startClock('player');
+    el('pgn-btn') && (el('pgn-btn').disabled = false);
+  } catch(e) {
+    setStatus('Error: ' + e.message);
+  }
+  el('new-game-btn').disabled = false;
+}
+// ── Helpers ────────────────────────────────────────────────────────────────────
+const canMove    = () => !gameOver && !game.game_over() && (game.turn() === 'w') === playerWhite;
+const myPiece    = s => (playerWhite && s[0]==='w') || (!playerWhite && s[0]==='b');
+const myPieceObj = p => (playerWhite && p.color==='w') || (!playerWhite && p.color==='b');
+const isOver     = s => /Checkmate|draw|Game over/i.test(s);
+function getVal(name) {
+  const mob = window.innerWidth <= 680;
+  return mob ? el(name==='t'?'tm':'km').value : el(name==='t'?'td':'kd').value;
+}
+function syncS(name, fromMob) {
+  const d   = el(name==='t'?'td':'kd');
+  const m   = el(name==='t'?'tm':'km');
+  const dv  = el(name==='t'?'tv':'kv');
+  const mv  = el(name==='t'?'tvm':'kvm');
+  const fmt = name==='t' ? v => parseFloat(v).toFixed(2) : v => v;
+  if (fromMob) { d.value = m.value; }
+  else         { m.value = d.value; }
+  const val = fromMob ? m.value : d.value;
+  dv.textContent = fmt(val);
+  mv.textContent = fmt(val);
+}
+function setSide(s) {
+  chosenSide = s;
+  document.querySelectorAll('.side-btn').forEach(b =>
+    b.classList.toggle('active', b.dataset.side === s));
+}
+const setStatus = msg => el('status-bar').textContent = msg;
+function lockBoard(locked) {
+  el('board').style.pointerEvents = locked ? 'none' : '';
+  el('board').style.opacity       = locked ? '0.75' : '';
+  updateTurnClass();
+}
+function updateTurnClass() {
+  const myTurn = !gameOver && (game.turn() === 'w') === playerWhite;
+  el('board').classList.toggle('my-turn', myTurn);
+}
+function updateHist(text) {
+  const btn = el('pgn-btn'); if (btn) btn.disabled = !text;
+  const d = el('mh');
+  d.innerHTML = (text||'').split('\n').filter(Boolean).map(l=>`<div>${l}</div>`).join('');
+  d.scrollTop = d.scrollHeight;
+}
+function hl(sq, cls) {
+  document.querySelectorAll(`[data-square="${sq}"]`).forEach(e => e.classList.add(cls));
+}
+function clearHL() {
+  ['hl-from','hl-to','hl-sel','hl-legal','hl-capture','hl-check'].forEach(cls =>
+    document.querySelectorAll('.'+cls).forEach(e => e.classList.remove(cls)));
+}
+function legalDots(sq) {
+  game.moves({ square: sq, verbose: true }).forEach(m => {
+    hl(m.to, game.get(m.to) ? 'hl-capture' : 'hl-legal');
+  });
+}
+function hlLast(from, to) {
+  selectedSq = null;
+  lastFrom   = from;
+  lastTo     = to;
+  applyHL();
+}
+function mobToggle() {
+  el('mob-panel').classList.toggle('on');
+  el('mob-overlay').classList.toggle('on');
+}
+function mobClose() {
+  el('mob-panel').classList.remove('on');
+  el('mob-overlay').classList.remove('on');
+}
+// ── Time controls ──────────────────────────────────────────────────────────────
+let tcSecs      = 0;       // 0 = no limit
+let playerTime  = 0;       // remaining seconds
+let modelTime   = 0;
+let clockTick   = null;    // setInterval handle
+let clockActive = null;    // 'player' | 'model' | null
+function setTC(secs) {
+  tcSecs = secs;
+  document.querySelectorAll('.tc-btn').forEach(b =>
+    b.classList.toggle('active', parseInt(b.dataset.tc) === secs));
+}
+function fmtTime(s) {
+  if (s <= 0) return '0:00';
+  const m = Math.floor(s / 60);
+  const sec = Math.floor(s % 60);
+  return m + ':' + String(sec).padStart(2, '0');
+}
+function startClock(who) {
+  // who: 'player' or 'model'
+  stopClock();
+  if (!tcSecs) return;
+  clockActive = who;
+  updateClockUI();
+  clockTick = setInterval(() => {
+    if (who === 'player') {
+      playerTime = Math.max(0, playerTime - 0.1);
+      if (playerTime <= 0) { flagFall('player'); return; }
+    } else {
+      modelTime = Math.max(0, modelTime - 0.1);
+      if (modelTime <= 0) { flagFall('model'); return; }
+    }
+    updateClockUI();
+  }, 100);
+}
+function stopClock() {
+  if (clockTick) { clearInterval(clockTick); clockTick = null; }
+  clockActive = null;
+  updateClockUI();
+}
+function flagFall(who) {
+  stopClock();
+  gameOver = true;
+  lockBoard(true);
+  setStatus(who === 'player' ? 'Time! Model wins on time.' : 'Time! You win on time.');
+}
+function resetClocks() {
+  stopClock();
+  playerTime = tcSecs;
+  modelTime  = tcSecs;
+  updateClockUI();
+  el('clocks').classList.toggle('on', tcSecs > 0);
+}
+function updateClockUI() {
+  if (!tcSecs) return;
+  // Figure out which clock is on top (opponent) vs bottom (player)
+  const playerIsTop = !playerWhite;  // board orientation: model is top if player=white
+  const topIsPlayer = playerIsTop;
+  const topSecs = topIsPlayer ? playerTime : modelTime;
+  const botSecs = topIsPlayer ? modelTime  : playerTime;
+  const topWho  = topIsPlayer ? 'You'   : 'Model';
+  const botWho  = topIsPlayer ? 'Model' : 'You';
+  el('clk-top-lbl').textContent = topWho;
+  el('clk-bot-lbl').textContent = botWho;
+  el('clk-top-val').textContent = fmtTime(topSecs);
+  el('clk-bot-val').textContent = fmtTime(botSecs);
+  const topActive = (clockActive === 'player' && topIsPlayer) || (clockActive === 'model' && !topIsPlayer);
+  el('clk-top').className = 'clock-box' + (topActive ? ' active' : '') + (topSecs < 10 && tcSecs ? ' low' : '');
+  el('clk-bot').className = 'clock-box' + (!topActive && clockActive ? ' active' : '') + (botSecs < 10 && tcSecs ? ' low' : '');
+}
+// ── PGN export ─────────────────────────────────────────────────────────────────
+let pgnMoves = [];  // SAN move list for PGN
+function buildPGN() {
+  const now   = new Date();
+  const date  = now.toISOString().slice(0,10).replace(/-/g,'.');
+  const result = gameOver ? (
+    el('status-bar').textContent.includes('wins') ?
+      (el('status-bar').textContent.includes('Model') ? (playerWhite ? '0-1' : '1-0') : (playerWhite ? '1-0' : '0-1')) :
+      '1/2-1/2'
+  ) : '*';
+  const header = [
+    '[Event "LCM Chess"]',
+    '[Site "https://huggingface.co/spaces/MostLime/lcm-chess"]',
+    `[Date "${date}"]`,
+    `[White "${playerWhite ? 'You' : 'LCM'}"]`,
+    `[Black "${playerWhite ? 'LCM' : 'You'}"]`,
+    `[Result "${result}"]`,
+    `[TimeControl "${tcSecs ? tcSecs+'+0' : '-'}"]`,
+  ].join('\n');
+  // Build SAN from move history using chess.js
+  const tmp = new Chess();
+  const sans = [];
+  for (const uci of moveHistory) {
+    const from = uci.slice(0,2), to = uci.slice(2,4), promo = uci[4] || undefined;
+    const mv = tmp.move({ from, to, promotion: promo });
+    if (mv) sans.push(mv.san);
+  }
+  let body = '';
+  for (let i = 0; i < sans.length; i++) {
+    if (i % 2 === 0) body += (i/2+1) + '. ';
+    body += sans[i] + ' ';
+  }
+  return header + '\n\n' + body.trim() + ' ' + result;
+}
+function copyPGN() {
+  if (!moveHistory.length) return;
+  const pgn = buildPGN();
+  // Try native clipboard, fall back to download
+  if (navigator.clipboard && navigator.clipboard.writeText) {
+    navigator.clipboard.writeText(pgn).then(() => {
+      const btn = el('pgn-btn');
+      const orig = btn.textContent;
+      btn.textContent = 'Copied!';
+      setTimeout(() => btn.textContent = orig, 1500);
+    }).catch(() => downloadPGN(pgn));
+  } else {
+    downloadPGN(pgn);
+  }
+}
+function downloadPGN(pgn) {
+  const a = document.createElement('a');
+  a.href = 'data:text/plain;charset=utf-8,' + encodeURIComponent(pgn);
+  a.download = 'lcm-chess.pgn';
+  a.click();
+}
+// Delegated click/touch on board-wrap — survives board.destroy()/reinit
+function handleBoardTap(e) {
+  if (e.type === 'touchend') e.preventDefault();
+  // If the drag system just handled this same physical interaction, skip
+  if (suppressNextClick) { suppressNextClick = false; return; }
+  const sqEl = (e.changedTouches ? e.changedTouches[0].target : e.target).closest('[data-square]');
+  if (!sqEl) return;
+  const sq    = sqEl.getAttribute('data-square');
+  const piece = game.get(sq);
+  const pStr  = piece ? (piece.color === 'w' ? 'w' : 'b') + piece.type.toUpperCase() : null;
+  onSquareClick(sq, pStr);
+}
+el('board-wrap').addEventListener('click',    handleBoardTap);
+el('board-wrap').addEventListener('touchend', handleBoardTap, { passive: false });
+window.addEventListener('load', () => { initBoard('white'); newGame(); });
+</script>
+</body>
+</html>