Skip to content

Commit 04e7889

Browse files
author
IFramex
committed
google api pronunsation, ts
1 parent 30f49b3 commit 04e7889

File tree

3 files changed

+123
-71
lines changed

3 files changed

+123
-71
lines changed

‎src/components/words/Accordion.vue

Lines changed: 85 additions & 71 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
<div class="accordion__form">
99
<div v-for="(words, index) of currentSortWords" :key="words.english" class="accordion__item">
1010
<label :for="'inputElement' + index">{{ words.russian }} - </label>
11-
<input :id="'inputElement' + index" :ref="'inputInfo' + index" type="text" @keyup.enter="checkWord(words, index)" />
11+
<input :id="'inputElement' + index" :ref="el => { if (el) inputsInfo[index] = el }" type="text" @keyup.enter="checkWord(words, index)" />
1212
<button v-if="!doneWords.some(wordItem => wordItem.translated == words.english && wordItem.original == words.russian)" @click="checkWord(words, index)">
1313
<img src="@/assets/check.png" />
1414
</button>
@@ -30,7 +30,7 @@
3030
Перевернуть гармошку
3131
</button>
3232
<router-link :to="{ name: 'Account' }">
33-
<button class="accordion__send profile__run" @click="rotateWords">
33+
<button class="accordion__send profile__run">
3434
Завершить
3535
</button>
3636
</router-link>
@@ -40,103 +40,117 @@
4040
</div>
4141
</template>
4242

