refactor: improve tic tac toe with region entity

src/core/region.ts

@@ -1,4 +1,4 @@
-import {computed, ReadonlySignal, SignalOptions} from "@preact/signals-core";
+import {batch, computed, ReadonlySignal, SignalOptions} from "@preact/signals-core";
 import {Entity} from "@/utils/entity";
 import {Part} from "./part";
 import {RNG} from "@/utils/rng";
@@ -33,7 +33,9 @@ export class RegionEntity extends Entity<Region> {
 }
 
 export function applyAlign(region: Entity<Region>) {
-  region.produce(applyAlignCore);
+  batch(() => {
+    region.produce(applyAlignCore);
+  });
 }
 
 function applyAlignCore(region: Region) {
@@ -91,7 +93,9 @@ function applyAlignCore(region: Region) {
 }
 
 export function shuffle(region: Entity<Region>, rng: RNG) {
-  region.produce(region => shuffleCore(region, rng));
+  batch(() => {
+    region.produce(region => shuffleCore(region, rng));
+  });
 }
 
 function shuffleCore(region: Region, rng: RNG){

src/index.ts

@@ -11,7 +11,7 @@ export type { Part } from './core/part';
 export { flip, flipTo, roll } from './core/part';
 
 export type { Region, RegionAxis } from './core/region';
-export { applyAlign, shuffle } from './core/region';
+export { applyAlign, shuffle, RegionEntity } from './core/region';
 
 // Utils
 export type { Command, CommandSchema, CommandParamSchema, CommandOptionSchema, CommandFlagSchema } from './utils/command';

src/samples/tic-tac-toe.ts

@@ -1,4 +1,4 @@
-import {createGameCommandRegistry, Part, Entity, entity, Region} from '@/index';
+import {createGameCommandRegistry, Part, Entity, entity, RegionEntity} from '@/index';
 
 const BOARD_SIZE = 3;
 const MAX_TURNS = BOARD_SIZE * BOARD_SIZE;
@@ -20,7 +20,7 @@ type TicTacToePart = Part & { player: PlayerType };
 
 export function createInitialState() {
     return {
-        board: entity<Region>('board', {
+        board: new RegionEntity('board', {
             id: 'board',
             axes: [
                 { name: 'x', min: 0, max: BOARD_SIZE - 1 },
@@ -89,15 +89,9 @@ function isValidMove(row: number, col: number): boolean {
     return !isNaN(row) && !isNaN(col) && row >= 0 && row < BOARD_SIZE && col >= 0 && col < BOARD_SIZE;
 }
 
-export function getBoardRegion(host: Entity<TicTacToeState>) {
-    return host.value.board;
-}
-
 export function isCellOccupied(host: Entity<TicTacToeState>, row: number, col: number): boolean {
-    const board = getBoardRegion(host);
-    return board.value.children.some(
-        part => part.value.position[0] === row && part.value.position[1] === col
-    );
+    const board = host.value.board;
+    return board.partsMap.value[`${row},${col}`] !== undefined;
 }
 
 export function hasWinningLine(positions: number[][]): boolean {
@@ -122,7 +116,7 @@ export function checkWinner(host: Entity<TicTacToeState>): WinnerType {
 }
 
 export function placePiece(host: Entity<TicTacToeState>, row: number, col: number, player: PlayerType) {
-    const board = getBoardRegion(host);
+    const board = host.value.board;
     const moveNumber = host.value.parts.length + 1;
     const piece: TicTacToePart = {
         id: `piece-${player}-${moveNumber}`,