diff --git a/src/App.js b/src/App.js index 43e0f89..5d3c2df 100644 --- a/src/App.js +++ b/src/App.js @@ -8,12 +8,8 @@ import KeyTypePicker from './components/KeyTypePicker' // import GameClock from "./components/GameClock" // import ChallengeWord from "./components/ChallengeWord" import {GameModeContext} from "./contexts/gameContext" -import {KeyTypeContext} from "./contexts/keyTypeContext" +import {KeyTypeContextProvider} from "./contexts/keyTypeContext" import {MorseBufferContextProvider} from "./contexts/morseBufferContext" - -import StraightKey from './components/StraightKey' -import ElectronicKey from './components/ElectronicKey' - import PracticeMode from './app-modes/PracticeMode'; import TimedMode from './app-modes/TimedMode' import ChallengeMode from './app-modes/ChallengeMode' @@ -23,22 +19,19 @@ function App() { console.log('App.js rendered') const {gameMode} = useContext(GameModeContext) - const {keyType} = useContext(KeyTypeContext) return (
- - - {keyType === "straight" && } - {keyType === "electronic" && } - - {gameMode === 'practice' && } - {gameMode === 'timed' && } - {gameMode === 'challenge' && } + + + {gameMode === 'practice' && } + {gameMode === 'timed' && } + {gameMode === 'challenge' && } + diff --git a/src/app-modes/PracticeMode.js b/src/app-modes/PracticeMode.js index 78ca163..5b1751e 100644 --- a/src/app-modes/PracticeMode.js +++ b/src/app-modes/PracticeMode.js @@ -1,28 +1,30 @@ import React, {useContext} from 'react'; import '../css/App.css'; -import useStraightKey from '../hooks/useStraightKey'; -import useElectronicKey from '../hooks/useElectronicKey'; +import {KeyTypeContext} from "../contexts/keyTypeContext" +import StraightKey from '../components/StraightKey' +import ElectronicKey from '../components/ElectronicKey' import MorseBufferDisplay from '../components/MorseBufferDisplay' import MorseDisplay from '../components/MorseDisplay' -import {MorseBufferContext} from "../contexts/morseBufferContext" -function PracticeMode() { - +export default React.memo(function PracticeMode(props) { + console.log("COMPONENT LOADED: PracticeMode"); + const {keyType} = useContext(KeyTypeContext) // const [telegraphType, setTelegraphType] = useState('electronic') // useElectronicKey() // const {morseCharBuffer, morseWords, clearHistory} = useStraightKey('practice') - const {morseCharBuffer, morseWords} = useContext(MorseBufferContext) + return ( <> -
-
+ {keyType === "straight" ? : } +
+
+ {/*
+
*/} ); -} - -export default React.memo(PracticeMode); +}) \ No newline at end of file diff --git a/src/components/ElectronicKey.js b/src/components/ElectronicKey.js index 3d58490..b6b6637 100644 --- a/src/components/ElectronicKey.js +++ b/src/components/ElectronicKey.js @@ -1,7 +1,6 @@ import React from 'react' -// import useStraightKey from '../hooks/useStraightKey'; import useElectronicKey from '../hooks/useElectronicKey'; -export default React.memo(function StraightKey() { - useElectronicKey() +export default React.memo(function ElectronicKey(props) { + useElectronicKey(props.gameMode) }) \ No newline at end of file diff --git a/src/components/KeyTypePicker.js b/src/components/KeyTypePicker.js index 6fb4f21..b7d4213 100644 --- a/src/components/KeyTypePicker.js +++ b/src/components/KeyTypePicker.js @@ -1,7 +1,7 @@ import React, {useContext} from "react" import {KeyTypeContext} from "../contexts/keyTypeContext" -function KeyTypePicker() { +export default React.memo(function KeyTypePicker() { const {switchKeyType} = useContext(KeyTypeContext) @@ -20,6 +20,4 @@ function KeyTypePicker() {
) -} - -export default React.memo(KeyTypePicker) \ No newline at end of file +}) \ No newline at end of file diff --git a/src/components/MorseBufferDisplay.js b/src/components/MorseBufferDisplay.js index 92aa736..b8d5f7a 100644 --- a/src/components/MorseBufferDisplay.js +++ b/src/components/MorseBufferDisplay.js @@ -1,17 +1,20 @@ -import React from "react" +import React, { useContext } from "react" import DitDahDisplay from "./DitDahDisplay" import morseCode from '../data/morse-reverse.json' +import {MorseBufferContext} from "../contexts/morseBufferContext" -function MorseBufferDisplay(props) { +function MorseBufferDisplay() { + const {morseCharBuffer} = useContext(MorseBufferContext) - let ditDahs = props.buffer.split('').map((ditdah,index) => ) + console.log('COMPONENT LOAD: MorseBufferDisplay'); + let ditDahs = morseCharBuffer.split('').map((ditdah,index) => ) let alphanumeric = '' - // if (props.buffer.includes(' ')) { + // if (morseCharBuffer.includes(' ')) { - let letters = props.buffer.split(' ') + let letters = morseCharBuffer.split(' ') - if (props.buffer === '') {} + if (morseCharBuffer === '') {} else { for (let i in letters) { if (letters[i] === ' ') { @@ -27,8 +30,8 @@ function MorseBufferDisplay(props) { } } - // } else if (props.buffer !== '') { - // let letters = props.buffer + // } else if (morseCharBuffer !== '') { + // let letters = morseCharBuffer // if (morseCode[letters] === undefined) { // alphanumeric += '[?]' // } else { @@ -50,4 +53,4 @@ function MorseBufferDisplay(props) { ) } -export default React.memo(MorseBufferDisplay) \ No newline at end of file +export default MorseBufferDisplay \ No newline at end of file diff --git a/src/components/MorseDisplay.js b/src/components/MorseDisplay.js index 0eee78b..2b536df 100644 --- a/src/components/MorseDisplay.js +++ b/src/components/MorseDisplay.js @@ -1,8 +1,13 @@ -import React from "react" +import React, {useContext} from "react" import MorseCard from './MorseCard' +import {MorseBufferContext} from "../contexts/morseBufferContext" -function MorseDisplay(props) { - let morseCards = props.morseWords.map((word,index) => ) +function MorseDisplay() { + console.log('COMPONENT LOAD: MorseDisplay'); + + const {morseWords} = useContext(MorseBufferContext) + console.log('morseWords', morseWords); + let morseCards = morseWords.map((word,index) => ) return (
@@ -11,4 +16,4 @@ function MorseDisplay(props) { ) } -export default React.memo(MorseDisplay) \ No newline at end of file +export default MorseDisplay \ No newline at end of file diff --git a/src/components/StraightKey.js b/src/components/StraightKey.js index 8f2b825..cecffcc 100644 --- a/src/components/StraightKey.js +++ b/src/components/StraightKey.js @@ -1,9 +1,6 @@ import React from 'react' import useStraightKey from '../hooks/useStraightKey'; -// import useElectronicKey from '../hooks/useElectronicKey'; export default React.memo(function StraightKey(props) { - useStraightKey(props.gameMode) - }) \ No newline at end of file diff --git a/src/contexts/keyTypeContext.js b/src/contexts/keyTypeContext.js index 1013e2f..090e91c 100644 --- a/src/contexts/keyTypeContext.js +++ b/src/contexts/keyTypeContext.js @@ -4,10 +4,10 @@ const KeyTypeContext = React.createContext() class KeyTypeContextProvider extends Component { state = { - keyType: "straight" + keyType: "electronic" } - switchKeyType = (type = "straight") => { + switchKeyType = (type) => { this.setState({keyType: type}) } diff --git a/src/contexts/morseBufferContext.js b/src/contexts/morseBufferContext.js index 111e05b..f218e9e 100644 --- a/src/contexts/morseBufferContext.js +++ b/src/contexts/morseBufferContext.js @@ -8,10 +8,10 @@ function MorseBufferContextProvider(props) { // morseWords: [] // //morseCharBuffer, morseWords, clearHistory, setMorseCharBuffer, setMorseWords // } - + console.log('MorseBufferContextProvider LOADED'); const [morseCharBuffer, setMorseCharBuffer] = useState('') const [morseWords, setMorseWords] = useState([]) - + // switchKeyType = (type = "straight") => { // this.setState({keyType: type}) diff --git a/src/hooks/useElectronicKey.js b/src/hooks/useElectronicKey.js index 78ce5be..eff1103 100644 --- a/src/hooks/useElectronicKey.js +++ b/src/hooks/useElectronicKey.js @@ -1,10 +1,10 @@ import {useEffect, useContext} from 'react' -import config from '../config.json' import {MorseBufferContext} from '../contexts/morseBufferContext' +import config from '../config.json' -// SINGLE/DUAL LEVER TELEGRAPH - Iambic A +// ELECTRONIC KEY TELEGRAPH - Iambic A -function useElectronicKey(mode = 'practice') { +function useElectronicKey() { const {morseCharBuffer, setMorseCharBuffer, morseWords, setMorseWords} = useContext(MorseBufferContext) @@ -55,11 +55,7 @@ function useElectronicKey(mode = 'practice') { context = null } let frequency = config.frequency - - let toneTimer = 0 - let toneTime = 0 - let start = 0 - let end = 0 + // Promisify playing Dits and Dahs function play(ditDah) { @@ -268,26 +264,26 @@ function useElectronicKey(mode = 'practice') { } depressSyncTime = 0 } - function startGapTimer() { - gapTime = 0 - gapTimer = setInterval(() => { - gapTime += 1 + // function startGapTimer() { + // gapTime = 0 + // gapTimer = setInterval(() => { + // gapTime += 1 - // Gap between words - if (mode === 'practice' && gapTime >= wordGapMaxTime) { - setMorseCharBuffer(prev => prev + '/') - clearInterval(gapTimer) - gapTimer = 0 - gapTime = 0 - } - if (mode === 'challenge' && gapTime >= letterGapMinTime) { - setMorseCharBuffer(prev => prev + '_') - clearInterval(gapTimer) - gapTimer = 0 - gapTime = 0 - } - }, timingUnit); - } + // // Gap between words + // if (mode === 'practice' && gapTime >= wordGapMaxTime) { + // setMorseCharBuffer(prev => prev + '/') + // clearInterval(gapTimer) + // gapTimer = 0 + // gapTime = 0 + // } + // if (mode === 'challenge' && gapTime >= letterGapMinTime) { + // setMorseCharBuffer(prev => prev + '_') + // clearInterval(gapTimer) + // gapTimer = 0 + // gapTime = 0 + // } + // }, timingUnit); + // } function checkGapBetweenInputs() { // Check Gap between letters // console.log('gapTime', gapTime); @@ -295,13 +291,13 @@ function useElectronicKey(mode = 'practice') { // console.log('wordGapMaxTime', wordGapMaxTime); if (gapTime >= letterGapMinTime && gapTime < wordGapMaxTime) { // console.log('letterGapMinTime <= gapTime < wordGapMaxTime:',letterGapMinTime, gapTime, wordGapMaxTime); - if (mode === 'practice') { + // if (mode === 'practice') { setMorseCharBuffer(prev => prev + ' ') gapTime = 0 - } else if (mode === 'challenge') { - console.log("UNDERSCORE ADDED"); - setMorseCharBuffer(prev => prev + '_') - } + // } else if (mode === 'challenge') { + // console.log("UNDERSCORE ADDED"); + // setMorseCharBuffer(prev => prev + '_') + // } clearInterval(gapTimer) gapTimer = 0 } @@ -326,7 +322,7 @@ function useElectronicKey(mode = 'practice') { useEffect(() => { // PRACTICE MODE - if (morseCharBuffer.slice(-1) === '/' && mode === 'practice') { + if (morseCharBuffer.slice(-1) === '/') { // Remove forward slash let val = morseCharBuffer.slice(0,morseCharBuffer.length-1) @@ -344,6 +340,8 @@ function useElectronicKey(mode = 'practice') { // eslint-disable-next-line }, [morseCharBuffer]) + + return {morseCharBuffer, morseWords, setMorseCharBuffer, setMorseWords} } export default useElectronicKey \ No newline at end of file diff --git a/src/hooks/useKeySelection.js b/src/hooks/useKeySelection.js deleted file mode 100644 index e69de29..0000000 diff --git a/src/hooks/useStraightKey.js b/src/hooks/useStraightKey.js index fa35b91..798440e 100644 --- a/src/hooks/useStraightKey.js +++ b/src/hooks/useStraightKey.js @@ -4,12 +4,9 @@ import config from '../config.json' // STRAIGHT KEY TELEGRAPH -function useStraightKey(mode = 'practice') { +function useStraightKey() { const {morseCharBuffer, setMorseCharBuffer, morseWords, setMorseWords} = useContext(MorseBufferContext) - // const [morseCharBuffer, setMorseCharBuffer] = useState('') // e.g. '-..' - // const [morseWords, setMorseWords] = useState([]) // e.g. [['-..','.','-,'], ['...','---','...']] - let charTimer = 0 let charTime = 0 @@ -46,8 +43,6 @@ function useStraightKey(mode = 'practice') { function handleInputStart(event) { event.preventDefault() - console.log('ditmaxtime:', ditMaxTime); - if (isRunning) { return } else { @@ -130,18 +125,18 @@ function useStraightKey(mode = 'practice') { gapTime += 1 // Gap between words - if (mode === 'practice' && gapTime >= wordGapMaxTime) { + if (gapTime >= wordGapMaxTime) { setMorseCharBuffer(prev => prev + '/') clearInterval(gapTimer) gapTimer = 0 gapTime = 0 } - if (mode === 'challenge' && gapTime >= letterGapMinTime) { - setMorseCharBuffer(prev => prev + '_') - clearInterval(gapTimer) - gapTimer = 0 - gapTime = 0 - } + // if (mode === 'challenge' && gapTime >= letterGapMinTime) { + // setMorseCharBuffer(prev => prev + '_') + // clearInterval(gapTimer) + // gapTimer = 0 + // gapTime = 0 + // } }, timingUnit); } @@ -149,11 +144,11 @@ function useStraightKey(mode = 'practice') { // Check Gap between letters if (gapTime >= letterGapMinTime && gapTime < wordGapMaxTime) { - if (mode === 'practice') { + // if (mode === 'practice') { setMorseCharBuffer(prev => prev + ' ') - } else if (mode === 'challenge') { - setMorseCharBuffer(prev => prev + '_') - } + // } else if (mode === 'challenge') { + // setMorseCharBuffer(prev => prev + '_') + // } clearInterval(gapTimer) gapTimer = 0 } @@ -184,7 +179,7 @@ function useStraightKey(mode = 'practice') { useEffect(() => { // PRACTICE MODE - if (morseCharBuffer.slice(-1) === '/' && mode === 'practice') { + if (morseCharBuffer.slice(-1) === '/') { // Remove forward slash let val = morseCharBuffer.slice(0,morseCharBuffer.length-1) @@ -195,7 +190,6 @@ function useStraightKey(mode = 'practice') { } setMorseCharBuffer('') } - console.log('morseCharBuffer:', morseCharBuffer, '|'); // CHALLENGE MODE: leave forward slash there; to be parsed by ChallengeDisplay.js // else if (morseCharBuffer.slice(-1) === '/' && mode === 'challenge') { diff --git a/src/index.js b/src/index.js index 83e7fd2..3c21a76 100644 --- a/src/index.js +++ b/src/index.js @@ -4,14 +4,11 @@ import './index.css'; import App from './App'; import * as serviceWorker from './serviceWorker'; import {GameModeContextProvider} from "./contexts/gameContext" -import {KeyTypeContextProvider} from "./contexts/keyTypeContext" ReactDOM.render( - - - + , document.getElementById('root'));