v1

client/src/pages/vocab.vue

@@ -0,0 +1,297 @@
+<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>