Skip to content

Commit ca5b9c6

Browse files
kevinjosethomaskevinjosethomas
committed
feat: added MoveMap, MoveRecommendations, color mappings, and Moves by Rating
1 parent 20c54d5 commit ca5b9c6

File tree

8 files changed

+488
-47
lines changed

8 files changed

+488
-47
lines changed

‎src/components/Analysis/MoveMap.tsx

+154
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,154 @@
1+
import {
2+
Cell,
3+
Label,
4+
XAxis,
5+
YAxis,
6+
Scatter,
7+
LabelList,
8+
ScatterChart,
9+
CartesianGrid,
10+
ResponsiveContainer,
11+
} from 'recharts'
12+
13+
interface Props {
14+
moveMap?: { move: string; x: number; y: number }[]
15+
colorSanMapping: {
16+
[move: string]: {
17+
san: string
18+
color: string
19+
}
20+
}
21+
}
22+
23+
export const MoveMap: React.FC<Props> = ({
24+
moveMap,
25+
colorSanMapping,
26+
}: Props) => {
27+
console.log(moveMap)
28+
return (
29+
<div className="flex h-full max-h-full flex-col overflow-hidden rounded bg-background-1/60">
30+
<p className="p-4 text-lg text-white">Move Map</p>
31+
<div className="flex h-full w-full flex-col">
32+
<ResponsiveContainer width="100%" height="100%">
33+
<ScatterChart margin={{ left: -14, top: 0, right: 30, bottom: 10 }}>
34+
<CartesianGrid strokeDasharray="3 3" stroke="#3C3C3C" />
35+
<YAxis
36+
dataKey="y"
37+
type="number"
38+
axisLine={false}
39+
label={{
40+
value: 'Maia',
41+
position: 'insideLeft',
42+
fill: '#FE7F6D',
43+
angle: -90,
44+
fontSize: 14,
45+
fontWeight: 600,
46+
offset: 26,
47+
dy: 20,
48+
}}
49+
tickCount={4}
50+
tickLine={false}
51+
tickMargin={0}
52+
tick={{ fill: 'white', fontSize: 10 }}
53+
tickFormatter={(value) => `${value}%`}
54+
domain={([dataMin, dataMax]) => [0, dataMax > 75 ? 100 : 75]}
55+
>
56+
<Label
57+
value="← Unlikely"
58+
position="insideBottomLeft"
59+
offset={32}
60+
angle={-90}
61+
fontSize={10}
62+
fontWeight={500}
63+
fill="#BF5F52"
64+
dy={60}
65+
/>
66+
<Label
67+
value="Likely →"
68+
position="insideTopLeft"
69+
offset={24}
70+
angle={-90}
71+
fontSize={10}
72+
fontWeight={500}
73+
fill="#BF5F52"
74+
dy={14}
75+
/>
76+
</YAxis>
77+
<XAxis
78+
scale="sqrt"
79+
dataKey="x"
80+
type="number"
81+
axisLine={false}
82+
domain={[-4, 0]}
83+
label={{
84+
value: 'SF Eval Loss',
85+
position: 'insideBottom',
86+
fill: '#76ADDD',
87+
fontSize: 14,
88+
fontWeight: 600,
89+
offset: 0,
90+
dx: -12,
91+
}}
92+
ticks={[-4, -2, -1, 0]}
93+
tick={{
94+
fill: 'white',
95+
fontSize: 10,
96+
}}
97+
tickMargin={0}
98+
tickLine={false}
99+
>
100+
<Label
101+
value="← Blunders"
102+
position="insideLeft"
103+
fontSize={10}
104+
fontWeight={500}
105+
fill="#5A9DD7"
106+
dy={11}
107+
offset={-20}
108+
/>
109+
<Label
110+
value="Best Moves →"
111+
position="insideRight"
112+
fontSize={10}
113+
fontWeight={500}
114+
fill="#5A9DD7"
115+
dy={11}
116+
offset={-10}
117+
/>
118+
</XAxis>
119+
<Scatter name="Moves" data={moveMap}>
120+
<LabelList
121+
dataKey="move"
122+
position="top"
123+
fontSize={12}
124+
fill="white"
125+
content={({ x, y, value, index }: any) => {
126+
return (
127+
<text
128+
x={x}
129+
y={y}
130+
key={index}
131+
fontSize={12}
132+
textAnchor="middle"
133+
dx={x < 100 ? 24 : 0}
134+
dy={x < 100 ? 0 : y < 55 ? 24 : -5}
135+
fill={colorSanMapping[value].color || '#fff'}
136+
>
137+
{colorSanMapping[value].san}
138+
</text>
139+
)
140+
}}
141+
/>
142+
{moveMap?.map((entry, index) => (
143+
<Cell
144+
key={`cell-${entry.move}${index}`}
145+
fill={colorSanMapping[entry.move].color || '#fff'}
146+
/>
147+
))}
148+
</Scatter>
149+
</ScatterChart>
150+
</ResponsiveContainer>
151+
</div>
152+
</div>
153+
)
154+
}

