Challenge mode progress

src/App.js

@@ -34,6 +34,14 @@ function App() {
     //     console.log("Switched to " + e.target.id + " keyType.");
     // }
 
+    let wordList = ['morse', 'code', 'hello', 'gene']
+    let wordIndex = 0
+    function getNextWord() {
+        let word = wordList[wordIndex]
+        wordIndex += 1
+        return word
+    }
+
     return (
         <div id='main-content'>
             <Legend />
@@ -54,7 +62,7 @@ function App() {
                         <>
                             {keyType === "straight" ?
                                 <StraightKey gameMode='challenge' /> : <ElectronicKey gameMode='challenge' />}
-                            <ChallengeMode />
+                            <ChallengeMode getNextWord={getNextWord} />
                         </>
                     }
                     <MorseButtons />

src/app-modes/ChallengeMode.js

@@ -6,62 +6,53 @@ import ChallengeBufferDisplay from '../components/ChallengeBufferDisplay';
 import { MorseBufferContext } from '../contexts/morseBufferContext';
 
 
-export default React.memo(function ChallengeMode() {
+export default React.memo(function ChallengeMode(props) {
     
     console.log("ChallengeMode loaded");
     
     let wordList = ['morse', 'code', 'hello', 'gene']
-    let word = wordList.shift()
+    // let word = wordList.shift()
+
+    // let word = props.word
+    let getNextWord = props.getNextWord
+    let word = getNextWord()
     let challengeLetters = word.split('')
     
-    const {morseCharBuffer} = useContext(MorseBufferContext)
+    const {morseCharBuffer, setMorseCharBuffer} = useContext(MorseBufferContext)
     let morseArray = morseCharBuffer.split('_').filter(l => l !== '')
     
     let correctCharIndexes = [] // Indexes of correct letters in Challenge Word
     let incorrectCharIndex = null
     let incorrectMorseIndexes = [] // Indexes of incorrect morse characters in morse character buffer
 
+    let offset = 0
+
     // Iterate through the morse character buffer and compare with each letter of challenge word
-    morseArray.forEach((item, index) => {
+    morseArray.forEach((item, index) => {        
 
-        let offset = incorrectMorseIndexes.length || 0 
+        // if (morseCharBuffer.slice(-1) === '_') { // If end of morse character
+            let morseLetter = morseCode[morseArray[index]]
+            let challengeLetter = challengeLetters[index-offset]
 
-        let morseLetter = morseCode[morseArray[index+offset]]
-        let challengeLetter = challengeLetters[index-offset]
-        if (morseLetter === challengeLetter) {
-            correctCharIndexes.push(index-offset)
-            incorrectCharIndex = null
-        }
-        else {
-            incorrectCharIndex = index-offset
-            incorrectMorseIndexes.push(index+offset)
-        }
-
-        // let offset = incorrectMorseIndexes.length
-
-        // if (morseArray[index + offset]) { // If value exists at index
-
-        //     let morseAlpha = morseCode[morseArray[index + offset]]
-        //     let adjustedIndex = index - offset
-            
-        //     if (challengeLetters[adjustedIndex]) { // If value exists at index
-
-        //         let challengeLetter = challengeLetters[adjustedIndex].toLowerCase()
-
-        //         if (morseCharBuffer.slice(-1) === "_") { // Signifies buffer has complete characters (i.e. no partial characters)
-
-        //             if (morseAlpha === challengeLetter) {
-        //                 correctCharIndexes.push(adjustedIndex)
-        //                 incorrectCharIndex = null
-        //             } else {
-        //                 incorrectMorseIndexes.push(index)
-        //                 incorrectCharIndex = adjustedIndex
-        //             }
-        //         }
-        //     }
-        //     else { word = wordList.shift() }
+            if (morseLetter === challengeLetter) {
+                correctCharIndexes.push(index-offset)
+                incorrectCharIndex = null
+            }
+            else {
+                incorrectCharIndex = index-offset
+                incorrectMorseIndexes.push(index)
+                offset = incorrectMorseIndexes.length
+            }
         // }
     })
+    console.log('morseArray', morseArray);
+
+    // Next word once all correct
+    if (correctCharIndexes.length === challengeLetters.length) {
+        word = wordList.shift()
+
+        setMorseCharBuffer('')
+    }
 
 
     return (

src/components/ChallengeBufferDisplay.js

@@ -34,11 +34,10 @@ function ChallengeBufferDisplay(props) {
         let morseChar = morseArray[i]
 
         // Alphanumeric
-        let alphaClass = (incorrectMorseIndexes.includes(Number(i))) ? 'strike' : ''
+        let alphaClass = (incorrectMorseIndexes.includes(Number(i))) ? 'strike morseError' : ''
         alphanumeric.push(<span className={alphaClass}>{morseCode[morseChar].toUpperCase()}</span>)
         
         // DitDahs
-        console.log('>>> incorrectMorseIndexes', incorrectMorseIndexes);
         let ditDahClass = (incorrectMorseIndexes.includes(Number(i))) ? 'morseError' : ''
         ditDahs.push(<span className={ditDahClass}>{morseChar}</span>)
         ditDahs.push(<span className='space'>&nbsp;</span>)

src/css/App.css

@@ -175,6 +175,8 @@ html, body {
 #challengeWord span {
   padding: 4px;
   margin: 1px;
+  -webkit-transition: background 100ms ease-in-out;
+  transition: background 100ms ease-in-out;
 }
 
 .strike {
@@ -216,6 +218,7 @@ html, body {
   font-family: 'Courier';
   font-weight: bold;
   background-color: transparent;
+  margin-bottom: 10px;
 }
 
 #morseBufferDisplay #alphanumeric-container #alphanumeric:first-child, #challengeBufferDisplay #alphanumeric-container #alphanumeric:first-child {
@@ -223,6 +226,12 @@ html, body {
   padding-right: 5px;
 }
 
+#morseBufferDisplay #alphanumeric-container #alphanumeric span, #challengeBufferDisplay #alphanumeric-container #alphanumeric span {
+  padding: 4px;
+  -webkit-transition: background 100ms ease-in-out;
+  transition: background 100ms ease-in-out;
+}
+
 #morseBufferDisplay #ditDahs, #challengeBufferDisplay #ditDahs {
   width: 50%;
   padding-right: 5px;
@@ -236,6 +245,15 @@ html, body {
   -webkit-box-pack: center;
       -ms-flex-pack: center;
           justify-content: center;
+  font-size: 25px;
+  font-family: 'Courier';
+  font-weight: bold;
+}
+
+#morseBufferDisplay #ditDahs span, #challengeBufferDisplay #ditDahs span {
+  padding: 4px;
+  -webkit-transition: background 100ms ease-in-out;
+  transition: background 100ms ease-in-out;
 }
 
 #morseBufferDisplay #ditDahs .ditDah, #challengeBufferDisplay #ditDahs .ditDah {
@@ -255,9 +273,6 @@ html, body {
   -webkit-box-align: center;
       -ms-flex-align: center;
           align-items: center;
-  font-size: 35px;
-  font-family: 'Courier';
-  font-weight: bold;
 }
 
 .space {

src/scss/App.scss

@@ -128,6 +128,7 @@ html, body {
     span {
         padding: 4px;
         margin: 1px;
+        transition: background 100ms ease-in-out;
     }
 }
 
@@ -157,12 +158,18 @@ html, body {
             font-family: 'Courier';
             font-weight: bold;
             background-color: transparent;
+            margin-bottom: 10px;
             
             &:first-child {
                 padding-left: 5px;
                 padding-right: 5px;
                 // box-shadow: $main-box-shadow;
             }
+
+            span {
+                padding: 4px;
+                transition: background 100ms ease-in-out;
+            }
         }
     }
 
@@ -173,6 +180,14 @@ html, body {
         display: flex;
         flex-direction: row;
         justify-content: center;
+        font-size: 25px;
+        font-family: 'Courier';
+        font-weight: bold;
+
+        span {
+            padding: 4px;
+            transition: background 100ms ease-in-out;
+        }
 
         .ditDah {
             background: #DDD;
@@ -185,9 +200,7 @@ html, body {
             display: flex;
             justify-content: center;
             align-items: center;
-            font-size: 35px;
-            font-family: 'Courier';
-            font-weight: bold;
+            
         }
     }
 }