fix: moves container component for drills

Author: kevinjosethomas

src/components/Board/MovesContainer.tsx

@@ -13,6 +13,8 @@ interface Props {
   showVariations?: boolean
   disableKeyboardNavigation?: boolean
   disableMoveClicking?: boolean
+  startFromNode?: GameNode
+  restrictNavigationBefore?: GameNode
 }
 
 const getMoveClassification = (node: GameNode | null) => {
@@ -42,6 +44,8 @@ export const MovesContainer: React.FC<Props> = (props) => {
     showVariations = true,
     disableKeyboardNavigation = false,
     disableMoveClicking = false,
+    startFromNode,
+    restrictNavigationBefore,
   } = props
   const { isMobile } = useContext(WindowSizeContext)
   const containerRef = useRef<HTMLDivElement>(null)
@@ -60,8 +64,51 @@ export const MovesContainer: React.FC<Props> = (props) => {
   const controller = useContext(TreeControllerContext)
 
   const mainLineNodes = useMemo(() => {
-    return controller.gameTree.getMainLine() ?? game.tree.getMainLine()
-  }, [game, controller.gameTree, controller.currentNode])
+    const fullMainLine =
+      controller.gameTree.getMainLine() ?? game.tree.getMainLine()
+
+    if (startFromNode) {
+      // Find the index of the start node in the full main line
+      const startIndex = fullMainLine.findIndex(
+        (node) => node.fen === startFromNode.fen,
+      )
+
+      if (startIndex !== -1) {
+        // Return the main line starting from the specified node
+        const customMainLine = fullMainLine.slice(startIndex)
+        console.log('MovesContainer mainLineNodes (custom start):', {
+          fullMainLineLength: fullMainLine.length,
+          startIndex,
+          customMainLineLength: customMainLine.length,
+          startNodeFen: startFromNode.fen,
+          currentNode: controller.currentNode?.fen,
+        })
+        return customMainLine
+      } else {
+        // If start node not found in main line, build from start node
+        const customMainLine = [startFromNode]
+        let current = startFromNode.mainChild
+        while (current) {
+          customMainLine.push(current)
+          current = current.mainChild
+        }
+        console.log('MovesContainer mainLineNodes (built from start):', {
+          customMainLineLength: customMainLine.length,
+          startNodeFen: startFromNode.fen,
+          currentNode: controller.currentNode?.fen,
+        })
+        return customMainLine
+      }
+    }
+
+    console.log('MovesContainer mainLineNodes (default):', {
+      controllerTreeMainLine: controller.gameTree?.getMainLine()?.length || 0,
+      gameTreeMainLine: game.tree?.getMainLine()?.length || 0,
+      finalMainLineLength: fullMainLine?.length || 0,
+      currentNode: controller.currentNode?.fen,
+    })
+    return fullMainLine
+  }, [game, controller.gameTree, controller.currentNode, startFromNode])
 
   useEffect(() => {
     if (disableKeyboardNavigation) return
@@ -79,6 +126,14 @@ export const MovesContainer: React.FC<Props> = (props) => {
         case 'ArrowLeft':
           event.preventDefault()
           if (controller.currentNode.parent) {
+            // Check if navigation is restricted
+            if (
+              restrictNavigationBefore &&
+              controller.currentNode.parent.fen === restrictNavigationBefore.fen
+            ) {
+              // Don't navigate before the restriction point
+              return
+            }
             controller.goToNode(controller.currentNode.parent)
           }
           break
@@ -89,7 +144,12 @@ export const MovesContainer: React.FC<Props> = (props) => {
 
     window.addEventListener('keydown', handleKeyDown)
     return () => window.removeEventListener('keydown', handleKeyDown)
-  }, [controller.currentNode, controller.goToNode, disableKeyboardNavigation])
+  }, [
+    controller.currentNode,
+    controller.goToNode,
+    disableKeyboardNavigation,
+    restrictNavigationBefore,
+  ])
 
   useEffect(() => {
     if (currentMoveRef.current && containerRef.current) {
@@ -102,7 +162,23 @@ export const MovesContainer: React.FC<Props> = (props) => {
   }, [controller.currentNode])
 
   const moves = useMemo(() => {
-    const nodes = mainLineNodes.slice(1)
+    // When using startFromNode, we want to show moves AFTER that node
+    // When using default behavior, we want to skip the root node (slice(1))
+    const nodes = startFromNode
+      ? mainLineNodes.slice(1)
+      : mainLineNodes.slice(1)
+    console.log('MovesContainer moves calculation:', {
+      mainLineNodesLength: mainLineNodes.length,
+      nodesAfterSliceLength: nodes.length,
+      firstNodeTurn: nodes[0]?.turn,
+      startFromNode: startFromNode?.fen,
+      allNodes: nodes.map((n, i) => ({
+        index: i,
+        move: n?.san,
+        turn: n?.turn,
+      })),
+    })
+
     const rows: (GameNode | null)[][] = []
 
     const firstNode = nodes[0]
@@ -119,6 +195,7 @@ export const MovesContainer: React.FC<Props> = (props) => {
       }, [])
     }
 
+    console.log('MovesContainer final rows:', rows.length)
     return rows
   }, [game, mainLineNodes, controller.gameTree])
 
