Challenge mode functionality updates

src/contexts/challengeContext.js

@@ -0,0 +1,76 @@
+import React, {useState, useContext} from "react"
+import { GameClockContext } from "./gameClockContext"
+import { WordFeederContext } from "./wordFeederContext"
+// import { KeyTypeContext } from "./keyTypeContext"
+const ChallengeContext = React.createContext()
+
+function ChallengeContextProvider(props) {
+    
+    const [challengeState, setChallengeState] = useState('ready')
+    const {startGameClock, stopGameClock, setGameClockTime, intervals} = useContext(GameClockContext)
+    const {resetFeeder} = useContext(WordFeederContext)
+
+    function startChallenge() {
+        setGameClockTime(0)
+        let countdown
+        let count = 3
+
+        document.getElementById('challengeReady').classList.add('starting')
+        document.getElementById('challengeReady').innerHTML = `<span id="message">Challenge starting in</span><span id="count">${count}</span>`
+        countdown = setInterval(() => {
+            count--
+            if (count === 0) {
+                // Do this when countdown hits 0
+                document.getElementById('challenge-overlay').classList.add('fade')
+                clearInterval(countdown)
+                setTimeout(() => {
+                    document.getElementById('challenge-overlay').classList.add('hide')
+                    startGameClock()
+                    setChallengeState('started')
+                }, 900);
+            }
+            document.getElementById('challengeReady').innerHTML = `<span id="message">Challenge starting in</span><span id="count">${count}</span>`
+        }, 1000)
+    }
+
+    function completeChallenge() {
+        stopGameClock()
+        setChallengeState('completed')
+        for (let i = 0; i < intervals.length; i++) {
+            clearInterval(intervals[i]);
+        }
+        resetFeeder()
+
+        const challengeOverlay = document.getElementById('challenge-overlay')
+        challengeOverlay.classList.remove('fade')
+        challengeOverlay.classList.remove('hide')
+    }
+
+    function cancelChallenge() {
+        stopGameClock()
+        for (let i = 0; i < intervals.length; i++) {
+            clearInterval(intervals[i]);
+        }
+        setChallengeState('ready')
+        resetFeeder()
+        setGameClockTime(0)
+
+        const challengeOverlay = document.getElementById('challenge-overlay')
+        challengeOverlay.classList.remove('fade')
+        challengeOverlay.classList.remove('hide')
+    }
+    
+    return (
+        <ChallengeContext.Provider value={{
+            challengeState: challengeState,
+            setChallengeState: setChallengeState,
+            startChallenge: startChallenge,
+            completeChallenge: completeChallenge,
+            cancelChallenge: cancelChallenge
+            }}>
+            {props.children}
+        </ChallengeContext.Provider>
+    )
+}
+
+export {ChallengeContextProvider, ChallengeContext}

src/contexts/gameClockContext.js

@@ -20,7 +20,8 @@ function GameClockContextProvider(props) {
                         stopGameClock()
                         return
                     }
-                    document.getElementById('gameClock').innerText = Number(document.getElementById('gameClock').innerText) + 1
+                    setGameClockTime(prev => prev + 1)
+                    // document.getElementById('gameClock').innerText = Number(gameClockTime) //Number(document.getElementById('gameClock').innerText) + 1
                 }, 1000))
             ])
         }

src/contexts/wordFeederContext.js

@@ -4,17 +4,29 @@ const WordFeederContext = React.createContext()
 
 function WordFeederContextProvider(props) {
     // let wordList = ['hi', 'morse', 'code', 'hello', 'gene']
-    const {wordList, wordListShuffled, wordListCategory} = useContext(WordListPickerContext)
+    const {wordList, wordListShuffled} = useContext(WordListPickerContext)
 
     const [wordIndex, setWordIndex] = useState(0)
     const [order, setOrder] = useState('sequential')
-    let word
+    let word 
 
     if (order === 'sequential') {
-        word = wordList[wordIndex]
+        // word = wordList[wordIndex]
+        if (wordList[wordIndex] === undefined) {
+            word = [wordList[0]]
+        }
+        else {
+            word = wordList[wordIndex]
+        }
     }
     else if (order === 'random') {
-        word = wordListShuffled[wordIndex]
+        // word = wordListShuffled[wordIndex]
+        if (wordListShuffled[wordIndex] === undefined) {
+            word = [wordListShuffled[0]]
+        }
+        else {
+            word = wordListShuffled[wordIndex]
+        }
     }
 
     function resetFeeder() {
@@ -22,14 +34,20 @@ function WordFeederContextProvider(props) {
     }
     
     function getNextWord() {
-        if (order === 'sequential') {
-            setWordIndex(prev => prev + 1)
-            word = wordList[wordIndex] || null
-        } else if (order === 'random') {
-            setWordIndex(prev => prev + 1)
-            word = wordListShuffled[wordIndex] || null
-        }
+        setWordIndex(prev => prev + 1)
+        // if (order === 'sequential') {
+        // } else if (order === 'random') {
+        //     setWordIndex(prev => prev + 1)
+        //     if (wordListShuffled[wordIndex] === undefined) {
+        //         alert('NULL2')
+        //         word = '!end'
+        //     }
+        //     else {
+        //         word = wordListShuffled[wordIndex]
+        //     }
+        // }
     }
+    
 
     return (
         <WordFeederContext.Provider value={{word: word, getNextWord: getNextWord, resetFeeder: resetFeeder, setOrder: setOrder}}>

src/contexts/wordListPickerContext.js

@@ -46,7 +46,6 @@ function WordListPickerContextProvider(props) {
         return array;
     }
 
-
     return (
         <WordListPickerContext.Provider value={{wordList: wordList, wordListShuffled: randomize(wordList), wordListCategory: wordListCategory, setWordListCategory: setWordListCategory}}>
             {props.children}