miaoda-game-match3-react

Use this React DOM adapter for a discrete match-3 board rendered with DOM/CSS or canvas. It exposes row-major cells and the latest clear/collapse result while delegating all board rules to miaoda-game-match3-core.

Install

pnpm add miaoda-game-match3-react miaoda-game-match3-core

Minimal board view

import { useMatch3Controller, useMatch3View } from 'miaoda-game-match3-react';

export function BoardView() {
  const game = useMatch3Controller({ width: 8, height: 8, symbolCount: 6 });
  const view = useMatch3View(game);

  return (
    <div style={{ display: 'grid', gridTemplateColumns: `repeat(${view.width}, 48px)` }}>
      {view.cells.map((symbol, index) => (
        <button key={index} onClick={() => game.tapClear(index % view.width, Math.floor(index / view.width))}>
          {symbol ?? ''}
        </button>
      ))}
    </div>
  );
}

cells is row-major (y * width + x). Call game.swap(a, b) for line match-3 or game.tapClear(x, y) for blast rules, then call game.resolveOnce() repeatedly while it returns a step. Use lastCleared and lastCollapse to drive CSS/canvas transitions.

For swap-based games, pass requireLegalSwap: true when generating the initial board. After cascades, use game.hasLegalSwap() for dead-board detection or game.findLegalSwaps() for hints. Resolve existing matches before querying.

Inject random in controller options when a server or test must own deterministic refills; it must return a finite value in [0, 1). A null action result means there was no match or group to clear. The adapter does not create timers, run tweens, or decide score and power-up rules.

Public API

Match3Controller, useMatch3Controller, useMatch3View, Match3View, and all match-3 core exports are available. React 18.2+ is required.