Skip to content

Commit b2cf2c3

Browse files
kevinjosethomaskevinjosethomas
committed
chore: migrate training page to tailwindcss
1 parent 01157d8 commit b2cf2c3

File tree

1 file changed

+84
-40
lines changed

1 file changed

+84
-40
lines changed

‎src/pages/train.tsx

+84-40
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,6 @@ import {
1111
} from 'react'
1212
import Head from 'next/head'
1313
import { Chess } from 'chess.ts'
14-
import classNames from 'classnames'
1514
import type { NextPage } from 'next'
1615
import { useRouter } from 'next/router'
1716
import type { Key } from 'chessground/types'
@@ -32,7 +31,6 @@ import {
3231
VerticalEvaluationBar,
3332
PositionEvaluationContainer,
3433
} from 'src/components'
35-
import styles from 'src/styles/App.module.scss'
3634
import { useTrainingController } from 'src/hooks'
3735
import { AllStats, useStats } from 'src/hooks/useStats'
3836
import { TrainingGame, Status } from 'src/types/training'
@@ -178,17 +176,13 @@ const TrainPage: NextPage = () => {
178176
logGuess={logGuess}
179177
gamesController={
180178
<>
181-
<div className={styles.moves}>
182-
<div className={styles.games}>
179+
<div className="relative bottom-0 h-full min-h-[38px] flex-1 overflow-auto">
180+
<div className="flex flex-row flex-wrap items-start justify-start gap-1 overflow-y-auto">
183181
{previousGameResults.map((game, index) => (
184182
<span
185183
key={game.id}
186184
onClick={() => setCurrentIndex(index)}
187-
className={classNames({
188-
[styles.current]: game.result === undefined,
189-
[styles.correct]: game.result,
190-
[styles.incorrect]: !(game.result ?? true),
191-
})}
185+
className={`${game.result ? 'bg-engine-1' : game.result === undefined ? 'bg-button-secondary' : 'bg-human-4'} h-7 w-7 cursor-pointer rounded-sm`}
192186
/>
193187
))}
194188
</div>
@@ -298,10 +292,15 @@ const Train: React.FC<Props> = ({
298292

299293
const desktopLayout = (
300294
<>
301-
<div className={styles.outer}>
302-
<div className={styles.container}>
303-
<div className={styles.side}>
304-
<div className={styles.info}>
295+
<div className="flex h-full flex-1 flex-col justify-center gap-1">
296+
<div className="mt-2 flex w-full flex-row items-center justify-center gap-1">
297+
<div
298+
style={{
299+
maxWidth: 'min(20vw, 100vw - 75vh)',
300+
}}
301+
className="flex h-[75vh] w-[40vh] flex-col gap-1"
302+
>
303+
<div>
305304
<GameInfo
306305
{...trainingGame}
307306
whitePlayer={
@@ -325,13 +324,18 @@ const Train: React.FC<Props> = ({
325324
instructionsType="train"
326325
/>
327326
</div>
328-
<div className={styles.play}>
329-
<button onClick={launchContinue}>Continue Against Maia</button>
327+
<div className="flex w-full">
328+
<button
329+
onClick={launchContinue}
330+
className="flex w-full flex-1 items-center rounded bg-human-4 px-4 py-2 transition duration-200 hover:bg-human-3"
331+
>
332+
Continue Against Maia
333+
</button>
330334
</div>
331335
{gamesController}
332336
<StatsDisplay stats={stats} />
333337
</div>
334-
<div className={styles.board}>
338+
<div className="relative flex aspect-square w-full max-w-[75vh]">
335339
<GameBoard
336340
move={move}
337341
game={trainingGame}
@@ -347,9 +351,20 @@ const Train: React.FC<Props> = ({
347351
label="Maia Probability"
348352
/>
349353
</div>
350-
<div className={styles.side}>
351-
<div className={styles.map}>
352-
<div className={styles.scatter}>
354+
<div
355+
style={{
356+
maxWidth: 'min(20vw, 100vw - 75vh)',
357+
}}
358+
className="flex h-[75vh] w-[40vh] flex-col gap-1"
359+
>
360+
<div className="flex">
361+
<div
362+
style={{
363+
maxHeight: 'min(20vw, 100vw - 75vh)',
364+
maxWidth: 'min(20vw, 100vw - 75vh)',
365+
}}
366+
className="flex h-[40vh] w-[40vh] [&>div]:h-[inherit] [&>div]:max-h-[inherit] [&>div]:max-w-[inherit]"
367+
>
353368
<MovePlot
354369
data={data}
355370
onMove={setCurrentMove}
@@ -360,13 +375,25 @@ const Train: React.FC<Props> = ({
360375
onMouseLeave={() => setMovePlotHover(null)}
361376
/>
362377
</div>
363-
<div className={styles.human}></div>
378+
<div
379+
style={{
380+
background:
381+
'linear-gradient(0deg, rgb(36, 36, 36) 0%, rgb(255, 137, 70) 100%)',
382+
}}
383+
className="-mr-1 h-full w-1"
384+
/>
364385
</div>
365-
<div className={styles.ai}></div>
366-
<div className={styles.analysis}>
386+
<div
387+
style={{
388+
background:
389+
'linear-gradient(90deg, rgb(36, 36, 36) 0%, rgb(83, 167, 162) 100%)',
390+
}}
391+
className="-mt-1 h-1 w-full"
392+
/>
393+
<div className="flex-none">
367394
<PositionEvaluationContainer moveEvaluation={moveEvaluation} />
368395
</div>
369-
<div className={styles.feedback}>
396+
<div className="flex flex-1 flex-col items-stretch">
370397
<Feedback
371398
status={status}
372399
game={trainingGame}
@@ -385,12 +412,12 @@ const Train: React.FC<Props> = ({
385412
mobile
386413
/>
387414
</div> */}
388-
<div className={styles.controls}>
415+
<div className="flex-none">
389416
<BoardController setCurrentMove={setCurrentMove} />
390417
</div>
391418
</div>
392419
</div>
393-
<div className={styles.sf}>
420+
<div className="mr-8 flex items-center justify-center">
394421
<HorizontalEvaluationBar
395422
min={0}
396423
max={1}
@@ -404,10 +431,10 @@ const Train: React.FC<Props> = ({
404431

405432
const mobileLayout = (
406433
<>
407-
<div className={styles.outer}>
408-
<div className={styles.container}>
409-
<div className={styles.side}>
410-
<div className={styles.info}>
434+
<div className="flex h-full flex-1 flex-col justify-center gap-1">
435+
<div className="mt-2 flex h-full flex-col items-start justify-start gap-2">
436+
<div className="flex h-auto w-full flex-col gap-2">
437+
<div className="w-screen">
411438
<GameInfo
412439
{...trainingGame}
413440
whitePlayer={
@@ -431,11 +458,16 @@ const Train: React.FC<Props> = ({
431458
instructionsType="train"
432459
/>
433460
</div>
434-
<div className={styles.play}>
435-
<button onClick={launchContinue}>Continue Against Maia</button>
461+
<div className="flex w-full">
462+
<button
463+
onClick={launchContinue}
464+
className="flex w-full flex-1 items-center rounded bg-human-4 px-4 py-2 transition duration-200 hover:bg-human-3"
465+
>
466+
Continue Against Maia
467+
</button>
436468
</div>
437469
</div>
438-
<div className={styles.board}>
470+
<div className="relative flex aspect-square h-[100vw] w-screen">
439471
<GameBoard
440472
game={trainingGame}
441473
moves={moves}
@@ -445,8 +477,8 @@ const Train: React.FC<Props> = ({
445477
shapes={movePlotHover ? [movePlotHover] : undefined}
446478
/>
447479
</div>
448-
<div className={styles.side}>
449-
<div className={styles.feedback}>
480+
<div className="flex h-auto w-full flex-col gap-1">
481+
<div className="flex flex-1 flex-col items-stretch">
450482
<Feedback
451483
status={status}
452484
game={trainingGame}
@@ -457,8 +489,8 @@ const Train: React.FC<Props> = ({
457489
getNewGame={getNewGame}
458490
/>
459491
</div>
460-
<div className={styles.map}>
461-
<div className={styles.scatter}>
492+
<div className="flex">
493+
<div className="flex h-[20vh] w-screen flex-none [&>div]:h-[inherit] [&>div]:max-h-[inherit] [&>div]:max-w-[inherit]">
462494
<MovePlot
463495
data={data}
464496
onMove={setCurrentMove}
@@ -469,10 +501,22 @@ const Train: React.FC<Props> = ({
469501
onMouseLeave={() => setMovePlotHover(null)}
470502
/>
471503
</div>
472-
<div className={styles.human}></div>
504+
<div
505+
style={{
506+
background:
507+
'linear-gradient(0deg, rgb(36, 36, 36) 0%, rgb(255, 137, 70) 100%)',
508+
}}
509+
className="-mt-1 h-full w-1"
510+
/>
473511
</div>
474-
<div className={styles.ai}></div>
475-
<div className={styles.analysis}>
512+
<div
513+
style={{
514+
background:
515+
'linear-gradient(90deg, rgb(36, 36, 36) 0%, rgb(83, 167, 162) 100%)',
516+
}}
517+
className="-mt-1 h-1 w-full"
518+
/>
519+
<div className="w-full flex-none">
476520
<PositionEvaluationContainer moveEvaluation={moveEvaluation} />
477521
</div>
478522
{/* <div className={styles.moves}>
@@ -483,7 +527,7 @@ const Train: React.FC<Props> = ({
483527
mobile
484528
/>
485529
</div> */}
486-
<div className={styles.controls}>
530+
<div className="flex-none">
487531
<BoardController setCurrentMove={setCurrentMove} />
488532
</div>
489533
<StatsDisplay stats={stats} />

0 commit comments

Comments
 (0)