From 93159b0f9e719ea1284db6dc545522526abf08aa Mon Sep 17 00:00:00 2001
From: zyronon <zyronon@163.com>
Date: Sun, 6 Aug 2023 16:14:06 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E5=BF=AB=E6=8D=B7=E9=94=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue | 51 ++++++++++++++++++++++++++++++++-------------------
 1 file changed, 32 insertions(+), 19 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index d39ce5c4..03313809 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import {onMounted, onUnmounted, watch} from "vue"
-import NCE_2 from './assets/dicts/NCE_2.json'
 import 快速打字的机械键盘声音Mp3 from './assets/sound/key-sounds/快速打字的机械键盘声音.mp3'
 import 键盘快速打字的声音Mp3 from './assets/sound/key-sounds/键盘快速打字的声音.mp3'
 import 电话打字的声音Mp3 from './assets/sound/key-sounds/电话打字的声音.mp3'
@@ -14,37 +13,40 @@ import correct from './assets/sound/correct.wav'
 import {$ref} from "vue/macros"
 import {useSound} from "@/hooks/useSound.ts"
 import {useBaseStore} from "@/stores/base.ts"
-import {Config, Word} from "@/types.ts"
 import {SaveKey} from "./types";
 
 let input = $ref('')
 let wrong = $ref('')
+let showFullWord = $ref(false)
+let isDictation = $ref(true)
 let activeIndex = $ref(-1)
-let config: Config = $ref({
-  newWords: [],
-  skipWords: [],
-  skipWordNames: [],
-  dict: 'nce2',
-  chapterIndex: 0,
-  wordIndex: 0,
-})
-
 const store = useBaseStore()
 
-// const [play, setAudio] = useSound([机械0, 机械1, 机械2, 机械3], 1)
-const [play, setAudio] = useSound([老式机械], 3)
+const [play, setAudio] = useSound([机械0, 机械1, 机械2, 机械3], 1)
+// const [play, setAudio] = useSound([老式机械], 3)
 // const [play, setAudio] = useSound([电话打字的声音Mp3], 3)
 const [playBeep] = useSound([beep], 1)
 const [playCorrect] = useSound([correct], 1)
+const keyMap = {
+  Show: 'Escape',
+  Ignore: 'Tab',
+  Remove: '`',
+  Collect: 'Enter',
+}
 
+const restWord = $computed(() => {
+  return store.word.name.slice(input.length + wrong.length)
+})
 onMounted(() => {
   store.init()
   window.addEventListener('keydown', onKeyDown)
+  window.addEventListener('keyup', onKeyUp)
 })
 
 onUnmounted(() => {
   // console.log('onUnmounted')
   window.removeEventListener('keydown', onKeyDown)
+  window.removeEventListener('keyup', onKeyUp)
 })
 
 watch(store.$state, (n) => {
@@ -67,10 +69,13 @@ function next() {
   if (store.skipWordNames.includes(store.word.name)) {
     next()
   }
-
   wrong = input = ''
 }
 
+function onKeyUp(e: KeyboardEvent) {
+  showFullWord = false
+}
+
 async function onKeyDown(e: KeyboardEvent) {
   if (e.keyCode >= 65 && e.keyCode <= 90 || e.code === 'Space') {
     let letter = e.key.toLowerCase()
@@ -100,13 +105,13 @@ async function onKeyDown(e: KeyboardEvent) {
           input = input.slice(0, -1)
         }
         break
-      case 'Enter':
+      case keyMap.Collect:
         if (!store.newWords.find(v => v.name === store.word.name)) {
           store.newWords.push(store.word)
         }
         activeIndex = 1
         break
-      case '`':
+      case keyMap.Remove:
         if (!store.skipWordNames.includes(store.word.name)) {
           store.skipWords.push(store.word)
           store.skipWordNames = store.skipWords.map(v => v.name)
@@ -114,11 +119,14 @@ async function onKeyDown(e: KeyboardEvent) {
         activeIndex = 0
         next()
         break
-      case 'Tab':
+      case keyMap.Ignore:
         e.preventDefault()
         activeIndex = 2
         next()
         break
+      case keyMap.Show:
+        showFullWord = true
+        break
     }
     setTimeout(() => {
       activeIndex = -1
@@ -150,7 +158,12 @@ function playAudio() {
       <div class="word" :class="wrong&&'is-wrong'">
         <span class="input" v-if="input">{{ input }}</span>
         <span class="wrong" v-if="wrong">{{ wrong }}</span>
-        <span class="letter">{{ store.word.name.slice(input.length + wrong.length) }}</span>
+        <template v-if="isDictation">
+          <span class="letter" v-if="!showFullWord"
+                @mouseenter="showFullWord = true">{{ restWord.split('').map(v => '_').join('') }}</span>
+          <span class="letter" v-else @mouseleave="showFullWord = false">{{ restWord }}</span>
+        </template>
+        <span class="letter" v-else>{{ restWord }}</span>
       </div>
       <div class="audio" @click="playAudio">播放</div>
     </div>
@@ -214,7 +227,7 @@ function playAudio() {
       font-size: 48rem;
       line-height: 1;
       font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;
-      letter-spacing: 2.5rem;
+      letter-spacing: 5rem;
 
       .input {
         color: rgba(74, 222, 128, 0.8);