refactor: use mutative for entity signals

src/samples/tic-tac-toe.ts

@@ -1,35 +1,30 @@
-import { IGameContext, createGameCommand } from '../core/game';
-import { createCommandRegistry, registerCommand } from '../utils/command';
+import {createGameCommand, createGameCommandRegistry, IGameContext} from '../core/game';
+import { registerCommand } from '../utils/command';
 import type { Part } from '../core/part';
 
-export type TicTacToeState = {
-    currentPlayer: 'X' | 'O';
-    winner: 'X' | 'O' | 'draw' | null;
-    moveCount: number;
-};
-
-export type TicTacToeContext = IGameContext<TicTacToeState>;
-
 type TurnResult = {
     winner: 'X' | 'O' | 'draw' | null;
 };
 
-export function createInitialState(): TicTacToeState {
+export function createInitialState() {
     return {
-        currentPlayer: 'X',
-        winner: null,
+        currentPlayer: 'X' as 'X' | 'O',
+        winner: null as 'X' | 'O' | 'draw' | null,
         moveCount: 0,
     };
 }
+export type TicTacToeState = ReturnType<typeof createInitialState>;
 
-export function getBoardRegion(host: TicTacToeContext) {
+export function getBoardRegion(host: IGameContext<TicTacToeState>) {
     return host.regions.get('board');
 }
 
-export function isCellOccupied(host: TicTacToeContext, row: number, col: number): boolean {
+export function isCellOccupied(host: IGameContext<TicTacToeState>, row: number, col: number): boolean {
     const board = getBoardRegion(host);
     return board.value.children.some(
-        (child: { value: { position: number[] } }) => child.value.position[0] === row && child.value.position[1] === col
+        part => {
+            return part.value.position[0] === row && part.value.position[1] === col;
+        }
     );
 }
 
@@ -52,7 +47,7 @@ export function hasWinningLine(positions: number[][]): boolean {
     );
 }
 
-export function checkWinner(host: TicTacToeContext): 'X' | 'O' | 'draw' | null {
+export function checkWinner(host: IGameContext<TicTacToeState>): 'X' | 'O' | 'draw' | null {
     const parts = Object.values(host.parts.collection.value).map((s: { value: Part }) => s.value);
 
     const xPositions = parts.filter((_: Part, i: number) => i % 2 === 0).map((p: Part) => p.position);
@@ -64,7 +59,7 @@ export function checkWinner(host: TicTacToeContext): 'X' | 'O' | 'draw' | null {
     return null;
 }
 
-export function placePiece(host: TicTacToeContext, row: number, col: number, moveCount: number) {
+export function placePiece(host: IGameContext<TicTacToeState>, row: number, col: number, moveCount: number) {
     const board = getBoardRegion(host);
     const piece: Part = {
         id: `piece-${moveCount}`,
@@ -74,7 +69,9 @@ export function placePiece(host: TicTacToeContext, row: number, col: number, mov
         position: [row, col],
     };
     host.parts.add(piece);
-    board.value.children.push(host.parts.get(piece.id));
+    board.produce(draft => {
+        draft.children.push(host.parts.get(piece.id));
+    });
 }
 
 const setup = createGameCommand<TicTacToeState, { winner: 'X' | 'O' | 'draw' | null }>(
@@ -128,6 +125,6 @@ const turn = createGameCommand<TicTacToeState, TurnResult>(
     }
 );
 
-export const registry = createCommandRegistry<TicTacToeContext>();
+export const registry = createGameCommandRegistry<TicTacToeState>();
 registerCommand(registry, setup);
 registerCommand(registry, turn);