feat: clean up live streaming implementation

Author: kevinjosethomas

src/api/lichess/streaming.ts

@@ -1,10 +1,15 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { Chess } from 'chess.ts'
-import { AnalyzedGame, Player, StockfishEvaluation } from 'src/types'
 import { GameTree } from 'src/types/base/tree'
 import { AvailableMoves } from 'src/types/training'
+import {
+  LiveGame,
+  Player,
+  StockfishEvaluation,
+  StreamedGame,
+  StreamedMove,
+} from 'src/types'
 
-// Re-use the readStream utility from analysis.ts
 const readStream = (processLine: (data: any) => void) => (response: any) => {
   const stream = response.body.getReader()
   const matcher = /\r?\n/
@@ -32,15 +37,14 @@ const readStream = (processLine: (data: any) => void) => (response: any) => {
   return loop()
 }
 
-// Get current Lichess TV game information
 export const getLichessTVGame = async () => {
   const res = await fetch('https://lichess.org/api/tv/channels')
   if (!res.ok) {
     throw new Error('Failed to fetch Lichess TV data')
   }
   const data = await res.json()
 
-  // Return the best game (highest rated players)
+  // Return the best rapid game (highest rated players)
   const bestChannel = data.rapid
   if (!bestChannel?.gameId) {
     throw new Error('No TV game available')
@@ -53,7 +57,6 @@ export const getLichessTVGame = async () => {
   }
 }
 
-// Get basic game information from Lichess API
 export const getLichessGameInfo = async (gameId: string) => {
   const res = await fetch(`https://lichess.org/api/game/${gameId}`)
   if (!res.ok) {
@@ -62,11 +65,10 @@ export const getLichessGameInfo = async (gameId: string) => {
   return res.json()
 }
 
-// Stream live moves from a Lichess game
 export const streamLichessGame = async (
   gameId: string,
-  onGameStart: (data: any) => void,
-  onMove: (data: any) => void,
+  onGameStart: (data: StreamedGame) => void,
+  onMove: (data: StreamedMove) => void,
   onComplete: () => void,
   abortSignal?: AbortSignal,
 ) => {
@@ -79,55 +81,18 @@ export const streamLichessGame = async (
     },
   })
 
-  let gameStarted = false
-
   const onMessage = (message: any) => {
-    console.log('Raw message received:', message)
-
     if (message.id) {
-      // This is the initial game state with full game info
       console.log('Game start message:', message)
-      onGameStart(message)
-      gameStarted = true
+      onGameStart(message as StreamedGame)
     } else if (message.uci || message.lm) {
-      // This is a move - handle both formats: {"fen":"...", "uci":"e2e4"} or {"fen":"...", "lm":"e2e4"}
-      // If we haven't received the initial game state yet, trigger game start with a minimal state
-      if (!gameStarted) {
-        console.log(
-          'First move received without initial game state, creating minimal game',
-        )
-        onGameStart({
-          id: gameId, // Use the gameId we're streaming
-          players: {
-            white: { user: { name: 'White' } },
-            black: { user: { name: 'Black' } },
-          },
-          fen: message.fen,
-        })
-        gameStarted = true
-      }
-
+      console.log('Move message:', message)
       onMove({
         fen: message.fen,
         uci: message.uci || message.lm,
         wc: message.wc,
         bc: message.bc,
       })
-    } else if (message.fen && !message.uci && !message.lm) {
-      // This is the initial position - could be the first message for a starting game
-      console.log('Initial position received:', message)
-      if (!gameStarted) {
-        console.log('Initial position message, creating game')
-        onGameStart({
-          id: gameId,
-          players: {
-            white: { user: { name: 'White' } },
-            black: { user: { name: 'Black' } },
-          },
-          fen: message.fen,
-        })
-        gameStarted = true
-      }
     } else {
       console.log('Unknown message format:', message)
     }
@@ -155,27 +120,25 @@ export const streamLichessGame = async (
   }
 }
 
-// Convert Lichess game data to our AnalyzedGame format for live streaming
 export const createAnalyzedGameFromLichessStream = (
   gameData: any,
-): AnalyzedGame => {
+): LiveGame => {
   const { players, id } = gameData
 
   const whitePlayer: Player = {
-    name: players?.white?.user?.name || 'White',
+    name: players?.white?.user?.id || 'White',
     rating: players?.white?.rating,
   }
 
   const blackPlayer: Player = {
-    name: players?.black?.user?.name || 'Black',
+    name: players?.black?.user?.id || 'Black',
     rating: players?.black?.rating,
   }
 
-  // Use the starting position as our tree root - we'll build moves incrementally
-  const startingFen = 'rnbqkbnr/pppppppp/8/8/8/8/PPPPPPPP/RNBQKBNR w KQkq - 0 1'
+  const startingFen =
+    gameData.initialFen ||
+    'rnbqkbnr/pppppppp/8/8/8/8/PPPPPPPP/RNBQKBNR w KQkq - 0 1'
 
-  // Build moves array with just the initial position for now
-  // Moves will be added as they come in via the stream
   const gameStates = [
     {
       board: startingFen,
@@ -186,35 +149,28 @@ export const createAnalyzedGameFromLichessStream = (
     },
   ]
 
-  // Create game tree starting from the beginning
   const tree = new GameTree(startingFen)
 
   return {
     id: `stream-${id}`,
     blackPlayer,
     whitePlayer,
+    gameType: 'stream',
+    type: 'stream' as const,
     moves: gameStates,
     availableMoves: new Array(gameStates.length).fill({}) as AvailableMoves[],
-    gameType: 'blitz', // Default to blitz, could be detected from game data
-    termination: {
-      result: '*', // Live game in progress
-      winner: undefined,
-      condition: 'Live',
-    },
-    maiaEvaluations: new Array(gameStates.length).fill({}),
-    stockfishEvaluations: new Array(gameStates.length).fill(undefined) as (
-      | StockfishEvaluation
-      | undefined
-    )[],
+    termination: undefined,
+    maiaEvaluations: [],
+    stockfishEvaluations: [],
+    loadedFen: gameData.fen,
+    loaded: false,
     tree,
-    type: 'stream' as const, // Use stream type for live streams
-  } as AnalyzedGame
+  } as LiveGame
 }
 
-// Parse a move from the Lichess stream format and update game state
 export const parseLichessStreamMove = (
-  moveData: any,
-  currentGame: AnalyzedGame,
+  moveData: StreamedMove,
+  currentGame: LiveGame,
 ) => {
   const { uci, fen } = moveData
 

src/components/Analysis/StreamAnalysis.tsx

@@ -5,40 +5,31 @@ import React, {
   useCallback,
   useContext,
 } from 'react'
-import { motion, AnimatePresence } from 'framer-motion'
-import { useRouter } from 'next/router'
+import { motion } from 'framer-motion'
 import type { Key } from 'chessground/types'
 import { Chess, PieceSymbol } from 'chess.ts'
 import type { DrawShape } from 'chessground/draw'
-import toast from 'react-hot-toast'
 
-import {
-  AnalyzedGame,
-  MaiaEvaluation,
-  StockfishEvaluation,
-  GameNode,
-} from 'src/types'
-import { StreamState, ClockState } from 'src/hooks/useLichessStreamController'
 import { WindowSizeContext } from 'src/contexts'
-import { PlayerInfo } from 'src/components/Common/PlayerInfo'
+import { MAIA_MODELS } from 'src/constants/common'
+import { GameInfo } from 'src/components/Common/GameInfo'
 import { GameBoard } from 'src/components/Board/GameBoard'
+import { PlayerInfo } from 'src/components/Common/PlayerInfo'
 import { MovesContainer } from 'src/components/Board/MovesContainer'
+import { AnalyzedGame, GameNode, StreamState, ClockState } from 'src/types'
 import { BoardController } from 'src/components/Board/BoardController'
 import { PromotionOverlay } from 'src/components/Board/PromotionOverlay'
-import { GameInfo } from 'src/components/Common/GameInfo'
 import { AnalysisSidebar } from 'src/components/Analysis'
 import { ConfigurableScreens } from 'src/components/Analysis/ConfigurableScreens'
-import { MAIA_MODELS } from 'src/constants/common'
+import { useAnalysisController } from 'src/hooks/useAnalysisController'
 
 interface Props {
   game: AnalyzedGame
   streamState: StreamState
   clockState: ClockState
   onReconnect: () => void
   onStopStream: () => void
-  analysisController: any // This should be typed properly based on your analysis controller
-  userNavigatedAway?: boolean
-  onSyncWithLive?: () => void
+  analysisController: ReturnType<typeof useAnalysisController>
 }
 
 export const StreamAnalysis: React.FC<Props> = ({
@@ -48,10 +39,7 @@ export const StreamAnalysis: React.FC<Props> = ({
   onReconnect,
   onStopStream,
   analysisController,
-  userNavigatedAway = false,
-  onSyncWithLive,
 }) => {
-  const router = useRouter()
   const { width } = useContext(WindowSizeContext)
   const isMobile = useMemo(() => width > 0 && width <= 670, [width])
 
@@ -61,7 +49,6 @@ export const StreamAnalysis: React.FC<Props> = ({
     [string, string] | null
   >(null)
 
-  // Reset hover arrow when current node changes
   useEffect(() => {
     setHoverArrow(null)
   }, [analysisController.currentNode])
@@ -185,9 +172,9 @@ export const StreamAnalysis: React.FC<Props> = ({
                 {player.rating ? <>({player.rating})</> : null}
               </span>
             </div>
-            {game.termination.winner === (index == 0 ? 'white' : 'black') ? (
+            {game.termination?.winner === (index == 0 ? 'white' : 'black') ? (
               <p className="text-xs text-engine-3">1</p>
-            ) : game.termination.winner !== 'none' ? (
+            ) : game.termination?.winner !== 'none' ? (
               <p className="text-xs text-human-3">0</p>
             ) : game.termination === undefined ? (
               <></>
@@ -208,16 +195,16 @@ export const StreamAnalysis: React.FC<Props> = ({
         <div className="flex items-center gap-1">
           {streamState.isLive ? (
             <span className="font-medium text-red-400">LIVE</span>
-          ) : game.termination.winner === 'none' ? (
+          ) : game.termination?.winner === 'none' ? (
             <span className="font-medium text-primary/80">½-½</span>
           ) : (
             <span className="font-medium">
               <span className="text-primary/70">
-                {game.termination.winner === 'white' ? '1' : '0'}
+                {game.termination?.winner === 'white' ? '1' : '0'}
               </span>
               <span className="text-primary/70">-</span>
               <span className="text-primary/70">
-                {game.termination.winner === 'black' ? '1' : '0'}
+                {game.termination?.winner === 'black' ? '1' : '0'}
               </span>
             </span>
           )}
@@ -343,7 +330,7 @@ export const StreamAnalysis: React.FC<Props> = ({
               color={
                 analysisController.orientation === 'white' ? 'black' : 'white'
               }
-              termination={game.termination.winner}
+              termination={game.termination?.winner}
               clock={
                 clockState
                   ? analysisController.orientation === 'white'
@@ -400,7 +387,7 @@ export const StreamAnalysis: React.FC<Props> = ({
               color={
                 analysisController.orientation === 'white' ? 'white' : 'black'
               }
-              termination={game.termination.winner}
+              termination={game.termination?.winner}
               showArrowLegend={true}
               clock={
                 clockState

src/components/Common/DelayedLoading.tsx

@@ -4,12 +4,14 @@ import { Loading } from './Loading'
 
 interface DelayedLoadingProps {
   isLoading: boolean
+  transparent?: boolean
   delay?: number
   children: React.ReactNode
 }
 
 export const DelayedLoading: React.FC<DelayedLoadingProps> = ({
   isLoading,
+  transparent = false,
   delay = 1000,
   children,
 }) => {
@@ -44,7 +46,7 @@ export const DelayedLoading: React.FC<DelayedLoadingProps> = ({
           transition={{ duration: 0.3 }}
           className="my-auto"
         >
-          <Loading />
+          <Loading transparent={transparent} />
         </motion.div>
       ) : !isLoading ? (
         <motion.div

src/components/Common/GameInfo.tsx

@@ -17,7 +17,6 @@ interface Props {
     isConnected: boolean
     error: string | null
   }
-  additionalActions?: React.ReactNode
 }
 
 export const GameInfo: React.FC<Props> = ({
@@ -31,7 +30,6 @@ export const GameInfo: React.FC<Props> = ({
   showGameListButton,
   onGameListClick,
   streamState,
-  additionalActions,
 }: Props) => {
   const { startTour } = useTour()
 
@@ -66,7 +64,6 @@ export const GameInfo: React.FC<Props> = ({
                       ? 'Disconnected'
                       : 'Connecting...'}
               </span>
-              {additionalActions}
             </div>
           )}
           {currentMaiaModel && setCurrentMaiaModel && (

src/components/Common/Loading.tsx

@@ -12,7 +12,11 @@ const states = [
   'r1bqkb1r/pppp1ppp/2n2n2/4p3/2B1P3/3P1N2/PPP2PPP/RNBQK2R b KQkq - 0 4',
 ]
 
-export const Loading: React.FC = () => {
+interface LoadingProps {
+  transparent?: boolean
+}
+
+export const Loading: React.FC<LoadingProps> = ({ transparent = false }) => {
   const [currentIndex, setCurrentIndex] = useState(0)
   const [renderKey, setRenderKey] = useState(0)
 
@@ -33,9 +37,19 @@ export const Loading: React.FC = () => {
   }, [currentIndex])
 
   return (
-    <div className="my-40 flex w-screen items-center justify-center bg-backdrop md:my-auto">
+    <div
+      className={`my-40 flex w-screen items-center justify-center ${
+        transparent
+          ? 'absolute left-0 top-0 h-screen bg-backdrop/90'
+          : 'bg-backdrop'
+      } md:my-auto`}
+    >
       <div className="flex flex-col items-center gap-4">
-        <div className="h-[50vw] w-[50vw] opacity-50 md:h-[30vh] md:w-[30vh]">
+        <div
+          className={`h-[50vw] w-[50vw] md:h-[30vh] md:w-[30vh] ${
+            !transparent ? 'opacity-50' : 'opacity-100'
+          }`}
+        >
           <div className="h-full w-full">
             <Chessground
               key={renderKey}