@anweather/plugin-board-kit

Board-UI primitives for any game board on web-boardgame-platform: a remote plugin's frontend bundle (boardgame-plugins, tactics-game-plugin, the platform's own plugins/tic-tac-toe-remote) and the native boards still in this repo's frontend/. One implementation, one package, on the public npm registry.

Published with the SDK, at the SDK's version. publish-plugin-sdk.yml releases this package together with @anweather/game-plugin-ssdk and the Kotlin runtime from one sdk-v* tag, so a plugin's board kit, SSDK and runtime pin all name the same release. See plugin-protocol/CLAUDE.md, "Publishing for cross-repo plugins".

Why a package and not a copy. A plugin's frontend bundles its own React (nothing marked external). react and react-dom are peer dependencies here, so the consumer's own node_modules/react is the one this code binds to: exactly one React instance per bundle. The shell-script vendoring this replaced existed to dodge the two-React failure a plain cross-directory import produced ("Cannot read properties of null (reading 'useState')" at runtime), and left eight of ten copies stale.

Contents

• mountReactBoard(Component, { onError?, fallback? }) returns the { mount, update, unmount } handle a remote bundle exports across the ShadowMount boundary. It wraps the board in an error boundary: a render error shows a message instead of a blank rectangle, is reported through onError, and clears on the next update().
• BoardShell (centered-column layout) and TurnIdentity (the "You are X" row, with a spectator variant). Inline styles throughout; TurnIdentity takes a CSS color, never a class name, so it renders the same inside a shadow root with no Tailwind in reach.
• computeIsMyTurn / computeIsAwaiting / computeIsSpectator over a minimal structural TurnState (anything with lifecycle, currentTurnParticipantId, participants and optionally awaitingParticipantIds, GameView included). computeIsAwaiting is what "waiting on me" means during a simultaneous phase.
• teamOf / teamMembers for a 4-seat, 2-team, alternating-seat game (mirrors platform-domain's TeamAssignment).
• The display half of platform-domain's TurnClock: useClockNow, useClockTimeout, formatClock, remainingMs, clockReading, and the ClockBadge / StartTurnGate components. What running out does stays the engine's call.
• useCanvasCamera: pinch/wheel zoom and two-finger pan for a canvas-rendered board, renderer-agnostic (Canvas2D via applyTransform, or drive a Pixi container from .zoom/.offsetX/.offsetY).

Not here on purpose: nameplateAccent.ts (this repo's frontend/src/plugins/) hardcodes per-gameType colours across the native catalogue, which is platform logic, not a board primitive.

Developing

npm ci && npm run build && npm test && npm run typecheck

npm test covers the pure helpers (turn, team and clock arithmetic) with node:test; the components are typechecked and exercised by their consumers' own Playwright suites. To try an unpublished change in a consumer, npm pack here and install the tarball there; the consumer's package.json should never point at this directory by path, since a file: link resolves react through this directory's own node_modules and reintroduces the two-React bundle.