finish srs system
This commit is contained in:
Rene Kievits
@@ -74,7 +74,6 @@ const nextSubject = async (subjectOptions: SubjectOptions): Promise<ReviewItem |
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
})
|
||||
|
||||
|
||||
const item = res.data
|
||||
if (!item || item.message === 'No reviews due') return null
|
||||
|
||||
@@ -96,23 +95,18 @@ const nextSubject = async (subjectOptions: SubjectOptions): Promise<ReviewItem |
|
||||
} else if (mode === 'jp_en_reading') {
|
||||
subjectText = item.characters
|
||||
answers = item.readings?.filter(r => r.accepted_answer).map(r => r.reading) || []
|
||||
if (answers.length === 0)
|
||||
answers = [item.characters]
|
||||
} else if (mode === 'en_jp_writing') {
|
||||
subjectText = item.meanings?.filter(m => m.primary).map(m => m.meaning).join(', ') || ''
|
||||
if (subjectOptions.writingMode === 'kanji') {
|
||||
answers = [item.characters]
|
||||
} else if (subjectOptions.writingMode === 'kana') {
|
||||
answers = item.readings?.filter(r => r.accepted_answer).map(r => r.reading) || []
|
||||
}
|
||||
} else if (answers.length === 0)
|
||||
answers = [item.characters]
|
||||
}
|
||||
|
||||
console.log({
|
||||
type: item.type,
|
||||
subject: subjectText,
|
||||
answers,
|
||||
pronunciation_audios,
|
||||
mode,
|
||||
})
|
||||
|
||||
return {
|
||||
type: item.type,
|
||||
subject: subjectText,
|
||||
@@ -122,7 +116,6 @@ const nextSubject = async (subjectOptions: SubjectOptions): Promise<ReviewItem |
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
const getStatistics = async () => {
|
||||
const res = await axios.get('/api/v1/review/stats', {
|
||||
headers: {
|
||||
|
||||
@@ -1,143 +0,0 @@
|
||||
type ReviewQueueItem = {
|
||||
type: 'kanji' | 'vocab',
|
||||
subject: any,
|
||||
mode: 'meaning' | 'writing',
|
||||
}
|
||||
|
||||
export class Reviews {
|
||||
private static instance: Reviews
|
||||
|
||||
public data: {
|
||||
kanji: any[],
|
||||
vocab: any[],
|
||||
}
|
||||
|
||||
private queue: { type: 'kanji' | 'vocab', subject: any, mode: 'meaning' | 'writing' }[] = []
|
||||
|
||||
private options: {
|
||||
type: 'kanji' | 'vocab' | 'both',
|
||||
mode: 'meaning' | 'writing' | 'both',
|
||||
}
|
||||
|
||||
private constructor(options: { type?: 'kanji' | 'vocab' | 'both', mode?: 'meaning' | 'writing' | 'both' }) {
|
||||
this.data = {
|
||||
kanji: [],
|
||||
vocab: [],
|
||||
}
|
||||
this.options = {
|
||||
type: options.type ?? 'both',
|
||||
mode: options.mode ?? 'both',
|
||||
}
|
||||
}
|
||||
|
||||
public static async getInstance(options: { type?: 'kanji' | 'vocab' | 'both', mode?: 'meaning' | 'writing' | 'both' } = {}): Promise<Reviews> {
|
||||
if (!Reviews.instance) {
|
||||
const instance = new Reviews(options)
|
||||
await instance.loadSubjects()
|
||||
instance.buildQueue()
|
||||
Reviews.instance = instance
|
||||
}
|
||||
return Reviews.instance
|
||||
}
|
||||
|
||||
public async setOptions(newOptions: { type?: 'kanji' | 'vocab' | 'both', mode?: 'meaning' | 'writing' | 'both' }) {
|
||||
let needsReload = false
|
||||
|
||||
if (newOptions.type && newOptions.type !== this.options.type) {
|
||||
this.options.type = newOptions.type
|
||||
needsReload = true
|
||||
}
|
||||
|
||||
if (newOptions.mode && newOptions.mode !== this.options.mode) {
|
||||
this.options.mode = newOptions.mode
|
||||
}
|
||||
|
||||
if (needsReload) {
|
||||
await this.loadSubjects()
|
||||
}
|
||||
|
||||
this.buildQueue()
|
||||
}
|
||||
|
||||
private async loadSubjects() {
|
||||
const typesToLoad: ('kanji' | 'vocab')[] =
|
||||
this.options.type === 'both'
|
||||
? ['kanji', 'vocab']
|
||||
: [this.options.type]
|
||||
|
||||
for (const type of typesToLoad) {
|
||||
await this.getSubjects(type)
|
||||
}
|
||||
}
|
||||
|
||||
private buildQueue() {
|
||||
this.queue = []
|
||||
|
||||
const types: ('kanji' | 'vocab')[] =
|
||||
this.options.type === 'both'
|
||||
? ['kanji', 'vocab']
|
||||
: [this.options.type]
|
||||
|
||||
for (const type of types) {
|
||||
for (const subject of this.data[type]) {
|
||||
switch (this.options.mode) {
|
||||
case 'meaning':
|
||||
this.queue.push({ type, subject, mode: 'meaning' })
|
||||
break
|
||||
case 'writing':
|
||||
this.queue.push({ type, subject, mode: 'writing' })
|
||||
break
|
||||
case 'both':
|
||||
this.queue.push({ type, subject, mode: 'meaning' })
|
||||
this.queue.push({ type, subject, mode: 'writing' })
|
||||
break
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
this.shuffleQueue()
|
||||
}
|
||||
|
||||
private shuffleQueue() {
|
||||
for (let i = this.queue.length - 1; i > 0; i--) {
|
||||
const j = Math.floor(Math.random() * (i + 1))
|
||||
const tmp = this.queue[i]!
|
||||
this.queue[i] = this.queue[j]!
|
||||
this.queue[j] = tmp
|
||||
}
|
||||
}
|
||||
|
||||
private async getSubjects(type: 'kanji' | 'vocab') {
|
||||
try {
|
||||
const res = await fetch(`/api/v1/subject/${type}`)
|
||||
if (!res.ok) throw new Error(res.statusText)
|
||||
this.data[type] = await res.json()
|
||||
} catch (error) {
|
||||
console.error(error)
|
||||
}
|
||||
}
|
||||
|
||||
public nextSubject(): ReviewQueueItem | null {
|
||||
return (this.queue.shift() as ReviewQueueItem | undefined) ?? null
|
||||
}
|
||||
|
||||
public getStats() {
|
||||
const stats: {
|
||||
mode: 'meaning' | 'writing' | 'both',
|
||||
type: 'kanji' | 'vocab' | 'both',
|
||||
kanjiCount: number,
|
||||
vocabCount: number,
|
||||
total: number,
|
||||
queueRemaining: number,
|
||||
} = {
|
||||
mode: this.options.mode,
|
||||
type: this.options.type,
|
||||
kanjiCount: this.data.kanji.length,
|
||||
vocabCount: this.data.vocab.length,
|
||||
queueRemaining: this.queue.length,
|
||||
total: this.queue.length,
|
||||
}
|
||||
|
||||
return stats
|
||||
}
|
||||
}
|
||||
@@ -1,7 +1,7 @@
|
||||
<template lang="pug">
|
||||
v-container.fill-height.d-flex.justify-center.align-center
|
||||
v-card.pa-12.rounded-lg.elevation-12
|
||||
template(v-if="!finished")
|
||||
template(v-if="!allDone")
|
||||
v-card-title.text-center.text-h2.font-weight-bold.mb-4
|
||||
span.text-primary Full Trainer
|
||||
|
||||
@@ -61,20 +61,25 @@ v-container.fill-height.d-flex.justify-center.align-center
|
||||
@click="submitAnswer"
|
||||
) Resolve
|
||||
template(v-else)
|
||||
v-card-title.text-center.text-h2.font-weight-bold.mb-6.text-success
|
||||
span.text-success.text-gradient Well Done!
|
||||
v-card-text.text-center.text-h5
|
||||
| You’ve completed all cards for this session.
|
||||
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") Return Home
|
||||
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 { Reviews } from '../composables/subject.ts'
|
||||
|
||||
import { nextSubject, correct, incorrect } from '../composables/srs.scoring.ts'
|
||||
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
@@ -86,21 +91,12 @@ const isDisabled = ref<boolean>(false)
|
||||
const isWanakanaBound = ref<boolean>(false)
|
||||
const inputMode = ref<'meaning' | 'writing' | 'kanji'>('meaning')
|
||||
const resultMessage = ref<string>('')
|
||||
const reviews = ref<Reviews | null>(null)
|
||||
const subject = ref<any>(null)
|
||||
|
||||
const direction = computed(() => route.query.direction)
|
||||
const options = computed(() => JSON.parse(route.query.options as string))
|
||||
|
||||
const finished = ref<boolean>(false)
|
||||
const subjectType = ref<string>('')
|
||||
const allDone = ref(false)
|
||||
|
||||
const subjectColor = computed(() => {
|
||||
if (!subject.value) return 'var(--color-all)'
|
||||
|
||||
console.log(subjectType.value)
|
||||
|
||||
switch (subjectType.value) {
|
||||
switch (subject.value.type) {
|
||||
case 'kanji':
|
||||
return 'var(--color-kanji)'
|
||||
case 'vocab':
|
||||
@@ -110,71 +106,61 @@ const subjectColor = computed(() => {
|
||||
}
|
||||
})
|
||||
|
||||
function createReview() {
|
||||
if (!reviews.value) return
|
||||
const options = computed(() => JSON.parse(route.query.options as string))
|
||||
|
||||
const next = reviews.value.nextSubject()
|
||||
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',
|
||||
})
|
||||
|
||||
async function createReview() {
|
||||
const next = await nextSubject(optionsCalculated.value)
|
||||
if (!next) {
|
||||
finished.value = true
|
||||
allDone.value = true
|
||||
character.value = ''
|
||||
resultMessage.value = '✅ All done!'
|
||||
return
|
||||
}
|
||||
|
||||
subject.value = next.subject
|
||||
inputMode.value = next.mode
|
||||
subjectType.value = next.type
|
||||
allDone.value = false
|
||||
subject.value = next
|
||||
|
||||
if (direction.value === 'jp->en') {
|
||||
character.value = subject.value.characters
|
||||
} else {
|
||||
character.value = subject.value.meanings
|
||||
.filter((m: any) => m.primary)
|
||||
.map((m: any) => m.meaning)
|
||||
.join(', ')
|
||||
}
|
||||
if (optionsCalculated.value.direction === 'en->jp' && optionsCalculated.value.writingMode === 'kanji')
|
||||
inputMode.value = 'kanji'
|
||||
else if (subject.value.mode === 'jp_en_reading' || optionsCalculated.value.direction === 'en->jp')
|
||||
inputMode.value = 'writing'
|
||||
else
|
||||
inputMode.value = 'meaning'
|
||||
|
||||
nextTickWrapper()
|
||||
character.value = subject.value.subject
|
||||
isDisabled.value = false
|
||||
resultMessage.value = ''
|
||||
isCorrect.value = false
|
||||
nextTickWrapper()
|
||||
}
|
||||
|
||||
function submitAnswer() {
|
||||
async function submitAnswer() {
|
||||
if (!answerInput.value || !subject) return
|
||||
|
||||
if (isDisabled.value) {
|
||||
createReview()
|
||||
return
|
||||
}
|
||||
|
||||
if (!answerInput.value || !subject.value) return
|
||||
|
||||
const userAnswer = answerInput.value.value.trim()
|
||||
|
||||
if (direction.value === 'jp->en')
|
||||
isCorrect.value = inputMode.value === 'writing'
|
||||
? subject.value.readings.some((r: any) => r.accepted_answer && r.reading.trim() === userAnswer)
|
||||
: subject.value.meanings.some((m: any) => m.accepted_answer && m.meaning.trim().toLowerCase() === userAnswer.toLowerCase())
|
||||
else
|
||||
isCorrect.value = inputMode.value === 'kanji'
|
||||
? subject.value.characters.trim() === userAnswer
|
||||
: (subject.value.readings?.length === 0
|
||||
? subject.value.characters.trim() === userAnswer
|
||||
: subject.value.readings?.some((r: any) => r.accepted_answer && r.reading.trim() === userAnswer))
|
||||
|
||||
|
||||
const getAnswerText = () => {
|
||||
if (direction.value === 'jp->en')
|
||||
return inputMode.value === 'writing'
|
||||
? subject.value.readings.filter((r: any) => r.accepted_answer).map((r: any) => r.reading).join(', ')
|
||||
: subject.value.meanings.filter((m: any) => m.accepted_answer).map((m: any) => m.meaning).join(', ')
|
||||
else
|
||||
return inputMode.value === 'kanji'
|
||||
? subject.value.characters
|
||||
: subject.value.readings?.length === 0
|
||||
? subject.value.characters
|
||||
: subject.value.readings.filter((r: any) => r.accepted_answer).map((r: any) => r.reading).join(', ')
|
||||
}
|
||||
isCorrect.value = subject.value.answers.some(a => a.trim().toLowerCase() === userAnswer)
|
||||
|
||||
resultMessage.value = isCorrect.value ? 'Correct: ' : 'Wrong: '
|
||||
resultMessage.value += getAnswerText()
|
||||
resultMessage.value += subject.value.answers.join(', ')
|
||||
|
||||
if (isCorrect.value) {
|
||||
await correct()
|
||||
} else {
|
||||
await incorrect()
|
||||
}
|
||||
|
||||
answerInput.value.value = ''
|
||||
isDisabled.value = true
|
||||
@@ -215,14 +201,6 @@ function nextTickWrapper() {
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
const mode = options.value.meaning && options.value.writing
|
||||
? 'both'
|
||||
: options.value.meaning
|
||||
? 'meaning'
|
||||
: 'writing'
|
||||
|
||||
reviews.value = await Reviews.getInstance()
|
||||
await reviews.value.setOptions({ type: 'both', mode })
|
||||
createReview()
|
||||
window.addEventListener('keydown', handleGlobalKey)
|
||||
nextTickWrapper()
|
||||
|
||||
@@ -17,19 +17,21 @@ v-container.fill-height.d-flex.justify-center.align-center.position-relative
|
||||
v-card-text
|
||||
v-row
|
||||
v-col(cols="12" sm="3")
|
||||
v-btn.py-6(
|
||||
color="var(--color-all)"
|
||||
variant="flat"
|
||||
block
|
||||
@click="_startTraining('all')"
|
||||
)
|
||||
span.font-weight-bold All
|
||||
v-btn.py-6(
|
||||
color="var(--color-all)"
|
||||
variant="flat"
|
||||
block
|
||||
:disabled="!hasSelectedOptions"
|
||||
@click="_startTraining('all')"
|
||||
)
|
||||
span.font-weight-bold All
|
||||
|
||||
v-col(cols="12" sm="3")
|
||||
v-btn.py-6(
|
||||
color="var(--color-kanji)"
|
||||
variant="flat"
|
||||
block
|
||||
:disabled="!hasSelectedOptions"
|
||||
@click="_startTraining('kanji')"
|
||||
)
|
||||
span.font-weight-bold Kanji
|
||||
@@ -39,14 +41,17 @@ v-container.fill-height.d-flex.justify-center.align-center.position-relative
|
||||
color="var(--color-vocab)"
|
||||
variant="flat"
|
||||
block
|
||||
:disabled="!hasSelectedOptions"
|
||||
@click="_startTraining('vocab')"
|
||||
)
|
||||
span.font-weight-bold Vocabulary
|
||||
|
||||
v-col(cols="12" sm="3")
|
||||
v-btn.py-6(
|
||||
color="var(--color-writing)"
|
||||
variant="flat"
|
||||
block
|
||||
:disabled="!hasSelectedOptions"
|
||||
@click="_startTraining('writing')"
|
||||
)
|
||||
span.font-weight-bold Writing
|
||||
@@ -65,7 +70,7 @@ v-container.fill-height.d-flex.justify-center.align-center.position-relative
|
||||
v-card.elevation-3.rounded-lg.text-center.pa-4.d-flex.flex-column.align-center.justify-center(
|
||||
color="var(--color-kanji)"
|
||||
variant="outlined"
|
||||
height="120px"
|
||||
height="100px"
|
||||
)
|
||||
v-icon.size-36.mb-2 mdi-book-open-variant
|
||||
.text-subtitle-2 Kanji
|
||||
@@ -74,7 +79,7 @@ v-container.fill-height.d-flex.justify-center.align-center.position-relative
|
||||
v-card.elevation-3.rounded-lg.text-center.pa-4.d-flex.flex-column.align-center.justify-center(
|
||||
color="var(--color-vocab)"
|
||||
variant="outlined"
|
||||
height="120px"
|
||||
height="100px"
|
||||
)
|
||||
v-icon.size-36.mb-2 mdi-translate
|
||||
.text-subtitle-3 Vocabulary
|
||||
@@ -141,10 +146,6 @@ import { onMounted, ref } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { useAuthStore } from '../stores/auth'
|
||||
|
||||
import { Reviews } from '../composables/subject.ts'
|
||||
|
||||
const reviews = ref<Reviews | null>()
|
||||
|
||||
const router = useRouter()
|
||||
const auth = useAuthStore()
|
||||
const apiKey = ref<string>('')
|
||||
@@ -155,11 +156,15 @@ const stats = ref<{ kanjiCount: number, vocabCount: number }>({
|
||||
})
|
||||
|
||||
const options = ref({
|
||||
writing: false,
|
||||
writing: true,
|
||||
meaning: false,
|
||||
kanji: false,
|
||||
})
|
||||
|
||||
const hasSelectedOptions = computed(() => {
|
||||
return options.value.writing || options.value.meaning
|
||||
})
|
||||
|
||||
async function logoutHandler() {
|
||||
await auth.logout()
|
||||
router.push('/login')
|
||||
@@ -167,7 +172,7 @@ async function logoutHandler() {
|
||||
|
||||
function _startTraining(type: 'kanji' | 'vocab' | 'all' | 'writing') {
|
||||
router.push({
|
||||
path: '/' + type,
|
||||
path: type === 'writing' ? '/writing' : 'trainer',
|
||||
query: {
|
||||
direction: direction.value,
|
||||
options: JSON.stringify({
|
||||
@@ -222,19 +227,24 @@ async function deleteApiKey() {
|
||||
async function syncWanikani() {
|
||||
try {
|
||||
await fetch('/api/v1/wanikani/sync')
|
||||
await updateStats()
|
||||
} catch (error) {
|
||||
console.error('Error syncing Wanikani data:', error)
|
||||
}
|
||||
}
|
||||
|
||||
function updateStats() {
|
||||
if (!reviews.value) return
|
||||
stats.value = reviews.value.getStats()
|
||||
import { getStatistics } from '@/composables/srs.scoring'
|
||||
|
||||
async function updateStats() {
|
||||
const statsTemp = await getStatistics()
|
||||
console.log(statsTemp)
|
||||
if (!stats) return
|
||||
stats.value.kanjiCount = statsTemp.totalKanji || 0
|
||||
stats.value.vocabCount = statsTemp.totalVocab || 0
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
reviews.value = await Reviews.getInstance()
|
||||
getApiKey()
|
||||
updateStats()
|
||||
await updateStats()
|
||||
})
|
||||
</script>
|
||||
|
||||
@@ -1,288 +0,0 @@
|
||||
<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 Kanji Trainer
|
||||
|
||||
v-sheet.d-flex.justify-center.align-center.rounded-lg.py-8.px-4.elevation-12(
|
||||
:style="{backgroundColor: 'var(--color-kanji)', fontSize: '5rem', fontWeight: 'bold', whiteSpace: 'nowrap'}"
|
||||
)
|
||||
span {{ character }}
|
||||
|
||||
v-card-text.text-center.my-4.rounded-lg(
|
||||
:style="{ backgroundColor: 'hsl(320, 100%, 50%, 0.1)', fontSize: '1.1rem', fontWeight: '500', color: 'var(--color-kanji)'}"
|
||||
)
|
||||
| {{ inputMode === 'kanji' ? 'Kanji' : inputMode === 'writing' ? 'Writing' : inputMode }}
|
||||
|
||||
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'
|
||||
|
||||
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',
|
||||
})
|
||||
|
||||
import { nextSubject, correct, incorrect } from '../composables/srs.scoring.ts'
|
||||
|
||||
async function createReview() {
|
||||
console.log(optionsCalculated.value.mode)
|
||||
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' || optionsCalculated.value.direction === 'en->jp')
|
||||
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) return
|
||||
console.log(subject.value)
|
||||
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) {
|
||||
switch (event.key) {
|
||||
case 'Enter':
|
||||
!isDisabled.value ? submitAnswer() : createReview()
|
||||
break
|
||||
}
|
||||
}
|
||||
|
||||
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
|
||||
inputMode.value === 'writing' || inputMode.value === 'kanji'
|
||||
? bindWanakana(answerInput.value)
|
||||
: unbindWanakana(answerInput.value)
|
||||
answerInput.value.focus()
|
||||
})
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
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>
|
||||
@@ -24,6 +24,7 @@
|
||||
v-checkbox(
|
||||
label="Remember me"
|
||||
class="my-4"
|
||||
v-model="rememberMe"
|
||||
)
|
||||
v-btn(
|
||||
color="primary"
|
||||
@@ -47,10 +48,15 @@ const auth = useAuthStore()
|
||||
|
||||
const username = ref('')
|
||||
const password = ref('')
|
||||
const rememberMe = ref(false)
|
||||
|
||||
async function loginHandler() {
|
||||
const success = await auth.login(username.value, password.value)
|
||||
const success = await auth.login(username.value, password.value, rememberMe.value)
|
||||
if (success) router.push('/')
|
||||
else console.error(auth.error)
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
auth.fetchUser()
|
||||
})
|
||||
</script>
|
||||
|
||||
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>
|
||||
@@ -1,296 +0,0 @@
|
||||
<template lang="pug">
|
||||
v-container.fill-height.d-flex.justify-center.align-center
|
||||
v-card.pa-12.rounded-lg.elevation-12
|
||||
v-card-title.text-center.text-h2.font-weight-bold.mb-4
|
||||
span.text-primary Vocabulary Trainer
|
||||
|
||||
v-sheet.d-flex.justify-center.align-center.rounded-lg.py-8.px-4.elevation-12(
|
||||
:style="{backgroundColor: 'var(--color-vocab)', fontSize: '5rem', fontWeight: 'bold', whiteSpace: 'nowrap'}"
|
||||
)
|
||||
span {{ character }}
|
||||
|
||||
v-card-text.text-center.my-4.rounded-lg(
|
||||
:style="{ backgroundColor: 'hsl(320, 100%, 50%, 0.1)', fontSize: '1.1rem', fontWeight: '500', color: 'var(--color-vocab)'}"
|
||||
)
|
||||
| {{ inputMode === 'kanji' ? 'Kanji' : inputMode === 'writing' ? 'Writing' : inputMode }}
|
||||
|
||||
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>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, nextTick, onBeforeUnmount, computed } from 'vue'
|
||||
import { useRouter, useRoute } from 'vue-router'
|
||||
import * as wanakana from 'wanakana'
|
||||
import { Reviews } from '../composables/subject.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 reviews = ref<Reviews | null>(null)
|
||||
const subject = ref<any>(null)
|
||||
|
||||
const direction = computed(() => route.query.direction)
|
||||
const options = computed(() => JSON.parse(route.query.options as string))
|
||||
|
||||
function createReview() {
|
||||
if (!reviews.value) return
|
||||
|
||||
const next = reviews.value.nextSubject()
|
||||
if (!next) {
|
||||
// TODO: Add celebration or summary screen
|
||||
return
|
||||
}
|
||||
|
||||
subject.value = next.subject
|
||||
inputMode.value = next.mode
|
||||
|
||||
if (direction.value === 'jp->en') {
|
||||
character.value = subject.value.characters
|
||||
} else {
|
||||
character.value = subject.value.meanings
|
||||
.filter((m: any) => m.primary)
|
||||
.map((m: any) => m.meaning)
|
||||
.join(', ')
|
||||
}
|
||||
|
||||
nextTickWrapper()
|
||||
isDisabled.value = false
|
||||
resultMessage.value = ''
|
||||
isCorrect.value = false
|
||||
}
|
||||
|
||||
function submitAnswer() {
|
||||
if (isDisabled.value) {
|
||||
createReview()
|
||||
return
|
||||
}
|
||||
|
||||
if (!answerInput.value || !subject.value) return
|
||||
|
||||
const userAnswer = answerInput.value.value.trim()
|
||||
|
||||
if (direction.value === 'jp->en')
|
||||
isCorrect.value = inputMode.value === 'writing'
|
||||
? subject.value.readings.some((r: any) => r.accepted_answer && r.reading.trim() === userAnswer)
|
||||
: subject.value.meanings.some((m: any) => m.accepted_answer && m.meaning.trim().toLowerCase() === userAnswer.toLowerCase())
|
||||
else
|
||||
isCorrect.value = inputMode.value === 'kanji'
|
||||
? subject.value.characters.trim() === userAnswer
|
||||
: (subject.value.readings?.length === 0
|
||||
? subject.value.characters.trim() === userAnswer
|
||||
: subject.value.readings?.some((r: any) => r.accepted_answer && r.reading.trim() === userAnswer))
|
||||
|
||||
const getAnswerText = () => {
|
||||
if (direction.value === 'jp->en')
|
||||
return inputMode.value === 'writing'
|
||||
? subject.value.readings.filter((r: any) => r.accepted_answer).map((r: any) => r.reading).join(', ')
|
||||
: subject.value.meanings.filter((m: any) => m.accepted_answer).map((m: any) => m.meaning).join(', ')
|
||||
else
|
||||
return inputMode.value === 'kanji'
|
||||
? subject.value.characters
|
||||
: subject.value.readings?.length === 0
|
||||
? subject.value.characters
|
||||
: subject.value.readings.filter((r: any) => r.accepted_answer).map((r: any) => r.reading).join(', ')
|
||||
}
|
||||
|
||||
resultMessage.value = isCorrect.value ? 'Correct: ' : 'Wrong: '
|
||||
resultMessage.value += getAnswerText()
|
||||
|
||||
answerInput.value.value = ''
|
||||
isDisabled.value = true
|
||||
}
|
||||
|
||||
function quitSession() {
|
||||
router.push('/')
|
||||
}
|
||||
|
||||
function handleGlobalKey(event: KeyboardEvent) {
|
||||
switch (event.key) {
|
||||
case 'Enter':
|
||||
!isDisabled.value ? submitAnswer() : createReview()
|
||||
break
|
||||
}
|
||||
}
|
||||
|
||||
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
|
||||
inputMode.value === 'writing' || inputMode.value === 'kanji'
|
||||
? bindWanakana(answerInput.value)
|
||||
: unbindWanakana(answerInput.value)
|
||||
answerInput.value.focus()
|
||||
})
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
const mode = options.value.meaning && options.value.writing
|
||||
? 'both'
|
||||
: options.value.meaning
|
||||
? 'meaning'
|
||||
: 'writing'
|
||||
|
||||
reviews.value = await Reviews.getInstance()
|
||||
await reviews.value.setOptions({ type: 'vocab', mode })
|
||||
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>
|
||||
@@ -1,80 +1,106 @@
|
||||
<template lang="pug">
|
||||
v-container.fill-height.d-flex.justify-center.align-center
|
||||
v-card.pa-12.rounded-lg.elevation-12
|
||||
v-card-title.text-center.text-h2.font-weight-bold.mb-4
|
||||
span.text-primary Handwriting Trainer
|
||||
template(v-if="!allDone")
|
||||
v-card-title.text-center.text-h2.font-weight-bold.mb-4
|
||||
span.text-primary Handwriting Trainer
|
||||
|
||||
v-row.justify-center.mb-6
|
||||
v-col(cols="12" class="text-center")
|
||||
.text-h4.text-white.font-weight-bold
|
||||
| Draw the kanji for: {{ subject?.meanings?.find(m => m.primary)?.meaning || subject?.readings?.[0]?.reading || '?' }}
|
||||
v-row.justify-center.mb-6
|
||||
v-col(cols="12" class="text-center")
|
||||
.text-h4.text-white.font-weight-bold
|
||||
| Draw the kanji for: {{ subject?.subject || '?' }}
|
||||
|
||||
v-row.justify-center
|
||||
v-sheet.elevation-8.justify-center(
|
||||
rounded="xl"
|
||||
width="280px"
|
||||
height="280px"
|
||||
)
|
||||
canvas#kanjiCanvas(
|
||||
width="280"
|
||||
height="280"
|
||||
:style="{borderRadius: '12px', backgroundColor: '#313131'}"
|
||||
)
|
||||
v-row.justify-center
|
||||
v-sheet.elevation-8.justify-center(
|
||||
rounded="xl"
|
||||
width="280px"
|
||||
height="280px"
|
||||
)
|
||||
canvas#kanjiCanvas(
|
||||
width="280"
|
||||
height="280"
|
||||
:style="{borderRadius: '12px', backgroundColor: '#313131'}"
|
||||
)
|
||||
|
||||
v-row.justify-center.my-6
|
||||
v-col(cols="12" class="text-center")
|
||||
.text-h5.text-white Select the kanji you drew:
|
||||
v-btn-group
|
||||
v-row.justify-center.my-6
|
||||
v-col(cols="12" class="text-center")
|
||||
.text-h5.text-white Select the kanji you drew:
|
||||
v-btn-group
|
||||
v-btn(
|
||||
v-for="kanji in candidates"
|
||||
:key="kanji"
|
||||
color="var(--color-writing)"
|
||||
class="mx-1 my-1"
|
||||
@click="selectCandidate(kanji)"
|
||||
) {{ kanji || '-' }}
|
||||
|
||||
transition(name="alert-grow")
|
||||
v-alert.mb-4(
|
||||
v-if="resultMessage"
|
||||
:type="isCorrect ? 'success' : 'error'"
|
||||
border="top"
|
||||
variant="outlined"
|
||||
density="compact"
|
||||
) {{ resultMessage }}
|
||||
|
||||
v-row.justify-center
|
||||
v-col(cols="auto" class="mx-1")
|
||||
v-btn(color="error" variant="flat" block @click="quitSession") Quit
|
||||
v-col(cols="auto" class="mx-1")
|
||||
v-btn(color="secondary" variant="flat" block :disabled="isDisabled" @click="skipItem") Skip
|
||||
v-col(cols="auto" class="mx-1")
|
||||
v-btn(color="primary" variant="flat" block :disabled="isDisabled" @click="recognizeKanji") Recognize
|
||||
v-col(cols="auto" class="mx-1")
|
||||
v-btn(color="success" variant="flat" block :disabled="isDisabled" @click="clearCanvas") Clear
|
||||
v-col(cols="auto" class="mx-1")
|
||||
v-btn(color="info" variant="flat" block :disabled="!isDisabled" @click="nextItem") Next
|
||||
|
||||
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 handwriting reviews for today!
|
||||
v-row.justify-center.mt-6
|
||||
v-col(cols="6")
|
||||
v-btn(
|
||||
v-for="kanji in candidates"
|
||||
:key="kanji"
|
||||
color="var(--color-writing)"
|
||||
class="mx-1 my-1"
|
||||
@click="selectCandidate(kanji)"
|
||||
) {{ kanji || '-' }}
|
||||
|
||||
transition(name="alert-grow")
|
||||
v-alert.mb-4(
|
||||
v-if="resultMessage"
|
||||
:type="isCorrect ? 'success' : 'error'"
|
||||
border="top"
|
||||
variant="outlined"
|
||||
density="compact"
|
||||
) {{ resultMessage }}
|
||||
|
||||
v-row.justify-center
|
||||
v-col(cols="auto" class="mx-1")
|
||||
v-btn(color="error" variant="flat" block @click="quitSession") Quit
|
||||
v-col(cols="auto" class="mx-1")
|
||||
v-btn(color="secondary" variant="flat" block :disabled="isDisabled" @click="skipItem") Skip
|
||||
v-col(cols="auto" class="mx-1")
|
||||
v-btn(color="primary" variant="flat" block :disabled="isDisabled" @click="recognizeKanji") Recognize
|
||||
v-col(cols="auto" class="mx-1")
|
||||
v-btn(color="success" variant="flat" block :disabled="isDisabled" @click="clearCanvas") Clear
|
||||
v-col(cols="auto" class="mx-1")
|
||||
v-btn(color="info" variant="flat" block :disabled="!isDisabled" @click="nextItem") Next
|
||||
color="primary"
|
||||
block
|
||||
@click="quitSession"
|
||||
) Back to Home
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, onBeforeUnmount } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { Reviews } from '../composables/subject.ts'
|
||||
import { nextSubject, correct, incorrect } from '../composables/srs.scoring.ts'
|
||||
|
||||
const router = useRouter()
|
||||
const canvasId = 'kanjiCanvas'
|
||||
const reviews = ref<Reviews | null>(null)
|
||||
|
||||
const subject = ref<any>(null)
|
||||
const candidates = ref<string[]>([])
|
||||
const recognizedKanji = ref('')
|
||||
const isCorrect = ref(false)
|
||||
const resultMessage = ref('')
|
||||
const isDisabled = ref(false)
|
||||
const allDone = ref(false)
|
||||
|
||||
async function createReview() {
|
||||
if (!reviews.value) return
|
||||
const next = reviews.value.nextSubject()
|
||||
if (!next) return
|
||||
subject.value = next.subject
|
||||
const options = {
|
||||
subject: ['kanji'],
|
||||
mode: ['meaning'], // request the meaning since we draw the kanji
|
||||
direction: 'en->jp',
|
||||
writingPractice: true,
|
||||
}
|
||||
|
||||
const next = await nextSubject(options)
|
||||
if (!next) {
|
||||
allDone.value = true
|
||||
resultMessage.value = '✅ All handwriting reviews done!'
|
||||
return
|
||||
}
|
||||
|
||||
subject.value = next
|
||||
candidates.value = []
|
||||
recognizedKanji.value = ''
|
||||
isDisabled.value = false
|
||||
@@ -95,12 +121,14 @@ function recognizeKanji() {
|
||||
recognizedKanji.value = candidates.value.join(', ')
|
||||
}
|
||||
|
||||
function selectCandidate(kanji: string) {
|
||||
async function selectCandidate(kanji: string) {
|
||||
if (!subject.value) return
|
||||
|
||||
isCorrect.value = kanji === subject.value.characters
|
||||
resultMessage.value = isCorrect.value ? 'Correct!' : `Wrong! Answer: ${subject.value.characters}`
|
||||
isCorrect.value = kanji === subject.value.answers[0]
|
||||
resultMessage.value = isCorrect.value ? 'Correct!' : `Wrong! Answer: ${subject.value.answers[0]}`
|
||||
isDisabled.value = true
|
||||
|
||||
if (isCorrect.value) await correct()
|
||||
else await incorrect()
|
||||
}
|
||||
|
||||
function clearCanvas() {
|
||||
@@ -113,16 +141,11 @@ function clearCanvas() {
|
||||
|
||||
function quitSession() { router.push('/') }
|
||||
function skipItem() { createReview() }
|
||||
|
||||
function nextItem() {
|
||||
createReview()
|
||||
}
|
||||
function nextItem() { createReview() }
|
||||
|
||||
onMounted(async () => {
|
||||
reviews.value = await Reviews.getInstance()
|
||||
await reviews.value.setOptions({ type: 'kanji', mode: 'writing' })
|
||||
createReview()
|
||||
initCanvas()
|
||||
createReview()
|
||||
})
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
|
||||
@@ -34,19 +34,24 @@ router.isReady().then(() => {
|
||||
localStorage.removeItem('vuetify:dynamic-reload')
|
||||
})
|
||||
|
||||
let hasFetchedUser = false
|
||||
|
||||
router.beforeEach(async (to) => {
|
||||
const auth = useAuthStore()
|
||||
if (!auth.user && !auth.loading) {
|
||||
await auth.fetchUser()
|
||||
}
|
||||
|
||||
if (to.path === '/login') return true
|
||||
|
||||
if (!hasFetchedUser && !auth.user && !auth.loading) {
|
||||
hasFetchedUser = true
|
||||
await auth.fetchUser()
|
||||
}
|
||||
|
||||
if (!auth.isAuthenticated) {
|
||||
return { path: '/login' }
|
||||
return { path: '/login', query: { redirect: to.fullPath } }
|
||||
}
|
||||
|
||||
return true
|
||||
})
|
||||
|
||||
|
||||
export default router
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import { defineStore } from 'pinia'
|
||||
import { ref } from 'vue'
|
||||
import { ref, computed, onMounted, watch } from 'vue'
|
||||
|
||||
interface User {
|
||||
id: number
|
||||
@@ -12,6 +12,12 @@ export const useAuthStore = defineStore('auth', () => {
|
||||
const loading = ref(false)
|
||||
const error = ref<string | null>(null)
|
||||
|
||||
let refreshInterval: ReturnType<typeof setInterval> | null = null
|
||||
|
||||
/**
|
||||
* Fetch the current logged-in user from the server.
|
||||
* Tries refresh if access token expired.
|
||||
*/
|
||||
async function fetchUser() {
|
||||
try {
|
||||
loading.value = true
|
||||
@@ -19,11 +25,17 @@ export const useAuthStore = defineStore('auth', () => {
|
||||
method: 'GET',
|
||||
credentials: 'include',
|
||||
})
|
||||
|
||||
if (res.ok) {
|
||||
const data = await res.json()
|
||||
user.value = data.user
|
||||
error.value = null
|
||||
} else if (res.status === 401) {
|
||||
startAutoRefresh()
|
||||
return true
|
||||
}
|
||||
|
||||
// Token expired or invalid → try refresh
|
||||
if (res.status === 401) {
|
||||
const refreshed = await refreshToken()
|
||||
if (refreshed) return await fetchUser()
|
||||
user.value = null
|
||||
@@ -31,6 +43,7 @@ export const useAuthStore = defineStore('auth', () => {
|
||||
throw new Error('Failed to fetch user')
|
||||
}
|
||||
} catch (err: any) {
|
||||
console.warn('fetchUser failed:', err)
|
||||
error.value = err.message
|
||||
user.value = null
|
||||
} finally {
|
||||
@@ -38,22 +51,30 @@ export const useAuthStore = defineStore('auth', () => {
|
||||
}
|
||||
}
|
||||
|
||||
async function login(username: string, password: string) {
|
||||
/**
|
||||
* Perform login and set cookies.
|
||||
*/
|
||||
async function login(username: string, password: string, remember: boolean) {
|
||||
try {
|
||||
loading.value = true
|
||||
error.value = null
|
||||
|
||||
const res = await fetch('/api/v1/auth/login', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
credentials: 'include',
|
||||
body: JSON.stringify({ username, password }),
|
||||
body: JSON.stringify({ username, password, remember }),
|
||||
})
|
||||
|
||||
if (!res.ok) throw new Error('Invalid credentials')
|
||||
const data = await res.json()
|
||||
|
||||
if (data.ok && data.user) {
|
||||
user.value = data.user
|
||||
startAutoRefresh()
|
||||
return true
|
||||
}
|
||||
|
||||
throw new Error('Login failed')
|
||||
} catch (err: any) {
|
||||
error.value = err.message
|
||||
@@ -63,24 +84,64 @@ export const useAuthStore = defineStore('auth', () => {
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Refresh the access token using refresh cookie.
|
||||
*/
|
||||
async function refreshToken() {
|
||||
// Skip if no refresh cookie (expired or logged out)
|
||||
if (!document.cookie.includes('refresh_token')) return false
|
||||
|
||||
try {
|
||||
const res = await fetch('/api/v1/auth/refresh', {
|
||||
method: 'POST',
|
||||
credentials: 'include',
|
||||
})
|
||||
|
||||
if (res.ok) {
|
||||
console.info('Token refreshed')
|
||||
console.info('[Auth] Token refreshed')
|
||||
return true
|
||||
}
|
||||
console.warn('Token refresh failed')
|
||||
|
||||
console.warn('[Auth] Token refresh failed with status', res.status)
|
||||
return false
|
||||
} catch {
|
||||
} catch (err) {
|
||||
console.error('[Auth] Refresh error', err)
|
||||
return false
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Automatically refresh tokens before expiry.
|
||||
*/
|
||||
function startAutoRefresh() {
|
||||
if (refreshInterval) clearInterval(refreshInterval)
|
||||
|
||||
// Refresh every 7.5 minutes (half of 15m access token)
|
||||
refreshInterval = setInterval(async () => {
|
||||
if (!user.value) return
|
||||
const success = await refreshToken()
|
||||
if (!success) {
|
||||
console.warn('[Auth] Auto-refresh failed, trying fetchUser')
|
||||
const ok = await fetchUser()
|
||||
if (!ok) {
|
||||
console.warn('[Auth] Session expired, logging out')
|
||||
await logout()
|
||||
}
|
||||
}
|
||||
}, 7.5 * 60 * 1000)
|
||||
|
||||
// Also refresh immediately if tab comes back from background
|
||||
document.addEventListener('visibilitychange', async () => {
|
||||
if (document.visibilityState === 'visible' && user.value) {
|
||||
const success = await refreshToken()
|
||||
if (!success) await logout()
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* Stop the refresh timer and logout from backend.
|
||||
*/
|
||||
async function logout() {
|
||||
try {
|
||||
await fetch('/api/v1/auth/logout', {
|
||||
@@ -91,6 +152,8 @@ export const useAuthStore = defineStore('auth', () => {
|
||||
console.warn('Logout error:', err)
|
||||
} finally {
|
||||
user.value = null
|
||||
if (refreshInterval) clearInterval(refreshInterval)
|
||||
refreshInterval = null
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
11
client/src/typed-router.d.ts
vendored
11
client/src/typed-router.d.ts
vendored
@@ -20,9 +20,8 @@ declare module 'vue-router/auto-routes' {
|
||||
export interface RouteNamedMap {
|
||||
'/': RouteRecordInfo<'/', '/', Record<never, never>, Record<never, never>>,
|
||||
'/all': RouteRecordInfo<'/all', '/all', Record<never, never>, Record<never, never>>,
|
||||
'/kanji': RouteRecordInfo<'/kanji', '/kanji', Record<never, never>, Record<never, never>>,
|
||||
'/login': RouteRecordInfo<'/login', '/login', Record<never, never>, Record<never, never>>,
|
||||
'/vocab': RouteRecordInfo<'/vocab', '/vocab', Record<never, never>, Record<never, never>>,
|
||||
'/trainer': RouteRecordInfo<'/trainer', '/trainer', Record<never, never>, Record<never, never>>,
|
||||
'/writing': RouteRecordInfo<'/writing', '/writing', Record<never, never>, Record<never, never>>,
|
||||
}
|
||||
|
||||
@@ -45,16 +44,12 @@ declare module 'vue-router/auto-routes' {
|
||||
routes: '/all'
|
||||
views: never
|
||||
}
|
||||
'src/pages/kanji.vue': {
|
||||
routes: '/kanji'
|
||||
views: never
|
||||
}
|
||||
'src/pages/login.vue': {
|
||||
routes: '/login'
|
||||
views: never
|
||||
}
|
||||
'src/pages/vocab.vue': {
|
||||
routes: '/vocab'
|
||||
'src/pages/trainer.vue': {
|
||||
routes: '/trainer'
|
||||
views: never
|
||||
}
|
||||
'src/pages/writing.vue': {
|
||||
|
||||
Reference in New Issue
Block a user