v-container.fill-height.justify-center.pa-4.review-view-container
v-fade-transition(mode="out-in")
.d-flex.flex-column.justify-center.align-center.fill-height(v-if="loading")
v-progress-circular(indeterminate color="primary" size="64")
.text-body-1.text-grey.mt-4
ScrambleText(:text="$t('review.loading')")
v-card.pa-6.rounded-xl.d-flex.flex-column.align-center.review-card(
v-else-if="currentItem"
)
.d-flex.align-center.w-100.mb-6
v-btn.mr-2(
icon="mdi-arrow-left"
variant="text"
color="grey"
to="/"
density="comfortable"
)
.text-caption.text-grey.font-weight-bold
| {{ sessionDone }} / {{ sessionTotal }}
v-spacer
v-chip.font-weight-bold(
size="small"
:color="getSRSColor(currentItem.srsLevel)"
variant="flat"
)
ScrambleText(:text="$t('review.level') + ' ' + currentItem.srsLevel")
.text-center.mb-6
.text-caption.text-grey.text-uppercase.tracking-wide.mb-1
ScrambleText(:text="$t('review.meaning')")
.text-h3.font-weight-bold.text-white.text-shadow.mb-4
| {{ currentItem.meaning }}
.readings-grid(v-if="(currentItem.onyomi && currentItem.onyomi.length > 0) || (currentItem.kunyomi && currentItem.kunyomi.length > 0)")
.reading-box.reading-box--small(v-if="currentItem.onyomi && currentItem.onyomi.length > 0")
.label
ScrambleText(:text="$t('collection.onyomi')")
.val.text-cyan-lighten-3 {{ currentItem.onyomi.join(', ') }}
.reading-box.reading-box--small(v-if="currentItem.kunyomi && currentItem.kunyomi.length > 0")
.label
ScrambleText(:text="$t('collection.kunyomi')")
.val.text-pink-lighten-3 {{ currentItem.kunyomi.join(', ') }}
.review-canvas-area
KanjiCanvas(
:key="canvasKey"
ref="kanjiCanvasRef"
:char="currentItem.char"
@complete="handleComplete"
@mistake="handleMistake"
)
transition(name="scale")
v-btn.next-fab.glow-btn.text-black(
v-if="showNext"
@click="next"
color="primary"
icon="mdi-arrow-right"
size="large"
elevation="8"
)
.mb-4.d-flex.gap-2
v-btn.text-caption.font-weight-bold.opacity-80(
variant="text"
color="amber-lighten-1"
prepend-icon="mdi-lightbulb-outline"
size="small"
:disabled="showNext"
@click="triggerHint"
)
ScrambleText(:text="$t('review.showHint')")
v-sheet.d-flex.flex-column.align-center.justify-center(
width="100%"
min-height="80"
color="transparent"
)
transition(name="fade-slide" mode="out-in")
.status-text.text-h6.font-weight-bold(
:key="statusCode"
:class="getStatusClass(statusCode)"
)
ScrambleText(:text="$t('review.' + statusCode)")
transition(name="scale")
v-chip.mt-2.font-weight-bold.elevation-2(
v-if="showNext && rankChange"
:color="rankChange.type === 'up' ? 'teal-accent-4' : 'red-darken-1'"
variant="flat"
size="small"
)
v-icon(start size="14") {{ rankChange.type === 'up' ? 'mdi-arrow-up-thick' : 'mdi-arrow-down-thick' }}
| Level {{ currentItem.srsLevel }} → {{ rankChange.level }}
v-progress-linear.mt-4.progress-bar(
v-model="progressPercent"
color="primary"
height="4"
rounded
)
v-card.pa-8.rounded-xl.elevation-10.review-card(
v-else-if="sessionTotal > 0 && store.queue.length === 0"
)
.d-flex.flex-column.align-center.mb-6
v-avatar(color="rgba(0, 206, 201, 0.1)" size="80")
v-icon(size="40" color="primary") mdi-trophy
.text-h4.font-weight-bold.mt-4.mb-2
ScrambleText(:text="$t('review.sessionComplete')")
v-row.mb-4
v-col.text-center.border-r.border-subtle(cols="6")
.text-h3.font-weight-bold.text-white {{ accuracy }}%
.text-caption.text-grey.text-uppercase.mt-1
ScrambleText(:text="$t('stats.accuracy')")
v-col.text-center(cols="6")
.text-h3.font-weight-bold.text-white {{ sessionCorrect }}
.text-caption.text-grey.text-uppercase.mt-1
ScrambleText(:text="$t('stats.correct')")
.d-flex.justify-center.ga-4.mb-6(v-if="levelUpCount > 0 || levelDownCount > 0")
v-chip.font-weight-bold(
v-if="levelUpCount > 0"
color="teal-accent-4"
variant="tonal"
size="small"
prepend-icon="mdi-arrow-up-thick"
)
ScrambleText(:text="$t('review.levelsUp', { n: levelUpCount })")
v-chip.font-weight-bold(
v-if="levelDownCount > 0"
color="red-darken-1"
variant="tonal"
size="small"
prepend-icon="mdi-arrow-down-thick"
)
ScrambleText(:text="$t('review.levelsDown', { n: levelDownCount })")
.text-caption.text-grey.text-uppercase.tracking-wide.mb-3.text-left.w-100
ScrambleText(:text="$t('review.results')")
.result-list.w-100.mb-6
.result-item(
v-for="(r, i) in sessionResults"
:key="i"
)
.result-char {{ r.char }}
.result-meaning.text-grey {{ r.meaning }}
v-spacer
v-chip.font-weight-bold.mr-2(
:color="r.success ? 'teal-accent-4' : 'red-darken-1'"
variant="tonal"
size="x-small"
)
v-icon(start size="12") {{ r.success ? 'mdi-check' : 'mdi-close' }}
| {{ r.oldLevel }} → {{ r.newLevel }}
v-btn.text-black.font-weight-bold.glow-btn(
to="/"
block
color="primary"
height="50"
rounded="lg"
)
ScrambleText(:text="$t('review.back')")
.text-center(v-else)
v-icon.mb-4(size="64" color="grey-darken-2") mdi-check-circle-outline
.text-h4.mb-2.text-white
ScrambleText(:text="$t('review.caughtUp')")
.text-grey.mb-6
ScrambleText(:text="$t('review.noReviews')")
v-btn.font-weight-bold(
to="/"
color="primary"
variant="tonal"
)
ScrambleText(:text="$t('review.viewCollection')")