genemecija/learn-morse-code
1
0
Fork 0
mirror of https://github.com/genemecija/learn-morse-code.git synced 2026-01-04 07:39:59 +01:00
Code Issues Actions Packages Projects Releases Wiki Activity

Resolved WPM change/telegraph timing bug

Browse source
This commit is contained in:
Gene Mecija 2020-01-27 03:21:41 -08:00
parent 4b4030a88d
commit f6384b30ef
11 changed files with 120 additions and 317 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

49
src/App.js
View file

@ -20,23 +20,19 @@ import Legend from './components/Legend';
// import GameClock from "./components/GameClock"
import WordsPerMinute from "./components/WordsPerMinute"
import MorseButtons from './components/MorseButtons'
import MorseBufferDisplay from './components/MorseBufferDisplay'
import MorseHistory from './components/MorseHistory'
import StraightKey from './components/StraightKey';
import ElectronicKey from './components/ElectronicKey';
import Footer from './components/Footer';
import { WPMContext } from './contexts/wpmContext';
import StraightKey from './components/StraightKey';
import ElectronicKey from './components/ElectronicKey';
export default React.memo(function App() {
console.log('App.js rendered')
const {gameMode} = useContext(GameModeContext)
const {wpm} = useContext(WPMContext)
const {keyType} = useContext(KeyTypeContext)
console.log('gameMode', gameMode);
console.log('keyType', keyType);
const {gameMode} = useContext(GameModeContext)
const wpm = useContext(WPMContext)
return (
<>
@ -45,17 +41,18 @@ export default React.memo(function App() {
<Legend />
<WordsPerMinute />
<MorseBufferContextProvider>
<ModePicker />
<KeyTypePicker />
{gameMode === 'practice' &&
<>
{/* {keyType === "straight" ?
<StraightKey gameMode='practice' wpm={wpm} /> : <ElectronicKey gameMode='practice' wpm={wpm} />} */}
<PracticeMode /><br/>
{/* <MorseBufferDisplay /><br/>
<MorseHistory /><br/> */}
</>
{keyType === "straight" ?
<StraightKey /> : <ElectronicKey />
}
{gameMode === 'practice' &&
<PracticeMode />
}
{/* {gameMode === 'timed' &&
<>
{keyType === "straight" ?
@ -64,19 +61,19 @@ export default React.memo(function App() {
<MorseBufferDisplay /><br/>
<MorseHistory /><br/>
</>
}
} */}
{gameMode === 'challenge' &&
<>
<WordListPickerContextProvider>
<WordFeederContextProvider>
<WordListPicker />
{keyType === "straight" ?
<StraightKey gameMode='challenge' /> : <ElectronicKey gameMode='challenge' />}
<ChallengeMode />
</WordFeederContextProvider>
<WordFeederContextProvider>
<WordListPicker />
<ChallengeMode />
</WordFeederContextProvider>
</WordListPickerContextProvider>
</>
} */}
}
<MorseButtons />
</MorseBufferContextProvider>
</div>

16
src/app-modes/PracticeMode.js
View file

@ -1,25 +1,13 @@
import React, {useContext} from 'react';
import React from 'react';
import '../css/App.css';
import {KeyTypeContext} from "../contexts/keyTypeContext"
import StraightKey from '../components/StraightKey'
import ElectronicKey from '../components/ElectronicKey'
import MorseBufferDisplay from '../components/MorseBufferDisplay'
import MorseHistory from '../components/MorseHistory'
import { WPMContext } from '../contexts/wpmContext';
import { GameModeContext } from '../contexts/gameModeContext';
import useStraightKey from '../hooks/useStraightKey';
export default React.memo(function PracticeMode() {
const {keyType} = useContext(KeyTypeContext)
const {gameMode} = useContext(GameModeContext)
const {wpm} = useContext(WPMContext)
export default (function PracticeMode(props) {
return (
<>
{keyType === "straight" ? <StraightKey gameMode={gameMode} wpm={wpm} /> : <ElectronicKey gameMode={gameMode} wpm={wpm} />}
<MorseBufferDisplay /><br/>
<MorseHistory /><br/>
</>

10
src/components/ElectronicKey.js
View file

@ -1,9 +1,7 @@
import React, { useContext } from 'react'
import React from 'react'
import useElectronicKey from '../hooks/useElectronicKey';
function ElectronicKey(props) {
export default React.memo(function ElectronicKey(props) {
return useElectronicKey(props.gameMode, props.wpm)
}
export default ElectronicKey
useElectronicKey()
})

2
src/components/KeyTypePicker.js
View file

@ -7,10 +7,10 @@ export default React.memo(function KeyTypePicker() {
function handleClick(e) {
setKeyType(e.target.id)
console.log("KEYTYPE PICKED:", e.target.id);
let buttons = document.querySelector(".mode-picker#keyType").childNodes
buttons.forEach(button => {
console.log('buttonID', button.id);
if (button.id === e.target.id) {
button.classList.add('selected')
} else { button.classList.remove('selected')}

12
src/components/StraightKey.js
View file

@ -1,13 +1,7 @@
import React, { useContext } from 'react'
import React from 'react'
import useStraightKey from '../hooks/useStraightKey';
import { GameModeContext } from '../contexts/gameModeContext';
import { WPMContext } from '../contexts/wpmContext';
export default React.memo(function StraightKey(props) {
console.log('props.gameMode',props.gameMode);
// const {gameMode} = useContext(GameModeContext)
// const {wpm} = useContext(WPMContext)
useStraightKey(props.gameMode, props.wpm)
useStraightKey()
})

2
src/components/WordsPerMinute.js
View file

@ -7,7 +7,7 @@ export default React.memo(function WordsPerMinute(props) {
const {wpm, setWPM} = useContext(WPMContext)
function handleChange(e) {
setWPM(e.target.value)
setWPM(Number(e.target.value))
}
return (

6
src/contexts/wpmContext.js
View file

@ -1,11 +1,15 @@
import React, {useState} from "react"
const WPMContext = React.createContext()
function WPMContextProvider(props) {
const [wpm, setWPM] = useState(15)
return (
<WPMContext.Provider value={{wpm: wpm, setWPM: setWPM}}>
<WPMContext.Provider value={{
wpm: wpm,
setWPM: setWPM}}>
{props.children}
</WPMContext.Provider>
)

16
src/hooks/useElectronicKey.js
View file

@ -2,23 +2,26 @@ import {useEffect, useContext} from 'react'
import {MorseBufferContext} from '../contexts/morseBufferContext'
import config from '../config.json'
import { WPMContext } from '../contexts/wpmContext'
import { GameModeContext } from '../contexts/gameModeContext'
// ELECTRONIC KEY TELEGRAPH - Iambic A
function useElectronicKey(gameMode, wpm) {
function useElectronicKey() {
const {morseCharBuffer, setMorseCharBuffer, morseWords, setMorseWords} = useContext(MorseBufferContext)
// const {wpm} = useContext(WPMContext)
// console.log('useStraightKey-WPM:', wpm);
const {wpm} = useContext(WPMContext)
const {gameMode} = useContext(GameModeContext)
let ditMaxTime = 1200/wpm
const timingUnit = config.timingUnit
let ratio = .2
const ditMaxTime = 1200/wpm // ditMaxTime * 0.365 to get ms, e.g. 85 * 0.365 ~= 31ms
const letterGapMinTime = ditMaxTime*ratio*3 //config.practiceSpeed.normal*3
const wordGapMaxTime = ditMaxTime*ratio*7 // config.practiceSpeed.normal*7
const morseHistorySize = config.historySize
let leftIsPressed = false
let rightIsPressed = false
@ -230,7 +233,6 @@ function useElectronicKey(gameMode, wpm) {
}
}
const bufferDisplay = ['morseBufferDisplay', 'challengeBufferDisplay', 'ditDahs', 'alphanumeric-container']
function handleInputStart(event) {
event.preventDefault()
@ -348,7 +350,7 @@ function useElectronicKey(gameMode, wpm) {
clearHistory()
}
// eslint-disable-next-line
}, [])
}, [wpm])
useEffect(() => {
// PRACTICE MODE

75
src/hooks/useMorsePlayer copy.js
View file

@ -1,8 +1,12 @@
import config from '../config.json'
import { WPMContext } from '../contexts/wpmContext.js';
import { useContext } from 'react';
function useMorsePlayer() {
function useMorsePlayerCopy() {
const ditMaxTime = 85 //config.ditMaxTime
const {wpm} = useContext(WPMContext)
// const ditMaxTime = 85 //config.ditMaxTime
const ditMaxTime = 1200/wpm
// Tone Setup
let AudioContext = window.AudioContext || window.webkitAudioContext
@ -20,7 +24,7 @@ function useMorsePlayer() {
let length = ((ditDah === '.') ? ditMaxTime : ditMaxTime*3)
// length = 1
return new Promise((resolve, reject) => {
// return new Promise((resolve, reject) => {
if (context.state === 'interrupted') {
context.resume()
}
@ -28,12 +32,12 @@ function useMorsePlayer() {
o = context.createOscillator()
o.frequency.value = frequency
o.type = "sine"
o.onended = () => {
resolve()
}
// o.onended = () => {
// resolve()
// }
let startTime = context.currentTime;
let g = context.createGain()
g.gain.exponentialRampToValueAtTime(config.mainVolume, startTime)
g.gain.setValueAtTime(config.mainVolume, startTime)
@ -47,17 +51,60 @@ function useMorsePlayer() {
g.gain.setTargetAtTime(0.0001, context.currentTime, 0.009)
o.stop(context.currentTime + 0.05)
}, length)
})
// })
}
function playMorseWord(morse) {
let chars = Array.from(morse)
let currentPromise = Promise.resolve();
// let currentPromise = Promise.resolve();
let soundQueue = []
let delay = 0
let firstWord = true
for (let i = 0; i < chars.length; i++) {
currentPromise = currentPromise.then(() => {
return playChar(chars[i]);
});
// currentPromise = currentPromise.then(() => {
// return playChar(chars[i]);
// });
let char = chars[i]
if (char === '.') {
if (firstWord) {
firstWord = false
// soundQueue.push(
setTimeout(() => {
play(char)
}, 0)
// )
} else {
// soundQueue.push(
setTimeout(() => {
play(char)
}, delay)
// )
}
delay += ditMaxTime*2
} else if (char === '-') {
if (firstWord) {
firstWord = false
// soundQueue.push(
setTimeout(() => {
play(char)
}, 0)
// )
} else {
// soundQueue.push(
setTimeout(() => {
play(char)
}, delay)
// )
}
delay += ditMaxTime*4
} else if (char === ' ') {
setTimeout(() => {
}, delay)
delay += ditMaxTime*3
}
}
function playChar(char) {
@ -78,7 +125,7 @@ function useMorsePlayer() {
}
}
return { playMorseWord }
return { play }
}
export default useMorsePlayer
export default useMorsePlayerCopy

20
src/hooks/useStraightKey.js
View file

@ -1,14 +1,15 @@
import {useEffect, useContext} from 'react'
import {MorseBufferContext} from '../contexts/morseBufferContext'
import config from '../config.json'
// import { WPMContext } from '../contexts/wpmContext'
import { WPMContext } from '../contexts/wpmContext'
import { GameModeContext } from '../contexts/gameModeContext'
// STRAIGHT KEY TELEGRAPH
function useStraightKey(gameMode, wpm) {
function useStraightKey() {
const {morseCharBuffer, setMorseCharBuffer, morseWords, setMorseWords} = useContext(MorseBufferContext)
// const {wpm} = useContext(WPMContext)
// console.log('useStraightKey-WPM:', wpm);
const {wpm} = useContext(WPMContext)
const {gameMode} = useContext(GameModeContext)
let charTimer = 0
let charTime = 0
@ -17,7 +18,8 @@ function useStraightKey(gameMode, wpm) {
const timingUnit = config.timingUnit
const ditMaxTime = 1200/wpm
const ditMaxTime = 1200/wpm * 0.3
const letterGapMinTime = ditMaxTime*3
const wordGapMaxTime = ditMaxTime*7
const morseHistorySize = config.historySize
@ -43,11 +45,11 @@ function useStraightKey(gameMode, wpm) {
setMorseWords([])
}
const bufferDisplay = ['morseBufferDisplay', 'challengeBufferDisplay', 'ditDahs', 'alphanumeric-container']
function handleInputStart(event) {
event.preventDefault()
console.log('INPUTSTART');
console.log('ditMaxTime',ditMaxTime);
console.log('letterGapMinTime',letterGapMinTime);
console.log('wordGapMaxTime',wordGapMaxTime);
// console.log('event.type', event.type);
// if (event.type === 'mousedown' && event.target.className !== 'paddle') {
// if (event.target.id === 'wpm-input') {
@ -230,7 +232,7 @@ function useStraightKey(gameMode, wpm) {
clearHistory()
}
// eslint-disable-next-line
}, [])
}, [wpm])
useEffect(() => {
// PRACTICE MODE

229
src/hooks/useTelegraphKey.js
View file

@ -1,229 +0,0 @@
import {useEffect, useContext} from 'react'
import {MorseBufferContext} from '../contexts/morseBufferContext'
import config from '../config.json'
import { WPMContext } from '../contexts/wpmContext'
import { KeyTypeContext } from '../contexts/keyTypeContext'
// STRAIGHT KEY TELEGRAPH
function useTelegraphKey(gameMode, wpm) {
const {morseCharBuffer, setMorseCharBuffer, morseWords, setMorseWords} = useContext(MorseBufferContext)
// const {wpm} = useContext(WPMContext)
// console.log('useStraightKey-WPM:', wpm);
// Straight Key Variables
let charTimer = 0
let charTime = 0
// Electronic Key Variables
let ratio = .2
let depressSyncTime
let depressSyncTimer
let depressSyncTimerRunning = false
let paddlesReleasedSimultaneously = false
// Straight && Electronic Key Variables
let gapTimer = 0
let gapTime = 0
const timingUnit = config.timingUnit
const ditMaxTime = 1200/wpm
const letterGapMinTime = ditMaxTime*3
const wordGapMaxTime = ditMaxTime*7
const morseHistorySize = config.historySize
// Tone Setup
let AudioContext = window.AudioContext || window.webkitAudioContext || false
let context
window.AudioContext = window.AudioContext || window.webkitAudioContext;
if (AudioContext) {
context = new AudioContext()
} else {
context = null
}
let o // Oscillator Node
let g // Gain Node
let frequency = config.frequency
let isRunning = false
function clearHistory() {
setMorseWords([])
}
function handleInputStart(event) {
event.preventDefault()
if (isRunning) {
return
} else {
if ((event.keyCode !== 32 &&
event.target.id !== "morseButton" &&
event.target.className !== "paddle") ||
(event.repeat)) {
return
}
isRunning = true
if (context.state === 'interrupted') {
context.resume()
}
o = context.createOscillator()
o.frequency.value = frequency
o.type = "sine"
g = context.createGain()
g.gain.exponentialRampToValueAtTime(config.mainVolume, context.currentTime)
o.connect(g)
g.connect(context.destination)
o.start()
checkGapBetweenInputs()
clearInterval(gapTimer)
startCharTimer()
}
}
function startCharTimer() {
// Start Character Timer
charTimer = setInterval(() => {
charTime += 1
}, timingUnit);
}
function handleInputEnd(event) {
event.preventDefault()
// if (event.target.id !== 'morseBufferDisplay') {
// insideBufferDisplay = true
// console.log('insideBufferDisplay', insideBufferDisplay);
// }
// if (!insideBufferDisplay) {return}
if (isRunning) {
if ((event.keyCode !== 32 &&
event.target.id !== "morseButton" &&
event.target.className !== "paddle") ||
(event.repeat)) {
return
}
isRunning = false
// console.log('charTime:', charTime);
if (charTime <= ditMaxTime) {
setMorseCharBuffer(prev => prev + '.')
} else {
setMorseCharBuffer(prev => prev + '-')
}
stopCharTimer()
startGapTimer()
if (o.context.state === 'running') {
g.gain.setTargetAtTime(0.0001, context.currentTime, 0.001)
o.stop(context.currentTime + 0.05)
}
} else { return }
}
function stopCharTimer() {
clearInterval(charTimer)
charTimer = 0
charTime = 0
}
function startGapTimer() {
gapTime = 0
gapTimer = setInterval(() => {
gapTime += 1
// Gap between words
if (gameMode === 'practice' && gapTime >= wordGapMaxTime) {
setMorseCharBuffer(prev => prev + '/')
clearInterval(gapTimer)
gapTimer = 0
gapTime = 0
}
else if (gameMode === 'challenge' && gapTime >= letterGapMinTime) {
setMorseCharBuffer(prev => prev + '_')
clearInterval(gapTimer)
gapTimer = 0
gapTime = 0
}
}, timingUnit);
}
function checkGapBetweenInputs() {
// Check Gap between letters
if (gapTime >= letterGapMinTime && gapTime < wordGapMaxTime) {
if (gameMode === 'practice') {
setMorseCharBuffer(prev => prev + ' ')
} else if (gameMode === 'challenge') {
setMorseCharBuffer(prev => prev + '_')
}
clearInterval(gapTimer)
gapTimer = 0
}
}
useEffect(() => {
document.addEventListener('keydown', handleInputStart)
document.addEventListener('keyup', handleInputEnd)
const paddles = document.querySelectorAll('.paddle')
paddles.forEach(paddle => {
paddle.addEventListener('mousedown', handleInputStart)
paddle.addEventListener('touchstart', handleInputStart)
paddle.addEventListener('mouseout', handleInputEnd)
paddle.addEventListener('mouseup', handleInputEnd)
paddle.addEventListener('touchend', handleInputEnd)
})
return function cleanup() {
document.removeEventListener('keydown', handleInputStart)
document.removeEventListener('keyup', handleInputEnd)
const paddles = document.querySelectorAll('.paddle')
paddles.forEach(paddle => {
paddle.removeEventListener('mousedown', handleInputStart)
paddle.removeEventListener('touchstart', handleInputStart)
paddle.removeEventListener('mouseout', handleInputEnd)
paddle.removeEventListener('mouseup', handleInputEnd)
paddle.removeEventListener('touchend', handleInputEnd)
})
clearHistory()
}
// eslint-disable-next-line
}, [])
useEffect(() => {
// PRACTICE MODE
if (morseCharBuffer.slice(-1) === '/' && gameMode === 'practice') {
// Remove forward slash
let val = morseCharBuffer.slice(0,morseCharBuffer.length-1)
setMorseWords(prev => [val, ...prev])
if (morseWords.length >= morseHistorySize) {
setMorseWords(prev => prev.slice(0,prev.length-1))
}
setMorseCharBuffer('')
}
// CHALLENGE MODE: leave forward slash there; to be parsed by ChallengeDisplay.js
// else if (morseCharBuffer.slice(-1) === '/' && mode === 'challenge') {
// }
// eslint-disable-next-line
}, [morseCharBuffer])
}
export default useTelegraphKey