Skip to content

Commit 2c1fd26

Browse files
kevinjosethomaskevinjosethomas
committed
fix: analysis disabled popup on train + opening page
1 parent a8d8693 commit 2c1fd26

2 files changed

Lines changed: 103 additions & 52 deletions

File tree

‎src/components/Openings/OpeningDrillAnalysis.tsx‎

Lines changed: 71 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -165,7 +165,7 @@ export const OpeningDrillAnalysis: React.FC<Props> = ({
165165
<div className="hidden xl:flex xl:h-full xl:flex-col xl:gap-2">
166166
<div className="flex h-[calc((55vh+4.5rem)/2)] gap-2">
167167
{/* Combined Highlight + MovesByRating container */}
168-
<div className="flex h-full w-full overflow-hidden rounded border-[0.5px] border-white/40">
168+
<div className="relative flex h-full w-full overflow-hidden rounded border-[0.5px] border-white/40">
169169
<div className="flex h-full w-auto min-w-[40%] max-w-[40%] border-r-[0.5px] border-white/40">
170170
<div className="relative w-full">
171171
<Highlight
@@ -195,21 +195,6 @@ export const OpeningDrillAnalysis: React.FC<Props> = ({
195195
: 'Analysis is disabled. Enable analysis to see detailed move evaluations and recommendations.'
196196
}
197197
/>
198-
{!analysisEnabled && (
199-
<div className="absolute inset-0 z-10 flex items-center justify-center overflow-hidden rounded bg-background-1/80 backdrop-blur-sm">
200-
<div className="rounded bg-background-2/90 p-4 text-center shadow-lg">
201-
<span className="material-symbols-outlined mb-2 text-3xl text-human-3">
202-
lock
203-
</span>
204-
<p className="font-medium text-primary">
205-
Analysis Disabled
206-
</p>
207-
<p className="text-sm text-secondary">
208-
Enable analysis to see move evaluations
209-
</p>
210-
</div>
211-
</div>
212-
)}
213198
</div>
214199
</div>
215200
<div className="flex h-full w-full bg-background-1">
@@ -222,9 +207,22 @@ export const OpeningDrillAnalysis: React.FC<Props> = ({
222207
}
223208
/>
224209
</div>
210+
{!analysisEnabled && (
211+
<div className="absolute inset-0 z-10 flex items-center justify-center overflow-hidden rounded bg-background-1/80 backdrop-blur-sm">
212+
<div className="rounded bg-background-2/90 p-4 text-center shadow-lg">
213+
<span className="material-symbols-outlined mb-2 text-3xl text-human-3">
214+
lock
215+
</span>
216+
<p className="font-medium text-primary">Analysis Disabled</p>
217+
<p className="text-sm text-secondary">
218+
Enable analysis to see move evaluations
219+
</p>
220+
</div>
221+
</div>
222+
)}
225223
</div>
226224
</div>
227-
<div className="flex h-[calc((55vh+4.5rem)/2)] flex-row gap-2">
225+
<div className="relative flex h-[calc((55vh+4.5rem)/2)] flex-row gap-2">
228226
<div className="flex h-full w-full flex-col">
229227
<MoveMap
230228
moveMap={analysisEnabled ? analysisController.moveMap : undefined}
@@ -248,13 +246,26 @@ export const OpeningDrillAnalysis: React.FC<Props> = ({
248246
analysisEnabled ? analysisController.colorSanMapping : {}
249247
}
250248
/>
249+
{!analysisEnabled && (
250+
<div className="absolute inset-0 z-10 flex items-center justify-center overflow-hidden rounded bg-background-1/80 backdrop-blur-sm">
251+
<div className="rounded bg-background-2/90 p-4 text-center shadow-lg">
252+
<span className="material-symbols-outlined mb-2 text-3xl text-human-3">
253+
lock
254+
</span>
255+
<p className="font-medium text-primary">Analysis Disabled</p>
256+
<p className="text-sm text-secondary">
257+
Enable analysis to see position evaluation
258+
</p>
259+
</div>
260+
</div>
261+
)}
251262
</div>
252263
</div>
253264

254265
{/* Smaller screens (below xl): 3-row stacked layout */}
255-
<div className="flex h-[calc(85vh-3.25rem)] flex-col gap-2 xl:hidden">
266+
<div className="flex h-full flex-col gap-2 xl:hidden">
256267
{/* Row 1: Combined Highlight + BlunderMeter container */}
257-
<div className="flex h-[calc(((85vh)-3.25rem)*0.3)] overflow-hidden rounded border-[0.5px] border-white/40 bg-background-1">
268+
<div className="relative flex h-[calc(((85vh)-3.25rem)*0.3)] overflow-hidden rounded border-[0.5px] border-white/40 bg-background-1">
258269
<div className="flex h-full w-full border-r-[0.5px] border-white/40">
259270
<div className="relative w-full">
260271
<Highlight
@@ -284,21 +295,6 @@ export const OpeningDrillAnalysis: React.FC<Props> = ({
284295
: 'Analysis is disabled. Enable analysis to see detailed move evaluations and recommendations.'
285296
}
286297
/>
287-
{!analysisEnabled && (
288-
<div className="absolute inset-0 z-10 flex items-center justify-center overflow-hidden rounded bg-background-1/80 backdrop-blur-sm">
289-
<div className="rounded bg-background-2/90 p-4 text-center shadow-lg">
290-
<span className="material-symbols-outlined mb-2 text-3xl text-human-3">
291-
lock
292-
</span>
293-
<p className="font-medium text-primary">
294-
Analysis Disabled
295-
</p>
296-
<p className="text-sm text-secondary">
297-
Enable analysis to see move evaluations
298-
</p>
299-
</div>
300-
</div>
301-
)}
302298
</div>
303299
</div>
304300
<div className="flex h-full w-auto min-w-[40%] max-w-[40%] bg-background-1 p-3">
@@ -318,10 +314,23 @@ export const OpeningDrillAnalysis: React.FC<Props> = ({
318314
/>
319315
</div>
320316
</div>
317+
{!analysisEnabled && (
318+
<div className="absolute inset-0 z-10 flex items-center justify-center overflow-hidden rounded bg-background-1/80 backdrop-blur-sm">
319+
<div className="rounded bg-background-2/90 p-4 text-center shadow-lg">
320+
<span className="material-symbols-outlined mb-2 text-3xl text-human-3">
321+
lock
322+
</span>
323+
<p className="font-medium text-primary">Analysis Disabled</p>
324+
<p className="text-sm text-secondary">
325+
Enable analysis to see move evaluations
326+
</p>
327+
</div>
328+
</div>
329+
)}
321330
</div>
322331

323332
{/* Row 2: MoveMap */}
324-
<div className="flex h-[calc(((85vh)-3.25rem)*0.35)] w-full">
333+
<div className="relative flex h-[calc(((85vh)-3.25rem)*0.35)] w-full">
325334
<div className="h-full w-full">
326335
<MoveMap
327336
moveMap={analysisEnabled ? analysisController.moveMap : undefined}
@@ -333,10 +342,23 @@ export const OpeningDrillAnalysis: React.FC<Props> = ({
333342
}
334343
/>
335344
</div>
345+
{!analysisEnabled && (
346+
<div className="absolute inset-0 z-10 flex items-center justify-center overflow-hidden rounded bg-background-1/80 backdrop-blur-sm">
347+
<div className="rounded bg-background-2/90 p-4 text-center shadow-lg">
348+
<span className="material-symbols-outlined mb-2 text-3xl text-human-3">
349+
lock
350+
</span>
351+
<p className="font-medium text-primary">Analysis Disabled</p>
352+
<p className="text-sm text-secondary">
353+
Enable analysis to see position evaluation
354+
</p>
355+
</div>
356+
</div>
357+
)}
336358
</div>
337359

338360
{/* Row 3: MovesByRating */}
339-
<div className="flex h-[calc(((85vh)-3.25rem)*0.35)] w-full rounded bg-background-1/60">
361+
<div className="relative flex h-[calc(((85vh)-3.25rem)*0.35)] w-full rounded bg-background-1/60">
340362
<div className="h-full w-full">
341363
<MovesByRating
342364
moves={
@@ -347,6 +369,19 @@ export const OpeningDrillAnalysis: React.FC<Props> = ({
347369
}
348370
/>
349371
</div>
372+
{!analysisEnabled && (
373+
<div className="absolute inset-0 z-10 flex items-center justify-center overflow-hidden rounded bg-background-1/80 backdrop-blur-sm">
374+
<div className="rounded bg-background-2/90 p-4 text-center shadow-lg">
375+
<span className="material-symbols-outlined mb-2 text-3xl text-human-3">
376+
lock
377+
</span>
378+
<p className="font-medium text-primary">Analysis Disabled</p>
379+
<p className="text-sm text-secondary">
380+
Enable analysis to see move evaluations
381+
</p>
382+
</div>
383+
</div>
384+
)}
350385
</div>
351386
</div>
352387
</div>

‎src/pages/train.tsx‎

Lines changed: 32 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -907,7 +907,7 @@ const Train: React.FC<Props> = ({
907907

908908
{/* Smaller screens (below xl): MoveMap full width */}
909909
<div className="flex h-[calc((85vh)*0.35)] w-full xl:hidden">
910-
<div className="h-full w-full">
910+
<div className="relative h-full w-full">
911911
<MoveMap
912912
moveMap={
913913
showAnalysis
@@ -923,27 +923,28 @@ const Train: React.FC<Props> = ({
923923
showAnalysis ? setHoverArrow : mockSetHoverArrow
924924
}
925925
/>
926+
{!showAnalysis && (
927+
<div className="absolute inset-0 z-10 flex items-center justify-center overflow-hidden rounded bg-background-1/80 backdrop-blur-sm">
928+
<div className="rounded bg-background-2/90 p-4 text-center shadow-lg">
929+
<span className="material-symbols-outlined mb-2 text-3xl text-human-3">
930+
lock
931+
</span>
932+
<p className="font-medium text-primary">
933+
Analysis Locked
934+
</p>
935+
<p className="text-sm text-secondary">
936+
Complete the puzzle to unlock analysis
937+
</p>
938+
</div>
939+
</div>
940+
)}
926941
</div>
927942
</div>
928-
929-
{!showAnalysis && (
930-
<div className="absolute inset-0 z-10 flex items-center justify-center overflow-hidden rounded bg-background-1/80 backdrop-blur-sm">
931-
<div className="rounded bg-background-2/90 p-4 text-center shadow-lg">
932-
<span className="material-symbols-outlined mb-2 text-3xl text-human-3">
933-
lock
934-
</span>
935-
<p className="font-medium text-primary">Analysis Locked</p>
936-
<p className="text-sm text-secondary">
937-
Complete the puzzle to unlock analysis
938-
</p>
939-
</div>
940-
</div>
941-
)}
942943
</div>
943944

944945
{/* Smaller screens (below xl): MovesByRating full width */}
945946
<div className="flex h-[calc((85vh)*0.35)] w-full rounded bg-background-1/60 xl:hidden">
946-
<div className="h-full w-full">
947+
<div className="relative h-full w-full">
947948
<MovesByRating
948949
moves={
949950
showAnalysis
@@ -956,6 +957,21 @@ const Train: React.FC<Props> = ({
956957
: mockAnalysisData.colorSanMapping
957958
}
958959
/>
960+
{!showAnalysis && (
961+
<div className="absolute inset-0 z-10 flex items-center justify-center overflow-hidden rounded bg-background-1/80 backdrop-blur-sm">
962+
<div className="rounded bg-background-2/90 p-4 text-center shadow-lg">
963+
<span className="material-symbols-outlined mb-2 text-3xl text-human-3">
964+
lock
965+
</span>
966+
<p className="font-medium text-primary">
967+
Analysis Locked
968+
</p>
969+
<p className="text-sm text-secondary">
970+
Complete the puzzle to unlock analysis
971+
</p>
972+
</div>
973+
</div>
974+
)}
959975
</div>
960976
</div>
961977
</div>

0 commit comments

Comments
 (0)