Skip to content

Commit e9f6967

Browse files
kevinjosethomaskevinjosethomas
committed
style: redesign puzzle page
1 parent 9377e24 commit e9f6967

4 files changed

Lines changed: 87 additions & 49 deletions

File tree

‎src/components/Common/StatsDisplay.tsx‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -65,12 +65,14 @@ interface Props {
6565
stats: AllStats
6666
hideSession?: boolean
6767
isGame?: boolean
68+
embedded?: boolean
6869
}
6970

7071
export const StatsDisplay: React.FC<Props> = ({
7172
hideSession,
7273
stats,
7374
isGame,
75+
embedded = false,
7476
}: Props) => {
7577
const [cachedRating, setCachedRating] = useState<number | undefined>(0)
7678

@@ -82,7 +84,13 @@ export const StatsDisplay: React.FC<Props> = ({
8284
}, [stats])
8385

8486
return (
85-
<div className="flex flex-col gap-3 rounded-l bg-background-1/90 p-4">
87+
<div
88+
className={
89+
embedded
90+
? 'flex flex-col gap-3 border-t border-glassBorder bg-transparent p-3'
91+
: 'flex flex-col gap-3 rounded-md border border-glassBorder bg-glass p-3 backdrop-blur-md'
92+
}
93+
>
8694
<div className="flex flex-col">
8795
<div className="text-sm uppercase">Your rating</div>
8896
<div

‎src/components/Puzzles/Feedback.tsx‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ interface Props {
1414
controller: ReturnType<typeof useTrainingController>
1515
lastAttemptedMove: string | null
1616
setLastAttemptedMove: Dispatch<SetStateAction<string | null>>
17+
embedded?: boolean
1718
}
1819

1920
export const Feedback: React.FC<Props> = ({
@@ -25,6 +26,7 @@ export const Feedback: React.FC<Props> = ({
2526
controller: controller,
2627
lastAttemptedMove,
2728
setLastAttemptedMove,
29+
embedded = false,
2830
}: Props) => {
2931
const { targetIndex } = game
3032

@@ -71,7 +73,13 @@ export const Feedback: React.FC<Props> = ({
7173
}, [defaultContent, incorrectContent, correctContent, status, targetIndex])
7274

7375
return (
74-
<div className="flex w-screen flex-1 flex-col rounded-sm bg-background-1 p-3 md:w-auto md:p-5 lg:justify-between">
76+
<div
77+
className={
78+
embedded
79+
? 'flex w-screen flex-1 flex-col border-t border-glassBorder bg-transparent p-3 md:w-auto md:p-5 lg:justify-between'
80+
: 'flex w-screen flex-1 flex-col rounded-md border border-glassBorder bg-glass p-3 backdrop-blur-md md:w-auto md:p-5 lg:justify-between'
81+
}
82+
>
7583
<div>
7684
<Markdown>{content.trim()}</Markdown>
7785
{(status === 'forfeit' || status === 'correct') && (

‎src/components/Puzzles/PuzzleLog.tsx‎

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,15 +8,23 @@ interface Props {
88
ratingDiff?: number
99
})[]
1010
setCurrentIndex: Dispatch<SetStateAction<number>>
11+
embedded?: boolean
1112
}
1213

1314
export const PuzzleLog: React.FC<Props> = ({
1415
previousGameResults,
1516
setCurrentIndex,
17+
embedded = false,
1618
}: Props) => {
1719
return (
18-
<div className="flex h-full flex-col overflow-hidden rounded bg-background-1">
19-
<div className="border-b border-white border-opacity-10 px-3 py-2">
20+
<div
21+
className={
22+
embedded
23+
? 'flex h-full flex-col overflow-hidden border-t border-glassBorder bg-transparent'
24+
: 'flex h-full flex-col overflow-hidden rounded-md border border-glassBorder bg-glass backdrop-blur-md'
25+
}
26+
>
27+
<div className={embedded ? 'border-b border-glassBorder px-3 py-2' : 'border-b border-glassBorder px-3 py-2'}>
2028
<h3 className="text-sm font-medium text-primary">Puzzle History</h3>
2129
</div>
2230
<div className="red-scrollbar flex flex-1 flex-col overflow-y-auto">

‎src/pages/puzzles.tsx‎

Lines changed: 59 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,6 @@ import {
3434
PuzzleLog,
3535
StatsDisplay,
3636
BoardController,
37-
ContinueAgainstMaia,
3837
AuthenticatedWrapper,
3938
GameBoard,
4039
PromotionOverlay,
@@ -247,11 +246,20 @@ const TrainPage: NextPage = () => {
247246
setLastAttemptedMove={setLastAttemptedMove}
248247
gamesController={
249248
<>
250-
<div className="relative bottom-0 flex h-full min-h-[38px] flex-1 flex-col justify-end overflow-auto">
251-
<PuzzleLog
252-
previousGameResults={previousGameResults}
253-
setCurrentIndex={setCurrentIndex}
254-
/>
249+
<div className="relative bottom-0 flex h-full min-h-[38px] flex-1 flex-col justify-start overflow-auto">
250+
<div className="hidden md:block">
251+
<PuzzleLog
252+
previousGameResults={previousGameResults}
253+
setCurrentIndex={setCurrentIndex}
254+
embedded
255+
/>
256+
</div>
257+
<div className="md:hidden">
258+
<PuzzleLog
259+
previousGameResults={previousGameResults}
260+
setCurrentIndex={setCurrentIndex}
261+
/>
262+
</div>
255263
</div>
256264
</>
257265
}
@@ -583,14 +591,7 @@ const Train: React.FC<Props> = ({
583591
setStatus('forfeit')
584592
}, [trainingGame.id, logGuess, setStatus, stats.rating])
585593

586-
const launchContinue = useCallback(() => {
587-
const currentNode =
588-
analysisEnabled && showAnalysis
589-
? analysisController.currentNode
590-
: controller.currentNode
591-
const url = '/play' + '?fen=' + encodeURIComponent(currentNode.fen)
592-
window.open(url)
593-
}, [controller, analysisController, analysisEnabled, showAnalysis])
594+
// Removed "Continue Against Maia" from puzzles page; no need for launcher
594595

595596
const hover = useCallback(
596597
(move?: string) => {
@@ -708,37 +709,45 @@ const Train: React.FC<Props> = ({
708709
exit="exit"
709710
style={{ willChange: 'transform, opacity' }}
710711
>
711-
<div className="flex h-full w-[90%] flex-row gap-2">
712+
<div className="flex h-full w-[90%] flex-row gap-3">
712713
<motion.div
713-
className="desktop-left-column-container flex flex-col gap-2 overflow-hidden"
714+
className="desktop-left-column-container flex flex-col overflow-hidden"
714715
variants={itemVariants}
715716
style={{ willChange: 'transform, opacity' }}
716717
>
717-
<GameInfo title="Puzzles" icon="target" type="train">
718-
<div className="flex w-full flex-col justify-start text-sm text-secondary 2xl:text-base">
719-
<span>
720-
Puzzle{' '}
721-
<span className="text-secondary/60">#{trainingGame.id}</span>
722-
</span>
723-
<span>
724-
Rating:{' '}
725-
{status !== 'correct' && status !== 'forfeit' ? (
726-
<span className="text-secondary/60">hidden</span>
727-
) : (
728-
<span className="text-human-2">
729-
{trainingGame.puzzle_elo}
730-
</span>
731-
)}
732-
</span>
718+
<div className="flex h-full w-full flex-col overflow-hidden rounded-md border border-glassBorder bg-glass backdrop-blur-md">
719+
{/* Header */}
720+
<GameInfo title="Puzzles" icon="target" type="train" embedded>
721+
<div className="flex w-full flex-col justify-start text-sm text-secondary 2xl:text-base">
722+
<span>
723+
Puzzle{' '}
724+
<span className="text-secondary/60">#{trainingGame.id}</span>
725+
</span>
726+
<span>
727+
Rating:{' '}
728+
{status !== 'correct' && status !== 'forfeit' ? (
729+
<span className="text-secondary/60">hidden</span>
730+
) : (
731+
<span className="text-human-2">
732+
{trainingGame.puzzle_elo}
733+
</span>
734+
)}
735+
</span>
736+
</div>
737+
</GameInfo>
738+
739+
{/* Puzzle log */}
740+
<div className="flex min-h-0 flex-1 flex-col">
741+
<div className="h-3" />
742+
{gamesController}
733743
</div>
734-
</GameInfo>
735-
<ContinueAgainstMaia
736-
launchContinue={launchContinue}
737-
sourcePage="puzzles"
738-
currentFen={controller.currentNode?.fen || ''}
739-
/>
740-
{gamesController}
741-
<StatsDisplay stats={stats} />
744+
745+
{/* Stats */}
746+
<div className="flex flex-col">
747+
<div className="h-3" />
748+
<StatsDisplay stats={stats} embedded />
749+
</div>
750+
</div>
742751
</motion.div>
743752

744753
<motion.div
@@ -841,6 +850,7 @@ const Train: React.FC<Props> = ({
841850
? analysisController.gameTree
842851
: controller.gameTree
843852
}
853+
embedded
844854
/>
845855
<div className="flex w-full flex-1">
846856
<Feedback
@@ -999,6 +1009,7 @@ const Train: React.FC<Props> = ({
9991009
? analysisController.gameTree
10001010
: controller.gameTree
10011011
}
1012+
embedded
10021013
/>
10031014
</div>
10041015
<div className="flex w-full">
@@ -1014,11 +1025,6 @@ const Train: React.FC<Props> = ({
10141025
/>
10151026
</div>
10161027
<StatsDisplay stats={stats} />
1017-
<ContinueAgainstMaia
1018-
launchContinue={launchContinue}
1019-
sourcePage="puzzles"
1020-
currentFen={controller.currentNode?.fen || ''}
1021-
/>
10221028
<div
10231029
id="analysis"
10241030
className="flex w-full flex-col gap-1 overflow-hidden"
@@ -1236,6 +1242,14 @@ const Train: React.FC<Props> = ({
12361242
content="Train with Maia as your coach using human-centered puzzles. Curated based on how millions of players improve, with data showing how different ratings approach each position."
12371243
/>
12381244
</Head>
1245+
{/* Radial gradient backdrop to match new design language */}
1246+
<div
1247+
className="pointer-events-none absolute inset-0"
1248+
style={{
1249+
background:
1250+
'radial-gradient(ellipse 75% 60% at center top, rgba(239, 68, 68, 0.08) 0%, transparent 60%)',
1251+
}}
1252+
/>
12391253
<AnimatePresence>
12401254
{analysisController.maia.status === 'no-cache' ||
12411255
analysisController.maia.status === 'downloading' ? (

0 commit comments

Comments
 (0)