fix: keep completed options dimmed during feedback

This commit is contained in:
ittoview
2026-05-13 19:26:16 +01:00
parent 0be095d583
commit 45dd71311f

View File

@@ -328,6 +328,7 @@ export default function PerformanceDomainPracticePage() {
const expectedGoalDone = expectedGoalProgress.total > 0 && expectedGoalProgress.completed >= expectedGoalProgress.total const expectedGoalDone = expectedGoalProgress.total > 0 && expectedGoalProgress.completed >= expectedGoalProgress.total
const keyPointDone = keyPointProgress.total > 0 && keyPointProgress.completed >= keyPointProgress.total const keyPointDone = keyPointProgress.total > 0 && keyPointProgress.completed >= keyPointProgress.total
const domainDone = expectedGoalDone && keyPointDone const domainDone = expectedGoalDone && keyPointDone
const shouldKeepDisabled = domainDone && !shouldHighlightCorrect && !isWrongSelected
const optionDisabled = isAnswerShown || domainDone const optionDisabled = isAnswerShown || domainDone
return ( return (
@@ -341,7 +342,7 @@ export default function PerformanceDomainPracticePage() {
'relative flex h-[112px] flex-col gap-2 overflow-hidden rounded-xl border bg-white p-3 text-left shadow-sm transition-colors dark:bg-gray-800', 'relative flex h-[112px] flex-col gap-2 overflow-hidden rounded-xl border bg-white p-3 text-left shadow-sm transition-colors dark:bg-gray-800',
'border-gray-100 hover:border-indigo-200 hover:bg-indigo-50/40 dark:border-gray-700 dark:hover:border-indigo-700 dark:hover:bg-indigo-950/20', 'border-gray-100 hover:border-indigo-200 hover:bg-indigo-50/40 dark:border-gray-700 dark:hover:border-indigo-700 dark:hover:bg-indigo-950/20',
optionDisabled && 'cursor-default hover:bg-white dark:hover:bg-gray-800', optionDisabled && 'cursor-default hover:bg-white dark:hover:bg-gray-800',
domainDone && !isAnswerShown && 'bg-gray-50 opacity-55 dark:bg-gray-800/70', shouldKeepDisabled && 'bg-gray-50 opacity-55 dark:bg-gray-800/70',
shouldHighlightCorrect && shouldHighlightCorrect &&
'border-emerald-400 bg-emerald-50 shadow-[inset_0_0_0_2px_rgba(52,211,153,0.65)] dark:border-emerald-500 dark:bg-emerald-950/30 dark:shadow-[inset_0_0_0_2px_rgba(16,185,129,0.45)]', 'border-emerald-400 bg-emerald-50 shadow-[inset_0_0_0_2px_rgba(52,211,153,0.65)] dark:border-emerald-500 dark:bg-emerald-950/30 dark:shadow-[inset_0_0_0_2px_rgba(16,185,129,0.45)]',
isWrongSelected && isWrongSelected &&
@@ -352,7 +353,7 @@ export default function PerformanceDomainPracticePage() {
<div <div
className={clsx( className={clsx(
'flex h-10 w-10 shrink-0 items-center justify-center rounded-lg text-white', 'flex h-10 w-10 shrink-0 items-center justify-center rounded-lg text-white',
domainDone && !isAnswerShown && 'grayscale' shouldKeepDisabled && 'grayscale'
)} )}
style={{ backgroundColor: domain.color }} style={{ backgroundColor: domain.color }}
> >