Compare commits
6 Commits
fc341e57af
...
main
| Author | SHA1 | Date | |
|---|---|---|---|
| fade850767 | |||
|
|
96458b9e94 | ||
| 695f883649 | |||
| 5e70a6ec70 | |||
|
|
150667f781 | ||
|
|
882328c28e |
@@ -14,6 +14,7 @@
|
||||
"dependencies": {
|
||||
"@fontsource/roboto": "5.2.7",
|
||||
"@mdi/font": "7.4.47",
|
||||
"axios": "^1.12.2",
|
||||
"pinia": "^3.0.3",
|
||||
"pug": "^3.0.3",
|
||||
"vue": "^3.5.21",
|
||||
|
||||
86
client/pnpm-lock.yaml
generated
86
client/pnpm-lock.yaml
generated
@@ -14,6 +14,9 @@ importers:
|
||||
'@mdi/font':
|
||||
specifier: 7.4.47
|
||||
version: 7.4.47
|
||||
axios:
|
||||
specifier: ^1.12.2
|
||||
version: 1.12.2
|
||||
pinia:
|
||||
specifier: ^3.0.3
|
||||
version: 3.0.3(typescript@5.9.3)(vue@3.5.22(typescript@5.9.3))
|
||||
@@ -800,6 +803,12 @@ packages:
|
||||
resolution: {integrity: sha512-cbdCP0PGOBq0ASG+sjnKIoYkWMKhhz+F/h9pRexUdX2Hd38+WOlBkRKlqkGOSm0YQpcFMQBJeK4WspUAkwsEdg==}
|
||||
engines: {node: '>=20.19.0'}
|
||||
|
||||
asynckit@0.4.0:
|
||||
resolution: {integrity: sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==}
|
||||
|
||||
axios@1.12.2:
|
||||
resolution: {integrity: sha512-vMJzPewAlRyOgxV2dU0Cuz2O8zzzx9VYtbJOaBgXFeLc4IV/Eg50n4LowmehOOR61S8ZMpc2K5Sa7g6A4jfkUw==}
|
||||
|
||||
babel-walk@3.0.0-canary-5:
|
||||
resolution: {integrity: sha512-GAwkz0AihzY5bkwIY5QDR+LvsRQgB/B+1foMPvi0FZPMl5fjD7ICiznUiBdLYMH1QYe6vqu4gWYytZOccLouFw==}
|
||||
engines: {node: '>= 10.0.0'}
|
||||
@@ -897,6 +906,10 @@ packages:
|
||||
colorjs.io@0.5.2:
|
||||
resolution: {integrity: sha512-twmVoizEW7ylZSN32OgKdXRmo1qg+wT5/6C3xu5b9QsWzSFAhHLn2xd8ro0diCsKfCj1RdaTP/nrcW+vAoQPIw==}
|
||||
|
||||
combined-stream@1.0.8:
|
||||
resolution: {integrity: sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==}
|
||||
engines: {node: '>= 0.8'}
|
||||
|
||||
comment-parser@1.4.1:
|
||||
resolution: {integrity: sha512-buhp5kePrmda3vhc5B9t7pUQXAb2Tnd0qgpkIhPhkHXxJpiPJ11H0ZEU0oBpJ2QztSbzG/ZxMj/CHsYJqRHmyg==}
|
||||
engines: {node: '>= 12.0.0'}
|
||||
@@ -948,6 +961,10 @@ packages:
|
||||
deep-is@0.1.4:
|
||||
resolution: {integrity: sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==}
|
||||
|
||||
delayed-stream@1.0.0:
|
||||
resolution: {integrity: sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==}
|
||||
engines: {node: '>=0.4.0'}
|
||||
|
||||
detect-libc@1.0.3:
|
||||
resolution: {integrity: sha512-pGjwhsmsp4kL2RTz08wcOlGN83otlqHeD/Z5T8GXZB+/YcpQ/dgo+lbU8ZsGxV0HIvqqxo9l7mqYwyYMD9bKDg==}
|
||||
engines: {node: '>=0.10'}
|
||||
@@ -987,6 +1004,10 @@ packages:
|
||||
resolution: {integrity: sha512-FGgH2h8zKNim9ljj7dankFPcICIK9Cp5bm+c2gQSYePhpaG5+esrLODihIorn+Pe6FGJzWhXQotPv73jTaldXA==}
|
||||
engines: {node: '>= 0.4'}
|
||||
|
||||
es-set-tostringtag@2.1.0:
|
||||
resolution: {integrity: sha512-j6vWzfrGVfyXxge+O0x5sh6cvxAog0a/4Rdd2K36zCMV5eJ+/+tOAngRO8cODMNWbVRdVlmGZQL2YS3yR8bIUA==}
|
||||
engines: {node: '>= 0.4'}
|
||||
|
||||
esbuild@0.25.10:
|
||||
resolution: {integrity: sha512-9RiGKvCwaqxO2owP61uQ4BgNborAQskMR6QusfWzQqv7AZOg5oGehdY2pRJMTKuwxd1IDBP4rSbI5lHzU7SMsQ==}
|
||||
engines: {node: '>=18'}
|
||||
@@ -1218,6 +1239,19 @@ packages:
|
||||
flatted@3.3.3:
|
||||
resolution: {integrity: sha512-GX+ysw4PBCz0PzosHDepZGANEuFCMLrnRTiEy9McGjmkCQYwRq4A/X786G/fjM/+OjsWSU1ZrY5qyARZmO/uwg==}
|
||||
|
||||
follow-redirects@1.15.11:
|
||||
resolution: {integrity: sha512-deG2P0JfjrTxl50XGCDyfI97ZGVCxIpfKYmfyrQ54n5FO/0gfIES8C/Psl6kWVDolizcaaxZJnTS0QSMxvnsBQ==}
|
||||
engines: {node: '>=4.0'}
|
||||
peerDependencies:
|
||||
debug: '*'
|
||||
peerDependenciesMeta:
|
||||
debug:
|
||||
optional: true
|
||||
|
||||
form-data@4.0.4:
|
||||
resolution: {integrity: sha512-KrGhL9Q4zjj0kiUt5OO4Mr/A/jlI2jDYs5eHBpYHPcBEVSiipAvn2Ko2HnPe20rmcuuvMHNdZFp+4IlGTMF0Ow==}
|
||||
engines: {node: '>= 6'}
|
||||
|
||||
fsevents@2.3.3:
|
||||
resolution: {integrity: sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==}
|
||||
engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
|
||||
@@ -1440,6 +1474,14 @@ packages:
|
||||
resolution: {integrity: sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==}
|
||||
engines: {node: '>=8.6'}
|
||||
|
||||
mime-db@1.52.0:
|
||||
resolution: {integrity: sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==}
|
||||
engines: {node: '>= 0.6'}
|
||||
|
||||
mime-types@2.1.35:
|
||||
resolution: {integrity: sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==}
|
||||
engines: {node: '>= 0.6'}
|
||||
|
||||
minimatch@3.1.2:
|
||||
resolution: {integrity: sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==}
|
||||
|
||||
@@ -1597,6 +1639,9 @@ packages:
|
||||
promise@7.3.1:
|
||||
resolution: {integrity: sha512-nolQXZ/4L+bP/UGlkfaIujX9BKxGwmQ9OT4mOt5yvy8iK1h3wqTEJCijzGANTCCl9nWjY41juyAn2K3Q1hLLTg==}
|
||||
|
||||
proxy-from-env@1.1.0:
|
||||
resolution: {integrity: sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==}
|
||||
|
||||
pug-attrs@3.0.0:
|
||||
resolution: {integrity: sha512-azINV9dUtzPMFQktvTXciNAfAuVh/L/JCl0vtPCwvOA21uZrC08K/UnmrL+SXGEVc1FwzjW62+xw5S/uaLj6cA==}
|
||||
|
||||
@@ -2793,6 +2838,16 @@ snapshots:
|
||||
'@babel/parser': 7.28.4
|
||||
ast-kit: 2.1.3
|
||||
|
||||
asynckit@0.4.0: {}
|
||||
|
||||
axios@1.12.2:
|
||||
dependencies:
|
||||
follow-redirects: 1.15.11
|
||||
form-data: 4.0.4
|
||||
proxy-from-env: 1.1.0
|
||||
transitivePeerDependencies:
|
||||
- debug
|
||||
|
||||
babel-walk@3.0.0-canary-5:
|
||||
dependencies:
|
||||
'@babel/types': 7.28.4
|
||||
@@ -2891,6 +2946,10 @@ snapshots:
|
||||
|
||||
colorjs.io@0.5.2: {}
|
||||
|
||||
combined-stream@1.0.8:
|
||||
dependencies:
|
||||
delayed-stream: 1.0.0
|
||||
|
||||
comment-parser@1.4.1: {}
|
||||
|
||||
concat-map@0.0.1: {}
|
||||
@@ -2930,6 +2989,8 @@ snapshots:
|
||||
|
||||
deep-is@0.1.4: {}
|
||||
|
||||
delayed-stream@1.0.0: {}
|
||||
|
||||
detect-libc@1.0.3:
|
||||
optional: true
|
||||
|
||||
@@ -2957,6 +3018,13 @@ snapshots:
|
||||
dependencies:
|
||||
es-errors: 1.3.0
|
||||
|
||||
es-set-tostringtag@2.1.0:
|
||||
dependencies:
|
||||
es-errors: 1.3.0
|
||||
get-intrinsic: 1.3.0
|
||||
has-tostringtag: 1.0.2
|
||||
hasown: 2.0.2
|
||||
|
||||
esbuild@0.25.10:
|
||||
optionalDependencies:
|
||||
'@esbuild/aix-ppc64': 0.25.10
|
||||
@@ -3274,6 +3342,16 @@ snapshots:
|
||||
|
||||
flatted@3.3.3: {}
|
||||
|
||||
follow-redirects@1.15.11: {}
|
||||
|
||||
form-data@4.0.4:
|
||||
dependencies:
|
||||
asynckit: 0.4.0
|
||||
combined-stream: 1.0.8
|
||||
es-set-tostringtag: 2.1.0
|
||||
hasown: 2.0.2
|
||||
mime-types: 2.1.35
|
||||
|
||||
fsevents@2.3.3:
|
||||
optional: true
|
||||
|
||||
@@ -3465,6 +3543,12 @@ snapshots:
|
||||
braces: 3.0.3
|
||||
picomatch: 2.3.1
|
||||
|
||||
mime-db@1.52.0: {}
|
||||
|
||||
mime-types@2.1.35:
|
||||
dependencies:
|
||||
mime-db: 1.52.0
|
||||
|
||||
minimatch@3.1.2:
|
||||
dependencies:
|
||||
brace-expansion: 1.1.12
|
||||
@@ -3613,6 +3697,8 @@ snapshots:
|
||||
dependencies:
|
||||
asap: 2.0.6
|
||||
|
||||
proxy-from-env@1.1.0: {}
|
||||
|
||||
pug-attrs@3.0.0:
|
||||
dependencies:
|
||||
constantinople: 4.0.1
|
||||
|
||||
145
client/src/composables/srs.scoring.ts
Normal file
145
client/src/composables/srs.scoring.ts
Normal file
@@ -0,0 +1,145 @@
|
||||
import axios from 'axios'
|
||||
|
||||
type SubjectType = 'kanji' | 'vocab' | 'both'
|
||||
type LearningDirection = 'jp->en' | 'en->jp'
|
||||
type WritingMode = 'kana' | 'kanji'
|
||||
|
||||
interface SubjectOptions {
|
||||
subject: SubjectType
|
||||
direction?: LearningDirection
|
||||
writingMode?: WritingMode
|
||||
mode?: 'meaning' | 'reading'
|
||||
writingPractice: boolean
|
||||
}
|
||||
|
||||
interface ReviewItem {
|
||||
type: 'kanji' | 'vocab'
|
||||
subject: string
|
||||
answers: string[]
|
||||
pronunciation_audios?: string[],
|
||||
mode: string,
|
||||
}
|
||||
|
||||
let currentReviewItem: any = {}
|
||||
let currentSubjectOptions: SubjectOptions
|
||||
|
||||
/**
|
||||
* Handles logic for when a subject answer is correct.
|
||||
*
|
||||
* @param id - The unique identifier of the subject item.
|
||||
* @param subjectOptions - Configuration describing what kind of subject
|
||||
* and learning mode is being used (kanji, vocab, etc.).
|
||||
* @returns void
|
||||
*/
|
||||
const correct = async () => (
|
||||
await axios.post('/api/v1/review/correct', {
|
||||
itemId: currentReviewItem.id,
|
||||
currentSubjectOptions,
|
||||
}, {
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
})
|
||||
)
|
||||
|
||||
/**
|
||||
* Handles logic for when a subject answer is incorrect
|
||||
*
|
||||
* @param id - The unique identifier of the subject item.
|
||||
* @param subjectOptions - Configuration describing what kind of subject
|
||||
* and learning mode is being used (kanji, vocab, etc.).
|
||||
* @returns void
|
||||
*/
|
||||
const incorrect = async () => {
|
||||
await axios.post('/api/v1/review/incorrect', {
|
||||
itemId: currentReviewItem.id,
|
||||
currentSubjectOptions,
|
||||
}, {
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* Fetches the next subject from the server
|
||||
*
|
||||
* @param subjectOptions - Configuration describing what kind of subject
|
||||
* and learning mode is being used (kanji, vocab, etc.).
|
||||
*
|
||||
* @returns
|
||||
*/
|
||||
const nextSubject = async (subjectOptions: SubjectOptions): Promise<ReviewItem | null> => {
|
||||
const res = await axios.post('/api/v1/review/', { subjectOptions }, {
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
})
|
||||
|
||||
const item = res.data
|
||||
if (!item || item.message === 'No reviews due') return null
|
||||
|
||||
const mode: 'writing_practice' | 'jp_en_meaning' | 'jp_en_reading' | 'en_jp_writing' = item._selectedMode
|
||||
|
||||
currentReviewItem = item
|
||||
currentSubjectOptions = { ...subjectOptions, mode }
|
||||
|
||||
let subjectText = ''
|
||||
let answers: string[] = []
|
||||
let pronunciation_audios: string[] | undefined = item.pronunciation_audios
|
||||
|
||||
if (mode === 'writing_practice') {
|
||||
subjectText = item.meanings?.filter(m => m.primary).map(m => m.meaning).join(', ') || ''
|
||||
answers = [item.characters]
|
||||
} else if (mode === 'jp_en_meaning') {
|
||||
subjectText = item.characters
|
||||
answers = item.meanings?.filter(m => m.accepted_answer).map(m => m.meaning) || []
|
||||
} 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]
|
||||
}
|
||||
|
||||
return {
|
||||
type: item.type,
|
||||
subject: subjectText,
|
||||
answers,
|
||||
pronunciation_audios,
|
||||
mode,
|
||||
}
|
||||
}
|
||||
|
||||
const getStatistics = async () => {
|
||||
const res = await axios.get('/api/v1/review/stats', {
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
})
|
||||
|
||||
return res.data
|
||||
}
|
||||
|
||||
const getSubjectStatistics = async (id: string) => {
|
||||
const res = await axios.get(`/api/v1/review/stats/${id}`, {
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
})
|
||||
|
||||
return res.data
|
||||
}
|
||||
|
||||
export {
|
||||
correct,
|
||||
incorrect,
|
||||
nextSubject,
|
||||
getStatistics,
|
||||
getSubjectStatistics,
|
||||
}
|
||||
@@ -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,16 +1,17 @@
|
||||
<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 Full Trainer
|
||||
|
||||
v-sheet.d-flex.justify-center.align-center.rounded-lg.py-8.px-4.elevation-12(
|
||||
:style="{backgroundColor: 'var(--color-all)', fontSize: '5rem', fontWeight: 'bold', whiteSpace: 'nowrap'}"
|
||||
:style="{ backgroundColor: subjectColor, 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-all)'}"
|
||||
:style="{ backgroundColor: subjectColor + '20', fontSize: '1.1rem', fontWeight: '500', color: subjectColor }"
|
||||
)
|
||||
| {{ inputMode === 'kanji' ? 'Kanji' : inputMode === 'writing' ? 'Writing' : inputMode }}
|
||||
|
||||
@@ -59,13 +60,26 @@ v-container.fill-height.d-flex.justify-center.align-center
|
||||
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 { Reviews } from '../composables/subject.ts'
|
||||
|
||||
import { nextSubject, correct, incorrect } from '../composables/srs.scoring.ts'
|
||||
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
@@ -77,76 +91,76 @@ 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 allDone = ref(false)
|
||||
|
||||
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)'
|
||||
}
|
||||
})
|
||||
|
||||
const direction = computed(() => route.query.direction)
|
||||
const options = computed(() => JSON.parse(route.query.options as string))
|
||||
|
||||
function createReview() {
|
||||
if (!reviews.value) return
|
||||
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 next = reviews.value.nextSubject()
|
||||
async function createReview() {
|
||||
const next = await nextSubject(optionsCalculated.value)
|
||||
if (!next) {
|
||||
// TODO: Add celebration or summary screen
|
||||
allDone.value = true
|
||||
character.value = ''
|
||||
resultMessage.value = '✅ All done!'
|
||||
return
|
||||
}
|
||||
|
||||
subject.value = next.subject
|
||||
inputMode.value = next.mode
|
||||
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.readings?.some((r: any) => r.accepted_answer && r.reading.trim() === userAnswer)
|
||||
: subject.value.characters.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
|
||||
@@ -187,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()
|
||||
@@ -294,4 +300,9 @@ $accent-color: hsl(320, 100%, 50%);
|
||||
box-shadow: 0 0 0 1px $error-color !important;
|
||||
}
|
||||
}
|
||||
|
||||
v-sheet,
|
||||
v-card-text {
|
||||
transition: background-color 0.4s ease, color 0.4s ease;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -21,6 +21,7 @@ v-container.fill-height.d-flex.justify-center.align-center.position-relative
|
||||
color="var(--color-all)"
|
||||
variant="flat"
|
||||
block
|
||||
:disabled="!hasSelectedOptions"
|
||||
@click="_startTraining('all')"
|
||||
)
|
||||
span.font-weight-bold All
|
||||
@@ -30,6 +31,7 @@ v-container.fill-height.d-flex.justify-center.align-center.position-relative
|
||||
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({
|
||||
meaning: true,
|
||||
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,10 +172,16 @@ 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(options.value),
|
||||
options: JSON.stringify({
|
||||
direction: direction.value,
|
||||
type: type,
|
||||
writing: options.value.writing,
|
||||
meaning: options.value.meaning,
|
||||
kanji: options.value.kanji,
|
||||
}),
|
||||
}
|
||||
})
|
||||
}
|
||||
@@ -216,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,297 +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 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>
|
||||
|
||||
<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.readings?.some((r: any) => r.accepted_answer && r.reading.trim() === userAnswer)
|
||||
: subject.value.characters.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: 'kanji', 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>
|
||||
@@ -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,297 +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.readings?.some((r: any) => r.accepted_answer && r.reading.trim() === userAnswer)
|
||||
: subject.value.characters.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,13 +1,14 @@
|
||||
<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 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 || '?' }}
|
||||
| Draw the kanji for: {{ subject?.subject || '?' }}
|
||||
|
||||
v-row.justify-center
|
||||
v-sheet.elevation-8.justify-center(
|
||||
@@ -53,28 +54,53 @@ v-container.fill-height.d-flex.justify-center.align-center
|
||||
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(
|
||||
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,16 @@ 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
|
||||
}
|
||||
|
||||
if (res.status === 401) {
|
||||
const refreshed = await refreshToken()
|
||||
if (refreshed) return await fetchUser()
|
||||
user.value = null
|
||||
@@ -31,6 +42,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 +50,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 +83,61 @@ export const useAuthStore = defineStore('auth', () => {
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Refresh the access token using refresh cookie.
|
||||
*/
|
||||
async function refreshToken() {
|
||||
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)
|
||||
|
||||
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)
|
||||
|
||||
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 +148,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': {
|
||||
|
||||
@@ -14,7 +14,7 @@ function createAccessToken(user: any) {
|
||||
return jwt.sign(
|
||||
{ sub: user._id, role: user.role },
|
||||
ACCESS_TOKEN_SECRET,
|
||||
{ expiresIn: '15m' },
|
||||
{ expiresIn: '7d' },
|
||||
)
|
||||
}
|
||||
|
||||
@@ -27,7 +27,7 @@ function createRefreshToken(user: any) {
|
||||
}
|
||||
|
||||
router.post('/login', async (req: Request, res: Response) => {
|
||||
const { email, username, password } = req.body
|
||||
const { username, password, remember } = req.body
|
||||
if (!username || !password) return res.status(400).json({ error: 'Missing credentials' })
|
||||
|
||||
try {
|
||||
@@ -40,7 +40,7 @@ router.post('/login', async (req: Request, res: Response) => {
|
||||
user = await UserModel.create({
|
||||
username: ldapUser.user.cn,
|
||||
email: ldapUser.user.dn,
|
||||
refresh_token: '',
|
||||
refreshToken: '',
|
||||
})
|
||||
}
|
||||
|
||||
@@ -51,10 +51,14 @@ router.post('/login', async (req: Request, res: Response) => {
|
||||
await user.save()
|
||||
|
||||
res.cookie('access_token', accessToken, {
|
||||
httpOnly: true, sameSite: 'lax', secure: process.env.NODE_ENV !== 'dev', maxAge: 15 * 60 * 1000,
|
||||
httpOnly: true, sameSite: 'lax', secure: process.env.NODE_ENV !== 'dev', maxAge: 7 * 24 * 60 * 60 * 1000,
|
||||
})
|
||||
res.cookie('refresh_token', refreshToken, {
|
||||
httpOnly: true, sameSite: 'lax', secure: process.env.NODE_ENV !== 'dev', maxAge: 7 * 24 * 3600 * 1000,
|
||||
const refreshMaxAge = remember
|
||||
? 365 * 24 * 60 * 60 * 1000
|
||||
: 7 * 24 * 60 * 60 * 1000
|
||||
|
||||
res.cookie('refreshToken', refreshToken, {
|
||||
httpOnly: true, sameSite: 'lax', secure: process.env.NODE_ENV !== 'dev', maxAge: refreshMaxAge,
|
||||
})
|
||||
|
||||
res.json({
|
||||
@@ -72,12 +76,14 @@ router.post('/login', async (req: Request, res: Response) => {
|
||||
})
|
||||
|
||||
router.post('/refresh', async (req: Request, res: Response) => {
|
||||
const token = req.cookies.refresh_token
|
||||
const token = req.cookies.refreshToken
|
||||
if (!token) return res.status(401).json({ error: 'No refresh token' })
|
||||
|
||||
try {
|
||||
const payload = jwt.verify(token, REFRESH_TOKEN_SECRET)
|
||||
const user = await UserModel.findById(payload.sub)
|
||||
if (!user || !user.refreshToken === token) return res.status(403).json({ error: 'Invalid refresh token' })
|
||||
const payload = jwt.verify(token, REFRESH_TOKEN_SECRET) as any
|
||||
const user = await UserModel.findById(payload.id)
|
||||
if (!user || user.refreshToken !== token)
|
||||
return res.status(403).json({ error: 'Invalid refresh token' })
|
||||
|
||||
const newAccessToken = createAccessToken(user)
|
||||
const newRefreshToken = createRefreshToken(user)
|
||||
@@ -85,20 +91,33 @@ router.post('/refresh', async (req: Request, res: Response) => {
|
||||
user.refreshToken = newRefreshToken
|
||||
await user.save()
|
||||
|
||||
const existingRefreshCookie = req.cookies.refreshToken
|
||||
const decodedOld = jwt.decode(existingRefreshCookie) as any
|
||||
const remainingDays = (decodedOld.exp * 1000 - Date.now()) / (1000 * 60 * 60 * 24)
|
||||
|
||||
const refreshMaxAge = remainingDays > 7 ? 365 * 24 * 60 * 60 * 1000 : 7 * 24 * 60 * 60 * 1000
|
||||
|
||||
res.cookie('access_token', newAccessToken, {
|
||||
httpOnly: true, sameSite: 'lax', secure: process.env.NODE_ENV !== 'dev', maxAge: 15 * 60 * 1000,
|
||||
httpOnly: true,
|
||||
sameSite: 'lax',
|
||||
secure: process.env.NODE_ENV !== 'dev',
|
||||
maxAge: 15 * 60 * 1000,
|
||||
})
|
||||
res.cookie('refresh_token', newRefreshToken, {
|
||||
httpOnly: true, sameSite: 'lax', secure: process.env.NODE_ENV !== 'dev', maxAge: 7 * 24 * 3600 * 1000,
|
||||
res.cookie('refreshToken', newRefreshToken, {
|
||||
httpOnly: true,
|
||||
sameSite: 'lax',
|
||||
secure: process.env.NODE_ENV !== 'dev',
|
||||
maxAge: refreshMaxAge,
|
||||
})
|
||||
res.json({ ok: true })
|
||||
|
||||
return res.json({ ok: true })
|
||||
} catch (error) {
|
||||
res.status(401).json({ error: 'Invalid refresh token' })
|
||||
return res.status(401).json({ error: 'Invalid refresh token' })
|
||||
}
|
||||
})
|
||||
|
||||
router.post('/logout', async (req: Request, res: Response) => {
|
||||
const token = req.cookies.refresh_token
|
||||
const token = req.cookies.refreshToken
|
||||
if (token) {
|
||||
try {
|
||||
const payload = jwt.verify(token, REFRESH_TOKEN_SECRET)
|
||||
@@ -110,7 +129,7 @@ router.post('/logout', async (req: Request, res: Response) => {
|
||||
} catch { }
|
||||
}
|
||||
res.clearCookie('access_token')
|
||||
res.clearCookie('refresh_token')
|
||||
res.clearCookie('refreshToken')
|
||||
res.json({ loggedOut: true })
|
||||
})
|
||||
|
||||
|
||||
269
server/src/api/v1/subject/index.ts
Normal file
269
server/src/api/v1/subject/index.ts
Normal file
@@ -0,0 +1,269 @@
|
||||
import express, { type Router, type Response } from 'express'
|
||||
import { ReviewItemModel, type ReviewItemType } from '../../../models/reviewitem.model.ts'
|
||||
import { verifyAccessToken, type AuthRequest } from '../../../middleware/auth.ts'
|
||||
|
||||
const router = express.Router()
|
||||
|
||||
router.use(verifyAccessToken)
|
||||
|
||||
router.post('/', verifyAccessToken, async (req: AuthRequest, res: Response) => {
|
||||
try {
|
||||
const userId = req.userId
|
||||
if (!userId) return res.status(401).json({ error: 'Unauthorized' })
|
||||
|
||||
const { subjectOptions } = req.body
|
||||
if (!subjectOptions) return res.status(400).json({ error: 'Missing subject options' })
|
||||
|
||||
let typeFilter: ReviewItemType[] = ['kanji', 'vocab']
|
||||
if (subjectOptions.subject) {
|
||||
typeFilter = Array.isArray(subjectOptions.subject)
|
||||
? subjectOptions.subject
|
||||
: [subjectOptions.subject]
|
||||
}
|
||||
|
||||
const possibleModes: { key: string; type: string }[] = []
|
||||
|
||||
if (subjectOptions.writingPractice) {
|
||||
possibleModes.push({ key: 'writing_practice', type: 'writing_practice' })
|
||||
}
|
||||
|
||||
const directions = Array.isArray(subjectOptions.direction)
|
||||
? subjectOptions.direction
|
||||
: subjectOptions.direction === 'both'
|
||||
? ['jp->en', 'en->jp']
|
||||
: [subjectOptions.direction]
|
||||
|
||||
for (const dir of directions) {
|
||||
if (dir === 'jp->en') {
|
||||
const modes = Array.isArray(subjectOptions.mode)
|
||||
? subjectOptions.mode
|
||||
: [subjectOptions.mode]
|
||||
if (modes.includes('meaning')) {
|
||||
possibleModes.push({ key: 'jp_en_meaning', type: 'jp_en_meaning' })
|
||||
}
|
||||
if (modes.includes('reading')) {
|
||||
possibleModes.push({ key: 'jp_en_reading', type: 'jp_en_reading' })
|
||||
}
|
||||
}
|
||||
|
||||
if (dir === 'en->jp') {
|
||||
const modes = Array.isArray(subjectOptions.mode)
|
||||
? subjectOptions.mode
|
||||
: [subjectOptions.mode]
|
||||
|
||||
if (!subjectOptions.meaning && (modes.includes('reading'))) {
|
||||
possibleModes.push({ key: 'en_jp_writing', type: 'en_jp_writing' })
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (possibleModes.length === 0) return res.status(200).json({ message: 'No reviews due' })
|
||||
|
||||
const now = new Date()
|
||||
const dueConditions = possibleModes.map(m => ({ [`srs.${m.key}.next_review`]: { $lte: now } }))
|
||||
|
||||
const dueItems = await ReviewItemModel.find({
|
||||
userId,
|
||||
type: { $in: typeFilter },
|
||||
$or: dueConditions,
|
||||
})
|
||||
|
||||
if (!dueItems || dueItems.length === 0) return res.status(200).json({ message: 'No reviews due' })
|
||||
|
||||
const nextItem = dueItems[Math.floor(Math.random() * dueItems.length)]
|
||||
|
||||
const dueModesForItem = possibleModes.filter(
|
||||
m => nextItem.srs[m.key].next_review <= now
|
||||
)
|
||||
|
||||
if (dueModesForItem.length === 0) {
|
||||
return res.status(200).json({ message: 'No reviews due for this item' })
|
||||
}
|
||||
|
||||
const selectedMode = dueModesForItem[Math.floor(Math.random() * dueModesForItem.length)].type
|
||||
|
||||
res.status(200).json({
|
||||
...nextItem.toObject(),
|
||||
_selectedMode: selectedMode,
|
||||
})
|
||||
} catch (error) {
|
||||
console.error('Error fetching next review item:', error)
|
||||
res.status(500).json({ error: 'Failed to fetch next review item' })
|
||||
}
|
||||
})
|
||||
|
||||
router.post('/correct', verifyAccessToken, async (req: AuthRequest, res: Response) => {
|
||||
try {
|
||||
const userId = req.userId
|
||||
if (!userId) return res.status(401).json({ error: 'Unauthorized' })
|
||||
|
||||
const { itemId } = req.body
|
||||
if (!itemId) return res.status(400).json({ error: 'Missing itemId' })
|
||||
|
||||
const item = await ReviewItemModel.findOne({ id: itemId, userId })
|
||||
if (!item) return res.status(404).json({ error: 'Item not found' })
|
||||
|
||||
let key: string
|
||||
if (req.body.currentSubjectOptions.writingPractice) {
|
||||
key = 'srs.writing_practice'
|
||||
} else if (req.body.currentSubjectOptions.direction === 'jp->en') {
|
||||
key = req.body.currentSubjectOptions.mode === 'jp_en_reading' ? 'srs.jp_en_reading' : 'srs.jp_en_meaning'
|
||||
} else {
|
||||
key = 'srs.en_jp_writing'
|
||||
}
|
||||
|
||||
const now = new Date()
|
||||
|
||||
item.set(`${key}.streak`, (item.get(`${key}.streak`) ?? 0) + 1)
|
||||
item.set(`${key}.ease_factor`, Math.min(3.0, (item.get(`${key}.ease_factor`) ?? 2.5) + 0.1))
|
||||
item.set(`${key}.interval`, Math.round((item.get(`${key}.interval`) ?? 1) * (item.get(`${key}.ease_factor`) ?? 2.5)))
|
||||
item.set(`${key}.last_review`, now)
|
||||
item.set(`${key}.next_review`, new Date(now.getTime() + (item.get(`${key}.interval`) ?? 1) * 3600 * 1000))
|
||||
|
||||
await item.save()
|
||||
|
||||
res.status(200).json({ message: 'Item marked as correct' })
|
||||
} catch (error) {
|
||||
console.error('Error marking item correct:', error)
|
||||
res.status(500).json({ error: 'Failed to update item' })
|
||||
}
|
||||
})
|
||||
|
||||
router.post('/incorrect', verifyAccessToken, async (req: AuthRequest, res: Response) => {
|
||||
try {
|
||||
const userId = req.userId
|
||||
if (!userId) return res.status(401).json({ error: 'Unauthorized' })
|
||||
|
||||
const { itemId } = req.body
|
||||
if (!itemId) return res.status(400).json({ error: 'Missing itemId' })
|
||||
|
||||
const item = await ReviewItemModel.findOne({ id: itemId, userId })
|
||||
if (!item) return res.status(404).json({ error: 'Item not found' })
|
||||
|
||||
let key: string
|
||||
if (req.body.currentSubjectOptions.writingPractice) {
|
||||
key = 'srs.writing_practice'
|
||||
} else if (req.body.currentSubjectOptions.direction === 'jp->en') {
|
||||
key = req.body.currentSubjectOptions.mode === 'reading' ? 'srs.jp_en_reading' : 'srs.jp_en_meaning'
|
||||
} else {
|
||||
key = 'srs.en_jp_writing'
|
||||
}
|
||||
|
||||
const now = new Date()
|
||||
|
||||
item.set(`${key}.streak`, 0)
|
||||
item.set(`${key}.ease_factor`, Math.max(1.3, (item.get(`${key}.ease_factor`) ?? 2.5) - 0.2))
|
||||
item.set(`${key}.interval`, 1)
|
||||
item.set(`${key}.last_review`, now)
|
||||
item.set(`${key}.next_review`, new Date(now.getTime() + 60 * 60 * 1000)) // 1h cooldown for wrong answers
|
||||
|
||||
await item.save()
|
||||
|
||||
res.status(200).json({ message: 'Item marked as incorrect' })
|
||||
} catch (error) {
|
||||
console.error('Error marking item incorrect:', error)
|
||||
res.status(500).json({ error: 'Failed to update item' })
|
||||
}
|
||||
})
|
||||
|
||||
router.get('/stats', verifyAccessToken, async (req: AuthRequest, res: Response) => {
|
||||
try {
|
||||
const userId = req.userId
|
||||
if (!userId) return res.status(401).json({ error: 'Unauthorized' })
|
||||
|
||||
const now = new Date()
|
||||
|
||||
// Total counts
|
||||
const totalKanji = await ReviewItemModel.countDocuments({ userId, type: 'kanji' })
|
||||
const totalVocab = await ReviewItemModel.countDocuments({ userId, type: 'vocab' })
|
||||
|
||||
// Any of the SRS fields that are due
|
||||
const dueConditions = [
|
||||
{ 'srs.jp_en_meaning.next_review': { $lte: now } },
|
||||
{ 'srs.jp_en_reading.next_review': { $lte: now } },
|
||||
{ 'srs.en_jp_writing.next_review': { $lte: now } },
|
||||
{ 'srs.writing_practice.next_review': { $lte: now } },
|
||||
]
|
||||
|
||||
const dueItems = await ReviewItemModel.countDocuments({
|
||||
userId,
|
||||
$or: dueConditions,
|
||||
})
|
||||
|
||||
// Waiting items = have next_review set to the future in any field
|
||||
const waitingConditions = [
|
||||
{ 'srs.jp_en_meaning.next_review': { $gt: now } },
|
||||
{ 'srs.jp_en_reading.next_review': { $gt: now } },
|
||||
{ 'srs.en_jp_writing.next_review': { $gt: now } },
|
||||
{ 'srs.writing_practice.next_review': { $gt: now } },
|
||||
]
|
||||
|
||||
const waitingItems = await ReviewItemModel.countDocuments({
|
||||
userId,
|
||||
$or: waitingConditions,
|
||||
})
|
||||
|
||||
// Average SRS score per type (optional — kept from original)
|
||||
const kanjiAgg = await ReviewItemModel.aggregate([
|
||||
{ $match: { userId, type: 'kanji' } },
|
||||
{ $group: { _id: null, avgScore: { $avg: '$srs_score' } } },
|
||||
])
|
||||
|
||||
const vocabAgg = await ReviewItemModel.aggregate([
|
||||
{ $match: { userId, type: 'vocab' } },
|
||||
{ $group: { _id: null, avgScore: { $avg: '$srs_score' } } },
|
||||
])
|
||||
|
||||
res.status(200).json({
|
||||
totalKanji,
|
||||
totalVocab,
|
||||
dueItems,
|
||||
waitingItems,
|
||||
avgKanjiScore: kanjiAgg[0]?.avgScore ?? 0,
|
||||
avgVocabScore: vocabAgg[0]?.avgScore ?? 0,
|
||||
})
|
||||
} catch (error) {
|
||||
console.error('Error fetching stats:', error)
|
||||
res.status(500).json({ error: 'Failed to fetch stats' })
|
||||
}
|
||||
})
|
||||
|
||||
router.get('/:itemId', verifyAccessToken, async (req: AuthRequest, res: Response) => {
|
||||
try {
|
||||
const userId = req.userId
|
||||
if (!userId) return res.status(401).json({ error: 'Unauthorized' })
|
||||
|
||||
const { itemId } = req.params
|
||||
if (!itemId) return res.status(400).json({ error: 'Missing itemId' })
|
||||
|
||||
const item = await ReviewItemModel.findOne({ _id: itemId, userId })
|
||||
if (!item) return res.status(404).json({ error: 'Item not found' })
|
||||
|
||||
const now = new Date()
|
||||
const due = item.srs_next_review && item.srs_next_review <= now
|
||||
|
||||
res.status(200).json({
|
||||
itemId: item._id,
|
||||
type: item.type,
|
||||
characters: item.characters,
|
||||
meanings: item.meanings,
|
||||
readings: item.readings,
|
||||
auxiliary_meanings: item.auxiliary_meanings,
|
||||
pronunciation_audios: item.pronunciation_audios ?? [],
|
||||
level: item.level,
|
||||
slug: item.slug,
|
||||
srs_score: item.srs_score ?? 0,
|
||||
srs_streak: item.srs_streak ?? 0,
|
||||
srs_ease_factor: item.srs_ease_factor ?? 2.5,
|
||||
srs_last_review: item.srs_last_review,
|
||||
srs_next_review: item.srs_next_review,
|
||||
srs_interval: item.srs_interval ?? 1,
|
||||
isDue: due,
|
||||
})
|
||||
} catch (error) {
|
||||
console.error('Error fetching item stats:', error)
|
||||
res.status(500).json({ error: 'Failed to fetch item stats' })
|
||||
}
|
||||
})
|
||||
|
||||
export default router as Router
|
||||
@@ -1,17 +0,0 @@
|
||||
import express, { type Router, type Request, type Response } from 'express'
|
||||
import { KanjiModel } from '../../../models/kanji.model.ts'
|
||||
|
||||
const router = express.Router()
|
||||
|
||||
|
||||
router.get('/', async (_req: Request, res: Response) => {
|
||||
try {
|
||||
const doc = await KanjiModel.find()
|
||||
res.json(doc)
|
||||
} catch (error) {
|
||||
console.error('Error fetching Kanji Subjects', error)
|
||||
res.status(500).json({ error: 'Failed to fetch Kanji Subjects' })
|
||||
}
|
||||
})
|
||||
|
||||
export default router as Router
|
||||
@@ -1,18 +0,0 @@
|
||||
import express, { type Router, type Request, type Response } from 'express'
|
||||
import { VocabularyModel } from '../../../models/vocabulary.model.ts'
|
||||
|
||||
const router = express.Router()
|
||||
|
||||
|
||||
router.get('/', async (_req: Request, res: Response) => {
|
||||
try {
|
||||
const doc = await VocabularyModel.find()
|
||||
|
||||
res.json(doc)
|
||||
} catch (error) {
|
||||
console.error('Error fetching API key:', error)
|
||||
res.status(500).json({ error: 'Failed to fetch API key' })
|
||||
}
|
||||
})
|
||||
|
||||
export default router as Router
|
||||
@@ -11,10 +11,9 @@ import { connectMongo } from './db/connect.ts'
|
||||
|
||||
import keyRouter from './api/v1/key/index.ts'
|
||||
import syncRouter from './api/v1/wanikani/sync.ts'
|
||||
import kanjiRouter from './api/v1/subject/kanji.ts'
|
||||
import vocabRouter from './api/v1/subject/vocab.ts'
|
||||
import authRouter from './api/v1/auth/index.ts'
|
||||
import userRoutes from './api/v1/user/index.ts'
|
||||
import subjectRoutes from './api/v1/subject/index.ts'
|
||||
|
||||
import { verifyAccessToken } from './middleware/auth.ts'
|
||||
|
||||
@@ -55,14 +54,12 @@ if (process.env.NODE_ENV === 'production') {
|
||||
})
|
||||
)
|
||||
}
|
||||
app.use(rateLimit({ windowMs: 15 * 60 * 1000, max: 100 }))
|
||||
|
||||
app.use('/api/v1/key', verifyAccessToken, keyRouter)
|
||||
app.use('/api/v1/subject/kanji', verifyAccessToken, kanjiRouter)
|
||||
app.use('/api/v1/subject/vocab', verifyAccessToken, vocabRouter)
|
||||
app.use('/api/v1/user', verifyAccessToken, userRoutes)
|
||||
app.use('/api/v1/wanikani', verifyAccessToken, syncRouter)
|
||||
app.use('/api/v1/auth', authRouter)
|
||||
app.use('/api/v1/review', verifyAccessToken, subjectRoutes)
|
||||
|
||||
const PORT = process.env.PORT || 3000
|
||||
connectMongo().then(() => {
|
||||
|
||||
@@ -1,15 +0,0 @@
|
||||
import mongoose from 'mongoose'
|
||||
import type { KanjiItem } from '../types/wanikani.ts'
|
||||
|
||||
const KanjiSchema = new mongoose.Schema<KanjiItem>({
|
||||
userId: { type: String, required: true },
|
||||
characters: String,
|
||||
meanings: Array,
|
||||
readings: Array,
|
||||
auxiliary_meanings: Array,
|
||||
level: Number,
|
||||
slug: String,
|
||||
srs_score: Number,
|
||||
})
|
||||
|
||||
export const KanjiModel = mongoose.model('Kanji', KanjiSchema)
|
||||
51
server/src/models/reviewitem.model.ts
Normal file
51
server/src/models/reviewitem.model.ts
Normal file
@@ -0,0 +1,51 @@
|
||||
import mongoose from 'mongoose'
|
||||
|
||||
export type ReviewItemType = 'kanji' | 'vocab'
|
||||
|
||||
const ReviewItemSchema = new mongoose.Schema({
|
||||
userId: { type: String, required: true },
|
||||
type: { type: String, enum: ['kanji', 'vocab'], required: true },
|
||||
id: { type: Number, required: true },
|
||||
|
||||
characters: String,
|
||||
meanings: Array,
|
||||
readings: { type: Array, default: [] },
|
||||
auxiliary_meanings: Array,
|
||||
level: Number,
|
||||
slug: String,
|
||||
|
||||
pronunciation_audios: { type: Array, default: [] },
|
||||
|
||||
srs: {
|
||||
jp_en_meaning: {
|
||||
streak: { type: Number, default: 0 },
|
||||
ease_factor: { type: Number, default: 2.5 },
|
||||
interval: { type: Number, default: 1 },
|
||||
next_review: { type: Date, default: () => new Date() },
|
||||
last_review: { type: Date, default: null },
|
||||
},
|
||||
jp_en_reading: {
|
||||
streak: { type: Number, default: 0 },
|
||||
ease_factor: { type: Number, default: 2.5 },
|
||||
interval: { type: Number, default: 1 },
|
||||
next_review: { type: Date, default: () => new Date() },
|
||||
last_review: { type: Date, default: null },
|
||||
},
|
||||
en_jp_writing: {
|
||||
streak: { type: Number, default: 0 },
|
||||
ease_factor: { type: Number, default: 2.5 },
|
||||
interval: { type: Number, default: 1 },
|
||||
next_review: { type: Date, default: () => new Date() },
|
||||
last_review: { type: Date, default: null },
|
||||
},
|
||||
writing_practice: {
|
||||
streak: { type: Number, default: 0 },
|
||||
ease_factor: { type: Number, default: 2.5 },
|
||||
interval: { type: Number, default: 1 },
|
||||
next_review: { type: Date, default: () => new Date() },
|
||||
last_review: { type: Date, default: null },
|
||||
},
|
||||
},
|
||||
})
|
||||
|
||||
export const ReviewItemModel = mongoose.model('ReviewItem', ReviewItemSchema)
|
||||
@@ -1,16 +0,0 @@
|
||||
import mongoose from 'mongoose'
|
||||
import type { VocabularyItem } from '../types/wanikani.ts'
|
||||
|
||||
const VocabSchema = new mongoose.Schema<VocabularyItem>({
|
||||
userId: { type: String, required: true },
|
||||
characters: String,
|
||||
meanings: Array,
|
||||
readings: Array,
|
||||
auxiliary_meanings: Array,
|
||||
pronunciation_audios: Array,
|
||||
level: Number,
|
||||
slug: String,
|
||||
srs_score: Number,
|
||||
})
|
||||
|
||||
export const VocabularyModel = mongoose.model('Vocabulary', VocabSchema)
|
||||
@@ -1,8 +1,6 @@
|
||||
import fetch from 'node-fetch'
|
||||
import { ApiKeyModel } from '../models/apikey.model.ts'
|
||||
import { AssignmentModel } from '../models/assignments.model.ts'
|
||||
import { KanjiModel } from '../models/kanji.model.ts'
|
||||
import { VocabularyModel } from '../models/vocabulary.model.ts'
|
||||
import { ReviewItemModel } from '../models/reviewitem.model.ts'
|
||||
|
||||
import type { KanjiItem, VocabularyItem } from '../types/wanikani.ts'
|
||||
|
||||
@@ -24,6 +22,7 @@ export interface WaniKaniSubject {
|
||||
level: number
|
||||
slug: string
|
||||
unlocked_at?: string
|
||||
subject_type: 'kanji' | 'vocabulary' | 'kana_vocabulary'
|
||||
}
|
||||
}
|
||||
|
||||
@@ -63,28 +62,56 @@ const fetchSubjects = async (
|
||||
return results
|
||||
}
|
||||
|
||||
const mapKanji = (item: WaniKaniSubject, userId: string): KanjiItem => ({
|
||||
userId: userId,
|
||||
characters: item.data.characters,
|
||||
meanings: item.data.meanings,
|
||||
readings: item.data.readings,
|
||||
auxiliary_meanings: item.data.auxiliary_meanings,
|
||||
level: item.data.level,
|
||||
slug: item.data.slug,
|
||||
srs_score: 0,
|
||||
})
|
||||
const mapToReviewItem = (item: WaniKaniSubject, userId: string) => {
|
||||
let type: 'kanji' | 'vocab'
|
||||
const subjectType = item.data.subject_type || item.object
|
||||
if (subjectType === 'kanji') type = 'kanji'
|
||||
else if (['vocabulary', 'kana_vocabulary'].includes(subjectType)) type = 'vocab'
|
||||
else throw new Error(`Unknown WaniKani subject type: ${subjectType}`)
|
||||
|
||||
const mapVocab = (item: WaniKaniSubject, userId: string): VocabularyItem => ({
|
||||
userId: userId,
|
||||
return {
|
||||
id: item.id,
|
||||
userId,
|
||||
type,
|
||||
characters: item.data.characters,
|
||||
meanings: item.data.meanings,
|
||||
readings: item.data.readings ?? [],
|
||||
auxiliary_meanings: item.data.auxiliary_meanings,
|
||||
auxiliary_meanings: item.data.auxiliary_meanings ?? [],
|
||||
pronunciation_audios: item.data.pronunciation_audios ?? [],
|
||||
level: item.data.level,
|
||||
slug: item.data.slug,
|
||||
srs_score: 0,
|
||||
})
|
||||
srs: {
|
||||
jp_en_meaning: {
|
||||
streak: 0,
|
||||
ease_factor: 2.5,
|
||||
interval: 1,
|
||||
next_review: new Date(),
|
||||
last_review: null,
|
||||
},
|
||||
jp_en_reading: {
|
||||
streak: 0,
|
||||
ease_factor: 2.5,
|
||||
interval: 1,
|
||||
next_review: new Date(),
|
||||
last_review: null,
|
||||
},
|
||||
en_jp_writing: {
|
||||
streak: 0,
|
||||
ease_factor: 2.5,
|
||||
interval: 1,
|
||||
next_review: new Date(),
|
||||
last_review: null,
|
||||
},
|
||||
writing_practice: {
|
||||
streak: 0,
|
||||
ease_factor: 2.5,
|
||||
interval: 1,
|
||||
next_review: new Date(),
|
||||
last_review: null,
|
||||
},
|
||||
},
|
||||
}
|
||||
}
|
||||
|
||||
export const syncWanikaniData = async (apiKey: string, userId: string): Promise<void> => {
|
||||
const headers = { Authorization: `Bearer ${apiKey}` }
|
||||
@@ -92,50 +119,48 @@ export const syncWanikaniData = async (apiKey: string, userId: string): Promise<
|
||||
try {
|
||||
await ApiKeyModel.updateOne(
|
||||
{},
|
||||
{ $set: { user: userId, apiKey: apiKey, lastUsed: new Date() } },
|
||||
{ $set: { userId: userId, apiKey: apiKey, lastUsed: new Date() } },
|
||||
{ upsert: true },
|
||||
)
|
||||
|
||||
const assignments = await fetchAllPages(`${WANIKANI_API_BASE}/assignments`, headers)
|
||||
|
||||
const unlockedKanjiSubjectIds: number[] = []
|
||||
const unlockedVocabSubjectIds: number[] = []
|
||||
const unlockedKanjiIds: number[] = []
|
||||
const unlockedVocabIds: number[] = []
|
||||
|
||||
for (const a of assignments) {
|
||||
const assignmentData = a.data as any
|
||||
|
||||
if (!assignmentData.unlocked_at) continue
|
||||
|
||||
if (assignmentData.subject_type === 'kanji') {
|
||||
unlockedKanjiSubjectIds.push(assignmentData.subject_id)
|
||||
} else if (['vocabulary', 'kana_vocabulary'].includes(assignmentData.subject_type)) {
|
||||
unlockedVocabSubjectIds.push(assignmentData.subject_id)
|
||||
}
|
||||
if (assignmentData.subject_type === 'kanji') unlockedKanjiIds.push(assignmentData.subject_id)
|
||||
else if (['vocabulary', 'kana_vocabulary'].includes(assignmentData.subject_type)) unlockedVocabIds.push(assignmentData.subject_id)
|
||||
}
|
||||
|
||||
await AssignmentModel.updateOne(
|
||||
{ userId: userId, subject_type: 'kanji' },
|
||||
{ $set: { subject_ids: unlockedKanjiSubjectIds } },
|
||||
{ userId, subject_type: 'kanji' },
|
||||
{ $set: { subject_ids: unlockedKanjiIds } },
|
||||
{ upsert: true },
|
||||
)
|
||||
|
||||
await AssignmentModel.updateOne(
|
||||
{ userId: userId, subject_type: 'vocabulary' },
|
||||
{ $set: { subject_ids: unlockedVocabSubjectIds } },
|
||||
{ userId, subject_type: 'vocab' },
|
||||
{ $set: { subject_ids: unlockedVocabIds } },
|
||||
{ upsert: true },
|
||||
)
|
||||
|
||||
const existingKanjiSlugs = new Set((await KanjiModel.find({}, { slug: 1 })).map(k => k.slug))
|
||||
const kanjiSubjects = await fetchSubjects(unlockedKanjiSubjectIds, headers)
|
||||
const newKanji = kanjiSubjects.filter(s => !existingKanjiSlugs.has(s.data.slug))
|
||||
if (newKanji.length > 0) await KanjiModel.insertMany(newKanji.map(k => mapKanji(k, userId)))
|
||||
// Fetch and insert new review items
|
||||
const kanjiSubjects = await fetchSubjects(unlockedKanjiIds, headers)
|
||||
const vocabSubjects = await fetchSubjects(unlockedVocabIds, headers)
|
||||
|
||||
const existingVocabSlugs = new Set((await VocabularyModel.find({}, { slug: 1 })).map(v => v.slug))
|
||||
const vocabSubjects = await fetchSubjects(unlockedVocabSubjectIds, headers)
|
||||
const newVocab = vocabSubjects.filter(s => !existingVocabSlugs.has(s.data.slug))
|
||||
if (newVocab.length > 0) await VocabularyModel.insertMany(newVocab.map(v => mapVocab(v, userId)))
|
||||
const allSlugs = new Set((await ReviewItemModel.find({ userId }, { slug: 1 })).map(r => r.slug))
|
||||
|
||||
console.log('✅ Sync complete')
|
||||
const newItems = [...kanjiSubjects, ...vocabSubjects]
|
||||
.filter(s => !allSlugs.has(s.data.slug))
|
||||
.map(s => mapToReviewItem(s, userId))
|
||||
|
||||
if (newItems.length > 0) await ReviewItemModel.insertMany(newItems)
|
||||
|
||||
console.log('✅ WaniKani sync complete')
|
||||
} catch (err) {
|
||||
console.error('❌ Error syncing WaniKani data:', err)
|
||||
throw err
|
||||
|
||||
Reference in New Issue
Block a user