npm - @bendyline/gilde - Versions diffs - 0.1.4 → 0.1.5 - Mend

@bendyline/gilde 0.1.4 → 0.1.5

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

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

@@ -0,0 +1,637 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <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; }
+      }
+    </style>
+  </head>
+  <body>
+    <main>
+      <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 window.parent !== window; },
+            invoke: function (tool, input) {
+              return new Promise(function (resolve, reject) {
+                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 (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 state = null;
+        var busy = false;
+        var pollTimer = null;
+        var failedPolls = 0;
+        var newBoardSize = 9;
+        var newKomi = 6.5;
+        function pointName(x, y, size) { return GO_FILES[x] + String(size - y); }
+        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 (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 && 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 || 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 && 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 || 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 (!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);
+          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();
+          });
+        });
+        if (!gezelPage.embedded()) {
+          setBanner('Read-only view — moves need the Gezel app (open this project and use the Output tab).');
+        }
+        poll().then(schedule, schedule);
+      })();
+    </script>
+  </body>
+</html>