Skip to content

Commit d654447

Browse files
kevinjosethomaskevinjosethomas
committed
style: redesign turing page
1 parent e9f6967 commit d654447

3 files changed

Lines changed: 96 additions & 64 deletions

File tree

‎src/components/Turing/TuringLog.tsx‎

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,20 @@
11
import { useContext } from 'react'
22
import { TuringControllerContext } from 'src/contexts'
33

4-
export const TuringLog: React.FC = () => {
4+
export const TuringLog: React.FC<{ embedded?: boolean }> = ({ embedded = false }) => {
55
const { games, gameIds, setCurrentIndex, currentIndex } = useContext(
66
TuringControllerContext,
77
)
88

99
return (
10-
<div className="flex h-full flex-col overflow-hidden rounded bg-background-1">
11-
<div className="border-b border-white border-opacity-10 px-3 py-2">
10+
<div
11+
className={
12+
embedded
13+
? 'flex h-full flex-col overflow-hidden border-t border-glassBorder bg-transparent'
14+
: 'flex h-full flex-col overflow-hidden rounded bg-background-1'
15+
}
16+
>
17+
<div className={embedded ? 'border-b border-glassBorder px-3 py-2' : 'border-b border-white border-opacity-10 px-3 py-2'}>
1218
<h3 className="text-sm font-medium text-primary">Game History</h3>
1319
</div>
1420
<div className="red-scrollbar flex flex-1 flex-col overflow-y-auto">

‎src/components/Turing/TuringSubmission.tsx‎

Lines changed: 21 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,13 @@ import { useCallback, useContext, useEffect, useState } from 'react'
33

44
import { TuringControllerContext } from 'src/contexts'
55

6-
export const TuringSubmission = ({ rating }: { rating: number }) => {
6+
export const TuringSubmission = ({
7+
rating,
8+
embedded = false,
9+
}: {
10+
rating: number
11+
embedded?: boolean
12+
}) => {
713
const { game, submitGuess, getNewGame, commentController } = useContext(
814
TuringControllerContext,
915
)
@@ -22,7 +28,13 @@ export const TuringSubmission = ({ rating }: { rating: number }) => {
2228

2329
if (game?.result)
2430
return (
25-
<div className="flex flex-col gap-5 bg-background-1 p-4">
31+
<div
32+
className={
33+
embedded
34+
? 'flex flex-col gap-5 border-t border-glassBorder bg-transparent p-3'
35+
: 'flex flex-col gap-5 bg-background-1 p-4 rounded'
36+
}
37+
>
2638
<h2 className="text-2xl">
2739
Guess {game.result.correct ? 'correct' : 'incorrect'}, <br />
2840
{game.result.bot} was the bot
@@ -60,8 +72,8 @@ export const TuringSubmission = ({ rating }: { rating: number }) => {
6072
)
6173

6274
return (
63-
<div className="flex flex-col gap-1">
64-
<div className="flex flex-col gap-3 p-4">
75+
<div className={embedded ? 'flex flex-col gap-1 border-t border-glassBorder' : 'flex flex-col gap-1'}>
76+
<div className={embedded ? 'flex flex-col gap-3 p-3' : 'flex flex-col gap-3 p-4'}>
6577
<h2 className="text-2xl font-semibold">Who is the bot?</h2>
6678
<div className="flex flex-1 flex-row items-center justify-between">
6779
<button
@@ -105,7 +117,11 @@ export const TuringSubmission = ({ rating }: { rating: number }) => {
105117
</div>
106118
</div>
107119
<textarea
108-
className="rounded bg-background-2 p-2 text-sm text-secondary outline-none placeholder:text-secondary"
120+
className={`${
121+
embedded
122+
? 'border-glassBorder bg-transparent p-2 text-sm text-secondary outline-none placeholder:text-secondary border rounded-md'
123+
: 'rounded bg-background-2 p-2 text-sm text-secondary outline-none placeholder:text-secondary'
124+
}`}
109125
placeholder="Optional justification"
110126
value={comment}
111127
onChange={(e) => setComment(e.target.value)}

‎src/pages/turing.tsx‎

Lines changed: 66 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,6 @@ import {
1818
MovesContainer,
1919
BoardController,
2020
TuringSubmission,
21-
ContinueAgainstMaia,
2221
} from 'src/components'
2322
import { AllStats } from 'src/hooks/useStats'
2423
import { TuringGame } from 'src/types/turing'
@@ -172,20 +171,15 @@ const Turing: React.FC<Props> = (props: Props) => {
172171
variants={itemVariants}
173172
className="flex h-[75vh] min-w-64 flex-grow flex-col justify-between"
174173
>
175-
<div className="flex w-full flex-col gap-2">
176-
<GameInfo title="Bot or Not" icon="smart_toy" type="turing">
174+
<div className="border-glassBorder bg-glass flex h-full w-full flex-col overflow-hidden rounded-md border backdrop-blur-md">
175+
<GameInfo title="Bot or Not" icon="smart_toy" type="turing" embedded>
177176
{Info}
178177
</GameInfo>
179-
<ContinueAgainstMaia
180-
launchContinue={launchContinue}
181-
sourcePage="openings"
182-
currentFen={controller.currentNode?.fen || ''}
183-
/>
184-
<div className="relative bottom-0 flex h-full min-h-[38px] flex-1 flex-col justify-end overflow-auto">
185-
<TuringLog />
178+
<div className="relative bottom-0 flex h-full min-h-[38px] flex-1 flex-col justify-end overflow-hidden">
179+
<TuringLog embedded />
186180
</div>
181+
<StatsDisplay stats={stats} embedded />
187182
</div>
188-
<StatsDisplay stats={stats} />
189183
</motion.div>
190184
<motion.div
191185
variants={itemVariants}
@@ -200,26 +194,34 @@ const Turing: React.FC<Props> = (props: Props) => {
200194
</motion.div>
201195
<motion.div
202196
variants={itemVariants}
203-
className="flex h-[75vh] min-w-64 flex-grow flex-col gap-1"
197+
className="flex h-[75vh] min-w-64 flex-grow flex-col"
204198
>
205-
<div className="relative bottom-0 h-full min-h-[38px] flex-1">
206-
<MovesContainer game={game} termination={game.termination} />
207-
</div>
208-
<div id="turing-submission">
209-
<TuringSubmission rating={stats.rating ?? 0} />
210-
</div>
211-
<div className="flex-none">
212-
<BoardController
213-
orientation={controller.orientation}
214-
setOrientation={controller.setOrientation}
215-
currentNode={controller.currentNode}
216-
plyCount={controller.plyCount}
217-
goToNode={controller.goToNode}
218-
goToNextNode={controller.goToNextNode}
219-
goToPreviousNode={controller.goToPreviousNode}
220-
goToRootNode={controller.goToRootNode}
221-
gameTree={controller.gameTree}
222-
/>
199+
<div className="flex h-full w-full flex-col overflow-hidden rounded-md border border-glassBorder bg-glass backdrop-blur-md">
200+
<div className="relative bottom-0 min-h-[38px] flex-1 overflow-hidden">
201+
<MovesContainer
202+
game={game}
203+
termination={game.termination}
204+
embedded
205+
heightClass="h-full"
206+
/>
207+
</div>
208+
<div id="turing-submission" className="border-t border-glassBorder">
209+
<TuringSubmission rating={stats.rating ?? 0} embedded />
210+
</div>
211+
<div className="flex-none border-t border-glassBorder">
212+
<BoardController
213+
orientation={controller.orientation}
214+
setOrientation={controller.setOrientation}
215+
currentNode={controller.currentNode}
216+
plyCount={controller.plyCount}
217+
goToNode={controller.goToNode}
218+
goToNextNode={controller.goToNextNode}
219+
goToPreviousNode={controller.goToPreviousNode}
220+
goToRootNode={controller.goToRootNode}
221+
gameTree={controller.gameTree}
222+
embedded
223+
/>
224+
</div>
223225
</div>
224226
</motion.div>
225227
</div>
@@ -257,32 +259,33 @@ const Turing: React.FC<Props> = (props: Props) => {
257259
orientation={controller.orientation}
258260
/>
259261
</div>
260-
<div className="flex h-auto w-full flex-col gap-1">
261-
<div className="relative bottom-0 h-full flex-1 overflow-auto">
262-
<MovesContainer game={game} termination={game.termination} />
263-
</div>
264-
<div className="flex-none">
265-
<BoardController
266-
orientation={controller.orientation}
267-
setOrientation={controller.setOrientation}
268-
currentNode={controller.currentNode}
269-
plyCount={controller.plyCount}
270-
goToNode={controller.goToNode}
271-
goToNextNode={controller.goToNextNode}
272-
goToPreviousNode={controller.goToPreviousNode}
273-
goToRootNode={controller.goToRootNode}
274-
gameTree={controller.gameTree}
275-
/>
276-
</div>
277-
<div id="turing-submission" className="w-screen">
278-
<TuringSubmission rating={stats.rating ?? 0} />
279-
</div>
280-
<div className="flex w-full">
281-
<ContinueAgainstMaia
282-
launchContinue={launchContinue}
283-
sourcePage="openings"
284-
currentFen={controller.currentNode?.fen || ''}
285-
/>
262+
<div className="flex h-auto w-full flex-col gap-2">
263+
<div className="flex w-full flex-col overflow-hidden rounded-md border border-glassBorder bg-glass backdrop-blur-md">
264+
<div className="relative bottom-0 flex-1 overflow-hidden">
265+
<MovesContainer
266+
game={game}
267+
termination={game.termination}
268+
embedded
269+
heightClass="h-full"
270+
/>
271+
</div>
272+
<div className="border-t border-glassBorder">
273+
<BoardController
274+
orientation={controller.orientation}
275+
setOrientation={controller.setOrientation}
276+
currentNode={controller.currentNode}
277+
plyCount={controller.plyCount}
278+
goToNode={controller.goToNode}
279+
goToNextNode={controller.goToNextNode}
280+
goToPreviousNode={controller.goToPreviousNode}
281+
goToRootNode={controller.goToRootNode}
282+
gameTree={controller.gameTree}
283+
embedded
284+
/>
285+
</div>
286+
<div id="turing-submission" className="border-t border-glassBorder w-full">
287+
<TuringSubmission rating={stats.rating ?? 0} embedded />
288+
</div>
286289
</div>
287290
</div>
288291
</motion.div>
@@ -308,6 +311,13 @@ const Turing: React.FC<Props> = (props: Props) => {
308311
content="Test your ability to distinguish between human and AI chess play. This Turing Test for chess is a fun way to see if you understand the differences between human and engine moves."
309312
/>
310313
</Head>
314+
<div
315+
className="pointer-events-none absolute inset-0"
316+
style={{
317+
background:
318+
'radial-gradient(ellipse 75% 60% at center top, rgba(239, 68, 68, 0.08) 0%, transparent 60%)',
319+
}}
320+
/>
311321
<TuringControllerContext.Provider value={controller}>
312322
<TreeControllerContext.Provider value={controller}>
313323
<AnimatePresence mode="wait">

0 commit comments

Comments
 (0)