‎src/components/Analysis/MoveRecommendations.tsx

+74
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
interface Props {
2+
recommendations: {
3+
maia?: { move: string; prob: number }[]
4+
stockfish?: { move: string; cp: number }[]
5+
}
6+
colorSanMapping: {
7+
[move: string]: {
8+
san: string
9+
color: string
10+
}
11+
}
12+
}
13+
14+
export const MoveRecommendations: React.FC<Props> = ({
15+
recommendations,
16+
colorSanMapping,
17+
}: Props) => {
18+
return (
19+
<div className="col-span-2 grid h-full max-h-full grid-cols-2 flex-col overflow-hidden rounded">
20+
<div className="flex flex-col gap-2 bg-background-1 p-5">
21+
<p className="text-lg text-white">Maia 1800 Predictions</p>
22+
<div className="flex flex-col gap-1">
23+
<div className="flex items-center justify-between">
24+
<p className="font-mono text-sm font-extralight text-secondary/60">
25+
move
26+
</p>
27+
<p className="font-mono text-sm font-extralight text-secondary/60">
28+
%
29+
</p>
30+
</div>
31+
{recommendations.maia?.map(({ move, prob }, index) => (
32+
<div
33+
key={index}
34+
className="flex items-center justify-between"
35+
style={{
36+
color: colorSanMapping[move].color,
37+
}}
38+
>
39+
<p className="font-mono">{colorSanMapping[move].san}</p>
40+
<p className="font-mono text-sm">
41+
{Math.round(prob * 1000) / 10}%
42+
</p>
43+
</div>
44+
))}
45+
</div>
46+
</div>
47+
<div className="flex flex-col gap-2 bg-background-1/60 p-5">
48+
<p className="text-lg text-white">Stockfish Moves</p>
49+
<div className="flex flex-col gap-1">
50+
<div className="flex items-center justify-between">
51+
<p className="font-mono text-sm font-extralight text-secondary/60">
52+
move
53+
</p>
54+
<p className="font-mono text-sm font-extralight text-secondary/60">
55+
eval
56+
</p>
57+
</div>
58+
{recommendations.stockfish?.map(({ move, cp }, index) => (
59+
<div
60+
key={index}
61+
className="flex items-center justify-between"
62+
style={{
63+
color: colorSanMapping[move].color,
64+
}}
65+
>
66+
<p className="font-mono">{colorSanMapping[move].san}</p>
67+
<p className="font-mono text-sm">{cp / 100}</p>
68+
</div>
69+
))}
70+
</div>
71+
</div>
72+
</div>
73+
)
74+
}

‎src/components/Analysis/MovesByRating.tsx

