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

@bendyline/gilde 0.1.7 → 0.1.8

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 (106) hide show

package/data/project-types/ch/chess/versions/1.0.3/pages/board/index.html ADDED Viewed

@@ -0,0 +1,769 @@
+<!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>Chess</title>
+    <style>
+      :root {
+        color-scheme: light dark;
+        --bg: #faf7f2;
+        --card: #fff;
+        --ink: #2b2620;
+        --muted: #7a7166;
+        --accent: #9a5928;
+        --track: #e8dfd2;
+        --sq-light: #efe4d1;
+        --sq-dark: #9a7455;
+        --sq-hint: #557a5b;
+        --frame-a: #8d694d;
+        --frame-b: #4d3424;
+        --frame-edge: #342116;
+        --white-piece-face: #fff8e8;
+        --white-piece-side: #a8987e;
+        --white-piece-edge: #594b3c;
+        --white-piece-highlight: rgba(255, 255, 255, 0.9);
+        --black-piece-face: #302a24;
+        --black-piece-side: #100d0a;
+        --black-piece-edge: #090705;
+        --black-piece-highlight: rgba(255, 255, 255, 0.2);
+        --last-move: rgba(241, 184, 84, 0.42);
+      }
+      @media (prefers-color-scheme: dark) {
+        :root {
+          --bg: #1c1a17;
+          --card: #262320;
+          --ink: #efe9e0;
+          --muted: #a59a8c;
+          --accent: #e0894a;
+          --track: #3a352f;
+          --sq-light: #b8a58b;
+          --sq-dark: #674a35;
+          --sq-hint: #6f9b70;
+          --frame-a: #74543d;
+          --frame-b: #34241a;
+          --frame-edge: #1b120d;
+          --white-piece-face: #fff5dc;
+          --white-piece-side: #9d8b70;
+          --white-piece-edge: #4b3d30;
+          --white-piece-highlight: rgba(255, 255, 255, 0.88);
+          --black-piece-face: #29221c;
+          --black-piece-side: #0b0907;
+          --black-piece-edge: #050403;
+          --black-piece-highlight: rgba(255, 255, 255, 0.18);
+          --last-move: rgba(236, 159, 85, 0.38);
+        }
+      }
+      * { 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: 760px; 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,
+      .passive-button {
+        border: 1px solid var(--track);
+        border-radius: 6px;
+        padding: 0.32rem 0.7rem;
+        background: var(--card);
+        color: var(--ink);
+        cursor: pointer;
+      }
+      .newgame:hover,
+      .passive-button:hover { border-color: var(--accent); }
+      .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 {
+        padding: 0.85rem;
+        border: 1px solid var(--frame-edge);
+        border-radius: 14px;
+        background: linear-gradient(145deg, var(--frame-a), var(--frame-b));
+        box-shadow:
+          inset 0 1px 0 rgba(255, 255, 255, 0.2),
+          inset 0 -4px 8px rgba(0, 0, 0, 0.25),
+          0 10px 24px rgba(31, 21, 15, 0.22);
+      }
+      .board {
+        display: grid;
+        grid-template-columns: repeat(8, minmax(0, 1fr));
+        width: 100%;
+        aspect-ratio: 1;
+        overflow: hidden;
+        border: 1px solid var(--frame-edge);
+        border-radius: 8px;
+        box-shadow: 0 5px 12px rgba(0, 0, 0, 0.3);
+        user-select: none;
+      }
+      .cell {
+        position: relative;
+        display: grid;
+        min-width: 0;
+        min-height: 0;
+        aspect-ratio: 1;
+        place-items: center;
+        padding: 0;
+        border: 0;
+        color: inherit;
+      }
+      .cell.light { background: var(--sq-light); }
+      .cell.dark { background: var(--sq-dark); }
+      .cell.selectable { cursor: pointer; }
+      .cell.selected {
+        outline: 3px solid var(--accent);
+        outline-offset: -3px;
+        z-index: 2;
+      }
+      .cell.hint { cursor: pointer; }
+      .cell.hint::after {
+        position: absolute;
+        z-index: 2;
+        width: 24%;
+        height: 24%;
+        border-radius: 50%;
+        background: var(--sq-hint);
+        box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.18);
+        content: '';
+      }
+      .cell.hint.capture::after {
+        width: 72%;
+        height: 72%;
+        border: 5px solid var(--sq-hint);
+        background: transparent;
+        box-shadow: none;
+      }
+      .cell.last-from { box-shadow: inset 0 0 0 3px var(--last-move); }
+      .cell.last-to { box-shadow: inset 0 0 0 999px var(--last-move); }
+      .piece {
+        position: relative;
+        z-index: 1;
+        display: grid;
+        width: 100%;
+        height: 100%;
+        place-items: center;
+        font-family: Georgia, 'Times New Roman', serif;
+        font-size: clamp(1.5rem, 7vw, 3.25rem);
+        line-height: 1;
+        isolation: isolate;
+        transform: translate(-2px, -3px);
+        transition: transform 140ms ease-out;
+      }
+      .piece.white {
+        --piece-face: var(--white-piece-face);
+        --piece-side: var(--white-piece-side);
+        --piece-edge: var(--white-piece-edge);
+        --piece-highlight: var(--white-piece-highlight);
+      }
+      .piece.black {
+        --piece-face: var(--black-piece-face);
+        --piece-side: var(--black-piece-side);
+        --piece-edge: var(--black-piece-edge);
+        --piece-highlight: var(--black-piece-highlight);
+      }
+      .piece::before,
+      .piece::after {
+        position: absolute;
+        inset: 0;
+        display: grid;
+        place-items: center;
+        content: attr(data-glyph);
+      }
+      .piece::before {
+        z-index: -1;
+        color: var(--piece-side);
+        -webkit-text-stroke: 1px var(--piece-edge);
+        text-shadow:
+          1px 1px 0 var(--piece-edge),
+          2px 2px 0 var(--piece-edge),
+          3px 3px 0 var(--piece-edge),
+          4px 5px 4px rgba(0, 0, 0, 0.34);
+        transform: translate(3px, 4px);
+      }
+      .piece::after {
+        color: var(--piece-face);
+        -webkit-text-stroke: 1px var(--piece-edge);
+        text-shadow:
+          -1px -1px 0 var(--piece-highlight),
+          1px 1px 0 color-mix(in srgb, var(--piece-side) 68%, transparent);
+      }
+      .cell.selectable:hover .piece,
+      .cell.selected .piece { transform: translate(-3px, -5px) scale(1.04); }
+      .coord {
+        position: absolute;
+        z-index: 3;
+        color: rgba(43, 38, 32, 0.55);
+        font-size: clamp(0.45rem, 1.3vw, 0.65rem);
+        font-weight: 700;
+        line-height: 1;
+        pointer-events: none;
+      }
+      .coord.rank { top: 5%; left: 6%; }
+      .coord.file { right: 6%; bottom: 5%; }
+      .dark .coord { color: rgba(255, 250, 242, 0.58); }
+      .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;
+      }
+      .log { max-height: 230px; 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(410px, 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 0 0.2rem;
+        font-family: Georgia, 'PT Serif', serif;
+        font-size: 1.1rem;
+      }
+      .dialog-content p { margin: 0 0 0.85rem; color: var(--muted); font-size: 0.85rem; }
+      .piece-tray {
+        display: grid;
+        grid-template-columns: repeat(4, 1fr);
+        gap: 0.35rem;
+        padding: 0.35rem;
+        border: 1px solid var(--track);
+        border-radius: 10px;
+        background: var(--track);
+      }
+      .promotion-key {
+        min-height: 3.2rem;
+        border: 1px solid transparent;
+        border-radius: 6px;
+        background: var(--card);
+        color: var(--ink);
+        cursor: pointer;
+        font-family: Georgia, 'Times New Roman', serif;
+        font-size: 1.8rem;
+        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.14);
+      }
+      .promotion-key:hover { border-color: var(--accent); }
+      .dialog-actions { display: flex; justify-content: flex-end; margin-top: 0.8rem; }
+      @media (max-width: 640px) {
+        .table { grid-template-columns: 1fr; }
+        .aside { display: grid; grid-template-columns: 1fr 1fr; }
+      }
+      @media (prefers-reduced-motion: reduce) {
+        .piece { 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>Chess</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="Chess board"></div></div>
+        <div class="aside">
+          <div class="panel move-thought" id="move-thought-panel" hidden>
+            <span class="who">Schaakspeler says</span>
+            <span id="move-thought"></span>
+          </div>
+          <div class="panel">
+            <h2>Moves</h2>
+            <ol class="log" id="log"><li>No moves yet — white opens.</li></ol>
+          </div>
+        </div>
+      </div>
+      <dialog id="promotion-dialog" aria-labelledby="promotion-title">
+        <div class="dialog-content">
+          <h2 id="promotion-title">Promote your pawn</h2>
+          <p>Choose the piece that arrives on the back rank.</p>
+          <div class="piece-tray" id="promotion-choices"></div>
+          <div class="dialog-actions">
+            <button type="button" class="passive-button" id="cancel-promotion">Cancel</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 demoMode = !capability || !projectId;
+        var FILES = 'abcdefgh';
+        var PIECES = {
+          K: '♚', Q: '♛', R: '♜', B: '♝', N: '♞', P: '♟',
+          k: '♚', q: '♛', r: '♜', b: '♝', n: '♞', p: '♟',
+        };
+        var PROMOTION_PIECES = { q: '♛', r: '♜', b: '♝', n: '♞' };
+        var state = null;
+        var selected = null;
+        var busy = false;
+        var pollTimer = null;
+        var failedPolls = 0;
+        var promotionMoves = [];
+        var demoGame = null;
+        if (demoMode) {
+          document.querySelector('[data-gezel-demo-banner]').hidden = false;
+          demoGame = demoNewGame();
+        }
+        function squareName(x, y) { return FILES[x] + String(8 - y); }
+        function sideOf(piece) {
+          if (!piece || piece === '.') return null;
+          return piece === piece.toUpperCase() ? 'user' : 'ai';
+        }
+        function demoCoords(name) { return { x: FILES.indexOf(name[0]), y: 8 - Number(name[1]) }; }
+        function demoAt(squares, x, y) { return x < 0 || x > 7 || y < 0 || y > 7 ? null : squares[y * 8 + x]; }
+        function demoSet(squares, x, y, piece) {
+          var i = y * 8 + x;
+          return squares.slice(0, i) + piece + squares.slice(i + 1);
+        }
+        function demoMoves(game) {
+          var out = [];
+          var squares = game.squares;
+          var side = game.turn;
+          function add(fromX, fromY, toX, toY, extra) {
+            var target = demoAt(squares, toX, toY);
+            if (target === null || sideOf(target) === side) return;
+            var base = { from: squareName(fromX, fromY), to: squareName(toX, toY), capture: target !== '.' };
+            out.push(Object.assign(base, extra || {}));
+          }
+          function ray(x, y, dx, dy) {
+            var tx = x + dx; var ty = y + dy;
+            while (demoAt(squares, tx, ty) !== null) {
+              var target = demoAt(squares, tx, ty);
+              if (sideOf(target) === side) break;
+              add(x, y, tx, ty);
+              if (target !== '.') break;
+              tx += dx; ty += dy;
+            }
+          }
+          for (var y = 0; y < 8; y += 1) {
+            for (var x = 0; x < 8; x += 1) {
+              var piece = demoAt(squares, x, y);
+              if (sideOf(piece) !== side) continue;
+              var kind = piece.toLowerCase();
+              if (kind === 'p') {
+                var dir = side === 'user' ? -1 : 1;
+                var start = side === 'user' ? 6 : 1;
+                var last = side === 'user' ? 0 : 7;
+                if (demoAt(squares, x, y + dir) === '.') {
+                  if (y + dir === last) {
+                    ['q', 'r', 'b', 'n'].forEach(function (promotion) { add(x, y, x, y + dir, { promotion: promotion }); });
+                  } else {
+                    add(x, y, x, y + dir);
+                    if (y === start && demoAt(squares, x, y + dir * 2) === '.') add(x, y, x, y + dir * 2);
+                  }
+                }
+                [-1, 1].forEach(function (dx) {
+                  var target = demoAt(squares, x + dx, y + dir);
+                  if (target && target !== '.' && sideOf(target) !== side) {
+                    if (y + dir === last) ['q', 'r', 'b', 'n'].forEach(function (promotion) { add(x, y, x + dx, y + dir, { promotion: promotion }); });
+                    else add(x, y, x + dx, y + dir);
+                  }
+                });
+              } else if (kind === 'n') {
+                [[-2,-1],[-2,1],[-1,-2],[-1,2],[1,-2],[1,2],[2,-1],[2,1]].forEach(function (d) { add(x, y, x + d[0], y + d[1]); });
+              } else if (kind === 'k') {
+                for (var ky = -1; ky <= 1; ky += 1) for (var kx = -1; kx <= 1; kx += 1) if (kx || ky) add(x, y, x + kx, y + ky);
+              } else {
+                if (kind === 'b' || kind === 'q') [[-1,-1],[-1,1],[1,-1],[1,1]].forEach(function (d) { ray(x, y, d[0], d[1]); });
+                if (kind === 'r' || kind === 'q') [[-1,0],[1,0],[0,-1],[0,1]].forEach(function (d) { ray(x, y, d[0], d[1]); });
+              }
+            }
+          }
+          return out;
+        }
+        function demoNewGame() {
+          var game = {
+            version: 1,
+            squares: 'rnbqkbnrpppppppp................................PPPPPPPPRNBQKBNR',
+            turn: 'user', status: 'playing', legalMoves: [], lastMove: null,
+            lastMoveThought: '', moveLog: [], fullmoveNumber: 1,
+          };
+          demoGame = game;
+          game.legalMoves = demoMoves(game);
+          return game;
+        }
+        function demoInvoke(tool, input) {
+          if (tool === 'new_game') { demoGame = demoNewGame(); return { ok: true }; }
+          if (tool !== 'user_move') throw new Error('Unknown demo action: ' + tool);
+          var move = demoGame.legalMoves.find(function (m) {
+            return m.from === input.from && m.to === input.to && (!m.promotion || m.promotion === (input.promotion || 'q'));
+          });
+          if (!move) throw new Error('That move is not available in the hot-seat demo.');
+          var from = demoCoords(move.from); var to = demoCoords(move.to);
+          var piece = demoAt(demoGame.squares, from.x, from.y);
+          var captured = demoAt(demoGame.squares, to.x, to.y);
+          demoGame.squares = demoSet(demoSet(demoGame.squares, from.x, from.y, '.'), to.x, to.y,
+            move.promotion ? (demoGame.turn === 'user' ? move.promotion.toUpperCase() : move.promotion) : piece);
+          demoGame.lastMove = { from: move.from, to: move.to };
+          demoGame.moveLog.push({ by: demoGame.turn, notation: move.from + '–' + move.to + (move.promotion ? '=' + move.promotion.toUpperCase() : '') });
+          if (captured && captured.toLowerCase() === 'k') {
+            demoGame.status = demoGame.turn === 'user' ? 'user_won' : 'ai_won';
+            demoGame.legalMoves = [];
+          } else {
+            demoGame.turn = demoGame.turn === 'user' ? 'ai' : 'user';
+            if (demoGame.turn === 'user') demoGame.fullmoveNumber += 1;
+            demoGame.legalMoves = demoMoves(demoGame);
+            if (demoGame.legalMoves.length === 0) demoGame.status = 'draw';
+          }
+          return { ok: true };
+        }
+        function setBanner(text) {
+          var banner = document.getElementById('banner');
+          banner.textContent = text || '';
+          banner.className = text ? 'banner show' : 'banner';
+        }
+        function statusLine() {
+          if (!state) return 'Setting up the board…';
+          if (demoMode && state.status === 'playing') return 'Hot seat — ' + (state.turn === 'user' ? 'white' : 'black') + ' to move.';
+          if (demoMode && state.status === 'user_won') return 'White wins the hot-seat demo.';
+          if (demoMode && state.status === 'ai_won') return 'Black wins the hot-seat demo.';
+          if (demoMode && state.status === 'draw') return 'Hot-seat draw — reset for another game.';
+          if (state.status === 'user_won') return 'Checkmate — you won. The Schaakspeler is ready for a rematch.';
+          if (state.status === 'ai_won') return 'Checkmate — the Schaakspeler takes this one.';
+          if (state.status === 'draw') return 'Draw — a balanced board, and a rematch whenever you like.';
+          if (busy) return 'Sending your move…';
+          if (state.turn === 'ai') return 'Schaakspeler is thinking…';
+          return selected ? 'Choose a highlighted destination.' : 'Your move — you have white.';
+        }
+        function movesFrom(name) {
+          if (!state) return [];
+          return state.legalMoves.filter(function (move) { return move.from === name; });
+        }
+        function movesTo(name) {
+          return selected
+            ? movesFrom(selected).filter(function (move) { return move.to === name; })
+            : [];
+        }
+        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;
+          }
+          var log = document.getElementById('log');
+          if (state && state.moveLog.length) {
+            log.innerHTML = '';
+            state.moveLog.forEach(function (entry, index) {
+              var item = document.createElement('li');
+              item.textContent = (entry.by === 'user' ? 'White ' : 'Black ') + entry.notation;
+              if (index === state.moveLog.length - 1) item.className = 'latest';
+              log.appendChild(item);
+            });
+            log.scrollTop = log.scrollHeight;
+          } else {
+            log.innerHTML = '<li>No moves yet — white opens.</li>';
+          }
+          var board = document.getElementById('board');
+          board.innerHTML = '';
+          var myTurn = state && (demoMode || state.turn === 'user') && state.status === 'playing' && !busy;
+          for (var y = 0; y < 8; y += 1) {
+            for (var x = 0; x < 8; x += 1) {
+              var name = squareName(x, y);
+              var piece = state ? state.squares[y * 8 + x] : '.';
+              var choices = movesTo(name);
+              var cell = document.createElement('button');
+              cell.type = 'button';
+              cell.className = 'cell ' + ((x + y) % 2 ? 'dark' : 'light');
+              cell.setAttribute('aria-label', name + (piece === '.' ? ', empty' : ', ' + piece));
+              cell.dataset.square = name;
+              if (state && state.lastMove) {
+                if (state.lastMove.from === name) cell.className += ' last-from';
+                if (state.lastMove.to === name) cell.className += ' last-to';
+              }
+              if (selected === name) cell.className += ' selected';
+              if (choices.length) {
+                cell.className += ' hint';
+                if (piece !== '.') cell.className += ' capture';
+              }
+              if (myTurn && (movesFrom(name).length || choices.length)) cell.className += ' selectable';
+              if (x === 0) {
+                var rank = document.createElement('span');
+                rank.className = 'coord rank';
+                rank.textContent = String(8 - y);
+                cell.appendChild(rank);
+              }
+              if (y === 7) {
+                var file = document.createElement('span');
+                file.className = 'coord file';
+                file.textContent = FILES[x];
+                cell.appendChild(file);
+              }
+              if (piece !== '.') {
+                var figure = document.createElement('span');
+                figure.className = 'piece ' + (sideOf(piece) === 'user' ? 'white' : 'black');
+                figure.dataset.glyph = PIECES[piece];
+                figure.setAttribute('aria-hidden', 'true');
+                cell.appendChild(figure);
+              }
+              cell.addEventListener('click', onSquareClick);
+              board.appendChild(cell);
+            }
+          }
+        }
+        function onSquareClick(event) {
+          if (!state || (!demoMode && state.turn !== 'user') || state.status !== 'playing' || busy) return;
+          var name = event.currentTarget.dataset.square;
+          var destinations = movesTo(name);
+          if (selected && destinations.length) {
+            if (destinations.some(function (move) { return move.promotion; })) {
+              openPromotion(destinations);
+            } else {
+              submitMove(destinations[0]);
+            }
+            return;
+          }
+          if (movesFrom(name).length) selected = name;
+          else selected = null;
+          render();
+        }
+        function openPromotion(moves) {
+          promotionMoves = moves;
+          var tray = document.getElementById('promotion-choices');
+          tray.innerHTML = '';
+          moves.forEach(function (move) {
+            var button = document.createElement('button');
+            button.type = 'button';
+            button.className = 'promotion-key';
+            button.textContent = PROMOTION_PIECES[move.promotion];
+            button.setAttribute('aria-label', 'Promote to ' + move.promotion);
+            button.addEventListener('click', function () {
+              document.getElementById('promotion-dialog').close();
+              submitMove(move);
+            });
+            tray.appendChild(button);
+          });
+          document.getElementById('promotion-dialog').showModal();
+        }
+        function submitMove(move) {
+          selected = null;
+          busy = true;
+          render();
+          gezelPage
+            .invoke('user_move', {
+              from: move.from,
+              to: move.to,
+              ...(move.promotion ? { promotion: move.promotion } : {}),
+            })
+            .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 Schaakspeler cannot reply.');
+              }
+              return poll();
+            })
+            .catch(function (error) {
+              busy = false;
+              setBanner(String(error && error.message ? error.message : error));
+              render();
+            });
+        }
+        function newGame() {
+          if (!gezelPage.embedded() || busy) return;
+          selected = null;
+          busy = true;
+          render();
+          gezelPage
+            .invoke('new_game', {})
+            .then(function () {
+              busy = false;
+              setBanner('');
+              return poll();
+            })
+            .catch(function (error) {
+              busy = false;
+              setBanner(String(error && error.message ? error.message : error));
+              render();
+            });
+        }
+        function transitionState(next) {
+          state = next;
+          if (selected && !movesFrom(selected).length) selected = null;
+          render();
+        }
+        function poll() {
+          if (demoMode) { transitionState(demoGame); 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;
+              transitionState(next);
+            })
+            .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('newgame').addEventListener('click', newGame);
+        document.getElementById('cancel-promotion').addEventListener('click', function () {
+          promotionMoves = [];
+          document.getElementById('promotion-dialog').close();
+        });
+        poll().then(schedule, schedule);
+      })();
+    </script>
+  </body>
+</html>