feat: refactor OpeningDrillAnalysis to use parent hover functions and improve hover handling; update styles in OpeningDrillSidebar and OpeningSelectionModal for better layout

Author: kevinjosethomas

src/components/Openings/OpeningDrillAnalysis.tsx

@@ -15,6 +15,8 @@ interface Props {
   playerColor: 'white' | 'black'
   maiaVersion: string
   analysisController: any // Analysis controller passed from parent
+  hover: (move?: string) => void
+  setHoverArrow: React.Dispatch<React.SetStateAction<DrawShape | null>>
 }
 
 export const OpeningDrillAnalysis: React.FC<Props> = ({
@@ -25,8 +27,9 @@ export const OpeningDrillAnalysis: React.FC<Props> = ({
   playerColor,
   maiaVersion,
   analysisController,
+  hover: parentHover,
+  setHoverArrow: parentSetHoverArrow,
 }) => {
-  const [hoverArrow, setHoverArrow] = useState<DrawShape | null>(null)
   const toastId = useRef<string | null>(null)
 
   // Toast notifications for Maia model status
@@ -54,17 +57,12 @@ export const OpeningDrillAnalysis: React.FC<Props> = ({
   const hover = useCallback(
     (move?: string) => {
       if (move && analysisEnabled) {
-        setHoverArrow({
-          orig: move.slice(0, 2) as Key,
-          dest: move.slice(2, 4) as Key,
-          brush: 'green',
-          modifiers: { lineWidth: 10 },
-        })
+        parentHover(move)
       } else {
-        setHoverArrow(null)
+        parentHover()
       }
     },
-    [analysisEnabled],
+    [analysisEnabled, parentHover],
   )
 
   const makeMove = useCallback(
@@ -86,27 +84,23 @@ export const OpeningDrillAnalysis: React.FC<Props> = ({
           (moveAttempt.promotion ? moveAttempt.promotion : '')
         const san = moveAttempt.san
 
-        // Check if this move already exists as a child
-        const existingChild = currentNode.children.find(
-          (child: any) => child.move === moveString,
-        )
-
-        if (existingChild) {
-          // Move already exists, just navigate to it
-          analysisController.goToNode(existingChild)
-        } else if (currentNode.mainChild?.move === moveString) {
-          // This is the main child move
+        // For opening drills, always update the main line instead of creating variations
+        // If the move already exists as the main child, just navigate to it
+        if (currentNode.mainChild?.move === moveString) {
           analysisController.goToNode(currentNode.mainChild)
         } else {
-          // Create new variation
-          const newVariation = gameTree.addVariation(
+          // Remove any existing children first to replace the main line from this point forward
+          currentNode.removeAllChildren()
+
+          // Create new main line continuation
+          const newNode = gameTree.addMainMove(
             currentNode,
             newFen,
             moveString,
             san,
             analysisController.currentMaiaModel,
           )
-          analysisController.goToNode(newVariation)
+          analysisController.goToNode(newNode)
         }
       }
     },
@@ -225,7 +219,7 @@ export const OpeningDrillAnalysis: React.FC<Props> = ({
                 analysisEnabled ? analysisController.colorSanMapping : {}
               }
               setHoverArrow={
-                analysisEnabled ? setHoverArrow : mockSetHoverArrow
+                analysisEnabled ? parentSetHoverArrow : mockSetHoverArrow
               }
             />
           </div>

src/components/Openings/OpeningDrillSidebar.tsx

@@ -60,7 +60,7 @@ export const OpeningDrillSidebar: React.FC<Props> = ({
   return (
     <div className="flex h-[85vh] w-72 min-w-60 max-w-72 flex-col gap-2 overflow-hidden 2xl:min-w-72">
       <GameInfo title="Drill Openings" icon="school" type="analysis">
-        <div className="space-y-2">
+        <div className="flex flex-col gap-2">
           <div className="min-h-[30px]">
             <p className="text-sm text-secondary">
               Current Opening:{' '}
@@ -143,13 +143,13 @@ export const OpeningDrillSidebar: React.FC<Props> = ({
                     <div className="flex items-center gap-1 text-xs text-secondary">
                       {selection.variation && (
                         <>
-                          <span className="truncate">
+                          <span className="truncate whitespace-nowrap">
                             {selection.variation.name}
                           </span>
                           <span>•</span>
                         </>
                       )}
-                      <span>
+                      <span className="whitespace-nowrap">
                         v. Maia {selection.maiaVersion.replace('maia_kdd_', '')}
                       </span>
                     </div>

src/components/Openings/OpeningSelectionModal.tsx

@@ -117,9 +117,9 @@ export const OpeningSelectionModal: React.FC<Props> = ({
   return (
     <ModalContainer dismiss={onClose}>
       <motion.div
-        initial={{ opacity: 0, scale: 0.95 }}
-        animate={{ opacity: 1, scale: 1 }}
-        exit={{ opacity: 0, scale: 0.95 }}
+        initial={{ opacity: 0 }}
+        animate={{ opacity: 1 }}
+        exit={{ opacity: 0 }}
         className="relative flex h-[90vh] max-h-[800px] w-[98vw] max-w-[1400px] rounded-lg bg-background-1 shadow-2xl"
       >
         {/* Close Button - Top Right of Modal */}
@@ -156,15 +156,15 @@ export const OpeningSelectionModal: React.FC<Props> = ({
           </div>
 
           <div
-            className="flex-1 overflow-y-auto p-4"
+            className="red-scrollbar flex flex-1 flex-col gap-1 overflow-y-auto p-4"
             style={{ userSelect: 'none' }}
           >
             {filteredOpenings.map((opening) => (
-              <div key={opening.id} className="mb-4">
+              <div key={opening.id} className="flex flex-col">
                 <div
                   role="button"
                   tabIndex={0}
-                  className={`cursor-pointer rounded p-3 transition-colors ${
+                  className={`mb-2 cursor-pointer rounded p-3 transition-colors ${
                     previewOpening.id === opening.id && !previewVariation
                       ? 'bg-human-2/20'
                       : 'hover:bg-human-2/10'
@@ -192,7 +192,6 @@ export const OpeningSelectionModal: React.FC<Props> = ({
                     </div>
                   </div>
                 </div>
-
                 {opening.variations.map((variation) => (
                   <div
                     key={variation.id}
@@ -252,7 +251,7 @@ export const OpeningSelectionModal: React.FC<Props> = ({
           </div>
 
           {/* Selection Controls */}
-          <div className="space-y-4 border-t border-white/10 p-4">
+          <div className="flex flex-col gap-4 border-t border-white/10 p-4">
             {/* Color Selection */}
             <div>
               <p className="mb-2 text-sm font-medium">Play as:</p>
@@ -290,8 +289,10 @@ export const OpeningSelectionModal: React.FC<Props> = ({
                 onChange={(e) => {
                   const version = MAIA_VERSIONS.find(
                     (v) => v.id === e.target.value,
-                  )!
-                  setSelectedMaiaVersion(version)
+                  )
+                  if (version) {
+                    setSelectedMaiaVersion(version)
+                  }
                 }}
                 className="w-full rounded bg-background-2 p-2 text-sm focus:outline-none"
               >
@@ -330,7 +331,7 @@ export const OpeningSelectionModal: React.FC<Props> = ({
                 drilling.
               </p>
             ) : (
-              <div className="space-y-3">
+              <div className="flex flex-col">
                 {selections.map((selection) => (
                   <div
                     key={selection.id}
@@ -384,11 +385,11 @@ export const OpeningSelectionModal: React.FC<Props> = ({
             )}
           </div>
 
-          <div className="border-t border-white/10 p-4">
+          <div className="p-4">
             <button
               onClick={handleStartDrilling}
               disabled={selections.length === 0}
-              className="w-full rounded bg-human-4 py-3 font-medium transition-colors hover:bg-human-4/80 disabled:cursor-not-allowed disabled:opacity-50"
+              className="w-full rounded bg-human-4 py-2 text-sm font-medium transition-colors hover:bg-human-4/80 disabled:cursor-not-allowed disabled:opacity-50"
             >
               Start Drilling ({selections.length} opening
               {selections.length !== 1 ? 's' : ''})

src/pages/openings/index.tsx

@@ -18,6 +18,7 @@ import {
   BoardController,
   PromotionOverlay,
   PlayerInfo,
+  DownloadModelModal,
 } from 'src/components'
 import {
   useOpeningDrillController,
@@ -187,12 +188,26 @@ const OpeningsPage: NextPage = () => {
     setHoverArrow(null)
   }, [controller.currentNode])
 
-  // Show selection modal when no selections are made
+  // Hover function for analysis components
+  const hover = useCallback((move?: string) => {
+    if (move) {
+      setHoverArrow({
+        orig: move.slice(0, 2) as Key,
+        dest: move.slice(2, 4) as Key,
+        brush: 'green',
+        modifiers: { lineWidth: 10 },
+      })
+    } else {
+      setHoverArrow(null)
+    }
+  }, [])
+
+  // Show selection modal when no selections are made and Maia model is ready
   useEffect(() => {
-    if (selections.length === 0) {
+    if (selections.length === 0 && analysisController.maiaStatus === 'ready') {
       setShowSelectionModal(true)
     }
-  }, [selections.length])
+  }, [selections.length, analysisController.maiaStatus])
 
   const handleCompleteSelection = useCallback(
     (newSelections: OpeningSelection[]) => {
@@ -313,6 +328,31 @@ const OpeningsPage: NextPage = () => {
     }
   }, [controller.currentSelection, controller.orientation])
 
+  // Show download modal if Maia model needs to be downloaded
+  if (
+    analysisController.maiaStatus === 'no-cache' ||
+    analysisController.maiaStatus === 'downloading'
+  ) {
+    return (
+      <>
+        <Head>
+          <title>Opening Drills – Maia Chess</title>
+          <meta
+            name="description"
+            content="Practice chess openings against Maia"
+          />
+        </Head>
+        <AnimatePresence>
+          <DownloadModelModal
+            progress={analysisController.maiaProgress}
+            download={analysisController.downloadMaia}
+          />
+        </AnimatePresence>
+      </>
+    )
+  }
+
+  // Show selection modal when no selections are made (after model is ready)
   if (selections.length === 0 || showSelectionModal) {
     return (
       <>
@@ -417,6 +457,8 @@ const OpeningsPage: NextPage = () => {
             controller.currentSelection?.maiaVersion || 'maia_kdd_1500'
           }
           analysisController={analysisController}
+          hover={hover}
+          setHoverArrow={setHoverArrow}
         />
       </div>
     </div>