Merge pull request 'forgot stuff' (#3) from scoring_system into main

Reviewed-on: #3

client/package.json

@@ -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",

client/pnpm-lock.yaml

@@ -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

client/src/composables/srs.scoring.ts

@@ -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,
+}

client/src/composables/subject.ts

@@ -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
-	}
-}

client/src/pages/all.vue

@@ -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() {
+const optionsCalculated = ref({
-  if (!reviews.value) return
+  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
+  allDone.value = false
-  inputMode.value = next.mode
+  subject.value = next
 
-  if (direction.value === 'jp->en') {
+  if (optionsCalculated.value.direction === 'en->jp' && optionsCalculated.value.writingMode === 'kanji')
-    character.value = subject.value.characters
+    inputMode.value = 'kanji'
-  } else {
+  else if (subject.value.mode === 'jp_en_reading' || optionsCalculated.value.direction === 'en->jp')
-    character.value = subject.value.meanings
+    inputMode.value = 'writing'
-      .filter((m: any) => m.primary)
+  else
-      .map((m: any) => m.meaning)
+    inputMode.value = 'meaning'
-      .join(', ')
-  }
 
-  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()
-
+  isCorrect.value = subject.value.answers.some(a => a.trim().toLowerCase() === userAnswer)
-  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()
+  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>

client/src/pages/index.vue

@@ -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() {
+import { getStatistics } from '@/composables/srs.scoring'
-  if (!reviews.value) return
+
-  stats.value = reviews.value.getStats()
+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>

client/src/pages/kanji.vue

@@ -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>

client/src/pages/login.vue

@@ -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>

client/src/pages/trainer.vue

@@ -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>

client/src/pages/vocab.vue

@@ -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>

client/src/pages/writing.vue

@@ -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 options = {
-  const next = reviews.value.nextSubject()
+    subject: ['kanji'],
-  if (!next) return
+    mode: ['meaning'], // request the meaning since we draw the kanji
-  subject.value = next.subject
+    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.answers[0]
-  isCorrect.value = kanji === subject.value.characters
+  resultMessage.value = isCorrect.value ? 'Correct!' : `Wrong! Answer: ${subject.value.answers[0]}`
-  resultMessage.value = isCorrect.value ? 'Correct!' : `Wrong! Answer: ${subject.value.characters}`
   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(() => {

client/src/router/index.ts

@@ -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

client/src/stores/auth.ts

@@ -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
 		}
 	}
 

client/src/typed-router.d.ts

@@ -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': {
+    'src/pages/trainer.vue': {
-      routes: '/vocab'
+      routes: '/trainer'
       views: never
     }
     'src/pages/writing.vue': {

server/src/api/v1/auth/index.ts

@@ -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, {
+		const refreshMaxAge = remember
-			httpOnly: true, sameSite: 'lax', secure: process.env.NODE_ENV !== 'dev', maxAge: 7 * 24 * 3600 * 1000,
+			? 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 payload = jwt.verify(token, REFRESH_TOKEN_SECRET) as any
-		const user = await UserModel.findById(payload.sub)
+		const user = await UserModel.findById(payload.id)
-		if (!user || !user.refreshToken === token) return res.status(403).json({ error: 'Invalid refresh token' })
+		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, {
+		res.cookie('refreshToken', newRefreshToken, {
-			httpOnly: true, sameSite: 'lax', secure: process.env.NODE_ENV !== 'dev', maxAge: 7 * 24 * 3600 * 1000,
+			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 })
 })
 

server/src/api/v1/subject/index.ts

@@ -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

server/src/api/v1/subject/kanji.ts

@@ -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

server/src/api/v1/subject/vocab.ts

@@ -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

server/src/index.ts

@@ -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(() => {

server/src/models/kanji.model.ts

@@ -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)

server/src/models/reviewitem.model.ts

@@ -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)

server/src/models/vocabulary.model.ts

@@ -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)

server/src/services/wanikaniService.ts

@@ -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 { ReviewItemModel } from '../models/reviewitem.model.ts'
-import { VocabularyModel } from '../models/vocabulary.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 => ({
+const mapToReviewItem = (item: WaniKaniSubject, userId: string) => {
-	userId: userId,
+	let type: 'kanji' | 'vocab'
-	characters: item.data.characters,
+	const subjectType = item.data.subject_type || item.object
-	meanings: item.data.meanings,
+	if (subjectType === 'kanji') type = 'kanji'
-	readings: item.data.readings,
+	else if (['vocabulary', 'kana_vocabulary'].includes(subjectType)) type = 'vocab'
-	auxiliary_meanings: item.data.auxiliary_meanings,
+	else throw new Error(`Unknown WaniKani subject type: ${subjectType}`)
-	level: item.data.level,
-	slug: item.data.slug,
-	srs_score: 0,
-})
 
-const mapVocab = (item: WaniKaniSubject, userId: string): VocabularyItem => ({
+	return {
-	userId: userId,
+		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 unlockedKanjiIds: number[] = []
-		const unlockedVocabSubjectIds: 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') {
+			if (assignmentData.subject_type === 'kanji') unlockedKanjiIds.push(assignmentData.subject_id)
-				unlockedKanjiSubjectIds.push(assignmentData.subject_id)
+			else if (['vocabulary', 'kana_vocabulary'].includes(assignmentData.subject_type)) unlockedVocabIds.push(assignmentData.subject_id)
-			} else if (['vocabulary', 'kana_vocabulary'].includes(assignmentData.subject_type)) {
-				unlockedVocabSubjectIds.push(assignmentData.subject_id)
-			}
 		}
 
 		await AssignmentModel.updateOne(
-			{ userId: userId, subject_type: 'kanji' },
+			{ userId, subject_type: 'kanji' },
-			{ $set: { subject_ids: unlockedKanjiSubjectIds } },
+			{ $set: { subject_ids: unlockedKanjiIds } },
 			{ upsert: true },
 		)
 
 		await AssignmentModel.updateOne(
-			{ userId: userId, subject_type: 'vocabulary' },
+			{ userId, subject_type: 'vocab' },
-			{ $set: { subject_ids: unlockedVocabSubjectIds } },
+			{ $set: { subject_ids: unlockedVocabIds } },
 			{ upsert: true },
 		)
 
-		const existingKanjiSlugs = new Set((await KanjiModel.find({}, { slug: 1 })).map(k => k.slug))
+		// Fetch and insert new review items
-		const kanjiSubjects = await fetchSubjects(unlockedKanjiSubjectIds, headers)
+		const kanjiSubjects = await fetchSubjects(unlockedKanjiIds, headers)
-		const newKanji = kanjiSubjects.filter(s => !existingKanjiSlugs.has(s.data.slug))
+		const vocabSubjects = await fetchSubjects(unlockedVocabIds, headers)
-		if (newKanji.length > 0) await KanjiModel.insertMany(newKanji.map(k => mapKanji(k, userId)))
 
-		const existingVocabSlugs = new Set((await VocabularyModel.find({}, { slug: 1 })).map(v => v.slug))
+		const allSlugs = new Set((await ReviewItemModel.find({ userId }, { slug: 1 })).map(r => r.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)))
 
-		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