Merge pull request #99 from CSSLab/dev

Minor bug fixes + optimization

Author: kevinjosethomas

src/components/Common/Header.tsx

@@ -226,7 +226,7 @@ export const Header: React.FC = () => {
         <span className="material-symbols-outlined text-3xl">menu</span>
       </button>
       {showMenu && (
-        <div className="fixed left-0 top-0 z-[10101] flex h-screen w-screen flex-col items-start justify-between bg-backdrop py-4">
+        <div className="fixed left-0 top-0 z-40 flex h-screen w-screen flex-col items-start justify-between bg-backdrop py-4">
           <div className="flex w-full flex-row justify-between px-4">
             <Link href="/" passHref>
               <div className="flex flex-row items-center gap-2">

src/components/Common/ModalContainer.tsx

@@ -29,7 +29,7 @@ export const ModalContainer: React.FC<Props> = ({
       exit={{ opacity: 0 }}
       transition={{ duration: 0.1 }}
       onClick={dismiss}
-      className={`fixed bottom-0 top-0 z-[10102] flex w-screen items-center justify-center bg-backdrop/90 text-primary ${className}`}
+      className={`fixed bottom-0 top-0 z-50 flex w-screen items-center justify-center bg-backdrop/90 text-primary ${className}`}
     >
       {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */}
       <motion.div

src/components/Common/MoveIcons.tsx

@@ -88,7 +88,7 @@ export const ExcellentIcon: React.FC<IconProps> = ({
         className={`ml-1 flex select-none items-center justify-center rounded-full bg-green-500 font-bold text-white ${sizeClasses} ${className}`}
         data-tooltip-id={id}
       >
-        !!
+        !
       </div>
       <Tooltip
         id={id}

src/components/Openings/OpeningSelectionModal.tsx

@@ -478,7 +478,7 @@ const PreviewPanel: React.FC<{
         <p className="text-xs text-secondary">Configure your drill settings</p>
       </div>
 
-      <div className="flex flex-1 flex-col gap-4 overflow-hidden p-2 md:p-3">
+      <div className="flex flex-1 flex-col gap-4 overflow-hidden p-3 md:p-4">
         <div className="flex flex-col gap-1">
           <p className="text-sm font-medium md:text-base">
             {previewOpening.name}
@@ -629,10 +629,10 @@ const SelectedPanel: React.FC<{
                   }
                 }}
                 onClick={() => removeSelection(selection.id)}
-                className="group flex cursor-pointer items-center justify-between border-b border-white/5 p-3 transition-colors hover:bg-human-2/10 md:p-4"
+                className="group flex cursor-pointer items-center justify-between border-b border-white/5 p-3 transition-colors hover:bg-human-2/10 md:px-4"
               >
                 <div className="min-w-0 flex-1">
-                  <div className="flex items-center gap-3">
+                  <div className="flex items-center gap-2">
                     <div className="relative h-4 w-4 flex-shrink-0 md:h-5 md:w-5">
                       <Image
                         src={
@@ -644,22 +644,15 @@ const SelectedPanel: React.FC<{
                         alt={`${selection.playerColor} king`}
                       />
                     </div>
-                    <div className="flex min-w-0 flex-1 flex-col">
+                    <div className="flex min-w-0 flex-1 flex-row items-center gap-2">
                       <span className="truncate text-xs font-medium text-primary md:text-sm">
                         {selection.opening.name}
                       </span>
-                      <div className="flex items-center gap-1 text-xs text-secondary">
-                        {selection.variation && (
-                          <span className="truncate">
-                            {selection.variation.name} •
-                          </span>
-                        )}
-                        <span>
-                          v. Maia{' '}
-                          {selection.maiaVersion.replace('maia_kdd_', '')} •
+                      {selection.variation && (
+                        <span className="mt-1 truncate text-xxs text-secondary">
+                          {selection.variation.name}
                         </span>
-                        <span>{selection.targetMoveNumber} moves</span>
-                      </div>
+                      )}
                     </div>
                   </div>
                 </div>
@@ -708,14 +701,14 @@ const SelectedPanel: React.FC<{
         <input
           type="range"
           min="5"
-          max="30"
+          max="20"
           value={targetMoveNumber}
           onChange={(e) => setTargetMoveNumber(parseInt(e.target.value) || 10)}
           className="w-full accent-human-4"
         />
         <div className="mt-1 flex justify-between text-xs text-secondary">
           <span>5</span>
-          <span>30</span>
+          <span>20</span>
         </div>
       </div>
 
@@ -727,14 +720,14 @@ const SelectedPanel: React.FC<{
         <input
           type="range"
           min="1"
-          max="50"
+          max="20"
           value={drillCount}
           onChange={(e) => setDrillCount(parseInt(e.target.value) || 5)}
           className="w-full accent-human-4"
         />
         <div className="mt-1 flex justify-between text-xs text-secondary">
           <span>1</span>
-          <span>50</span>
+          <span>20</span>
         </div>
         <p className="mt-1 text-xs text-secondary">
           {drillCount <= selections.length
@@ -814,6 +807,17 @@ export const OpeningSelectionModal: React.FC<Props> = ({
     }
   }, [hasTrackedModalOpen, initialSelections.length])
 
+  // Update the ID to reflect the new settings
+  useEffect(() => {
+    setSelections((prevSelections) =>
+      prevSelections.map((selection) => ({
+        ...selection,
+        maiaVersion: selectedMaiaVersion.id,
+        targetMoveNumber,
+      })),
+    )
+  }, [selectedMaiaVersion.id, targetMoveNumber])
+
   const handleStartTour = () => {
     startTour(tourConfigs.openingDrill.id, tourConfigs.openingDrill.steps, true)
   }

src/contexts/TourContext/TourContext.tsx

@@ -631,7 +631,7 @@ export const TourProvider: React.FC<TourProviderProps> = ({ children }) => {
               backgroundColor: 'rgb(38, 36, 45)', // background-1 to match tooltip
               overlayColor: 'rgba(0, 0, 0, 0.5)',
               spotlightShadow: '0 0 15px rgba(159, 79, 68, 0.3)',
-              zIndex: 10000,
+              zIndex: 30,
             },
             spotlight: {
               borderRadius: '4px',

src/hooks/useAnalysisController/useAnalysisController.ts

@@ -1,14 +1,15 @@
 import { Chess } from 'chess.ts'
-import { useContext, useEffect, useMemo, useState } from 'react'
+import { Key, useContext, useEffect, useMemo, useState } from 'react'
 
-import { useTreeController, useLocalStorage } from '..'
 import { AnalyzedGame } from 'src/types'
+import type { DrawShape } from 'chessground/draw'
 import { MAIA_MODELS } from 'src/constants/common'
-import { generateColorSanMapping, calculateBlunderMeter } from './utils'
+import { useTreeController, useLocalStorage } from '..'
 import { useEngineAnalysis } from './useEngineAnalysis'
-import { useMoveRecommendations } from './useMoveRecommendations'
 import { useBoardDescription } from './useBoardDescription'
+import { useMoveRecommendations } from './useMoveRecommendations'
 import { MaiaEngineContext } from 'src/contexts/MaiaEngineContext'
+import { generateColorSanMapping, calculateBlunderMeter } from './utils'
 import { StockfishEngineContext } from 'src/contexts/StockfishEngineContext'
 
 export const useAnalysisController = (
@@ -119,6 +120,37 @@ export const useAnalysisController = (
     return undefined
   }, [currentMove, controller.currentNode])
 
+  const arrows = useMemo(() => {
+    if (!controller.currentNode) return []
+
+    const arrows: DrawShape[] = []
+
+    if (moveEvaluation?.maia) {
+      const bestMove = Object.entries(moveEvaluation.maia.policy)[0]
+      if (bestMove) {
+        arrows.push({
+          brush: 'red',
+          orig: bestMove[0].slice(0, 2) as Key,
+          dest: bestMove[0].slice(2, 4) as Key,
+        } as DrawShape)
+      }
+    }
+
+    if (moveEvaluation?.stockfish) {
+      const bestMove = Object.entries(moveEvaluation.stockfish.cp_vec)[0]
+      if (bestMove) {
+        arrows.push({
+          brush: 'blue',
+          orig: bestMove[0].slice(0, 2) as Key,
+          dest: bestMove[0].slice(2, 4) as Key,
+          modifiers: { lineWidth: 8 },
+        } as DrawShape)
+      }
+    }
+
+    return arrows
+  }, [controller.currentNode, moveEvaluation])
+
   return {
     gameTree: controller.gameTree,
     currentNode: controller.currentNode,
@@ -144,6 +176,7 @@ export const useAnalysisController = (
     moveMap,
     blunderMeter,
     boardDescription,
+    arrows,
     stockfish: stockfish,
     maia: maia,
   }

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

@@ -308,7 +308,6 @@ const Analysis: React.FC<Props> = ({
   const { width } = useContext(WindowSizeContext)
   const isMobile = useMemo(() => width > 0 && width <= 670, [width])
   const [hoverArrow, setHoverArrow] = useState<DrawShape | null>(null)
-  const [arrows, setArrows] = useState<DrawShape[]>([])
   const [currentSquare, setCurrentSquare] = useState<Key | null>(null)
   const [promotionFromTo, setPromotionFromTo] = useState<
     [string, string] | null
@@ -356,41 +355,6 @@ const Analysis: React.FC<Props> = ({
     }
   }, [analyzedGame, router])
 
-  useEffect(() => {
-    const arr = []
-
-    if (controller.moveEvaluation?.maia) {
-      const maia = Object.entries(controller.moveEvaluation?.maia?.policy)[0]
-      if (maia) {
-        arr.push({
-          brush: 'red',
-          orig: maia[0].slice(0, 2) as Key,
-          dest: maia[0].slice(2, 4) as Key,
-        } as DrawShape)
-      }
-    }
-
-    if (controller.moveEvaluation?.stockfish) {
-      const stockfish = Object.entries(
-        controller.moveEvaluation?.stockfish.cp_vec,
-      )[0]
-      if (stockfish) {
-        arr.push({
-          brush: 'blue',
-          orig: stockfish[0].slice(0, 2) as Key,
-          dest: stockfish[0].slice(2, 4) as Key,
-          modifiers: { lineWidth: 8 },
-        })
-      }
-    }
-
-    setArrows(arr)
-  }, [
-    controller.moveEvaluation,
-    controller.currentNode,
-    controller.orientation,
-  ])
-
   const hover = (move?: string) => {
     if (move) {
       setHoverArrow({
@@ -672,7 +636,11 @@ const Analysis: React.FC<Props> = ({
                 game={analyzedGame}
                 availableMoves={controller.availableMoves}
                 setCurrentSquare={setCurrentSquare}
-                shapes={hoverArrow ? [...arrows, hoverArrow] : [...arrows]}
+                shapes={
+                  hoverArrow
+                    ? [...controller.arrows, hoverArrow]
+                    : [...controller.arrows]
+                }
                 currentNode={controller.currentNode as GameNode}
                 orientation={controller.orientation}
                 onPlayerMakeMove={onPlayerMakeMove}
@@ -919,7 +887,11 @@ const Analysis: React.FC<Props> = ({
                 game={analyzedGame}
                 availableMoves={controller.availableMoves}
                 setCurrentSquare={setCurrentSquare}
-                shapes={hoverArrow ? [...arrows, hoverArrow] : [...arrows]}
+                shapes={
+                  hoverArrow
+                    ? [...controller.arrows, hoverArrow]
+                    : [...controller.arrows]
+                }
                 currentNode={controller.currentNode as GameNode}
                 orientation={controller.orientation}
                 onPlayerMakeMove={onPlayerMakeMove}

src/pages/openings/index.tsx

@@ -74,7 +74,6 @@ const OpeningsPage: NextPage = () => {
   const [promotionFromTo, setPromotionFromTo] = useState<
     [string, string] | null
   >(null)
-  const [arrows, setArrows] = useState<DrawShape[]>([])
   const [hoverArrow, setHoverArrow] = useState<DrawShape | null>(null)
 
   useEffect(() => {
@@ -85,7 +84,6 @@ const OpeningsPage: NextPage = () => {
 
   useEffect(() => {
     return () => {
-      setArrows([])
       setHoverArrow(null)
       setPromotionFromTo(null)
     }
@@ -207,13 +205,6 @@ const OpeningsPage: NextPage = () => {
     treeController.currentNode?.analysis?.stockfish,
   ])
 
-  // Set arrows with deferred updates to prevent blocking UI
-  useEffect(() => {
-    deferHeavyOperation(() => {
-      setArrows(calculatedArrows)
-    })
-  }, [calculatedArrows, deferHeavyOperation])
-
   // Clear hover arrow when node changes
   useEffect(() => {
     setHoverArrow(null)
@@ -762,7 +753,15 @@ const OpeningsPage: NextPage = () => {
                 availableMoves={availableMoves}
                 onPlayerMakeMove={onPlayerMakeMove}
                 onSelectSquare={onSelectSquare}
-                shapes={hoverArrow ? [...arrows, hoverArrow] : [...arrows]}
+                shapes={
+                  controller.analysisEnabled
+                    ? hoverArrow
+                      ? [...analysisController.arrows, hoverArrow]
+                      : [...analysisController.arrows]
+                    : hoverArrow
+                      ? [hoverArrow]
+                      : []
+                }
               />
               {promotionFromTo && (
                 <PromotionOverlay
@@ -919,7 +918,15 @@ const OpeningsPage: NextPage = () => {
               availableMoves={availableMoves}
               onPlayerMakeMove={onPlayerMakeMove}
               onSelectSquare={onSelectSquare}
-              shapes={hoverArrow ? [...arrows, hoverArrow] : [...arrows]}
+              shapes={
+                controller.analysisEnabled
+                  ? hoverArrow
+                    ? [...analysisController.arrows, hoverArrow]
+                    : [...analysisController.arrows]
+                  : hoverArrow
+                    ? [hoverArrow]
+                    : []
+              }
             />
             {promotionFromTo && (
               <PromotionOverlay