Merge pull request #133 from CSSLab/dev

Bug fixes within move list + openings

Author: kevinjosethomas

src/components/Board/MovesContainer.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable jsx-a11y/no-static-element-interactions */
 /* eslint-disable jsx-a11y/click-events-have-key-events */
-import React, { useContext, useMemo, Fragment, useEffect } from 'react'
+import React, { useContext, useMemo, Fragment, useEffect, useRef } from 'react'
 import { WindowSizeContext } from 'src/contexts'
 import { GameNode, AnalyzedGame, Termination, BaseGame } from 'src/types'
 import { TuringGame } from 'src/types/turing'
@@ -68,6 +68,8 @@ export const MovesContainer: React.FC<Props> = (props) => {
     showVariations = true,
   } = props
   const { isMobile } = useContext(WindowSizeContext)
+  const containerRef = useRef<HTMLDivElement>(null)
+  const currentMoveRef = useRef<HTMLDivElement>(null)
 
   // Helper function to determine if move indicators should be shown
   const shouldShowIndicators = (node: GameNode | null) => {
@@ -114,6 +116,17 @@ export const MovesContainer: React.FC<Props> = (props) => {
     return () => window.removeEventListener('keydown', handleKeyDown)
   }, [baseController.currentNode, baseController.goToNode])
 
