262 lines
7.2 KiB
Vue
262 lines
7.2 KiB
Vue
<template lang="pug">
|
|
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 {{ $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"
|
|
) {{ $t('review.level') }} {{ currentItem.srsLevel }}
|
|
|
|
.text-center.mb-6
|
|
.text-caption.text-grey.text-uppercase.tracking-wide.mb-1
|
|
| {{ $t('review.meaning') }}
|
|
.text-h3.font-weight-bold.text-white.text-shadow
|
|
| {{ currentItem.meaning }}
|
|
|
|
.review-canvas-area
|
|
KanjiCanvas(
|
|
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"
|
|
) {{ $t('review.showHint') }}
|
|
|
|
v-sheet.d-flex.align-center.justify-center(
|
|
width="100%"
|
|
height="48"
|
|
color="transparent"
|
|
)
|
|
transition(name="fade-slide" mode="out-in")
|
|
.status-text.text-h6.font-weight-bold(
|
|
:key="statusCode"
|
|
:class="getStatusClass(statusCode)"
|
|
) {{ $t('review.' + statusCode) }}
|
|
|
|
v-progress-linear.mt-4.progress-bar(
|
|
v-model="progressPercent"
|
|
color="primary"
|
|
height="4"
|
|
rounded
|
|
)
|
|
|
|
v-card.pa-8.rounded-xl.elevation-10.text-center.review-card(
|
|
v-else-if="sessionTotal > 0 && store.queue.length === 0"
|
|
)
|
|
.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.mb-2 {{ $t('review.sessionComplete') }}
|
|
.text-body-1.text-grey.mb-8 {{ $t('review.levelup') }}
|
|
|
|
v-row.mb-6
|
|
v-col.border-r.border-subtle(cols="6")
|
|
.text-h3.font-weight-bold.text-white {{ accuracy }}%
|
|
.text-caption.text-grey.text-uppercase.mt-1 {{ $t('stats.accuracy') }}
|
|
v-col(cols="6")
|
|
.text-h3.font-weight-bold.text-white {{ sessionCorrect }}
|
|
.text-caption.text-grey.text-uppercase.mt-1 {{ $t('stats.correct') }}
|
|
|
|
v-btn.text-black.font-weight-bold.glow-btn(
|
|
to="/"
|
|
block
|
|
color="primary"
|
|
height="50"
|
|
rounded="lg"
|
|
) {{ $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 {{ $t('review.caughtUp') }}
|
|
.text-grey.mb-6 {{ $t('review.noReviews') }}
|
|
v-btn.font-weight-bold(
|
|
to="/"
|
|
color="primary"
|
|
variant="tonal"
|
|
) {{ $t('review.viewCollection') }}
|
|
</template>
|
|
|
|
<script setup>
|
|
/* eslint-disable no-unused-vars */
|
|
import {
|
|
ref, onMounted, computed, watch,
|
|
} from 'vue';
|
|
import { useRoute, useRouter } from 'vue-router';
|
|
import { useAppStore } from '@/stores/appStore';
|
|
import KanjiCanvas from '@/components/kanji/KanjiCanvas.vue';
|
|
|
|
const store = useAppStore();
|
|
const route = useRoute();
|
|
const router = useRouter();
|
|
|
|
const currentItem = ref(null);
|
|
const statusCode = ref('draw');
|
|
const showNext = ref(false);
|
|
const isFailure = ref(false);
|
|
const kanjiCanvasRef = ref(null);
|
|
const loading = ref(true);
|
|
|
|
const sessionTotal = ref(0);
|
|
const sessionDone = ref(0);
|
|
const sessionCorrect = ref(0);
|
|
|
|
const accuracy = computed(() => {
|
|
if (sessionDone.value === 0) return 100;
|
|
return Math.round((sessionCorrect.value / sessionDone.value) * 100);
|
|
});
|
|
|
|
const progressPercent = computed(() => {
|
|
if (sessionTotal.value === 0) return 0;
|
|
return (sessionDone.value / sessionTotal.value) * 100;
|
|
});
|
|
|
|
function loadNext() {
|
|
if (store.queue.length === 0) {
|
|
currentItem.value = null;
|
|
return;
|
|
}
|
|
const idx = Math.floor(Math.random() * store.queue.length);
|
|
currentItem.value = store.queue[idx];
|
|
|
|
statusCode.value = 'draw';
|
|
showNext.value = false;
|
|
isFailure.value = false;
|
|
}
|
|
|
|
onMounted(async () => {
|
|
loading.value = true;
|
|
const mode = route.query.mode || 'shuffled';
|
|
await store.fetchQueue(mode);
|
|
|
|
if (sessionTotal.value === 0 && store.queue.length > 0) {
|
|
sessionTotal.value = store.queue.length;
|
|
}
|
|
loadNext();
|
|
loading.value = false;
|
|
});
|
|
|
|
async function resetSession() {
|
|
loading.value = true;
|
|
sessionDone.value = 0;
|
|
sessionCorrect.value = 0;
|
|
sessionTotal.value = 0;
|
|
currentItem.value = null;
|
|
const mode = route.query.mode || 'shuffled';
|
|
await store.fetchQueue(mode);
|
|
if (store.queue.length > 0) sessionTotal.value = store.queue.length;
|
|
loadNext();
|
|
loading.value = false;
|
|
}
|
|
|
|
watch(() => store.batchSize, async () => {
|
|
resetSession();
|
|
});
|
|
|
|
function triggerHint() {
|
|
if (!kanjiCanvasRef.value) return;
|
|
|
|
isFailure.value = true;
|
|
statusCode.value = 'hint';
|
|
|
|
kanjiCanvasRef.value.drawGuide(true);
|
|
}
|
|
|
|
function handleMistake(isHint) {
|
|
if (isHint) {
|
|
isFailure.value = true;
|
|
statusCode.value = 'hint';
|
|
} else {
|
|
statusCode.value = 'tryAgain';
|
|
}
|
|
}
|
|
|
|
function handleComplete() {
|
|
statusCode.value = 'correct';
|
|
showNext.value = true;
|
|
}
|
|
|
|
async function next() {
|
|
if (!currentItem.value) return;
|
|
|
|
await store.submitReview(currentItem.value.wkSubjectId, !isFailure.value);
|
|
|
|
sessionDone.value += 1;
|
|
if (!isFailure.value) sessionCorrect.value += 1;
|
|
// eslint-disable-next-line no-underscore-dangle
|
|
const index = store.queue.findIndex((i) => i._id === currentItem.value._id);
|
|
if (index !== -1) {
|
|
store.queue.splice(index, 1);
|
|
}
|
|
|
|
loadNext();
|
|
}
|
|
|
|
function redoLesson() {
|
|
if (!currentItem.value) return;
|
|
router.push({
|
|
path: '/lesson',
|
|
query: { subjectId: currentItem.value.wkSubjectId },
|
|
state: { item: JSON.parse(JSON.stringify(currentItem.value)) },
|
|
});
|
|
}
|
|
|
|
const getSRSColor = (lvl) => {
|
|
const colors = {
|
|
1: '#ff7675', 2: '#fdcb6e', 3: '#55efc4', 4: '#0984e3', 5: '#a29bfe', 6: '#6c5ce7',
|
|
};
|
|
return colors[lvl] || 'grey';
|
|
};
|
|
|
|
const getStatusClass = (status) => {
|
|
switch (status) {
|
|
case 'hint': return 'text-red-lighten-1';
|
|
case 'correct': return 'text-teal-accent-3';
|
|
default: return 'text-grey-lighten-1';
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.review-view-container {
|
|
min-height: 100%;
|
|
}
|
|
</style>
|