Skip to content

Commit 6e1f7bd

Browse files
kevinjosethomaskevinjosethomas
committed
style: segment maia/sf eval in highlight component
1 parent 2c1fd26 commit 6e1f7bd

1 file changed

Lines changed: 87 additions & 72 deletions

File tree

‎src/components/Analysis/Highlight.tsx‎

Lines changed: 87 additions & 72 deletions
Original file line numberDiff line numberDiff line change
@@ -113,62 +113,28 @@ export const Highlight: React.FC<Props> = ({
113113

114114
return (
115115
<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>
128-
</div>
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) => {
116+
<div className="grid grid-cols-2 border-b border-white/20">
117+
<div className="flex flex-col items-center justify-start gap-0.5 border-r border-white/20 bg-human-3/5 xl:gap-1">
118+
<div className="flex w-full flex-col border-b border-white/5 py-2">
119+
<p className="whitespace-nowrap text-center text-human-1 md:text-[10px] lg:text-xs">
120+
Maia {currentMaiaModel.slice(-4)}
121+
</p>
122+
</div>
123+
<div className="flex w-full flex-col items-center justify-start border-b border-white/5 px-2 py-1 md:py-0.5 lg:py-1">
124+
<p className="whitespace-nowrap text-xs text-human-2 md:text-[10px] lg:text-xs">
125+
White Win %
126+
</p>
127+
<p className="text-lg font-bold text-human-1 md:text-sm lg:text-lg">
128+
{moveEvaluation?.maia
129+
? `${Math.round(moveEvaluation.maia?.value * 1000) / 10}%`
130+
: '...'}
131+
</p>
132+
</div>
133+
<div className="grid grid-rows-2 items-center justify-center p-1.5 xl:p-2">
134+
<p className="mb-1 whitespace-nowrap text-xs font-semibold text-human-2 md:text-[10px] lg:text-xs">
135+
Human Moves
136+
</p>
137+
{recommendations.maia?.slice(0, 4).map(({ move, prob }, index) => {
172138
return (
173139
<button
174140
key={index}
@@ -177,32 +143,81 @@ export const Highlight: React.FC<Props> = ({
177143
color: colorSanMapping[move]?.color ?? '#fff',
178144
}}
179145
onMouseLeave={handleMouseLeave}
180-
onMouseEnter={(e) =>
181-
handleMouseEnter(
182-
move,
183-
'stockfish',
184-
e,
185-
undefined,
186-
cp,
187-
winrate,
188-
winrate_loss,
189-
)
190-
}
146+
onMouseEnter={(e) => handleMouseEnter(move, 'maia', e, prob)}
191147
onClick={() => makeMove(move)}
192148
>
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)}`}
149+
<p className="text-right font-mono text-[10px] xl:text-xs">
150+
{(Math.round(prob * 1000) / 10).toFixed(1)}%
196151
</p>
197-
<p className="text-left font-mono text-[10px] xl:text-xs 2xl:text-sm">
152+
<p className="text-left font-mono text-[10px] xl:text-xs">
198153
{colorSanMapping[move]?.san ?? move}
199154
</p>
200155
</button>
201156
)
202157
})}
158+
</div>
159+
</div>
160+
<div className="flex flex-col items-center justify-start gap-0.5 bg-engine-3/5 xl:gap-1">
161+
<div className="flex w-full flex-col border-b border-white/5 py-2">
162+
<p className="whitespace-nowrap text-center text-engine-1 md:text-[10px] lg:text-xs">
163+
Stockfish{' '}
164+
{moveEvaluation?.stockfish?.depth
165+
? ` (D${moveEvaluation.stockfish?.depth})`
166+
: ''}
167+
</p>
168+
</div>
169+
<div className="flex w-full flex-col items-center justify-start border-b border-white/5 px-2 py-1 md:py-0.5 lg:py-1">
170+
<p className="whitespace-nowrap text-xs text-engine-2 md:text-[10px] lg:text-xs">
171+
Eval
172+
</p>
173+
<p className="text-lg font-bold text-engine-1 md:text-sm lg:text-lg">
174+
{moveEvaluation?.stockfish
175+
? `${moveEvaluation.stockfish.model_optimal_cp > 0 ? '+' : ''}${moveEvaluation.stockfish.model_optimal_cp / 100}`
176+
: '...'}
177+
</p>
178+
</div>
179+
<div className="grid grid-rows-2 flex-col items-center justify-center p-1.5 xl:p-2">
180+
<p className="mb-1 whitespace-nowrap text-xs font-semibold text-engine-2 md:text-[10px] lg:text-xs">
181+
Engine Moves
182+
</p>
183+
{recommendations.stockfish
184+
?.slice(0, 4)
185+
.map(({ move, cp, winrate, winrate_loss }, index) => {
186+
return (
187+
<button
188+
key={index}
189+
className="grid cursor-pointer grid-cols-2 gap-1.5 hover:underline xl:gap-2 2xl:gap-3"
190+
style={{
191+
color: colorSanMapping[move]?.color ?? '#fff',
192+
}}
193+
onMouseLeave={handleMouseLeave}
194+
onMouseEnter={(e) =>
195+
handleMouseEnter(
196+
move,
197+
'stockfish',
198+
e,
199+
undefined,
200+
cp,
201+
winrate,
202+
winrate_loss,
203+
)
204+
}
205+
onClick={() => makeMove(move)}
206+
>
207+
<p className="w-[32px] text-right font-mono text-[10px] xl:w-[36px] xl:text-xs 2xl:w-[42px]">
208+
{cp > 0 ? '+' : null}
209+
{`${(cp / 100).toFixed(2)}`}
210+
</p>
211+
<p className="text-left font-mono text-[10px] xl:text-xs">
212+
{colorSanMapping[move]?.san ?? move}
213+
</p>
214+
</button>
215+
)
216+
})}
217+
</div>
203218
</div>
204219
</div>
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">
220+
<div className="flex flex-col items-start justify-start gap-0.5 bg-background-1/80 p-2 text-sm xl:gap-1 xl:p-3">
206221
<AnimatePresence mode="wait">
207222
{boardDescription ? (
208223
<motion.div

0 commit comments

Comments
 (0)