Skip to content

Commit 281c022

Browse files
kevinjosethomaskevinjosethomas
committed
feat: condense move container components + condense controllers
1 parent 1e94e9e commit 281c022

17 files changed

Lines changed: 211 additions & 589 deletions

‎src/components/Analysis/ConfigurableScreens.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { motion } from 'framer-motion'
22
import React, { useState } from 'react'
33
import { ConfigureAnalysis } from 'src/components/Analysis/ConfigureAnalysis'
4-
import { AnalysisExportGame } from 'src/components/Misc/AnalysisExportGame'
4+
import { ExportGame } from 'src/components/Misc/ExportGame'
55
import { AnalyzedGame, GameNode } from 'src/types'
66

77
interface Props {
@@ -75,12 +75,13 @@ export const ConfigurableScreens: React.FC<Props> = ({
7575
/>
7676
) : screen.id === 'export' ? (
7777
<div className="flex w-full flex-col p-4">
78-
<AnalysisExportGame
78+
<ExportGame
7979
game={game}
8080
currentNode={currentNode}
8181
whitePlayer={game.whitePlayer.name}
8282
blackPlayer={game.blackPlayer.name}
8383
event="Analysis"
84+
type="analysis"
8485
/>
8586
</div>
8687
) : null}

‎src/components/Board/BoardController.tsx‎

Lines changed: 0 additions & 131 deletions
This file was deleted.

‎src/components/Board/GameplayTreeInterface.tsx‎

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import {
88
GameClock,
99
ExportGame,
1010
StatsDisplay,
11-
AnalysisMovesContainer,
11+
MovesContainer,
1212
TreeBoardController,
1313
PromotionOverlay,
1414
TreeGameBoard,
@@ -184,6 +184,7 @@ export const GameplayTreeInterface: React.FC<React.PropsWithChildren<Props>> = (
184184
whitePlayer={whitePlayer ?? 'Unknown'}
185185
blackPlayer={blackPlayer ?? 'Unknown'}
186186
event={`Play vs. ${maiaTitle}`}
187+
type="play"
187188
/>
188189
<StatsDisplay stats={stats} hideSession={true} />
189190
</div>
@@ -218,9 +219,10 @@ export const GameplayTreeInterface: React.FC<React.PropsWithChildren<Props>> = (
218219
/>
219220
) : null}
220221
<div className="relative bottom-0 h-full min-h-[38px] flex-1">
221-
<AnalysisMovesContainer
222+
<MovesContainer
222223
game={game}
223224
termination={game.termination}
225+
type="play"
224226
/>
225227
</div>
226228
<div>{props.children}</div>
@@ -294,9 +296,10 @@ export const GameplayTreeInterface: React.FC<React.PropsWithChildren<Props>> = (
294296
</div>
295297
<div className="w-full overflow-x-auto">
296298
<div className="flex flex-row whitespace-nowrap py-2">
297-
<AnalysisMovesContainer
299+
<MovesContainer
298300
game={game}
299301
termination={game.termination}
302+
type="play"
300303
/>
301304
</div>
302305
</div>
@@ -309,6 +312,7 @@ export const GameplayTreeInterface: React.FC<React.PropsWithChildren<Props>> = (
309312
whitePlayer={whitePlayer ?? 'Unknown'}
310313
blackPlayer={blackPlayer ?? 'Unknown'}
311314
event={`Play vs. ${maiaTitle}`}
315+
type="play"
312316
/>
313317
</div>
314318
</div>

src/components/Board/AnalysisMovesContainer.tsx renamed to src/components/Board/MovesContainer.tsx

Lines changed: 54 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,35 @@
11
/* eslint-disable jsx-a11y/no-static-element-interactions */
22
/* eslint-disable jsx-a11y/click-events-have-key-events */
3+
import { Tooltip } from 'react-tooltip'
34
import React, { useContext, useMemo, Fragment, useEffect } from 'react'
4-
import { TreeControllerContext, WindowSizeContext } from 'src/contexts'
5+
import { WindowSizeContext } from 'src/contexts'
56
import { GameNode, AnalyzedGame, Termination, ClientBaseGame } from 'src/types'
6-
import { Tooltip } from 'react-tooltip'
7+
import { TuringGame } from 'src/types/turing'
8+
import { useBaseTreeController } from 'src/hooks/useBaseTreeController'
79

8-
interface Props {
10+
interface AnalysisProps {
911
game: ClientBaseGame | AnalyzedGame
1012
highlightIndices?: number[]
1113
termination?: Termination
14+
type: 'analysis'
15+
}
16+
17+
interface TuringProps {
18+
game: TuringGame
19+
highlightIndices?: number[]
20+
termination?: Termination
21+
type: 'turing'
22+
}
23+
24+
interface PlayProps {
25+
game: ClientBaseGame
26+
highlightIndices?: number[]
27+
termination?: Termination
28+
type: 'play'
1229
}
1330

31+
type Props = AnalysisProps | TuringProps | PlayProps
32+
1433
function BlunderIcon() {
1534
return (
1635
<>
@@ -83,19 +102,21 @@ function UnlikelyGoodMoveIcon() {
83102
)
84103
}
85104

86-
export const AnalysisMovesContainer: React.FC<Props> = ({
87-
game,
88-
highlightIndices,
89-
termination,
90-
}: Props) => {
91-
const { currentNode, goToNode } = useContext(TreeControllerContext)
92-
105+
export const MovesContainer: React.FC<Props> = (props) => {
106+
const { game, highlightIndices, termination, type } = props
93107
const { isMobile } = useContext(WindowSizeContext)
94108

109+
const controller = useBaseTreeController(type)
110+
const { currentNode, goToNode, gameTree } = controller
111+
95112
const mainLineNodes = useMemo(() => {
96-
if (!game.tree) return []
97-
return game.tree.getMainLine()
98-
}, [game.tree])
113+
if (type === 'analysis') {
114+
if (!game.tree) return []
115+
return game.tree.getMainLine()
116+
} else {
117+
return gameTree.getMainLine()
118+
}
119+
}, [game, type, gameTree])
99120

100121
useEffect(() => {
101122
const handleKeyDown = (event: KeyboardEvent) => {
@@ -194,6 +215,8 @@ export const AnalysisMovesContainer: React.FC<Props> = ({
194215
return pairs
195216
}, [mainLineNodes, isMobile])
196217

218+
const showAnnotations = type === 'analysis'
219+
197220
if (isMobile) {
198221
return (
199222
<div className="w-full overflow-x-auto px-2">
@@ -213,8 +236,10 @@ export const AnalysisMovesContainer: React.FC<Props> = ({
213236
} ${highlightSet.has(pairIndex * 2 + 1) ? 'bg-human-3/80' : ''}`}
214237
>
215238
<span>{pair.whiteMove.san ?? pair.whiteMove.move}</span>
216-
{pair.whiteMove.blunder && <BlunderIcon />}
217-
{pair.whiteMove.unlikelyGoodMove && <UnlikelyGoodMoveIcon />}
239+
{showAnnotations && pair.whiteMove.blunder && <BlunderIcon />}
240+
{showAnnotations && pair.whiteMove.unlikelyGoodMove && (
241+
<UnlikelyGoodMoveIcon />
242+
)}
218243
</div>
219244
)}
220245
{pair.blackMove && (
@@ -227,8 +252,10 @@ export const AnalysisMovesContainer: React.FC<Props> = ({
227252
} ${highlightSet.has(pairIndex * 2 + 2) ? 'bg-human-3/80' : ''}`}
228253
>
229254
<span>{pair.blackMove.san ?? pair.blackMove.move}</span>
230-
{pair.blackMove.blunder && <BlunderIcon />}
231-
{pair.blackMove.unlikelyGoodMove && <UnlikelyGoodMoveIcon />}
255+
{showAnnotations && pair.blackMove.blunder && <BlunderIcon />}
256+
{showAnnotations && pair.blackMove.unlikelyGoodMove && (
257+
<UnlikelyGoodMoveIcon />
258+
)}
232259
</div>
233260
)}
234261
</React.Fragment>
@@ -266,10 +293,12 @@ export const AnalysisMovesContainer: React.FC<Props> = ({
266293
className={`col-span-2 flex h-7 flex-1 cursor-pointer flex-row items-center justify-between px-2 text-sm hover:bg-background-2 ${currentNode === whiteNode && 'bg-human-4/20'} ${highlightSet.has(index * 2 + 1) && 'bg-human-3/80'}`}
267294
>
268295
{whiteNode?.san ?? whiteNode?.move}
269-
{whiteNode?.blunder && <BlunderIcon />}
270-
{whiteNode?.unlikelyGoodMove && <UnlikelyGoodMoveIcon />}
296+
{showAnnotations && whiteNode?.blunder && <BlunderIcon />}
297+
{showAnnotations && whiteNode?.unlikelyGoodMove && (
298+
<UnlikelyGoodMoveIcon />
299+
)}
271300
</div>
272-
{whiteNode?.getVariations().length ? (
301+
{showAnnotations && whiteNode?.getVariations().length ? (
273302
<FirstVariation
274303
color="white"
275304
node={whiteNode}
@@ -285,10 +314,12 @@ export const AnalysisMovesContainer: React.FC<Props> = ({
285314
className={`col-span-2 flex h-7 flex-1 cursor-pointer flex-row items-center justify-between px-2 text-sm hover:bg-background-2 ${currentNode === blackNode && 'bg-human-4/20'} ${highlightSet.has(index * 2 + 2) && 'bg-human-3/80'}`}
286315
>
287316
{blackNode?.san ?? blackNode?.move}
288-
{blackNode?.blunder && <BlunderIcon />}
289-
{blackNode?.unlikelyGoodMove && <UnlikelyGoodMoveIcon />}
317+
{showAnnotations && blackNode?.blunder && <BlunderIcon />}
318+
{showAnnotations && blackNode?.unlikelyGoodMove && (
319+
<UnlikelyGoodMoveIcon />
320+
)}
290321
</div>
291-
{blackNode?.getVariations().length ? (
322+
{showAnnotations && blackNode?.getVariations().length ? (
292323
<FirstVariation
293324
color="black"
294325
node={blackNode}

0 commit comments

Comments
 (0)