feat: make move map moves clickable + improve opacity

Author: kevinjosethomas

src/components/Analysis/MoveMap.tsx

@@ -32,6 +32,7 @@ interface Props {
   moveMap?: MoveMapEntry[]
   colorSanMapping: ColorSanMapping
   setHoverArrow: React.Dispatch<React.SetStateAction<DrawShape | null>>
+  makeMove: (move: string) => void
 }
 
 // Helper function to convert hex color to rgba with alpha
@@ -50,6 +51,7 @@ export const MoveMap: React.FC<Props> = ({
   moveMap,
   colorSanMapping,
   setHoverArrow,
+  makeMove,
 }: Props) => {
   const { isMobile, width } = useContext(WindowSizeContext)
   const [hoveredMove, setHoveredMove] = useState<string | null>(null)
@@ -146,7 +148,6 @@ export const MoveMap: React.FC<Props> = ({
     setMousePosition(null)
   }
 
-  // Handle mouse leaving the entire component
   const onContainerMouseLeave = () => {
     onMouseLeave()
   }
@@ -262,7 +263,8 @@ export const MoveMap: React.FC<Props> = ({
               />
             </YAxis>
             {moveMap?.map((entry, index) => {
-              const opacity = entry.opacity ?? 1
+              // Set minimum opacity to 0.5 to ensure visibility
+              const opacity = Math.max(entry.opacity ?? 1, 0.5)
               const size = entry.size ?? (isMobile ? 8 : 10)
               const baseColor = colorSanMapping[entry.move]?.color ?? '#fff'
               const fillColor = baseColor.startsWith('#')
@@ -283,6 +285,7 @@ export const MoveMap: React.FC<Props> = ({
                       onMouseEnter(entry.move, entry, event)
                     }
                     onMouseLeave={onMouseLeave}
+                    onMouseDown={() => makeMove(entry.move)}
                     style={{ cursor: 'pointer' }}
                   />
                 </Scatter>

src/components/Openings/OpeningDrillAnalysis.tsx

@@ -17,6 +17,7 @@ interface Props {
   analysisController: any // Analysis controller passed from parent
   hover: (move?: string) => void
   setHoverArrow: React.Dispatch<React.SetStateAction<DrawShape | null>>
+  makeMove: (move: string) => void
 }
 
 export const OpeningDrillAnalysis: React.FC<Props> = ({
@@ -29,6 +30,7 @@ export const OpeningDrillAnalysis: React.FC<Props> = ({
   analysisController,
   hover: parentHover,
   setHoverArrow: parentSetHoverArrow,
+  makeMove: parentMakeMove,
 }) => {
   const toastId = useRef<string | null>(null)
 
@@ -67,44 +69,9 @@ export const OpeningDrillAnalysis: React.FC<Props> = ({
 
   const makeMove = useCallback(
     (move: string) => {
-      if (!analysisEnabled || !currentNode || !gameTree) return
-
-      const chess = new Chess(currentNode.fen)
-      const moveAttempt = chess.move({
-        from: move.slice(0, 2),
-        to: move.slice(2, 4),
-        promotion: move[4] ? (move[4] as PieceSymbol) : undefined,
-      })
-
-      if (moveAttempt) {
-        const newFen = chess.fen()
-        const moveString =
-          moveAttempt.from +
-          moveAttempt.to +
-          (moveAttempt.promotion ? moveAttempt.promotion : '')
-        const san = moveAttempt.san
-
-        // 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 {
-          // 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(newNode)
-        }
-      }
+      parentMakeMove(move)
     },
-    [analysisEnabled, currentNode, gameTree, analysisController],
+    [parentMakeMove],
   )
 
   // No-op handlers for blurred analysis components when disabled
@@ -232,6 +199,7 @@ export const OpeningDrillAnalysis: React.FC<Props> = ({
               setHoverArrow={
                 analysisEnabled ? parentSetHoverArrow : mockSetHoverArrow
               }
+              makeMove={analysisEnabled ? makeMove : mockMakeMove}
             />
           </div>
           <BlunderMeter
@@ -340,6 +308,7 @@ export const OpeningDrillAnalysis: React.FC<Props> = ({
               setHoverArrow={
                 analysisEnabled ? parentSetHoverArrow : mockSetHoverArrow
               }
+              makeMove={analysisEnabled ? makeMove : mockMakeMove}
             />
           </div>
           {!analysisEnabled && (

src/pages/analysis/[...id].tsx

@@ -728,6 +728,7 @@ const Analysis: React.FC<Props> = ({
                   moveMap={controller.moveMap}
                   colorSanMapping={controller.colorSanMapping}
                   setHoverArrow={setHoverArrow}
+                  makeMove={makeMove}
                 />
               </div>
               <BlunderMeter
@@ -781,6 +782,7 @@ const Analysis: React.FC<Props> = ({
                   moveMap={controller.moveMap}
                   colorSanMapping={controller.colorSanMapping}
                   setHoverArrow={setHoverArrow}
+                  makeMove={makeMove}
                 />
               </div>
             </div>
@@ -943,6 +945,7 @@ const Analysis: React.FC<Props> = ({
                 moveMap={controller.moveMap}
                 colorSanMapping={controller.colorSanMapping}
                 setHoverArrow={setHoverArrow}
+                makeMove={makeMove}
               />
             </div>
             <ConfigurableScreens

src/pages/analysis/index.tsx

@@ -1,11 +1,9 @@
 import { NextPage } from 'next'
 import { useRouter } from 'next/router'
-import { useContext, useEffect, useState } from 'react'
-
 import { Loading } from 'src/components'
-import { AnalysisListContext } from 'src/contexts'
-import { useLocalStorage } from 'src/hooks'
 import { getAnalysisGameList } from 'src/api'
+import { AnalysisListContext } from 'src/contexts'
+import { useContext, useEffect, useState } from 'react'
 
 const AnalysisPage: NextPage = () => {
   const { push } = useRouter()

src/pages/openings/index.tsx

@@ -347,6 +347,48 @@ const OpeningsPage: NextPage = () => {
     // No special handling needed for opening drills
   }, [])
 
+  // Make move function for analysis components
+  const makeMove = useCallback(
+    async (move: string) => {
+      if (
+        !controller.analysisEnabled ||
+        !analysisController.currentNode ||
+        !analyzedGame?.tree
+      )
+        return
+
+      const chess = new Chess(analysisController.currentNode.fen)
+      const moveAttempt = chess.move({
+        from: move.slice(0, 2),
+        to: move.slice(2, 4),
+        promotion: move[4] ? (move[4] as PieceSymbol) : undefined,
+      })
+
+      if (moveAttempt) {
+        const newFen = chess.fen()
+        const moveString =
+          moveAttempt.from +
+          moveAttempt.to +
+          (moveAttempt.promotion ? moveAttempt.promotion : '')
+        const san = moveAttempt.san
+
+        if (analysisController.currentNode.mainChild?.move === moveString) {
+          analysisController.goToNode(analysisController.currentNode.mainChild)
+        } else {
+          const newVariation = analyzedGame.tree.addVariation(
+            analysisController.currentNode,
+            newFen,
+            moveString,
+            san,
+            analysisController.currentMaiaModel,
+          )
+          analysisController.goToNode(newVariation)
+        }
+      }
+    },
+    [controller.analysisEnabled, analysisController, analyzedGame],
+  )
+
   // Show download modal if Maia model needs to be downloaded
   if (
     analysisController.maiaStatus === 'no-cache' ||
@@ -542,6 +584,7 @@ const OpeningsPage: NextPage = () => {
             analysisController={analysisController}
             hover={hover}
             setHoverArrow={setHoverArrow}
+            makeMove={makeMove}
           />
         </div>
       </div>

src/pages/train.tsx

@@ -887,6 +887,7 @@ const Train: React.FC<Props> = ({
                     setHoverArrow={
                       showAnalysis ? setHoverArrow : mockSetHoverArrow
                     }
+                    makeMove={showAnalysis ? makeMove : mockMakeMove}
                   />
                 </div>
                 <BlunderMeter
@@ -922,6 +923,7 @@ const Train: React.FC<Props> = ({
                     setHoverArrow={
                       showAnalysis ? setHoverArrow : mockSetHoverArrow
                     }
+                    makeMove={showAnalysis ? makeMove : mockMakeMove}
                   />
                   {!showAnalysis && (
                     <div className="absolute inset-0 z-10 flex items-center justify-center overflow-hidden rounded bg-background-1/80 backdrop-blur-sm">
@@ -1178,6 +1180,7 @@ const Train: React.FC<Props> = ({
                   setHoverArrow={
                     showAnalysis ? setHoverArrow : mockSetHoverArrow
                   }
+                  makeMove={showAnalysis ? makeMove : mockMakeMove}
                 />
                 {!showAnalysis && (
                   <div className="absolute inset-0 z-10 flex items-center justify-center bg-background-1/80 backdrop-blur-sm">