diff --git a/src/App.js b/src/App.js
index c22859d..27dbfe7 100644
--- a/src/App.js
+++ b/src/App.js
@@ -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() {
+
- {gameMode === 'practice' &&
- <>
- {/* {keyType === "straight" ?
- : } */}
-
- {/*
-
*/}
-
+
+ {keyType === "straight" ?
+ :
}
+
+ {gameMode === 'practice' &&
+
+ }
+
{/* {gameMode === 'timed' &&
<>
{keyType === "straight" ?
@@ -64,19 +61,19 @@ export default React.memo(function App() {
- }
+ } */}
+
{gameMode === 'challenge' &&
<>
-
-
- {keyType === "straight" ?
- : }
-
-
+
+
+
+
- } */}
+ }
+
diff --git a/src/app-modes/PracticeMode.js b/src/app-modes/PracticeMode.js
index 1cda927..ca7b645 100644
--- a/src/app-modes/PracticeMode.js
+++ b/src/app-modes/PracticeMode.js
@@ -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" ? : }
diff --git a/src/components/ElectronicKey.js b/src/components/ElectronicKey.js
index bd23ee7..ebf5b58 100644
--- a/src/components/ElectronicKey.js
+++ b/src/components/ElectronicKey.js
@@ -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
\ No newline at end of file
+ useElectronicKey()
+})
\ No newline at end of file
diff --git a/src/components/KeyTypePicker.js b/src/components/KeyTypePicker.js
index f5cddc9..6f3f452 100644
--- a/src/components/KeyTypePicker.js
+++ b/src/components/KeyTypePicker.js
@@ -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')}
diff --git a/src/components/StraightKey.js b/src/components/StraightKey.js
index 870ae3f..57195ea 100644
--- a/src/components/StraightKey.js
+++ b/src/components/StraightKey.js
@@ -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()
})
\ No newline at end of file
diff --git a/src/components/WordsPerMinute.js b/src/components/WordsPerMinute.js
index 37a394a..57c93d1 100644
--- a/src/components/WordsPerMinute.js
+++ b/src/components/WordsPerMinute.js
@@ -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 (
diff --git a/src/contexts/wpmContext.js b/src/contexts/wpmContext.js
index 536b727..81ecbb2 100644
--- a/src/contexts/wpmContext.js
+++ b/src/contexts/wpmContext.js
@@ -1,11 +1,15 @@
import React, {useState} from "react"
+
const WPMContext = React.createContext()
function WPMContextProvider(props) {
+
const [wpm, setWPM] = useState(15)
return (
-
+
{props.children}
)
diff --git a/src/hooks/useElectronicKey.js b/src/hooks/useElectronicKey.js
index b91b24b..b6a393c 100644
--- a/src/hooks/useElectronicKey.js
+++ b/src/hooks/useElectronicKey.js
@@ -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
diff --git a/src/hooks/useMorsePlayer copy.js b/src/hooks/useMorsePlayer copy.js
index b43e350..7cb4276 100644
--- a/src/hooks/useMorsePlayer copy.js
+++ b/src/hooks/useMorsePlayer copy.js
@@ -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
\ No newline at end of file
+export default useMorsePlayerCopy
\ No newline at end of file
diff --git a/src/hooks/useStraightKey.js b/src/hooks/useStraightKey.js
index dce0bdd..bfba50c 100644
--- a/src/hooks/useStraightKey.js
+++ b/src/hooks/useStraightKey.js
@@ -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
diff --git a/src/hooks/useTelegraphKey.js b/src/hooks/useTelegraphKey.js
deleted file mode 100644
index a65092e..0000000
--- a/src/hooks/useTelegraphKey.js
+++ /dev/null
@@ -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
\ No newline at end of file