feat: add configuration and export feature set

Author: kevinjosethomas

src/components/Analysis/ConfigureAnalysis.tsx

@@ -0,0 +1,51 @@
+import Link from 'next/link'
+import React from 'react'
+
+import { ContinueAgainstMaia } from 'src/components'
+
+interface Props {
+  currentMaiaModel: string
+  setCurrentMaiaModel: (model: string) => void
+  launchContinue: () => void
+  MAIA_MODELS: string[]
+}
+
+export const ConfigureAnalysis: React.FC<Props> = ({
+  currentMaiaModel,
+  setCurrentMaiaModel,
+  launchContinue,
+  MAIA_MODELS,
+}: Props) => {
+  return (
+    <div className="flex flex-col gap-2">
+      <div className="flex flex-col gap-0.5">
+        <p className="text-sm text-secondary">Analyze using:</p>
+        <select
+          value={currentMaiaModel}
+          className="cursor-pointer rounded border-none bg-human-4/40 p-2 text-primary/70 outline-none transition duration-300 hover:bg-human-4/60 hover:text-primary"
+          onChange={(e) => setCurrentMaiaModel(e.target.value)}
+        >
+          {MAIA_MODELS.map((model) => (
+            <option value={model} key={model}>
+              {model.replace('maia_kdd_', 'Maia ')}
+            </option>
+          ))}
+        </select>
+      </div>
+      <ContinueAgainstMaia
+        launchContinue={launchContinue}
+        background="bg-human-4/40 hover:bg-human-4/60 text-primary/70 hover:text-primary"
+      />
+      <p className="mt-2 text-sm text-secondary">
+        If you are having performance issues, you can switch to our legacy{' '}
+        <Link
+          href={window.location.href.replace('/analyze', '/analysis')}
+          className="text-primary/80 underline transition duration-200 hover:text-primary/100"
+        >
+          Analysis Lite
+        </Link>{' '}
+        to continue your analysis without Maia 2.
+      </p>
+    </div>
+  )
+}

src/components/Analysis/MovesByRating.tsx

@@ -141,8 +141,24 @@ export const MovesByRating: React.FC<Props> = ({
                       const prob = Math.round((point.value as number) * 10) / 10
                       return (
                         <div className="flex items-center justify-between px-3">
-                          <p className="text-xs">{san}</p>
-                          <p className="font-mono text-xs">{prob}%</p>
+                          <p
+                            style={{
+                              color:
+                                colorSanMapping[point.name as string].color,
+                            }}
+                            className="text-xs"
+                          >
+                            {san}
+                          </p>
+                          <p
+                            style={{
+                              color:
+                                colorSanMapping[point.name as string].color,
+                            }}
+                            className="font-mono text-xs"
+                          >
+                            {prob}%
+                          </p>
                         </div>
                       )
                     })}

src/components/Board/GameplayInterface.tsx

@@ -187,7 +187,7 @@ export const GameplayInterface: React.FC<Props> = (
                 game={game}
                 whitePlayer={whitePlayer ?? 'Unknown'}
                 blackPlayer={blackPlayer ?? 'Unknown'}
-                maiaVersion={maiaTitle}
+                event={`Play vs. ${maiaTitle}`}
               />
               <StatsDisplay stats={stats} hideSession={true} />
             </div>
@@ -277,7 +277,7 @@ export const GameplayInterface: React.FC<Props> = (
               game={game}
               whitePlayer={whitePlayer ?? 'Unknown'}
               blackPlayer={blackPlayer ?? 'Unknown'}
-              maiaVersion={maiaTitle}
+              event={`Play vs. ${maiaTitle}`}
             />
           </div>
         </div>

src/components/Misc/ContinueAgainstMaia.tsx

@@ -1,11 +1,15 @@
 interface Props {
   launchContinue: () => void
+  background?: string
 }
-export const ContinueAgainstMaia: React.FC<Props> = ({ launchContinue }) => {
+export const ContinueAgainstMaia: React.FC<Props> = ({
+  launchContinue,
+  background,
+}) => {
   return (
     <button
       onClick={launchContinue}
-      className="flex w-full items-center gap-1.5 rounded bg-human-4 px-3 py-2 transition duration-200 hover:bg-human-3"
+      className={`flex w-full items-center gap-1.5 rounded px-3 py-2 transition duration-200 ${background ? background : 'bg-human-4 hover:bg-human-3'}`}
     >
       <span className="material-symbols-outlined text-base">swords</span>
       <span>Play position against Maia</span>

src/components/Misc/ExportGame.tsx

@@ -9,14 +9,14 @@ interface Props {
   game: PlayedGame
   whitePlayer: string
   blackPlayer: string
-  maiaVersion: string
+  event: string
 }
 
 export const ExportGame: React.FC<Props> = ({
   game,
   whitePlayer,
   blackPlayer,
-  maiaVersion,
+  event,
 }) => {
   const [fen, setFen] = useState('')
   const [pgn, setPgn] = useState('')
@@ -35,7 +35,7 @@ export const ExportGame: React.FC<Props> = ({
   useEffect(() => {
     const initial = new Chess(game.moves[0].board)
     initial.addHeader('ID', game.id)
-    initial.addHeader('Event', `Play v. ${maiaVersion}`)
+    initial.addHeader('Event', event)
     initial.addHeader('Site', `https://maiachess.com/`)
     initial.addHeader('White', whitePlayer)
     initial.addHeader('Black', blackPlayer)
@@ -80,7 +80,7 @@ export const ExportGame: React.FC<Props> = ({
           role="button"
           tabIndex={0}
           onClick={() => copy(fen)}
-          className="border-1 group flex cursor-pointer overflow-x-hidden rounded border border-white/5 bg-background-1/50 px-4 py-2"
+          className="border-1 group flex cursor-pointer overflow-x-hidden rounded border border-white/5 bg-background-1/50 px-3 py-2"
         >
           <p className="whitespace-nowrap text-xs text-secondary group-hover:text-secondary/80">
             {fen}
@@ -105,7 +105,7 @@ export const ExportGame: React.FC<Props> = ({
           role="button"
           tabIndex={0}
           onClick={() => copy(pgn)}
-          className="border-1 group flex cursor-pointer overflow-x-hidden rounded border border-white/5 bg-background-1/50 px-4 py-2"
+          className="border-1 group flex max-h-32 cursor-pointer overflow-x-hidden overflow-y-scroll rounded border border-white/5 bg-background-1/50 p-3"
         >
           <p className="whitespace-pre-wrap text-xs text-secondary group-hover:text-secondary/80">
             {pgn}