reveal-goban

An interactive go / baduk / weiqi board built for reveal.js presentations.

Demo

<reveal-goban move="42">(;GM[1]FF[4]SZ[19];B[qd];W[dc];...)</reveal-goban>

Features

• Load a game record. Point it at an SGF string and it renders the position.
• Play moves. Click an empty point to place a stone, right-click to undo.
• Navigate the game. Step through moves with the built-in controls, load straight into a specific move, or click any stone on the board to jump back to when it was played.
• Annotate positions. Circles, squares, triangles, marks, and labels from the SGF (CR/SQ/TR/MA/LB) render on the board.
• Stay in sync with speaker notes. Play a move in your speaker-notes window, and it shows up in the main view as well.
• Theme it to match your deck. Colors, fonts, and button styling are plain CSS custom properties.

Install

npm install reveal-goban

Usage

import Reveal from 'reveal.js';
import RevealMarkdown from 'reveal.js/plugin/markdown/markdown.esm.js';
import RevealGoban from 'reveal-goban';

Reveal.initialize({
  plugins: [RevealMarkdown, RevealGoban]
});

Or, for a deck with no build step, import it straight from unpkg, the same way you'd reference reveal.js itself from a CDN:

<script src="https://unpkg.com/reveal.js/dist/reveal.js"></script>
<script src="https://unpkg.com/reveal.js/plugin/markdown/markdown.js"></script>

<script type="module">
  import RevealGoban from 'https://unpkg.com/reveal-goban';

  Reveal.initialize({
    plugins: [RevealMarkdown, RevealGoban]
  });
</script>

<reveal-goban>
  (;GM[1]FF[4]SZ[19];B[qd];W[dc];...)
</reveal-goban>

Attributes

| Attribute | Description | | ----------- | ----------------------------------------------------------------------------- | | size | Board size (9, 13, 19, ...). Falls back to the SGF's SZ property, then 9. | | move | 1-indexed move to jump to on load. 0 is the empty board. Defaults to the last move in the SGF. | | cell-size | Override the auto-computed cell size, in pixels. | | no-sync | Boolean. Cross-window sync via BroadcastChannel is on by default (see Features); set this to opt out for a particular board. | | board-id | Escape hatch for the rare case where two different boards need to sync, or two boards with identical content shouldn't. Normally you don't need this — sync identity is derived from a board's own content/size/move/cell-size, so a main view and a speaker-notes view showing the same slide agree automatically. |

JS API

const board = document.querySelector('reveal-goban');

board.playMove(x, y);   // returns false if illegal (occupied, suicide)
board.goToStone(x, y);  // jump to the move that placed the stone at (x, y)
board.prev(steps = 1);
board.next(steps = 1);
board.undo(steps = 1);  // alias for prev
board.reset();

board.getState();       // BoardState — 0 | 1 | 2 per point
board.getTurn();        // 1 (black) | 2 (white), whose turn it is now
board.getHistory();
board.getLastMove();
board.getCurrentNode();
board.getRootGameNode(); // named to avoid colliding with Element.getRootNode()
board.canPrev();
board.canNext();

Events (CustomEvent, bubbling, composed: true, so they cross the shadow boundary):

• reveal-goban-move — { x, y, color }
• reveal-goban-navigate — { direction: 'prev' | 'next', steps }
• reveal-goban-reset
• reveal-goban-hover — { x, y } | null

Theming

Set these custom properties on the element:

reveal-goban {
  --reveal-goban-surface: #dcb35c;      /* goban background */
  --reveal-goban-grid: #3a2a10;
  --reveal-goban-black-stone: #111111;
  --reveal-goban-white-stone: #f5f5f5;
  --reveal-goban-marker: #3a2a10;      /* circle/square/triangle/mark/label on an empty point */
  --reveal-goban-accent: #bd442d;       /* hover ring, button hover border */
  --reveal-goban-text: #1a1a1a;
  --reveal-goban-text-muted: #55504a;
  --reveal-goban-button-bg: rgba(0, 0, 0, 0.04);
  --reveal-goban-button-bg-hover: rgba(0, 0, 0, 0.08);
  --reveal-goban-button-border: rgba(0, 0, 0, 0.2);
  --reveal-goban-font: system-ui, sans-serif;
}

For anything deeper, the internal markup exposes ::part()s: wrap, canvas, controls, button, reset-button.

Development

npm install
npm run typecheck
npm test
npm run build

examples/demo.html is a minimal Reveal.js deck using the component.

License

MIT