miaoda-game-roster-react

Use this React DOM adapter to subscribe to a roster snapshot for board units, benches, squads, merges, and trait displays. Mutations remain explicit calls to miaoda-game-roster-core; the hook only provides a detached view for rendering.

Install

pnpm add miaoda-game-roster-react miaoda-game-roster-core

Minimal roster view

import { useRosterSnapshot } from 'miaoda-game-roster-react';

export function Bench({ roster }) {
  const snapshot = useRosterSnapshot(roster);
  const bench = snapshot.zones.find((zone) => zone.zoneId === 'bench');

  return (
    <ul>
      {bench?.instanceIds.map((id) => {
        const unit = snapshot.instances.find((item) => item.id === id);
        return <li key={id}>{unit?.definitionId} (rank {unit?.rank})</li>;
      })}
    </ul>
  );
}

The snapshot updates after committed roster operations. Use the IDs in snapshot.zones to preserve zone order, then look up full instances in snapshot.instances. Call roster.add, move, swap, remove, or resolveMerges from event handlers.

Public API

• useRosterSnapshot(roster): subscribes to the current serializable roster state.
• All roster core classes and types are re-exported.

React 18.2+ is required. The adapter does not render drag behavior, merge animations, or spatial movement; compose it with your chosen UI and grid packages.