fix: disable domain option only when fully complete
This commit is contained in:
@@ -325,11 +325,10 @@ export default function PerformanceDomainPracticePage() {
|
|||||||
}
|
}
|
||||||
const expectedGoalProgress = getKindProgress('expectedGoal')
|
const expectedGoalProgress = getKindProgress('expectedGoal')
|
||||||
const keyPointProgress = getKindProgress('keyPoint')
|
const keyPointProgress = getKindProgress('keyPoint')
|
||||||
const currentKindProgress = currentQuestion?.kind === 'expectedGoal'
|
const expectedGoalDone = expectedGoalProgress.total > 0 && expectedGoalProgress.completed >= expectedGoalProgress.total
|
||||||
? expectedGoalProgress
|
const keyPointDone = keyPointProgress.total > 0 && keyPointProgress.completed >= keyPointProgress.total
|
||||||
: keyPointProgress
|
const domainDone = expectedGoalDone && keyPointDone
|
||||||
const currentKindDone = currentKindProgress.total > 0 && currentKindProgress.completed >= currentKindProgress.total
|
const optionDisabled = isAnswerShown || domainDone
|
||||||
const optionDisabled = isAnswerShown || currentKindDone
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<motion.button
|
<motion.button
|
||||||
@@ -342,7 +341,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',
|
||||||
currentKindDone && !isAnswerShown && 'bg-gray-50 opacity-55 dark:bg-gray-800/70',
|
domainDone && !isAnswerShown && '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 &&
|
||||||
@@ -353,7 +352,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',
|
||||||
currentKindDone && !isAnswerShown && 'grayscale'
|
domainDone && !isAnswerShown && 'grayscale'
|
||||||
)}
|
)}
|
||||||
style={{ backgroundColor: domain.color }}
|
style={{ backgroundColor: domain.color }}
|
||||||
>
|
>
|
||||||
|
|||||||
Reference in New Issue
Block a user