mirror of
https://github.com/genemecija/learn-morse-code.git
synced 2025-12-06 07:02:00 +01:00
Legend updates & morse paddle function
This commit is contained in:
Gene Mecija
parent
dd6d8ca80f
commit
dd5b0ec4a0
|
|
@ -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"
|
||||
|
||||
|
|
|
|||
|
|
@ -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 (
|
||||
<>
|
||||
<MorseBufferDisplay buffer={morseCharBuffer} /><br/>
|
||||
<MorseDisplay morseWords={morseWords} /><br/>
|
||||
<button onClick={clearHistory}>Clear Morse History</button><br/>
|
||||
{/* <MorseBufferDisplay buffer={morseCharBuffer} /><br/>
|
||||
<MorseDisplay morseWords={morseWords} /><br/> */}
|
||||
<button onClick={console.log('hi')}>Clear Morse History</button><br/>
|
||||
</>
|
||||
);
|
||||
|
||||
|
|
|
|||
|
|
@ -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) =>
|
||||
<div key={"legend_item_"+index}>
|
||||
<button key={"legend_btn_"+index} onClick={handleClick}>{morse.toUpperCase()}</button>
|
||||
<span key={"legend_spn_"+index}>{morseCode[morse]}</span>
|
||||
</div>
|
||||
)
|
||||
|
||||
return (
|
||||
<div id="legend">
|
||||
<button id="test" onClick={handleClick}>Gene</button>
|
||||
{legend}
|
||||
<button id="test" onClick={handleClick}>Anya</button>
|
||||
<button id="test" onClick={handleClick}>Alexandra</button>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
"timingUnit": 1,
|
||||
"ditMaxTime": 60,
|
||||
"mainVolume": 0.2,
|
||||
"frequency": 550.0,
|
||||
"frequency": 700.0,
|
||||
"practiceSpeed": {
|
||||
"slow": 40,
|
||||
"normal": 24,
|
||||
|
|
|
|||
|
|
@ -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%;
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"version": 3,
|
||||
"mappings": "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",
|
||||
"mappings": "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",
|
||||
"sources": [
|
||||
"../scss/App.scss"
|
||||
],
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
})
|
||||
}
|
||||
|
||||
|
|
|
|||
175
src/hooks/usePaddleTelegraph.js
Normal file
175
src/hooks/usePaddleTelegraph.js
Normal file
|
|
@ -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
|
||||
|
|
@ -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
|
||||
|
||||
|
|
|
|||
|
|
@ -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%;
|
||||
|
|
|
|||
Loading…
Reference in a new issue