fix: more issues with ui

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

@@ -1,2 +1,2 @@
-export { createOnitamaUIState, clearSelection, selectPiece, selectCard, deselectCard, setValidMoves } from './ui';
+export { createUIState, clearSelection, selectPiece, selectCard, createValidMoves } from './ui';
 export type { OnitamaUIState, ValidMove } from './ui';

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

@@ -1,4 +1,5 @@
-import { MutableSignal, mutableSignal } from 'boardgame-core';
+import { MutableSignal, mutableSignal, computed, ReadonlySignal } from 'boardgame-core';
+import {getAvailableMoves, OnitamaState} from "boardgame-core/samples/onitama";
 
 export interface ValidMove {
   card: string;
@@ -12,14 +13,22 @@ export interface ValidMove {
 export interface OnitamaUIState {
   selectedPiece: { x: number; y: number } | null;
   selectedCard: string | null;
-  validMoves: ValidMove[];
 }
 
-export function createOnitamaUIState(): MutableSignal<OnitamaUIState> {
+export function createUIState(): MutableSignal<OnitamaUIState> {
   return mutableSignal<OnitamaUIState>({
     selectedPiece: null,
     selectedCard: null,
-    validMoves: [],
+  });
+}
+
+export function createValidMoves(state: ReadonlySignal<OnitamaState>, ui: ReadonlySignal<OnitamaUIState>){
+  return computed(() => {
+    return getAvailableMoves(state.value, state.value.currentPlayer)
+        .filter(move => {
+          const {selectedCard, selectedPiece} = ui.value;
+          return selectedPiece?.x === move.fromX && selectedPiece?.y === move.fromY && selectedCard === move.card;
+        })
   });
 }
 
@@ -27,7 +36,6 @@ export function clearSelection(uiState: MutableSignal<OnitamaUIState>): void {
   uiState.produce(state => {
     state.selectedPiece = null;
     state.selectedCard = null;
-    state.validMoves = [];
   });
 }
 
@@ -37,7 +45,12 @@ export function selectPiece(
   y: number
 ): void {
   uiState.produce(state => {
-    state.selectedPiece = { x, y };
+    // 如果点击已选中的棋子，取消选择
+    if(state.selectedPiece?.x === x && state.selectedPiece?.y === y){
+      state.selectedPiece = null;
+    }else{
+      state.selectedPiece = { x, y };
+    }
   });
 }
 
@@ -48,34 +61,10 @@ export function selectCard(
   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: MutableSignal<OnitamaUIState>
-): void {
-  uiState.produce(state => {
-    state.selectedCard = null;
-    state.selectedPiece = null;
-    state.validMoves = [];
-  });
-}
-
-export function setValidMoves(
-  uiState: MutableSignal<OnitamaUIState>,
-  moves: ValidMove[]
-): void {
-  uiState.produce(state => {
-    state.validMoves = moves;
-  });
-}
-