Challenge Start overlay, keyer enable on clock start

src/app-modes/ChallengeMode.js

@@ -15,8 +15,8 @@ import ElectronicKey from '../components/ElectronicKey';
 
 export default React.memo(function ChallengeMode(props) {
 
-    const {startGameClock, stopGameClock, gameClockTime, cleanup} = useContext(GameClockContext)
-    const {word, getNextWord} = useContext(WordFeederContext)
+    const {stopGameClock, clockIsRunning, cleanup} = useContext(GameClockContext)
+    const {word, getNextWord, resetFeeder} = useContext(WordFeederContext)
     const {morseCharBuffer, setMorseCharBuffer} = useContext(MorseBufferContext)
     const {keyType} = useContext(KeyTypeContext)
     
@@ -36,15 +36,13 @@ export default React.memo(function ChallengeMode(props) {
         console.log('FINISHED ALL WORDS!')
         stopGameClock()
         cleanup()
+        resetFeeder()
 
         //BREAKS HERE AFTER WORDLIST IS COMPLETED
-        alert(`Time: ${document.getElementById('gameClock').innerText}`)
+        try { alert(`Time: ${document.getElementById('gameClock').innerText}`) }
+        catch { return }
         return
     }
-    if (!challengeStarted) {
-        // SHOW "CLICK HERE TO START" OVERLAY
-    }
-
     
     
     let challengeLetters = word.split('')
@@ -111,13 +109,12 @@ export default React.memo(function ChallengeMode(props) {
 
     return (
         <>
-            {keyType === "straight" ?
-                <StraightKey /> : <ElectronicKey />
+            {clockIsRunning ? (keyType === "straight" ?
+                <StraightKey /> : <ElectronicKey />) : <></>
             }
             <GameClock />
             <ChallengeWord className={challengeWordClass} word={word} />
             <ChallengeBufferDisplay morseArray={morseArray} incorrectMorseIndexes={incorrectMorseIndexes} />
-            <button onClick={startGameClock}>start clock</button>
         </>
     )
 });

src/components/ChallengeOverlay.js

@@ -15,6 +15,7 @@ export default (function ChallengeOverlay() {
             document.getElementById('challengeReady').innerText = `Challenge starting in ${count}`
             if (count === 0) {
                 // Do this when countdown hits 0
+                document.getElementById('challenge-overlay').classList.add('hide')
                 clearInterval(countdown)
                 startGameClock()
             }

src/contexts/gameClockContext.js

@@ -6,38 +6,34 @@ function GameClockContextProvider(props) {
     
     const [gameClockTime, setGameClockTime] = useState(0)
     const [clockIsRunning, setClockIsRunning] = useState(false)
+    const [gameClockTimer, setGameClockTimer] = useState(0)
     const {keyType} = useContext(KeyTypeContext)
 
-    let gameClock = 0
     let intervals = []
     
 
     function startGameClock() {
         if (!clockIsRunning) {
             setClockIsRunning(true)
-            intervals.push(setInterval(() => {
+            setGameClockTimer(setInterval(() => {
                 document.getElementById('gameClock').innerText = Number(document.getElementById('gameClock').innerText) + 1
             }, 1000))
         }
     }
     function stopGameClock() {
         if (clockIsRunning) {
-            clearInterval(gameClock)
+            clearInterval(gameClockTimer)
             setClockIsRunning(false)
         }
     }
 
     function cleanup() {
-        for (let i = 0; i < intervals.length; i++) {
-            clearInterval(intervals[i]);
-        }
+        clearInterval(gameClockTimer)
+        setGameClockTimer(0)
+        // for (let i = 0; i < intervals.length; i++) {
+        //     clearInterval(intervals[i]);
+        // }
     }
-    // function startChallenge(event) {
-    //     console.log(event);
-    //     document.removeEventListener('keydown', startChallenge)
-    //     document.removeEventListener('mousedown', startChallenge)
-    //     startGameClock()
-    // }
 
     useEffect(() => {
         console.log('KEYTYPE CHANGE');
@@ -54,7 +50,8 @@ function GameClockContextProvider(props) {
             setGameClockTime: setGameClockTime,
             startGameClock: startGameClock,
             stopGameClock: stopGameClock,
-            cleanup: cleanup
+            cleanup: cleanup,
+            clockIsRunning: clockIsRunning
             }}>
             {props.children}
         </GameClockContext.Provider>

src/css/App.css

@@ -419,7 +419,7 @@ i[class*="ri-"] {
   width: 100%;
   height: 100%;
   z-index: 100;
-  background-color: darkgoldenrod;
+  background-color: rgba(0, 0, 0, 0.3);
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
@@ -431,8 +431,8 @@ i[class*="ri-"] {
           align-items: center;
 }
 
-#challenge-overlay:hover {
-  background-color: transparent;
+#challenge-overlay.hide {
+  display: none;
 }
 
 #challenge-overlay .notify {

src/scss/App.scss

@@ -391,13 +391,13 @@ $button-height: 60px;
     width: 100%;
     height: 100%;
     z-index: 100;
-    background-color: darkgoldenrod;
+    background-color: rgba(0,0,0,0.3);
     display: flex;
     justify-content: center;
     align-items: center;
 
-    &:hover {
-        background-color: transparent;
+    &.hide {
+        display: none;
     }
     .notify {
         width: 300px;