From 71625371e2385ad9a6d80011d9ee8855ed4e824a Mon Sep 17 00:00:00 2001 From: Gene Mecija Date: Sat, 18 Jan 2020 19:35:11 -0800 Subject: [PATCH] Challenge mode progress --- src/App.js | 25 ++++-- src/app-modes/ChallengeMode.js | 18 ++-- src/app-modes/PracticeMode.js | 6 +- src/app-modes/TimedMode.js | 4 +- src/components/ChallengeBufferDisplay.js | 50 ++++++----- src/components/ChallengeWord.js | 9 +- src/components/ModePicker.js | 4 +- src/components/MorseButtons.js | 6 +- .../{MorseDisplay.js => MorseHistory.js} | 4 +- src/contexts/gameContext.js | 25 ++---- src/css/App.css | 1 + src/css/App.css.map | 2 +- src/hooks/useElectronicKey.js | 40 ++++----- src/hooks/useStraightKey.js | 88 ++++++++----------- src/index.js | 10 ++- src/scss/App.scss | 1 + 16 files changed, 143 insertions(+), 150 deletions(-) rename src/components/{MorseDisplay.js => MorseHistory.js} (82%) diff --git a/src/App.js b/src/App.js index 5cbbcee..7e8eeab 100644 --- a/src/App.js +++ b/src/App.js @@ -8,7 +8,7 @@ import KeyTypePicker from './components/KeyTypePicker' // import GameClock from "./components/GameClock" // import ChallengeWord from "./components/ChallengeWord" import {GameModeContext} from "./contexts/gameContext" -import {KeyTypeContextProvider} from "./contexts/keyTypeContext" +import {KeyTypeContext} from "./contexts/keyTypeContext" import {MorseBufferContextProvider} from "./contexts/morseBufferContext" import PracticeMode from './app-modes/PracticeMode'; import TimedMode from './app-modes/TimedMode' @@ -16,13 +16,17 @@ import ChallengeMode from './app-modes/ChallengeMode' import Legend from './components/Legend'; import MorseBufferDisplay from './components/MorseBufferDisplay' -import MorseDisplay from './components/MorseDisplay' +import MorseHistory from './components/MorseHistory' +import StraightKey from './components/StraightKey'; +import ElectronicKey from './components/ElectronicKey'; function App() { console.log('App.js rendered') const {gameMode} = useContext(GameModeContext) + const {keyType} = useContext(KeyTypeContext) + // const [keyType, setKeyType] = useState('straight') // function handleClick(e) { @@ -35,13 +39,20 @@ function App() { - - {gameMode === 'practice' && } - {/* {gameMode === 'timed' && } - {gameMode === 'challenge' && } */} + {keyType === "straight" ? + : } + {gameMode === 'practice' && + <> +
+
+
+ + } + {/* {gameMode === 'timed' && } */} + {gameMode === 'challenge' && } + - diff --git a/src/app-modes/ChallengeMode.js b/src/app-modes/ChallengeMode.js index 5c941b2..664c52c 100644 --- a/src/app-modes/ChallengeMode.js +++ b/src/app-modes/ChallengeMode.js @@ -1,17 +1,19 @@ -import React from 'react'; +import React, {useContext} from 'react'; import '../css/App.css'; import morseCode from '../data/morse-reverse.json' -import useStraightKey from '../hooks/useStraightKey'; -// import ChallengeWord from '../components/ChallengeWord' +import ChallengeWord from '../components/ChallengeWord' // import MorseBufferDisplay from '../components/MorseBufferDisplay' // import ChallengeDisplay from '../components/ChallengeDisplay'; import ChallengeBufferDisplay from '../components/ChallengeBufferDisplay'; +import { MorseBufferContext } from '../contexts/morseBufferContext'; function ChallengeMode() { console.log("ChallengeMode loaded"); let word = "morse" - const {morseCharBuffer} = useStraightKey('challenge') + const {morseCharBuffer} = useContext(MorseBufferContext) + + // console.log('morseCharBuffer:', morseCharBuffer, '|END'); let morseLetters = morseCharBuffer.split('_').filter(l => l !== '') // console.log('morseLetters:', morseLetters, morseLetters.length); @@ -23,6 +25,10 @@ function ChallengeMode() { console.log("ChallengeMode loaded"); let morseAlpha = morseCode[morseLetter] let challengeLetter = challengeLetters[index].toLowerCase() + console.log('morseAlpha', morseAlpha); + console.log('morseLetter', morseLetter); + console.log('challengeLetter', challengeLetter); + if (morseAlpha === challengeLetter) { correctIndexes.push(index) // console.log('MATCH', correctIndexes); @@ -50,8 +56,8 @@ function ChallengeMode() { console.log("ChallengeMode loaded"); return ( <> -
{spannedWord}
- + + ); diff --git a/src/app-modes/PracticeMode.js b/src/app-modes/PracticeMode.js index 39145a4..fb831a3 100644 --- a/src/app-modes/PracticeMode.js +++ b/src/app-modes/PracticeMode.js @@ -4,7 +4,7 @@ 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 MorseHistory from '../components/MorseHistory' export default React.memo(function PracticeMode() { @@ -13,9 +13,9 @@ export default React.memo(function PracticeMode() { return ( <> - {keyType === "straight" ? : } + {/* {keyType === "straight" ? : }
-
+
*/} ); diff --git a/src/app-modes/TimedMode.js b/src/app-modes/TimedMode.js index 9ee1ee4..b317d63 100644 --- a/src/app-modes/TimedMode.js +++ b/src/app-modes/TimedMode.js @@ -3,7 +3,7 @@ import '../css/App.css'; import useStraightKey from '../hooks/useStraightKey'; import GameClock from '../components/GameClock' import MorseBufferDisplay from '../components/MorseBufferDisplay' -import MorseDisplay from '../components/MorseDisplay' +import MorseHistory from '../components/MorseHistory' function TimedMode() { @@ -15,7 +15,7 @@ function TimedMode() { <>
- + ); diff --git a/src/components/ChallengeBufferDisplay.js b/src/components/ChallengeBufferDisplay.js index 4c53f75..855b8a0 100644 --- a/src/components/ChallengeBufferDisplay.js +++ b/src/components/ChallengeBufferDisplay.js @@ -1,30 +1,34 @@ -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 ChallengeBufferDisplay(props) { - // INCREMENTING COUNTER TO MONITOR COMPONENT RELOADING - // console.log('ChallengeMode') - if (!document.getElementById('counter')) { - let counter = document.createElement('h1') - let holder = document.createElement('h3') - counter.id = 'counter' - holder.id = 'holder' - counter.innerText = "0" - document.querySelector('#main-content').appendChild(counter) - document.querySelector('#main-content').appendChild(holder) - } else { - let num = document.getElementById('counter').innerText - document.getElementById('counter').innerText = Number(num) + 1 - document.getElementById('holder').innerText = props.buffer - } - // + // // INCREMENTING COUNTER TO MONITOR COMPONENT RELOADING + // // console.log('ChallengeMode') + // if (!document.getElementById('counter')) { + // let counter = document.createElement('h1') + // let holder = document.createElement('h3') + // counter.id = 'counter' + // holder.id = 'holder' + // counter.innerText = "0" + // document.querySelector('#main-content').appendChild(counter) + // document.querySelector('#main-content').appendChild(holder) + // } else { + // let num = document.getElementById('counter').innerText + // document.getElementById('counter').innerText = Number(num) + 1 + // document.getElementById('holder').innerText = buffer + // } + const {morseCharBuffer} = useContext(MorseBufferContext) + + let buffer = morseCharBuffer.slice(0,-1).replace(/_/g, ' ') + console.log('buffer', buffer); let ditDahs = [] let incorrectIndex = props.incorrectIndex - let morseLetters = props.buffer.split(' ') + let morseLetters = buffer.split(' ') if (incorrectIndex) { for (let i in morseLetters) { @@ -37,14 +41,14 @@ function ChallengeBufferDisplay(props) { } } } else { - ditDahs = props.buffer.split('').map((ditdah,index) => ) + ditDahs = buffer.split('').map((ditdah,index) => ) } let alphanumeric = '' - let letters = props.buffer.split(' ') + let letters = buffer.split(' ') - if (props.buffer === '') {} + if (buffer === '') {} else { for (let i in letters) { if (letters[i] === ' ') { @@ -60,8 +64,8 @@ function ChallengeBufferDisplay(props) { } } - // } else if (props.buffer !== '') { - // let letters = props.buffer + // } else if (buffer !== '') { + // let letters = buffer // if (morseCode[letters] === undefined) { // alphanumeric += '[?]' // } else { diff --git a/src/components/ChallengeWord.js b/src/components/ChallengeWord.js index 84571ae..5c5f944 100644 --- a/src/components/ChallengeWord.js +++ b/src/components/ChallengeWord.js @@ -1,10 +1,7 @@ import React from "react" -function ChallengeWord(props) { - +export default React.memo(function ChallengeWord(props) { return ( -
{spannedWord}
+
{props.word}
) -} - -export default React.memo(ChallengeWord) \ No newline at end of file +}) \ No newline at end of file diff --git a/src/components/ModePicker.js b/src/components/ModePicker.js index 723d25b..89cca8c 100644 --- a/src/components/ModePicker.js +++ b/src/components/ModePicker.js @@ -3,10 +3,10 @@ import {GameModeContext} from "../contexts/gameContext" function ModePicker() { - const {switchGameModeTo} = useContext(GameModeContext) + const {setGameMode} = useContext(GameModeContext) function handleClick(e) { - switchGameModeTo(e.target.id) + setGameMode(e.target.id) console.log("Switched to " + e.target.id + " mode."); } diff --git a/src/components/MorseButtons.js b/src/components/MorseButtons.js index 050ace4..109a929 100644 --- a/src/components/MorseButtons.js +++ b/src/components/MorseButtons.js @@ -1,10 +1,6 @@ -import React, { useContext } from "react" -import { KeyTypeContext } from "../contexts/keyTypeContext" +import React from "react" export default React.memo(function MorseButtons() { - - const {keyType} = useContext(KeyTypeContext) - return (
diff --git a/src/components/MorseDisplay.js b/src/components/MorseHistory.js similarity index 82% rename from src/components/MorseDisplay.js rename to src/components/MorseHistory.js index 23796e2..69a2709 100644 --- a/src/components/MorseDisplay.js +++ b/src/components/MorseHistory.js @@ -2,14 +2,14 @@ import React, {useContext} from "react" import MorseCard from './MorseCard' import {MorseBufferContext} from "../contexts/morseBufferContext" -export default (function MorseDisplay() { +export default (function MorseHistory() { const {morseWords} = useContext(MorseBufferContext) let morseCards = morseWords.map((word,index) => ) return ( -
+
{morseCards}
) diff --git a/src/contexts/gameContext.js b/src/contexts/gameContext.js index 890527e..b7f2d9d 100644 --- a/src/contexts/gameContext.js +++ b/src/contexts/gameContext.js @@ -1,23 +1,14 @@ -import React, {Component} from "react" +import React, {useState} from "react" const GameModeContext = React.createContext() -class GameModeContextProvider extends Component { - state = { - gameMode: "practice" - } - - switchGameModeTo = (mode = "practice") => { - this.setState({gameMode: mode}) - } - - render() { - return ( - - {this.props.children} - - ) - } +function GameModeContextProvider(props) { + const [gameMode, setGameMode] = useState('practice') + return ( + + {props.children} + + ) } export {GameModeContextProvider, GameModeContext} diff --git a/src/css/App.css b/src/css/App.css index 8183329..40966c0 100644 --- a/src/css/App.css +++ b/src/css/App.css @@ -114,6 +114,7 @@ html, body { } .paddle { + font-size: 60px; width: 100px; height: 100px; background: goldenrod; diff --git a/src/css/App.css.map b/src/css/App.css.map index 629bf3a..1a4a815 100644 --- a/src/css/App.css.map +++ b/src/css/App.css.map @@ -1,6 +1,6 @@ { "version": 3, - "mappings": "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", + "mappings": "AAMA,AAAA,IAAI,EAAE,IAAI,CAAC;EACP,MAAM,EAAE,GAAG;EACX,OAAO,EAAE,GAAG;EACZ,MAAM,EAAE,IAAI;EACZ,KAAK,EAAE,IAAI;EACX,UAAU,EAAE,UAAU;EACtB,UAAU,EAZE,IAAI;CAcnB;;AACD,AAAA,KAAK,CAAC;EACF,MAAM,EAAE,IAAI;EACZ,OAAO,EAAE,IAAI;EACb,eAAe,EAAE,MAAM;EACvB,WAAW,EAAE,MAAM;EACnB,KAAK,EAAE,IAAI;CACd;;AACD,AAAA,YAAY,CAAC;EACT,OAAO,EAAE,IAAI;EACb,UAAU,EAAE,MAAM;CAYrB;;AAdD,AAGI,YAHQ,CAGR,MAAM,CAAC;EACH,UAAU,EAAE,OAAO;EACnB,MAAM,EAAE,IAAI;EACZ,OAAO,EAAE,GAAG;EACZ,UAAU,EA5BA,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,kBAAkB;EA6BxC,MAAM,EAAE,GAAG;EACX,aAAa,EA7BA,GAAG;CA8BnB;;AAVL,AAWI,YAXQ,CAWR,SAAS,CAAC;EACN,UAAU,EA/BS,GAAG,CAAE,IAAG,CAAC,IAAI,CAAC,KAAsB,EAAE,GAAG,CAAC,GAAG,CAAC,IAAI,CAAC,mBAAmB;CAgC5F;;AAGL,AAAA,OAAO,CAAC;EACJ,KAAK,EAAE,KAAK;EACZ,OAAO,EAAE,IAAI;EACb,eAAe,EAAE,YAAY;EAC7B,QAAQ,EAAE,QAAQ;EAClB,UAAU,EAAE,IAAI;EAChB,SAAS,EAAE,IAAI;CAalB;;AAnBD,AAQI,OARG,CAQH,GAAG,CAAC;EACA,KAAK,EAAE,IAAI;EACX,OAAO,EAAE,IAAI;EACb,SAAS,EAAE,MAAM;CAMpB;;AAjBL,AAaQ,OAbD,CAQH,GAAG,CAKC,MAAM,CAAC;EACH,KAAK,EAAE,IAAI;EACX,MAAM,EAAE,GAAG;CACd;;AAKT,AAAA,aAAa,CAAC;EACV,KAAK,EAAE,IAAI;EACX,MAAM,EAAE,aAAa;EACrB,OAAO,EAAE,IAAI;EACb,cAAc,EAAE,MAAM;CACzB;;AAED,AAAA,YAAY,CAAC;EACT,KAAK,EAAE,KAAK;EACZ,MAAM,EAAE,KAAK;EACb,MAAM,EAAE,IAAI;EAEZ,aAAa,EAAE,IAAI;EACnB,UAAU,EAAE,MAAM;EAClB,OAAO,EAAE,IAAI;EACb,eAAe,EAAE,MAAM;EACvB,WAAW,EAAE,MAAM;EACnB,UAAU,EAAE,qBAAqB;CACpC;;AACD,AAAA,YAAY,AAAA,YAAY,CAAC;EACrB,KAAK,EAAE,KAAK;EACZ,UAAU,EAAE,WAAW;EACvB,UAAU,EAAE,uBAAuB;CACtC;;AAED,AAAA,OAAO,CAAC;EACJ,SAAS,EAAE,IAAI;EACf,KAAK,EAAE,KAAK;EACZ,MAAM,EAAE,KAAK;EACb,UAAU,EAAE,SAAS;EACrB,MAAM,EAAE,GAAG;EACX,MAAM,EAAE,GAAG;EACX,UAAU,EAAE,qBAAqB;CACpC;;AACD,AAAA,OAAO,AAAA,KAAK,CAAC;EACT,aAAa,EAAE,aAAa;CAC/B;;AACD,AAAA,OAAO,AAAA,MAAM,CAAC;EACV,aAAa,EAAE,aAAa;CAC/B;;AACD,AAAA,OAAO,AAAA,YAAY,CAAC;EAChB,KAAK,EAAE,KAAK;EACZ,MAAM,EAAE,KAAK;CAChB;;AACD,AAAA,OAAO,AAAA,KAAK,AAAA,YAAY,CAAA;EACpB,YAAY,EAAE,GAAG;CACpB;;AACD,AAAA,OAAO,AAAA,MAAM,AAAA,YAAY,CAAA;EACrB,WAAW,EAAE,GAAG;CACnB;;AAED,AAAA,cAAc,CAAC;EACX,OAAO,EAAE,IAAI;EACb,eAAe,EAAE,MAAM;EACvB,WAAW,EAAE,MAAM;EAEnB,MAAM,EAAE,IAAI;EACZ,aAAa,EAAE,IAAI;EACnB,YAAY,EAAE,IAAI;EAClB,aAAa,EAAE,IAAI;EACnB,KAAK,EAAE,WAAW;EAClB,OAAO,EAAE,IAAI;EACb,SAAS,EAAE,IAAI;EACf,WAAW,EAAE,SAAS;EACtB,WAAW,EAAE,IAAI;EACjB,UAAU,EAAE,IAAI;EAChB,cAAc,EAAE,SAAS;EACzB,UAAU,EAAE,MAAM;CACrB;;AACD,AAAA,mBAAmB,EAAE,uBAAuB,CAAC;EACzC,OAAO,EAAE,IAAI;EACb,eAAe,EAAE,MAAM;EAEvB,KAAK,EAAE,IAAI;EACX,MAAM,EAAE,IAAI;EACZ,aAAa,EAAE,IAAI;CA8CtB;;AApDD,AAQI,mBARe,CAQf,QAAQ,EARS,uBAAuB,CAQxC,QAAQ,CAAC;EACL,KAAK,EAAE,GAAG;EACV,aAAa,EAAE,GAAG;EAClB,YAAY,EAAE,cAAc;EAC5B,OAAO,EAAE,IAAI;EACb,cAAc,EAAE,GAAG;EACnB,eAAe,EAAE,QAAQ;CAiB5B;;AA/BL,AAgBQ,mBAhBW,CAQf,QAAQ,CAQJ,OAAO,EAhBM,uBAAuB,CAQxC,QAAQ,CAQJ,OAAO,CAAC;EACJ,UAAU,EAAE,IAAI;EAChB,MAAM,EAAE,IAAI;EACZ,KAAK,EAAE,eAAe;EACtB,WAAW,EAAE,GAAG;EAEhB,aAAa,EApJJ,GAAG;EAqJZ,UAAU,EAtJJ,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,kBAAkB;EAuJpC,OAAO,EAAE,IAAI;EACb,eAAe,EAAE,MAAM;EACvB,WAAW,EAAE,MAAM;EACnB,SAAS,EAAE,IAAI;EACf,WAAW,EAAE,SAAS;EACtB,WAAW,EAAE,IAAI;CACpB;;AA9BT,AAiCI,mBAjCe,CAiCf,uBAAuB,EAjCN,uBAAuB,CAiCxC,uBAAuB,CAAC;EACpB,WAAW,EAAE,cAAc;EAC3B,YAAY,EAAE,GAAG;EACjB,KAAK,EAAE,GAAG;EACV,OAAO,EAAE,IAAI;CAchB;;AAnDL,AAuCQ,mBAvCW,CAiCf,uBAAuB,CAMnB,aAAa,EAvCA,uBAAuB,CAiCxC,uBAAuB,CAMnB,aAAa,CAAC;EACV,SAAS,EAAE,IAAI;EACf,WAAW,EAAE,SAAS;EACtB,WAAW,EAAE,IAAI;EACjB,gBAAgB,EAAE,WAAW;CAOhC;;AAlDT,AA6CY,mBA7CO,CAiCf,uBAAuB,CAMnB,aAAa,AAMR,YAAY,EA7CJ,uBAAuB,CAiCxC,uBAAuB,CAMnB,aAAa,AAMR,YAAY,CAAC;EACV,YAAY,EAAE,GAAG;EACjB,aAAa,EAAE,GAAG;CAErB;;AAKb,AAAA,MAAM,CAAC;EACH,SAAS,EAAE,IAAI;CAClB;;AACD,AAAA,WAAW,CAAC;EACR,UAAU,EAAE,oBAAiB;EAC7B,KAAK,EAAE,OAAc;EACrB,aAAa,EAAE,GAAG;CACrB;;AACD,AAAA,QAAQ,CAAC;EACL,UAAU,EAAE,oBAAiB;EAE7B,aAAa,EAAE,GAAG;CACrB;;AAED,AAAA,aAAa,CAAC;EACV,6BAA6B;EAC7B,OAAO,EAAE,IAAI;EACb,cAAc,EAAE,MAAM;CAiBzB;;AApBD,AAKI,aALS,CAKT,UAAU,AAAA,UAAW,CAAA,CAAC,EAAC;EACnB,OAAO,EAAE,IAAI;CAChB;;AAPL,AAQI,aARS,CAQT,UAAU,AAAA,UAAW,CAAA,CAAC,EAAC;EACnB,OAAO,EAAE,GAAG;CACf;;AAVL,AAWI,aAXS,CAWT,UAAU,AAAA,UAAW,CAAA,CAAC,EAAC;EACnB,OAAO,EAAE,GAAG;CACf;;AAbL,AAcI,aAdS,CAcT,UAAU,AAAA,UAAW,CAAA,CAAC,EAAC;EACnB,OAAO,EAAE,GAAG;CACf;;AAhBL,AAiBI,aAjBS,CAiBT,UAAU,AAAA,UAAW,CAAA,CAAC,EAAC;EACnB,OAAO,EAAE,GAAG;CACf;;AAGL,AAAA,UAAU,CAAC;EACP,OAAO,EAAE,IAAI;EACb,cAAc,EAAE,cAAc;EAC9B,eAAe,EAAE,MAAM;EACvB,+BAA+B;EAC/B,aAAa,EAAE,GAAG;EAClB,SAAS,EAAE,MAAM;EACjB,WAAW,EAAE,SAAS;EACtB,WAAW,EAAE,IAAI;EACjB,kBAAkB;CA6BrB;;AAtCD,AAYI,UAZM,CAYN,GAAG,CAAC,GAAG,CAAC;EAEJ,MAAM,EAAE,OAAO;EACf,OAAO,EAAE,GAAG;EACZ,MAAM,EAAE,GAAG;EACX,UAAU,EAAE,IAAI;EAEhB,WAAW,EAAE,MAAM;EACnB,aAAa,EA5OA,GAAG;EA6OhB,UAAU,EA9OA,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,kBAAkB;EA+OxC,WAAW,EAAE,IAAI;CACpB;;AAvBL,AAwBI,UAxBM,CAwBN,kBAAkB,EAxBtB,UAAU,CAwBc,uBAAuB,CAAC;EACxC,OAAO,EAAE,IAAI;EACb,KAAK,EAAE,GAAG;CACb;;AA3BL,AA4BI,UA5BM,CA4BN,kBAAkB,CAAC;EACf,eAAe,EAAE,QAAQ;CAC5B;;AA9BL,AA+BI,UA/BM,CA+BN,QAAQ,CAAC;EAEL,OAAO,EAAE,IAAI;EACb,eAAe,EAAE,QAAQ;EACzB,WAAW,EAAE,MAAM;EACnB,aAAa,EAAE,UAAU;CAC5B", "sources": [ "../scss/App.scss" ], diff --git a/src/hooks/useElectronicKey.js b/src/hooks/useElectronicKey.js index 4160147..a46b0ab 100644 --- a/src/hooks/useElectronicKey.js +++ b/src/hooks/useElectronicKey.js @@ -4,7 +4,7 @@ import config from '../config.json' // ELECTRONIC KEY TELEGRAPH - Iambic A -function useElectronicKey() { +function useElectronicKey(gameMode) { const {morseCharBuffer, setMorseCharBuffer, morseWords, setMorseWords} = useContext(MorseBufferContext) @@ -309,33 +309,27 @@ function useElectronicKey() { document.addEventListener('keydown', handleInputStart) document.addEventListener('keyup', 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) + 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 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 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) + }) } // eslint-disable-next-line }, []) diff --git a/src/hooks/useStraightKey.js b/src/hooks/useStraightKey.js index 1d435a0..529ea3c 100644 --- a/src/hooks/useStraightKey.js +++ b/src/hooks/useStraightKey.js @@ -1,12 +1,15 @@ import {useEffect, useContext} from 'react' import {MorseBufferContext} from '../contexts/morseBufferContext' import config from '../config.json' +// import {GameModeContext} from '../contexts/gameContext' // STRAIGHT KEY TELEGRAPH -function useStraightKey() { +function useStraightKey(gameMode) { + console.log(gameMode); const {morseCharBuffer, setMorseCharBuffer, morseWords, setMorseWords} = useContext(MorseBufferContext) + // const {gameMode} = useContext(GameModeContext) let charTimer = 0 let charTime = 0 @@ -99,7 +102,7 @@ function useStraightKey() { return } - console.log('charTime:', charTime); + // console.log('charTime:', charTime); if (charTime <= ditMaxTime) { setMorseCharBuffer(prev => prev + '.') } else { @@ -128,33 +131,34 @@ function useStraightKey() { gapTime += 1 // Gap between words - if (gapTime >= wordGapMaxTime) { + if (gameMode === 'practice' && gapTime >= wordGapMaxTime) { + console.log('practice'); setMorseCharBuffer(prev => prev + '/') clearInterval(gapTimer) gapTimer = 0 gapTime = 0 } - // if (mode === 'challenge' && gapTime >= letterGapMinTime) { - // setMorseCharBuffer(prev => prev + '_') - // clearInterval(gapTimer) - // gapTimer = 0 - // gapTime = 0 - // } + if (gameMode === 'challenge' && gapTime >= letterGapMinTime) { + setMorseCharBuffer(prev => prev + '_') + clearInterval(gapTimer) + gapTimer = 0 + gapTime = 0 + } }, timingUnit); } function checkGapBetweenInputs() { // Check Gap between letters - console.log('ditMaxTime', ditMaxTime) - console.log('gapTime', gapTime); - console.log('letterGapMinTime', letterGapMinTime); - console.log('wordGapMaxTime', wordGapMaxTime); + // console.log('ditMaxTime', ditMaxTime) + // console.log('gapTime', gapTime); + // console.log('letterGapMinTime', letterGapMinTime); + // console.log('wordGapMaxTime', wordGapMaxTime); if (gapTime >= letterGapMinTime && gapTime < wordGapMaxTime) { - // if (mode === 'practice') { + if (gameMode === 'practice') { setMorseCharBuffer(prev => prev + ' ') - // } else if (mode === 'challenge') { - // setMorseCharBuffer(prev => prev + '_') - // } + } else if (gameMode === 'challenge') { + setMorseCharBuffer(prev => prev + '_') + } clearInterval(gapTimer) gapTimer = 0 } @@ -164,43 +168,27 @@ 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 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) + 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 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) + 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 @@ -208,7 +196,7 @@ function useStraightKey() { useEffect(() => { // PRACTICE MODE - if (morseCharBuffer.slice(-1) === '/') { + if (morseCharBuffer.slice(-1) === '/' && gameMode === 'practice') { // Remove forward slash let val = morseCharBuffer.slice(0,morseCharBuffer.length-1) diff --git a/src/index.js b/src/index.js index 3c21a76..e7c9eea 100644 --- a/src/index.js +++ b/src/index.js @@ -4,12 +4,16 @@ 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')); // If you want your app to work offline and load faster, you can change diff --git a/src/scss/App.scss b/src/scss/App.scss index dbf76ab..312ff43 100644 --- a/src/scss/App.scss +++ b/src/scss/App.scss @@ -83,6 +83,7 @@ html, body { } .paddle { + font-size: 60px; width: 100px; height: 100px; background: goldenrod;