Skip to content

Commit 10275ce

Browse files
ashtonandersonashtonanderson
committed
Polish Hand and Brain modal selector layout
1 parent 0524b20 commit 10275ce

1 file changed

Lines changed: 123 additions & 74 deletions

File tree

‎src/components/Common/PlaySetupModal.tsx‎

Lines changed: 123 additions & 74 deletions
Original file line numberDiff line numberDiff line change
@@ -120,6 +120,7 @@ export const PlaySetupModal: React.FC<Props> = (props: Props) => {
120120
)
121121

122122
const [openMoreOptions, setMoreOptionsOpen] = useState<boolean>(true)
123+
const compactHandBrainLayout = props.playType === 'handAndBrain'
123124

124125
const handlePresetSelect = useCallback((preset: TimeControl) => {
125126
setTimeControl(preset)
@@ -214,7 +215,9 @@ export const PlaySetupModal: React.FC<Props> = (props: Props) => {
214215
initial={{ opacity: 0 }}
215216
animate={{ opacity: 1 }}
216217
exit={{ opacity: 0 }}
217-
className="relative flex h-[600px] w-[500px] max-w-[90vw] flex-col overflow-hidden rounded-lg border border-glass-border bg-glass backdrop-blur-md"
218+
className={`relative flex ${
219+
compactHandBrainLayout ? 'h-[640px]' : 'h-[600px]'
220+
} w-[500px] max-w-[90vw] flex-col overflow-hidden rounded-lg border border-glass-border bg-glass backdrop-blur-md`}
218221
>
219222
<div
220223
className="pointer-events-none absolute inset-0"
@@ -234,7 +237,11 @@ export const PlaySetupModal: React.FC<Props> = (props: Props) => {
234237
</button>
235238

236239
{/* Header */}
237-
<div className="border-b border-glass-border p-4">
240+
<div
241+
className={`border-b border-glass-border ${
242+
compactHandBrainLayout ? 'px-4 py-3' : 'p-4'
243+
}`}
244+
>
238245
<h2 className="text-xl font-bold text-primary">
239246
{props.playType == 'againstMaia'
240247
? 'Play Against Maia'
@@ -248,76 +255,100 @@ export const PlaySetupModal: React.FC<Props> = (props: Props) => {
248255
</div>
249256

250257
{/* Settings Section */}
251-
<div className="flex-1 overflow-y-auto p-4">
258+
<div
259+
className={`flex-1 overflow-y-auto ${
260+
compactHandBrainLayout ? 'p-3' : 'p-4'
261+
}`}
262+
>
252263
<div className="space-y-4">
253264
{props.playType == 'handAndBrain' ? (
254265
<>
255266
<div>
256-
<label
257-
htmlFor="play-as-select"
258-
className="mb-1 block text-sm font-medium text-primary"
259-
>
260-
Play as:
261-
</label>
262-
<div id="play-as-select">
263-
<OptionSelect
264-
options={[false, true]}
265-
labels={['Hand', 'Brain']}
266-
selected={isBrain}
267-
onChange={setIsBrain}
268-
/>
267+
<div className="grid grid-cols-[auto,1fr] items-center gap-3">
268+
<label
269+
htmlFor="play-as-select"
270+
className="whitespace-nowrap text-sm font-medium text-primary"
271+
>
272+
Play as:
273+
</label>
274+
<div id="play-as-select" className="min-w-0">
275+
<OptionSelect
276+
options={[false, true]}
277+
labels={['Hand', 'Brain']}
278+
selected={isBrain}
279+
onChange={setIsBrain}
280+
selectedClassName="border-human-4 bg-human-4 text-white hover:bg-human-4/90"
281+
/>
282+
</div>
269283
</div>
284+
<p className="mt-0.5 text-xxs leading-tight text-secondary">
285+
Hand makes the move; Brain chooses which piece type must
286+
be moved.
287+
</p>
270288
</div>
271289
<div>
272-
<label
273-
htmlFor="partner-select"
274-
className="mb-1 block text-sm font-medium text-primary"
275-
>
276-
Partner:
277-
</label>
278-
<select
279-
id="partner-select"
280-
value={maiaPartnerVersion}
281-
className="w-full rounded border border-glass-border bg-glass px-3 py-2 text-sm text-white/90 focus:outline-none"
282-
onChange={(e) => setMaiaPartnerVersion(e.target.value)}
283-
>
284-
{maiaOptions.map((maia) => (
285-
<option key={`partner_${maia}`} value={maia}>
286-
{maia.replace('maia_kdd_', 'Maia ')}
287-
</option>
288-
))}
289-
</select>
290+
<div className="grid grid-cols-[auto,1fr] items-center gap-3">
291+
<label
292+
htmlFor="partner-select"
293+
className="whitespace-nowrap text-sm font-medium text-primary"
294+
>
295+
Partner:
296+
</label>
297+
<select
298+
id="partner-select"
299+
value={maiaPartnerVersion}
300+
className="min-w-0 w-full rounded border border-glass-border bg-glass px-3 py-2 text-sm text-white/90 focus:outline-none"
301+
onChange={(e) => setMaiaPartnerVersion(e.target.value)}
302+
>
303+
{maiaOptions.map((maia) => (
304+
<option key={`partner_${maia}`} value={maia}>
305+
{maia.replace('maia_kdd_', 'Maia ')}
306+
</option>
307+
))}
308+
</select>
309+
</div>
310+
<p className="mt-0.5 text-xxs leading-tight text-secondary">
311+
{isBrain
312+
? `${maiaPartnerVersion.replace('maia_kdd_', 'Maia ')} is your Hand and will make the move on the board.`
313+
: `${maiaPartnerVersion.replace('maia_kdd_', 'Maia ')} is your Brain and will choose which piece type must be moved.`}
314+
</p>
290315
</div>
291316
</>
292317
) : null}
293318

294319
<div>
295-
<label
296-
htmlFor="opponent-select"
297-
className="mb-1 block text-sm font-medium text-primary"
298-
>
299-
Opponent:
300-
</label>
301-
<select
302-
id="opponent-select"
303-
value={maiaVersion}
304-
className="w-full rounded border border-glass-border bg-glass px-3 py-2 text-sm text-white/90 focus:outline-none"
305-
onChange={(e) => setMaiaVersion(e.target.value)}
306-
>
307-
{maiaOptions.map((maia) => (
308-
<option key={`opponent_${maia}`} value={maia}>
309-
{maia.replace('maia_kdd_', 'Maia ')}
310-
</option>
311-
))}
312-
</select>
320+
<div className="grid grid-cols-[auto,1fr] items-center gap-3">
321+
<label
322+
htmlFor="opponent-select"
323+
className="whitespace-nowrap text-sm font-medium text-primary"
324+
>
325+
Opponent:
326+
</label>
327+
<select
328+
id="opponent-select"
329+
value={maiaVersion}
330+
className="min-w-0 w-full rounded border border-glass-border bg-glass px-3 py-2 text-sm text-white/90 focus:outline-none"
331+
onChange={(e) => setMaiaVersion(e.target.value)}
332+
>
333+
{maiaOptions.map((maia) => (
334+
<option key={`opponent_${maia}`} value={maia}>
335+
{maia.replace('maia_kdd_', 'Maia ')}
336+
</option>
337+
))}
338+
</select>
339+
</div>
313340
</div>
314341

315342
<div>
316-
<div className="mb-3 flex items-center justify-between">
343+
<div
344+
className={`flex items-center justify-between ${
345+
compactHandBrainLayout ? 'mb-2' : 'mb-3'
346+
}`}
347+
>
317348
<span className="text-sm font-medium text-primary">
318349
Time Control:
319350
</span>
320-
<div className="flex gap-1">
351+
<div className="flex gap-1.5">
321352
{TimeControlOptions.map((option, index) => (
322353
<button
323354
key={option}
@@ -334,9 +365,13 @@ export const PlaySetupModal: React.FC<Props> = (props: Props) => {
334365
</div>
335366
</div>
336367

337-
<div className="space-y-3">
368+
<div className={compactHandBrainLayout ? 'space-y-2.5' : 'space-y-3'}>
338369
<div>
339-
<div className="mb-2 flex items-center justify-between">
370+
<div
371+
className={`flex items-center justify-between ${
372+
compactHandBrainLayout ? 'mb-1' : 'mb-2'
373+
}`}
374+
>
340375
<label
341376
htmlFor="time-minutes-slider"
342377
className="text-xs font-medium text-primary"
@@ -365,7 +400,11 @@ export const PlaySetupModal: React.FC<Props> = (props: Props) => {
365400
</div>
366401

367402
<div>
368-
<div className="mb-2 flex items-center justify-between">
403+
<div
404+
className={`flex items-center justify-between ${
405+
compactHandBrainLayout ? 'mb-1' : 'mb-2'
406+
}`}
407+
>
369408
<label
370409
htmlFor="increment-seconds-slider"
371410
className="text-xs font-medium text-primary"
@@ -393,20 +432,22 @@ export const PlaySetupModal: React.FC<Props> = (props: Props) => {
393432
</div>
394433

395434
<div>
396-
<label
397-
htmlFor="maia-timing-select"
398-
className="mb-1 block text-sm font-medium text-primary"
399-
>
400-
Maia thinking time:
401-
</label>
402-
<div id="maia-timing-select">
403-
<OptionSelect
404-
options={[false, true]}
405-
labels={['Instant', 'Human-like']}
406-
selected={simulateMaiaTime}
407-
onChange={setSimulateMaiaTime}
408-
selectedClassName="border-human-4 bg-human-4 text-white hover:bg-human-4/90"
409-
/>
435+
<div className="grid grid-cols-[auto,1fr] items-center gap-3">
436+
<label
437+
htmlFor="maia-timing-select"
438+
className="whitespace-nowrap text-sm font-medium text-primary"
439+
>
440+
Maia thinking time:
441+
</label>
442+
<div id="maia-timing-select" className="min-w-0">
443+
<OptionSelect
444+
options={[false, true]}
445+
labels={['Instant', 'Human-like']}
446+
selected={simulateMaiaTime}
447+
onChange={setSimulateMaiaTime}
448+
selectedClassName="border-human-4 bg-human-4 text-white hover:bg-human-4/90"
449+
/>
450+
</div>
410451
</div>
411452
</div>
412453

@@ -451,11 +492,19 @@ export const PlaySetupModal: React.FC<Props> = (props: Props) => {
451492
</div>
452493

453494
{/* Color Selection Section */}
454-
<div className="border-t border-glass-border p-4">
455-
<p className="mb-3 text-center text-sm font-medium text-primary">
495+
<div
496+
className={`border-t border-glass-border ${
497+
compactHandBrainLayout ? 'p-3' : 'p-4'
498+
}`}
499+
>
500+
<p
501+
className={`text-center text-sm font-medium text-primary ${
502+
compactHandBrainLayout ? 'mb-2' : 'mb-3'
503+
}`}
504+
>
456505
Choose your color:
457506
</p>
458-
<div className="flex items-center justify-center gap-3">
507+
<div className="flex items-center justify-center gap-4">
459508
<button
460509
onClick={() => start('black')}
461510
title="Play as black"

0 commit comments

Comments
 (0)