japanese-srs-trainer-wanikani/client/src/pages/vocab.vue

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