Challenge mode working; more bugs squashed

src/app-modes/ChallengeMode.js

@@ -4,19 +4,17 @@ 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 { WordListPickerContext } from '../contexts/wordListPickerContext';
 
 
 export default React.memo(function ChallengeMode(props) {
     
     console.log("ChallengeMode loaded");
-    
-    let wordList = ['morse', 'code', 'hello', 'gene']
-    // let word = wordList.shift()
 
-    // let word = props.word
-    let getNextWord = props.getNextWord
-    let word = getNextWord()
-    let challengeLetters = word.split('')
+    const {word, getNextWord} = useContext(WordFeederContext)
+
+    let challengeWordClass = ''
     
     const {morseCharBuffer, setMorseCharBuffer} = useContext(MorseBufferContext)
     let morseArray = morseCharBuffer.split('_').filter(l => l !== '')
@@ -24,14 +22,22 @@ export default React.memo(function ChallengeMode(props) {
     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
+    
+    if (!word) {
+        console.log('FINISHED ALL WORDS!')
+        alert('No more words.')
+        return
+    }
+    let 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]]
+        if (morseCharBuffer.slice(-1) === '_') { // If end of morse character
+
+            let morseLetter = morseCode[morseArray[index]] || '[?]'
             let challengeLetter = challengeLetters[index-offset]
 
             if (morseLetter === challengeLetter) {
@@ -41,25 +47,44 @@ export default React.memo(function ChallengeMode(props) {
             else {
                 incorrectCharIndex = index-offset
                 incorrectMorseIndexes.push(index)
+                if (incorrectMorseIndexes.length > 0) {
+                    setMorseCharBuffer(prev => {
+                        let newState = prev.split('_').filter(l => l !== '')
+                        let x = newState.splice(incorrectMorseIndexes[0], 1)
+                        newState = newState.join('_') + '_'
+                        
+                        return newState
+                    })
+                    incorrectMorseIndexes.splice(1,incorrectMorseIndexes.length)
+                }
                 offset = incorrectMorseIndexes.length
             }
-        // }
+        }
     })
-    console.log('morseArray', morseArray);
+
+    function timeout(delay) {
+        new Promise((resolve) => {
+            setTimeout(() => {
+                resolve()
+            }, delay)
+        })
+    }
 
     // Next word once all correct
     if (correctCharIndexes.length === challengeLetters.length) {
-        word = wordList.shift()
-
-        setMorseCharBuffer('')
+        // 
+        challengeWordClass = 'correct'
+        setTimeout(() => {
+            getNextWord()
+            setMorseCharBuffer('')
+        }, 1000)
     }
 
-
     return (
         <>
-            <ChallengeWord word={word} correctCharIndexes={correctCharIndexes} incorrectCharIndex={incorrectCharIndex} />
+            <ChallengeWord className={challengeWordClass} word={word} correctCharIndexes={correctCharIndexes} incorrectCharIndex={incorrectCharIndex} />
             <ChallengeBufferDisplay morseArray={morseArray} incorrectMorseIndexes={incorrectMorseIndexes} />
             {/* <button onClick={() => console.log(morseCharBuffer)}>morseCharBuffer</button> */}
         </>
-    );
+    )
 });