feat: clean up play controller adding new moves

Author: kevinjosethomas

src/hooks/usePlayController/usePlayMaiaController.ts

@@ -38,14 +38,12 @@ const computeTermination = (chess: Chess): Termination | undefined => {
 }
 
 export const usePlayMaiaController = (id: string, config: PlayGameConfig) => {
-  // Core game state
   const [gameTree, setGameTree] = useState<GameTree>(
     () => new GameTree(config.startFen || nullFen),
   )
-  const [moveTimes, setMoveTimes] = useState<number[]>([])
+  const [treeVersion, setTreeVersion] = useState<number>(0)
   const [resigned, setResigned] = useState<boolean>(false)
 
-  // Clock state
   const [baseMinutes, incrementSeconds] =
     config.timeControl == 'unlimited'
       ? [0, 0]
@@ -56,16 +54,22 @@ export const usePlayMaiaController = (id: string, config: PlayGameConfig) => {
   const [blackClock, setBlackClock] = useState<number>(initialClockValue)
   const [lastMoveTime, setLastMoveTime] = useState<number>(0)
 
-  // Navigation state
   const [currentNode, setCurrentNode] = useState<GameNode | undefined>(() =>
     gameTree.getRoot(),
   )
   const [orientation, setOrientation] = useState<'white' | 'black'>(
     config.player,
   )
 
-  // Derived game state
-  const moveList = useMemo(() => gameTree.toMoveArray(), [gameTree])
+  const moveList = useMemo(
+    () => gameTree.toMoveArray(),
+    [gameTree, treeVersion],
+  )
+
+  const moveTimes = useMemo(
+    () => gameTree.toTimeArray(),
+    [gameTree, treeVersion],
+  )
 
   const game: PlayedGame = useMemo(() => {
     const mainLine = gameTree.getMainLine()
@@ -80,7 +84,6 @@ export const usePlayMaiaController = (id: string, config: PlayGameConfig) => {
         } as Termination)
       : computeTermination(chess)
 
-    // Build moves array for compatibility
     const moves = []
     const rootNode = gameTree.getRoot()
     const rootChess = new Chess(rootNode.fen)
@@ -114,12 +117,11 @@ export const usePlayMaiaController = (id: string, config: PlayGameConfig) => {
       termination,
       turn: chess.turn() == 'b' ? 'black' : 'white',
     }
-  }, [gameTree, resigned, whiteClock, blackClock, id])
+  }, [gameTree, treeVersion, resigned, whiteClock, blackClock, id])
 
   const toPlay: Color | null = game.termination ? null : game.turn
   const playerActive = toPlay == config.player
 
-  // Available moves and pieces
   const { availableMoves, pieces } = useMemo(() => {
     if (!currentNode) return { availableMoves: [], pieces: {} }
 
@@ -146,9 +148,8 @@ export const usePlayMaiaController = (id: string, config: PlayGameConfig) => {
     }
 
     return { availableMoves, pieces }
-  }, [currentNode, playerActive, game.termination])
+  }, [currentNode, playerActive, game.termination, treeVersion])
 
