feat: improve drill ending functionality

Author: kevinjosethomas

src/components/Openings/OpeningDrillSidebar.tsx

@@ -59,14 +59,14 @@ export const OpeningDrillSidebar: React.FC<Props> = ({
             <div className="mt-3 flex gap-2">
               <button
                 onClick={onResetCurrentDrill}
-                className="flex-1 rounded bg-background-2 px-3 py-1 text-xs transition-colors hover:bg-background-3"
+                className="w-full rounded bg-background-2 py-1 text-xs transition-colors hover:bg-background-3"
               >
-                Reset
+                Reset Drill
               </button>
               {onChangeSelections && (
                 <button
                   onClick={onChangeSelections}
-                  className="flex-1 rounded bg-background-2 px-3 py-1 text-xs transition-colors hover:bg-background-3"
+                  className="w-full rounded bg-background-2 py-1 text-xs transition-colors hover:bg-background-3"
                 >
                   Change
                 </button>
@@ -81,25 +81,14 @@ export const OpeningDrillSidebar: React.FC<Props> = ({
       {/* Drill Progress */}
       <div className="border-b border-white/10 p-4">
         <h3 className="mb-2 text-sm font-medium text-primary">
-          Drill Progress
+          Completed Drills ({completedDrills.length})
         </h3>
         <div className="space-y-2">
           <div className="flex justify-between text-xs">
-            <span className="text-secondary">Current Drill</span>
+            <span className="text-secondary">Drill Progress</span>
             <span className="font-medium text-human-4">
-              {currentDrillIndex + 1} of {totalDrills}
-            </span>
-          </div>
-          <div className="flex justify-between text-xs">
-            <span className="text-secondary">Completed</span>
-            <span className="font-medium text-green-400">
-              {completedDrills.length}
-            </span>
-          </div>
-          <div className="flex justify-between text-xs">
-            <span className="text-secondary">Remaining</span>
-            <span className="font-medium text-yellow-400">
-              {totalDrills - completedDrills.length}
+              {Math.min(completedDrills.length + 1, totalDrills)} of{' '}
+              {totalDrills}
             </span>
           </div>
           <div className="h-2 w-full rounded bg-background-2">
@@ -108,7 +97,10 @@ export const OpeningDrillSidebar: React.FC<Props> = ({
               style={{
                 width: `${
                   totalDrills > 0
-                    ? (completedDrills.length / totalDrills) * 100
+                    ? Math.min(
+                        (completedDrills.length / totalDrills) * 100,
+                        100,
+                      )
                     : 0
                 }%`,
               }}
@@ -118,10 +110,7 @@ export const OpeningDrillSidebar: React.FC<Props> = ({
       </div>
 
       {/* Completed Drills List */}
-      <div className="flex h-96 flex-col overflow-hidden">
-        <h3 className="p-3 text-sm font-medium text-primary">
-          Completed Drills ({completedDrills.length})
-        </h3>
+      <div className="flex h-64 flex-col overflow-hidden">
         <div className="red-scrollbar flex h-full flex-col overflow-y-auto">
           {completedDrills.length === 0 ? (
             <div className="flex h-full items-center justify-center">
@@ -144,7 +133,7 @@ export const OpeningDrillSidebar: React.FC<Props> = ({
                 return (
                   <div
                     key={completedDrill.selection.id}
-                    className="bg-background-2 p-2 transition-colors hover:bg-background-3"
+                    className="border-b border-white/5 bg-background-1 px-3 py-2 transition-colors"
                   >
                     <div className="flex items-start justify-between">
                       <div className="min-w-0 flex-1">

src/hooks/useOpeningDrillController/useOpeningDrillController.ts

@@ -84,6 +84,7 @@ export const useOpeningDrillController = (
     useState<OpeningDrillGame | null>(null)
   const [analysisEnabled, setAnalysisEnabled] = useState(false)
   const [currentDrillIndex, setCurrentDrillIndex] = useState(0)
+  const [allDrillsCompleted, setAllDrillsCompleted] = useState(false)
 
   // Performance tracking state
   const [showPerformanceModal, setShowPerformanceModal] = useState(false)
@@ -104,17 +105,18 @@ export const useOpeningDrillController = (
   useEffect(() => {
     if (
       configuration.drillSequence.length > 0 &&
-      remainingDrills.length === 0
+      remainingDrills.length === 0 &&
+      !allDrillsCompleted
     ) {
       setRemainingDrills(configuration.drillSequence)
       setCurrentDrill(configuration.drillSequence[0])
       setCurrentDrillIndex(0)
     }
-  }, [configuration.drillSequence, remainingDrills.length])
+  }, [configuration.drillSequence, remainingDrills.length, allDrillsCompleted])
 
   // Initialize current drill game when drill changes
   useEffect(() => {
-    if (!currentDrill) return
+    if (!currentDrill || allDrillsCompleted) return
 
     const startingFen =
       'rnbqkbnr/pppppppp/8/8/8/8/PPPPPPPP/RNBQKBNR w KQkq - 0 1'
@@ -144,7 +146,7 @@ export const useOpeningDrillController = (
     setCurrentDrillGame(drillGame)
     setWaitingForMaiaResponse(false)
     setContinueAnalyzingMode(false) // Reset continue analyzing mode for new drill
-  }, [currentDrill])
+  }, [currentDrill, allDrillsCompleted])
 
   // Use the current drill game's tree, or create a default one
   const gameTree = currentDrillGame?.tree || new GameTree(new Chess().fen())
@@ -194,6 +196,13 @@ export const useOpeningDrillController = (
     return controller.currentNode === currentDrillGame.openingEndNode
   }, [currentDrillGame, controller.currentNode])
 
+  // Check if all drills are completed
+  const areAllDrillsCompleted = useMemo(() => {
+    return (
+      allDrillsCompleted || completedDrills.length >= configuration.drillCount
+    )
+  }, [allDrillsCompleted, completedDrills.length, configuration.drillCount])
+
   // Available moves for the current position - only when it's the player's turn
   const moves = useMemo(() => {
     if (!controller.currentNode || !isPlayerTurn)
@@ -290,9 +299,8 @@ export const useOpeningDrillController = (
     setCurrentPerformanceData(performanceData)
     setCompletedDrills((prev) => [...prev, performanceData.drill])
 
-    // Move drill from remaining to completed
-    setRemainingDrills((prev) => prev.slice(1))
-
+    // Don't remove from remaining drills here - do it in moveToNextDrill
+    // This ensures proper counting for the performance modal
     setShowPerformanceModal(true)
   }, [currentDrillGame, evaluateDrillPerformance])
 
@@ -302,14 +310,18 @@ export const useOpeningDrillController = (
     setCurrentPerformanceData(null)
     setContinueAnalyzingMode(false) // Reset continue analyzing mode for next drill
 
+    // Remove the completed drill from remaining drills
+    setRemainingDrills((prev) => prev.slice(1))
+
     const nextIndex = currentDrillIndex + 1
 
-    // The drill has already been moved from remaining to completed in completeDrill()
+    // Check if there are more drills to complete
     if (nextIndex < configuration.drillSequence.length) {
       setCurrentDrill(configuration.drillSequence[nextIndex])
       setCurrentDrillIndex(nextIndex)
     } else {
       // All drills completed - show final modal
+      setAllDrillsCompleted(true)
       setShowFinalModal(true)
     }
   }, [currentDrillIndex, configuration.drillSequence])
@@ -321,6 +333,29 @@ export const useOpeningDrillController = (
     setContinueAnalyzingMode(true) // Allow moves beyond target count
   }, [])
 
+  // Continue analyzing from final modal - just enable analysis mode
+  const continueAnalyzingFromFinal = useCallback(() => {
+    setShowFinalModal(false)
+    setAnalysisEnabled(true) // Auto-enable analysis
+    setContinueAnalyzingMode(true) // Allow moves beyond target count
+  }, [])
+
+  // Reset drill session for new openings
+  const resetDrillSession = useCallback(() => {
+    setAllDrillsCompleted(false)
+    setRemainingDrills([])
+    setCompletedDrills([])
+    setCurrentDrill(null)
+    setCurrentDrillGame(null)
+    setCurrentDrillIndex(0)
+    setAnalysisEnabled(false)
+    setContinueAnalyzingMode(false)
+    setShowPerformanceModal(false)
+    setShowFinalModal(false)
+    setCurrentPerformanceData(null)
+    setWaitingForMaiaResponse(false)
+  }, [])
+
   // Calculate overall performance data
   const overallPerformanceData = useMemo((): OverallPerformanceData => {
     if (completedDrills.length === 0) {
@@ -722,6 +757,7 @@ export const useOpeningDrillController = (
     completeDrill,
     moveToNextDrill,
     continueAnalyzing,
+    continueAnalyzingFromFinal,
 
     // Analysis
     analysisEnabled,
@@ -733,5 +769,11 @@ export const useOpeningDrillController = (
     currentPerformanceData,
     overallPerformanceData,
     setShowFinalModal,
+
+    // Reset drill session
+    resetDrillSession,
+
+    // Check if all drills are completed
+    areAllDrillsCompleted,
   }
 }

src/pages/openings/index.tsx

@@ -258,8 +258,9 @@ const OpeningsPage: NextPage = () => {
   )
 
   const handleChangeSelections = useCallback(() => {
+    controller.resetDrillSession()
     setShowSelectionModal(true)
-  }, [])
+  }, [controller])
 
   // No-op function for disabling orientation changes
   const noOpSetOrientation = useCallback((_orientation: 'white' | 'black') => {
@@ -486,14 +487,15 @@ const OpeningsPage: NextPage = () => {
                   />
                 </div>
               </div>
-              {controller.remainingDrills.length > 1 && (
-                <button
-                  onClick={controller.moveToNextDrill}
-                  className="rounded bg-human-4 px-4 py-2 text-sm font-medium transition-colors hover:bg-human-4/80"
-                >
-                  Next Drill
-                </button>
-              )}
+              {controller.remainingDrills.length > 1 &&
+                !controller.areAllDrillsCompleted && (
+                  <button
+                    onClick={controller.moveToNextDrill}
+                    className="rounded bg-human-4 px-4 py-2 text-sm font-medium transition-colors hover:bg-human-4/80"
+                  >
+                    Next Drill
+                  </button>
+                )}
             </div>
           )}
         </div>
@@ -571,14 +573,15 @@ const OpeningsPage: NextPage = () => {
           >
             Change Openings
           </button>
-          {controller.remainingDrills.length > 1 && (
-            <button
-              onClick={controller.moveToNextDrill}
-              className="rounded bg-human-4 px-4 py-2 text-sm font-medium"
-            >
-              Next
-            </button>
-          )}
+          {controller.remainingDrills.length > 1 &&
+            !controller.areAllDrillsCompleted && (
+              <button
+                onClick={controller.moveToNextDrill}
+                className="rounded bg-human-4 px-4 py-2 text-sm font-medium"
+              >
+                Next
+              </button>
+            )}
         </div>
 
         {/* Mobile progress */}
@@ -644,7 +647,7 @@ const OpeningsPage: NextPage = () => {
             performanceData={controller.overallPerformanceData}
             onContinueAnalyzing={controller.continueAnalyzingFromFinal}
             onSelectNewOpenings={() => {
-              controller.setShowFinalModal(false)
+              controller.resetDrillSession()
               setShowSelectionModal(true)
             }}
           />