finish srs system
This commit is contained in:
Rene Kievits
312
client/src/pages/trainer.vue
Normal file
312
client/src/pages/trainer.vue
Normal file
@@ -0,0 +1,312 @@
|
||||
<template lang="pug">
|
||||
v-container.fill-height.d-flex.justify-center.align-center
|
||||
v-card.pa-12.rounded-lg.elevation-12
|
||||
template(v-if="!allDone")
|
||||
v-card-title.text-center.text-h2.font-weight-bold.mb-4
|
||||
span.text-primary {{ trainerTitle }}
|
||||
|
||||
v-sheet.d-flex.justify-center.align-center.rounded-lg.py-8.px-4.elevation-12(
|
||||
:style="{ backgroundColor: subjectColor, fontSize: '5rem', fontWeight: 'bold', whiteSpace: 'nowrap' }"
|
||||
)
|
||||
span {{ character }}
|
||||
|
||||
v-card-text.text-center.my-4.rounded-lg(
|
||||
:style="{ backgroundColor: subjectColor + '20', fontSize: '1.1rem', fontWeight: '500', color: subjectColor }"
|
||||
)
|
||||
| {{ inputMode.charAt(0).toUpperCase() + inputMode.slice(1) }}
|
||||
|
||||
transition(name="alert-grow")
|
||||
v-alert.mb-4(
|
||||
v-if="resultMessage"
|
||||
:type="isCorrect ? 'success' : 'error'"
|
||||
border="top"
|
||||
variant="outlined"
|
||||
density="compact"
|
||||
) {{ resultMessage }}
|
||||
|
||||
v-row.align-center
|
||||
v-col(cols="9")
|
||||
input#answer-input.customInput(
|
||||
ref="answerInput"
|
||||
placeholder="Type your answer"
|
||||
:disabled="isDisabled"
|
||||
)
|
||||
v-col(cols="3")
|
||||
v-btn(
|
||||
color="primary"
|
||||
block
|
||||
@click="submitAnswer"
|
||||
) Enter
|
||||
|
||||
v-row.justify-space-between
|
||||
v-col(cols="4")
|
||||
v-btn(
|
||||
color="error"
|
||||
variant="flat"
|
||||
block
|
||||
@click="quitSession"
|
||||
) Quit
|
||||
v-col(cols="4")
|
||||
v-btn(
|
||||
color="secondary"
|
||||
variant="flat"
|
||||
block
|
||||
@click="createReview"
|
||||
) Skip
|
||||
v-col(cols="4")
|
||||
v-btn(
|
||||
color="success"
|
||||
variant="flat"
|
||||
block
|
||||
@click="submitAnswer"
|
||||
) Resolve
|
||||
|
||||
template(v-else)
|
||||
v-card-title.text-center.text-h2.font-weight-bold.mb-4
|
||||
span.text-primary 🎉 Congratulations!
|
||||
v-card-text.text-center
|
||||
| You have completed all reviews for today!
|
||||
v-row.justify-center.mt-6
|
||||
v-col(cols="6")
|
||||
v-btn(
|
||||
color="primary"
|
||||
block
|
||||
@click="quitSession"
|
||||
) Back to Home
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, nextTick, onBeforeUnmount, computed } from 'vue'
|
||||
import { useRouter, useRoute } from 'vue-router'
|
||||
import * as wanakana from 'wanakana'
|
||||
import { nextSubject, correct, incorrect } from '../composables/srs.scoring.ts'
|
||||
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
|
||||
const answerInput = ref<HTMLInputElement | null>(null)
|
||||
const character = ref<string>('')
|
||||
const isCorrect = ref<boolean>(false)
|
||||
const isDisabled = ref<boolean>(false)
|
||||
const isWanakanaBound = ref<boolean>(false)
|
||||
const inputMode = ref<'meaning' | 'writing' | 'kanji'>('meaning')
|
||||
const resultMessage = ref<string>('')
|
||||
const subject = ref<any>(null)
|
||||
const allDone = ref(false)
|
||||
|
||||
const options = computed(() => JSON.parse(route.query.options as string))
|
||||
|
||||
const optionsCalculated = ref({
|
||||
subject: options.value.type === 'writing' ? 'kanji' : options.value.type === 'all' ? ['kanji', 'vocab'] : options.value.type,
|
||||
mode: options.value.writing && options.value.meaning ? ['reading', 'meaning'] : options.value.writing ? 'reading' : options.value.meaning ? 'meaning' : 'reading',
|
||||
writingPractice: options.value.type === 'writing',
|
||||
direction: options.value.direction,
|
||||
writingMode: options.value.kanji ? 'kanji' : 'kana',
|
||||
})
|
||||
|
||||
const trainerTitle = computed(() => {
|
||||
if (!subject.value) return 'Trainer'
|
||||
switch (subject.value.type) {
|
||||
case 'kanji':
|
||||
return 'Kanji Trainer'
|
||||
case 'vocab':
|
||||
return 'Vocabulary Trainer'
|
||||
default:
|
||||
return 'Full Trainer'
|
||||
}
|
||||
})
|
||||
|
||||
const subjectColor = computed(() => {
|
||||
if (!subject.value) return 'var(--color-all)'
|
||||
switch (subject.value.type) {
|
||||
case 'kanji':
|
||||
return 'var(--color-kanji)'
|
||||
case 'vocab':
|
||||
return 'var(--color-vocab)'
|
||||
default:
|
||||
return 'var(--color-all)'
|
||||
}
|
||||
})
|
||||
|
||||
async function createReview() {
|
||||
const next = await nextSubject(optionsCalculated.value)
|
||||
if (!next) {
|
||||
allDone.value = true
|
||||
character.value = ''
|
||||
resultMessage.value = '✅ All done!'
|
||||
return
|
||||
}
|
||||
|
||||
allDone.value = false
|
||||
subject.value = next
|
||||
|
||||
if (optionsCalculated.value.direction === 'en->jp' && optionsCalculated.value.writingMode === 'kanji')
|
||||
inputMode.value = 'kanji'
|
||||
else if (subject.value.mode === 'jp_en_reading' || subject.value.mode === 'en_jp_writing')
|
||||
inputMode.value = 'writing'
|
||||
else
|
||||
inputMode.value = 'meaning'
|
||||
|
||||
character.value = subject.value.subject
|
||||
isDisabled.value = false
|
||||
resultMessage.value = ''
|
||||
isCorrect.value = false
|
||||
nextTickWrapper()
|
||||
}
|
||||
|
||||
async function submitAnswer() {
|
||||
if (!answerInput.value || !subject.value) return
|
||||
|
||||
if (isDisabled.value) {
|
||||
createReview()
|
||||
return
|
||||
}
|
||||
|
||||
const userAnswer = answerInput.value.value.trim()
|
||||
isCorrect.value = subject.value.answers.some(a => a.trim().toLowerCase() === userAnswer)
|
||||
|
||||
resultMessage.value = isCorrect.value ? 'Correct: ' : 'Wrong: '
|
||||
resultMessage.value += subject.value.answers.join(', ')
|
||||
|
||||
if (isCorrect.value) {
|
||||
await correct()
|
||||
} else {
|
||||
await incorrect()
|
||||
}
|
||||
|
||||
answerInput.value.value = ''
|
||||
isDisabled.value = true
|
||||
}
|
||||
|
||||
function quitSession() {
|
||||
router.push('/')
|
||||
}
|
||||
|
||||
function handleGlobalKey(event: KeyboardEvent) {
|
||||
if (event.key === 'Enter') {
|
||||
!isDisabled.value ? submitAnswer() : createReview()
|
||||
}
|
||||
}
|
||||
|
||||
function bindWanakana(input: HTMLInputElement | null) {
|
||||
if (!input || isWanakanaBound.value) return
|
||||
wanakana.bind(input, { IMEMode: true })
|
||||
isWanakanaBound.value = true
|
||||
}
|
||||
|
||||
function unbindWanakana(input: HTMLInputElement | null) {
|
||||
if (!input || !isWanakanaBound.value) return
|
||||
wanakana.unbind(input)
|
||||
isWanakanaBound.value = false
|
||||
}
|
||||
|
||||
function nextTickWrapper() {
|
||||
nextTick(() => {
|
||||
if (!answerInput.value) return
|
||||
if (inputMode.value === 'writing' || inputMode.value === 'kanji') bindWanakana(answerInput.value)
|
||||
else unbindWanakana(answerInput.value)
|
||||
answerInput.value.focus()
|
||||
})
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
createReview()
|
||||
window.addEventListener('keydown', handleGlobalKey)
|
||||
nextTickWrapper()
|
||||
})
|
||||
|
||||
onBeforeUnmount(() => window.removeEventListener('keydown', handleGlobalKey))
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
$dark-background: #121212;
|
||||
$dark-surface: #1e1e1e;
|
||||
$dark-text: #ffffff;
|
||||
$dark-hint: #ffffff99;
|
||||
$error-color: #cf6679;
|
||||
|
||||
$dark-border: #ffffff14;
|
||||
|
||||
$accent-color: hsl(320, 100%, 50%);
|
||||
|
||||
@mixin vuetify-dark-input-base {
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
|
||||
width: 100%;
|
||||
padding: 14px 16px;
|
||||
min-height: 56px;
|
||||
|
||||
background-color: $dark-surface;
|
||||
|
||||
border: 1px solid $dark-border;
|
||||
border-radius: 4px;
|
||||
|
||||
color: $dark-text;
|
||||
font-size: 16px;
|
||||
line-height: 1.5;
|
||||
|
||||
transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
|
||||
|
||||
&::placeholder {
|
||||
color: $dark-hint;
|
||||
transition: color 0.2s;
|
||||
}
|
||||
}
|
||||
|
||||
.alert-grow-enter-active,
|
||||
.alert-grow-leave-active {
|
||||
transition: all 0.3s ease-in-out;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.alert-grow-enter-from,
|
||||
.alert-grow-leave-to {
|
||||
opacity: 0;
|
||||
max-height: 0;
|
||||
margin-bottom: 0 !important;
|
||||
padding-top: 0 !important;
|
||||
padding-bottom: 0 !important;
|
||||
}
|
||||
|
||||
.alert-grow-enter-to,
|
||||
.alert-grow-leave-from {
|
||||
opacity: 1;
|
||||
max-height: 100px;
|
||||
}
|
||||
|
||||
.customInput {
|
||||
@include vuetify-dark-input-base;
|
||||
|
||||
&:hover {
|
||||
background-color: lighten($dark-surface, 3%);
|
||||
border-color: lighten($dark-border, 5%);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
border-color: $accent-color;
|
||||
box-shadow: 0 0 0 1px $accent-color;
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
background-color: $dark-surface;
|
||||
border-color: $dark-border;
|
||||
}
|
||||
|
||||
&:read-only {
|
||||
opacity: 0.8;
|
||||
background-color: $dark-surface;
|
||||
cursor: default;
|
||||
border-color: $dark-border;
|
||||
}
|
||||
|
||||
&.is-error {
|
||||
border-color: $error-color !important;
|
||||
box-shadow: 0 0 0 1px $error-color !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user