43-
<script>
43+
<script lang="ts">
4444
import "./scss/accordion/Accordion.scss"
45+
import { SpeechSythesis } from "@/models/speechSythesis"
46+
import { doneWords } from "./types/accordion.types"
47+
import { computed, defineComponent, ref } from "vue"
48+
import { WordInterface } from "@/models/words"
4549
46-
export default {
50+
// isRotate - true - en | !isRotate - false - ru
51+
export default defineComponent({
4752
name: "Accordion",
4853
props: {
49-
currentWords: Array,
54+
currentWords: Array as WordInterface[] | any
5055
},
51-
data() {
52-
return {
53-
currentInputWord: "",
54-
doneWords: [],
55-
errorWords: [],
56-
isAnswer: [],
57-
checkedAnswers: [],
58-
isRotate: false,
59-
}
60-
},
61-
computed: {
62-
currentSortWords() {
63-
const currentWords = [...this.currentWords]
64-
if (!this.isRotate) {
65-
currentWords.map(word => {
56+
setup(props) {
57+
const currentInputWord = ref("")
58+
const doneWords = ref<doneWords[]>([])
59+
const errorWords = ref([])
60+
const isAnswer = ref<string[]>([])
61+
const checkedAnswers = ref([])
62+
const isRotate = ref(false)
63+
const inputsInfo = ref([])
64+
65+
const currentSortWords = computed(() => {
66+
const currentWords: WordInterface[] = [...props.currentWords]
67+
if (!isRotate.value) {
68+
currentWords.map((word: any) => {
6669
const tempRus = word.russian
6770
word.russian = word.english
6871
word.english = tempRus
6972
})
7073
} else {
71-
currentWords.map(word => {
74+
currentWords.map((word: any) => {
7275
const tempEn = word.english
7376
word.english = word.russian
7477
word.russian = tempEn
7578
})
7679
}
7780
return currentWords.sort(() => Math.random() - 0.5).reverse()
78-
},
79-
},
80-
methods: {
81-
addAnswer(words) {
82-
this.isAnswer.push(words)
83-
},
84-
deleteAnswer(words) {
85-
const isIndex = this.isAnswer.findIndex(item => item == words)
86-
if (isIndex != -1) this.isAnswer.splice(isIndex, 1)
87-
},
88-
checkWord(word, index) {
89-
const value = this.$refs["inputInfo" + index.toString()].value
90-
if (
91-
word.english
92-
.trimStart()
93-
.trimEnd()
94-
.toLowerCase() ==
95-
value
96-
.trimStart()
97-
.trimEnd()
98-
.toLowerCase()
99-
) {
100-
this.$refs["inputInfo" + index.toString()].disabled = true
101-
const indexError = this.errorWords.indexOf(word.id)
102-
if (indexError != -1) this.errorWords.splice(indexError, 1)
81+
})
10382
104-
this.deleteAnswer(word.english)
105-
this.doneWords.push({ translated: word.english, original: word.russian })
106-
} else {
107-
const indexError = this.errorWords.indexOf(word.id)
108-
if (indexError == -1) this.errorWords.push(word.id)
109-
}
110-
},
111-
sendData() {
112-
const arrayWords = JSON.parse(window.sessionStorage.getItem("words"))
83+
const addAnswer = (word: string) => isAnswer.value.push(word)
84+
85+
const deleteAnswer = (word: string) => {
86+
const isIndex: number = isAnswer.value.findIndex((item: string) => item == word)
87+
if (isIndex != -1) isAnswer.value.splice(isIndex, 1)
88+
}
89+
90+
const sendData = () => {
91+
// @ts-ignore
92+
const arrayWords: any = JSON.parse(window.sessionStorage.getItem("words"))
11393
if (arrayWords != null) window.sessionStorage.removeItem("words")
11494
115-
const errorWords = JSON.parse(window.sessionStorage.getItem("wordsMistakes"))
95+
// @ts-ignore
96+
const errorWords: any = JSON.parse(window.sessionStorage.getItem("wordsMistakes"))
11697
if (errorWords != null) window.sessionStorage.removeItem("wordsMistakes")
11798
118-
const successWords = []
119-
const failedWords = []
99+
const successWords: any[] = []
100+
const failedWords: any[] = []
120101
121-
this.doneWords.map(item => {
122-
this.currentWords.map(wordInfo => {
102+
doneWords.value.map((item: any) => {
103+
props.currentWords.map((wordInfo: any) => {
123104
if (wordInfo.english == item.translated) successWords.push({ english: wordInfo.russian, id: wordInfo.id })
124105
})
125106
})
126-
this.errorWords.map(item => {
127-
this.currentWords.map(wordInfo => {
107+
errorWords.map((item: any) => {
108+
props.currentWords.map((wordInfo: any) => {
128109
if (wordInfo.english == item) failedWords.push({ english: item, id: wordInfo.id })
129110
})
130111
})
131112
window.sessionStorage.setItem("words", JSON.stringify(successWords))
132113
window.sessionStorage.setItem("wordsMistakes", JSON.stringify(failedWords))
133-
},
134-
rotateWords() {
135-
this.doneWords = []
136-
this.errorWords = []
137-
this.isAnswer = []
138-
this.isRotate = !this.isRotate
139-
},
140-
},
141-
}
114+
}
115+
116+
const checkWord = (word: WordInterface, index: number) => {
117+
// @ts-ignore
118+
const value: any = inputsInfo.value[index.toString()].value
119+
120+
if (word.english.trimStart().trimEnd().toLowerCase() == value.trimStart().trimEnd().toLowerCase()) {
121+
// @ts-ignore
122+
inputsInfo.value[index].disabled = true
123+
// @ts-ignore
124+
const indexError = errorWords.value.indexOf(word.id)
125+
if (indexError != -1) errorWords.value.splice(indexError, 1)
126+
127+
const speechSythesis = new SpeechSythesis(word.english, isRotate.value ? "en-US" : "ru-RU")
128+
speechSythesis.render()
129+
speechSythesis.shooseSpeaker("Whisper")
130+
speechSythesis.speak()
131+
132+
deleteAnswer(word.english)
133+
doneWords.value.push({ translated: word.english, original: word.russian })
134+
} else {
135+
// @ts-ignore
136+
const indexError = errorWords.value.indexOf(word.id)
137+
// @ts-ignore
138+
if (indexError == -1) errorWords.value.push(word.id)
139+
}
140+
}
141+
142+
const rotateWords = () => {
143+
doneWords.value = []
144+
errorWords.value = []
145+
isAnswer.value = []
146+
isRotate.value = !isRotate.value
147+
}
148+
149+
return {
150+
rotateWords, currentSortWords, currentInputWord, doneWords,
151+
errorWords, inputsInfo, isAnswer, checkedAnswers, isRotate,
152+
addAnswer, deleteAnswer, sendData, checkWord
153+
}
154+
}
155+
})
142156
</script>

‎src/components/words/types/accordion.types.ts

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
export interface doneWords {
2+
translated: string
3+
original: string
4+
}

‎src/models/speechSythesis.ts

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
export class SpeechSythesis {
2+
public mainWord: string
3+
protected wordType: string
4+
protected voiceURI: string
5+
protected msg: any | null
6+
readonly volume: number
7+
8+
constructor(public word: string, protected langType: string) {
9+
this.msg = null
10+
this.mainWord = word
11+
this.wordType = langType
12+
this.voiceURI = "native"
13+
this.volume = 1
14+
}
15+
16+
public render() {
17+
if ("speechSynthesis" in window) {
18+
this.msg = new SpeechSynthesisUtterance(this.mainWord);
19+
this.msg.voiceURI = this.voiceURI
20+
this.msg.volume = this.volume
21+
this.msg.lang = this.wordType
22+
23+
this.msg.voice = speechSynthesis.getVoices().forEach((voice) => console.log(voice.name, voice.default ? voice.default : ""));
24+
}
25+
}
26+
27+
public shooseSpeaker(speakerName: string) {
28+
this.msg.voice = speechSynthesis.getVoices().filter(voice => voice.name == speakerName)[0]
29+
}
30+
31+
public speak() {
32+
speechSynthesis.speak(this.msg)
33+
}
34+
}

0 commit comments

Comments
 (0)