feat: add custom game analysis modal

Author: kevinjosethomas

src/api/analysis/analysis.ts

@@ -387,6 +387,160 @@ export const getAnalyzedLichessGame = async (id: string, pgn: string) => {
   } as AnalyzedGame
 }
 
+const createAnalyzedGameFromPGN = async (
+  pgn: string,
+  id?: string,
+): Promise<AnalyzedGame> => {
+  const { Chess } = await import('chess.ts')
+  const chess = new Chess()
+
+  try {
+    chess.loadPgn(pgn)
+  } catch (error) {
+    throw new Error('Invalid PGN format')
+  }
+
+  const history = chess.history({ verbose: true })
+  const headers = chess.header()
+
+  const moves = []
+  const tempChess = new Chess()
+
+  const startingFen =
+    headers.FEN || 'rnbqkbnr/pppppppp/8/8/8/8/PPPPPPPP/RNBQKBNR w KQkq - 0 1'
+  if (headers.FEN) {
+    tempChess.load(headers.FEN)
+  }
+
+  moves.push({
+    board: tempChess.fen(),
+    lastMove: undefined,
+    san: undefined,
+    check: tempChess.inCheck(),
+    maia_values: {},
+  })
+
+  for (const move of history) {
+    tempChess.move(move)
+    moves.push({
+      board: tempChess.fen(),
+      lastMove: [move.from, move.to] as [string, string],
+      san: move.san,
+      check: tempChess.inCheck(),
+      maia_values: {},
+    })
+  }
+
+  const tree = buildGameTree(moves, startingFen)
+
+  return {
+    id: id || `custom-pgn-${Date.now()}`,
+    blackPlayer: { name: headers.Black || 'Black', rating: undefined },
+    whitePlayer: { name: headers.White || 'White', rating: undefined },
+    moves,
+    availableMoves: new Array(moves.length).fill({}),
+    gameType: 'custom',
+    termination: {
+      result: headers.Result || '*',
+      winner:
+        headers.Result === '1-0'
+          ? 'white'
+          : headers.Result === '0-1'
+            ? 'black'
+            : 'none',
+      condition: 'Normal',
+    },
+    maiaEvaluations: new Array(moves.length).fill({}),
+    stockfishEvaluations: new Array(moves.length).fill(undefined),
+    tree,
+    type: 'custom-pgn' as const,
+    pgn,
+  } as AnalyzedGame
+}
+
+export const getAnalyzedCustomPGN = async (
+  pgn: string,
+  name?: string,
+): Promise<AnalyzedGame> => {
+  const { saveCustomAnalysis } = await import('src/utils/customAnalysis')
+
+  const stored = saveCustomAnalysis('pgn', pgn, name)
+
+  return createAnalyzedGameFromPGN(pgn, stored.id)
+}
+
+const createAnalyzedGameFromFEN = async (
+  fen: string,
+  id?: string,
+): Promise<AnalyzedGame> => {
+  const { Chess } = await import('chess.ts')
+  const chess = new Chess()
+
+  try {
+    chess.load(fen)
+  } catch (error) {
+    throw new Error('Invalid FEN format')
+  }
+
+  const moves = [
+    {
+      board: fen,
+      lastMove: undefined,
+      san: undefined,
+      check: chess.inCheck(),
+      maia_values: {},
+    },
+  ]
+
+  const tree = new GameTree(fen)
+
+  return {
+    id: id || `custom-fen-${Date.now()}`,
+    blackPlayer: { name: 'Black', rating: undefined },
+    whitePlayer: { name: 'White', rating: undefined },
+    moves,
+    availableMoves: [{}],
+    gameType: 'custom',
+    termination: {
+      result: '*',
+      winner: 'none',
+      condition: 'Normal',
+    },
+    maiaEvaluations: [{}],
+    stockfishEvaluations: [undefined],
+    tree,
+    type: 'custom-fen' as const,
+  } as AnalyzedGame
+}
+
+export const getAnalyzedCustomFEN = async (
+  fen: string,
+  name?: string,
+): Promise<AnalyzedGame> => {
+  const { saveCustomAnalysis } = await import('src/utils/customAnalysis')
+
+  const stored = saveCustomAnalysis('fen', fen, name)
+
+  return createAnalyzedGameFromFEN(fen, stored.id)
+}
+
+export const getAnalyzedCustomGame = async (
+  id: string,
+): Promise<AnalyzedGame> => {
+  const { getCustomAnalysisById } = await import('src/utils/customAnalysis')
+
+  const stored = getCustomAnalysisById(id)
+  if (!stored) {
+    throw new Error('Custom analysis not found')
+  }
+
+  if (stored.type === 'custom-pgn') {
+    return createAnalyzedGameFromPGN(stored.data, stored.id)
+  } else {
+    return createAnalyzedGameFromFEN(stored.data, stored.id)
+  }
+}
+
 export const getAnalyzedUserGame = async (
   id: string,
   game_type: 'play' | 'hand' | 'brain',

src/components/Analysis/AnalysisGameList.tsx

@@ -11,6 +11,7 @@ import { motion } from 'framer-motion'
 import { Tournament } from 'src/components'
 import { AnalysisListContext } from 'src/contexts'
 import { getAnalysisGameList } from 'src/api'
+import { getCustomAnalysesAsWebGames } from 'src/utils/customAnalysis'
 
 interface GameData {
   game_id: string
@@ -35,13 +36,22 @@ interface AnalysisGameListProps {
     type: 'play' | 'hand' | 'brain',
     setCurrentMove?: Dispatch<SetStateAction<number>>,
   ) => Promise<void>
+  loadNewCustomGame: (
+    id: string,
+    setCurrentMove?: Dispatch<SetStateAction<number>>,
+  ) => Promise<void>
+  onCustomAnalysis?: () => void
+  refreshTrigger?: number // Used to trigger refresh when custom analysis is added
 }
 
 export const AnalysisGameList: React.FC<AnalysisGameListProps> = ({
   currentId,
   loadNewTournamentGame,
   loadNewLichessGames,
   loadNewUserGames,
+  loadNewCustomGame,
+  onCustomAnalysis,
+  refreshTrigger,
 }) => {
   const {
     analysisPlayList,
@@ -57,6 +67,22 @@ export const AnalysisGameList: React.FC<AnalysisGameListProps> = ({
   const [localPlayGames, setLocalPlayGames] = useState(analysisPlayList)
   const [localHandGames, setLocalHandGames] = useState(analysisHandList)
   const [localBrainGames, setLocalBrainGames] = useState(analysisBrainList)
+  const [customAnalyses, setCustomAnalyses] = useState(() => {
+    if (typeof window !== 'undefined') {
+      return getCustomAnalysesAsWebGames()
+    }
+    return []
+  })
+
+  useEffect(() => {
+    setCustomAnalyses(getCustomAnalysesAsWebGames())
+  }, [refreshTrigger])
+
+  useEffect(() => {
+    if (currentId?.[0]?.startsWith('custom-')) {
+      setSelected('pgn')
+    }
+  }, [currentId])
 
   const [fetchedCache, setFetchedCache] = useState<{
     [key: string]: { [page: number]: boolean }
@@ -102,11 +128,18 @@ export const AnalysisGameList: React.FC<AnalysisGameListProps> = ({
 
   const [selected, setSelected] = useState<
     'tournament' | 'pgn' | 'play' | 'hand' | 'brain'
-  >(
-    ['pgn', 'play', 'hand', 'brain'].includes(currentId?.[1] ?? '')
-      ? (currentId?.[1] as 'pgn' | 'play' | 'hand' | 'brain')
-      : 'tournament',
-  )
+  >(() => {
+    // Check if currentId is a custom game (starts with 'custom-')
+    if (currentId?.[0]?.startsWith('custom-')) {
+      return 'pgn' // Custom games are in the pgn/Custom tab
+    }
+    // Check if it's one of the other specific types
+    if (['pgn', 'play', 'hand', 'brain'].includes(currentId?.[1] ?? '')) {
+      return currentId?.[1] as 'pgn' | 'play' | 'hand' | 'brain'
+    }
+
+    return 'tournament'
+  })
   const [loadingIndex, setLoadingIndex] = useState<number | null>(null)
   const [openIndex, setOpenIndex] = useState<number | null>(initialOpenIndex)
 
@@ -240,7 +273,7 @@ export const AnalysisGameList: React.FC<AnalysisGameListProps> = ({
             setSelected={handleTabChange}
           />
           <Header
-            label="Lichess"
+            label="Custom"
             name="pgn"
             selected={selected}
             setSelected={handleTabChange}
@@ -290,7 +323,7 @@ export const AnalysisGameList: React.FC<AnalysisGameListProps> = ({
                       ? localHandGames
                       : selected === 'brain'
                         ? localBrainGames
-                        : analysisLichessList
+                        : [...customAnalyses, ...analysisLichessList]
                   ).map((game, index) => {
                     const selectedGame = currentId && currentId[0] === game.id
                     return (
@@ -303,6 +336,11 @@ export const AnalysisGameList: React.FC<AnalysisGameListProps> = ({
                               game.id,
                               game.pgn as string,
                             )
+                          } else if (
+                            game.type === 'custom-pgn' ||
+                            game.type === 'custom-fen'
+                          ) {
+                            await loadNewCustomGame(game.id)
                           } else {
                             await loadNewUserGames(
                               game.id,
@@ -384,6 +422,19 @@ export const AnalysisGameList: React.FC<AnalysisGameListProps> = ({
             <p className="ml-2 text-xs text-secondary">₍^. .^₎⟆</p>
           </div>
         </div>
+        {onCustomAnalysis && (
+          <button
+            onClick={onCustomAnalysis}
+            className="flex w-full items-center gap-2 bg-background-4/40 px-3 py-1.5 transition duration-200 hover:bg-background-4/80"
+          >
+            <span className="material-symbols-outlined text-xs text-secondary">
+              add
+            </span>
+            <span className="text-xs text-secondary">
+              Analyze Custom PGN/FEN
+            </span>
+          </button>
+        )}
       </div>
     </div>
   ) : null

src/components/Analysis/ConfigurableScreens.tsx

@@ -11,6 +11,7 @@ interface Props {
   MAIA_MODELS: string[]
   game: AnalyzedGame
   currentNode: GameNode
+  onDeleteCustomGame?: () => void
 }
 
 export const ConfigurableScreens: React.FC<Props> = ({
@@ -20,6 +21,7 @@ export const ConfigurableScreens: React.FC<Props> = ({
   MAIA_MODELS,
   game,
   currentNode,
+  onDeleteCustomGame,
 }) => {
   const screens = [
     {
@@ -72,6 +74,8 @@ export const ConfigurableScreens: React.FC<Props> = ({
             setCurrentMaiaModel={setCurrentMaiaModel}
             launchContinue={launchContinue}
             MAIA_MODELS={MAIA_MODELS}
+            game={game}
+            onDeleteCustomGame={onDeleteCustomGame}
           />
         ) : screen.id === 'export' ? (
           <div className="flex w-full flex-col p-4">

src/components/Analysis/ConfigureAnalysis.tsx

@@ -1,6 +1,7 @@
 import Link from 'next/link'
 import React from 'react'
 import { useLocalStorage } from 'src/hooks'
+import { AnalyzedGame } from 'src/types'
 
 import { ContinueAgainstMaia } from 'src/components'
 
@@ -9,14 +10,20 @@ interface Props {
   setCurrentMaiaModel: (model: string) => void
   launchContinue: () => void
   MAIA_MODELS: string[]
+  game: AnalyzedGame
+  onDeleteCustomGame?: () => void
 }
 
 export const ConfigureAnalysis: React.FC<Props> = ({
   currentMaiaModel,
   setCurrentMaiaModel,
   launchContinue,
   MAIA_MODELS,
+  game,
+  onDeleteCustomGame,
 }: Props) => {
+  const isCustomGame = game.type === 'custom-pgn' || game.type === 'custom-fen'
+
   return (
     <div className="flex w-full flex-col items-start justify-start gap-1 p-4">
       <div className="flex w-full flex-col gap-0.5">
@@ -37,6 +44,16 @@ export const ConfigureAnalysis: React.FC<Props> = ({
         launchContinue={launchContinue}
         background="bg-human-4/60 hover:bg-human-4/80 text-primary/70 hover:text-primary !px-2 !py-1.5 !text-sm"
       />
+      {isCustomGame && onDeleteCustomGame && (
+        <div className="mt-2 w-full">
+          <button
+            onClick={onDeleteCustomGame}
+            className="text-xs text-secondary transition duration-200 hover:text-human-4"
+          >
+            <span className="underline">Delete</span> this stored Custom Game
+          </button>
+        </div>
+      )}
     </div>
   )
 }