Skip to content

Commit 0bc71a9

Browse files
kevinjosethomaskevinjosethomas
committed
feat: change layout to make analysis page responsive
1 parent 638239d commit 0bc71a9

5 files changed

Lines changed: 255 additions & 150 deletions

File tree

‎src/components/Analysis/BlunderMeter.tsx‎

Lines changed: 18 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ interface Props {
1010
colorSanMapping: ColorSanMapping
1111
hover: (move?: string) => void
1212
makeMove: (move: string) => void
13+
showContainer?: boolean
1314
moveEvaluation?: {
1415
maia?: { policy: { [key: string]: number } }
1516
stockfish?: {
@@ -25,6 +26,7 @@ export const BlunderMeter: React.FC<Props> = ({
2526
hover,
2627
makeMove,
2728
colorSanMapping,
29+
showContainer = true,
2830
moveEvaluation,
2931
}: Props) => {
3032
const { isMobile } = useContext(WindowSizeContext)
@@ -35,6 +37,7 @@ export const BlunderMeter: React.FC<Props> = ({
3537
hover={hover}
3638
makeMove={makeMove}
3739
colorSanMapping={colorSanMapping}
40+
showContainer={showContainer}
3841
moveEvaluation={moveEvaluation}
3942
/>
4043
) : (
@@ -43,6 +46,7 @@ export const BlunderMeter: React.FC<Props> = ({
4346
hover={hover}
4447
makeMove={makeMove}
4548
colorSanMapping={colorSanMapping}
49+
showContainer={showContainer}
4650
moveEvaluation={moveEvaluation}
4751
/>
4852
)
@@ -53,11 +57,14 @@ const DesktopBlunderMeter: React.FC<Props> = ({
5357
hover,
5458
makeMove,
5559
colorSanMapping,
60+
showContainer = true,
5661
moveEvaluation,
5762
}: Props) => {
5863
return (
59-
<div className="flex h-64 max-h-full w-full flex-col gap-2 overflow-hidden rounded bg-background-1/60 p-3 md:h-full md:w-auto md:min-w-[40%] md:max-w-[40%]">
60-
<p className="text-lg text-primary">Blunder Meter</p>
64+
<div
65+
className={`flex h-64 max-h-full w-full flex-col gap-2 overflow-hidden rounded ${showContainer ? 'bg-background-1/60 p-3 md:w-auto md:min-w-[40%] md:max-w-[40%]' : ''} md:h-full`}
66+
>
67+
<p className="text-sm text-primary xl:text-base">Blunder Meter</p>
6168
<div className="flex h-full w-full flex-col overflow-hidden">
6269
<div className="flex h-full w-full select-none flex-col overflow-hidden rounded">
6370
<Meter
@@ -104,11 +111,14 @@ const MobileBlunderMeter: React.FC<Props> = ({
104111
hover,
105112
makeMove,
106113
colorSanMapping,
114+
showContainer,
107115
moveEvaluation,
108116
}: Props) => {
109117
return (
110-
<div className="flex w-full flex-col gap-2 overflow-hidden rounded bg-background-1/60 p-3">
111-
<p className="text-primary">Blunder Meter</p>
118+
<div
119+
className={`flex w-full flex-col gap-2 overflow-hidden rounded ${showContainer ? 'bg-background-1/60 p-3' : ''}`}
120+
>
121+
<p className="text-sm text-primary xl:text-base">Blunder Meter</p>
112122
<div className="flex w-full flex-col gap-1">
113123
<div className="flex w-full flex-row overflow-hidden">
114124
<div className="flex w-full select-none flex-row overflow-hidden rounded">
@@ -360,15 +370,15 @@ function Meter({
360370
}}
361371
>
362372
<motion.div
363-
className={`flex h-full min-h-10 min-w-8 flex-col items-center justify-start py-1 ${bgColor}`}
373+
className={`flex h-full min-h-10 min-w-6 flex-col items-center justify-start py-1 xl:min-w-8 ${bgColor}`}
364374
>
365-
<motion.p className="text-xs font-bold text-black text-opacity-50">
375+
<motion.p className="text-[10px] font-bold text-black text-opacity-50 xl:text-xs">
366376
{Math.round(probability)}%
367377
</motion.p>
368378
</motion.div>
369379
<div className="flex h-full w-full flex-col overflow-hidden">
370-
<p className={`text-sm font-medium ${textColor}`}>{title}</p>
371-
<div className="grid w-full grid-cols-3 overflow-hidden overflow-ellipsis text-wrap text-xs text-secondary">
380+
<p className={`text-xs font-medium xl:text-sm ${textColor}`}>{title}</p>
381+
<div className="grid w-full grid-cols-3 overflow-hidden overflow-ellipsis text-wrap text-[10px] text-secondary xl:text-xs">
372382
{filteredMoves().map((move) => (
373383
<button
374384
key={move.move}

‎src/components/Analysis/Highlight.tsx‎

Lines changed: 87 additions & 98 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import { useState, useEffect, useRef } from 'react'
2-
import { MovesByRating } from './MovesByRating'
32
import { MoveTooltip } from './MoveTooltip'
43
import { motion, AnimatePresence } from 'framer-motion'
54
import { MaiaEvaluation, StockfishEvaluation, ColorSanMapping } from 'src/types'
@@ -23,14 +22,12 @@ interface Props {
2322
}
2423
hover: (move?: string) => void
2524
makeMove: (move: string) => void
26-
movesByRating: { [key: string]: number }[] | undefined
2725
boardDescription: string
2826
}
2927

3028
export const Highlight: React.FC<Props> = ({
3129
hover,
3230
makeMove,
33-
movesByRating,
3431
moveEvaluation,
3532
colorSanMapping,
3633
recommendations,
@@ -115,39 +112,63 @@ export const Highlight: React.FC<Props> = ({
115112
}, [boardDescription])
116113

117114
return (
118-
<div className="flex h-full w-full flex-col items-start gap-1 overflow-hidden md:flex-row md:gap-0 md:rounded md:border-[0.5px] md:border-white/40">
119-
<div className="flex h-full w-full flex-col border-white/40 bg-background-1 md:w-auto md:min-w-[40%] md:max-w-[40%] md:border-r-[0.5px]">
120-
<div className="grid grid-cols-2">
121-
<div className="flex flex-col items-center justify-center gap-0.5 bg-human-3/5 py-1.5 xl:gap-1 xl:py-2 2xl:py-3">
122-
<p className="text-center text-[10px] text-human-2 xl:text-xs 2xl:text-sm">
123-
Maia {currentMaiaModel.slice(-4)}
124-
<br />
125-
White Win %
126-
</p>
127-
<p className="text-lg font-bold text-human-1 xl:text-xl 2xl:text-2xl">
128-
{moveEvaluation?.maia
129-
? `${Math.round(moveEvaluation.maia?.value * 1000) / 10}%`
130-
: '...'}
131-
</p>
132-
</div>
133-
<div className="flex flex-col items-center justify-center gap-0.5 bg-engine-3/5 py-1.5 xl:py-2 2xl:gap-1 2xl:py-3">
134-
<p className="text-center text-[10px] text-engine-2 xl:text-xs 2xl:text-sm">
135-
SF Eval
136-
<br />
137-
{moveEvaluation?.stockfish?.depth
138-
? ` (Depth ${moveEvaluation.stockfish?.depth})`
139-
: ''}
140-
</p>
141-
<p className="text-lg font-bold text-engine-1 xl:text-xl 2xl:text-2xl">
142-
{moveEvaluation?.stockfish
143-
? `${moveEvaluation.stockfish.model_optimal_cp > 0 ? '+' : ''}${moveEvaluation.stockfish.model_optimal_cp / 100}`
144-
: '...'}
145-
</p>
146-
</div>
115+
<div className="flex h-full w-full flex-col border-white/40 bg-background-1">
116+
<div className="grid grid-cols-2">
117+
<div className="flex flex-col items-center justify-center gap-0.5 bg-human-3/5 py-1.5 xl:gap-1 xl:py-2 2xl:py-3">
118+
<p className="text-center text-[10px] text-human-2 xl:text-xs 2xl:text-sm">
119+
Maia {currentMaiaModel.slice(-4)}
120+
<br />
121+
White Win %
122+
</p>
123+
<p className="text-lg font-bold text-human-1 xl:text-xl 2xl:text-2xl">
124+
{moveEvaluation?.maia
125+
? `${Math.round(moveEvaluation.maia?.value * 1000) / 10}%`
126+
: '...'}
127+
</p>
147128
</div>
148-
<div className="grid grid-cols-2">
149-
<div className="grid grid-rows-2 items-center justify-center p-1.5 xl:p-2 2xl:p-3">
150-
{recommendations.maia?.slice(0, 4).map(({ move, prob }, index) => {
129+
<div className="flex flex-col items-center justify-center gap-0.5 bg-engine-3/5 py-1.5 xl:py-2 2xl:gap-1 2xl:py-3">
130+
<p className="text-center text-[10px] text-engine-2 xl:text-xs 2xl:text-sm">
131+
SF Eval
132+
<br />
133+
{moveEvaluation?.stockfish?.depth
134+
? ` (Depth ${moveEvaluation.stockfish?.depth})`
135+
: ''}
136+
</p>
137+
<p className="text-lg font-bold text-engine-1 xl:text-xl 2xl:text-2xl">
138+
{moveEvaluation?.stockfish
139+
? `${moveEvaluation.stockfish.model_optimal_cp > 0 ? '+' : ''}${moveEvaluation.stockfish.model_optimal_cp / 100}`
140+
: '...'}
141+
</p>
142+
</div>
143+
</div>
144+
<div className="grid grid-cols-2">
145+
<div className="grid grid-rows-2 items-center justify-center p-1.5 xl:p-2 2xl:p-3">
146+
{recommendations.maia?.slice(0, 4).map(({ move, prob }, index) => {
147+
return (
148+
<button
149+
key={index}
150+
className="grid cursor-pointer grid-cols-2 gap-1.5 hover:underline xl:gap-2 2xl:gap-3"
151+
style={{
152+
color: colorSanMapping[move]?.color ?? '#fff',
153+
}}
154+
onMouseLeave={handleMouseLeave}
155+
onMouseEnter={(e) => handleMouseEnter(move, 'maia', e, prob)}
156+
onClick={() => makeMove(move)}
157+
>
158+
<p className="text-right font-mono text-[10px] xl:text-xs 2xl:text-sm">
159+
{(Math.round(prob * 1000) / 10).toFixed(1)}%
160+
</p>
161+
<p className="text-left font-mono text-[10px] xl:text-xs 2xl:text-sm">
162+
{colorSanMapping[move]?.san ?? move}
163+
</p>
164+
</button>
165+
)
166+
})}
167+
</div>
168+
<div className="grid grid-rows-2 flex-col items-center justify-center p-1.5 xl:p-2 2xl:p-3">
169+
{recommendations.stockfish
170+
?.slice(0, 4)
171+
.map(({ move, cp, winrate, winrate_loss }, index) => {
151172
return (
152173
<button
153174
key={index}
@@ -156,80 +177,48 @@ export const Highlight: React.FC<Props> = ({
156177
color: colorSanMapping[move]?.color ?? '#fff',
157178
}}
158179
onMouseLeave={handleMouseLeave}
159-
onMouseEnter={(e) => handleMouseEnter(move, 'maia', e, prob)}
180+
onMouseEnter={(e) =>
181+
handleMouseEnter(
182+
move,
183+
'stockfish',
184+
e,
185+
undefined,
186+
cp,
187+
winrate,
188+
winrate_loss,
189+
)
190+
}
160191
onClick={() => makeMove(move)}
161192
>
162-
<p className="text-right font-mono text-[10px] xl:text-xs 2xl:text-sm">
163-
{(Math.round(prob * 1000) / 10).toFixed(1)}%
193+
<p className="w-[32px] text-right font-mono text-[10px] xl:w-[36px] xl:text-xs 2xl:w-[42px] 2xl:text-sm">
194+
{cp > 0 ? '+' : null}
195+
{`${(cp / 100).toFixed(2)}`}
164196
</p>
165197
<p className="text-left font-mono text-[10px] xl:text-xs 2xl:text-sm">
166198
{colorSanMapping[move]?.san ?? move}
167199
</p>
168200
</button>
169201
)
170202
})}
171-
</div>
172-
<div className="grid grid-rows-2 flex-col items-center justify-center p-1.5 xl:p-2 2xl:p-3">
173-
{recommendations.stockfish
174-
?.slice(0, 4)
175-
.map(({ move, cp, winrate, winrate_loss }, index) => {
176-
return (
177-
<button
178-
key={index}
179-
className="grid cursor-pointer grid-cols-2 gap-1.5 hover:underline xl:gap-2 2xl:gap-3"
180-
style={{
181-
color: colorSanMapping[move]?.color ?? '#fff',
182-
}}
183-
onMouseLeave={handleMouseLeave}
184-
onMouseEnter={(e) =>
185-
handleMouseEnter(
186-
move,
187-
'stockfish',
188-
e,
189-
undefined,
190-
cp,
191-
winrate,
192-
winrate_loss,
193-
)
194-
}
195-
onClick={() => makeMove(move)}
196-
>
197-
<p className="w-[32px] text-right font-mono text-[10px] xl:w-[36px] xl:text-xs 2xl:w-[42px] 2xl:text-sm">
198-
{cp > 0 ? '+' : null}
199-
{`${(cp / 100).toFixed(2)}`}
200-
</p>
201-
<p className="text-left font-mono text-[10px] xl:text-xs 2xl:text-sm">
202-
{colorSanMapping[move]?.san ?? move}
203-
</p>
204-
</button>
205-
)
206-
})}
207-
</div>
208-
</div>
209-
<div className="flex flex-col items-start justify-start gap-0.5 bg-background-1/80 px-2 pb-2 text-sm xl:gap-1 xl:px-3 xl:pb-3 2xl:py-1.5">
210-
<AnimatePresence mode="wait">
211-
{boardDescription ? (
212-
<motion.div
213-
key={animationKey}
214-
initial={{ opacity: 0, y: 10 }}
215-
animate={{ opacity: 1, y: 0 }}
216-
exit={{ opacity: 0, y: -10 }}
217-
transition={{ duration: 0.1 }}
218-
className="w-full"
219-
>
220-
<p className="w-full whitespace-normal break-words text-[10px] leading-tight text-secondary xl:text-xs xl:leading-tight">
221-
{boardDescription}
222-
</p>
223-
</motion.div>
224-
) : null}
225-
</AnimatePresence>
226203
</div>
227204
</div>
228-
<div className="flex h-full w-full flex-col bg-background-1">
229-
<MovesByRating
230-
moves={movesByRating}
231-
colorSanMapping={colorSanMapping}
232-
/>
205+
<div className="flex flex-col items-start justify-start gap-0.5 bg-background-1/80 px-2 pb-2 text-sm xl:gap-1 xl:px-3 xl:pb-3 2xl:py-1.5">
206+
<AnimatePresence mode="wait">
207+
{boardDescription ? (
208+
<motion.div
209+
key={animationKey}
210+
initial={{ opacity: 0, y: 10 }}
211+
animate={{ opacity: 1, y: 0 }}
212+
exit={{ opacity: 0, y: -10 }}
213+
transition={{ duration: 0.1 }}
214+
className="w-full"
215+
>
216+
<p className="w-full whitespace-normal break-words text-[10px] leading-tight text-secondary xl:text-xs xl:leading-tight">
217+
{boardDescription}
218+
</p>
219+
</motion.div>
220+
) : null}
221+
</AnimatePresence>
233222
</div>
234223

235224
{/* Tooltip */}

0 commit comments

Comments
 (0)