@@ -136,7 +213,10 @@ export const MovesContainer: React.FC<Props> = (props) => {
   const mobileMovePairs = useMemo(() => {
     if (!isMobile) return []
 
-    const nodes = mainLineNodes.slice(1)
+    // Use the same logic as the moves calculation for consistency
+    const nodes = startFromNode
+      ? mainLineNodes.slice(1)
+      : mainLineNodes.slice(1)
     const pairs: MovePair[] = []
     let currentPair: MovePair | null = null
 

src/components/Openings/DrillPerformanceModal.tsx

@@ -88,7 +88,8 @@ const AnimatedGameReplay: React.FC<{
   openingFen: string
   playerColor: 'white' | 'black'
   gameTree: GameTree
-}> = ({ openingFen, playerColor, gameTree }) => {
+  openingEndNode: GameNode
+}> = ({ openingFen, playerColor, gameTree, openingEndNode }) => {
   const [currentFen, setCurrentFen] = useState(openingFen)
   const [currentNode, setCurrentNode] = useState<GameNode | null>(null)
 
@@ -230,16 +231,15 @@ const AnimatedGameReplay: React.FC<{
 
       {/* Move History - Use MovesContainer for consistency */}
       <div className="flex min-h-0 flex-1 flex-col border-t border-white/10">
-        <TreeControllerContext.Provider value={treeController}>
-          <MovesContainer
-            game={{
-              id: 'drill-performance',
-              tree: gameTree,
-            }}
-            showAnnotations={true}
-            showVariations={false}
-          />
-        </TreeControllerContext.Provider>
+        <MovesContainer
+          game={{
+            id: 'drill-performance',
+            tree: gameTree,
+          }}
+          startFromNode={openingEndNode}
+          showAnnotations={true}
+          showVariations={false}
+        />
       </div>
     </div>
   )
@@ -728,6 +728,7 @@ const DesktopLayout: React.FC<{
   onNextDrill: () => void
   isLastDrill: boolean
   gameTree: GameTree
+  openingEndNode: GameNode
   playerMoveCount: number
   treeController: ReturnType<typeof useTreeController>
   gameNodesMap: Map<string, GameNode>
@@ -745,6 +746,7 @@ const DesktopLayout: React.FC<{
   onNextDrill,
   isLastDrill,
   gameTree,
+  openingEndNode,
   playerMoveCount,
   treeController,
   gameNodesMap,
@@ -785,14 +787,15 @@ const DesktopLayout: React.FC<{
       <div className="flex w-1/3 flex-col border-r border-white/10">
         <TreeControllerContext.Provider
           value={{
-            gameTree: treeController.tree,
+            gameTree: gameTree,
             ...treeController,
           }}
         >
           <AnimatedGameReplay
             openingFen={openingFen}
             playerColor={drill.selection.playerColor}
             gameTree={gameTree}
+            openingEndNode={openingEndNode}
           />
         </TreeControllerContext.Provider>
       </div>
@@ -1041,6 +1044,7 @@ const MobileLayout: React.FC<{
   activeTab: 'replay' | 'analysis' | 'insights'
   setActiveTab: (tab: 'replay' | 'analysis' | 'insights') => void
   gameTree: GameTree
+  openingEndNode: GameNode
   playerMoveCount: number
   treeController: ReturnType<typeof useTreeController>
   gameNodesMap: Map<string, GameNode>
@@ -1060,6 +1064,7 @@ const MobileLayout: React.FC<{
   activeTab,
   setActiveTab,
   gameTree,
+  openingEndNode,
   playerMoveCount,
   treeController,
   gameNodesMap,
@@ -1130,14 +1135,15 @@ const MobileLayout: React.FC<{
       {activeTab === 'replay' && (
         <TreeControllerContext.Provider
           value={{
-            gameTree: treeController.tree,
+            gameTree: gameTree,
             ...treeController,
           }}
         >
           <AnimatedGameReplay
             openingFen={openingFen}
             playerColor={drill.selection.playerColor}
             gameTree={gameTree}
+            openingEndNode={openingEndNode}
           />
         </TreeControllerContext.Provider>
       )}
@@ -1241,62 +1247,74 @@ export const DrillPerformanceModal: React.FC<Props> = ({
   // For now, let's work directly with the nodes instead of trying to recreate the full tree
   // This is a temporary solution until we can properly access the GameTree
 
-  // Create a proper GameTree starting from the opening end node
-  const gameTree = useMemo(() => {
-    // Get the root node and build the tree from there
-    let root = drill.finalNode
-    while (root.parent) {
-      root = root.parent
+  // Get the original game tree and opening end node for the drill context
+  const { gameTree, openingEndNode } = useMemo(() => {
+    // Get the original game tree from the drill
+    const originalRoot = (() => {
+      let root = drill.finalNode
+      while (root.parent) {
+        root = root.parent
+      }
+      return root
+    })()
+
+    // Create the original GameTree from root
+    const originalGameTree = new GameTree(originalRoot.fen)
+    // Set the root to be the actual root node
+    Object.defineProperty(originalGameTree, 'root', { value: originalRoot })
+
+    // Find the opening end node by working backwards from the final node
+    // The opening end should be the first move analysis that is NOT a player move
+    const firstPlayerMoveAnalysis = moveAnalyses.find(move => move.isPlayerMove)
+    if (firstPlayerMoveAnalysis && firstPlayerMoveAnalysis.fenBeforeMove) {
+      // Find the node that represents the position before the first player move
+      const findNodeByFen = (node: GameNode, targetFen: string): GameNode | null => {
+        if (node.fen === targetFen) {
+          return node
+        }
+        // Check main child
+        if (node.mainChild) {
+          const found = findNodeByFen(node.mainChild, targetFen)
+          if (found) return found
+        }
+        // Check all children
+        for (const child of node.children) {
+          const found = findNodeByFen(child, targetFen)
+          if (found) return found
+        }
+        return null
+      }
+
+      const foundOpeningEndNode = findNodeByFen(originalRoot, firstPlayerMoveAnalysis.fenBeforeMove)
+      if (foundOpeningEndNode) {
+        return {
+          gameTree: originalGameTree,
+          openingEndNode: foundOpeningEndNode,
+        }
+      }
     }
 
-    // Find the opening end node from the drill selection
+    // Fallback: use the selection-based approach
     const openingEndFen = drill.selection.variation
       ? drill.selection.variation.fen
       : drill.selection.opening.fen
 
     // Find the actual opening end node in the tree
-    let openingEndTreeNode = root
-    let current: GameNode | null = root
+    let foundOpeningEndNode = originalRoot
+    let current: GameNode | null = originalRoot
     while (current) {
       if (current.fen === openingEndFen) {
-        openingEndTreeNode = current
+        foundOpeningEndNode = current
         break
       }
       current = current.mainChild
     }
 
-    // Create a new GameTree starting from the opening end node
-    const newTree = new (class extends GameTree {
-      constructor(startNode: GameNode) {
-        super(startNode.fen)
-        // Replace the root with our opening end node
-        this.setRoot(startNode)
-      }
-
-      private setRoot(node: GameNode) {
-        // Use reflection to set the private root field
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        ;(this as any).root = node
-      }
-
-      getRoot(): GameNode {
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        return (this as any).root
-      }
-
-      getMainLine(): GameNode[] {
-        const mainLine = []
-        let current: GameNode | null = this.getRoot()
-        while (current) {
-          mainLine.push(current)
-          current = current.mainChild
-        }
-        return mainLine
-      }
-    })(openingEndTreeNode)
-
-    return newTree
-  }, [drill.finalNode, drill.selection])
+    return {
+      gameTree: originalGameTree,
+      openingEndNode: foundOpeningEndNode,
+    }
+  }, [drill.finalNode, drill.selection, moveAnalyses])
 
   // Create tree controller for navigation
   const treeController = useTreeController(
@@ -1377,10 +1395,8 @@ export const DrillPerformanceModal: React.FC<Props> = ({
     return evaluationChart.slice(startIndex)
   }, [evaluationChart, moveAnalyses])
 
-  // Get opening FEN from the drill
-  const openingFen = drill.selection.variation
-    ? drill.selection.variation.fen
-    : drill.selection.opening.fen
+  // Get opening FEN from the opening end node
+  const openingFen = openingEndNode.fen
 
   return (
     <ModalContainer dismiss={onContinueAnalyzing}>
@@ -1396,6 +1412,7 @@ export const DrillPerformanceModal: React.FC<Props> = ({
           activeTab={activeTab}
           setActiveTab={setActiveTab}
           gameTree={gameTree}
+          openingEndNode={openingEndNode}
           playerMoveCount={playerMoveCount}
           treeController={treeController}
           gameNodesMap={gameNodesMap}
@@ -1412,6 +1429,7 @@ export const DrillPerformanceModal: React.FC<Props> = ({
           onNextDrill={onNextDrill}
           isLastDrill={isLastDrill}
           gameTree={gameTree}
+          openingEndNode={openingEndNode}
           playerMoveCount={playerMoveCount}
           treeController={treeController}
           gameNodesMap={gameNodesMap}