fix: opening drill sidebar

Author: kevinjosethomas

src/components/Openings/OpeningDrillSidebar.tsx

@@ -10,6 +10,7 @@ interface Props {
   totalDrills: number
   onResetCurrentDrill: () => void
   onChangeSelections?: () => void
+  onLoadCompletedDrill?: (drill: CompletedDrill) => void
 }
 
 export const OpeningDrillSidebar: React.FC<Props> = ({
@@ -20,6 +21,7 @@ export const OpeningDrillSidebar: React.FC<Props> = ({
   totalDrills,
   onResetCurrentDrill,
   onChangeSelections,
+  onLoadCompletedDrill,
 }) => {
   return (
     <div className="flex h-full w-full flex-col border-r border-white/10 bg-background-1 2xl:min-w-72">
@@ -120,6 +122,11 @@ export const OpeningDrillSidebar: React.FC<Props> = ({
             </div>
           ) : (
             <div className="flex flex-col">
+              {onLoadCompletedDrill && (
+                <div className="px-3 py-2 text-xs text-secondary">
+                  Click on any drill below to analyze it
+                </div>
+              )}
               {completedDrills.map((completedDrill, index) => {
                 const accuracy =
                   completedDrill.totalMoves > 0
@@ -130,10 +137,32 @@ export const OpeningDrillSidebar: React.FC<Props> = ({
                       )
                     : 0
 
+                // Check if this drill is currently loaded
+                const isCurrentlyLoaded =
+                  currentDrill &&
+                  currentDrill.opening.id ===
+                    completedDrill.selection.opening.id &&
+                  currentDrill.variation?.id ===
+                    completedDrill.selection.variation?.id &&
+                  currentDrill.playerColor ===
+                    completedDrill.selection.playerColor &&
+                  currentDrill.maiaVersion ===
+                    completedDrill.selection.maiaVersion
+
                 return (
-                  <div
+                  <button
                     key={completedDrill.selection.id}
-                    className="border-b border-white/5 bg-background-1 px-3 py-2 transition-colors"
+                    className={`w-full border-b border-white/5 px-3 py-2 text-left transition-colors ${
+                      isCurrentlyLoaded
+                        ? 'border-human-4/30 bg-human-4/20'
+                        : 'bg-background-1'
+                    } ${
+                      onLoadCompletedDrill
+                        ? 'cursor-pointer hover:bg-background-2'
+                        : ''
+                    }`}
+                    onClick={() => onLoadCompletedDrill?.(completedDrill)}
+                    disabled={!onLoadCompletedDrill}
                   >
                     <div className="flex items-start justify-between">
                       <div className="min-w-0 flex-1">
@@ -191,7 +220,7 @@ export const OpeningDrillSidebar: React.FC<Props> = ({
                         ✗ {completedDrill.blunders.length}
                       </span>
                     </div>
-                  </div>
+                  </button>
                 )
               })}
             </div>

src/hooks/useOpeningDrillController/useOpeningDrillController.ts

@@ -251,6 +251,7 @@ export const useOpeningDrillController = (
               : index % 2 === 1
           return isPlayerMove
         }),
+        allMoves: drillGame.moves, // Store the full move sequence
         totalMoves: playerMoveCount,
         blunders: Array(blunders).fill('placeholder'),
         goodMoves: Array(goodMoves).fill('placeholder'),
@@ -356,6 +357,125 @@ export const useOpeningDrillController = (
     setWaitingForMaiaResponse(false)
   }, [])
 
+  // Load a specific completed drill for analysis
+  const loadCompletedDrill = useCallback(
+    (completedDrill: CompletedDrill) => {
+      // Set the drill as current
+      setCurrentDrill(completedDrill.selection)
+
+      // Check if this drill is already the current drill and we can reuse the game tree
+      if (
+        currentDrillGame &&
+        currentDrillGame.selection.id === completedDrill.selection.id &&
+        currentDrillGame.playerMoveCount === completedDrill.totalMoves
+      ) {
+        // Reuse the existing game tree and just enable analysis mode
+        setAnalysisEnabled(true)
+        setContinueAnalyzingMode(true)
+        setWaitingForMaiaResponse(false)
+        return
+      }
+
+      // Try to reconstruct the game tree from the finalNode path
+      const startingFen =
+        'rnbqkbnr/pppppppp/8/8/8/8/PPPPPPPP/RNBQKBNR w KQkq - 0 1'
+      const gameTree = new GameTree(startingFen)
+
+      // Parse the PGN to populate the tree with opening moves
+      const pgn = completedDrill.selection.variation
+        ? completedDrill.selection.variation.pgn
+        : completedDrill.selection.opening.pgn
+      const endNode = parsePgnToTree(pgn, gameTree)
+
+      let finalNode = endNode
+
+      // Reconstruct the full game using the stored allMoves sequence
+      if (
+        endNode &&
+        completedDrill.allMoves &&
+        completedDrill.allMoves.length > 0
+      ) {
+        let currentNode = endNode
+        const chess = new Chess(endNode.fen)
+
+        // Replay all moves from the drill (both player and Maia moves)
+        for (const moveUci of completedDrill.allMoves) {
+          try {
+            const moveObj = chess.move(moveUci, { sloppy: true })
+            if (moveObj) {
+              const newNode = gameTree.addMainMove(
+                currentNode,
+                chess.fen(),
+                moveUci,
+                moveObj.san,
+              )
+              if (newNode) {
+                currentNode = newNode
+                finalNode = newNode
+              }
+            }
+          } catch (error) {
+            console.error('Error replaying move:', moveUci, error)
+            break
+          }
+        }
+      } else if (endNode && completedDrill.playerMoves.length > 0) {
+        // Fallback: use only player moves if allMoves is not available
+        let currentNode = endNode
+        const chess = new Chess(endNode.fen)
+
+        for (const moveUci of completedDrill.playerMoves) {
+          try {
+            const moveObj = chess.move(moveUci, { sloppy: true })
+            if (moveObj) {
+              const newNode = gameTree.addMainMove(
+                currentNode,
+                chess.fen(),
+                moveUci,
+                moveObj.san,
+              )
+              if (newNode) {
+                currentNode = newNode
+                finalNode = newNode
+              }
+            }
+          } catch (error) {
+            console.error('Error replaying player move:', moveUci, error)
+            break
+          }
+        }
+      }
+
+      const loadedGame: OpeningDrillGame = {
+        id: completedDrill.selection.id + '-replay',
+        selection: completedDrill.selection,
+        moves: completedDrill.allMoves || completedDrill.playerMoves,
+        tree: gameTree,
+        currentFen: finalNode?.fen || endNode?.fen || startingFen,
+        toPlay: finalNode
+          ? new Chess(finalNode.fen).turn() === 'w'
+            ? 'white'
+            : 'black'
+          : 'white',
+        openingEndNode: endNode,
+        playerMoveCount: completedDrill.totalMoves,
+      }
+
+      setCurrentDrillGame(loadedGame)
+      setAnalysisEnabled(true) // Auto-enable analysis when loading a completed drill
+      setContinueAnalyzingMode(true) // Allow moves beyond target count
+      setWaitingForMaiaResponse(false)
+
+      // Set the controller to the final position after a brief delay
+      setTimeout(() => {
+        if (finalNode) {
+          controller.setCurrentNode(finalNode)
+        }
+      }, 100)
+    },
+    [controller, currentDrillGame],
+  )
+
   // Calculate overall performance data
   const overallPerformanceData = useMemo((): OverallPerformanceData => {
     if (completedDrills.length === 0) {
@@ -775,5 +895,8 @@ export const useOpeningDrillController = (
 
     // Check if all drills are completed
     areAllDrillsCompleted,
+
+    // Load a specific completed drill for analysis
+    loadCompletedDrill,
   }
 }

src/pages/openings/index.tsx

@@ -398,6 +398,7 @@ const OpeningsPage: NextPage = () => {
               totalDrills={controller.totalDrills}
               onResetCurrentDrill={controller.resetCurrentDrill}
               onChangeSelections={handleChangeSelections}
+              onLoadCompletedDrill={controller.loadCompletedDrill}
             />
           </div>
 

src/types/openings/index.ts

@@ -56,6 +56,7 @@ export interface CompletedDrill {
   selection: OpeningSelection
   finalNode: GameNode
   playerMoves: string[]
+  allMoves: string[]
   totalMoves: number
   blunders: string[]
   goodMoves: string[]