fix: fix and standardize "Continue Against Maia" button on all pages

CSSLab · Nov 9, 2024 · ec625e2 · ec625e2
1 parent 2f2fea8
commit ec625e2
Show file tree

Hide file tree

Showing 7 changed files with 25 additions and 130 deletions.
diff --git a/src/components/Analysis/AnalysisInfo.tsx b/src/components/Analysis/AnalysisInfo.tsx
diff --git a/src/components/Analysis/index.ts b/src/components/Analysis/index.ts
@@ -1 +0,0 @@
-export * from './AnalysisInfo'

diff --git a/src/components/Core/ContinueAgainstMaia.tsx b/src/components/Core/ContinueAgainstMaia.tsx
@@ -0,0 +1,14 @@
+interface Props {
+  launchContinue: () => void
+}
+export const ContinueAgainstMaia: React.FC<Props> = ({ launchContinue }) => {
+  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"
+    >
+      <span className="material-symbols-outlined text-base">swords</span>
+      <span>Play position against Maia</span>
+    </button>
+  )
+}
diff --git a/src/components/Core/index.ts b/src/components/Core/index.ts
@@ -1 +1,2 @@
 export * from './GameInfo'
+export * from './ContinueAgainstMaia'
diff --git a/src/pages/analysis/[...id].tsx b/src/pages/analysis/[...id].tsx
@@ -21,18 +21,17 @@ import {
 import {
   Loading,
   MovePlot,
+  BlunderMeter,
   BoardController,
   AuthenticatedWrapper,
   VerticalEvaluationBar,
-  BlunderMeter,
 } from 'src/components'
 import { Color } from 'src/types'
-import { GameInfo } from 'src/components/Core'
 import { useAnalysisController } from 'src/hooks'
-import { AnalysisInfo } from 'src/components/Analysis'
 import { AnalyzedGame, MoveMap } from 'src/types/analysis'
 import { MovesContainer } from 'src/components/MovesContainer'
 import { GameBoard } from 'src/components/GameBoard/GameBoard'
+import { GameInfo, ContinueAgainstMaia } from 'src/components/Core'
 import { ThemeContext, ModalContext, WindowSizeContext } from 'src/contexts'
 import AnalysisGameList from 'src/components/AnalysisGameList/AnalysisGameList'
 import { HorizontalEvaluationBar } from 'src/components/HorizontalEvaluationBar'
@@ -336,15 +335,7 @@ const Analysis: React.FC<Props> = ({
               </select>
             </div>
 
-            <button
-              onClick={launchContinue}
-              className="flex w-full items-center gap-1.5 rounded bg-human-3 px-3 py-2 transition duration-200 hover:bg-human-4"
-            >
-              <span className="material-symbols-outlined text-base">
-                swords
-              </span>
-              <span>Play position against Maia</span>
-            </button>
+            <ContinueAgainstMaia launchContinue={launchContinue} />
 
             {listController}
           </div>
@@ -561,15 +552,7 @@ const Analysis: React.FC<Props> = ({
                 ))}
               </select>
             </div>
-            <button
-              onClick={launchContinue}
-              className="flex w-full items-center gap-1.5 bg-human-3 px-3 py-2 transition duration-200 hover:bg-human-4"
-            >
-              <span className="material-symbols-outlined text-base">
-                swords
-              </span>
-              <span>Play position against Maia</span>
-            </button>
+            <ContinueAgainstMaia launchContinue={launchContinue} />
             {listController}
           </div>
         </div>

diff --git a/src/pages/train.tsx b/src/pages/train.tsx
@@ -30,7 +30,7 @@ import {
   VerticalEvaluationBar,
   PositionEvaluationContainer,
 } from 'src/components'
-import { GameInfo } from 'src/components/Core'
+import { GameInfo, ContinueAgainstMaia } from 'src/components/Core'
 import { PuzzleLog } from 'src/components/Train'
 import { useTrainingController } from 'src/hooks'
 import { AllStats, useStats } from 'src/hooks/useStats'
@@ -312,15 +312,7 @@ const Train: React.FC<Props> = ({
                 )}
               </p>
             </GameInfo>
-            <button
-              onClick={launchContinue}
-              className="flex w-full items-center gap-1.5 rounded bg-human-3 px-3 py-2 transition duration-200 hover:bg-human-4"
-            >
-              <span className="material-symbols-outlined text-base">
-                swords
-              </span>
-              <span>Play position against Maia</span>
-            </button>
+            <ContinueAgainstMaia launchContinue={launchContinue} />
             {gamesController}
             <StatsDisplay stats={stats} />
           </div>
@@ -488,15 +480,7 @@ const Train: React.FC<Props> = ({
             <div className="w-full flex-none">
               <PositionEvaluationContainer moveEvaluation={moveEvaluation} />
             </div>
-            <button
-              onClick={launchContinue}
-              className="flex w-full items-center gap-1.5 bg-human-3 px-3 py-2 transition duration-200 hover:bg-human-4"
-            >
-              <span className="material-symbols-outlined text-base">
-                swords
-              </span>
-              <span>Play position against Maia</span>
-            </button>
+            <ContinueAgainstMaia launchContinue={launchContinue} />
           </div>
         </div>
       </div>

diff --git a/src/pages/turing.tsx b/src/pages/turing.tsx
@@ -17,11 +17,11 @@ import {
   BoardController,
   TuringSubmission,
 } from 'src/components'
-import { GameInfo } from 'src/components/Core'
 import { AllStats } from 'src/hooks/useStats'
 import { TuringGame } from 'src/types/turing'
 import { StatsDisplay } from 'src/components/StatsDisplay'
 import { useGameController, useTuringController } from 'src/hooks'
+import { GameInfo, ContinueAgainstMaia } from 'src/components/Core'
 
 const TuringPage: NextPage = () => {
   const { openedModals, setInstructionsModalProps: setInstructionsModalProps } =
@@ -117,9 +117,7 @@ const Turing: React.FC<Props> = (props: Props) => {
               <GameInfo title="Bot or Not" icon="smart_toy" type="turing">
                 {Info}
               </GameInfo>
-              <div className="flex w-full items-center rounded bg-human-3 px-4 py-2 transition duration-200 hover:bg-human-4">
-                <button onClick={launchContinue}>Continue against Maia</button>
-              </div>
+              <ContinueAgainstMaia launchContinue={launchContinue} />
               <div className="flex flex-row flex-wrap items-start justify-start gap-1 overflow-y-auto">
                 <TuringGames />
               </div>
@@ -175,12 +173,7 @@ const Turing: React.FC<Props> = (props: Props) => {
               <TuringSubmission />
             </div>
             <div className="flex w-full">
-              <button
-                onClick={launchContinue}
-                className="flex w-full flex-1 items-center rounded bg-human-3 px-4 py-2 transition duration-200 hover:bg-human-4"
-              >
-                Continue Against Maia
-              </button>
+              <ContinueAgainstMaia launchContinue={launchContinue} />
             </div>
           </div>
         </div>