mirror of
https://github.com/genemecija/learn-morse-code.git
synced 2025-12-06 07:02:00 +01:00
Added paddles for electronic key
This commit is contained in:
Gene Mecija
parent
d681c3d237
commit
ee4f87ea35
|
|
@ -1,6 +1,6 @@
|
|||
import React, {useContext, useState} from 'react';
|
||||
import './css/App.css';
|
||||
import MorseButton from './components/MorseButton'
|
||||
import MorseButtons from './components/MorseButtons'
|
||||
import ModePicker from './components/ModePicker'
|
||||
import KeyTypePicker from './components/KeyTypePicker'
|
||||
// import MorseDisplay from './components/MorseDisplay'
|
||||
|
|
@ -40,10 +40,10 @@ function App() {
|
|||
{gameMode === 'practice' && <PracticeMode />}
|
||||
{/* {gameMode === 'timed' && <TimedMode />}
|
||||
{gameMode === 'challenge' && <ChallengeMode />} */}
|
||||
<MorseButtons />
|
||||
</KeyTypeContextProvider>
|
||||
</MorseBufferContextProvider>
|
||||
|
||||
<MorseButton />
|
||||
</div>
|
||||
);
|
||||
|
||||
|
|
|
|||
|
|
@ -16,6 +16,18 @@ export default React.memo(function KeyTypePicker() {
|
|||
} else { button.classList.remove('selected')}
|
||||
})
|
||||
|
||||
if (e.target.id === 'electronic') {
|
||||
document.querySelector('#morseButton').classList.add('showPaddles')
|
||||
document.querySelector('.paddle').classList.add('showPaddles')
|
||||
document.querySelector('.paddle#left').classList.add('showPaddles')
|
||||
document.querySelector('.paddle#right').classList.add('showPaddles')
|
||||
} else {
|
||||
document.querySelector('#morseButton').classList.remove('showPaddles')
|
||||
document.querySelector('.paddle').classList.remove('showPaddles')
|
||||
document.querySelector('.paddle#left').classList.remove('showPaddles')
|
||||
document.querySelector('.paddle#right').classList.remove('showPaddles')
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
return (
|
||||
|
|
|
|||
|
|
@ -1,6 +1,5 @@
|
|||
import React from "react"
|
||||
import morseCode from '../data/morse-code.json'
|
||||
|
||||
import useMorsePlayer from "../hooks/useMorsePlayer";
|
||||
|
||||
function Legend() {
|
||||
|
|
|
|||
|
|
@ -1,9 +0,0 @@
|
|||
import React from "react"
|
||||
|
||||
function MorseButton() {
|
||||
return (
|
||||
<div id="morseButton"></div>
|
||||
)
|
||||
}
|
||||
|
||||
export default React.memo(MorseButton)
|
||||
14
src/components/MorseButtons.js
Normal file
14
src/components/MorseButtons.js
Normal file
|
|
@ -0,0 +1,14 @@
|
|||
import React, { useContext } from "react"
|
||||
import { KeyTypeContext } from "../contexts/keyTypeContext"
|
||||
|
||||
export default React.memo(function MorseButtons() {
|
||||
|
||||
const {keyType} = useContext(KeyTypeContext)
|
||||
|
||||
return (
|
||||
<div id="morseButton">
|
||||
<button className="paddle" id="left"></button>
|
||||
<button className="paddle" id="right"></button>
|
||||
</div>
|
||||
)
|
||||
})
|
||||
|
|
@ -2,7 +2,7 @@
|
|||
"timingUnit": 1,
|
||||
"ditMaxTime": 60,
|
||||
"mainVolume": 0.2,
|
||||
"frequency": 550.0,
|
||||
"frequency": 650.0,
|
||||
"practiceSpeed": {
|
||||
"slow": 40,
|
||||
"normal": 24,
|
||||
|
|
|
|||
|
|
@ -53,8 +53,9 @@ html, body {
|
|||
-webkit-box-pack: space-evenly;
|
||||
-ms-flex-pack: space-evenly;
|
||||
justify-content: space-evenly;
|
||||
-ms-flex-item-align: center;
|
||||
align-self: center;
|
||||
position: absolute;
|
||||
-ms-flex-item-align: left;
|
||||
align-self: left;
|
||||
-ms-flex-wrap: wrap;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
|
@ -86,14 +87,61 @@ html, body {
|
|||
}
|
||||
|
||||
#morseButton {
|
||||
width: 100px !important;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
margin: 30px;
|
||||
background: goldenrod;
|
||||
border-radius: 50%;
|
||||
border-radius: 50px;
|
||||
-ms-flex-item-align: center;
|
||||
-ms-grid-row-align: center;
|
||||
align-self: center;
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
-webkit-transition: all 500ms ease-in-out;
|
||||
transition: all 500ms ease-in-out;
|
||||
}
|
||||
|
||||
#morseButton.showPaddles {
|
||||
width: 239px;
|
||||
background: transparent;
|
||||
-webkit-box-shadow: 0px 0px 0px transparent;
|
||||
box-shadow: 0px 0px 0px transparent;
|
||||
}
|
||||
|
||||
.paddle {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background: goldenrod;
|
||||
margin: 0px;
|
||||
border: 0px;
|
||||
-webkit-transition: all 500ms ease-in-out;
|
||||
transition: all 500ms ease-in-out;
|
||||
}
|
||||
|
||||
.paddle#left {
|
||||
border-radius: 50px 0 0 50px;
|
||||
}
|
||||
|
||||
.paddle#right {
|
||||
border-radius: 0 50px 50px 0;
|
||||
}
|
||||
|
||||
.paddle.showPaddles {
|
||||
width: 250px;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
.paddle#left.showPaddles {
|
||||
margin-right: 7px;
|
||||
}
|
||||
|
||||
.paddle#right.showPaddles {
|
||||
margin-left: 7px;
|
||||
}
|
||||
|
||||
#challengeWord {
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"version": 3,
|
||||
"mappings": "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",
|
||||
"mappings": "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",
|
||||
"sources": [
|
||||
"../scss/App.scss"
|
||||
],
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@ function useElectronicKey() {
|
|||
const timingUnit = config.timingUnit
|
||||
|
||||
let ratio = .2
|
||||
const ditMaxTime = 85 // ditMaxTime * 0.365 to get ms, e.g. 85 * 0.365 ~= 31ms
|
||||
const ditMaxTime = 85 // 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
|
||||
|
|
@ -63,6 +63,10 @@ function useElectronicKey() {
|
|||
let start = 0
|
||||
let end = 0
|
||||
|
||||
function getTime() {
|
||||
let today = new Date()
|
||||
return today.getMilliseconds()
|
||||
}
|
||||
|
||||
// Promisify playing Dits and Dahs
|
||||
function play(ditDah) {
|
||||
|
|
@ -93,6 +97,8 @@ function useElectronicKey() {
|
|||
setTimeout(() => {
|
||||
g.gain.setTargetAtTime(0.0001, context.currentTime, 0.001)
|
||||
o.stop(context.currentTime + 0.05)
|
||||
|
||||
// start = getTime()
|
||||
}, playDuration)
|
||||
// g.gain.setTargetAtTime(0.0001, startTime + playDuration/1000, 0.001)
|
||||
// o.stop(startTime + playDuration/1000 + 0.05)
|
||||
|
|
@ -116,11 +122,11 @@ function useElectronicKey() {
|
|||
checkGapBetweenInputs()
|
||||
setMorseCharBuffer(prev => prev + ditDah)
|
||||
|
||||
// for troubleshooting ditDah length in milliseconds
|
||||
toneTimer = setInterval(() => {
|
||||
toneTime += 1
|
||||
}, 1);
|
||||
start = toneTime
|
||||
// // for troubleshooting ditDah length in milliseconds
|
||||
// toneTimer = setInterval(() => {
|
||||
// toneTime += 1
|
||||
// }, 1);
|
||||
// start = toneTime
|
||||
|
||||
|
||||
play(ditDah)
|
||||
|
|
@ -143,7 +149,7 @@ function useElectronicKey() {
|
|||
} else {
|
||||
setTimeout(() => {
|
||||
resolve();
|
||||
}, delay)
|
||||
}, ditMaxTime*3)
|
||||
}
|
||||
});
|
||||
}
|
||||
|
|
@ -211,12 +217,17 @@ function useElectronicKey() {
|
|||
|
||||
function handleInputStart(event) {
|
||||
event.preventDefault()
|
||||
|
||||
if (event.keyCode === 71) {
|
||||
queue = ['.',' ','.',' ','.',' ','.',' ','-','.','.','.','.','-']
|
||||
executeQueue()
|
||||
}
|
||||
|
||||
paddlesReleasedSimultaneously = false
|
||||
|
||||
if (event.repeat) { return }
|
||||
|
||||
if (event.keyCode === 188) {
|
||||
if (event.keyCode === 188 || event.target.id === "left") {
|
||||
leftIsPressed = true
|
||||
if (!rightIsPressed) { pressedFirst = 'left'}
|
||||
|
||||
|
|
@ -225,7 +236,7 @@ function useElectronicKey() {
|
|||
sendPressedToQueue()
|
||||
}
|
||||
}
|
||||
else if (event.keyCode === 190) {
|
||||
else if (event.keyCode === 190 || event.target.id === "right") {
|
||||
rightIsPressed = true
|
||||
if (!leftIsPressed) { pressedFirst = 'right'}
|
||||
|
||||
|
|
@ -239,7 +250,7 @@ function useElectronicKey() {
|
|||
function handleInputEnd(event) {
|
||||
event.preventDefault()
|
||||
|
||||
if (event.keyCode === 188) {
|
||||
if (event.keyCode === 188 || event.target.id === "left") {
|
||||
leftIsPressed = false
|
||||
|
||||
if (pressedFirst === 'left') { pressedFirst = null }
|
||||
|
|
@ -247,7 +258,7 @@ function useElectronicKey() {
|
|||
if (!depressSyncTimerRunning) { startDepressSyncTimer() }
|
||||
else { stopDepressSyncTimer() }
|
||||
}
|
||||
if (event.keyCode === 190) {
|
||||
if (event.keyCode === 190 || event.target.id === "right") {
|
||||
rightIsPressed = false
|
||||
if (pressedFirst === 'right') { pressedFirst = null }
|
||||
|
||||
|
|
@ -298,15 +309,33 @@ function useElectronicKey() {
|
|||
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)
|
||||
const paddleLeft = document.querySelector('.paddle#left')
|
||||
const paddleRight = document.querySelector('.paddle#right')
|
||||
|
||||
paddleLeft.addEventListener('mousedown', handleInputStart)
|
||||
paddleLeft.addEventListener('touchstart', handleInputStart)
|
||||
paddleLeft.addEventListener('mouseup', handleInputEnd)
|
||||
paddleLeft.addEventListener('touchend', handleInputEnd)
|
||||
paddleRight.addEventListener('mousedown', handleInputStart)
|
||||
paddleRight.addEventListener('touchstart', handleInputStart)
|
||||
paddleRight.addEventListener('mouseup', handleInputEnd)
|
||||
paddleRight.addEventListener('touchend', handleInputEnd)
|
||||
|
||||
return function cleanup() {
|
||||
document.removeEventListener('keydown', handleInputStart)
|
||||
document.removeEventListener('keyup', handleInputEnd)
|
||||
|
||||
const paddleLeft = document.querySelector('.paddle#left')
|
||||
const paddleRight = document.querySelector('.paddle#right')
|
||||
|
||||
paddleLeft.removeEventListener('mousedown', handleInputStart)
|
||||
paddleLeft.removeEventListener('touchstart', handleInputStart)
|
||||
paddleLeft.removeEventListener('mouseup', handleInputEnd)
|
||||
paddleLeft.removeEventListener('touchend', handleInputEnd)
|
||||
paddleRight.removeEventListener('mousedown', handleInputStart)
|
||||
paddleRight.removeEventListener('touchstart', handleInputStart)
|
||||
paddleRight.removeEventListener('mouseup', handleInputEnd)
|
||||
paddleRight.removeEventListener('touchend', handleInputEnd)
|
||||
}
|
||||
// eslint-disable-next-line
|
||||
}, [])
|
||||
|
|
|
|||
|
|
@ -50,7 +50,10 @@ function useStraightKey() {
|
|||
|
||||
// TODO:
|
||||
// Make sure only one touchdown event registered at a time
|
||||
if ((event.keyCode !== 32 && event.target.id !== "morseButton") ||
|
||||
if ((event.keyCode !== 32 &&
|
||||
event.target.id !== "morseButton" &&
|
||||
event.target.id !== "left" &&
|
||||
event.target.id !== "right") ||
|
||||
(event.repeat)) {
|
||||
return
|
||||
}
|
||||
|
|
@ -77,8 +80,6 @@ function useStraightKey() {
|
|||
}
|
||||
|
||||
function startCharTimer() {
|
||||
// Reset character time
|
||||
charTime = 0
|
||||
// Start Character Timer
|
||||
charTimer = setInterval(() => {
|
||||
charTime += 1
|
||||
|
|
@ -90,14 +91,15 @@ function useStraightKey() {
|
|||
|
||||
if (isRunning) {
|
||||
isRunning = false
|
||||
if ((event.keyCode !== 32 && event.target.id !== "morseButton") ||
|
||||
if ((event.keyCode !== 32 &&
|
||||
event.target.id !== "morseButton" &&
|
||||
event.target.id !== "left" &&
|
||||
event.target.id !== "right") ||
|
||||
(event.repeat)) {
|
||||
return
|
||||
}
|
||||
// if (event.repeat) {
|
||||
// return
|
||||
// }
|
||||
|
||||
console.log('charTime:', charTime);
|
||||
if (charTime <= ditMaxTime) {
|
||||
setMorseCharBuffer(prev => prev + '.')
|
||||
} else {
|
||||
|
|
@ -117,6 +119,7 @@ function useStraightKey() {
|
|||
function stopCharTimer() {
|
||||
clearInterval(charTimer)
|
||||
charTimer = 0
|
||||
charTime = 0
|
||||
}
|
||||
|
||||
function startGapTimer() {
|
||||
|
|
@ -161,20 +164,43 @@ function useStraightKey() {
|
|||
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)
|
||||
// const morseButton = document.getElementById('morseButton')
|
||||
// morseButton.addEventListener('mousedown', handleInputStart)
|
||||
// morseButton.addEventListener('touchstart', handleInputStart)
|
||||
// morseButton.addEventListener('mouseup', handleInputEnd)
|
||||
// morseButton.addEventListener('touchend', handleInputEnd)
|
||||
const paddleLeft = document.querySelector('.paddle#left')
|
||||
const paddleRight = document.querySelector('.paddle#right')
|
||||
|
||||
paddleLeft.addEventListener('mousedown', handleInputStart)
|
||||
paddleLeft.addEventListener('touchstart', handleInputStart)
|
||||
paddleLeft.addEventListener('mouseup', handleInputEnd)
|
||||
paddleLeft.addEventListener('touchend', handleInputEnd)
|
||||
paddleRight.addEventListener('mousedown', handleInputStart)
|
||||
paddleRight.addEventListener('touchstart', handleInputStart)
|
||||
paddleRight.addEventListener('mouseup', handleInputEnd)
|
||||
paddleRight.addEventListener('touchend', handleInputEnd)
|
||||
|
||||
return function cleanup() {
|
||||
document.removeEventListener('keydown', handleInputStart)
|
||||
document.removeEventListener('keyup', handleInputEnd)
|
||||
const morseButton = document.getElementById('morseButton')
|
||||
morseButton.removeEventListener('mousedown', handleInputStart)
|
||||
morseButton.removeEventListener('touchstart', handleInputStart)
|
||||
morseButton.removeEventListener('mouseup', handleInputEnd)
|
||||
morseButton.removeEventListener('touchend', handleInputEnd)
|
||||
|
||||
const paddleLeft = document.querySelector('.paddle#left')
|
||||
const paddleRight = document.querySelector('.paddle#right')
|
||||
|
||||
paddleLeft.removeEventListener('mousedown', handleInputStart)
|
||||
paddleLeft.removeEventListener('touchstart', handleInputStart)
|
||||
paddleLeft.removeEventListener('mouseup', handleInputEnd)
|
||||
paddleLeft.removeEventListener('touchend', handleInputEnd)
|
||||
paddleRight.removeEventListener('mousedown', handleInputStart)
|
||||
paddleRight.removeEventListener('touchstart', handleInputStart)
|
||||
paddleRight.removeEventListener('mouseup', handleInputEnd)
|
||||
paddleRight.removeEventListener('touchend', handleInputEnd)
|
||||
// const morseButton = document.getElementById('morseButton')
|
||||
// morseButton.removeEventListener('mousedown', handleInputStart)
|
||||
// morseButton.removeEventListener('touchstart', handleInputStart)
|
||||
// morseButton.removeEventListener('mouseup', handleInputEnd)
|
||||
// morseButton.removeEventListener('touchend', handleInputEnd)
|
||||
// clearHistory()
|
||||
}
|
||||
// eslint-disable-next-line
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@ $main-bg-color: #FFF;
|
|||
$main-box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.2);
|
||||
$main-border-radius: 0px;
|
||||
$border-radius-neumorphic: 0px -6px 10px rgba(255, 255, 255, 1), 0px 4px 15px rgba(0, 0, 0, 0.15);
|
||||
$border-radius-neumorphic-active: 0 15px 20px rgba(0, 0, 0, 0.015), inset 0px -2px 5px rgb(255, 255, 255), inset 0px 2px 5px rgba(0, 0, 0, 0.15);
|
||||
|
||||
html, body {
|
||||
margin: 0px;
|
||||
|
|
@ -39,7 +40,8 @@ html, body {
|
|||
width: 450px;
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
align-self: center;
|
||||
position: absolute;
|
||||
align-self: left;
|
||||
flex-wrap: wrap;
|
||||
|
||||
div {
|
||||
|
|
@ -63,13 +65,48 @@ html, body {
|
|||
}
|
||||
|
||||
#morseButton {
|
||||
width: 100px !important;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
margin: 30px;
|
||||
background: goldenrod;
|
||||
border-radius: 50%;
|
||||
// background: goldenrod;
|
||||
border-radius: 50px;
|
||||
align-self: center;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
transition: all 500ms ease-in-out;
|
||||
}
|
||||
#morseButton.showPaddles {
|
||||
width: 239px;
|
||||
background: transparent;
|
||||
box-shadow: 0px 0px 0px transparent;
|
||||
}
|
||||
|
||||
.paddle {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background: goldenrod;
|
||||
margin: 0px;
|
||||
border: 0px;
|
||||
transition: all 500ms ease-in-out;
|
||||
}
|
||||
.paddle#left {
|
||||
border-radius: 50px 0 0 50px;
|
||||
}
|
||||
.paddle#right {
|
||||
border-radius: 0 50px 50px 0;
|
||||
}
|
||||
.paddle.showPaddles {
|
||||
width: 250px;
|
||||
height: 100px;
|
||||
}
|
||||
.paddle#left.showPaddles{
|
||||
margin-right: 7px;
|
||||
}
|
||||
.paddle#right.showPaddles{
|
||||
margin-left: 7px;
|
||||
}
|
||||
|
||||
#challengeWord {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
|
|
|||
Loading…
Reference in a new issue