Skip to content

Commit 45507d3

Browse files
kevinjosethomaskevinjosethomas
committed
feat: clean up play page conventions
1 parent 2c6ca3f commit 45507d3

11 files changed

Lines changed: 245 additions & 250 deletions

File tree

‎src/components/Board/GameBoard.tsx‎

Lines changed: 15 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,24 @@
11
/* eslint-disable @typescript-eslint/no-explicit-any */
22
import { Chess } from 'chess.ts'
3+
import { useChessSound } from 'src/hooks'
34
import { defaults } from 'chessground/state'
4-
import { useCallback, useMemo, Dispatch, SetStateAction } from 'react'
55
import type { Key } from 'chessground/types'
66
import Chessground from '@react-chess/chessground'
7+
import { BaseGame, Check, GameNode, Color } from 'src/types'
78
import type { DrawBrushes, DrawShape } from 'chessground/draw'
8-
9-
import { useChessSound } from 'src/hooks'
10-
import { BaseGame, Check, GameNode, BaseGame, Color } from 'src/types'
9+
import { useCallback, useMemo, Dispatch, SetStateAction } from 'react'
1110

1211
interface Props {
13-
game?: BaseGame | BaseGame
12+
game?: BaseGame
1413
currentNode: GameNode
1514
orientation?: Color
16-
moves?: Map<string, string[]>
15+
availableMoves?: Map<string, string[]>
1716
move?: {
1817
fen: string
1918
move: [string, string]
2019
check?: Check
2120
}
22-
setCurrentMove?: (move: [string, string] | null) => void
21+
onPlayerMakeMove?: (move: [string, string] | null) => void
2322
setCurrentSquare?: Dispatch<SetStateAction<Key | null>>
2423
shapes?: DrawShape[]
2524
brushes?: DrawBrushes
@@ -31,9 +30,9 @@ export const GameBoard: React.FC<Props> = ({
3130
game,
3231
currentNode,
3332
orientation = 'white',
34-
moves,
33+
availableMoves,
3534
move,
36-
setCurrentMove,
35+
onPlayerMakeMove,
3736
setCurrentSquare,
3837
shapes,
3938
brushes,
@@ -44,12 +43,10 @@ export const GameBoard: React.FC<Props> = ({
4443

4544
const after = useCallback(
4645
(from: string, to: string) => {
47-
if (setCurrentMove) setCurrentMove([from, to])
46+
if (onPlayerMakeMove) onPlayerMakeMove([from, to])
4847
if (setCurrentSquare) setCurrentSquare(null)
4948

50-
// Determine current FEN for sound calculation
5149
const currentFen = currentNode.fen
52-
5350
if (currentFen) {
5451
const chess = new Chess(currentFen)
5552
const pieceAtDestination = chess.get(to)
@@ -92,14 +89,14 @@ export const GameBoard: React.FC<Props> = ({
9289
}
9390
},
9491
[
95-
setCurrentMove,
96-
setCurrentSquare,
97-
currentNode,
9892
move,
9993
game,
100-
playSound,
10194
gameTree,
10295
goToNode,
96+
playSound,
97+
currentNode,
98+
onPlayerMakeMove,
99+
setCurrentSquare,
103100
],
104101
)
105102

@@ -133,14 +130,14 @@ export const GameBoard: React.FC<Props> = ({
133130
config={{
134131
movable: {
135132
free: false,
136-
dests: moves as any,
133+
dests: availableMoves as any,
137134
events: {
138135
after,
139136
},
140137
},
141138
events: {
142139
select: (key) => {
143-
setCurrentMove && setCurrentMove(null)
140+
onPlayerMakeMove && onPlayerMakeMove(null)
144141
setCurrentSquare && setCurrentSquare(key)
145142
},
146143
},

‎src/components/Board/GameplayInterface.tsx‎

Lines changed: 35 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,18 @@
1-
import Head from 'next/head'
2-
import type { DrawShape } from 'chessground/draw'
3-
import { useCallback, useContext, useMemo, useState } from 'react'
4-
5-
import { AuthContext, ThemeContext, WindowSizeContext } from 'src/contexts'
61
import {
72
GameInfo,
3+
GameBoard,
84
GameClock,
95
ExportGame,
106
StatsDisplay,
7+
PromotionOverlay,
118
MovesContainer,
129
BoardController,
13-
PromotionOverlay,
14-
GameBoard,
1510
} from 'src/components'
11+
import Head from 'next/head'
1612
import { useUnload } from 'src/hooks/useUnload'
13+
import type { DrawShape } from 'chessground/draw'
14+
import { useCallback, useContext, useMemo, useState } from 'react'
15+
import { AuthContext, ThemeContext, WindowSizeContext } from 'src/contexts'
1716
import { PlayControllerContext } from 'src/contexts/PlayControllerContext/PlayControllerContext'
1817

1918
interface Props {
@@ -28,64 +27,61 @@ export const GameplayInterface: React.FC<React.PropsWithChildren<Props>> = (
2827
) => {
2928
const {
3029
game,
31-
playType,
32-
maiaVersion,
33-
availableMoves,
34-
makeMove,
35-
player,
36-
timeControl,
3730
stats,
31+
player,
32+
playType,
3833
gameTree,
34+
goToNode,
35+
plyCount,
3936
orientation,
40-
setOrientation,
37+
timeControl,
4138
currentNode,
42-
setCurrentNode,
43-
goToNode,
39+
maiaVersion,
40+
goToRootNode,
4441
goToNextNode,
42+
availableMoves,
43+
makePlayerMove,
44+
setOrientation,
4545
goToPreviousNode,
46-
goToRootNode,
47-
plyCount,
4846
} = useContext(PlayControllerContext)
4947
const { theme } = useContext(ThemeContext)
50-
const { isMobile } = useContext(WindowSizeContext)
51-
5248
const { user } = useContext(AuthContext)
49+
const { isMobile } = useContext(WindowSizeContext)
5350

5451
const [promotionFromTo, setPromotionFromTo] = useState<
5552
[string, string] | null
5653
>(null)
5754

58-
const setCurrentMove = useCallback(
55+
const onPlayerMakeMove = useCallback(
5956
(move: [string, string] | null) => {
6057
if (move) {
61-
const matching = availableMoves.filter((m: any) => {
58+
const matching = availableMoves.filter((m) => {
6259
return m.from == move[0] && m.to == move[1]
6360
})
6461

6562
if (matching.length > 1) {
6663
// Multiple matching moves (i.e. promotion)
67-
// Show promotion UI
6864
setPromotionFromTo(move)
6965
} else {
7066
const moveUci =
7167
matching[0].from + matching[0].to + (matching[0].promotion ?? '')
72-
makeMove(moveUci)
68+
makePlayerMove(moveUci)
7369
}
7470
}
7571
},
76-
[availableMoves, makeMove, setPromotionFromTo],
72+
[availableMoves, makePlayerMove, setPromotionFromTo],
7773
)
7874

79-
const selectPromotion = useCallback(
75+
const onPlayerSelectPromotion = useCallback(
8076
(piece: string) => {
8177
if (!promotionFromTo) {
8278
return
8379
}
8480
setPromotionFromTo(null)
8581
const moveUci = promotionFromTo[0] + promotionFromTo[1] + piece
86-
makeMove(moveUci)
82+
makePlayerMove(moveUci)
8783
},
88-
[promotionFromTo, setPromotionFromTo, makeMove],
84+
[promotionFromTo, setPromotionFromTo, makePlayerMove],
8985
)
9086

9187
useUnload((e) => {
@@ -95,7 +91,7 @@ export const GameplayInterface: React.FC<React.PropsWithChildren<Props>> = (
9591
}
9692
})
9793

98-
const moveMap = useMemo(() => {
94+
const availableMovesMapped = useMemo(() => {
9995
const result = new Map()
10096

10197
for (const move of availableMoves) {
@@ -181,6 +177,7 @@ export const GameplayInterface: React.FC<React.PropsWithChildren<Props>> = (
181177
<ExportGame
182178
game={game}
183179
gameTree={gameTree}
180+
currentNode={currentNode}
184181
whitePlayer={whitePlayer ?? 'Unknown'}
185182
blackPlayer={blackPlayer ?? 'Unknown'}
186183
event={`Play vs. ${maiaTitle}`}
@@ -192,17 +189,17 @@ export const GameplayInterface: React.FC<React.PropsWithChildren<Props>> = (
192189
<div className="relative flex aspect-square w-full max-w-[75vh]">
193190
<GameBoard
194191
game={game}
195-
moves={moveMap}
196-
setCurrentMove={setCurrentMove}
192+
availableMoves={availableMovesMapped}
193+
onPlayerMakeMove={onPlayerMakeMove}
197194
shapes={props.boardShapes}
198-
currentNode={currentNode!}
195+
currentNode={currentNode}
199196
orientation={orientation}
200197
/>
201198
{promotionFromTo ? (
202199
<PromotionOverlay
203200
player={player}
204201
file={promotionFromTo[1].slice(0)}
205-
selectPromotion={selectPromotion}
202+
onPlayerSelectPromotion={onPlayerSelectPromotion}
206203
/>
207204
) : null}
208205
</div>
@@ -263,17 +260,17 @@ export const GameplayInterface: React.FC<React.PropsWithChildren<Props>> = (
263260
<div className="relative flex aspect-square h-[100vw] w-screen">
264261
<GameBoard
265262
game={game}
266-
moves={moveMap}
267-
setCurrentMove={setCurrentMove}
263+
availableMoves={availableMovesMapped}
264+
onPlayerMakeMove={onPlayerMakeMove}
268265
shapes={props.boardShapes}
269-
currentNode={currentNode!}
266+
currentNode={currentNode}
270267
orientation={orientation}
271268
/>
272269
{promotionFromTo ? (
273270
<PromotionOverlay
274271
player={player}
275272
file={promotionFromTo[1].slice(0)}
276-
selectPromotion={selectPromotion}
273+
onPlayerSelectPromotion={onPlayerSelectPromotion}
277274
/>
278275
) : null}
279276
</div>
@@ -309,6 +306,7 @@ export const GameplayInterface: React.FC<React.PropsWithChildren<Props>> = (
309306
<ExportGame
310307
game={game}
311308
gameTree={gameTree}
309+
currentNode={currentNode}
312310
whitePlayer={whitePlayer ?? 'Unknown'}
313311
blackPlayer={blackPlayer ?? 'Unknown'}
314312
event={`Play vs. ${maiaTitle}`}

‎src/components/Board/PromotionOverlay.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,12 +7,12 @@ import { TreeControllerContext } from 'src/contexts'
77
interface Props {
88
player: Color
99
file: string
10-
selectPromotion: (piece: string) => void
10+
onPlayerSelectPromotion: (piece: string) => void
1111
}
1212

1313
export const PromotionOverlay: React.FC<Props> = ({
1414
file,
15-
selectPromotion,
15+
onPlayerSelectPromotion,
1616
}: Props) => {
1717
const { orientation } = useContext(TreeControllerContext)
1818

@@ -43,7 +43,7 @@ export const PromotionOverlay: React.FC<Props> = ({
4343
return (
4444
<button
4545
key={piece}
46-
onClick={() => selectPromotion(piece)}
46+
onClick={() => onPlayerSelectPromotion(piece)}
4747
className="flex h-1/4 w-full items-center justify-center bg-engine-3 hover:bg-engine-4"
4848
>
4949
{/* eslint-disable-next-line @next/next/no-img-element */}

‎src/contexts/PlayControllerContext/PlayControllerContext.ts‎

Lines changed: 24 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,32 @@
11
import React from 'react'
22
import { Chess } from 'chess.ts'
33
import { GameTree } from 'src/types'
4-
import { usePlayMaiaController } from 'src/hooks/usePlayController'
4+
import { usePlayController } from 'src/hooks/usePlayController'
55
import { BaseTreeControllerContext } from '../BaseTreeControllerContext'
66

77
export interface IPlayControllerContext extends BaseTreeControllerContext {
8-
game: ReturnType<typeof usePlayMaiaController>['game']
9-
playType: ReturnType<typeof usePlayMaiaController>['playType']
10-
timeControl: ReturnType<typeof usePlayMaiaController>['timeControl']
11-
player: ReturnType<typeof usePlayMaiaController>['player']
12-
maiaVersion: ReturnType<typeof usePlayMaiaController>['maiaVersion']
13-
playerActive: ReturnType<typeof usePlayMaiaController>['playerActive']
14-
toPlay: ReturnType<typeof usePlayMaiaController>['toPlay']
15-
moves: ReturnType<typeof usePlayMaiaController>['moves']
16-
availableMoves: ReturnType<typeof usePlayMaiaController>['availableMoves']
17-
pieces: ReturnType<typeof usePlayMaiaController>['pieces']
18-
moveList: ReturnType<typeof usePlayMaiaController>['moveList']
19-
whiteClock: ReturnType<typeof usePlayMaiaController>['whiteClock']
20-
blackClock: ReturnType<typeof usePlayMaiaController>['blackClock']
21-
lastMoveTime: ReturnType<typeof usePlayMaiaController>['lastMoveTime']
22-
stats: ReturnType<typeof usePlayMaiaController>['stats']
23-
setResigned: ReturnType<typeof usePlayMaiaController>['setResigned']
24-
reset: ReturnType<typeof usePlayMaiaController>['reset']
25-
makeMove: ReturnType<typeof usePlayMaiaController>['makeMove']
26-
updateClock: ReturnType<typeof usePlayMaiaController>['updateClock']
27-
setCurrentNode: ReturnType<typeof usePlayMaiaController>['setCurrentNode']
28-
addMove: ReturnType<typeof usePlayMaiaController>['addMove']
29-
addMoveWithTime: ReturnType<typeof usePlayMaiaController>['addMoveWithTime']
8+
game: ReturnType<typeof usePlayController>['game']
9+
playType: ReturnType<typeof usePlayController>['playType']
10+
timeControl: ReturnType<typeof usePlayController>['timeControl']
11+
player: ReturnType<typeof usePlayController>['player']
12+
maiaVersion: ReturnType<typeof usePlayController>['maiaVersion']
13+
playerActive: ReturnType<typeof usePlayController>['playerActive']
14+
toPlay: ReturnType<typeof usePlayController>['toPlay']
15+
moves: ReturnType<typeof usePlayController>['moves']
16+
availableMoves: ReturnType<typeof usePlayController>['availableMoves']
17+
pieces: ReturnType<typeof usePlayController>['pieces']
18+
moveList: ReturnType<typeof usePlayController>['moveList']
19+
whiteClock: ReturnType<typeof usePlayController>['whiteClock']
20+
blackClock: ReturnType<typeof usePlayController>['blackClock']
21+
lastMoveTime: ReturnType<typeof usePlayController>['lastMoveTime']
22+
stats: ReturnType<typeof usePlayController>['stats']
23+
setResigned: ReturnType<typeof usePlayController>['setResigned']
24+
reset: ReturnType<typeof usePlayController>['reset']
25+
makePlayerMove: ReturnType<typeof usePlayController>['makeMove']
26+
updateClock: ReturnType<typeof usePlayController>['updateClock']
27+
setCurrentNode: ReturnType<typeof usePlayController>['setCurrentNode']
28+
addMove: ReturnType<typeof usePlayController>['addMove']
29+
addMoveWithTime: ReturnType<typeof usePlayController>['addMoveWithTime']
3030
}
3131

3232
const fn = () => {
@@ -62,7 +62,7 @@ export const PlayControllerContext =
6262
},
6363
setResigned: fn,
6464
reset: fn,
65-
makeMove: fn,
65+
makePlayerMove: fn,
6666
updateClock: fn,
6767
gameTree: defaultGameTree,
6868
currentNode: defaultGameTree.getRoot(),

‎src/hooks/usePlayController/index.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
export * from './usePlayMaiaController'
1+
export * from './usePlayController'

0 commit comments

Comments
 (0)