From 6be8ddeca94896b0789b03ba13409c5b41af071a Mon Sep 17 00:00:00 2001 From: zyronon Date: Sun, 15 Oct 2023 02:12:21 +0800 Subject: [PATCH] v1 version --- Note.md | 4 +- src/components/Fireworks.vue | 6 +- src/components/Practice/Practice.vue | 6 +- src/components/Practice/TypeWord.vue | 61 +++++-- src/components/Toolbar/DictModal.vue | 38 ++--- src/components/Toolbar/RepeatSetting.vue | 2 +- src/components/Toolbar/Toolbar.vue | 2 +- src/components/Toolbar/TranslateSetting.vue | 5 +- src/components/Toolbar/VolumeSetting.vue | 29 +++- src/components/WordItem.vue | 4 + src/components/WordListModal.vue | 3 + src/hooks/sound.ts | 167 +++++++++++--------- src/stores/base.ts | 6 +- src/stores/setting.ts | 2 + 14 files changed, 204 insertions(+), 131 deletions(-) diff --git a/Note.md b/Note.md index bd132e4b..c3e75098 100644 --- a/Note.md +++ b/Note.md @@ -41,4 +41,6 @@ A cold welcome 有bug [EditAbleText.vue](src%2Fcomponents%2FEditAbleText.vue) 不能自动聚焦 -在文章模式下，背单词时不能调出面板 \ No newline at end of file +在文章模式下，背单词时不能调出面板 + +单词发音，点击第二遍时减速 \ No newline at end of file diff --git a/src/components/Fireworks.vue b/src/components/Fireworks.vue index a1acf0fc..91392ca3 100644 --- a/src/components/Fireworks.vue +++ b/src/components/Fireworks.vue @@ -12,8 +12,8 @@ import shotfire from '@/assets/sound/shotfire.mp3' import {useSound} from "@/hooks/sound.ts"; const canvas = $ref() -const [playBoom] = useSound([boom], 3) -const [playShotfire] = useSound([shotfire], 3) +const {play: playBoom} = useSound([boom], 3) +const {play: playShotFire} = useSound([shotfire], 3) onMounted(() => { let ctx = canvas.getContext("2d"); @@ -120,7 +120,7 @@ onMounted(() => { this.dead = false; this.ba = getRandom(80, 200); - // playShotfire() + // playShotFire() } _move() { diff --git a/src/components/Practice/Practice.vue b/src/components/Practice/Practice.vue index 0371c5ee..5f9068cf 100644 --- a/src/components/Practice/Practice.vue +++ b/src/components/Practice/Practice.vue @@ -58,7 +58,9 @@ watch(() => store.load, n => { watch([ () => store.current.index, () => store.current.dictType, - () => store.currentDict.chapterIndex], n => { + () => store.currentDict.chapterIndex, + () => store.currentDict.chapterWordNumber, +], n => { getCurrentPractice() }) @@ -130,7 +132,7 @@ function getCurrentPractice() { } } else { wordData.words = cloneDeep(store.chapter) - wordData.index = store.currentDict.chapterWordIndex + wordData.index = 0 console.log('wordData', wordData) } } diff --git a/src/components/Practice/TypeWord.vue b/src/components/Practice/TypeWord.vue index edd852ee..d40ca2b0 100644 --- a/src/components/Practice/TypeWord.vue +++ b/src/components/Practice/TypeWord.vue @@ -36,6 +36,7 @@ let input = $ref('') let wrong = $ref('') let showFullWord = $ref(false) let activeBtnIndex = $ref(-1) +let wordRepeatCount = $ref(0) const store = useBaseStore() const practiceStore = usePracticeStore() const settingStore = useSettingStore() @@ -64,8 +65,11 @@ watch(() => props.words, () => { watch(() => data.index, (n) => { wrong = input = '' practiceStore.index = n - playWordAudio(word.name) - volumeIconRef?.play() + wordRepeatCount = 0 + if (settingStore.wordSound) { + playWordAudio(word.name) + volumeIconRef?.play() + } }) const word = $computed(() => { @@ -135,14 +139,10 @@ function next(isTyping: boolean = true) { next() } } - wrong = input = '' } function prev() { data.index-- - playWordAudio(word.name) - volumeIconRef?.play() - wrong = input = '' } function ignore() { @@ -182,6 +182,18 @@ function onKeyUp(e: KeyboardEvent) { showFullWord = false } +function repeat() { + setTimeout(() => { + wrong = input = '' + wordRepeatCount++ + + if (settingStore.wordSound) { + playWordAudio(word.name) + volumeIconRef?.play() + } + }, settingStore.waitTimeForChangeWord) +} + async function onKeyDown(e: KeyboardEvent) { //TODO 还有横杠 if ((e.keyCode >= 65 && e.keyCode <= 90) || e.code === 'Space') { @@ -192,11 +204,7 @@ async function onKeyDown(e: KeyboardEvent) { } else { isWrong = (input + letter) !== word.name.slice(0, input.length + 1) } - if (!isWrong) { - input += letter - wrong = '' - playKeyboardAudio() - } else { + if (isWrong) { if (!store.wrongWordDict.originWords.find((v: Word) => v.name.toLowerCase() === word.name.toLowerCase())) { store.wrongWordDict.originWords.push(word) store.wrongWordDict.words.push(word) @@ -212,10 +220,26 @@ async function onKeyDown(e: KeyboardEvent) { setTimeout(() => { wrong = '' }, 500) + } else { + input += letter + wrong = '' + playKeyboardAudio() } if (input.toLowerCase() === word.name.toLowerCase()) { playCorrect() - setTimeout(next, settingStore.waitTimeForChangeWord) + if (settingStore.repeatCount == 100) { + if (settingStore.repeatCustomCount === wordRepeatCount + 1) { + setTimeout(next, settingStore.waitTimeForChangeWord) + } else { + repeat() + } + } else { + if (settingStore.repeatCount === wordRepeatCount + 1) { + setTimeout(next, settingStore.waitTimeForChangeWord) + } else { + repeat() + } + } } } else { // console.log('e', e) @@ -262,7 +286,7 @@ useOnKeyboardEventListener(onKeyDown, onKeyUp)
{{ prevWord.name }}
-
{{ prevWord.trans.join('；') }}
+
{{ prevWord.trans.join('；') }}
@@ -271,14 +295,17 @@ useOnKeyboardEventListener(onKeyDown, onKeyUp) v-if="nextWord">
{{ nextWord.name }}
-
{{ nextWord.trans.join('；') }}
+
{{ nextWord.trans.join('；') }}
{{ word.trans.join('；') }}
@@ -299,7 +326,7 @@ useOnKeyboardEventListener(onKeyDown, onKeyUp)
-
{{ word.usphone }}
+
{{ settingStore.wordSoundType === 'us' ? word.usphone : word.ukphone }}
() const base = useBaseStore() +const settingStore = useSettingStore() let currentLanguage = $ref('en') let step = $ref(1) @@ -241,34 +243,34 @@ const dictIsArticle = $computed(() => {
学习模式
- - 再认 - 拼写 + + 再认 + 拼写
单词发音
- - 美音 - 英音 - -
-
-
-
词序
-
- - 随机 - 正常 + + 美音 + 英音
+ + + + + + + + +
单词自动发音
- {
是否显示翻译
- {
忽略大小写
- {
diff --git a/src/components/Toolbar/Toolbar.vue b/src/components/Toolbar/Toolbar.vue index c712961d..f7c7b718 100644 --- a/src/components/Toolbar/Toolbar.vue +++ b/src/components/Toolbar/Toolbar.vue @@ -76,7 +76,7 @@ watch(() => settingStore.showToolbar, n => { -
ok
+ diff --git a/src/components/Toolbar/TranslateSetting.vue b/src/components/Toolbar/TranslateSetting.vue index e9d026ac..369191d8 100644 --- a/src/components/Toolbar/TranslateSetting.vue +++ b/src/components/Toolbar/TranslateSetting.vue @@ -20,8 +20,9 @@ let showCustomTranslateModal = $ref(false) useWindowClick(() => show = false) function toggle() { - if (!show) emitter.emit(EventKey.closeOther) - show = !show + // if (!show) emitter.emit(EventKey.closeOther) + // show = !show + settingStore.translate = !settingStore.translate } let translateType = $ref(0) diff --git a/src/components/Toolbar/VolumeSetting.vue b/src/components/Toolbar/VolumeSetting.vue index dfd9f11b..b38ff173 100644 --- a/src/components/Toolbar/VolumeSetting.vue +++ b/src/components/Toolbar/VolumeSetting.vue @@ -39,7 +39,7 @@ function toggle() {
@@ -53,7 +53,7 @@ function toggle() {
- +
- +
- + + + +
+ + + + + + + + + +
@@ -122,7 +133,9 @@ function toggle() { @import "@/assets/css/style"; .wrapper { + width: 100rem; position: relative; + text-align: right; } .setting { diff --git a/src/components/WordItem.vue b/src/components/WordItem.vue index 2de07d03..a66f0412 100644 --- a/src/components/WordItem.vue +++ b/src/components/WordItem.vue @@ -55,6 +55,10 @@ const emit = defineEmits<{ &.active { background: $second; color: white; + + .phonetic { + color: white!important; + } } &:hover { diff --git a/src/components/WordListModal.vue b/src/components/WordListModal.vue index e443e8e2..1c363270 100644 --- a/src/components/WordListModal.vue +++ b/src/components/WordListModal.vue @@ -7,6 +7,7 @@ import {$ref} from "vue/macros"; import {onMounted, onUnmounted} from "vue"; import {usePlayWordAudio} from "@/hooks/sound.ts"; import {emitter, EventKey} from "@/utils/eventBus.ts"; +import WordItem from "@/components/WordItem.vue"; let show = $ref(false) let list = $ref([]) @@ -50,6 +51,8 @@ onUnmounted(() => {
+ +
diff --git a/src/hooks/sound.ts b/src/hooks/sound.ts index a079bc10..1bca9d61 100644 --- a/src/hooks/sound.ts +++ b/src/hooks/sound.ts @@ -4,115 +4,132 @@ import {PronunciationApi} from "@/types.ts"; import beep from "@/assets/sound/beep.wav"; import correct from "@/assets/sound/correct.wav"; -export function useSound(urlList?: string[], num?: number) { - let audioList: HTMLAudioElement[] = $ref([]) - let audioLength = $ref(1) - let index = $ref(0) +export function useSound(audioSrcList?: string[], audioFileLength?: number) { + let audioList: HTMLAudioElement[] = $ref([]) + let audioLength = $ref(1) + let index = $ref(0) - onMounted(() => { - if (urlList) setAudio(urlList, num) - }) + onMounted(() => { + if (audioSrcList) setAudio(audioSrcList, audioFileLength) + }) - function setAudio(srcList2: string[], num2?: number) { - if (num2) audioLength = num2 - audioList = [] - for (let i = 0; i < audioLength; i++) { - srcList2.map(src => audioList.push(new Audio(src))) - } - index = 0 + function setAudio(audioSrcList2: string[], audioFileLength2?: number) { + if (audioFileLength2) audioLength = audioFileLength2 + audioList = [] + for (let i = 0; i < audioLength; i++) { + audioSrcList2.map(src => audioList.push(new Audio(src))) } + index = 0 + } - function play() { - index++ - if (audioList.length > 1 && audioList.length !== audioLength) { - audioList[index % audioList.length].play() - } else { - audioList[index % audioLength].play() - } + function play() { + index++ + if (audioList.length > 1 && audioList.length !== audioLength) { + audioList[index % audioList.length].play() + } else { + audioList[index % audioLength].play() } + } - return [ - play, - setAudio - ] + return {play, setAudio} } export function usePlayKeyboardAudio() { - const settingStore = useSettingStore() - const [playKeyboardAudio, setAudio] = useSound() + const settingStore = useSettingStore() + const {play, setAudio} = useSound() - watchEffect(() => { - let urlList = getAudioFileUrl(settingStore.keyboardSoundFile) - setAudio(urlList, urlList.length === 1 ? 3 : 1) - }) - return playKeyboardAudio + watchEffect(() => { + let urlList = getAudioFileUrl(settingStore.keyboardSoundFile) + setAudio(urlList, urlList.length === 1 ? 3 : 1) + }) + + function playAudio() { + if (settingStore.keyboardSound) { + play() + } + } + + return playAudio } export function usePlayBeep() { - return useSound([beep], 1)[0] + const settingStore = useSettingStore() + const {play} = useSound([beep], 1) + + function playAudio() { + if (settingStore.effectSound) { + play() + } + } + + return playAudio } export function usePlayCorrect() { - return useSound([correct], 1)[0] + const settingStore = useSettingStore() + const {play} = useSound([correct], 1) + + function playAudio() { + if (settingStore.effectSound) { + play() + } + } + + return playAudio } export function usePlayWordAudio() { - const audio = $ref(new Audio()) + const settingStore = useSettingStore() + const audio = $ref(new Audio()) - function generateWordSoundSrc(word: string, pronunciation: string) { - switch (pronunciation) { - case 'uk': - return `${PronunciationApi}${word}&type=1` - case 'us': - return `${PronunciationApi}${word}&type=2` - } + function playAudio(word: string) { + if (settingStore.wordSoundType === 'uk') { + audio.src = `${PronunciationApi}${word}&type=1` + } else if (settingStore.wordSoundType === 'us') { + audio.src = `${PronunciationApi}${word}&type=2` } + audio.play() + } - function playWordAudio(word: string) { - audio.src = generateWordSoundSrc(word, 'us') - audio.play() - } - - return playWordAudio + return playAudio } export function usePlayAudio(url: string) { - new Audio(url).play().then(r => void 0) + new Audio(url).play().then(r => void 0) } export function getAudioFileUrl(name: string) { - if (name === '机械') { - return [ - `/sound/key-sounds/jixie/机械0.mp3`, - `/sound/key-sounds/jixie/机械1.mp3`, - `/sound/key-sounds/jixie/机械2.mp3`, - `/sound/key-sounds/jixie/机械3.mp3`, - ] - } else { - return [`/sound/key-sounds/${name}.mp3`] - } + if (name === '机械') { + return [ + `/sound/key-sounds/jixie/机械0.mp3`, + `/sound/key-sounds/jixie/机械1.mp3`, + `/sound/key-sounds/jixie/机械2.mp3`, + `/sound/key-sounds/jixie/机械3.mp3`, + ] + } else { + return [`/sound/key-sounds/${name}.mp3`] + } } - export function useWatchAllSound() { - const settingStore = useSettingStore() + const settingStore = useSettingStore() - watch([ - () => settingStore.wordSound, - () => settingStore.keyboardSound, - () => settingStore.translateSound, - () => settingStore.effectSound, - ], (n) => { - settingStore.allSound = n.some(v => v); - }) + watch([ + () => settingStore.wordSound, + () => settingStore.keyboardSound, + () => settingStore.translateSound, + () => settingStore.effectSound, + ], (n) => { + settingStore.allSound = n.some(v => v); + }) } export function useChangeAllSound(e: boolean) { - const settingStore = useSettingStore() + const settingStore = useSettingStore() - settingStore.allSound = e - settingStore.wordSound = e - settingStore.keyboardSound = e - settingStore.translateSound = e - settingStore.effectSound = e + settingStore.allSound = e + settingStore.wordSound = e + settingStore.keyboardSound = e + settingStore.translateSound = e + settingStore.effectSound = e } \ No newline at end of file diff --git a/src/stores/base.ts b/src/stores/base.ts index a73ac14c..dce56686 100644 --- a/src/stores/base.ts +++ b/src/stores/base.ts @@ -100,9 +100,9 @@ export const useBaseStore = defineStore('base', { } ], current: { - // dictType: DictType.publicDict, - dictType: DictType.publicArticle, - index: 0, + dictType: DictType.publicDict, + // dictType: DictType.publicArticle, + index: 1, editIndex: 0, repeatNumber: 0, }, diff --git a/src/stores/setting.ts b/src/stores/setting.ts index 90c92451..fd53096c 100644 --- a/src/stores/setting.ts +++ b/src/stores/setting.ts @@ -8,6 +8,7 @@ export interface SettingState { wordSound: boolean, wordSoundVolume: number, wordSoundSpeed: number, + wordSoundType: string, keyboardSound: boolean, keyboardSoundVolume: number, keyboardSoundFile: string, @@ -43,6 +44,7 @@ export const useSettingStore = defineStore('setting', { wordSound: true, wordSoundVolume: 100, wordSoundSpeed: 1, + wordSoundType: 'us', keyboardSound: true, keyboardSoundVolume: 100, keyboardSoundFile: '老式机械',