fix: turing page moves container + tree implementation

Author: kevinjosethomas

src/components/Board/BoardController.tsx

@@ -6,13 +6,13 @@ import { useCallback, useEffect, useMemo } from 'react'
 interface Props {
   orientation: 'white' | 'black'
   setOrientation: (orientation: 'white' | 'black') => void
-  currentNode: GameNode
+  currentNode: GameNode | null
   plyCount: number
   goToNode: (node: GameNode) => void
   goToNextNode: () => void
   goToPreviousNode: () => void
   goToRootNode: () => void
-  gameTree: GameTree
+  gameTree: GameTree | null
   setCurrentMove?: (move: [string, string] | null) => void
   disableFlip?: boolean
   disablePrevious?: boolean
@@ -43,17 +43,11 @@ export const BoardController: React.FC<Props> = ({
   }, [orientation, setOrientation])
 
   const hasPrevious = useMemo(() => {
-    if (currentNode !== undefined) {
-      return !!currentNode?.parent
-    }
-    return false
+    return !!currentNode?.parent
   }, [currentNode])
 
   const hasNext = useMemo(() => {
-    if (currentNode !== undefined) {
-      return !!currentNode?.mainChild
-    }
-    return false
+    return !!currentNode?.mainChild
   }, [currentNode])
 
   const getFirst = useCallback(() => {
@@ -72,6 +66,8 @@ export const BoardController: React.FC<Props> = ({
   }, [goToNextNode, setCurrentMove])
 
   const getLast = useCallback(() => {
+    if (!currentNode) return
+    
     let lastNode = currentNode
     while (lastNode?.mainChild) {
       lastNode = lastNode.mainChild

src/components/Board/MovesContainer.tsx

@@ -65,7 +65,7 @@ export const MovesContainer: React.FC<Props> = (props) => {
 
   const mainLineNodes = useMemo(() => {
     const fullMainLine =
-      controller.gameTree.getMainLine() ?? game.tree.getMainLine()
+      controller.gameTree?.getMainLine() ?? game.tree?.getMainLine() ?? []
 
     if (startFromNode) {
       // Find the index of the start node in the full main line
@@ -103,7 +103,7 @@ export const MovesContainer: React.FC<Props> = (props) => {
 
     console.log('MovesContainer mainLineNodes (default):', {
       controllerTreeMainLine: controller.gameTree?.getMainLine()?.length || 0,
-      gameTreeMainLine: game.tree?.getMainLine()?.length || 0,
+      gameTreeMainLine: game?.tree?.getMainLine()?.length || 0,
       finalMainLineLength: fullMainLine?.length || 0,
       currentNode: controller.currentNode?.fen,
     })
@@ -197,7 +197,7 @@ export const MovesContainer: React.FC<Props> = (props) => {
 
     console.log('MovesContainer final rows:', rows.length)
     return rows
-  }, [game, mainLineNodes, controller.gameTree])
+  }, [mainLineNodes, startFromNode])
 
   const highlightSet = useMemo(
     () => new Set(highlightIndices ?? []),

src/hooks/useTreeController/useTreeController.ts

@@ -2,14 +2,16 @@ import { Color, GameTree, GameNode } from 'src/types'
 import { useState, useMemo, useCallback, useEffect } from 'react'
 
 export const useTreeController = (
-  gameTree: GameTree,
+  gameTree: GameTree | null | undefined,
   initialOrientation: Color = 'white',
 ) => {
-  const [currentNode, setCurrentNode] = useState<GameNode>(gameTree.getRoot())
+  const [currentNode, setCurrentNode] = useState<GameNode | null>(
+    gameTree?.getRoot() || null
+  )
   const [orientation, setOrientation] = useState<Color>(initialOrientation)
 
   useEffect(() => {
-    setCurrentNode(gameTree.getRoot())
+    setCurrentNode(gameTree?.getRoot() || null)
   }, [gameTree])
 
   const plyCount = useMemo(() => {

src/hooks/useTuringController/useTuringController.ts

@@ -54,7 +54,7 @@ export const useTuringController = () => {
     [turingGames, currentGameId],
   )
 
-  const controller = useTreeController(game.tree, 'white')
+  const controller = useTreeController(game?.tree, 'white')
 
   useEffect(() => {
     if (controller.tree && game) {

src/pages/turing.tsx

@@ -6,6 +6,7 @@ import { trackTuringGameStarted } from 'src/lib/analytics'
 import {
   WindowSizeContext,
   TuringControllerContext,
+  TreeControllerContext,
   useTour,
 } from 'src/contexts'
 import {
@@ -188,7 +189,11 @@ const Turing: React.FC<Props> = (props: Props) => {
             id="turing-page"
             className="relative flex aspect-square w-full max-w-[75vh] flex-shrink-0"
           >
-            <GameBoard game={game} currentNode={controller.currentNode} />
+            <GameBoard 
+              game={game} 
+              currentNode={controller.currentNode} 
+              orientation={controller.orientation}
+            />
           </motion.div>
           <motion.div
             variants={itemVariants}
@@ -243,7 +248,11 @@ const Turing: React.FC<Props> = (props: Props) => {
             id="turing-page"
             className="relative flex aspect-square h-[100vw] w-screen"
           >
-            <GameBoard game={game} currentNode={controller.currentNode} />
+            <GameBoard 
+              game={game} 
+              currentNode={controller.currentNode} 
+              orientation={controller.orientation}
+            />
           </div>
           <div className="flex h-auto w-full flex-col gap-1">
             <div className="relative bottom-0 h-full flex-1 overflow-auto">
@@ -297,9 +306,11 @@ const Turing: React.FC<Props> = (props: Props) => {
         />
       </Head>
       <TuringControllerContext.Provider value={controller}>
-        <AnimatePresence mode="wait">
-          {isMobile ? mobileLayout : desktopLayout}
-        </AnimatePresence>
+        <TreeControllerContext.Provider value={controller}>
+          <AnimatePresence mode="wait">
+            {isMobile ? mobileLayout : desktopLayout}
+          </AnimatePresence>
+        </TreeControllerContext.Provider>
       </TuringControllerContext.Provider>
     </>
   )