genemecija/learn-morse-code
1
0
Fork 0
mirror of https://github.com/genemecija/learn-morse-code.git synced 2025-12-06 07:02:00 +01:00
Code Issues Actions Packages Projects Releases Wiki Activity

MorsePlayer queue cancelling, Chlng Word color bug fix

Browse source
This commit is contained in:
Gene Mecija 2020-02-03 00:38:42 -08:00
parent d707f483ce
commit e63271a386
11 changed files with 82 additions and 82 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

21
src/app-modes/ChallengeMode.js
View file

@ -9,8 +9,6 @@ import { WordListPickerContext } from '../contexts/wordListPickerContext';
export default React.memo(function ChallengeMode(props) {
console.log("ChallengeMode loaded");
const {word, getNextWord} = useContext(WordFeederContext)
@ -28,21 +26,26 @@ export default React.memo(function ChallengeMode(props) {
if (!word) {
console.log('FINISHED ALL WORDS!')
alert('No more words.')
alert('Show completion time.')
return
}
console.log('word:', word);
let challengeLetters = word.split('')
// console.log('word', word);
// console.log('morseArray', morseArray);
// console.log('morseArray.length', morseArray.length);
// if (morseArray.length === 0) {
// document.getElementById('challengeWord').childNodes.forEach(node => node.classList = ('cLetter'))
// }
// Iterate through the morse character buffer and compare with each letter of challenge word
morseArray.forEach((item, index) => {
if (morseCharBuffer.slice(-1) === '_') { // If end of morse character
let morseLetter = morseCode[morseArray[index]] || '[?]'
let challengeLetter = challengeLetters[index-offset].toLowerCase()
if (morseLetter === challengeLetter) {
correctCharIndexes.push(index-offset)
@ -87,7 +90,11 @@ export default React.memo(function ChallengeMode(props) {
}, 800)
setTimeout(() => {
getNextWord()
if (document.getElementById('challengeWord') !== null) {
document.getElementById('challengeWord').childNodes.forEach(node => {
node.classList = "cLetter"
})
}
}, 1000)
}

4
src/components/ChallengeBufferDisplay.js
View file

@ -25,11 +25,11 @@ export default React.memo(function ChallengeBufferDisplay(props) {
return (
<div id="challengeBufferDisplay">
<div id="alphanumeric-container">
{/* <div id="alphanumeric-container">
<div id="alphanumeric">
{alphanumeric}
</div>
</div>
</div> */}
<div id="ditDahs">
{ditDahs}
</div>

10
src/components/ChallengeWord.js
View file

@ -1,18 +1,16 @@
import React from "react"
import React, { useContext } from "react"
import { WordFeederContext } from "../contexts/wordFeederContext"
export default React.memo(function ChallengeWord(props) {
let challengeWordClass= props.className
const word = props.word
const {word} = useContext(WordFeederContext)
let challengeLetters = word.split('')
let spannedWord = challengeLetters.map((letter,index) => {
let className = 'cLetter'
return (
<span key={index} className={className} id={"chal"+index}>{letter}</span>
<span key={index} className='cLetter'>{letter}</span>
)
})

4
src/components/Legend.js
View file

@ -1,6 +1,7 @@
import React from "react"
import React, { useContext } from "react"
import morseCode from '../data/morse-code.json'
import useMorsePlayer from "../hooks/useMorsePlayer";
import { WPMContext } from "../contexts/wpmContext.js";
function Legend() {
@ -12,7 +13,6 @@ function Legend() {
let word = e.target.innerHTML
let newWord = convertWordToMorse(word)
console.log(newWord);
playMorseWord(newWord)
}

1
src/components/MorseBufferDisplay.js
View file

@ -29,7 +29,6 @@ export default React.memo(function MorseBufferDisplay() {
return (
<div id="morseBufferDisplay">
<div id="overlay"></div>
<div id="ditDahs-container">
<div id="ditDahs">
{ditDahs}

1
src/contexts/wordFeederContext.js
View file

@ -3,7 +3,6 @@ import { WordListPickerContext } from "./wordListPickerContext"
const WordFeederContext = React.createContext()
function WordFeederContextProvider(props) {
console.log('LOADED: wordFeederContext');
// let wordList = ['hi', 'morse', 'code', 'hello', 'gene']
const {wordList, wordListShuffled, wordListCategory} = useContext(WordListPickerContext)

14
src/css/App.css
View file

@ -426,9 +426,10 @@ i[class*="ri-"] {
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content;
margin-bottom: 20px;
padding-left: 10px;
padding-right: 10px;
margin-bottom: 10px;
margin-top: 25px;
border-radius: 3px;
-webkit-box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.3), 0px -1px 1px white;
box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.3), 0px -1px 1px white;
@ -466,6 +467,7 @@ i[class*="ri-"] {
}
#morseBufferDisplay {
border: 1px solid green;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
@ -484,8 +486,6 @@ i[class*="ri-"] {
margin-bottom: 20px;
font-family: "Courier Prime", Courier, monospace;
position: relative;
padding-top: 15px;
padding-bottom: 15px;
}
#morseBufferDisplay #overlay {
@ -503,7 +503,7 @@ i[class*="ri-"] {
#morseBufferDisplay #alphanumeric-container {
text-align: center;
max-width: 100%;
overflow-x: hidden;
overflow: hidden;
display: inline-block;
padding-top: 10px;
}
@ -526,7 +526,7 @@ i[class*="ri-"] {
#morseBufferDisplay #ditDahs-container {
text-align: center;
max-width: 100%;
overflow-x: hidden;
overflow: hidden;
}
#morseBufferDisplay #ditDahs-container #ditDahs {
@ -575,7 +575,6 @@ i[class*="ri-"] {
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
border: 1px solid green;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
@ -584,8 +583,6 @@ i[class*="ri-"] {
-ms-flex-align: center;
align-items: center;
width: 100%;
height: 150px;
margin-bottom: 20px;
font-family: "Courier Prime", Courier, monospace;
font-weight: bold;
}
@ -638,6 +635,7 @@ i[class*="ri-"] {
#challengeBufferDisplay #ditDahs {
height: 50px;
padding-right: 5px;
padding-top: 10px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;

2
src/css/App.css.map
View file

File diff suppressed because one or more lines are too long

76
src/hooks/useMorsePlayer.js
View file

@ -17,7 +17,7 @@ function useMorsePlayer() {
} else {
context = null
}
let frequency = config.frequency
function play(ditDah) {
@ -54,32 +54,40 @@ function useMorsePlayer() {
// })
}
let queue = []
let timeouts = []
function playMorseWord(morse) {
let chars = Array.from(morse)
// let currentPromise = Promise.resolve();
let soundQueue = []
// Empty morse queue and cancel all sounds (timeouts)
queue = []
for (let i = 0; i < timeouts.length; i++) {
clearTimeout(timeouts[i]);
}
queue = Array.from(morse)
// let currentPromise = Promise.resolve();
let delay = 0
let firstWord = true
for (let i = 0; i < chars.length; i++) {
for (let i = 0; i < queue.length; i++) {
// currentPromise = currentPromise.then(() => {
// return playChar(chars[i]);
// return playChar(queue[i]);
// });
let char = chars[i]
let char = queue[i]
if (char === '.') {
if (firstWord) {
firstWord = false
// soundQueue.push(
setTimeout(() => {
timeouts.push(setTimeout(() => {
play(char)
}, 0)
}, 0))
// )
} else {
// soundQueue.push(
setTimeout(() => {
timeouts.push(setTimeout(() => {
play(char)
}, delay)
}, delay))
// )
}
delay += ditMaxTime*2
@ -87,45 +95,47 @@ function useMorsePlayer() {
if (firstWord) {
firstWord = false
// soundQueue.push(
setTimeout(() => {
timeouts.push(setTimeout(() => {
play(char)
}, 0)
}, 0))
// )
} else {
// soundQueue.push(
setTimeout(() => {
timeouts.push(setTimeout(() => {
play(char)
}, delay)
}, delay))
// )
}
delay += ditMaxTime*4
} else if (char === ' ') {
setTimeout(() => {
timeouts.push(setTimeout(() => {
}, delay)
}, delay))
delay += ditMaxTime*3
}
}
function playChar(char) {
let delay = (char === '.') ? ditMaxTime + ditMaxTime : ditMaxTime*3 + ditMaxTime
// function playChar(char) {
// let delay = (char === '.') ? ditMaxTime + ditMaxTime : ditMaxTime*3 + ditMaxTime
return new Promise(function(resolve) {
if (char === '.' || char === '-') {
play(char)
.then(setTimeout(() => {
resolve();
}, delay))
} else {
setTimeout(() => {
resolve();
}, delay)
}
});
}
// return new Promise(function(resolve) {
// if (char === '.' || char === '-') {
// play(char)
// .then(setTimeout(() => {
// resolve();
// }, delay))
// } else {
// setTimeout(() => {
// resolve();
// }, delay)
// }
// });
// }
}
return { playMorseWord }
return { playMorseWord, play }
}
export default useMorsePlayer

2
src/hooks/useStraightKey.js
View file

@ -6,7 +6,7 @@ import { GameModeContext } from '../contexts/gameModeContext'
// STRAIGHT KEY TELEGRAPH
function useStraightKey() {
console.log('useStraightKey');
const {morseCharBuffer, setMorseCharBuffer, morseWords, setMorseWords} = useContext(MorseBufferContext)
const {wpm} = useContext(WPMContext)
const {gameMode} = useContext(GameModeContext)

29
src/scss/App.scss
View file

@ -388,11 +388,10 @@ $button-height: 60px;
height: 5rem;
width: fit-content;
margin-bottom: 20px;
padding-left: 10px;
padding-right: 10px;
// padding-top: 10px;
margin-bottom: 10px;
margin-top: 25px;
// border: 1px solid green;
border-radius: $main-border-radius;
@ -431,7 +430,7 @@ $button-height: 60px;
#morseBufferDisplay {
// border: 1px solid green;
border: 1px solid green;
display: flex;
justify-content: center;
flex-direction: column-reverse;
@ -441,8 +440,6 @@ $button-height: 60px;
margin-bottom: 20px;
font-family: $buffer-font;
position: relative;
padding-top: 15px;
padding-bottom: 15px;
// font-weight: bold;
#overlay {
@ -458,18 +455,9 @@ $button-height: 60px;
}
#alphanumeric-container {
// border-left: 2px solid #000;
// display: flex;
// display: flex;
// justify-content: center;
// align-items: center;
// box-shadow: $morseCard-shadow-light;
text-align: center;
max-width: 100%;
overflow-x: hidden;
overflow: hidden;
display: inline-block;
padding-top: 10px;
@ -496,7 +484,7 @@ $button-height: 60px;
text-align: center;
max-width: 100%;
// border: 1px solid red;
overflow-x: hidden;
overflow: hidden;
#ditDahs {
height: 50px;
@ -540,12 +528,12 @@ $button-height: 60px;
#challengeBufferDisplay {
display: flex;
justify-content: center;
border: 1px solid green;
// border: 1px solid green;
flex-direction: column;
align-items: center;
width: 100%;
height: 150px;
margin-bottom: 20px;
// height: 150px;
// margin-top: 10px;
font-family: $buffer-font;
font-weight: bold;
@ -605,6 +593,7 @@ $button-height: 60px;
height: 50px;
padding-right: 5px;
padding-top: 10px;
// border-right: 2px solid #000;
display: flex;
flex-direction: row;