-  // Navigation helpers
   const goToNode = useCallback((node: GameNode) => setCurrentNode(node), [])
   const goToNextNode = useCallback(() => {
     if (currentNode?.mainChild) setCurrentNode(currentNode.mainChild)
@@ -161,13 +162,14 @@ export const usePlayMaiaController = (id: string, config: PlayGameConfig) => {
     [gameTree],
   )
 
-  const plyCount = useMemo(() => gameTree.getMainLine().length, [gameTree])
+  const plyCount = useMemo(
+    () => gameTree.getMainLine().length,
+    [gameTree, treeVersion],
+  )
 
-  // Clock management
   const updateClock = useCallback(
     (overrideTime: number | undefined = undefined): number => {
       if (moveList.length < 2) {
-        setMoveTimes([...moveTimes, 0])
         return 0 // Clock does not start until first two moves made
       }
 
@@ -187,22 +189,19 @@ export const usePlayMaiaController = (id: string, config: PlayGameConfig) => {
         }
       }
 
-      setMoveTimes([...moveTimes, elapsed])
       setLastMoveTime(now)
       return elapsed
     },
     [
       moveList.length,
       lastMoveTime,
-      moveTimes,
       toPlay,
       whiteClock,
       blackClock,
       incrementSeconds,
     ],
   )
 
-  // Game end by time
   useEffect(() => {
     if (
       playerActive &&
@@ -227,76 +226,39 @@ export const usePlayMaiaController = (id: string, config: PlayGameConfig) => {
     whiteClock,
   ])
 
-  // Move handling
   const addMove = useCallback(
     (moveUci: string) => {
-      const mainLine = gameTree.getMainLine()
-      const lastNode = mainLine[mainLine.length - 1]
-      const chess = new Chess(lastNode.fen)
-      const result = chess.move(moveUci, { sloppy: true })
-
-      if (result) {
-        const newTree = new GameTree(gameTree.getRoot().fen)
-        // Rebuild tree with existing moves plus new move
-        const existingMoves = gameTree.toMoveArray()
-        let node = newTree.getRoot()
-
-        for (const move of [...existingMoves, moveUci]) {
-          const tempChess = new Chess(node.fen)
-          const tempResult = tempChess.move(move, { sloppy: true })
-          if (tempResult) {
-            node = newTree.addMainMove(
-              node,
-              tempChess.fen(),
-              move,
-              tempResult.san,
-            )
-          }
-        }
-
-        setGameTree(newTree)
-        setCurrentNode(node) // Move to the new position
+      const newNode = gameTree.addMoveToMainLine(moveUci)
+      if (newNode) {
+        setCurrentNode(newNode)
+        // Force re-render by incrementing tree version
+        setTreeVersion((prev) => prev + 1)
       }
     },
     [gameTree],
   )
 
   const addMoveWithTime = useCallback(
     (moveUci: string, moveTime: number) => {
-      addMove(moveUci)
-      setMoveTimes([...moveTimes, moveTime])
-    },
-    [addMove, moveTimes],
-  )
-
-  // Legacy compatibility
-  const setMoves = useCallback(
-    (newMoves: string[]) => {
-      const newTree = new GameTree(config.startFen || nullFen)
-      let node = newTree.getRoot()
-
-      for (const move of newMoves) {
-        const chess = new Chess(node.fen)
-        const result = chess.move(move, { sloppy: true })
-        if (result) {
-          node = newTree.addMainMove(node, chess.fen(), move, result.san)
-        }
+      const newNode = gameTree.addMoveToMainLine(moveUci, moveTime)
+      if (newNode) {
+        setCurrentNode(newNode)
+        // Force re-render by incrementing tree version
+        setTreeVersion((prev) => prev + 1)
       }
-
-      setGameTree(newTree)
-      setCurrentNode(node)
     },
-    [config.startFen],
+    [gameTree],
   )
 
   const reset = () => {
-    setGameTree(new GameTree(config.startFen || nullFen))
-    setCurrentNode(gameTree.getRoot())
-    setMoveTimes([])
+    const newTree = new GameTree(config.startFen || nullFen)
+    setGameTree(newTree)
+    setCurrentNode(newTree.getRoot())
     setResigned(false)
     setLastMoveTime(0)
     setWhiteClock(initialClockValue)
     setBlackClock(initialClockValue)
+    setTreeVersion((prev) => prev + 1)
   }
 
   const makeMove = async (moveUci: string): Promise<void> => {
@@ -311,7 +273,6 @@ export const usePlayMaiaController = (id: string, config: PlayGameConfig) => {
   }
 
   return {
-    // Game state
     game,
     gameTree,
     currentNode,
@@ -342,8 +303,6 @@ export const usePlayMaiaController = (id: string, config: PlayGameConfig) => {
 
     addMove,
     addMoveWithTime,
-    setMoves,
-    setMoveTimes,
     setResigned,
     reset,
     makeMove,

src/pages/play/maia.tsx

@@ -27,7 +27,7 @@ const playStatsLoader = async () => {
   }
 }
 
-const useVsMaiaPlayTreeController = (
+const useVsMaiaPlayController = (
   id: string,
   playGameConfig: PlayGameConfig,
 ) => {
@@ -162,7 +162,7 @@ const PlayMaia: React.FC<Props> = ({
   playGameConfig,
   playAgain,
 }: Props) => {
-  const controller = useVsMaiaPlayTreeController(id, playGameConfig)
+  const controller = useVsMaiaPlayController(id, playGameConfig)
 
   useEffect(() => {
     const handleKeyDown = (event: KeyboardEvent) => {

src/types/base/tree.ts

@@ -80,8 +80,9 @@ export class GameTree {
     move: string,
     san: string,
     activeModel?: string,
+    time?: number,
   ): GameNode {
-    return node.addChild(fen, move, san, true, activeModel)
+    return node.addChild(fen, move, san, true, activeModel, time)
   }
 
   addVariation(
@@ -90,11 +91,12 @@ export class GameTree {
     move: string,
     san: string,
     activeModel?: string,
+    time?: number,
   ): GameNode {
     if (node.findVariation(move)) {
       return node.findVariation(move) as GameNode
     }
-    return node.addChild(fen, move, san, false, activeModel)
+    return node.addChild(fen, move, san, false, activeModel, time)
   }
 
   toMoveArray(): string[] {
@@ -106,6 +108,52 @@ export class GameTree {
     }
     return moves
   }
+
+  toTimeArray(): number[] {
+    const times: number[] = []
+    let node = this.root
+    while (node.mainChild) {
+      node = node.mainChild
+      times.push(node.time || 0)
+    }
+    return times
+  }
+
+  addMoveToMainLine(moveUci: string, time?: number): GameNode | null {
+    const mainLine = this.getMainLine()
+    const lastNode = mainLine[mainLine.length - 1]
+
+    const chess = new Chess(lastNode.fen)
+    const result = chess.move(moveUci, { sloppy: true })
+
+    if (result) {
+      return this.addMainMove(
+        lastNode,
+        chess.fen(),
+        moveUci,
+        result.san,
+        undefined,
+        time,
+      )
+    }
+
+    return null
+  }
+
+  addMovesToMainLine(moves: string[], times?: number[]): GameNode | null {
+    let currentNode: GameNode | null = null
+
+    for (let i = 0; i < moves.length; i++) {
+      const move = moves[i]
+      const time = times?.[i]
+      currentNode = this.addMoveToMainLine(move, time)
+      if (!currentNode) {
+        return null
+      }
+    }
+
+    return currentNode
+  }
 }
 
 export class GameNode {
@@ -126,6 +174,7 @@ export class GameNode {
   private _bestMove: boolean
   private _moveNumber: number
   private _unlikelyGoodMove: boolean
+  private _time: number | null
 
   private static readonly BLUNDER_THRESHOLD =
     MOVE_CLASSIFICATION.BLUNDER_THRESHOLD
@@ -146,6 +195,7 @@ export class GameNode {
     san: string | null = null,
     parent: GameNode | null = null,
     mainline = true,
+    time: number | null = null,
   ) {
     this._fen = fen
     this._move = move
@@ -164,6 +214,7 @@ export class GameNode {
     this._turn = this.parseTurn(fen)
     this._check = fen.includes('+')
     this._moveNumber = this.parseMoveNumber(fen, this._turn)
+    this._time = time
   }
 
   get fen(): string {
@@ -217,6 +268,9 @@ export class GameNode {
   get unlikelyGoodMove(): boolean {
     return this._unlikelyGoodMove
   }
+  get time(): number | null {
+    return this._time
+  }
 
   private parseTurn(fen: string): Color {
     const parts = fen.split(' ')
@@ -314,8 +368,9 @@ export class GameNode {
     san: string,
     mainline = false,
     activeModel?: string,
+    time?: number,
   ): GameNode {
-    const child = new GameNode(fen, move, san, this, mainline)
+    const child = new GameNode(fen, move, san, this, mainline, time || null)
     this._children.push(child)
     if (mainline) {
       this._mainChild = child
@@ -433,4 +488,9 @@ export class GameNode {
     variation._mainline = true
     return true
   }
+
+  // Set the time for this move
+  setTime(time: number): void {
+    this._time = time
+  }
 }