The client

v3 · Preview

Framework v3 is an opt-in preview available to everyone. New games use the stable framework by default.

Send player actions

API

Hook Contract
useOffers() Offer[]: the seat's offers on that board.
useAct() (action: Action | Action[]) => Outcome: takes one step on the board of this render, or a list of steps from one event.
useDraft() DraftView: { steps: { action, intent, lines: FormattedLine[] }[]; reopenedSteps: number }.
useUndo() { available: "draft" | "server" | "none"; undo: () => Outcome }.

Taking a step

act(action) takes one step and answers at once:

type Means
applied A choice or cancel step joined the draft. The board already shows it.
sent The step ended the decision. The decision is on its way to Boardweaver.
failed Boardweaver did not take the step. reason.code says why.

act takes steps on the board of the render that created it. When the board has changed since that render, act fails as STALE. Call act once per event: after one call takes a step, a second call in the same handler fails. A call from a timer or after an await fails when the board changed in between.

To take several steps from one event, such as a form that collects several values, pass them as a list: act([first, second, third]). Each step applies to the board that the step before it left. Each joins the decision as its own step, and only the last may end it. When a step fails, the steps before it stay in the decision and Boardweaver takes none after it. The failed outcome's applied says how many steps joined.

Commands, confirm and cancel

Draw a control for each offer that is not a board click:

  • A Command offer: a button with the offer's label, written with useMessageText() (Failures).
  • A confirm offer: the button that ends the decision, such as "Take".
  • A cancel offer: a switch or take-back, such as a click on another staged card.
  • An offer with an input: a field. For Text, offer the suggestions and accept up to maxLen characters. For Integer, accept min to max in steps of step. Send the value in the command: act({ ...offer.action, value }).

useDraft() lists the draft's steps. Use it to show what the seat chose so far.

Undo

import { FormattedMessage } from "react-intl";
import { useUndo } from "boardweaver/react";

export function UndoButton() {
  const undo = useUndo();
  return (
    <button onClick={() => undo.undo()} disabled={undo.available === "none"}>
      <FormattedMessage id="undo" />
    </button>
  );
}

available is draft (takes back the last draft step at once), server (asks Boardweaver to take back the last committed step) or none. The game logic decides which committed decisions the seat may take back (Changing the state).

Boardweaver also provides friendly takebacks around live matches. Keep useUndo for immediate undo without opponent approval.

Need a hand with this?

Join our Discord