From 71ebcf02c9dcbed7d70696017f39660297bd5393 Mon Sep 17 00:00:00 2001 From: Gene Mecija Date: Sun, 19 Jan 2020 10:26:55 -0800 Subject: [PATCH] Challenge mode progress --- src/App.js | 2 +- src/app-modes/ChallengeMode.js | 12 ++--- src/components/ChallengeBufferDisplay.js | 67 ++++++------------------ src/components/StraightKey.js | 1 + src/contexts/keyTypeContext.js | 2 +- src/css/App.css | 65 ++++++++++++++--------- src/css/App.css.map | 2 +- src/hooks/useStraightKey.js | 3 +- src/scss/App.scss | 56 +++++++++++--------- 9 files changed, 99 insertions(+), 111 deletions(-) diff --git a/src/App.js b/src/App.js index 7e8eeab..4aea48a 100644 --- a/src/App.js +++ b/src/App.js @@ -41,7 +41,7 @@ function App() { {keyType === "straight" ? - : } + : } {gameMode === 'practice' && <>
diff --git a/src/app-modes/ChallengeMode.js b/src/app-modes/ChallengeMode.js index 664c52c..b37a29e 100644 --- a/src/app-modes/ChallengeMode.js +++ b/src/app-modes/ChallengeMode.js @@ -7,17 +7,17 @@ import ChallengeWord from '../components/ChallengeWord' import ChallengeBufferDisplay from '../components/ChallengeBufferDisplay'; import { MorseBufferContext } from '../contexts/morseBufferContext'; -function ChallengeMode() { console.log("ChallengeMode loaded"); +function ChallengeMode() { + console.log("ChallengeMode loaded"); let word = "morse" - const {morseCharBuffer} = useContext(MorseBufferContext) + const {morseCharBuffer, setMorseCharBuffer} = useContext(MorseBufferContext) - // console.log('morseCharBuffer:', morseCharBuffer, '|END'); - let morseLetters = morseCharBuffer.split('_').filter(l => l !== '') - // console.log('morseLetters:', morseLetters, morseLetters.length); let challengeLetters = word.split('') + let morseLetters = morseCharBuffer.split('_').filter(l => l !== '') + let correctIndexes = [] let incorrectIndex = null @@ -57,7 +57,7 @@ function ChallengeMode() { console.log("ChallengeMode loaded"); return ( <> - + ); diff --git a/src/components/ChallengeBufferDisplay.js b/src/components/ChallengeBufferDisplay.js index 855b8a0..76f3cbd 100644 --- a/src/components/ChallengeBufferDisplay.js +++ b/src/components/ChallengeBufferDisplay.js @@ -1,7 +1,7 @@ import React, { useContext } from "react" import DitDahDisplay from "./DitDahDisplay" import morseCode from '../data/morse-reverse.json' -import { MorseBufferContext } from "../contexts/morseBufferContext" +// import { MorseBufferContext } from "../contexts/morseBufferContext" function ChallengeBufferDisplay(props) { @@ -20,69 +20,36 @@ function ChallengeBufferDisplay(props) { // 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); + // const {morseCharBuffer, setMorseCharBuffer} = useContext(MorseBufferContext) + const morseLetters = props.morseLetters + console.log('morseLetters', morseLetters); + const setMorseCharBuffer = props.setMorseCharBuffer let ditDahs = [] - let incorrectIndex = props.incorrectIndex - - let morseLetters = buffer.split(' ') - if (incorrectIndex) { - - for (let i in morseLetters) { - let letter = morseLetters[i] - - if (Number(i) === incorrectIndex) { - ditDahs.push(letter.split('').map((ditdah,index) => )) - } else { - ditDahs.push(letter.split('').map((ditdah,index) => )) - } - } - } else { - ditDahs = buffer.split('').map((ditdah,index) => ) - } - - let alphanumeric = '' - let letters = buffer.split(' ') + let incorrectIndex = props.incorrectIndex - if (buffer === '') {} - else { - for (let i in letters) { - if (letters[i] === ' ') { - alphanumeric += ' ' - } else { - if (morseCode[letters[i]] === undefined) { - // alphanumeric += '[?]' - alphanumeric += (letters[i] === '' ? '':'[?]') - } else { - alphanumeric += morseCode[letters[i]] - } - } - } + for (let i in morseLetters) { + let morseChar = morseLetters[i] + alphanumeric += morseCode[morseChar] + + let cn = '' + cn = (incorrectIndex === i) ? 'morseError' : '' + ditDahs.push(morseChar) + ditDahs.push(' ') } - // } else if (buffer !== '') { - // let letters = buffer - // if (morseCode[letters] === undefined) { - // alphanumeric += '[?]' - // } else { - // alphanumeric += morseCode[letters] - // } - // } return (
-
- {ditDahs} -
{alphanumeric.toUpperCase()}
+
+ {ditDahs} +
) } diff --git a/src/components/StraightKey.js b/src/components/StraightKey.js index cecffcc..6f56d36 100644 --- a/src/components/StraightKey.js +++ b/src/components/StraightKey.js @@ -2,5 +2,6 @@ import React from 'react' import useStraightKey from '../hooks/useStraightKey'; export default React.memo(function StraightKey(props) { + console.log('props.gameMode',props.gameMode); useStraightKey(props.gameMode) }) \ No newline at end of file diff --git a/src/contexts/keyTypeContext.js b/src/contexts/keyTypeContext.js index 0741785..0413d20 100644 --- a/src/contexts/keyTypeContext.js +++ b/src/contexts/keyTypeContext.js @@ -4,7 +4,7 @@ const KeyTypeContext = React.createContext() function KeyTypeContextProvider(props) { - const [keyType, setKeyType] = useState('straight') + const [keyType, setKeyType] = useState('') return ( { gapTime += 1 + console.log('useStraightKey-gameMode:',gameMode); // Gap between words if (gameMode === 'practice' && gapTime >= wordGapMaxTime) { - console.log('practice'); setMorseCharBuffer(prev => prev + '/') clearInterval(gapTimer) gapTimer = 0 diff --git a/src/scss/App.scss b/src/scss/App.scss index 312ff43..82161b7 100644 --- a/src/scss/App.scss +++ b/src/scss/App.scss @@ -125,22 +125,49 @@ html, body { background: #EEE; text-transform: uppercase; align-self: center; + span { + padding: 4px; + margin: 1px; + } } #morseBufferDisplay, #challengeBufferDisplay { display: flex; justify-content: center; - // border: 1px solid green; + border: 1px solid green; + flex-direction: column; + align-items: center; width: 100%; - height: 40px; + // height: 40px; margin-bottom: 20px; + #alphanumeric-container { + // border-left: 2px solid #000; + padding-left: 5px; + width: 50%; + display: flex; + justify-content: center; + + #alphanumeric { + font-size: 40px; + font-family: 'Courier'; + font-weight: bold; + background-color: transparent; + + &:first-child { + padding-left: 5px; + padding-right: 5px; + // box-shadow: $main-box-shadow; + } + } + } + #ditDahs { width: 50%; padding-right: 5px; - border-right: 2px solid #000; + // border-right: 2px solid #000; display: flex; flex-direction: row; - justify-content: flex-end; + justify-content: center; .ditDah { background: #DDD; @@ -158,26 +185,6 @@ html, body { font-weight: bold; } } - - #alphanumeric-container { - border-left: 2px solid #000; - padding-left: 5px; - width: 50%; - display: flex; - - #alphanumeric { - font-size: 40px; - font-family: 'Courier'; - font-weight: bold; - background-color: transparent; - - &:first-child { - padding-left: 5px; - padding-right: 5px; - // box-shadow: $main-box-shadow; - } - } - } } .space { @@ -187,6 +194,7 @@ html, body { background: rgba(255,0,0,0.4); color: rgb(120, 0, 0); border-radius: 5px; + // text-decoration: line-through; } .correct { background: rgba(0,255,0,0.4);