+23-14
Original file line numberDiff line numberDiff line change
@@ -10,24 +10,33 @@ import {
1010

1111
interface Props {
1212
moves: { [key: string]: number }[] | undefined
13+
colorSanMapping: {
14+
[move: string]: {
15+
san: string
16+
color: string
17+
}
18+
}
1319
}
1420

15-
export const MovesByRating: React.FC<Props> = ({ moves }: Props) => {
21+
export const MovesByRating: React.FC<Props> = ({
22+
moves,
23+
colorSanMapping,
24+
}: Props) => {
1625
return (
17-
<div className="col-span-2 flex h-full max-h-full flex-col rounded bg-background-1/60 pb-4">
18-
<p className="p-4 text-xl text-white">Moves by Rating</p>
26+
<div className="col-span-2 flex h-full max-h-full flex-col rounded bg-background-1/60">
27+
<p className="p-4 text-lg text-white">Moves by Rating</p>
1928
<div className="flex h-full w-full flex-col">
2029
<ResponsiveContainer width="100%" height="100%">
21-
<AreaChart data={moves} margin={{ left: 20, right: 0 }}>
30+
<AreaChart data={moves} margin={{ left: -5, right: 0, bottom: 0 }}>
2231
<CartesianGrid strokeDasharray="3 3" stroke="#3C3C3C" />
2332
<XAxis
2433
dataKey="rating"
2534
axisLine={false}
2635
tick={{
2736
fill: 'white',
28-
fontSize: 14,
37+
fontSize: 10,
2938
}}
30-
tickMargin={6}
39+
tickMargin={4}
3140
ticks={[1100, 1200, 1300, 1400, 1500, 1600, 1700, 1800, 1900]}
3241
/>
3342
<YAxis
@@ -37,20 +46,20 @@ export const MovesByRating: React.FC<Props> = ({ moves }: Props) => {
3746
domain={[0, 100]}
3847
tick={{
3948
fill: 'white',
40-
fontSize: 14,
49+
fontSize: 10,
4150
}}
4251
label={{
4352
value: 'Maia Probability',
4453
angle: -90,
45-
fill: '#ff0000',
54+
fill: '#FE7F6D',
4655
position: 'insideLeft',
4756
dy: 46,
48-
offset: 4,
57+
offset: 20,
4958
fontWeight: 600,
5059
fontSize: 14,
5160
}}
5261
tickCount={4}
53-
tickMargin={5}
62+
tickMargin={2}
5463
tickLine={false}
5564
tickFormatter={(value) => `${value}%`}
5665
/>
@@ -61,7 +70,7 @@ export const MovesByRating: React.FC<Props> = ({ moves }: Props) => {
6170
domain={[0, 100]}
6271
tick={{
6372
fill: 'white',
64-
fontSize: 14,
73+
fontSize: 10,
6574
}}
6675
tickCount={4}
6776
tickMargin={5}
@@ -79,11 +88,11 @@ export const MovesByRating: React.FC<Props> = ({ moves }: Props) => {
7988
yAxisId="left"
8089
dataKey={move}
8190
dot={{
82-
stroke: '#fff',
91+
stroke: colorSanMapping[move].color,
8392
strokeWidth: 1,
8493
}}
85-
stroke={'#fff'}
86-
fill={'#fff'}
94+
stroke={colorSanMapping[move].color}
95+
fill={colorSanMapping[move].color}
8796
fillOpacity={0.1}
8897
strokeWidth={3}
8998
/>

‎src/components/Analysis/index.ts

+2
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
export * from './MoveMap'
12
export * from './MovePlot'
23
export * from './Tournament'
34
export * from './BlunderMeter'
@@ -7,3 +8,4 @@ export * from './HorizontalEvaluationBar'
78
export * from './PositionEvaluationContainer'
89
export * from './VerticalEvaluationBar'
910
export * from './MovesByRating'
11+
export * from './MoveRecommendations'

0 commit comments

Comments
 (0)