feat: migrate train page to tree structure + handle all cases

Author: kevinjosethomas

src/components/Board/GameBoard.tsx

@@ -13,12 +13,8 @@ interface Props {
   currentNode: GameNode
   orientation?: Color
   availableMoves?: Map<string, string[]>
-  move?: {
-    fen: string
-    move: [string, string]
-    check?: Check
-  }
-  onPlayerMakeMove?: (move: [string, string] | null) => void
+  onSelectSquare?: (square: Key) => void
+  onPlayerMakeMove?: (move: [string, string]) => void
   setCurrentSquare?: Dispatch<SetStateAction<Key | null>>
   shapes?: DrawShape[]
   brushes?: DrawBrushes
@@ -28,16 +24,16 @@ interface Props {
 
 export const GameBoard: React.FC<Props> = ({
   game,
+  shapes,
+  brushes,
+  goToNode,
+  gameTree,
   currentNode,
   orientation = 'white',
   availableMoves,
-  move,
   onPlayerMakeMove,
   setCurrentSquare,
-  shapes,
-  brushes,
-  goToNode,
-  gameTree,
+  onSelectSquare,
 }: Props) => {
   const { playSound } = useChessSound()
 
@@ -89,7 +85,6 @@ export const GameBoard: React.FC<Props> = ({
       }
     },
     [
-      move,
       game,
       gameTree,
       goToNode,
@@ -100,29 +95,23 @@ export const GameBoard: React.FC<Props> = ({
     ],
   )
 
-  // Determine board configuration
   const boardConfig = useMemo(() => {
-    // For training: prioritize move result over currentNode when a move is made
-    const fen = move ? move.fen : currentNode.fen
-
-    const lastMove = move
-      ? move.move
-      : currentNode.move
-        ? ([currentNode.move.slice(0, 2), currentNode.move.slice(2, 4)] as [
-            Key,
-            Key,
-          ])
-        : []
+    const fen = currentNode.fen
 
-    const check = move ? move.check : currentNode.check
+    const lastMove = currentNode.move
+      ? ([currentNode.move.slice(0, 2), currentNode.move.slice(2, 4)] as [
+          Key,
+          Key,
+        ])
+      : []
 
     return {
       fen,
       lastMove,
-      check,
+      check: currentNode.check,
       orientation: orientation as 'white' | 'black',
     }
-  }, [move, currentNode, game, orientation])
+  }, [currentNode, game, orientation])
 
   return (
     <Chessground
@@ -137,7 +126,7 @@ export const GameBoard: React.FC<Props> = ({
         },
         events: {
           select: (key) => {
-            onPlayerMakeMove && onPlayerMakeMove(null)
+            onSelectSquare && onSelectSquare(key)
             setCurrentSquare && setCurrentSquare(key)
           },
         },

src/components/Training/Feedback.tsx

@@ -2,31 +2,26 @@ import { Chess } from 'chess.ts'
 import { useMemo, Dispatch, SetStateAction, useCallback } from 'react'
 
 import { Markdown } from 'src/components'
-import { useTrainingTreeController } from 'src/hooks'
+import { useTrainingController } from 'src/hooks'
 import { TrainingGame, Status } from 'src/types/training'
 
 interface Props {
-  latestGuess: string | null
-  trainingController: ReturnType<typeof useTrainingTreeController>
+  status: string
   game: TrainingGame
   setAndGiveUp: () => void
-  status: string
-  setStatus: Dispatch<SetStateAction<Status>>
   getNewGame: () => Promise<void>
+  setStatus: Dispatch<SetStateAction<Status>>
+  controller: ReturnType<typeof useTrainingController>
 }
 
 export const Feedback: React.FC<Props> = ({
   game,
   status,
   setStatus,
   getNewGame,
-  latestGuess,
   setAndGiveUp,
-  trainingController,
+  controller: controller,
 }: Props) => {
-  const { controller, move, currentMove, setCurrentMove, moveEvaluation } =
-    trainingController
-  const { currentIndex, setCurrentIndex } = controller
   const { targetIndex } = game
 
   const turn =
@@ -42,12 +37,12 @@ export const Feedback: React.FC<Props> = ({
   Find the best move for **${turn}**!
   `
   const incorrectContent = `
-  ##### ${latestGuess} is incorrect
+  ##### ${controller.currentNode.san} is incorrect
   Try again or give up to see the best move.
   `
 
   const correctContent = `
-  ##### Correct! ${latestGuess} is the best move.
+  ##### Correct! ${controller.currentNode.san} is the best move.
   You can now explore the position.
   `
 
@@ -67,22 +62,7 @@ export const Feedback: React.FC<Props> = ({
     } else {
       return defaultContent
     }
-  }, [
-    currentIndex,
-    currentMove,
-    defaultContent,
-    move,
-    incorrectContent,
-    moveEvaluation,
-    correctContent,
-    status,
-    targetIndex,
-  ])
-
-  const moveToTarget = useCallback(() => {
-    setCurrentMove(null)
-    setCurrentIndex(game.targetIndex)
-  }, [game.targetIndex, setCurrentIndex])
+  }, [defaultContent, incorrectContent, correctContent, status, targetIndex])
 
   return (
     <div className="flex w-screen flex-1 flex-col justify-between gap-2 rounded-sm bg-background-1 p-3 md:w-auto md:gap-0 md:p-5">
@@ -92,11 +72,11 @@ export const Feedback: React.FC<Props> = ({
       <div className="flex flex-col gap-1.5">
         {status !== 'archived' && (
           <>
-            {status === 'incorrect' && currentMove && (
+            {status === 'incorrect' && (
               <button
                 onClick={() => {
                   setStatus('default')
-                  setCurrentMove(null)
+                  controller.reset()
                 }}
                 className="flex w-full justify-center rounded-sm bg-engine-3 py-1.5 text-sm font-medium text-primary transition duration-300 hover:bg-engine-4 disabled:bg-backdrop disabled:text-secondary"
               >
@@ -105,8 +85,8 @@ export const Feedback: React.FC<Props> = ({
             )}
             {status !== 'correct' && status !== 'incorrect' && (
               <button
-                onClick={moveToTarget}
-                disabled={status == 'loading' || !currentMove}
+                onClick={() => controller.reset()}
+                disabled={status == 'loading'}
                 className="flex w-full justify-center rounded-sm bg-engine-3 py-1.5 text-sm font-medium text-primary transition duration-300 hover:bg-engine-4 disabled:bg-backdrop disabled:text-secondary"
               >
                 Reset
@@ -123,7 +103,6 @@ export const Feedback: React.FC<Props> = ({
             {(status === 'forfeit' || status === 'correct') && (
               <button
                 onClick={async () => {
-                  setCurrentMove(null)
                   await getNewGame()
                 }}
                 className="flex w-full justify-center rounded-sm bg-human-3 py-1.5 text-sm font-medium text-primary transition duration-300 hover:bg-human-4 disabled:bg-backdrop disabled:text-secondary"

src/contexts/TrainingControllerContext/TrainingControllerContext.ts

@@ -1,22 +1,11 @@
-import { createContext } from 'react'
 import { Chess } from 'chess.ts'
-import type { Key } from 'chessground/types'
+import { createContext } from 'react'
 import { GameTree, GameNode } from 'src/types'
 import { BaseTreeControllerContext } from '../BaseTreeControllerContext'
 
 export interface ITrainingControllerContext extends BaseTreeControllerContext {
   currentNode: GameNode
-  setCurrentIndex: (indexOrUpdater: number | ((prev: number) => number)) => void
-
   moves?: Map<string, string[]>
-  currentMove: [string, string] | null
-  setCurrentMove: (move: [string, string] | null) => void
-  currentSquare: Key | null
-  setCurrentSquare: (square: Key | null) => void
-  moveEvaluation: { maia: number; stockfish: number } | null
-  data: any[]
-  move?: any
-  parseMove: (move: string[]) => any
 }
 
 const defaultContext: ITrainingControllerContext = {
@@ -34,28 +23,12 @@ const defaultContext: ITrainingControllerContext = {
   goToRootNode: () => {
     /* no-op */
   },
-  currentIndex: 0,
-  setCurrentIndex: () => {
-    /* no-op */
-  },
   plyCount: 0,
   orientation: 'white',
   setOrientation: () => {
     /* no-op */
   },
   moves: undefined,
-  currentMove: null,
-  setCurrentMove: () => {
-    /* no-op */
-  },
-  currentSquare: null,
-  setCurrentSquare: () => {
-    /* no-op */
-  },
-  moveEvaluation: null,
-  data: [],
-  move: undefined,
-  parseMove: () => undefined,
 }
 
 export const TrainingControllerContext =