feat: migrate play page to use tree structure

Author: kevinjosethomas

src/components/Board/AnalysisBoardController.tsx

@@ -1,8 +1,7 @@
-import { useCallback, useContext, useEffect, useMemo } from 'react'
-
 import { useWindowSize } from 'src/hooks'
 import { FlipIcon } from 'src/components/Icons/icons'
 import { AnalysisGameControllerContext } from 'src/contexts/'
+import { useCallback, useContext, useEffect, useMemo } from 'react'
 
 export const AnalysisBoardController: React.FC = () => {
   const { width } = useWindowSize()

src/components/Board/GameBoard.tsx

@@ -4,10 +4,12 @@ import { defaults } from 'chessground/state'
 import { useCallback, useContext } from 'react'
 import Chessground from '@react-chess/chessground'
 import type { DrawBrushes, DrawShape } from 'chessground/draw'
+import type { Key } from 'chessground/types'
 
 import { useChessSound } from 'src/hooks'
-import { BaseGame, Check } from 'src/types'
+import { BaseGame, Check, GameNode } from 'src/types'
 import { GameControllerContext } from 'src/contexts'
+import { PlayTreeControllerContext } from 'src/contexts/PlayTreeControllerContext/PlayTreeControllerContext'
 
 interface Props {
   game: BaseGame
@@ -19,6 +21,7 @@ interface Props {
     move: [string, string]
     check?: Check
   }
+  currentNode?: GameNode
   shapes?: DrawShape[]
   brushes?: DrawBrushes
 }
@@ -27,20 +30,29 @@ export const GameBoard: React.FC<Props> = ({
   game,
   moves,
   move,
+  currentNode,
   setCurrentMove,
   setCurrentSquare,
   shapes,
   brushes,
 }: Props) => {
   const { currentIndex, orientation } = useContext(GameControllerContext)
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const treeCtx: any = useContext(PlayTreeControllerContext as any)
+  const boardOrientation: 'white' | 'black' =
+    treeCtx?.orientation || orientation
   const { playSound } = useChessSound()
 
   const after = useCallback(
     (from: string, to: string) => {
       if (setCurrentMove) setCurrentMove([from, to])
       if (setCurrentSquare) setCurrentSquare(null)
 
-      const currentFen = move ? move.fen : game.moves[currentIndex]?.board
+      const currentFen = currentNode
+        ? currentNode.fen
+        : move
+          ? move.fen
+          : game.moves[currentIndex]?.board
       if (currentFen) {
         const chess = new Chess(currentFen)
         const pieceAtDestination = chess.get(to)
@@ -58,6 +70,7 @@ export const GameBoard: React.FC<Props> = ({
       game.moves,
       currentIndex,
       playSound,
+      currentNode,
     ],
   )
 
@@ -82,12 +95,27 @@ export const GameBoard: React.FC<Props> = ({
           autoShapes: shapes || [],
           brushes: { ...defaults().drawable.brushes, ...brushes },
         },
-        fen: move ? move.fen : game.moves[currentIndex]?.board,
-        lastMove: move
-          ? move.move
-          : [...((game.moves[currentIndex]?.lastMove ?? []) as any)],
-        check: move ? move.check : game.moves[currentIndex]?.check,
-        orientation,
+        fen: currentNode
+          ? currentNode.fen
+          : move
+            ? move.fen
+            : game.moves[currentIndex]?.board,
+        lastMove: currentNode
+          ? currentNode.move
+            ? ([currentNode.move.slice(0, 2), currentNode.move.slice(2, 4)] as [
+                Key,
+                Key,
+              ])
+            : []
+          : move
+            ? move.move
+            : [...((game.moves[currentIndex]?.lastMove ?? []) as any)],
+        check: currentNode
+          ? currentNode.check
+          : move
+            ? move.check
+            : game.moves[currentIndex]?.check,
+        orientation: boardOrientation,
       }}
     />
   )

src/components/Board/GameClock.tsx

@@ -2,7 +2,7 @@ import { useState, useEffect, useContext } from 'react'
 
 import { Color } from 'src/types'
 import { AuthContext, ThemeContext } from 'src/contexts'
-import { PlayControllerContext } from 'src/contexts/PlayControllerContext'
+import { PlayTreeControllerContext } from 'src/contexts/PlayTreeControllerContext/PlayTreeControllerContext'
 
 interface Props {
   player: Color
@@ -15,7 +15,7 @@ export const GameClock: React.FC<Props> = (
   const { theme } = useContext(ThemeContext)
   const { user } = useContext(AuthContext)
   const { player, toPlay, whiteClock, blackClock, lastMoveTime } = useContext(
-    PlayControllerContext,
+    PlayTreeControllerContext,
   )
 
   const [referenceTime, setReferenceTime] = useState<number>(Date.now())