npm - @bendyline/gilde - Versions diffs - 0.1.7 → 0.1.9 - Mend

@bendyline/gilde 0.1.7 → 0.1.9

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (116) hide show

package/data/project-types/go/go/versions/1.0.1/pages/board/index.html ADDED Viewed

@@ -0,0 +1,778 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="gezel-demo" content="standalone" />
+    <title>Go</title>
+    <style>
+      :root {
+        color-scheme: light dark;
+        --bg: #faf7f2;
+        --card: #fff;
+        --ink: #2b2620;
+        --muted: #7a7166;
+        --accent: #9a5928;
+        --track: #e8dfd2;
+        --wood-a: #d4a45f;
+        --wood-b: #b97d3f;
+        --wood-edge: #694322;
+        --line: rgba(49, 30, 18, 0.78);
+        --black-stone-a: #4a4540;
+        --black-stone-b: #171411;
+        --white-stone-a: #fffdf6;
+        --white-stone-b: #d8d0c3;
+        --last-move: #c55e32;
+        --legal: #52745a;
+      }
+      @media (prefers-color-scheme: dark) {
+        :root {
+          --bg: #1c1a17;
+          --card: #262320;
+          --ink: #efe9e0;
+          --muted: #a59a8c;
+          --accent: #e0894a;
+          --track: #3a352f;
+          --wood-a: #a7733c;
+          --wood-b: #744a29;
+          --wood-edge: #2b1a10;
+          --line: rgba(28, 18, 12, 0.88);
+          --last-move: #f19a5f;
+          --legal: #7da486;
+        }
+      }
+      * { box-sizing: border-box; }
+      body {
+        margin: 0;
+        padding: 1.25rem;
+        background: var(--bg);
+        color: var(--ink);
+        font: 15px/1.5 system-ui, -apple-system, 'Segoe UI', sans-serif;
+      }
+      main { max-width: 820px; margin: 0 auto; }
+      header {
+        display: flex;
+        align-items: baseline;
+        justify-content: space-between;
+        gap: 0.75rem;
+        flex-wrap: wrap;
+      }
+      h1 {
+        margin: 0;
+        font-family: Georgia, 'PT Serif', 'Times New Roman', serif;
+        font-size: 1.35rem;
+      }
+      button { font: inherit; }
+      .newgame,
+      .pass-button {
+        border: 1px solid var(--track);
+        border-radius: 6px;
+        padding: 0.32rem 0.7rem;
+        background: var(--card);
+        color: var(--ink);
+        cursor: pointer;
+      }
+      .newgame:hover,
+      .pass-button:hover { border-color: var(--accent); }
+      .pass-button:disabled { cursor: default; opacity: 0.55; }
+      .status { min-height: 1.5em; margin: 0.15rem 0 0.9rem; color: var(--muted); }
+      .status.thinking { color: var(--accent); }
+      .banner {
+        display: none;
+        margin-bottom: 0.75rem;
+        padding: 0.45rem 0.7rem;
+        border: 1px solid var(--accent);
+        border-radius: 6px;
+        font-size: 0.85rem;
+      }
+      .banner.show { display: block; }
+      .table { display: grid; grid-template-columns: minmax(0, 1fr) 220px; gap: 0.9rem; }
+      .boardwrap {
+        min-width: 0;
+        padding: clamp(0.8rem, 3vw, 1.35rem);
+        border: 1px solid var(--wood-edge);
+        border-radius: 14px;
+        background:
+          linear-gradient(95deg, rgba(255,255,255,0.08), transparent 35%, rgba(74,37,16,0.08)),
+          linear-gradient(145deg, var(--wood-a), var(--wood-b));
+        box-shadow:
+          inset 0 1px 0 rgba(255, 255, 255, 0.22),
+          inset 0 -5px 9px rgba(74, 37, 16, 0.24),
+          0 10px 24px rgba(31, 21, 15, 0.22);
+      }
+      .board {
+        display: grid;
+        grid-template-columns: repeat(var(--board-size), 1fr);
+        aspect-ratio: 1;
+        user-select: none;
+      }
+      .point {
+        position: relative;
+        display: grid;
+        min-width: 0;
+        min-height: 0;
+        place-items: center;
+        padding: 0;
+        border: 0;
+        background: transparent;
+        color: inherit;
+      }
+      .point::before,
+      .point::after {
+        position: absolute;
+        z-index: 0;
+        background: var(--line);
+        content: '';
+        pointer-events: none;
+      }
+      .point::before {
+        top: calc(50% - 0.5px);
+        right: var(--right-edge, 0);
+        left: var(--left-edge, 0);
+        height: 1px;
+      }
+      .point::after {
+        top: var(--top-edge, 0);
+        bottom: var(--bottom-edge, 0);
+        left: calc(50% - 0.5px);
+        width: 1px;
+      }
+      .point.star:not(.occupied) .star-dot {
+        position: relative;
+        z-index: 1;
+        width: clamp(3px, 14%, 7px);
+        aspect-ratio: 1;
+        border-radius: 50%;
+        background: var(--line);
+      }
+      .point.legal { cursor: pointer; }
+      .point.legal:not(.occupied):hover .star-dot {
+        position: relative;
+        z-index: 2;
+        width: 30%;
+        aspect-ratio: 1;
+        border-radius: 50%;
+        background: var(--legal);
+        box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.16);
+      }
+      .stone {
+        position: relative;
+        z-index: 2;
+        width: 88%;
+        aspect-ratio: 1;
+        border: 1px solid rgba(32, 22, 16, 0.45);
+        border-radius: 50%;
+        box-shadow:
+          inset 0 4px 5px rgba(255, 255, 255, 0.2),
+          inset 0 -5px 7px rgba(0, 0, 0, 0.28),
+          0 3px 5px rgba(45, 27, 15, 0.35);
+        transition: transform 140ms ease-out;
+      }
+      .stone.black { background: radial-gradient(circle at 34% 27%, var(--black-stone-a), var(--black-stone-b) 72%); }
+      .stone.white { background: radial-gradient(circle at 34% 27%, var(--white-stone-a), var(--white-stone-b) 72%); }
+      .point.last .stone::after {
+        position: absolute;
+        inset: 34%;
+        border-radius: 50%;
+        background: var(--last-move);
+        content: '';
+      }
+      .coord {
+        position: absolute;
+        z-index: 3;
+        color: rgba(44, 27, 16, 0.72);
+        font-size: clamp(0.38rem, 1vw, 0.62rem);
+        font-weight: 700;
+        line-height: 1;
+        pointer-events: none;
+      }
+      .coord.rank { top: 4%; left: 4%; }
+      .coord.file { right: 4%; bottom: 4%; }
+      .aside { display: flex; flex-direction: column; gap: 0.6rem; min-width: 0; }
+      .panel {
+        padding: 0.7rem 0.85rem;
+        border: 1px solid var(--track);
+        border-radius: 10px;
+        background: var(--card);
+        font-size: 0.85rem;
+      }
+      .panel h2 {
+        margin: 0 0 0.35rem;
+        color: var(--muted);
+        font-size: 0.72rem;
+        letter-spacing: 0.05em;
+        text-transform: uppercase;
+      }
+      .move-thought { font-style: italic; }
+      .move-thought .who {
+        display: block;
+        margin-bottom: 0.15rem;
+        color: var(--muted);
+        font-size: 0.78rem;
+        font-style: normal;
+      }
+      .game-actions { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
+      .capture-count { color: var(--muted); font-size: 0.78rem; }
+      .log { max-height: 210px; margin: 0; padding-left: 1.2rem; overflow-y: auto; }
+      .log li { margin: 0.12rem 0; color: var(--muted); }
+      .log li.latest { color: var(--ink); }
+      dialog {
+        width: min(430px, calc(100vw - 2rem));
+        padding: 0;
+        border: 1px solid var(--track);
+        border-radius: 10px;
+        background: var(--card);
+        color: var(--ink);
+        box-shadow: 0 18px 55px rgba(0, 0, 0, 0.35);
+      }
+      dialog::backdrop { background: rgba(20, 17, 14, 0.62); }
+      .dialog-content { padding: 1rem; }
+      .dialog-content h2 {
+        margin: 0;
+        font-family: Georgia, 'PT Serif', serif;
+        font-size: 1.1rem;
+      }
+      .dialog-intro { margin: 0.2rem 0 0.85rem; color: var(--muted); font-size: 0.85rem; }
+      fieldset { margin: 0 0 0.75rem; padding: 0; border: 0; }
+      legend {
+        margin-bottom: 0.35rem;
+        color: var(--muted);
+        font-size: 0.72rem;
+        font-weight: 700;
+        letter-spacing: 0.05em;
+        text-transform: uppercase;
+      }
+      .key-tray {
+        display: grid;
+        grid-template-columns: repeat(3, 1fr);
+        gap: 0.35rem;
+        padding: 0.35rem;
+        border: 1px solid var(--track);
+        border-radius: 10px;
+        background: var(--track);
+      }
+      .key-tray.two { grid-template-columns: repeat(2, 1fr); }
+      .rule-key {
+        padding: 0.45rem;
+        border: 1px solid transparent;
+        border-radius: 6px;
+        background: var(--card);
+        color: var(--ink);
+        cursor: pointer;
+        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.14);
+      }
+      .rule-key:hover { border-color: var(--accent); }
+      .rule-key[aria-checked='true'] {
+        border-color: var(--accent);
+        box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
+        transform: translateY(1px);
+      }
+      .rule-key strong { display: block; font-size: 0.88rem; }
+      .rule-key span { display: block; color: var(--muted); font-size: 0.72rem; }
+      .dialog-actions { display: flex; justify-content: flex-end; gap: 0.45rem; margin-top: 0.9rem; }
+      .dialog-button {
+        padding: 0.4rem 0.75rem;
+        border: 1px solid var(--accent);
+        border-radius: 6px;
+        background: var(--accent);
+        color: var(--bg);
+        cursor: pointer;
+      }
+      .dialog-button.secondary { border-color: var(--track); background: var(--card); color: var(--ink); }
+      @media (max-width: 660px) {
+        .table { grid-template-columns: 1fr; }
+        .aside { display: grid; grid-template-columns: 1fr 1fr; }
+      }
+      @media (prefers-reduced-motion: reduce) {
+        .stone { transition: none; }
+      }
++      .demo-banner {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        gap: 0.75rem;
+        margin: 0 0 0.85rem;
+        padding: 0.5rem 0.65rem;
+        border: 1px solid var(--accent, #8a5a2b);
+        border-radius: 6px;
+        background: color-mix(in srgb, var(--card, var(--surface, #fffdf8)) 88%, var(--accent, #8a5a2b));
+        color: var(--ink, #2b2620);
+        font-size: 0.8rem;
+      }
+      .demo-banner[hidden] { display: none; }
+      .demo-banner strong { font-weight: 700; }
+      .demo-reset {
+        flex: none;
+        padding: 0.25rem 0.5rem;
+        border: 1px solid var(--accent, #8a5a2b);
+        border-radius: 6px;
+        background: var(--card, var(--surface, #fffdf8));
+        color: var(--ink, #2b2620);
+        cursor: pointer;
+        font: inherit;
+      }
+      .demo-reset:hover { border-color: var(--ink, #2b2620); }
+    </style>
+  </head>
+  <body>
+    <main>
++      <div class="demo-banner" data-gezel-demo-banner hidden>
+        <span><strong>Demo mode</strong> — sample data stays in this page.</span>
+        <button type="button" class="demo-reset" onclick="location.reload()">Reset demo</button>
+      </div>
+      <div class="banner" id="banner"></div>
+      <header>
+        <h1>Go</h1>
+        <button type="button" class="newgame" id="newgame">New game</button>
+      </header>
+      <p class="status" id="status">Setting up the board…</p>
+      <div class="table">
+        <div class="boardwrap"><div class="board" id="board" aria-label="Go board"></div></div>
+        <div class="aside">
+          <div class="panel move-thought" id="move-thought-panel" hidden>
+            <span class="who">Go-speler says</span>
+            <span id="move-thought"></span>
+          </div>
+          <div class="panel game-actions">
+            <button type="button" class="pass-button" id="pass">Pass</button>
+            <span class="capture-count" id="captures">Captures — 0 / 0</span>
+          </div>
+          <div class="panel">
+            <h2>Moves</h2>
+            <ol class="log" id="log"><li>No moves yet — black opens.</li></ol>
+          </div>
+        </div>
+      </div>
+      <dialog id="new-game-dialog" aria-labelledby="new-game-title">
+        <div class="dialog-content">
+          <h2 id="new-game-title">New game</h2>
+          <p class="dialog-intro">Choose a board and scoring balance.</p>
+          <fieldset>
+            <legend>Board size</legend>
+            <div class="key-tray" role="radiogroup" aria-label="Board size">
+              <button type="button" class="rule-key size-key" role="radio" aria-checked="true" data-size="9">
+                <strong>9 × 9</strong><span>Quick</span>
+              </button>
+              <button type="button" class="rule-key size-key" role="radio" aria-checked="false" data-size="13">
+                <strong>13 × 13</strong><span>Medium</span>
+              </button>
+              <button type="button" class="rule-key size-key" role="radio" aria-checked="false" data-size="19">
+                <strong>19 × 19</strong><span>Full</span>
+              </button>
+            </div>
+          </fieldset>
+          <fieldset>
+            <legend>Komi</legend>
+            <div class="key-tray two" role="radiogroup" aria-label="Komi">
+              <button type="button" class="rule-key komi-key" role="radio" aria-checked="true" data-komi="6.5">
+                <strong>6.5 points</strong><span>Standard balance</span>
+              </button>
+              <button type="button" class="rule-key komi-key" role="radio" aria-checked="false" data-komi="0">
+                <strong>No komi</strong><span>Even score</span>
+              </button>
+            </div>
+          </fieldset>
+          <div class="dialog-actions">
+            <button type="button" class="dialog-button secondary" id="cancel-new-game">Cancel</button>
+            <button type="button" class="dialog-button" id="start-new-game">Start game</button>
+          </div>
+        </div>
+      </dialog>
+    </main>
+    <script>
+      (function () {
+        'use strict';
+        var gezelPage = (function () {
+          var seq = 0;
+          var pending = {};
+          window.addEventListener('message', function (event) {
+            var data = event.data;
+            if (!data || data.__gezelPageResult !== true || typeof data.id !== 'string') return;
+            var entry = pending[data.id];
+            if (!entry) return;
+            delete pending[data.id];
+            clearTimeout(entry.timer);
+            if (data.ok) entry.resolve(data);
+            else entry.reject(new Error(data.error || 'invoke failed'));
+          });
+          return {
+            embedded: function () { return demoMode || Boolean(capability && projectId); },
+            invoke: function (tool, input) {
+              return new Promise(function (resolve, reject) {
+                if (demoMode) {
+                  try { resolve(demoInvoke(tool, input)); } catch (error) { reject(error); }
+                  return;
+                }
+                if (window.parent === window) return reject(new Error('not embedded in Gezel'));
+                seq += 1;
+                var id = 'pi-' + Date.now() + '-' + seq;
+                pending[id] = {
+                  resolve: resolve,
+                  reject: reject,
+                  timer: setTimeout(function () {
+                    delete pending[id];
+                    reject(new Error('invoke timed out'));
+                  }, 45000),
+                };
+                window.parent.postMessage(
+                  { __gezelPageInvoke: true, id: id, tool: tool, input: input || {} },
+                  '*',
+                );
+              });
+            },
+            refresh: function () {
+              if (!demoMode && window.parent !== window) window.parent.postMessage({ __gezelPageRefresh: true }, '*');
+            },
+          };
+        })();
+        var parts = location.pathname.split('/').filter(Boolean);
+        var typeIndex = parts.indexOf('type');
+        var capability = typeIndex > 0 ? parts[typeIndex - 1] : null;
+        var projectId = typeIndex >= 0 ? parts[typeIndex + 1] : null;
+        var GO_FILES = 'ABCDEFGHJKLMNOPQRST';
+        var demoMode = !capability || !projectId;
+        var state = null;
+        var busy = false;
+        var pollTimer = null;
+        var failedPolls = 0;
+        var newBoardSize = 9;
+        var newKomi = 6.5;
+        var demoGame = null;
+        if (demoMode) {
+          document.querySelector('[data-gezel-demo-banner]').hidden = false;
+          demoGame = demoNewGame(9, 6.5);
+        }
+        function pointName(x, y, size) { return GO_FILES[x] + String(size - y); }
+        function demoCoords(name, size) { return { x: GO_FILES.indexOf(name[0]), y: size - Number(name.slice(1)) }; }
+        function demoNeighbors(x, y, size) {
+          return [[x - 1, y], [x + 1, y], [x, y - 1], [x, y + 1]].filter(function (p) {
+            return p[0] >= 0 && p[0] < size && p[1] >= 0 && p[1] < size;
+          });
+        }
+        function demoGroup(board, x, y, size) {
+          var color = board[y * size + x];
+          var seen = {}; var stones = []; var liberties = {};
+          var queue = [[x, y]];
+          while (queue.length) {
+            var p = queue.pop(); var key = p[0] + ',' + p[1];
+            if (seen[key]) continue;
+            seen[key] = true; stones.push(p);
+            demoNeighbors(p[0], p[1], size).forEach(function (n) {
+              var ch = board[n[1] * size + n[0]];
+              if (ch === '.') liberties[n[0] + ',' + n[1]] = true;
+              else if (ch === color && !seen[n[0] + ',' + n[1]]) queue.push(n);
+            });
+          }
+          return { stones: stones, liberties: Object.keys(liberties).length };
+        }
+        function demoTryMove(game, move) {
+          if (move === 'pass') return { squares: game.squares, captures: [] };
+          var size = game.boardSize; var at = demoCoords(move, size);
+          if (at.x < 0 || at.y < 0 || at.x >= size || at.y >= size) return null;
+          var board = game.squares.split('');
+          var index = at.y * size + at.x;
+          if (board[index] !== '.') return null;
+          var color = game.turn === 'user' ? 'X' : 'O';
+          var other = color === 'X' ? 'O' : 'X';
+          board[index] = color;
+          var captures = [];
+          demoNeighbors(at.x, at.y, size).forEach(function (n) {
+            if (board[n[1] * size + n[0]] !== other) return;
+            var group = demoGroup(board, n[0], n[1], size);
+            if (group.liberties === 0) group.stones.forEach(function (p) {
+              board[p[1] * size + p[0]] = '.';
+              captures.push(pointName(p[0], p[1], size));
+            });
+          });
+          if (demoGroup(board, at.x, at.y, size).liberties === 0) return null;
+          var squares = board.join('');
+          if (game.previousPosition && squares === game.previousPosition) return null;
+          return { squares: squares, captures: captures };
+        }
+        function demoLegalMoves(game) {
+          var out = [];
+          for (var y = 0; y < game.boardSize; y += 1) for (var x = 0; x < game.boardSize; x += 1) {
+            if (game.squares[y * game.boardSize + x] !== '.') continue;
+            var name = pointName(x, y, game.boardSize);
+            if (demoTryMove(game, name)) out.push(name);
+          }
+          return out;
+        }
+        function demoScore(game) {
+          var black = game.captures.user; var white = game.captures.ai + game.komi;
+          for (var i = 0; i < game.squares.length; i += 1) {
+            if (game.squares[i] === 'X') black += 1;
+            if (game.squares[i] === 'O') white += 1;
+          }
+          if (black === white) return { winner: 'draw', margin: 0 };
+          return { winner: black > white ? 'user' : 'ai', margin: Math.abs(black - white) };
+        }
+        function demoNewGame(boardSize, komi) {
+          var game = {
+            version: 1, boardSize: boardSize, squares: '.'.repeat(boardSize * boardSize),
+            turn: 'user', status: 'playing', komi: komi, consecutivePasses: 0,
+            previousPosition: null, legalMoves: [], captures: { user: 0, ai: 0 },
+            lastMove: null, lastMoveThought: '', moveLog: [], score: null,
+          };
+          demoGame = game;
+          game.legalMoves = demoLegalMoves(game);
+          return game;
+        }
+        function demoInvoke(tool, input) {
+          if (tool === 'new_game') { demoGame = demoNewGame(Number(input.boardSize), Number(input.komi)); return { ok: true }; }
+          if (tool !== 'user_move') throw new Error('Unknown demo action: ' + tool);
+          var move = input.move;
+          if (move !== 'pass' && !demoGame.legalMoves.includes(move)) throw new Error('That point is not legal in the hot-seat demo.');
+          var result = demoTryMove(demoGame, move);
+          if (!result) throw new Error('That point is not legal in the hot-seat demo.');
+          var by = demoGame.turn;
+          var before = demoGame.squares;
+          demoGame.squares = result.squares;
+          demoGame.previousPosition = before;
+          demoGame.captures[by] += result.captures.length;
+          demoGame.consecutivePasses = move === 'pass' ? demoGame.consecutivePasses + 1 : 0;
+          demoGame.lastMove = { by: by, move: move };
+          demoGame.moveLog.push({ by: by, move: move, captures: result.captures });
+          demoGame.turn = by === 'user' ? 'ai' : 'user';
+          if (demoGame.consecutivePasses >= 2) {
+            demoGame.status = 'finished';
+            demoGame.score = demoScore(demoGame);
+            demoGame.legalMoves = [];
+          } else {
+            demoGame.legalMoves = demoLegalMoves(demoGame);
+          }
+          return { ok: true };
+        }
+        function isStar(x, y, size) {
+          var points =
+            size === 9 ? [2, 4, 6] :
+            size === 13 ? [3, 6, 9] :
+            [3, 9, 15];
+          if (size === 9) return (x === 4 && y === 4) || (x !== 4 && y !== 4 && points.includes(x) && points.includes(y));
+          return points.includes(x) && points.includes(y);
+        }
+        function setBanner(text) {
+          var banner = document.getElementById('banner');
+          banner.textContent = text || '';
+          banner.className = text ? 'banner show' : 'banner';
+        }
+        function scoreText() {
+          if (!state || !state.score) return '';
+          if (state.score.winner === 'draw') return 'The final score is even.';
+          var color = state.score.winner === 'user' ? 'Black' : 'White';
+          return color + ' wins by ' + state.score.margin + ' points.';
+        }
+        function statusLine() {
+          if (!state) return 'Setting up the board…';
+          if (state.status !== 'playing') return scoreText() + ' Ready for another game?';
+          if (demoMode) return 'Hot seat — ' + (state.turn === 'user' ? 'black' : 'white') + ' to move, or pass.';
+          if (busy) return 'Sending your move…';
+          if (state.turn === 'ai') return 'Go-speler is thinking…';
+          return 'Your move — place black, or pass.';
+        }
+        function render() {
+          var status = document.getElementById('status');
+          status.textContent = statusLine();
+          status.className =
+            state && !demoMode && state.turn === 'ai' && state.status === 'playing'
+              ? 'status thinking'
+              : 'status';
+          var thoughtPanel = document.getElementById('move-thought-panel');
+          if (state && state.lastMoveThought) {
+            thoughtPanel.hidden = false;
+            document.getElementById('move-thought').textContent = state.lastMoveThought;
+          } else {
+            thoughtPanel.hidden = true;
+          }
+          document.getElementById('captures').textContent = state
+            ? 'Captures — black ' + state.captures.user + ' / white ' + state.captures.ai
+            : 'Captures — 0 / 0';
+          document.getElementById('pass').disabled =
+            !state || (!demoMode && state.turn !== 'user') || state.status !== 'playing' || busy;
+          var log = document.getElementById('log');
+          if (state && state.moveLog.length) {
+            log.innerHTML = '';
+            state.moveLog.forEach(function (entry, index) {
+              var item = document.createElement('li');
+              var captures = entry.captures && entry.captures.length
+                ? ' (captures ' + entry.captures.length + ')'
+                : '';
+              item.textContent = (entry.by === 'user' ? 'Black ' : 'White ') + entry.move + captures;
+              if (index === state.moveLog.length - 1) item.className = 'latest';
+              log.appendChild(item);
+            });
+            log.scrollTop = log.scrollHeight;
+          } else {
+            log.innerHTML = '<li>No moves yet — black opens.</li>';
+          }
+          var board = document.getElementById('board');
+          board.innerHTML = '';
+          var size = state ? state.boardSize : 9;
+          board.style.setProperty('--board-size', size);
+          var legal = {};
+          if (state) state.legalMoves.forEach(function (move) { legal[move] = true; });
+          var myTurn = state && (demoMode || state.turn === 'user') && state.status === 'playing' && !busy;
+          for (var y = 0; y < size; y += 1) {
+            for (var x = 0; x < size; x += 1) {
+              var name = pointName(x, y, size);
+              var stone = state ? state.squares[y * size + x] : '.';
+              var point = document.createElement('button');
+              point.type = 'button';
+              point.className = 'point';
+              point.dataset.point = name;
+              point.setAttribute('aria-label', name + (stone === '.' ? ', empty' : stone === 'X' ? ', black' : ', white'));
+              if (x === 0) point.style.setProperty('--left-edge', '50%');
+              if (x === size - 1) point.style.setProperty('--right-edge', '50%');
+              if (y === 0) point.style.setProperty('--top-edge', '50%');
+              if (y === size - 1) point.style.setProperty('--bottom-edge', '50%');
+              if (isStar(x, y, size)) point.className += ' star';
+              if (stone !== '.') point.className += ' occupied';
+              if (myTurn && legal[name]) point.className += ' legal';
+              if (state && state.lastMove && state.lastMove.move === name) point.className += ' last';
+              if (x === 0) {
+                var rank = document.createElement('span');
+                rank.className = 'coord rank';
+                rank.textContent = String(size - y);
+                point.appendChild(rank);
+              }
+              if (y === size - 1) {
+                var file = document.createElement('span');
+                file.className = 'coord file';
+                file.textContent = GO_FILES[x];
+                point.appendChild(file);
+              }
+              if (stone === '.') {
+                var dot = document.createElement('span');
+                dot.className = 'star-dot';
+                point.appendChild(dot);
+              } else {
+                var piece = document.createElement('span');
+                piece.className = 'stone ' + (stone === 'X' ? 'black' : 'white');
+                point.appendChild(piece);
+              }
+              point.addEventListener('click', onPointClick);
+              board.appendChild(point);
+            }
+          }
+        }
+        function onPointClick(event) {
+          if (!state || (!demoMode && state.turn !== 'user') || state.status !== 'playing' || busy) return;
+          var move = event.currentTarget.dataset.point;
+          if (!state.legalMoves.includes(move)) return;
+          submitMove(move);
+        }
+        function submitMove(move) {
+          busy = true;
+          render();
+          gezelPage
+            .invoke('user_move', { move: move })
+            .then(function (result) {
+              busy = false;
+              if (
+                result.reaction &&
+                result.reaction.delivered === false &&
+                result.reaction.reason === 'engagement-off'
+              ) {
+                setBanner('Move played — but AI engagement is off, so the Go-speler cannot reply.');
+              }
+              return poll();
+            })
+            .catch(function (error) {
+              busy = false;
+              setBanner(String(error && error.message ? error.message : error));
+              render();
+            });
+        }
+        function syncDialog() {
+          document.querySelectorAll('.size-key').forEach(function (button) {
+            button.setAttribute('aria-checked', String(Number(button.dataset.size) === newBoardSize));
+          });
+          document.querySelectorAll('.komi-key').forEach(function (button) {
+            button.setAttribute('aria-checked', String(Number(button.dataset.komi) === newKomi));
+          });
+        }
+        function openNewGame() {
+          if (!gezelPage.embedded() || busy) return;
+          newBoardSize = state ? state.boardSize : 9;
+          newKomi = state ? state.komi : 6.5;
+          syncDialog();
+          document.getElementById('new-game-dialog').showModal();
+        }
+        function newGame() {
+          busy = true;
+          render();
+          gezelPage
+            .invoke('new_game', { boardSize: newBoardSize, komi: newKomi })
+            .then(function () {
+              busy = false;
+              setBanner('');
+              return poll();
+            })
+            .catch(function (error) {
+              busy = false;
+              setBanner(String(error && error.message ? error.message : error));
+              render();
+            });
+        }
+        function poll() {
+          if (demoMode) { state = demoGame; render(); return Promise.resolve(); }
+          if (!capability || !projectId) return Promise.resolve();
+          return fetch(
+            '/preview/' + encodeURIComponent(capability) + '/workspace/' + encodeURIComponent(projectId) + '/game.json',
+            { cache: 'no-store' },
+          )
+            .then(function (response) {
+              if (!response.ok) throw new Error('poll ' + response.status);
+              return response.json();
+            })
+            .then(function (next) {
+              failedPolls = 0;
+              state = next;
+              render();
+            })
+            .catch(function () {
+              failedPolls += 1;
+              if (failedPolls === 3) gezelPage.refresh();
+            });
+        }
+        function schedule() {
+          if (pollTimer) clearTimeout(pollTimer);
+          if (demoMode) return;
+          var wait = state && state.turn === 'ai' && state.status === 'playing' ? 1500 : 5000;
+          pollTimer = setTimeout(function () { poll().then(schedule, schedule); }, wait);
+        }
+        document.getElementById('pass').addEventListener('click', function () { submitMove('pass'); });
+        document.getElementById('newgame').addEventListener('click', openNewGame);
+        document.getElementById('cancel-new-game').addEventListener('click', function () {
+          document.getElementById('new-game-dialog').close();
+        });
+        document.getElementById('start-new-game').addEventListener('click', function () {
+          document.getElementById('new-game-dialog').close();
+          newGame();
+        });
+        document.querySelectorAll('.size-key').forEach(function (button) {
+          button.addEventListener('click', function () {
+            newBoardSize = Number(button.dataset.size);
+            syncDialog();
+          });
+        });
+        document.querySelectorAll('.komi-key').forEach(function (button) {
+          button.addEventListener('click', function () {
+            newKomi = Number(button.dataset.komi);
+            syncDialog();
+          });
+        });
+        poll().then(schedule, schedule);
+      })();
+    </script>
+  </body>
+</html>