diff --git a/src/app-modes/ChallengeMode.js b/src/app-modes/ChallengeMode.js index 7490f85..8577d9c 100644 --- a/src/app-modes/ChallengeMode.js +++ b/src/app-modes/ChallengeMode.js @@ -7,7 +7,7 @@ import useTelegraph from '../hooks/useTelegraph'; // import ChallengeDisplay from '../components/ChallengeDisplay'; import ChallengeBufferDisplay from '../components/ChallengeBufferDisplay'; -function ChallengeMode() { +function ChallengeMode() { console.log("ChallengeMode loaded"); let word = "morse" diff --git a/src/app-modes/PracticeMode.js b/src/app-modes/PracticeMode.js index 5379e62..b9451e5 100644 --- a/src/app-modes/PracticeMode.js +++ b/src/app-modes/PracticeMode.js @@ -1,18 +1,20 @@ import React from 'react'; import '../css/App.css'; -import useTelegraph from '../hooks/useTelegraph'; +// import useTelegraph from '../hooks/useTelegraph'; +import usePaddleTelegraph from '../hooks/usePaddleTelegraph'; import MorseBufferDisplay from '../components/MorseBufferDisplay' import MorseDisplay from '../components/MorseDisplay' function PracticeMode() { console.log("PracticeMode loaded"); - const {morseCharBuffer, morseWords, clearHistory} = useTelegraph('practice') - + // const {morseCharBuffer, morseWords, clearHistory} = useTelegraph('practice') + usePaddleTelegraph() + return ( <> -
-
-
+ {/*
+
*/} +
); diff --git a/src/components/Legend.js b/src/components/Legend.js index cdb0d71..c12dc3c 100644 --- a/src/components/Legend.js +++ b/src/components/Legend.js @@ -14,10 +14,9 @@ function Legend() { let newWord = convertWordToMorse(word) console.log(newWord); - let name = '--._._-._.' playMorseWord(newWord) - } + function convertWordToMorse(word) { let morse = '' for (let i in word) { @@ -27,9 +26,16 @@ function Legend() { return morse } + const legend = Object.keys(morseCode).map((morse, index) => +
+ + {morseCode[morse]} +
+ ) + return (
- + {legend}
diff --git a/src/config.json b/src/config.json index 52aff37..bf51225 100644 --- a/src/config.json +++ b/src/config.json @@ -2,7 +2,7 @@ "timingUnit": 1, "ditMaxTime": 60, "mainVolume": 0.2, - "frequency": 550.0, + "frequency": 700.0, "practiceSpeed": { "slow": 40, "normal": 24, diff --git a/src/css/App.css b/src/css/App.css index b625c8a..cd66f0b 100644 --- a/src/css/App.css +++ b/src/css/App.css @@ -40,6 +40,34 @@ html, body { border-radius: 0px; } +#legend { + width: 450px; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: space-evenly; + -ms-flex-pack: space-evenly; + justify-content: space-evenly; + -ms-flex-item-align: center; + align-self: center; + -ms-flex-wrap: wrap; + flex-wrap: wrap; +} + +#legend div { + width: 80px; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -ms-flex-wrap: nowrap; + flex-wrap: nowrap; +} + +#legend div button { + width: 40px; + margin: 4px; +} + #main-content { width: 95vw; border: 1px solid red; @@ -53,8 +81,8 @@ html, body { } #morseButton { - width: 200px !important; - height: 200px; + width: 100px !important; + height: 100px; margin: 30px; background: goldenrod; border-radius: 50%; diff --git a/src/css/App.css.map b/src/css/App.css.map index 18fd22b..b3a82f3 100644 --- a/src/css/App.css.map +++ b/src/css/App.css.map @@ -1,6 +1,6 @@ { "version": 3, - "mappings": "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", + "mappings": "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", "sources": [ "../scss/App.scss" ], diff --git a/src/hooks/useMorsePlayer.js b/src/hooks/useMorsePlayer.js index d5a74e9..6b9d696 100644 --- a/src/hooks/useMorsePlayer.js +++ b/src/hooks/useMorsePlayer.js @@ -2,7 +2,7 @@ import config from '../config.json' function useMorsePlayer() { - const ditMaxTime = config.ditMaxTime + const ditMaxTime = 85 //config.ditMaxTime // Tone Setup let AudioContext = window.AudioContext || window.webkitAudioContext @@ -43,7 +43,6 @@ function useMorsePlayer() { g.gain.setTargetAtTime(0.0001, startTime + length/1000, 0.001) o.stop(startTime + length/1000 + 0.05) - console.log("length/1000", length/1000); }) } diff --git a/src/hooks/usePaddleTelegraph.js b/src/hooks/usePaddleTelegraph.js new file mode 100644 index 0000000..22bf72e --- /dev/null +++ b/src/hooks/usePaddleTelegraph.js @@ -0,0 +1,175 @@ +import {useEffect} from 'react' +import config from '../config.json' + +// SINGLE/DUAL LEVER TELEGRAPH + +function usePaddleTelegraph() { + + const ditMaxTime = 85 + let leftIsPressed = false + let rightIsPressed = false + let queueRunning = false + let queue = [] + + let currentPromise = Promise.resolve() + + // Audio 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 frequency = config.frequency + + + // Promisify playing Dits and Dahs + function play(ditDah) { + let playDuration = ((ditDah === '.') ? ditMaxTime : ditMaxTime*3) + + return new Promise((resolve, reject) => { + if (context.state === 'interrupted') { + context.resume() + } + + let o = context.createOscillator() + o.frequency.value = frequency + o.type = "sine" + o.onended = () => { + resolve() + } + + let startTime = context.currentTime; + + let g = context.createGain() + g.gain.exponentialRampToValueAtTime(config.mainVolume, startTime) + g.gain.setValueAtTime(config.mainVolume, startTime) + o.connect(g) + g.connect(context.destination) + o.start(startTime) + + g.gain.setTargetAtTime(0.0001, startTime + playDuration/1000, 0.001) + o.stop(startTime + playDuration/1000 + 0.05) + }) + } + + function playWithSpaces(ditDah) { + let delay = (ditDah === '.') ? ditMaxTime + ditMaxTime : ditMaxTime*3 + ditMaxTime + + return new Promise(function(resolve) { + if (ditDah === '.' || ditDah === '-') { + play(ditDah) + .then(setTimeout(() => { + resolve(); + }, delay)) + } else { + setTimeout(() => { + resolve(); + }, delay) + } + }); + } + + function executeQueue() { + let localQueue = queue + console.log('localQueue',localQueue); + + // Set wait time to completion of queue (including spaces) + let waitTime = 0 + for (let i in localQueue) { + if (localQueue[i] === '.') { + waitTime += ditMaxTime*2 + } else if (localQueue[i] === '-') { + waitTime += ditMaxTime*4 + } + } + + queueRunning = true + + // Wait till completion of queue to execute + setTimeout(() => { + queueRunning = false + queue = [] + checkPressed() + }, waitTime) + + // Execute queue + for (let i = 0; i < localQueue.length; i++) { + currentPromise = currentPromise.then(() => { + return playWithSpaces(localQueue[i]) + }); + } + } + + function checkPressed() { + if (leftIsPressed) { + queue.push('.') + } + if (rightIsPressed) { + queue.push('-') + } + if (queue.length > 0) { + executeQueue() + } + } + + function handleInputStart(event) { + event.preventDefault() + + if (event.repeat) { return } + + if (event.keyCode === 188) { + leftIsPressed = true + console.log("LEFT DOWN"); + + // Prevent further input if queue is executing + if (!queueRunning) { + checkPressed() + } + } + else if (event.keyCode === 190) { + rightIsPressed = true + console.log("RIGHT DOWN"); + + // Prevent further input if queue is executing + if (!queueRunning) { + checkPressed() + } + } + } + + function handleInputEnd(event) { + event.preventDefault() + + if (event.keyCode === 188) { + leftIsPressed = false + console.log("LEFT UP"); + } + else if (event.keyCode === 190) { + rightIsPressed = false + console.log("RIGHT UP"); + } + } + + useEffect(() => { + document.addEventListener('keydown', handleInputStart) + document.addEventListener('keyup', handleInputEnd) + + const morseButton = document.getElementById('morseButton') + morseButton.addEventListener('mousedown', handleInputStart) + morseButton.addEventListener('touchstart', handleInputStart) + morseButton.addEventListener('mouseup', handleInputEnd) + morseButton.addEventListener('touchend', handleInputEnd) + + return function cleanup() { + document.removeEventListener('keydown', handleInputStart) + document.removeEventListener('keyup', handleInputEnd) + } + // eslint-disable-next-line + }, []) + +} + +export default usePaddleTelegraph \ No newline at end of file diff --git a/src/hooks/useTelegraph.js b/src/hooks/useTelegraph.js index cd9d705..77050fc 100644 --- a/src/hooks/useTelegraph.js +++ b/src/hooks/useTelegraph.js @@ -1,6 +1,8 @@ import {useState, useEffect} from 'react' import config from '../config.json' +// STRAIGHT KEY TELEGRAPH + function useTelegraph(mode = 'practice') { const [morseCharBuffer, setMorseCharBuffer] = useState('') // e.g. '-..' @@ -30,7 +32,7 @@ function useTelegraph(mode = 'practice') { let o // Oscillator Node let g // Gain Node - let frequency = 550.0 + let frequency = config.frequency let isRunning = false diff --git a/src/scss/App.scss b/src/scss/App.scss index a8f1906..b0b01c7 100644 --- a/src/scss/App.scss +++ b/src/scss/App.scss @@ -31,6 +31,27 @@ html, body { border-radius: $main-border-radius; } } + +#legend { + width: 450px; + display: flex; + justify-content: space-evenly; + align-self: center; + flex-wrap: wrap; + + div { + width: 80px; + display: flex; + flex-wrap: nowrap; + + button { + width: 40px; + margin: 4px; + } + } + +} + #main-content { width: 95vw; border: 1px solid red; @@ -39,8 +60,8 @@ html, body { } #morseButton { - width: 200px !important; - height: 200px; + width: 100px !important; + height: 100px; margin: 30px; background: goldenrod; border-radius: 50%;