+  // Auto-scroll to current move
+  useEffect(() => {
+    if (currentMoveRef.current && containerRef.current) {
+      currentMoveRef.current.scrollIntoView({
+        behavior: 'smooth',
+        block: 'nearest',
+        inline: 'nearest',
+      })
+    }
+  }, [baseController.currentNode])
+
   const moves = useMemo(() => {
     const nodes = mainLineNodes.slice(1)
     const rows: (GameNode | null)[][] = []
@@ -187,7 +200,7 @@ export const MovesContainer: React.FC<Props> = (props) => {
 
   if (isMobile) {
     return (
-      <div className="w-full overflow-x-auto px-2">
+      <div ref={containerRef} className="w-full overflow-x-auto px-2">
         <div className="flex flex-row items-center gap-1">
           {mobileMovePairs.map((pair, pairIndex) => (
             <React.Fragment key={pairIndex}>
@@ -196,6 +209,11 @@ export const MovesContainer: React.FC<Props> = (props) => {
               </div>
               {pair.whiteMove && (
                 <div
+                  ref={
+                    baseController.currentNode === pair.whiteMove
+                      ? currentMoveRef
+                      : null
+                  }
                   onClick={() =>
                     baseController.goToNode(pair.whiteMove as GameNode)
                   }
@@ -224,6 +242,11 @@ export const MovesContainer: React.FC<Props> = (props) => {
               )}
               {pair.blackMove && (
                 <div
+                  ref={
+                    baseController.currentNode === pair.blackMove
+                      ? currentMoveRef
+                      : null
+                  }
                   onClick={() =>
                     baseController.goToNode(pair.blackMove as GameNode)
                   }
@@ -272,14 +295,20 @@ export const MovesContainer: React.FC<Props> = (props) => {
   }
 
   return (
-    <div className="red-scrollbar grid h-48 auto-rows-min grid-cols-5 overflow-y-auto overflow-x-hidden whitespace-nowrap rounded-sm bg-background-1/60 md:h-full md:w-full">
+    <div
+      ref={containerRef}
+      className="red-scrollbar grid h-48 auto-rows-min grid-cols-5 overflow-y-auto overflow-x-hidden whitespace-nowrap rounded-sm bg-background-1/60 md:h-full md:w-full"
+    >
       {moves.map(([whiteNode, blackNode], index) => {
         return (
           <>
             <span className="flex h-7 items-center justify-center bg-background-2 text-sm text-secondary">
               {(whiteNode || blackNode)?.moveNumber}
             </span>
             <div
+              ref={
+                baseController.currentNode === whiteNode ? currentMoveRef : null
+              }
               onClick={() => {
                 if (whiteNode) baseController.goToNode(whiteNode)
               }}
@@ -312,6 +341,9 @@ export const MovesContainer: React.FC<Props> = (props) => {
               />
             ) : null}
             <div
+              ref={
+                baseController.currentNode === blackNode ? currentMoveRef : null
+              }
               onClick={() => {
                 if (blackNode) baseController.goToNode(blackNode)
               }}

src/components/Home/Sections/AnalysisSection.tsx

@@ -70,7 +70,6 @@ const AnalysisChessboard = ({ forceKey }: { forceKey?: number }) => {
       ref={containerRef}
       className="relative w-full"
       style={{
-        transform: 'translateZ(0)',
         aspectRatio: '1/1',
       }}
     >
@@ -129,16 +128,12 @@ export const AnalysisSection = ({ id }: AnalysisSectionProps) => {
   })
 
   const [renderKey, setRenderKey] = useState(0)
-  const [windowSize, setWindowSize] = useState({ width: 0, height: 0 })
+
   const [currentMaiaModel, setCurrentMaiaModel] = useState('maia_kdd_1500')
   const [hoverArrow, setHoverArrow] = useState<DrawShape | null>(null)
 
   useEffect(() => {
     const handleResize = () => {
-      setWindowSize({
-        width: window.innerWidth,
-        height: window.innerHeight,
-      })
       setRenderKey((prev) => prev + 1)
     }
 
@@ -239,20 +234,8 @@ export const AnalysisSection = ({ id }: AnalysisSectionProps) => {
                     <div className="w-full rounded-t-sm bg-background-1/60 p-2 text-left text-sm font-medium text-primary/80">
                       Spassky, Boris V.
                     </div>
-                    <div
-                      className="relative w-full"
-                      style={{
-                        aspectRatio: '1/1',
-                        transform: 'translateZ(0)',
-                      }}
-                    >
-                      <div
-                        className="h-full w-full"
-                        style={{
-                          position: 'relative',
-                          transform: 'translateZ(0)',
-                        }}
-                      >
+                    <div className="relative aspect-square w-full">
+                      <div className="aspect-square h-full w-full">
                         <AnalysisChessboard forceKey={renderKey} />
                       </div>
                     </div>

src/components/Openings/DrillPerformanceModal.tsx

@@ -375,7 +375,7 @@ const CustomTooltip: React.FC<{
                   : 'text-yellow-400'
             }`}
           >
-            {data.classification} {data.isPlayerMove ? '(You)' : '(Maia)'}
+            {data.classification}
           </p>
         )}
     </div>
@@ -390,13 +390,20 @@ const EvaluationChart: React.FC<{
   onHoverMove?: (moveIndex: number) => void
   playerColor: 'white' | 'black'
   drill: DrillPerformanceData['drill']
+  gameNodesMap: Map<string, GameNode>
+  getChartClassification: (
+    analysis: MoveAnalysis,
+    gameNodesMap: Map<string, GameNode>,
+  ) => 'excellent' | 'good' | 'inaccuracy' | 'mistake' | 'blunder'
 }> = ({
   evaluationChart,
   moveAnalyses,
   currentMoveIndex = -1,
   onHoverMove,
   playerColor,
   drill,
+  gameNodesMap,
+  getChartClassification,
 }) => {
   if (evaluationChart.length === 0) {
     return (
@@ -406,11 +413,6 @@ const EvaluationChart: React.FC<{
     )
   }
 
-  // Helper function to get move classification (use analysis data for compatibility)
-  const getChartClassification = (analysis: MoveAnalysis): string => {
-    return analysis.classification || ''
-  }
-
   // Generate move numbers for chartData - create pairs first then extract chart data
   const movePairs = (() => {
     const pairs: Array<{
@@ -486,7 +488,7 @@ const EvaluationChart: React.FC<{
     }
 
     const dynamicClassification = moveAnalysis
-      ? getChartClassification(moveAnalysis)
+      ? getChartClassification(moveAnalysis, gameNodesMap)
       : ''
 
     // Get Stockfish depth by finding the corresponding game node
@@ -658,6 +660,11 @@ const DesktopLayout: React.FC<{
   gameTree: GameTree
   playerMoveCount: number
   treeController: ReturnType<typeof useTreeController>
+  gameNodesMap: Map<string, GameNode>
+  getChartClassification: (
+    analysis: MoveAnalysis,
+    gameNodesMap: Map<string, GameNode>,
+  ) => 'excellent' | 'good' | 'inaccuracy' | 'mistake' | 'blunder'
 }> = ({
   drill,
   filteredEvaluationChart,
@@ -669,6 +676,8 @@ const DesktopLayout: React.FC<{
   gameTree,
   playerMoveCount,
   treeController,
+  gameNodesMap,
+  getChartClassification,
 }) => (
   <div className="relative flex h-[90vh] max-h-[800px] w-[95vw] max-w-[1200px] flex-col overflow-hidden rounded-lg bg-background-1 shadow-2xl">
     {/* Header */}
@@ -753,6 +762,8 @@ const DesktopLayout: React.FC<{
           }}
           playerColor={drill.selection.playerColor}
           drill={drill}
+          gameNodesMap={gameNodesMap}
+          getChartClassification={getChartClassification}
         />
 
         {/* Critical Decisions Section */}
@@ -765,15 +776,44 @@ const DesktopLayout: React.FC<{
           </div>
           <div className="flex flex-col gap-2 px-3 pb-3">
             {(() => {
-              // Get critical moves (blunders, excellent moves, inaccuracies)
-              const criticalMoves = performanceData.moveAnalyses
-                .filter((move) => move.isPlayerMove)
-                .filter(
-                  (move) =>
-                    move.classification === 'blunder' ||
-                    move.classification === 'excellent' ||
-                    move.classification === 'inaccuracy',
-                )
+              // Get critical moves directly from game tree (like MovesContainer)
+              const mainLineNodes = gameTree.getMainLine().slice(1) // Skip root
+              const criticalMoves = mainLineNodes
+                .filter((node, index) => {
+                  // Determine if this is a player move
+                  const chess = new Chess(node.fen)
+                  const isPlayerMove =
+                    drill.selection.playerColor === 'white'
+                      ? chess.turn() === 'b' // If black to move, white just played
+                      : chess.turn() === 'w' // If white to move, black just played
+                  return isPlayerMove
+                })
+                .filter((node) => {
+                  // Filter for critical moves (same logic as MovesContainer)
+                  return node.blunder || node.inaccuracy || node.excellentMove
+                })
+                .map((node) => {
+                  // Convert to MoveAnalysis format for display
+                  let classification: 'blunder' | 'inaccuracy' | 'excellent' =
+                    'excellent'
+                  if (node.blunder) {
+                    classification = 'blunder'
+                  } else if (node.inaccuracy) {
+                    classification = 'inaccuracy'
+                  }
+
+                  return {
+                    move: node.move || '',
+                    san: node.san || '',
+                    fen: node.fen,
+                    fenBeforeMove: node.parent?.fen,
+                    moveNumber: node.moveNumber,
+                    isPlayerMove: true,
+                    evaluation: 0, // Will be filled if needed
+                    classification,
+                    evaluationLoss: 0,
+                  }
+                })
                 .sort((a, b) => {
                   // Sort by move number (chronological order)
                   return a.moveNumber - b.moveNumber
@@ -919,6 +959,11 @@ const MobileLayout: React.FC<{
   gameTree: GameTree
   playerMoveCount: number
   treeController: ReturnType<typeof useTreeController>
+  gameNodesMap: Map<string, GameNode>
+  getChartClassification: (
+    analysis: MoveAnalysis,
+    gameNodesMap: Map<string, GameNode>,
+  ) => 'excellent' | 'good' | 'inaccuracy' | 'mistake' | 'blunder'
 }> = ({
   drill,
   filteredEvaluationChart,
@@ -932,6 +977,8 @@ const MobileLayout: React.FC<{
   gameTree,
   playerMoveCount,
   treeController,
+  gameNodesMap,
+  getChartClassification,
 }) => (
   <div className="relative flex h-[95vh] w-[95vw] flex-col overflow-hidden rounded-lg bg-background-1 shadow-2xl">
     {/* Header */}
@@ -1046,6 +1093,8 @@ const MobileLayout: React.FC<{
             }}
             playerColor={drill.selection.playerColor}
             drill={drill}
+            gameNodesMap={gameNodesMap}
+            getChartClassification={getChartClassification}
           />
         </div>
       )}
@@ -1156,6 +1205,43 @@ export const DrillPerformanceModal: React.FC<Props> = ({
     drill.selection.playerColor,
   )
 
+  // Create a map of FEN -> GameNode for consistent classification
+  const gameNodesMap = useMemo(() => {
+    const map = new Map<string, GameNode>()
+    const collectNodes = (node: GameNode): void => {
+      map.set(node.fen, node)
+      node.children.forEach(collectNodes)
+    }
+    collectNodes(gameTree.getRoot())
+    return map
+  }, [gameTree])
+
+  // Helper function to get move classification from GameNode (same as MovesContainer)
+  const getChartClassification = useCallback(
+    (
+      analysis: MoveAnalysis,
+      gameNodesMap: Map<string, GameNode>,
+    ): 'excellent' | 'good' | 'inaccuracy' | 'mistake' | 'blunder' => {
+      // Get the GameNode for the position after the move
+      const moveNode = gameNodesMap.get(analysis.fen)
+      if (!moveNode) {
+        return analysis.classification || 'good'
+      }
+
+      // Use the same logic as MovesContainer
+      if (moveNode.blunder) {
+        return 'blunder'
+      } else if (moveNode.inaccuracy) {
+        return 'inaccuracy'
+      } else if (moveNode.excellentMove) {
+        return 'excellent'
+      }
+
+      return 'good'
+    },
+    [],
+  )
+
   // Count player moves from move analyses for display purposes
   const playerMoveCount = useMemo(() => {
     return moveAnalyses.filter((move) => move.isPlayerMove).length
@@ -1196,6 +1282,8 @@ export const DrillPerformanceModal: React.FC<Props> = ({
           gameTree={gameTree}
           playerMoveCount={playerMoveCount}
           treeController={treeController}
+          gameNodesMap={gameNodesMap}
+          getChartClassification={getChartClassification}
         />
       ) : (
         <DesktopLayout
@@ -1209,6 +1297,8 @@ export const DrillPerformanceModal: React.FC<Props> = ({
           gameTree={gameTree}
           playerMoveCount={playerMoveCount}
           treeController={treeController}
+          gameNodesMap={gameNodesMap}
+          getChartClassification={getChartClassification}
         />
       )}
     </ModalContainer>