Skip to content

Commit 9530c9c

Browse files
kevinjosethomaskevinjosethomas
committed
feat: add initial iteration of endgame drills
1 parent d979778 commit 9530c9c

File tree

7 files changed

+16256
-314
lines changed

7 files changed

+16256
-314
lines changed

‎src/components/Openings/OpeningDrillSidebar.tsx‎

Lines changed: 124 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,27 @@ export const OpeningDrillSidebar: React.FC<Props> = ({
4141

4242
const tree = useContext(TreeControllerContext)
4343

44+
const currentIsEndgame = currentDrill?.opening.categoryType === 'endgame'
45+
const currentTraitLabel = currentDrill?.endgameMeta?.traitLabel
46+
const currentGroupLabel = currentDrill?.endgameMeta?.groupLabel
47+
48+
const poolCategory =
49+
selectionPool[0]?.opening.categoryType ??
50+
currentDrill?.opening.categoryType ??
51+
'opening'
52+
const poolLabel =
53+
poolCategory === 'endgame'
54+
? 'Endgame'
55+
: poolCategory === 'custom'
56+
? 'Position'
57+
: 'Opening'
58+
const poolLabelPlural =
59+
poolLabel === 'Endgame'
60+
? 'Endgames'
61+
: poolLabel === 'Opening'
62+
? 'Openings'
63+
: 'Positions'
64+
4465
// Navigation guards to respect opening start
4566
const customGoToPreviousNode = () => {
4667
if (!tree) return
@@ -81,31 +102,56 @@ export const OpeningDrillSidebar: React.FC<Props> = ({
81102
<div className="flex flex-col gap-1">
82103
<div>
83104
<p className="text-sm font-medium text-white/95">
84-
{currentDrill.opening.name}
105+
{currentIsEndgame
106+
? currentGroupLabel || currentDrill.opening.name
107+
: currentDrill.opening.name}
85108
</p>
86-
{currentDrill.variation && (
87-
<p className="text-xs text-white/70">
88-
{currentDrill.variation.name}
89-
</p>
90-
)}
109+
{currentIsEndgame
110+
? currentTraitLabel && (
111+
<p className="text-xs text-human-3">{currentTraitLabel}</p>
112+
)
113+
: currentDrill.variation && (
114+
<p className="text-xs text-white/70">
115+
{currentDrill.variation.name}
116+
</p>
117+
)}
91118
</div>
92-
<div className="flex items-center gap-2 text-xs text-white/70">
93-
<div className="relative h-4 w-4">
94-
<Image
95-
src={
96-
currentDrill.playerColor === 'white'
97-
? '/assets/pieces/white king.svg'
98-
: '/assets/pieces/black king.svg'
99-
}
100-
fill={true}
101-
alt={`${currentDrill.playerColor} king`}
102-
/>
103-
</div>
119+
<div className="flex flex-wrap items-center gap-2 text-xs text-white/70">
120+
{currentIsEndgame ? (
121+
<span className="material-symbols-outlined text-sm text-human-3 md:text-base">
122+
trophy
123+
</span>
124+
) : (
125+
<div className="relative h-4 w-4">
126+
<Image
127+
src={
128+
currentDrill.playerColor === 'white'
129+
? '/assets/pieces/white king.svg'
130+
: '/assets/pieces/black king.svg'
131+
}
132+
fill={true}
133+
alt={`${currentDrill.playerColor} king`}
134+
/>
135+
</div>
136+
)}
104137
<span>
105138
vs Maia {currentDrill.maiaVersion.replace('maia_kdd_', '')}
106139
</span>
107-
<span>•</span>
108-
<span>{currentDrill.targetMoveNumber} moves</span>
140+
{currentIsEndgame ? (
141+
<>
142+
<span>•</span>
143+
<span>
144+
{currentDrill.playerColor === 'white'
145+
? 'White to move'
146+
: 'Black to move'}
147+
</span>
148+
</>
149+
) : (
150+
<>
151+
<span>•</span>
152+
<span>{currentDrill.targetMoveNumber} moves</span>
153+
</>
154+
)}
109155
</div>
110156
</div>
111157
) : (
@@ -144,17 +190,23 @@ export const OpeningDrillSidebar: React.FC<Props> = ({
144190
disabled={!onLoadCompletedDrill}
145191
>
146192
<div className="flex items-start gap-2">
147-
<div className="relative mt-0.5 h-4 w-4 flex-shrink-0">
148-
<Image
149-
src={
150-
selection.playerColor === 'white'
151-
? '/assets/pieces/white king.svg'
152-
: '/assets/pieces/black king.svg'
153-
}
154-
fill={true}
155-
alt={`${selection.playerColor} king`}
156-
/>
157-
</div>
193+
{selection.opening.categoryType === 'endgame' ? (
194+
<span className="material-symbols-outlined mt-0.5 text-sm text-human-3 md:text-base">
195+
trophy
196+
</span>
197+
) : (
198+
<div className="relative mt-0.5 h-4 w-4 flex-shrink-0">
199+
<Image
200+
src={
201+
selection.playerColor === 'white'
202+
? '/assets/pieces/white king.svg'
203+
: '/assets/pieces/black king.svg'
204+
}
205+
fill={true}
206+
alt={`${selection.playerColor} king`}
207+
/>
208+
</div>
209+
)}
158210
<div className="min-w-0 flex-1">
159211
<p className="text-xxs text-secondary">
160212
Drill #{order}
@@ -169,11 +221,17 @@ export const OpeningDrillSidebar: React.FC<Props> = ({
169221
</span>
170222
)}
171223
</div>
172-
{selection.variation && (
173-
<p className="text-xs text-white/70">
174-
{selection.variation.name}
175-
</p>
176-
)}
224+
{selection.opening.categoryType === 'endgame'
225+
? selection.endgameMeta?.traitLabel && (
226+
<p className="text-xs text-human-3">
227+
{selection.endgameMeta.traitLabel}
228+
</p>
229+
)
230+
: selection.variation && (
231+
<p className="text-xs text-white/70">
232+
{selection.variation.name}
233+
</p>
234+
)}
177235
</div>
178236
</div>
179237
</button>
@@ -183,11 +241,11 @@ export const OpeningDrillSidebar: React.FC<Props> = ({
183241
</div>
184242
<div className="flex flex-col gap-1 border-t border-glass-border px-0 py-2">
185243
<h3 className="px-4 text-sm font-medium text-white/90">
186-
Active Opening Pool ({selectionPool.length})
244+
Active {poolLabel} Pool ({selectionPool.length})
187245
</h3>
188246
{selectionPool.length === 0 ? (
189247
<p className="mt-2 text-xs text-white/70">
190-
Add openings to begin drilling.
248+
Add {poolLabelPlural.toLowerCase()} to begin drilling.
191249
</p>
192250
) : (
193251
<div className="flex w-full flex-col">
@@ -196,17 +254,23 @@ export const OpeningDrillSidebar: React.FC<Props> = ({
196254
key={`pool-${selection.id}-${index}`}
197255
className="flex w-full items-center gap-2 px-4 py-1"
198256
>
199-
<div className="relative h-4 w-4 flex-shrink-0">
200-
<Image
201-
src={
202-
selection.playerColor === 'white'
203-
? '/assets/pieces/white king.svg'
204-
: '/assets/pieces/black king.svg'
205-
}
206-
fill={true}
207-
alt={`${selection.playerColor} king`}
208-
/>
209-
</div>
257+
{selection.opening.categoryType === 'endgame' ? (
258+
<span className="material-symbols-outlined text-sm text-human-3 md:text-base">
259+
trophy
260+
</span>
261+
) : (
262+
<div className="relative h-4 w-4 flex-shrink-0">
263+
<Image
264+
src={
265+
selection.playerColor === 'white'
266+
? '/assets/pieces/white king.svg'
267+
: '/assets/pieces/black king.svg'
268+
}
269+
fill={true}
270+
alt={`${selection.playerColor} king`}
271+
/>
272+
</div>
273+
)}
210274
<div className="min-w-0 flex-1">
211275
<div className="flex flex-wrap items-center gap-2">
212276
<p className="truncate text-xs font-medium text-white/90">
@@ -218,11 +282,17 @@ export const OpeningDrillSidebar: React.FC<Props> = ({
218282
</span>
219283
)}
220284
</div>
221-
{selection.variation && (
222-
<p className="truncate text-[11px] text-white/60">
223-
{selection.variation.name}
224-
</p>
225-
)}
285+
{selection.opening.categoryType === 'endgame'
286+
? selection.endgameMeta?.traitLabel && (
287+
<p className="text-xxs text-human-3">
288+
{selection.endgameMeta.traitLabel}
289+
</p>
290+
)
291+
: selection.variation && (
292+
<p className="truncate text-[11px] text-white/60">
293+
{selection.variation.name}
294+
</p>
295+
)}
226296
</div>
227297
</div>
228298
))}

0 commit comments

Comments
 (0)