From 5f35a664a1e1d0379f1c60c1a644b167ca6dfaec Mon Sep 17 00:00:00 2001
From: Gene Mecija <genemecija@outlook.com>
Date: Mon, 20 Jan 2020 10:27:05 -0800
Subject: [PATCH] Challenge mode updates

---
 src/App.js                               | 13 +++++++++----
 src/components/ChallengeBufferDisplay.js | 16 ++++++++++++----
 2 files changed, 21 insertions(+), 8 deletions(-)

diff --git a/src/App.js b/src/App.js
index 4aea48a..f914e81 100644
--- a/src/App.js
+++ b/src/App.js
@@ -40,18 +40,23 @@ function App() {
             <ModePicker />
             <MorseBufferContextProvider>
                     <KeyTypePicker />
-                    {keyType === "straight" ?
-                        <StraightKey gameMode={gameMode} /> : <ElectronicKey gameMode={gameMode} />}
                     {gameMode === 'practice' &&
                         <>
+                            {keyType === "straight" ?
+                                <StraightKey gameMode={gameMode} /> : <ElectronicKey gameMode={gameMode} />}
                             <PracticeMode /><br/>
                             <MorseBufferDisplay /><br/>
                             <MorseHistory /><br/>
                         </>
                     }
                     {/* {gameMode === 'timed' && <TimedMode />} */}
-                    {gameMode === 'challenge' && <ChallengeMode />}
-                    
+                    {gameMode === 'challenge' &&
+                        <>
+                            {keyType === "straight" ?
+                                <StraightKey gameMode={gameMode} /> : <ElectronicKey gameMode={gameMode} />}
+                            <ChallengeMode />}
+                        </>
+                    }
                     <MorseButtons />
             </MorseBufferContextProvider>
             
diff --git a/src/components/ChallengeBufferDisplay.js b/src/components/ChallengeBufferDisplay.js
index 76f3cbd..bd852e8 100644
--- a/src/components/ChallengeBufferDisplay.js
+++ b/src/components/ChallengeBufferDisplay.js
@@ -28,17 +28,25 @@ function ChallengeBufferDisplay(props) {
     let ditDahs = []
     let alphanumeric = ''
     let incorrectIndex = props.incorrectIndex
+    
 
     for (let i in morseLetters) {
         let morseChar = morseLetters[i]
         alphanumeric += morseCode[morseChar]
         
         let cn = ''
-        cn = (incorrectIndex === i) ? 'morseError' : ''
-        ditDahs.push(morseChar)
-        ditDahs.push(' ')
+        console.log('incorrectIndex', incorrectIndex);
+        console.log('i', i);
+
+        cn = (incorrectIndex === Number(i)) ? 'morseError' : ''
+        ditDahs.push(<span className={cn}>{morseChar}</span>)
+        ditDahs.push(<span className='space'>&nbsp;</span>)
+    }
+    if (incorrectIndex) {
+        setTimeout(() => {
+            setMorseCharBuffer(prev => prev.slice(0,-1))
+        }, 3000)
     }
-    
 
     return (
         <div id="challengeBufferDisplay">