@vnejs/plugins.views.screens.checkers 0.2.2 → 0.2.4

package/src/modules/controller.grid.ts

@@ -1,43 +1,40 @@
 import { ModuleControllerArrowsGrid } from "@vnejs/module.controller.arrows.grid";
 
-import type { CheckersPluginConstants, CheckersPluginEvents, CheckersPluginParams, CheckersPluginSettings } from "../types.js";
-import { buildGridItems, type CheckersPluginState } from "../utils/checkers.js";
-import { createInitialBoard } from "../utils/board.js";
+import type { CheckersViewPluginConstants, CheckersViewPluginEvents, CheckersViewPluginParams, CheckersViewPluginSettings } from "../types.js";
+import { buildGridItems, emptyBoard, type CheckersViewState } from "../utils/checkers.js";
 
-export class CheckersControllerGrid extends ModuleControllerArrowsGrid<
-  CheckersPluginEvents,
-  CheckersPluginConstants,
-  CheckersPluginSettings,
-  CheckersPluginParams,
-  CheckersPluginState
+export class CheckersViewControllerGrid extends ModuleControllerArrowsGrid<
+  CheckersViewPluginEvents,
+  CheckersViewPluginConstants,
+  CheckersViewPluginSettings,
+  CheckersViewPluginParams,
+  CheckersViewState
 > {
-  name = "checkers.controller.grid";
+  name = "checkers_view.controller.grid";
 
-  EVENT_SHOW = this.EVENTS.CHECKERS.SHOW;
-  EVENT_HIDE = this.EVENTS.CHECKERS.HIDE;
-  EVENT_STATE_UPDATE = this.EVENTS.CHECKERS.STATE_UPDATE;
-  EVENT_UPDATE_FAST = this.EVENTS.CHECKERS.UPDATE_FAST;
-  EVENT_GRID_NEXT = this.EVENTS.CHECKERS.GRID_NEXT;
-  EVENT_GRID_PREV = this.EVENTS.CHECKERS.GRID_PREV;
-  EVENT_GRID_CLEAR = this.EVENTS.CHECKERS.GRID_CLEAR;
-  EVENT_GRID_UPDATE_ITEMS = this.EVENTS.CHECKERS.GRID_UPDATE_ITEMS;
+  EVENT_SHOW = this.EVENTS.CHECKERS_VIEW.SHOW;
+  EVENT_HIDE = this.EVENTS.CHECKERS_VIEW.HIDE;
+  EVENT_STATE_UPDATE = this.EVENTS.CHECKERS_VIEW.STATE_UPDATE;
+  EVENT_UPDATE_FAST = this.EVENTS.CHECKERS_VIEW.UPDATE_FAST;
+  EVENT_GRID_NEXT = this.EVENTS.CHECKERS_VIEW.GRID_NEXT;
+  EVENT_GRID_PREV = this.EVENTS.CHECKERS_VIEW.GRID_PREV;
+  EVENT_GRID_CLEAR = this.EVENTS.CHECKERS_VIEW.GRID_CLEAR;
+  EVENT_GRID_UPDATE_ITEMS = this.EVENTS.CHECKERS_VIEW.GRID_UPDATE_ITEMS;
 
-  CONTROLS_ZINDEX = this.PARAMS.CHECKERS.ZINDEX;
+  CONTROLS_ZINDEX = this.PARAMS.CHECKERS_VIEW.ZINDEX;
 
   isDisableGridChangeHorizontal = true;
   isDisableGridChangeVertical = true;
 
-  getMaxRows = () => this.PARAMS.CHECKERS.ROWS;
-  getMaxColumns = () => this.PARAMS.CHECKERS.COLUMNS;
+  getMaxRows = () => this.PARAMS.CHECKERS_VIEW.ROWS;
+  getMaxColumns = () => this.PARAMS.CHECKERS_VIEW.COLUMNS;
 
-  getGridItems = async () => {
-    const board = this.state.board ?? createInitialBoard();
-    return buildGridItems({
-      board,
+  getGridItems = async () =>
+    buildGridItems({
+      board: this.state.board ?? emptyBoard(),
       selected: this.state.selected ?? null,
       legalMoves: this.state.legalMoves ?? [],
       gridRow: this.state.gridRow ?? null,
       gridColumn: this.state.gridColumn ?? null,
     });
-  };
 }

package/src/modules/controller.ts

@@ -1,50 +1,30 @@
 import { ModuleController } from "@vnejs/module.components";
 
-import type { CheckersPluginConstants, CheckersPluginEvents, CheckersPluginParams, CheckersPluginSettings } from "../types.js";
-import { createInitialCheckersState, type CheckersPluginState } from "../utils/checkers.js";
-
-export class CheckersController extends ModuleController<
-  CheckersPluginEvents,
-  CheckersPluginConstants,
-  CheckersPluginSettings,
-  CheckersPluginParams,
-  CheckersPluginState
+import type { CheckersViewPluginConstants, CheckersViewPluginEvents, CheckersViewPluginParams, CheckersViewPluginSettings } from "../types.js";
+import type { CheckersViewState } from "../utils/checkers.js";
+
+export class CheckersViewController extends ModuleController<
+  CheckersViewPluginEvents,
+  CheckersViewPluginConstants,
+  CheckersViewPluginSettings,
+  CheckersViewPluginParams,
+  CheckersViewState
 > {
-  name = "checkers.controller";
+  name = "checkers_view.controller";
 
-  EVENT_UPDATE_VIEW = this.EVENTS.CHECKERS.UPDATE;
+  EVENT_UPDATE_VIEW = this.EVENTS.CHECKERS_VIEW.UPDATE;
 
   CONTROLS = {};
-  CONTROLS_INDEX = this.PARAMS.CHECKERS.ZINDEX;
+  CONTROLS_INDEX = this.PARAMS.CHECKERS_VIEW.ZINDEX;
 
   subscribe = () => {
-    this.on(this.EVENTS.CHECKERS.SHOW, this.onShow);
-    this.on(this.EVENTS.CHECKERS.HIDE, this.onHide);
-    this.on(this.EVENTS.CHECKERS.STATE_UPDATE, this.updateState);
-    this.on(this.EVENTS.CHECKERS.UPDATE_FAST, this.updateViewFast);
-    this.on(this.EVENTS.CHECKERS.FINISH, this.onFinish);
-  };
-
-  beforeShow = async () => {
-    this.shared.checkersAiBusy = false;
-    const initial = createInitialCheckersState();
-    const ai = {
-      white: this.shared.checkersAi?.white ?? this.CONST.CHECKERS.AI_TYPES.PLAYER,
-      black: this.shared.checkersAi?.black ?? this.CONST.CHECKERS.AI_TYPES.PLAYER,
-    };
-
-    await this.emit(this.EVENTS.CHECKERS.STATE_UPDATE, { ...initial, ai } satisfies Partial<CheckersPluginState>);
-    await this.emit(this.EVENTS.CHECKERS.GRID_UPDATE_ITEMS);
+    this.on(this.EVENTS.CHECKERS_VIEW.SHOW, this.onShow);
+    this.on(this.EVENTS.CHECKERS_VIEW.HIDE, this.onHide);
+    this.on(this.EVENTS.CHECKERS_VIEW.STATE_UPDATE, this.updateState);
+    this.on(this.EVENTS.CHECKERS_VIEW.UPDATE_FAST, this.updateViewFast);
   };
 
   afterHide = () => {
-    this.shared.checkersAiBusy = false;
     this.setDefaultState();
   };
-
-  onFinish = async () => {
-    this.shared.checkersAiBusy = false;
-    await this.emit(this.EVENTS.CHECKERS.HIDE);
-    this.emitNext();
-  };
 }

package/src/modules/player.interact.ts

@@ -0,0 +1,48 @@
+import { ModuleCore } from "@vnejs/module.core";
+import type { CheckersMovePayload, CheckersMovePlayPayload, CheckersMovesGetResult } from "@vnejs/contracts.game.checkers";
+import type { CheckersPlayerInteractPayload, CheckersPlayerSelectPayload } from "@vnejs/contracts.views.screens.checkers";
+
+import type { CheckersViewPluginConstants, CheckersViewPluginEvents, CheckersViewPluginParams, CheckersViewPluginSettings } from "../types.js";
+import { samePos, type CheckersPos, type CheckersViewState } from "../utils/checkers.js";
+
+export class CheckersViewPlayerInteract extends ModuleCore<
+  CheckersViewPluginEvents,
+  CheckersViewPluginConstants,
+  CheckersViewPluginSettings,
+  CheckersViewPluginParams,
+  CheckersViewState
+> {
+  name = "checkers_view.player.interact";
+
+  subscribe = () => {
+    this.on(this.EVENTS.CHECKERS_VIEW.PLAYER_INTERACT, this.onPlayerInteract);
+    this.on(this.EVENTS.CHECKERS_VIEW.STATE_UPDATE, this.updateState);
+  };
+
+  onPlayerInteract = async ({ row, column }: CheckersPlayerInteractPayload = {}) => {
+    const { board, turn, selected } = this.state;
+    if (row == null || column == null || !board || !turn) return;
+
+    const focus: CheckersPos = { row, column };
+    const piece = board[focus.row]?.[focus.column] ?? null;
+    const legalFromState = this.state.legalMoves ?? [];
+    const move = selected && legalFromState.find((m) => samePos(m.from, selected) && samePos(m.to, focus));
+
+    if (move) return void this.emitOne(this.EVENTS.CHECKERS.MOVE_PLAY, { move, controllerType: this.CONST.AI.PLAYER_TYPE } satisfies CheckersMovePlayPayload);
+
+    if (piece && piece.color === turn) {
+      const result = (await this.emitOne(this.EVENTS.CHECKERS.MOVES_GET, { board, turn })) as CheckersMovesGetResult<CheckersMovePayload> | null;
+      const legalMoves = (result?.moves ?? []).filter((m) => samePos(m.from, focus));
+      if (legalMoves.length === 0) return;
+
+      const nextSelected = selected && samePos(selected, focus) ? null : focus;
+
+      return void this.emit(this.EVENTS.CHECKERS_VIEW.PLAYER_SELECT, {
+        selected: nextSelected,
+        legalMoves: nextSelected ? legalMoves : [],
+      } satisfies CheckersPlayerSelectPayload);
+    }
+
+    if (selected) return void this.emit(this.EVENTS.CHECKERS_VIEW.PLAYER_SELECT, { selected: null, legalMoves: [] } satisfies CheckersPlayerSelectPayload);
+  };
+}

package/src/modules/player.select.ts

@@ -0,0 +1,42 @@
+import { ModuleCore } from "@vnejs/module.core";
+import type { CheckersPlayerSelectPayload } from "@vnejs/contracts.views.screens.checkers";
+
+import type { CheckersViewPluginConstants, CheckersViewPluginEvents, CheckersViewPluginParams, CheckersViewPluginSettings } from "../types.js";
+import { buildGridItems, type CheckersMove, type CheckersPos, type CheckersViewState } from "../utils/checkers.js";
+
+export class CheckersViewPlayerSelect extends ModuleCore<
+  CheckersViewPluginEvents,
+  CheckersViewPluginConstants,
+  CheckersViewPluginSettings,
+  CheckersViewPluginParams,
+  CheckersViewState
+> {
+  name = "checkers_view.player.select";
+
+  subscribe = () => {
+    this.on(this.EVENTS.CHECKERS_VIEW.PLAYER_SELECT, this.onPlayerSelect);
+    this.on(this.EVENTS.CHECKERS_VIEW.STATE_UPDATE, this.updateState);
+  };
+
+  onPlayerSelect = async ({ selected = null, legalMoves = [] }: CheckersPlayerSelectPayload = {}) => {
+    const board = this.state.board;
+    if (!board) return;
+
+    const nextSelected = selected as CheckersPos | null;
+    const nextLegalMoves = legalMoves as CheckersMove[];
+    const gridItems = buildGridItems({
+      board,
+      selected: nextSelected,
+      legalMoves: nextLegalMoves,
+      gridRow: this.state.gridRow ?? null,
+      gridColumn: this.state.gridColumn ?? null,
+    });
+
+    await this.emit(this.EVENTS.CHECKERS_VIEW.STATE_UPDATE, {
+      selected: nextSelected,
+      legalMoves: nextLegalMoves,
+      gridItems,
+    } satisfies Partial<CheckersViewState>);
+    await this.emit(this.EVENTS.CHECKERS_VIEW.UPDATE_FAST);
+  };
+}

package/src/modules/status.ts

@@ -0,0 +1,41 @@
+import { ModuleCore } from "@vnejs/module.core";
+import type { TurnsChangedPayload, TurnsUnsetPayload } from "@vnejs/contracts.common.turn";
+import type { CheckersFinishPayload } from "@vnejs/contracts.game.checkers";
+
+import type { CheckersViewPluginConstants, CheckersViewPluginEvents, CheckersViewPluginParams, CheckersViewPluginSettings } from "../types.js";
+import { statusForTurn, type CheckersColor, type CheckersViewState } from "../utils/checkers.js";
+
+export class CheckersViewStatus extends ModuleCore<
+  CheckersViewPluginEvents,
+  CheckersViewPluginConstants,
+  CheckersViewPluginSettings,
+  CheckersViewPluginParams,
+  CheckersViewState
+> {
+  name = "checkers_view.status";
+
+  subscribe = () => {
+    this.on(this.EVENTS.TURNS.CHANGED, this.onTurnsChanged);
+    this.on(this.EVENTS.TURNS.UNSET, this.onTurnsUnset);
+    this.on(this.EVENTS.CHECKERS.FINISH, this.onFinish);
+    this.on(this.EVENTS.CHECKERS.SHOW, this.onShow);
+    this.on(this.EVENTS.CHECKERS_VIEW.STATE_UPDATE, this.updateState);
+  };
+
+  applyStatus = async ({ turn, winner, clearSelection = false }: { turn?: CheckersColor; winner: CheckersColor | null; clearSelection?: boolean }) => {
+    const next: Partial<CheckersViewState> = { turn, winner, statusText: statusForTurn(turn, winner) };
+
+    if (clearSelection) Object.assign(next, { selected: null, legalMoves: [] });
+
+    await this.emit(this.EVENTS.CHECKERS_VIEW.STATE_UPDATE, next);
+    await this.emit(this.EVENTS.CHECKERS_VIEW.UPDATE_FAST);
+  };
+
+  onTurnsChanged = ({ id, owner }: TurnsChangedPayload = {}) =>
+    id === this.CONST.CHECKERS.TURN_ID &&
+    this.applyStatus({ turn: owner as CheckersColor | undefined, winner: this.state.winner ?? null, clearSelection: true });
+  onTurnsUnset = ({ id }: TurnsUnsetPayload = {}) =>
+    id === this.CONST.CHECKERS.TURN_ID && this.applyStatus({ turn: undefined, winner: this.state.winner ?? null, clearSelection: true });
+  onFinish = ({ winner }: CheckersFinishPayload = {}) => this.applyStatus({ turn: this.state.turn, winner: (winner ?? null) as CheckersColor | null });
+  onShow = () => this.applyStatus({ turn: this.state.turn, winner: null });
+}

package/src/modules/view.ts

@@ -1,17 +1,23 @@
 import { ModuleView } from "@vnejs/module.components";
 
 import { render } from "../view/index.js";
-import type { CheckersPluginConstants, CheckersPluginEvents, CheckersPluginParams, CheckersPluginSettings } from "../types.js";
-import type { CheckersPluginState } from "../utils/checkers.js";
+import type { CheckersViewPluginConstants, CheckersViewPluginEvents, CheckersViewPluginParams, CheckersViewPluginSettings } from "../types.js";
+import type { CheckersViewState } from "../utils/checkers.js";
 
-export class CheckersView extends ModuleView<CheckersPluginEvents, CheckersPluginConstants, CheckersPluginSettings, CheckersPluginParams, CheckersPluginState> {
-  name = "checkers.view";
+export class CheckersViewView extends ModuleView<
+  CheckersViewPluginEvents,
+  CheckersViewPluginConstants,
+  CheckersViewPluginSettings,
+  CheckersViewPluginParams,
+  CheckersViewState
+> {
+  name = "checkers_view.view";
 
-  EVENT_UPDATE_VIEW = this.EVENTS.CHECKERS.UPDATE;
+  EVENT_UPDATE_VIEW = this.EVENTS.CHECKERS_VIEW.UPDATE;
 
   LOC_LABEL = null;
 
-  TRANSITION = this.PARAMS.CHECKERS.TRANSITION;
+  TRANSITION = this.PARAMS.CHECKERS_VIEW.TRANSITION;
 
   renderFunc = render;
 }

package/src/tests/player.interact.test.ts

@@ -0,0 +1,56 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+
+import { SUBSCRIBE_EVENTS as CHECKERS_EVENTS } from "@vnejs/contracts.game.checkers";
+import { SUBSCRIBE_EVENTS as CHECKERS_VIEW_EVENTS } from "@vnejs/contracts.views.screens.checkers";
+import { stubEvent } from "@vnejs/test-utils";
+
+import { CheckersViewPlayerInteract } from "../modules/player.interact.js";
+import { BOARD_SIZE, type CheckersBoard, type CheckersPiece } from "../utils/checkers.js";
+import { createCheckersViewTestModule, registerCheckersViewPluginVne } from "./setup.js";
+
+const emptyBoard = (): CheckersBoard => Array.from({ length: BOARD_SIZE }, () => Array.from({ length: BOARD_SIZE }, () => null));
+
+const piece = (id: string, color: CheckersPiece["color"]): CheckersPiece => ({ id, color, king: false });
+
+/** White at (5,2): (4,1) hangs to black at (3,0); (4,3) is safe. */
+const hangingScenarioBoard = (): CheckersBoard => {
+  const board = emptyBoard();
+  board[5]![2] = piece("w1", "white");
+  board[3]![0] = piece("b1", "black");
+  return board;
+};
+
+describe("checkers_view player.interact", () => {
+  beforeEach(() => {
+    registerCheckersViewPluginVne();
+  });
+
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  it("PLAYER_INTERACT selects piece and emits PLAYER_SELECT", async () => {
+    const board = hangingScenarioBoard();
+    const { module, observer } = createCheckersViewTestModule(CheckersViewPlayerInteract, { subscribe: false });
+    const interact = module as CheckersViewPlayerInteract;
+    interact.updateState({ board, turn: "white", selected: null, legalMoves: [] });
+
+    const playerSelect = vi.fn(() => null);
+    stubEvent(observer, CHECKERS_VIEW_EVENTS.PLAYER_SELECT, playerSelect);
+    stubEvent(observer, CHECKERS_EVENTS.MOVES_GET, () => ({
+      moves: [
+        { from: { row: 5, column: 2 }, to: { row: 4, column: 1 }, captures: [] },
+        { from: { row: 5, column: 2 }, to: { row: 4, column: 3 }, captures: [] },
+      ],
+      hanging: [],
+      safe: [],
+    }));
+
+    await interact.onPlayerInteract({ row: 5, column: 2 });
+
+    expect(playerSelect).toHaveBeenCalledOnce();
+    const args = playerSelect.mock.calls[0]?.[0] as { selected: { row: number; column: number }; legalMoves: unknown[] };
+    expect(args.selected).toEqual({ row: 5, column: 2 });
+    expect(args.legalMoves).toHaveLength(2);
+  });
+});

package/src/tests/setup.ts

@@ -1,23 +1,35 @@
+import { CONSTANTS as AI_CONST, PARAMS as AI_PARAMS, PLUGIN_NAME as AI, SUBSCRIBE_EVENTS as AI_EVENTS } from "@vnejs/contracts.ai";
+import { PLUGIN_NAME as GRID, SUBSCRIBE_EVENTS as GRID_EVENTS } from "@vnejs/contracts.common.grid";
 import { CONSTANTS as CONTROLS_CONST, PLUGIN_NAME as CONTROLS, SUBSCRIBE_EVENTS as CONTROLS_EVENTS } from "@vnejs/contracts.controls";
-import { CONSTANTS, PARAMS, PLUGIN_NAME, SUBSCRIBE_EVENTS } from "@vnejs/contracts.views.screens.checkers";
+import {
+  CONSTANTS as CHECKERS_CONST,
+  PARAMS as CHECKERS_PARAMS,
+  PLUGIN_NAME as CHECKERS,
+  SUBSCRIBE_EVENTS as CHECKERS_EVENTS,
+} from "@vnejs/contracts.game.checkers";
+import { PARAMS, PLUGIN_NAME, SUBSCRIBE_EVENTS } from "@vnejs/contracts.views.screens.checkers";
+import { SourcesSet } from "@vnejs/sources-set";
 import { createTestModule as baseCreateTestModule, registerCoreVne, registerVnePlugin, stubSilentEvent } from "@vnejs/test-utils";
 
-export const registerCheckersPluginVne = () => {
+export const registerCheckersViewPluginVne = () => {
   registerCoreVne();
   registerVnePlugin(CONTROLS, { constants: CONTROLS_CONST, events: CONTROLS_EVENTS });
-  registerVnePlugin(PLUGIN_NAME, { constants: CONSTANTS, events: SUBSCRIBE_EVENTS, params: PARAMS });
+  registerVnePlugin(AI, { constants: AI_CONST, events: AI_EVENTS, params: AI_PARAMS });
+  registerVnePlugin(CHECKERS, { constants: CHECKERS_CONST, events: CHECKERS_EVENTS, params: CHECKERS_PARAMS });
+  registerVnePlugin(GRID, { events: GRID_EVENTS });
+  registerVnePlugin(PLUGIN_NAME, { events: SUBSCRIBE_EVENTS, params: PARAMS });
 };
 
-export const createCheckersTestModule = <T extends Parameters<typeof baseCreateTestModule>[0]>(
+export const createCheckersViewTestModule = <T extends Parameters<typeof baseCreateTestModule>[0]>(
   ModuleClass: T,
   options: Parameters<typeof baseCreateTestModule>[1] = {},
 ) => {
   const result = baseCreateTestModule(ModuleClass, {
-    state: {
-      checkers: { isShow: false },
-      ...(options.state ?? {}),
-    },
     ...options,
+    shared: {
+      checkersInteractDisableSources: new SourcesSet(),
+      ...(options.shared ?? {}),
+    },
   });
 
   stubSilentEvent(result.observer, SUBSCRIBE_EVENTS.SHOW);
@@ -26,9 +38,11 @@ export const createCheckersTestModule = <T extends Parameters<typeof baseCreateT
   stubSilentEvent(result.observer, SUBSCRIBE_EVENTS.UPDATE_FAST);
   stubSilentEvent(result.observer, SUBSCRIBE_EVENTS.STATE_UPDATE);
   stubSilentEvent(result.observer, SUBSCRIBE_EVENTS.GRID_UPDATE_ITEMS);
-  stubSilentEvent(result.observer, SUBSCRIBE_EVENTS.FINISH);
+  stubSilentEvent(result.observer, GRID_EVENTS.SET);
+  stubSilentEvent(result.observer, GRID_EVENTS.CHANGED);
+  stubSilentEvent(result.observer, CHECKERS_EVENTS.FINISH);
 
   return result;
 };
 
-export { SUBSCRIBE_EVENTS, PARAMS, PLUGIN_NAME, CONTROLS_EVENTS };
+export { SUBSCRIBE_EVENTS, PARAMS, PLUGIN_NAME, CONTROLS_EVENTS, CHECKERS_EVENTS, GRID_EVENTS };

package/src/types.ts

@@ -1,4 +1,5 @@
 import type { ModuleComponentsConstants, ModuleComponentsEvents, ModuleComponentsParams, ModuleComponentsSettings } from "@vnejs/module.components";
+import type { Constants as AiConstants, Params as AiParams, PluginName as AiPluginName, SubscribeEvents as AiSubscribeEvents } from "@vnejs/contracts.ai";
 import type { Constants as ControlsConstants, PluginName as ControlsPluginName } from "@vnejs/contracts.controls";
 import type {
   Constants as ScenarioConstants,
@@ -6,18 +7,34 @@ import type {
   SubscribeEvents as ScenarioSubscribeEvents,
 } from "@vnejs/contracts.core.scenario";
 import type { PluginName as LogsPluginName, SubscribeEvents as LogsSubscribeEvents } from "@vnejs/contracts.core.logs";
-import type { Constants, Params, PluginName, SubscribeEvents } from "@vnejs/contracts.views.screens.checkers";
+import type { PluginName as GridPluginName, SubscribeEvents as GridSubscribeEvents } from "@vnejs/contracts.common.grid";
+import type { PluginName as TurnsPluginName, SubscribeEvents as TurnsSubscribeEvents } from "@vnejs/contracts.common.turn";
+import type {
+  Constants as CheckersConstants,
+  Params as CheckersParams,
+  PluginName as CheckersPluginName,
+  SubscribeEvents as CheckersSubscribeEvents,
+} from "@vnejs/contracts.game.checkers";
+import type { Params, PluginName, SubscribeEvents } from "@vnejs/contracts.views.screens.checkers";
 
-export type CheckersPluginEvents = ModuleComponentsEvents &
+export type CheckersViewPluginEvents = ModuleComponentsEvents &
   Record<PluginName, SubscribeEvents> &
+  Record<CheckersPluginName, CheckersSubscribeEvents> &
+  Record<GridPluginName, GridSubscribeEvents> &
+  Record<TurnsPluginName, TurnsSubscribeEvents> &
+  Record<AiPluginName, AiSubscribeEvents> &
   Record<ScenarioPluginName, ScenarioSubscribeEvents> &
   Record<LogsPluginName, LogsSubscribeEvents>;
 
-export type CheckersPluginConstants = ModuleComponentsConstants &
-  Record<PluginName, Constants> &
+export type CheckersViewPluginConstants = ModuleComponentsConstants &
+  Record<CheckersPluginName, CheckersConstants> &
+  Record<AiPluginName, AiConstants> &
   Record<ControlsPluginName, ControlsConstants> &
   Record<ScenarioPluginName, ScenarioConstants>;
 
-export type CheckersPluginSettings = ModuleComponentsSettings;
+export type CheckersViewPluginSettings = ModuleComponentsSettings;
 
-export type CheckersPluginParams = ModuleComponentsParams & Record<PluginName, Params>;
+export type CheckersViewPluginParams = ModuleComponentsParams &
+  Record<PluginName, Params> &
+  Record<CheckersPluginName, CheckersParams> &
+  Record<AiPluginName, AiParams>;

package/src/utils/checkers.ts

@@ -1,5 +1,21 @@
-import type { CheckersBoard, CheckersColor, CheckersMove, CheckersPiece, CheckersPos } from "./board.js";
-import { BOARD_SIZE, createInitialBoard, getAllMoves, isDarkSquare } from "./board.js";
+import type { GridChangedPayload } from "@vnejs/contracts.common.grid";
+import type { CheckersMovePayload, CheckersPosPayload } from "@vnejs/contracts.game.checkers";
+
+export const BOARD_SIZE = 8;
+
+export type CheckersColor = "white" | "black";
+
+export type CheckersPiece = {
+  id: string;
+  color: CheckersColor;
+  king: boolean;
+};
+
+export type CheckersPos = CheckersPosPayload;
+
+export type CheckersMove = CheckersMovePayload;
+
+export type CheckersBoard = (CheckersPiece | null)[][];
 
 export type CheckersGridItem = {
   row: number;
@@ -11,7 +27,7 @@ export type CheckersGridItem = {
   isFocus?: boolean;
 };
 
-export type CheckersPluginState = {
+export type CheckersViewState = {
   isShow: boolean;
   isForce: boolean;
   board?: CheckersBoard;
@@ -25,21 +41,16 @@ export type CheckersPluginState = {
   gridItems?: CheckersGridItem[];
   gridIndex?: number;
   gridsCount?: number;
-  ai?: {
-    white: string;
-    black: string;
-  };
 };
 
-export type CheckersCellClickPayload = {
+export type CheckersClickPayload = {
   row?: number;
   column?: number;
 };
 
-export const statusForTurn = (turn: CheckersColor, winner: CheckersColor | null = null) => {
-  if (winner) return winner === "white" ? "White wins" : "Black wins";
-  return turn === "white" ? "White to move" : "Black to move";
-};
+export const isDarkSquare = (row: number, column: number) => (row + column) % 2 === 1;
+
+export const samePos = (a: CheckersPos, b: CheckersPos) => a.row === b.row && a.column === b.column;
 
 export const buildGridItems = ({
   board,
@@ -74,23 +85,31 @@ export const buildGridItems = ({
   return items;
 };
 
-export const createInitialCheckersState = (): Pick<
-  CheckersPluginState,
-  "board" | "turn" | "selected" | "legalMoves" | "winner" | "statusText" | "gridItems" | "gridIndex" | "gridsCount"
-> => {
-  const board = createInitialBoard();
-  const turn: CheckersColor = "white";
-  const legalMoves = getAllMoves(board, turn);
-
-  return {
-    board,
-    turn,
-    selected: null,
-    legalMoves: [],
-    winner: null,
-    statusText: statusForTurn(turn),
-    gridItems: buildGridItems({ board, legalMoves: [] }),
-    gridIndex: 0,
-    gridsCount: 1,
-  };
+export const listBoardPieces = (board: CheckersBoard) => {
+  const pieces: Array<CheckersPiece & CheckersPos> = [];
+
+  for (let row = 0; row < BOARD_SIZE; row++) {
+    for (let column = 0; column < BOARD_SIZE; column++) {
+      const piece = board[row]?.[column];
+      if (!piece) continue;
+      pieces.push({ ...piece, row, column });
+    }
+  }
+
+  return pieces;
 };
+
+export const emptyBoard = (): CheckersBoard => Array.from({ length: BOARD_SIZE }, () => Array.from({ length: BOARD_SIZE }, () => null));
+
+export const statusForTurn = (turn?: CheckersColor, winner: CheckersColor | null = null) => {
+  if (winner) return winner === "white" ? "White wins" : "Black wins";
+  if (!turn) return "";
+  return turn === "white" ? "White to move" : "Black to move";
+};
+
+export const fromGridChanged = (payload: GridChangedPayload = {}): Partial<CheckersViewState> => ({
+  board: payload.cells as CheckersBoard | undefined,
+  // selection is view-only — reset on every game model change
+  selected: null,
+  legalMoves: [],
+});

package/src/view/index.tsx

@@ -4,17 +4,16 @@ import type { ReactComponentProps } from "@vnejs/uis.react";
 import { Flex, PositionBox, Screen, Text, createRenderFunc, useCallback, useEffect, useMemo, useState, useStoreState } from "@vnejs/uis.react";
 import { getVneLength } from "@vnejs/uis.utils";
 
-import type { CheckersPluginConstants, CheckersPluginEvents, CheckersPluginParams, CheckersPluginSettings } from "../types.js";
-import type { CheckersColor, CheckersPiece } from "../utils/board.js";
-import { listBoardPieces } from "../utils/board.js";
-import type { CheckersGridItem, CheckersPluginState } from "../utils/checkers.js";
+import type { CheckersViewPluginConstants, CheckersViewPluginEvents, CheckersViewPluginParams, CheckersViewPluginSettings } from "../types.js";
+import type { CheckersColor, CheckersGridItem, CheckersPiece, CheckersViewState } from "../utils/checkers.js";
+import { listBoardPieces } from "../utils/checkers.js";
 
 type CheckersComponentProps = ReactComponentProps<
-  CheckersPluginEvents,
-  CheckersPluginConstants,
-  CheckersPluginSettings,
-  CheckersPluginParams,
-  CheckersPluginState
+  CheckersViewPluginEvents,
+  CheckersViewPluginConstants,
+  CheckersViewPluginSettings,
+  CheckersViewPluginParams,
+  CheckersViewState
 >;
 
 type VisualPiece = {
@@ -72,15 +71,15 @@ const CheckersScreen = ({ store, onMount, PARAMS, emit, EVENTS }: CheckersCompon
     gridColumn = null,
     selected = null,
     statusText = "",
-  } = useStoreState<CheckersPluginState>(store, onMount);
-
-  const transition = PARAMS.CHECKERS.TRANSITION;
-  const propsByView = PARAMS.CHECKERS.VIEW_PROPS;
-  const rows = PARAMS.CHECKERS.ROWS;
-  const columns = PARAMS.CHECKERS.COLUMNS;
-  const cellSize = PARAMS.CHECKERS.CELL_SIZE;
-  const cellGap = PARAMS.CHECKERS.CELL_GAP;
-  const graveyardGap = PARAMS.CHECKERS.GRAVEYARD_GAP;
+  } = useStoreState<CheckersViewState>(store, onMount);
+
+  const transition = PARAMS.CHECKERS_VIEW.TRANSITION;
+  const propsByView = PARAMS.CHECKERS_VIEW.VIEW_PROPS;
+  const rows = PARAMS.CHECKERS_VIEW.ROWS;
+  const columns = PARAMS.CHECKERS_VIEW.COLUMNS;
+  const cellSize = PARAMS.CHECKERS_VIEW.CELL_SIZE;
+  const cellGap = PARAMS.CHECKERS_VIEW.CELL_GAP;
+  const graveyardGap = PARAMS.CHECKERS_VIEW.GRAVEYARD_GAP;
   const boardSize = columns * cellSize + (columns - 1) * cellGap;
   const playfieldWidth = cellSize + graveyardGap + boardSize + graveyardGap + cellSize;
 
@@ -244,11 +243,11 @@ const CheckersScreen = ({ store, onMount, PARAMS, emit, EVENTS }: CheckersCompon
     [blackGraveyardX, boardOffsetX, cellLen, stepLen],
   );
 
-  const onCellClick = useCallback(
+  const onClick = useCallback(
     (row: number, column: number) => {
-      void emit(EVENTS.CHECKERS.CELL_CLICK, { row, column });
+      void emit(EVENTS.CHECKERS_VIEW.CLICK, { row, column });
     },
-    [emit, EVENTS.CHECKERS.CELL_CLICK],
+    [emit, EVENTS.CHECKERS_VIEW.CLICK],
   );
 
   return (
@@ -266,7 +265,7 @@ const CheckersScreen = ({ store, onMount, PARAMS, emit, EVENTS }: CheckersCompon
                 return (
                   <div
                     key={`${item.row}-${item.column}`}
-                    onClick={() => onCellClick(item.row, item.column)}
+                    onClick={() => onClick(item.row, item.column)}
                     vne-cursor-type="pointer"
                     style={{
                       ...cellBaseStyle,
@@ -306,4 +305,4 @@ const CheckersScreen = ({ store, onMount, PARAMS, emit, EVENTS }: CheckersCompon
   );
 };
 
-export const render: ViewRenderFunc<CheckersPluginState> = createRenderFunc(CheckersScreen);
+export const render: ViewRenderFunc<CheckersViewState> = createRenderFunc(CheckersScreen);