Merge pull request #241 from CSSLab/codex/desktop-analysis-select-game-behavior

Refine desktop analysis game selection flow

Author: ashtonanderson

src/components/Analysis/AnalysisGameList.tsx

@@ -898,6 +898,7 @@ export const AnalysisGameList: React.FC<AnalysisGameListProps> = ({
                         selectedGameElement as React.RefObject<HTMLButtonElement>
                       }
                       analysisTournamentList={analysisTournamentList}
+                      onGameSelected={onGameSelected}
                     />
                   ))}
                 </>

src/components/Analysis/Tournament.tsx

@@ -13,6 +13,7 @@ type Props = {
   selectedGameElement: React.RefObject<HTMLButtonElement>
   analysisTournamentList: Map<string, WorldChampionshipGameListEntry[]>
   setCurrentMove?: Dispatch<SetStateAction<number>>
+  onGameSelected?: () => void
 }
 
 export const Tournament = ({
@@ -26,6 +27,7 @@ export const Tournament = ({
   setLoadingIndex,
   selectedGameElement,
   analysisTournamentList,
+  onGameSelected,
 }: Props) => {
   const router = useRouter()
   const games = analysisTournamentList.get(id)
@@ -59,10 +61,18 @@ export const Tournament = ({
         className={`flex w-full flex-col ${openIndex === index ? 'block' : 'hidden'}`}
       >
         {games?.map((game, j) => {
+          const routeType = currentId?.[1]
+          const isTypedGameRoute =
+            routeType === 'lichess' ||
+            routeType === 'play' ||
+            routeType === 'hand' ||
+            routeType === 'brain' ||
+            routeType === 'custom' ||
+            routeType === 'stream'
           const selected =
-            currentId && currentId[1] == 'tournament'
+            currentId && !isTypedGameRoute
               ? sectionId == currentId[0] &&
-                game.game_index == Number.parseInt(currentId[1])
+                game.game_index == Number.parseInt(currentId[1], 10)
               : false
           return (
             <button
@@ -71,6 +81,7 @@ export const Tournament = ({
               onClick={() => {
                 setLoadingIndex(j)
                 router.push(`/analysis/${sectionId}/${game.game_index}`)
+                onGameSelected?.()
               }}
               ref={selected && opened ? selectedGameElement : null}
             >

src/components/Board/BoardController.tsx

@@ -18,6 +18,7 @@ interface Props {
   disablePrevious?: boolean
   disableKeyboardNavigation?: boolean
   disableNavigation?: boolean
+  onNavigate?: () => void
   embedded?: boolean
 }
 
@@ -36,6 +37,7 @@ export const BoardController: React.FC<Props & { embedded?: boolean }> = ({
   disablePrevious = false,
   disableKeyboardNavigation = false,
   disableNavigation = false,
+  onNavigate,
   embedded = false,
 }: Props) => {
   const { width } = useWindowSize()
@@ -55,17 +57,20 @@ export const BoardController: React.FC<Props & { embedded?: boolean }> = ({
   const getFirst = useCallback(() => {
     goToRootNode()
     setCurrentMove?.(null)
-  }, [goToRootNode, setCurrentMove])
+    onNavigate?.()
+  }, [goToRootNode, onNavigate, setCurrentMove])
 
   const getPrevious = useCallback(() => {
     goToPreviousNode()
     setCurrentMove?.(null)
-  }, [goToPreviousNode, setCurrentMove])
+    onNavigate?.()
+  }, [goToPreviousNode, onNavigate, setCurrentMove])
 
   const getNext = useCallback(() => {
     goToNextNode()
     setCurrentMove?.(null)
-  }, [goToNextNode, setCurrentMove])
+    onNavigate?.()
+  }, [goToNextNode, onNavigate, setCurrentMove])
 
   const getLast = useCallback(() => {
     if (!currentNode) return
@@ -79,7 +84,8 @@ export const BoardController: React.FC<Props & { embedded?: boolean }> = ({
     }
 
     setCurrentMove?.(null)
-  }, [currentNode, goToNode, setCurrentMove])
+    onNavigate?.()
+  }, [currentNode, goToNode, onNavigate, setCurrentMove])
 
   useEffect(() => {
     if (width <= 670 || disableKeyboardNavigation) return

src/components/Board/MovesContainer.tsx

@@ -17,6 +17,7 @@ interface Props {
   startFromNode?: GameNode
   restrictNavigationBefore?: GameNode
   forceMobileLayout?: boolean
+  scrollToTopSignal?: number
 }
 
 const getMoveClassification = (node: GameNode | null) => {
@@ -52,6 +53,7 @@ export const MovesContainer: React.FC<
     startFromNode,
     restrictNavigationBefore,
     forceMobileLayout,
+    scrollToTopSignal,
     embedded = true,
     heightClass = 'h-48',
   } = props as Props & { embedded?: boolean; heightClass?: string }
@@ -169,6 +171,15 @@ export const MovesContainer: React.FC<
     }
   }, [controller.currentNode])
 
+  useEffect(() => {
+    if (!containerRef.current || scrollToTopSignal === undefined) return
+
+    containerRef.current.scrollTo({
+      top: 0,
+      left: 0,
+    })
+  }, [scrollToTopSignal])
+
   const moves = useMemo(() => {
     // When using startFromNode, we want to show moves AFTER that node
     // When using default behavior, we want to skip the root node (slice(1))

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

@@ -483,11 +483,32 @@ const Analysis: React.FC<Props> = ({
   const [showAnalysisConfigModal, setShowAnalysisConfigModal] = useState(false)
   const [refreshTrigger, setRefreshTrigger] = useState(0)
   const [analysisEnabled, setAnalysisEnabled] = useState(true)
+  const [
+    desktopMoveListScrollResetSignal,
+    setDesktopMoveListScrollResetSignal,
+  ] = useState(0)
   const [lastMoveResult, setLastMoveResult] = useState<
     'correct' | 'incorrect' | 'not-learning'
   >('not-learning')
 
   const controller = useAnalysisController(analyzedGame)
+  const userGamePovOrientation = useMemo(() => {
+    if (!['play', 'hand', 'brain'].includes(analyzedGame.type)) {
+      return null
+    }
+
+    const whiteName = analyzedGame.whitePlayer.name.toLowerCase()
+    const blackName = analyzedGame.blackPlayer.name.toLowerCase()
+
+    if (whiteName.includes('maia')) return 'black'
+    if (blackName.includes('maia')) return 'white'
+
+    return null
+  }, [
+    analyzedGame.blackPlayer.name,
+    analyzedGame.type,
+    analyzedGame.whitePlayer.name,
+  ])
   const destinationBadges = useMemo(() => {
     if (
       !analysisEnabled ||
@@ -522,6 +543,11 @@ const Analysis: React.FC<Props> = ({
     }
   }, [analyzedGame])
 
+  useEffect(() => {
+    if (!userGamePovOrientation) return
+    controller.setOrientation(userGamePovOrientation)
+  }, [analyzedGame.tree, controller.setOrientation, userGamePovOrientation])
+
   useEffect(() => {
     setHoverArrow(null)
   }, [controller.currentNode])
@@ -1194,6 +1220,12 @@ const Analysis: React.FC<Props> = ({
   const [desktopLeftPanelTab, setDesktopLeftPanelTab] = useState<
     (typeof desktopLeftPanelTabs)[number]['id']
   >(desktopLeftPanelTabs[0].id)
+  const showDesktopMovesAfterNavigation = useCallback(() => {
+    if (desktopLeftPanelTab !== 'select-game') return
+
+    setDesktopLeftPanelTab('moves')
+    setDesktopMoveListScrollResetSignal((prev) => prev + 1)
+  }, [desktopLeftPanelTab])
 
   useEffect(() => {
     if (useMobileStyleAnalysisLayout || desktopLeftPanelTab !== 'select-game') {
@@ -1222,15 +1254,15 @@ const Analysis: React.FC<Props> = ({
         event.preventDefault()
         event.stopPropagation()
         controller.goToPreviousNode()
-        setDesktopLeftPanelTab('moves')
+        showDesktopMovesAfterNavigation()
         return
       }
 
       if (event.key === 'ArrowRight' && controller.currentNode?.mainChild) {
         event.preventDefault()
         event.stopPropagation()
         controller.goToNextNode()
-        setDesktopLeftPanelTab('moves')
+        showDesktopMovesAfterNavigation()
       }
     }
 
@@ -1244,6 +1276,7 @@ const Analysis: React.FC<Props> = ({
     controller.goToPreviousNode,
     controller.learnFromMistakes.state.isActive,
     desktopLeftPanelTab,
+    showDesktopMovesAfterNavigation,
     useMobileStyleAnalysisLayout,
   ])
 
@@ -1457,74 +1490,75 @@ const Analysis: React.FC<Props> = ({
                 )
               })}
             </div>
-            <div className="relative flex min-h-0 flex-1 overflow-hidden">
-              <div
-                aria-hidden={desktopLeftPanelTab !== 'moves'}
-                className={`red-scrollbar absolute inset-0 flex h-full flex-col overflow-y-auto transition-opacity duration-150 ${
-                  desktopLeftPanelTab === 'moves'
-                    ? 'visible opacity-100'
-                    : 'pointer-events-none invisible opacity-0'
-                }`}
-              >
-                <MovesContainer
-                  game={analyzedGame}
-                  termination={analyzedGame.termination}
-                  showAnnotations={true}
-                  disableKeyboardNavigation={
-                    controller.gameAnalysis.progress.isAnalyzing ||
-                    controller.learnFromMistakes.state.isActive
-                  }
-                  disableMoveClicking={
-                    controller.learnFromMistakes.state.isActive
-                  }
-                  embedded
-                  heightClass="h-40"
-                />
-                {/* No spacer here to keep controller tight to moves */}
-                <BoardController
-                  gameTree={controller.gameTree}
-                  orientation={controller.orientation}
-                  setOrientation={controller.setOrientation}
-                  currentNode={controller.currentNode}
-                  plyCount={controller.plyCount}
-                  goToNode={controller.goToNode}
-                  goToNextNode={controller.goToNextNode}
-                  goToPreviousNode={controller.goToPreviousNode}
-                  goToRootNode={controller.goToRootNode}
-                  disableKeyboardNavigation={
-                    controller.gameAnalysis.progress.isAnalyzing ||
-                    controller.learnFromMistakes.state.isActive
-                  }
-                  disableNavigation={
-                    controller.learnFromMistakes.state.isActive
-                  }
-                  embedded
-                />
-              </div>
-              <div
-                aria-hidden={desktopLeftPanelTab !== 'select-game'}
-                className={`absolute inset-0 flex min-h-0 flex-col transition-opacity duration-150 ${
-                  desktopLeftPanelTab === 'select-game'
-                    ? 'visible opacity-100'
-                    : 'pointer-events-none invisible opacity-0'
-                }`}
-              >
-                <AnalysisGameList
-                  currentId={currentId}
-                  loadNewWorldChampionshipGame={(newId, setCurrentMove) =>
-                    getAndSetTournamentGame(newId, setCurrentMove)
-                  }
-                  loadNewLichessGame={(id, pgn, setCurrentMove) =>
-                    getAndSetLichessGame(id, pgn, setCurrentMove)
-                  }
-                  loadNewMaiaGame={(id, type, setCurrentMove) =>
-                    getAndSetUserGame(id, type, setCurrentMove)
-                  }
-                  onCustomAnalysis={() => setShowCustomModal(true)}
-                  refreshTrigger={refreshTrigger}
-                  embedded
-                />
+            <div className="flex min-h-0 flex-1 flex-col overflow-hidden">
+              <div className="relative min-h-0 flex-1 overflow-hidden">
+                <div
+                  aria-hidden={desktopLeftPanelTab !== 'moves'}
+                  className={`absolute inset-0 flex h-full flex-col transition-opacity duration-150 ${
+                    desktopLeftPanelTab === 'moves'
+                      ? 'visible opacity-100'
+                      : 'pointer-events-none invisible opacity-0'
+                  }`}
+                >
+                  <MovesContainer
+                    game={analyzedGame}
+                    termination={analyzedGame.termination}
+                    showAnnotations={true}
+                    disableKeyboardNavigation={
+                      controller.gameAnalysis.progress.isAnalyzing ||
+                      controller.learnFromMistakes.state.isActive
+                    }
+                    disableMoveClicking={
+                      controller.learnFromMistakes.state.isActive
+                    }
+                    scrollToTopSignal={desktopMoveListScrollResetSignal}
+                    embedded
+                    heightClass="h-40"
+                  />
+                </div>
+                <div
+                  aria-hidden={desktopLeftPanelTab !== 'select-game'}
+                  className={`absolute inset-0 flex min-h-0 flex-col transition-opacity duration-150 ${
+                    desktopLeftPanelTab === 'select-game'
+                      ? 'visible opacity-100'
+                      : 'pointer-events-none invisible opacity-0'
+                  }`}
+                >
+                  <AnalysisGameList
+                    currentId={currentId}
+                    loadNewWorldChampionshipGame={(newId, setCurrentMove) =>
+                      getAndSetTournamentGame(newId, setCurrentMove)
+                    }
+                    loadNewLichessGame={(id, pgn, setCurrentMove) =>
+                      getAndSetLichessGame(id, pgn, setCurrentMove)
+                    }
+                    loadNewMaiaGame={(id, type, setCurrentMove) =>
+                      getAndSetUserGame(id, type, setCurrentMove)
+                    }
+                    onCustomAnalysis={() => setShowCustomModal(true)}
+                    refreshTrigger={refreshTrigger}
+                    embedded
+                  />
+                </div>
               </div>
+              <BoardController
+                gameTree={controller.gameTree}
+                orientation={controller.orientation}
+                setOrientation={controller.setOrientation}
+                currentNode={controller.currentNode}
+                plyCount={controller.plyCount}
+                goToNode={controller.goToNode}
+                goToNextNode={controller.goToNextNode}
+                goToPreviousNode={controller.goToPreviousNode}
+                goToRootNode={controller.goToRootNode}
+                disableKeyboardNavigation={
+                  controller.gameAnalysis.progress.isAnalyzing ||
+                  controller.learnFromMistakes.state.isActive
+                }
+                disableNavigation={controller.learnFromMistakes.state.isActive}
+                onNavigate={showDesktopMovesAfterNavigation}
+                embedded
+              />
             </div>
           </div>
         </motion.div>