Skip to content

Commit ba6951f

Browse files
kevinjosethomaskevinjosethomas
committed
style: clean up play + hb pages
1 parent cc1ed6f commit ba6951f

4 files changed

Lines changed: 40 additions & 61 deletions

File tree

‎src/components/Board/GameplayInterface.tsx‎

Lines changed: 5 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -155,14 +155,9 @@ export const GameplayInterface: React.FC<React.PropsWithChildren<Props>> = (
155155

156156
const desktopLayout = (
157157
<>
158-
<div className="flex h-full flex-1 flex-col justify-center gap-1 py-5 md:py-10">
159-
<div className="flex w-full flex-row items-center justify-center gap-1">
160-
<div
161-
style={{
162-
maxWidth: 'min(20vw, 100vw - 75vh)',
163-
}}
164-
className="flex h-[75vh] w-[40vh] flex-col"
165-
>
158+
<div className="flex h-full flex-1 flex-col justify-center gap-1 py-2 md:py-4">
159+
<div className="mx-auto mt-2 flex w-[90%] flex-row items-start justify-between gap-3">
160+
<div className="flex h-[75vh] min-w-[16rem] max-w-[22rem] flex-shrink-0 flex-col">
166161
<div className="flex h-full w-full flex-col overflow-hidden rounded-md border border-glassBorder bg-glass backdrop-blur-md">
167162
<GameInfo
168163
icon="swords"
@@ -201,7 +196,7 @@ export const GameplayInterface: React.FC<React.PropsWithChildren<Props>> = (
201196
</div>
202197
<div
203198
id="play-page"
204-
className="relative flex aspect-square w-full max-w-[75vh]"
199+
className="relative flex aspect-square w-full max-w-[75vh] flex-shrink-0"
205200
>
206201
<GameBoard
207202
game={game}
@@ -219,12 +214,7 @@ export const GameplayInterface: React.FC<React.PropsWithChildren<Props>> = (
219214
/>
220215
) : null}
221216
</div>
222-
<div
223-
style={{
224-
maxWidth: 'min(20vw, 100vw - 75vh)',
225-
}}
226-
className="flex h-[75vh] w-[40vh] flex-col justify-center gap-2"
227-
>
217+
<div className="flex h-[75vh] min-w-[18rem] flex-grow flex-col gap-2">
228218
{timeControl != 'unlimited' ? (
229219
<GameClock
230220
player={orientation == 'white' ? 'black' : 'white'}

‎src/components/Common/PlaySetupModal.tsx‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,7 @@ function OptionSelect<T>({
4848
key={index}
4949
className={`flex-1 px-4 py-2 text-sm font-medium transition-colors ${
5050
option === selected
51-
? 'border border-glassBorder bg-glass-strong text-white'
51+
? 'border border-glassBorder bg-glass-stronger text-white'
5252
: 'border border-glassBorder bg-glass text-white/90 hover:bg-glass-hover'
5353
} ${index === 0 ? 'rounded-l-lg' : ''} ${
5454
index === options.length - 1 ? 'rounded-r-lg' : ''
@@ -315,8 +315,8 @@ export const PlaySetupModal: React.FC<Props> = (props: Props) => {
315315
onClick={() => handlePresetSelect(option)}
316316
className={`rounded border px-2 py-1 text-xs font-medium transition-colors ${
317317
timeControl === option
318-
? 'border-glassBorder bg-glass-strong text-white'
319-
: 'border-glassBorder bg-glass text-white/90 hover:bg-glass-hover'
318+
? 'border-glassBorder bg-glass-stronger text-white backdrop-blur-md'
319+
: 'border-glassBorder bg-glass text-white/90 hover:bg-glass-strong'
320320
}`}
321321
>
322322
{TimeControlOptionNames[index]}
@@ -449,7 +449,7 @@ export const PlaySetupModal: React.FC<Props> = (props: Props) => {
449449
<button
450450
onClick={() => start('black')}
451451
title="Play as black"
452-
className="flex h-16 w-16 cursor-pointer items-center justify-center rounded border border-glassBorder bg-glass transition-colors hover:bg-glass-hover"
452+
className="flex h-16 w-16 cursor-pointer items-center justify-center rounded border border-glassBorder bg-glass transition-colors hover:bg-glass-stronger"
453453
>
454454
<div className="relative h-10 w-10">
455455
<Image
@@ -462,7 +462,7 @@ export const PlaySetupModal: React.FC<Props> = (props: Props) => {
462462
<button
463463
onClick={() => start(undefined)}
464464
title="Play as random color"
465-
className="flex h-20 w-20 cursor-pointer items-center justify-center rounded border border-glassBorder bg-glass transition-colors hover:bg-glass-hover"
465+
className="flex h-20 w-20 cursor-pointer items-center justify-center rounded border border-glassBorder bg-glass transition-colors hover:bg-glass-stronger"
466466
>
467467
<div className="relative h-12 w-12">
468468
<Image
@@ -475,7 +475,7 @@ export const PlaySetupModal: React.FC<Props> = (props: Props) => {
475475
<button
476476
onClick={() => start('white')}
477477
title="Play as white"
478-
className="flex h-16 w-16 cursor-pointer items-center justify-center rounded border border-glassBorder bg-glass transition-colors hover:bg-glass-hover"
478+
className="flex h-16 w-16 cursor-pointer items-center justify-center rounded border border-glassBorder bg-glass transition-colors hover:bg-glass-stronger"
479479
>
480480
<div className="relative h-10 w-10">
481481
<Image

‎src/components/Play/HandBrainPlayControls.tsx‎

Lines changed: 20 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,6 @@ interface Props {
3737
playAgain?: () => void
3838
simulateMaiaTime?: boolean
3939
setSimulateMaiaTime?: (value: boolean) => void
40-
embedded?: boolean
4140
}
4241

4342
export const HandBrainPlayControls: React.FC<Props> = ({
@@ -54,7 +53,6 @@ export const HandBrainPlayControls: React.FC<Props> = ({
5453
playAgain,
5554
simulateMaiaTime,
5655
setSimulateMaiaTime,
57-
embedded = false,
5856
}: Props) => {
5957
const [showResignConfirm, setShowResignConfirm] = useState(false)
6058

@@ -77,12 +75,8 @@ export const HandBrainPlayControls: React.FC<Props> = ({
7775
: 'Waiting for brain'
7876
: 'Waiting for opponent'
7977

80-
const containerClasses = embedded
81-
? 'flex w-full flex-col'
82-
: 'flex w-full flex-col overflow-hidden rounded-lg border border-glassBorder bg-glass backdrop-blur-md'
83-
8478
return (
85-
<div className={containerClasses}>
79+
<div className="flex w-full flex-col">
8680
<div id="play-controls" className="flex h-full flex-col">
8781
{gameOver ? (
8882
<div className="flex flex-col gap-3 p-4">
@@ -94,23 +88,23 @@ export const HandBrainPlayControls: React.FC<Props> = ({
9488
'_blank',
9589
)
9690
}}
97-
className="flex items-center justify-center rounded-md border border-glassBorder bg-glass px-4 py-2 text-sm font-semibold text-white/90 transition-colors duration-200 hover:bg-glass-hover"
91+
className="flex items-center justify-center rounded border border-glassBorder bg-glass px-4 py-2 text-sm font-semibold text-white/90 transition-colors duration-200 hover:bg-glass-hover"
9892
>
9993
ANALYZE GAME
10094
</button>
10195
) : null}
10296
{playAgain ? (
10397
<button
10498
onClick={playAgain}
105-
className="flex w-full items-center justify-center rounded-md border border-glassBorder bg-glass px-4 py-2 text-sm font-semibold tracking-wide text-white/90 transition-colors duration-200 hover:bg-glass-hover"
99+
className="flex w-full items-center justify-center rounded border border-glassBorder bg-glass px-4 py-2 text-sm font-semibold tracking-wide text-white/90 transition-colors duration-200 hover:bg-glass-hover"
106100
>
107101
PLAY AGAIN
108102
</button>
109103
) : null}
110104
</div>
111105
) : (
112106
<>
113-
<div className="border-b border-glassBorder bg-transparent px-4 py-3">
107+
<div className="bg-transparent px-4 py-3">
114108
<div className="space-y-1 text-center">
115109
<p
116110
className={`text-sm font-semibold uppercase tracking-wider ${
@@ -125,7 +119,7 @@ export const HandBrainPlayControls: React.FC<Props> = ({
125119
</div>
126120
</div>
127121

128-
<div className="border-b border-glassBorder bg-transparent px-4 py-4">
122+
<div className="bg-transparent px-4 py-2">
129123
{isBrain ? (
130124
<div className="flex flex-col gap-3">
131125
<p className="text-center text-xs font-semibold uppercase tracking-wide text-white/70">
@@ -143,10 +137,10 @@ export const HandBrainPlayControls: React.FC<Props> = ({
143137
key={p}
144138
onClick={() => selectPiece(p)}
145139
disabled={!isSelectable}
146-
className={`flex h-10 w-10 items-center justify-center rounded-md border transition-colors duration-200 md:h-12 md:w-12 ${
140+
className={`flex h-10 w-10 items-center justify-center rounded transition-colors duration-200 md:h-12 md:w-12 ${
147141
isSelectable
148-
? 'border-glassBorder bg-white/10 hover:bg-white/15'
149-
: 'cursor-not-allowed border-transparent bg-white/5 opacity-40'
142+
? 'border border-glassBorder bg-glass-strong hover:bg-glass-stronger'
143+
: 'cursor-not-allowed bg-glass opacity-40'
150144
}`}
151145
>
152146
<img
@@ -161,20 +155,20 @@ export const HandBrainPlayControls: React.FC<Props> = ({
161155
</div>
162156
) : (
163157
<div className="flex flex-col items-center gap-3">
164-
<p className="text-center text-xs font-semibold uppercase tracking-wide text-white/70">
158+
<p className="text-center text-xs font-medium uppercase tracking-wider text-white/70">
165159
SELECTED PIECE
166160
</p>
167161
<div className="flex h-16 w-16 items-center justify-center">
168162
{selectedPiece ? (
169-
<div className="flex items-center justify-center rounded-lg border border-glassBorder bg-white/10 p-2">
163+
<div className="flex items-center justify-center rounded border border-glassBorder bg-glass-strong p-2">
170164
<img
171165
src={`/assets/pieces/${pieceColorMap[color[0] + selectedPiece]}.svg`}
172166
className="h-12 w-12"
173167
alt={pieceColorMap[color[0] + selectedPiece]}
174168
/>
175169
</div>
176170
) : (
177-
<div className="flex h-12 w-12 items-center justify-center rounded-lg border border-dashed border-white/20 bg-white/5">
171+
<div className="flex h-12 w-12 items-center justify-center rounded border border-dashed border-glassBorder bg-glass">
178172
<span className="text-xs text-white/40">...</span>
179173
</div>
180174
)}
@@ -184,17 +178,17 @@ export const HandBrainPlayControls: React.FC<Props> = ({
184178
</div>
185179

186180
{simulateMaiaTime !== undefined && setSimulateMaiaTime && (
187-
<div className="border-b border-glassBorder bg-transparent px-4 py-3">
181+
<div className="bg-transparent px-4 py-3">
188182
<div className="flex flex-col gap-2">
189-
<p className="text-center text-xs font-semibold tracking-wider text-white/70">
190-
MAIA THINKING TIME
183+
<p className="text-center text-xs font-medium uppercase tracking-wider text-white/70">
184+
Maia Thinking Time
191185
</p>
192-
<div className="flex overflow-hidden rounded-md border border-glassBorder bg-glass">
186+
<div className="flex overflow-hidden rounded border border-glassBorder bg-glass">
193187
<button
194188
className={`flex-1 px-3 py-1.5 text-xs font-medium transition-colors duration-200 ${
195189
!simulateMaiaTime
196-
? 'bg-white/10 text-white'
197-
: 'text-white/70 hover:bg-white/10 hover:text-white'
190+
? 'bg-glass-stronger text-white'
191+
: 'text-white/70 hover:bg-glass-strong hover:text-white'
198192
}`}
199193
onClick={() => setSimulateMaiaTime(false)}
200194
>
@@ -203,8 +197,8 @@ export const HandBrainPlayControls: React.FC<Props> = ({
203197
<button
204198
className={`flex-1 px-3 py-1.5 text-xs font-medium transition-colors duration-200 ${
205199
simulateMaiaTime
206-
? 'bg-white/10 text-white'
207-
: 'text-white/70 hover:bg-white/10 hover:text-white'
200+
? 'bg-glass-stronger text-white'
201+
: 'text-white/70 hover:bg-glass-strong hover:text-white'
208202
}`}
209203
onClick={() => setSimulateMaiaTime(true)}
210204
>
@@ -221,7 +215,7 @@ export const HandBrainPlayControls: React.FC<Props> = ({
221215
<button
222216
onClick={offerDraw}
223217
disabled={!playerActive}
224-
className={`w-full rounded-md border border-glassBorder px-4 py-2 text-sm font-semibold transition-colors duration-200 ${
218+
className={`w-full rounded border border-glassBorder px-4 py-2 text-sm font-semibold transition-colors duration-200 ${
225219
playerActive
226220
? 'bg-glass text-white/90 hover:bg-glass-hover'
227221
: 'cursor-not-allowed bg-white/5 text-white/40'

‎src/components/Play/PlayControls.tsx‎

Lines changed: 9 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,6 @@ interface Props {
1212
playAgain?: () => void
1313
simulateMaiaTime?: boolean
1414
setSimulateMaiaTime?: (value: boolean) => void
15-
embedded?: boolean
1615
}
1716

1817
export const PlayControls: React.FC<Props> = ({
@@ -24,7 +23,6 @@ export const PlayControls: React.FC<Props> = ({
2423
playAgain,
2524
simulateMaiaTime,
2625
setSimulateMaiaTime,
27-
embedded = false,
2826
}: Props) => {
2927
const [showResignConfirm, setShowResignConfirm] = useState(false)
3028

@@ -37,12 +35,9 @@ export const PlayControls: React.FC<Props> = ({
3735
resign()
3836
}
3937
}
40-
const containerClasses = embedded
41-
? 'flex w-full flex-col'
42-
: 'flex w-full flex-col overflow-hidden rounded-lg border border-glassBorder bg-glass backdrop-blur-md'
4338

4439
return (
45-
<div className={containerClasses}>
40+
<div className="flex w-full flex-col">
4641
{gameOver ? (
4742
<div className="flex flex-col gap-3 p-4">
4843
{game.id ? (
@@ -66,7 +61,7 @@ export const PlayControls: React.FC<Props> = ({
6661
</div>
6762
) : (
6863
<>
69-
<div className="border-b border-glassBorder bg-transparent px-4 py-3">
64+
<div className="bg-transparent px-4 py-3">
7065
<p
7166
className={`text-center text-sm font-semibold uppercase tracking-wider ${
7267
playerActive ? 'text-white' : 'text-white/60'
@@ -77,17 +72,17 @@ export const PlayControls: React.FC<Props> = ({
7772
</div>
7873

7974
{simulateMaiaTime !== undefined && setSimulateMaiaTime && (
80-
<div className="border-b border-glassBorder bg-transparent px-4 py-3">
75+
<div className="bg-transparent px-4 py-2">
8176
<div className="flex flex-col gap-2">
82-
<p className="text-center text-xs font-semibold tracking-wider text-white/70">
83-
MAIA THINKING TIME
77+
<p className="text-center text-xs font-medium uppercase tracking-wider text-white/70">
78+
Maia Thinking Time
8479
</p>
8580
<div className="flex overflow-hidden rounded-md border border-glassBorder bg-glass">
8681
<button
8782
className={`flex-1 px-3 py-1.5 text-xs font-medium transition-colors duration-200 ${
8883
!simulateMaiaTime
89-
? 'bg-white/10 text-white'
90-
: 'text-white/70 hover:bg-white/10 hover:text-white'
84+
? 'bg-glass-stronger text-white'
85+
: 'text-white/70 hover:bg-glass-strong hover:text-white'
9186
}`}
9287
onClick={() => setSimulateMaiaTime(false)}
9388
>
@@ -96,8 +91,8 @@ export const PlayControls: React.FC<Props> = ({
9691
<button
9792
className={`flex-1 px-3 py-1.5 text-xs font-medium transition-colors duration-200 ${
9893
simulateMaiaTime
99-
? 'bg-white/10 text-white'
100-
: 'text-white/70 hover:bg-white/10 hover:text-white'
94+
? 'bg-glass-stronger text-white'
95+
: 'text-white/70 hover:bg-glass-strong hover:text-white'
10196
}`}
10297
onClick={() => setSimulateMaiaTime(true)}
10398
>

0 commit comments

Comments
 (0)