From 113e4a23484aeac3ad7e4df2e5b34dc5bd19b8ea Mon Sep 17 00:00:00 2001 From: Gene Mecija Date: Mon, 10 Feb 2020 17:51:09 -0800 Subject: [PATCH] Challenge mode functionality complete; layout updates --- src/App.js | 4 +- src/app-modes/ChallengeMode.js | 103 +---- src/components/ChallengeComplete.js | 8 +- src/components/ChallengeControls.js | 2 +- src/components/ChallengeReady.js | 2 +- src/components/ChallengeWord.js | 4 +- src/components/GameClock.js | 13 +- src/components/Info.js | 15 +- src/components/MorseHistory_textbox.js | 6 +- src/components/PlayMorseInput.js | 3 +- src/components/SidebarLeft.js | 5 +- src/components/WordListPicker.js | 29 +- src/contexts/challengeContext.js | 126 +++++- src/contexts/gameClockContext.js | 32 +- src/contexts/keyTypeContext.js | 1 + src/contexts/wordFeederContext.js | 1 + src/css/App.css | 444 +++++++++++++++++-- src/css/App.css.map | 2 +- src/hooks/useMorsePlayer.js | 4 +- src/scss/App.scss | 568 +++++++++++++++++++++---- 20 files changed, 1100 insertions(+), 272 deletions(-) diff --git a/src/App.js b/src/App.js index 41fcda4..5cf6b60 100644 --- a/src/App.js +++ b/src/App.js @@ -40,8 +40,8 @@ export default React.memo(function App() { - +
@@ -82,8 +82,8 @@ export default React.memo(function App() {
*/} - + diff --git a/src/app-modes/ChallengeMode.js b/src/app-modes/ChallengeMode.js index 709eaed..34e0c5e 100644 --- a/src/app-modes/ChallengeMode.js +++ b/src/app-modes/ChallengeMode.js @@ -1,12 +1,8 @@ import React, {useContext} from 'react'; import '../css/App.css'; -import morseCode from '../data/morse-reverse.json' import ChallengeWord from '../components/ChallengeWord' import ChallengeBufferDisplay from '../components/ChallengeBufferDisplay'; -import { MorseBufferContext } from '../contexts/morseBufferContext'; -import { WordFeederContext } from '../contexts/wordFeederContext'; import GameClock from '../components/GameClock'; -import { GameClockContext } from '../contexts/gameClockContext'; import { KeyTypeContext } from '../contexts/keyTypeContext'; import StraightKey from '../components/StraightKey'; import ElectronicKey from '../components/ElectronicKey'; @@ -14,102 +10,21 @@ import ChallengeControls from '../components/ChallengeControls'; import { ChallengeContext } from '../contexts/challengeContext'; -export default React.memo(function ChallengeMode(props) { - - console.log('CHALLENGE MODE'); - const {word, getNextWord} = useContext(WordFeederContext) - const {clockIsRunning} = useContext(GameClockContext) - const {morseCharBuffer, setMorseCharBuffer} = useContext(MorseBufferContext) +export default React.memo(function ChallengeMode() { + const {keyType} = useContext(KeyTypeContext) - const {completeChallenge, cancelChallenge} = useContext(ChallengeContext) - - let morseArray = morseCharBuffer.split('_').filter(l => l !== '') - let challengeWordClass = '' - - let correctCharIndexes = [] // Indexes of correct letters in Challenge Word - let incorrectMorseIndexes = [] // Indexes of incorrect morse characters in morse character buffer - - let offset = 0 - let challengeLetters - - // If no more words in wordlist, feeder returns first word in an array - if (typeof word === 'object') { - completeChallenge() - challengeLetters = word[0].split('') - } - else { - challengeLetters = word.split('') - } - - // Iterate through the morse character buffer and compare with each letter of challenge word - morseArray.forEach((item, index) => { - if (morseCharBuffer.slice(-1) === '_') { // If end of morse character - - let morseLetter = morseCode[morseArray[index]] || '[?]' - let challengeLetter = challengeLetters[index-offset].toLowerCase() - - if (morseLetter === challengeLetter) { - correctCharIndexes.push(index-offset) - - document.getElementById('challengeWord').childNodes[index-offset].classList.add('correct') - // incorrectCharIndex = null - } - else { - // incorrectCharIndex = index-offset - incorrectMorseIndexes.push(index) - if (incorrectMorseIndexes.length > 0) { - setMorseCharBuffer(prev => { - let newState = prev.split('_').filter(l => l !== '') - newState.splice(incorrectMorseIndexes[0], 1) - newState = newState.join('_') + '_' - - return newState - }) - incorrectMorseIndexes.splice(1,incorrectMorseIndexes.length) - } - offset = incorrectMorseIndexes.length - } - } - }) - - function timeout(delay) { - new Promise((resolve) => { - setTimeout(() => { - resolve() - }, delay) - }) - } - - // Next word once all correct - if (correctCharIndexes.length === challengeLetters.length) { - // - challengeWordClass = 'correct' - setTimeout(() => { - setMorseCharBuffer('') - morseArray = [] - incorrectMorseIndexes = [] - correctCharIndexes = [] - offset = 0 - }, 800) - setTimeout(() => { - getNextWord() - if (document.getElementById('challengeWord') !== null) { - document.getElementById('challengeWord').childNodes.forEach(node => { - node.classList = "cLetter" - }) - } - }, 1000) - } - + const {challengeState, cancelChallenge, morseArray, incorrectMorseIndexes, challengeWordClass} = useContext(ChallengeContext) return ( <> - {clockIsRunning ? (keyType === "straight" ? + {challengeState === 'started' ? (keyType === "straight" ? : ) : <> } - - - +
+ + +
+ ) diff --git a/src/components/ChallengeComplete.js b/src/components/ChallengeComplete.js index 8199738..2e17d66 100644 --- a/src/components/ChallengeComplete.js +++ b/src/components/ChallengeComplete.js @@ -5,18 +5,18 @@ import { ChallengeContext } from "../contexts/challengeContext" export default (function ChallengeComplete(props) { const {gameClockTime} = useContext(GameClockContext) - const {cancelChallenge} = useContext(ChallengeContext) + const {setChallengeState} = useContext(ChallengeContext) function _continue() { // setGameClockTime(0) // props.setChallengeState('ready') - cancelChallenge() + setChallengeState('ready') } return (
-

Challenge Complete

- Challenge completed in {gameClockTime} seconds! + Challenge Complete + Challenge completed in {gameClockTime} seconds!
diff --git a/src/components/ChallengeControls.js b/src/components/ChallengeControls.js index cac4784..c4455e5 100644 --- a/src/components/ChallengeControls.js +++ b/src/components/ChallengeControls.js @@ -4,7 +4,7 @@ export default (function ChallengeControls(props) { return (
- +
) }) \ No newline at end of file diff --git a/src/components/ChallengeReady.js b/src/components/ChallengeReady.js index dcfde29..c5a4ff2 100644 --- a/src/components/ChallengeReady.js +++ b/src/components/ChallengeReady.js @@ -8,7 +8,7 @@ export default (function ChallengeReady() { return (
-

Challenge Options

+ Challenge Options
diff --git a/src/components/ChallengeWord.js b/src/components/ChallengeWord.js index 2bcac51..dee2b56 100644 --- a/src/components/ChallengeWord.js +++ b/src/components/ChallengeWord.js @@ -1,9 +1,9 @@ import React, { useContext } from "react" import { WordFeederContext } from "../contexts/wordFeederContext" +import { ChallengeContext } from "../contexts/challengeContext" export default React.memo(function ChallengeWord(props) { - let challengeWordClass= props.className const {word} = useContext(WordFeederContext) let challengeLetters @@ -21,6 +21,6 @@ export default React.memo(function ChallengeWord(props) { }) return ( -
{spannedWord}
+
{spannedWord}
) }) \ No newline at end of file diff --git a/src/components/GameClock.js b/src/components/GameClock.js index b134b73..0b8255f 100644 --- a/src/components/GameClock.js +++ b/src/components/GameClock.js @@ -1,13 +1,14 @@ import React, {useContext} from "react" import { GameClockContext } from "../contexts/gameClockContext"; -function GameClock(props) { +export default (function GameClock(props) { const {gameClockTime} = useContext(GameClockContext) - return ( -
{gameClockTime}
- ) -} + const minutes = Math.floor(gameClockTime / 60) + const seconds = gameClockTime % 60 -export default GameClock \ No newline at end of file + return ( +
Time Elapsed: {minutes} minutes {seconds} seconds
+ ) +}) \ No newline at end of file diff --git a/src/components/Info.js b/src/components/Info.js index 177f97c..aaddc3c 100644 --- a/src/components/Info.js +++ b/src/components/Info.js @@ -16,20 +16,15 @@ export default React.memo(function Info() {

Dits and Dahs

- Dit playMorseWord('.')}>
- Denoted as a dot (.), dits are short tones and are base unit of morse code.
- Dah playMorseWord('-')}>
- Denoted as a dash (-), dahs are long tones the length of three dits. + Dit playMorseWord('.')}> Denoted as a dot (.), dits are short tones and are base unit of morse code.
+ Dah playMorseWord('-')}> Denoted as a dash (-), dahs are long tones the length of three dits.

Spacing

- Intra-character Spacing playMorseWord('...')}>
- Silence between dits and dahs the length of one dit. Three dits separated by one-dit-long spaces is an "S".
- Inter-character Spacing playMorseWord('. . .')}>
- Silence the length of three dits. Three dits separated by three-dit-long spaces is "EEE".
- Inter-word Spacing playMorseWord('. /. /.')}>
- Silence the length of seven dits. Three dits separated by seven-dit-long spaces is "E E E". + Intra-character Spacing playMorseWord('...')}> Silence between dits and dahs the length of one dit. Three dits separated by one-dit-long spaces is an "S".
+ Inter-character Spacing playMorseWord('. . .')}> Silence the length of three dits. Three dits separated by three-dit-long spaces is "EEE".
+ Inter-word Spacing playMorseWord('././.')}> Silence the length of seven dits. Three dits separated by seven-dit-long spaces is "E E E".

Speed

diff --git a/src/components/MorseHistory_textbox.js b/src/components/MorseHistory_textbox.js index e35e212..d65bddb 100644 --- a/src/components/MorseHistory_textbox.js +++ b/src/components/MorseHistory_textbox.js @@ -41,9 +41,9 @@ export default (function MorseHistoryTextBox() { // } catch {} return ( - <> +
{text}
- - + +
) }) \ No newline at end of file diff --git a/src/components/PlayMorseInput.js b/src/components/PlayMorseInput.js index 54d8dc8..7bf1188 100644 --- a/src/components/PlayMorseInput.js +++ b/src/components/PlayMorseInput.js @@ -50,7 +50,8 @@ export default (function PlayMorseInput() {

Translate To Morse

- + + playMorseWord('')}>
diff --git a/src/components/SidebarLeft.js b/src/components/SidebarLeft.js index 900f9e2..0f5eeb7 100644 --- a/src/components/SidebarLeft.js +++ b/src/components/SidebarLeft.js @@ -18,7 +18,7 @@ export default (function SidebarLeft() { } else if (e.target.id === 'nav-legend') { setSidebarContent('nav-legend') } else { - setSidebarContent('nav-options') + setSidebarContent('nav-play') } let navItems = document.querySelector(".navbar").childNodes @@ -35,6 +35,9 @@ export default (function SidebarLeft() {