fix: build errors

.eslintrc

@@ -25,6 +25,7 @@
     "@next/next/no-page-custom-font": "off",
     "@next/next/no-duplicate-head": "off",
     "@next/next/no-typos": "off",
+    "@next/next/no-before-interactive-script-outside-document": "off",
   },
   "overrides": [
     {

src/api/analysis/analysis.ts

@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
 import {
   Player,
   MoveMap,
@@ -28,7 +27,7 @@ const readStream = (processLine: (data: any) => void) => (response: any) => {
         })
         buf += chunk
 
-        const parts = buf.split(matcher)
+        const parts = (buf || '').split(matcher)
         buf = parts.pop() as string
         for (const i of parts.filter((p) => p)) processLine(JSON.parse(i))
 
@@ -317,11 +316,11 @@ export const getLegacyAnalyzedUserGame = async (
 
   const maiaPattern = /maia_kdd_1\d00/
 
-  if (maiaPattern.test(blackPlayer.name)) {
+  if (blackPlayer.name && maiaPattern.test(blackPlayer.name)) {
     blackPlayer.name = blackPlayer.name.replace('maia_kdd_', 'Maia ')
   }
 
-  if (maiaPattern.test(whitePlayer.name)) {
+  if (whitePlayer.name && maiaPattern.test(whitePlayer.name)) {
     whitePlayer.name = whitePlayer.name.replace('maia_kdd_', 'Maia ')
   }
 
@@ -601,11 +600,11 @@ export const getClientAnalyzedUserGame = async (
 
   const maiaPattern = /maia_kdd_1\d00/
 
-  if (maiaPattern.test(blackPlayer.name)) {
+  if (blackPlayer.name && maiaPattern.test(blackPlayer.name)) {
     blackPlayer.name = blackPlayer.name.replace('maia_kdd_', 'Maia ')
   }
 
-  if (maiaPattern.test(whitePlayer.name)) {
+  if (whitePlayer.name && maiaPattern.test(whitePlayer.name)) {
     whitePlayer.name = whitePlayer.name.replace('maia_kdd_', 'Maia ')
   }
 

src/components/Analysis/AnalysisGameList.tsx

@@ -1,4 +1,4 @@
-import {
+import React, {
   useRef,
   useMemo,
   Dispatch,
@@ -123,11 +123,13 @@ export const AnalysisGameList: React.FC<AnalysisGameListProps> = ({
                   index={i}
                   openIndex={openIndex}
                   currentId={currentId}
-                  openElement={openElement}
+                  openElement={openElement as React.RefObject<HTMLDivElement>}
                   setOpenIndex={setOpenIndex}
                   loadingIndex={loadingIndex}
                   setLoadingIndex={setLoadingIndex}
-                  selectedGameElement={selectedGameElement}
+                  selectedGameElement={
+                    selectedGameElement as React.RefObject<HTMLButtonElement>
+                  }
                   loadNewTournamentGame={loadNewTournamentGame}
                   analysisTournamentList={analysisTournamentList}
                   setCurrentMove={controller.setCurrentIndex}

src/components/Analysis/LegacyAnalysisGameList.tsx

@@ -150,11 +150,13 @@ export const LegacyAnalysisGameList: React.FC<LegacyAnalysisGameListProps> = ({
               index={i}
               openIndex={openIndex}
               currentId={currentId}
-              openElement={openElement}
+              openElement={openElement as React.RefObject<HTMLDivElement>}
               setOpenIndex={setOpenIndex}
               loadingIndex={loadingIndex}
               setLoadingIndex={setLoadingIndex}
-              selectedGameElement={selectedGameElement}
+              selectedGameElement={
+                selectedGameElement as React.RefObject<HTMLButtonElement>
+              }
               loadNewTournamentGame={loadNewTournamentGame}
               analysisTournamentList={analysisTournamentList}
               setCurrentMove={controller.setCurrentIndex}

src/components/Board/GameplayInterface.tsx

@@ -29,7 +29,7 @@ interface Props {
   playAgain?: () => void
 }
 
-export const GameplayInterface: React.FC<Props> = (
+export const GameplayInterface: React.FC<React.PropsWithChildren<Props>> = (
   props: React.PropsWithChildren<Props>,
 ) => {
   const {
@@ -57,7 +57,7 @@ export const GameplayInterface: React.FC<Props> = (
   const setCurrentIndex = controller.setCurrentIndex
 
   const setCurrentMove = useCallback(
-    (move) => {
+    (move: [string, string] | null) => {
       if (move) {
         const matching = availableMoves.filter(
           (m) => m.from == move[0] && m.to == move[1],
@@ -78,7 +78,7 @@ export const GameplayInterface: React.FC<Props> = (
   )
 
   const selectPromotion = useCallback(
-    (piece) => {
+    (piece: string) => {
       if (!promotionFromTo) {
         return
       }

src/components/Core/Header.tsx

@@ -5,6 +5,7 @@ import Image from 'next/image'
 import { useRouter } from 'next/router'
 import { useCallback, useContext, useEffect, useState } from 'react'
 
+import { PlayType } from 'src/types'
 import { ThemeButton } from 'src/components'
 import { AuthContext, ModalContext, WindowSizeContext } from 'src/contexts'
 import { MenuIcon, UserIcon, DiscordIcon } from 'src/components/Icons/icons'
@@ -20,7 +21,7 @@ export const Header: React.FC = () => {
   const { setPlaySetupModalProps } = useContext(ModalContext)
 
   const startGame = useCallback(
-    (playType) => {
+    (playType: PlayType) => {
       if (document.activeElement instanceof HTMLElement) {
         document.activeElement.blur()
       }

src/components/Core/Markdown.tsx

@@ -10,47 +10,47 @@ export const Markdown: React.FC<Props> = ({ children: markdown }: Props) => (
     components={{
       h1: ({ children }) => (
         <h1
-          id={children.toString().toLowerCase()}
+          id={children?.toString().toLowerCase()}
           className="text-4xl font-bold"
         >
           {children}
         </h1>
       ),
       h2: ({ children }) => (
         <h2
-          id={children.toString().toLowerCase()}
+          id={children?.toString().toLowerCase()}
           className="text-3xl font-bold"
         >
           {children}
         </h2>
       ),
       h3: ({ children }) => (
         <h3
-          id={children.toString().toLowerCase()}
+          id={children?.toString().toLowerCase()}
           className="text-2xl font-semibold"
         >
           {children}
         </h3>
       ),
       h4: ({ children }) => (
         <h4
-          id={children.toString().toLowerCase()}
+          id={children?.toString().toLowerCase()}
           className="text-xl font-semibold"
         >
           {children}
         </h4>
       ),
       h5: ({ children }) => (
         <h5
-          id={children.toString().toLowerCase()}
+          id={children?.toString().toLowerCase()}
           className="text-lg font-medium"
         >
           {children}
         </h5>
       ),
       h6: ({ children }) => (
         <h6
-          id={children.toString().toLowerCase()}
+          id={children?.toString().toLowerCase()}
           className="text-base font-medium"
         >
           {children}

src/components/Home/HomeHero.tsx

@@ -9,6 +9,7 @@ import {
   TrainIcon,
   RegularPlayIcon,
 } from 'src/components/Icons/icons'
+import { PlayType } from 'src/types'
 import { getPlayerStats } from 'src/api/home'
 import { AuthContext, ModalContext } from 'src/contexts'
 
@@ -20,7 +21,7 @@ export const HomeHero: React.FC<Props> = ({ scrollHandler }: Props) => {
   const { setPlaySetupModalProps } = useContext(ModalContext)
 
   const startGame = useCallback(
-    (playType) => {
+    (playType: PlayType) => {
       setPlaySetupModalProps({ playType: playType })
     },
     [setPlaySetupModalProps],

src/components/Leaderboard/LeaderboardColumn.tsx

@@ -1,9 +1,10 @@
+import React from 'react'
 import { LeaderboardEntry } from 'src/components'
 
 interface Props {
   id: 'regular' | 'train' | 'turing' | 'hand' | 'brain'
   name: 'Regular' | 'Train' | 'Bot/Not' | 'Hand' | 'Brain'
-  icon: JSX.Element
+  icon: React.JSX.Element
   ranking: {
     display_name: string
     elo: number

src/components/Profile/ProfileColumn.tsx

@@ -1,5 +1,7 @@
+import React from 'react'
+
 interface Props {
-  icon: JSX.Element
+  icon: React.JSX.Element
   name: string
   data: {
     rating: number

src/pages/_app.tsx

@@ -2,6 +2,7 @@ import Head from 'next/head'
 import Script from 'next/script'
 import { useRouter } from 'next/router'
 import type { AppProps } from 'next/app'
+import { Open_Sans } from 'next/font/google'
 import { Analytics } from '@vercel/analytics/react'
 
 import {
@@ -14,11 +15,13 @@ import {
 import 'src/styles/globals.scss'
 import 'src/styles/tailwind.css'
 import 'react-tooltip/dist/react-tooltip.css'
-import 'chessground/assets/chessground.base.css'
-import 'chessground/assets/chessground.brown.css'
-import 'chessground/assets/chessground.cburnett.css'
+import 'node_modules/chessground/assets/chessground.base.css'
+import 'node_modules/chessground/assets/chessground.brown.css'
+import 'node_modules/chessground/assets/chessground.cburnett.css'
 import { Footer, Compose, ErrorBoundary, Header } from 'src/components'
 
+const OpenSans = Open_Sans({ subsets: ['latin'] })
+
 function MaiaPlatform({ Component, pageProps }: AppProps) {
   const router = useRouter()
   const isAnalysisPage = router.pathname.startsWith('/analysis')
@@ -37,7 +40,7 @@ function MaiaPlatform({ Component, pageProps }: AppProps) {
       <Head>
         <link rel="icon" type="image/png" href="/favicon.png" />
       </Head>
-      <div className="app-container">
+      <div className={`${OpenSans.className} app-container`}>
         <Header />
         <div className="content-container">
           <Component {...pageProps} />

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

@@ -109,7 +109,7 @@ const AnalysisPage: NextPage = () => {
     ) => {
       let game
       try {
-        game = await getClientAnalyzedLichessGame(id, pgn, currentMaiaModel)
+        game = await getClientAnalyzedLichessGame(id, pgn)
       } catch (e) {
         router.push('/401')
         return
@@ -134,7 +134,7 @@ const AnalysisPage: NextPage = () => {
     ) => {
       let game
       try {
-        game = await getClientAnalyzedUserGame(id, type, currentMaiaModel)
+        game = await getClientAnalyzedUserGame(id, type)
       } catch (e) {
         router.push('/401')
         return
@@ -258,7 +258,7 @@ const Analysis: React.FC<Props> = ({
   const isMobile = useMemo(() => width > 0 && width <= 670, [width])
   const [hoverArrow, setHoverArrow] = useState<DrawShape | null>(null)
   const [arrows, setArrows] = useState<DrawShape[]>([])
-  const [brushes, setBrushes] = useState<DrawBrushes>({})
+  const [brushes, setBrushes] = useState<DrawBrushes>({} as DrawBrushes)
   const [screen, setScreen] = useState(screens[0])
 
   useEffect(() => {

src/pages/leaderboard.tsx

@@ -1,3 +1,4 @@
+import React from 'react'
 import Head from 'next/head'
 import { useCallback, useEffect, useState } from 'react'
 
@@ -15,7 +16,7 @@ const Leaderboard: React.FC = () => {
   const [lastUpdated, setLastUpdated] = useState<Date | null>(null)
   const [leaderboard, setLeaderboard] = useState<
     {
-      icon: JSX.Element
+      icon: React.JSX.Element
       ranking: { display_name: string; elo: number }[]
       name: 'Regular' | 'Train' | 'Bot/Not' | 'Hand' | 'Brain'
       id: 'regular' | 'train' | 'turing' | 'hand' | 'brain'

src/pages/train.tsx

@@ -97,7 +97,13 @@ const TrainPage: NextPage = () => {
   }, [currentIndex])
 
   const logGuess = useCallback(
-    async (gameId, move, status, setStatus, rating) => {
+    async (
+      gameId: string,
+      move: [string, string] | null,
+      status: Status,
+      setStatus: Dispatch<SetStateAction<Status>>,
+      rating: number,
+    ) => {
       if (currentIndex != trainingGames.length - 1) {
         return // No logging for past puzzles
       }
@@ -206,7 +212,7 @@ interface Props {
   getNewGame: () => Promise<void>
   logGuess: (
     gameId: string,
-    move: string[] | null,
+    move: [string, string] | null,
     status: Status,
     setStatus: Dispatch<SetStateAction<Status>>,
     rating: number,