fix: fix ui bugs

packages/onitama-game/src/state/ui.ts

@@ -1,4 +1,4 @@
-import { signal, type Signal } from '@preact/signals';
+import { MutableSignal, mutableSignal } from 'boardgame-core';
 
 export interface ValidMove {
   card: string;
@@ -8,79 +8,74 @@ export interface ValidMove {
   toY: number;
 }
 
+// 先选择牌，然后选择棋子，最后选择移动
 export interface OnitamaUIState {
   selectedPiece: { x: number; y: number } | null;
   selectedCard: string | null;
   validMoves: ValidMove[];
 }
 
-export function createOnitamaUIState(): Signal<OnitamaUIState> {
-  return signal<OnitamaUIState>({
+export function createOnitamaUIState(): MutableSignal<OnitamaUIState> {
+  return mutableSignal<OnitamaUIState>({
     selectedPiece: null,
     selectedCard: null,
     validMoves: [],
   });
 }
 
-export function clearSelection(uiState: Signal<OnitamaUIState>): void {
-  uiState.value = {
-    selectedPiece: null,
-    selectedCard: null,
-    validMoves: [],
-  };
+export function clearSelection(uiState: MutableSignal<OnitamaUIState>): void {
+  uiState.produce(state => {
+    state.selectedPiece = null;
+    state.selectedCard = null;
+    state.validMoves = [];
+  });
 }
 
 export function selectPiece(
-  uiState: Signal<OnitamaUIState>,
+  uiState: MutableSignal<OnitamaUIState>,
   x: number,
   y: number
 ): void {
-  uiState.value = {
-    ...uiState.value,
-    selectedPiece: { x, y },
-    selectedCard: null,
-  };
+  uiState.produce(state => {
+    state.selectedPiece = { x, y };
+  });
 }
 
 export function selectCard(
-  uiState: Signal<OnitamaUIState>,
+  uiState: MutableSignal<OnitamaUIState>,
   card: string
 ): void {
-  // 如果点击已选中的卡牌，取消选择
-  if (uiState.value.selectedCard === card) {
-    uiState.value = {
-      selectedPiece: null,
-      selectedCard: null,
-      validMoves: [],
-    };
-  } else {
-    // 选择新卡牌，清除棋子选择
-    uiState.value = {
-      selectedPiece: null,
-      selectedCard: card,
-      validMoves: [],
-    };
-  }
+  uiState.produce(state => {
+    // 如果点击已选中的卡牌，取消选择
+    if (state.selectedCard === card) {
+      state.selectedPiece = null;
+      state.selectedCard = null;
+      state.validMoves = [];
+    } else {
+      // 选择新卡牌，清除棋子选择
+      state.selectedPiece = null;
+      state.selectedCard = card;
+      state.validMoves = [];
+    }
+  });
 }
 
 export function deselectCard(
-  uiState: Signal<OnitamaUIState>
+  uiState: MutableSignal<OnitamaUIState>
 ): void {
-  uiState.value = {
-    ...uiState.value,
-    selectedCard: null,
-    selectedPiece: null,
-    validMoves: [],
-  };
+  uiState.produce(state => {
+    state.selectedCard = null;
+    state.selectedPiece = null;
+    state.validMoves = [];
+  });
 }
 
 export function setValidMoves(
-  uiState: Signal<OnitamaUIState>,
+  uiState: MutableSignal<OnitamaUIState>,
   moves: ValidMove[]
 ): void {
-  uiState.value = {
-    ...uiState.value,
-    validMoves: moves,
-  };
+  uiState.produce(state => {
+    state.validMoves = moves;
+  });
 }