genemecija/learn-morse-code
1
0
Fork 0
mirror of https://github.com/genemecija/learn-morse-code.git synced 2026-01-03 07:10:14 +01:00
Code Issues Actions Packages Projects Releases Wiki Activity

Debugging process on morse display clear on keytype switch

Browse source
This commit is contained in:
Gene Mecija 2020-01-17 01:29:24 -08:00
parent a46ce4fd3f
commit c777cf013c
13 changed files with 94 additions and 108 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

21
src/App.js
View file

@ -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 (
<div id='main-content'>
<Legend />
<ModePicker />
<KeyTypePicker />
<MorseBufferContextProvider>
{keyType === "straight" && <StraightKey />}
{keyType === "electronic" && <ElectronicKey />}
{gameMode === 'practice' && <PracticeMode />}
{gameMode === 'timed' && <TimedMode />}
{gameMode === 'challenge' && <ChallengeMode />}
<KeyTypeContextProvider>
<KeyTypePicker />
{gameMode === 'practice' && <PracticeMode />}
{gameMode === 'timed' && <TimedMode />}
{gameMode === 'challenge' && <ChallengeMode />}
</KeyTypeContextProvider>
</MorseBufferContextProvider>
<MorseButton />

24
src/app-modes/PracticeMode.js
View file

@ -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 (
<>
<MorseBufferDisplay buffer={morseCharBuffer} /><br/>
<MorseDisplay morseWords={morseWords} /><br/>
{keyType === "straight" ? <StraightKey /> : <ElectronicKey />}
<MorseBufferDisplay /><br/>
<MorseDisplay /><br/>
{/* <MorseBufferDisplay buffer={morseCharBuffer} /><br/>
<MorseDisplay morseWords={morseWords} /><br/> */}
</>
);
}
export default React.memo(PracticeMode);
})

5
src/components/ElectronicKey.js
View file

@ -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)
})

6
src/components/KeyTypePicker.js
View file

@ -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() {
</button>
</div>
)
}
export default React.memo(KeyTypePicker)
})

21
src/components/MorseBufferDisplay.js
View file

@ -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) => <DitDahDisplay key={index} dd={ditdah} />)
console.log('COMPONENT LOAD: MorseBufferDisplay');
let ditDahs = morseCharBuffer.split('').map((ditdah,index) => <DitDahDisplay key={index} dd={ditdah} />)
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)
export default MorseBufferDisplay

13
src/components/MorseDisplay.js
View file

@ -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) => <MorseCard key={index} morse={word} />)
function MorseDisplay() {
console.log('COMPONENT LOAD: MorseDisplay');
const {morseWords} = useContext(MorseBufferContext)
console.log('morseWords', morseWords);
let morseCards = morseWords.map((word,index) => <MorseCard key={index} morse={word} />)
return (
<div id="morseDisplay">
@ -11,4 +16,4 @@ function MorseDisplay(props) {
)
}
export default React.memo(MorseDisplay)
export default MorseDisplay

3
src/components/StraightKey.js
View file

@ -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)
})

4
src/contexts/keyTypeContext.js
View file

@ -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})
}

4
src/contexts/morseBufferContext.js
View file

@ -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})

64
src/hooks/useElectronicKey.js
View file

@ -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

0
src/hooks/useKeySelection.js
View file

32
src/hooks/useStraightKey.js
View file

@ -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') {

5
src/index.js
View file

@ -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(
<GameModeContextProvider>
<KeyTypeContextProvider>
<App />
</KeyTypeContextProvider>
<App />
</GameModeContextProvider>
, document.getElementById('root'));