Skip to content

Commit b7c52ea

Browse files
kevinjosethomaskevinjosethomas
committed
style: make analysis page responsive + clean up footer
1 parent 3584093 commit b7c52ea

6 files changed

Lines changed: 91 additions & 127 deletions

File tree

‎src/components/Analysis/BlunderMeter.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -119,7 +119,7 @@ const MobileBlunderMeter: React.FC<Props> = ({
119119
return (
120120
<div
121121
id="analysis-blunder-meter"
122-
className={`flex w-full flex-col gap-2 overflow-hidden rounded-md ${showContainer ? 'border border-glassBorder bg-glass p-3 backdrop-blur-md' : ''}`}
122+
className={`flex w-full flex-col gap-2 overflow-hidden ${showContainer ? 'border border-glassBorder p-3' : ''}`}
123123
>
124124
<p className="text-base text-primary">Blunder Meter</p>
125125
<div className="flex w-full flex-col gap-1">

‎src/components/Analysis/Highlight.tsx‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -302,7 +302,7 @@ export const Highlight: React.FC<Props> = ({
302302
<select
303303
value={currentMaiaModel}
304304
onChange={(e) => setCurrentMaiaModel(e.target.value)}
305-
className="cursor-pointer appearance-none bg-transparent py-2 text-center text-base font-semibold text-human-1 outline-none transition-colors duration-200 hover:text-human-1/80 md:text-xxs lg:text-xs"
305+
className="cursor-pointer appearance-none bg-transparent py-2 text-center text-sm font-semibold text-human-1 outline-none transition-colors duration-200 hover:text-human-1/80 md:text-xxs lg:text-xs"
306306
>
307307
{MAIA_MODELS.map((model) => (
308308
<option
@@ -322,16 +322,16 @@ export const Highlight: React.FC<Props> = ({
322322
</div>
323323

324324
<div className="flex w-full flex-row items-center justify-between border-b border-white/5 px-2 py-1 md:flex-col md:items-center md:justify-start md:py-0.5 lg:py-1">
325-
<p className="whitespace-nowrap text-base font-semibold text-human-2 md:text-xxs lg:text-xs">
325+
<p className="whitespace-nowrap text-sm font-semibold text-human-2 md:text-xxs lg:text-xs">
326326
White Win %
327327
</p>
328-
<p className="text-base font-bold text-human-1 md:text-sm lg:text-lg">
328+
<p className="text-sm font-bold text-human-1 lg:text-lg">
329329
{getWhiteWinRate()}
330330
</p>
331331
</div>
332332

333333
<div className="flex w-full flex-col items-start justify-center px-2 py-1.5 md:items-center xl:py-2">
334-
<p className="mb-1 whitespace-nowrap text-base font-semibold text-human-2 md:text-xxs lg:text-xs">
334+
<p className="mb-1 whitespace-nowrap text-sm font-semibold text-human-2 md:text-xxs lg:text-xs">
335335
Human Moves
336336
</p>
337337
<div className="flex w-full cursor-pointer items-center justify-between">
@@ -367,19 +367,19 @@ export const Highlight: React.FC<Props> = ({
367367
</div>
368368
<div className="flex flex-col items-center justify-start gap-0.5 xl:gap-1">
369369
<div className="flex w-full flex-col border-b border-white/5 py-2">
370-
<p className="whitespace-nowrap text-center text-base font-semibold text-engine-1 md:text-xxs lg:text-xs">
370+
<p className="whitespace-nowrap text-center text-sm font-semibold text-engine-1 md:text-xxs lg:text-xs">
371371
Stockfish 17
372372
</p>
373373
</div>
374374

375375
<div className="flex w-full flex-row items-center justify-between border-b border-white/5 px-2 py-1 md:flex-col md:items-center md:justify-start md:py-0.5 lg:py-1">
376-
<p className="whitespace-nowrap text-base font-semibold text-engine-2 md:text-xxs lg:text-xs">
376+
<p className="whitespace-nowrap text-sm font-semibold text-engine-2 md:text-xxs lg:text-xs">
377377
SF Eval{' '}
378378
{moveEvaluation?.stockfish?.depth
379379
? ` (d${moveEvaluation.stockfish?.depth})`
380380
: ''}
381381
</p>
382-
<p className="text-base font-bold text-engine-1 md:text-sm lg:text-lg">
382+
<p className="text-sm font-bold text-engine-1 md:text-sm lg:text-lg">
383383
{isCurrentPositionCheckmate
384384
? 'Checkmate'
385385
: moveEvaluation?.stockfish
@@ -393,7 +393,7 @@ export const Highlight: React.FC<Props> = ({
393393
</div>
394394

395395
<div className="flex w-full flex-col items-start justify-center px-2 py-1.5 md:items-center xl:py-2">
396-
<p className="mb-1 whitespace-nowrap text-base font-semibold text-engine-2 md:text-xxs lg:text-xs">
396+
<p className="mb-1 whitespace-nowrap text-sm font-semibold text-engine-2 md:text-xxs lg:text-xs">
397397
Engine Moves
398398
</p>
399399
<div className="flex w-full cursor-pointer items-center justify-between">

‎src/components/Analysis/MoveMap.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -259,7 +259,7 @@ export const MoveMap: React.FC<Props> = ({
259259
return (
260260
<div
261261
id="analysis-move-map"
262-
className="flex h-64 max-h-full w-full flex-col overflow-hidden rounded-md border border-glassBorder bg-glass backdrop-blur-md md:h-full"
262+
className="flex h-64 max-h-full w-full flex-col overflow-hidden border border-glassBorder md:h-full md:rounded-md md:bg-glass md:backdrop-blur-md"
263263
onMouseLeave={onContainerMouseLeave}
264264
>
265265
<h2 className="p-3 text-base text-primary md:text-sm xl:text-base">

‎src/components/Common/Footer.tsx‎

Lines changed: 64 additions & 77 deletions
Original file line numberDiff line numberDiff line change
@@ -88,87 +88,74 @@ export const Footer: React.FC = () => {
8888
]
8989

9090
return (
91-
<div className="flex flex-col items-start justify-center gap-8 bg-transparent px-6 py-8 md:items-center md:px-4">
92-
{/* Decorative divider: line × line × line (not full-width) */}
93-
<div className="mx-auto mt-1 flex w-full max-w-5xl select-none items-center gap-7 px-2">
94-
<div className="h-px flex-1 rounded bg-white/10" aria-hidden="true" />
95-
<span
96-
className="text-[12px] tracking-widest text-white/30"
97-
aria-hidden="true"
98-
>
99-
×
100-
</span>
101-
<div className="h-px flex-1 rounded bg-white/10" aria-hidden="true" />
102-
<span
103-
className="text-[12px] tracking-widest text-white/30"
104-
aria-hidden="true"
105-
>
106-
×
107-
</span>
108-
<div className="h-px flex-1 rounded bg-white/10" aria-hidden="true" />
109-
</div>
110-
<div className="flex w-full max-w-4xl flex-col items-start justify-start gap-4 md:flex-row md:items-center md:justify-center md:gap-8">
111-
<div className="mb-2 flex flex-col items-start gap-1 md:mb-0 md:items-center md:gap-0.5">
112-
<div className="flex items-center gap-2">
113-
<Image
114-
src="/maia-no-bg.png"
115-
alt="Maia Chess"
116-
width={26}
117-
height={26}
118-
/>
119-
<p className="text-xl font-bold text-primary">Maia Chess</p>
120-
</div>
121-
<p className="max-w-[200px] text-left text-sm text-secondary md:max-w-[160px] md:text-center md:text-xs">
122-
A project by the{' '}
123-
<a
124-
target="_blank"
125-
rel="noreferrer"
126-
href="http://csslab.cs.toronto.edu/"
127-
className="text-primary"
128-
>
129-
University of Toronto CSSLab
130-
</a>
131-
</p>
91+
<div className="flex w-full flex-col items-center justify-center py-4">
92+
<div className="flex w-[90%] flex-col items-start justify-center gap-6 bg-transparent md:items-center">
93+
<div className="mx-auto mt-1 flex w-full select-none items-center gap-7">
94+
<div className="h-px flex-1 rounded bg-white/10" aria-hidden="true" />
13295
</div>
133-
<div className="hidden h-10 w-[1px] rounded-full bg-white/10 md:block" />
134-
<div className="flex flex-col gap-6 md:flex-row md:gap-10">
135-
{footerSections.map((section, index) => (
136-
<div
137-
key={index}
138-
className="flex flex-col items-start justify-start gap-1.5 md:gap-0.5"
139-
>
140-
<p className="text-base font-medium md:text-sm">
141-
{section.title}
142-
</p>
143-
{section.links.map((link, linkIndex) => (
144-
<a
145-
key={linkIndex}
146-
href={link.href}
147-
target="_blank"
148-
rel="noreferrer"
149-
className="mt-0.5 md:mt-0.5"
150-
>
151-
{link.icon ? (
152-
<div className="flex items-center gap-1.5 text-secondary transition duration-200 hover:text-primary/80">
153-
<span className="material-symbols-outlined !text-sm md:!text-xs">
154-
{link.icon}
155-
</span>
156-
<p className="text-sm md:text-xs">{link.text}</p>
157-
</div>
158-
) : (
159-
<p className="text-sm text-secondary transition duration-200 hover:text-primary/80 md:text-xs">
160-
{link.text}
161-
</p>
162-
)}
163-
</a>
164-
))}
96+
<div className="flex w-full max-w-4xl flex-col items-start justify-start gap-4 md:flex-row md:items-center md:justify-center md:gap-8">
97+
<div className="mb-2 flex flex-col items-start gap-1 md:mb-0 md:items-center md:gap-0.5">
98+
<div className="flex items-center gap-2">
99+
<Image
100+
src="/maia-no-bg.png"
101+
alt="Maia Chess"
102+
width={26}
103+
height={26}
104+
/>
105+
<p className="text-xl font-bold text-primary">Maia Chess</p>
165106
</div>
166-
))}
107+
<p className="max-w-[200px] text-left text-sm text-secondary md:max-w-[160px] md:text-center md:text-xs">
108+
A project by the{' '}
109+
<a
110+
target="_blank"
111+
rel="noreferrer"
112+
href="http://csslab.cs.toronto.edu/"
113+
className="text-primary"
114+
>
115+
University of Toronto CSSLab
116+
</a>
117+
</p>
118+
</div>
119+
<div className="hidden h-10 w-[1px] rounded-full bg-white/10 md:block" />
120+
<div className="flex flex-col gap-6 md:flex-row md:gap-10">
121+
{footerSections.map((section, index) => (
122+
<div
123+
key={index}
124+
className="flex flex-col items-start justify-start gap-1.5 md:gap-0.5"
125+
>
126+
<p className="text-base font-medium md:text-sm">
127+
{section.title}
128+
</p>
129+
{section.links.map((link, linkIndex) => (
130+
<a
131+
key={linkIndex}
132+
href={link.href}
133+
target="_blank"
134+
rel="noreferrer"
135+
className="mt-0.5 md:mt-0.5"
136+
>
137+
{link.icon ? (
138+
<div className="flex items-center gap-1.5 text-secondary transition duration-200 hover:text-primary/80">
139+
<span className="material-symbols-outlined !text-sm md:!text-xs">
140+
{link.icon}
141+
</span>
142+
<p className="text-sm md:text-xs">{link.text}</p>
143+
</div>
144+
) : (
145+
<p className="text-sm text-secondary transition duration-200 hover:text-primary/80 md:text-xs">
146+
{link.text}
147+
</p>
148+
)}
149+
</a>
150+
))}
151+
</div>
152+
))}
153+
</div>
167154
</div>
155+
<p className="text-left text-sm text-secondary md:text-center md:text-xs">
156+
© 2025 Maia Chess. All rights reserved.
157+
</p>
168158
</div>
169-
<p className="text-left text-sm text-secondary md:text-center md:text-xs">
170-
© 2025 Maia Chess. All rights reserved.
171-
</p>
172159
</div>
173160
)
174161
}

‎src/components/Common/GameInfo.tsx‎

Lines changed: 12 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -41,16 +41,16 @@ export const GameInfo: React.FC<Props> = ({
4141
id="analysis-game-list"
4242
className={
4343
embedded
44-
? 'flex w-full flex-col items-start justify-start gap-1 overflow-hidden border-b border-glassBorder bg-transparent p-3'
45-
: 'flex w-full flex-col items-start justify-start gap-1 overflow-hidden rounded-md border border-glassBorder bg-glass p-3 backdrop-blur-md'
44+
? 'flex w-full flex-col items-start justify-start gap-1 overflow-hidden border-b border-t border-glassBorder bg-transparent px-4 py-2 md:border md:p-3'
45+
: 'flex w-full flex-col items-start justify-start gap-1 overflow-hidden border border-b border-t border-glassBorder bg-glass px-4 py-2 backdrop-blur-md md:rounded-md md:border md:p-3'
4646
}
4747
>
4848
<div className="flex w-full items-center justify-between">
49-
<div className="flex items-center justify-start gap-1.5">
50-
<span className="material-symbols-outlined text-lg md:text-xl">
49+
<div className="flex items-center justify-start gap-1 md:gap-1.5">
50+
<span className="material-symbols-outlined text-base md:text-xl">
5151
{icon}
5252
</span>
53-
<h2 className="text-lg font-semibold md:text-xl">{title}</h2>
53+
<h2 className="text-sm font-semibold md:text-lg">{title}</h2>
5454
{streamState && (
5555
<div className="flex items-center gap-1.5">
5656
<div
@@ -76,7 +76,7 @@ export const GameInfo: React.FC<Props> = ({
7676
</div>
7777
)}
7878
{currentMaiaModel && setCurrentMaiaModel && (
79-
<div className="flex items-center gap-1 text-sm md:hidden">
79+
<div className="flex items-center gap-1 text-xs md:hidden md:text-sm">
8080
using
8181
<div className="relative inline-flex items-center gap-0.5">
8282
<select
@@ -101,18 +101,20 @@ export const GameInfo: React.FC<Props> = ({
101101
{showGameListButton && (
102102
<button
103103
type="button"
104-
className="flex items-center gap-1 rounded bg-human-4/30 px-2 py-1 text-sm text-human-2 duration-200 hover:bg-human-4/50 md:hidden"
104+
className="flex items-center gap-1 rounded bg-human-4/30 px-2 py-1 text-xxs text-human-2 duration-200 hover:bg-human-4/50 md:hidden md:text-sm"
105105
onClick={onGameListClick}
106106
>
107-
<span className="material-symbols-outlined text-sm">
107+
<span className="material-symbols-outlined text-xxs md:text-sm">
108108
format_list_bulleted
109109
</span>
110-
<span>Switch Game</span>
110+
<span>
111+
Switch <span className="hidden md:inline">Game</span>
112+
</span>
111113
</button>
112114
)}
113115
<button
114116
type="button"
115-
className="material-symbols-outlined duration-200 hover:text-human-3 focus:outline-none"
117+
className="material-symbols-outlined text-lg duration-200 hover:text-human-3 focus:outline-none"
116118
onClick={(e) => {
117119
e.preventDefault()
118120
e.stopPropagation()

‎src/pages/analysis/[...id].tsx‎

Lines changed: 5 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -901,7 +901,7 @@ const Analysis: React.FC<Props> = ({
901901
</div>
902902
) : (
903903
<motion.div
904-
className="flex w-full flex-col items-start justify-start gap-1"
904+
className="flex w-full flex-col items-start justify-start"
905905
variants={itemVariants}
906906
style={{ willChange: 'transform, opacity' }}
907907
>
@@ -922,19 +922,17 @@ const Analysis: React.FC<Props> = ({
922922
game={analyzedGame}
923923
availableMoves={
924924
controller.learnFromMistakes.state.isActive && analysisEnabled
925-
? new Map() // Empty moves when puzzle is solved
925+
? new Map()
926926
: controller.availableMoves
927927
}
928928
setCurrentSquare={setCurrentSquare}
929929
shapes={(() => {
930930
const baseShapes = []
931931

932-
// Add analysis arrows only when analysis is enabled
933932
if (analysisEnabled) {
934933
baseShapes.push(...controller.arrows)
935934
}
936935

937-
// Add mistake arrow during learn mode when analysis is disabled
938936
if (
939937
controller.learnFromMistakes.state.isActive &&
940938
!analysisEnabled
@@ -952,7 +950,6 @@ const Analysis: React.FC<Props> = ({
952950
}
953951
}
954952

955-
// Add hover arrow if present
956953
if (hoverArrow) {
957954
baseShapes.push(hoverArrow)
958955
}
@@ -976,6 +973,7 @@ const Analysis: React.FC<Props> = ({
976973
<div className="flex w-full flex-col gap-0">
977974
<div className="w-full !flex-grow-0">
978975
<BoardController
976+
embedded
979977
gameTree={controller.gameTree}
980978
orientation={controller.orientation}
981979
setOrientation={controller.setOrientation}
@@ -1009,31 +1007,8 @@ const Analysis: React.FC<Props> = ({
10091007
/>
10101008
</div>
10111009
</div>
1012-
<div className="flex w-full flex-col gap-1 overflow-hidden">
1013-
{/* Analysis Toggle Bar */}
1014-
<div className="flex items-center justify-between rounded bg-background-1 px-4 py-2">
1015-
<div className="flex items-center gap-2">
1016-
<span className="material-symbols-outlined text-xl">
1017-
analytics
1018-
</span>
1019-
<h3 className="font-semibold">Analysis</h3>
1020-
</div>
1021-
<button
1022-
onClick={handleToggleAnalysis}
1023-
className={`flex items-center gap-2 rounded px-3 py-1 text-sm transition-colors ${
1024-
analysisEnabled
1025-
? 'bg-human-4 text-white hover:bg-human-4/80'
1026-
: 'bg-background-2 text-secondary hover:bg-background-3'
1027-
}`}
1028-
>
1029-
<span className="material-symbols-outlined !text-sm">
1030-
{analysisEnabled ? 'visibility' : 'visibility_off'}
1031-
</span>
1032-
{analysisEnabled ? 'Visible' : 'Hidden'}
1033-
</button>
1034-
</div>
1035-
1036-
<div className="relative">
1010+
<div className="flex w-full flex-col overflow-hidden">
1011+
<div className="relative border-t border-glassBorder bg-glass backdrop-blur-md">
10371012
<Highlight
10381013
hover={
10391014
analysisEnabled &&

0 commit comments

Comments
 (0)