Added wordlist randomization in Challenge mode

src/app-modes/ChallengeMode.js

@@ -50,7 +50,7 @@ export default React.memo(function ChallengeMode(props) {
                 if (incorrectMorseIndexes.length > 0) {
                     setMorseCharBuffer(prev => {
                         let newState = prev.split('_').filter(l => l !== '')
-                        let x = newState.splice(incorrectMorseIndexes[0], 1)
+                        newState.splice(incorrectMorseIndexes[0], 1)
                         newState = newState.join('_') + '_'
                         
                         return newState
@@ -77,7 +77,7 @@ export default React.memo(function ChallengeMode(props) {
         setTimeout(() => {
             getNextWord()
             setMorseCharBuffer('')
-        }, 1000)
+        }, 500)
     }
 
     return (

src/components/ChallengeBufferDisplay.js

@@ -20,7 +20,7 @@ export default React.memo(function ChallengeBufferDisplay(props) {
         // DitDahs
         let ditDahClass = (incorrectMorseIndexes.includes(Number(i))) ? 'morseError' : ''
         ditDahs.push(<span key={i} className={ditDahClass}>{morseChar}</span>)
-        ditDahs.push(<span key={i+100} className='space'>&nbsp;</span>)
+        // ditDahs.push(<span key={i+100} className='space'>&nbsp;</span>)
     }
 
     return (

src/components/WordListPicker.js

@@ -5,15 +5,39 @@ import { WordFeederContext } from "../contexts/wordFeederContext";
 export default React.memo(function WordListPicker() {
 
     const {setWordListCategory} = useContext(WordListPickerContext)
-    const {resetFeeder} = useContext(WordFeederContext)
+    const {resetFeeder, setOrder} = useContext(WordFeederContext)
+
+    const orderOpts = ['sequential', 'random']
 
     function handleClick(e) {
         resetFeeder()
-        setWordListCategory(e.target.id)
-        console.log("Switched to " + e.target.id + " mode.");
+
+        if (orderOpts.includes(e.target.id)) {
+            let buttons = document.querySelector(".mode-picker#wordOrderPicker").childNodes
+            buttons.forEach(button => {
+                if (button.id === e.target.id) {
+                    button.classList.add('selected')
+                } else { button.classList.remove('selected')}
+            })
+
+            setOrder(e.target.id)
+        } else {
+            let buttons = document.querySelector(".mode-picker#wordListPicker").childNodes
+            buttons.forEach(button => {
+                if (button.id === e.target.id) {
+                    button.classList.add('selected')
+                } else { button.classList.remove('selected')}
+            })
+
+            setWordListCategory(e.target.id)
+            console.log("Switched to " + e.target.id + " mode.");
+        }
+
+        
     }
 
     return (
+        <>
             <div id="wordListPicker" className="mode-picker">
                 <button id="common100" onClick={handleClick}>
                     100 Most Common Words
@@ -25,5 +49,14 @@ export default React.memo(function WordListPicker() {
                     Test List
                 </button>
             </div>
+            <div id="wordOrderPicker" className="mode-picker">
+                <button id="sequential" onClick={handleClick}>
+                    Sequential
+                </button>
+                <button id="random" onClick={handleClick}>
+                    Random
+                </button>
+            </div>
+        </>
     )
 })

src/contexts/wordFeederContext.js

@@ -3,19 +3,23 @@ import { WordListPickerContext } from "./wordListPickerContext"
 const WordFeederContext = React.createContext()
 
 function WordFeederContextProvider(props) {
-
+    console.log('LOADED: wordFeederContext');
     // let wordList = ['hi', 'morse', 'code', 'hello', 'gene']
-    const {wordList} = useContext(WordListPickerContext)
+    const {wordList, wordListShuffled} = useContext(WordListPickerContext)
 
     const [wordIndex, setWordIndex] = useState(0)
     const [order, setOrder] = useState('sequential')
-    let indexCache = []
+    let word
 
-    let word = wordList[wordIndex]
+    if (order === 'sequential') {
+        word = wordList[wordIndex]
+    }
+    else if (order === 'random') {
+        word = wordListShuffled[wordIndex]
+    }
 
     function resetFeeder() {
         setWordIndex(0)
-        indexCache = []
     }
     
     function getNextWord() {
@@ -23,21 +27,13 @@ function WordFeederContextProvider(props) {
             setWordIndex(prev => prev + 1)
             word = wordList[wordIndex] || null
         } else if (order === 'random') {
-            let index = Math.floor(Math.random*wordList.length)
-            indexCache.push(index)
-            // Need to account for what to do when all words in wordList have been exhausted
-            while (indexCache.includes(index) && wordList.length !== indexCache.length) {
-                index = Math.floor(Math.random*wordList.length)
-                indexCache.push(index)
-            }
-            setWordIndex(index)
-
-            word = wordList[wordIndex]
+            setWordIndex(prev => prev + 1)
+            word = wordListShuffled[wordIndex] || null
         }
     }
 
     return (
-        <WordFeederContext.Provider value={{word: word, getNextWord: getNextWord, resetFeeder: resetFeeder}}>
+        <WordFeederContext.Provider value={{word: word, getNextWord: getNextWord, resetFeeder: resetFeeder, setOrder: setOrder}}>
             {props.children}
         </WordFeederContext.Provider>
     )

src/contexts/wordListPickerContext.js

@@ -10,7 +10,6 @@ function WordListPickerContextProvider(props) {
     const [wordListCategory, setWordListCategory] = useState('alphabet')
     let wordList = []
     const testList = ['gene', 'anya', 'ali', 'liam', 'last']
-    wordList = testList
 
     if (wordListCategory === 'alphabet') {
         wordList = alphabet.words
@@ -20,8 +19,30 @@ function WordListPickerContextProvider(props) {
         wordList = testList
     }
 
+
+    function randomize(arr) {
+        let array = [...arr]
+        let currentIndex = array.length, temporaryValue, randomIndex;
+        
+        // While there remain elements to shuffle...
+        while (0 !== currentIndex) {
+        
+            // Pick a remaining element...
+            randomIndex = Math.floor(Math.random() * currentIndex);
+            currentIndex -= 1;
+        
+            // And swap it with the current element.
+            temporaryValue = array[currentIndex];
+            array[currentIndex] = array[randomIndex];
+            array[randomIndex] = temporaryValue;
+        }
+        
+        return array;
+    }
+
+
     return (
-        <WordListPickerContext.Provider value={{wordList: wordList, setWordListCategory: setWordListCategory}}>
+        <WordListPickerContext.Provider value={{wordList: wordList, wordListShuffled: randomize(wordList), setWordListCategory: setWordListCategory}}>
             {props.children}
         </WordListPickerContext.Provider>
     )

src/css/App.css

@@ -366,8 +366,8 @@ header {
 
 #challengeBufferDisplay #alphanumeric-container #alphanumeric span {
   padding: 4px;
-  -webkit-transition: background 300ms ease-in-out;
-  transition: background 300ms ease-in-out;
+  -webkit-transition: background 100ms ease-in-out;
+  transition: background 100ms ease-in-out;
 }
 
 #challengeBufferDisplay #ditDahs {

src/hooks/useElectronicKey.js

@@ -347,7 +347,7 @@ function useElectronicKey() {
                 paddle.removeEventListener('mouseup', handleInputEnd)
                 paddle.removeEventListener('touchend', handleInputEnd)
             })
-            clearHistory()
+            // clearHistory()
         }
         // eslint-disable-next-line
     }, [wpm])

src/hooks/useStraightKey.js

@@ -229,10 +229,10 @@ function useStraightKey() {
                 paddle.removeEventListener('mouseup', handleInputEnd)
                 paddle.removeEventListener('touchend', handleInputEnd)
             })
-            clearHistory()
+            // clearHistory()
         }
         // eslint-disable-next-line
-    }, [wpm])
+    }, [wpm, gameMode])
 
     useEffect(() => {
         // PRACTICE MODE

src/scss/App.scss

@@ -281,7 +281,7 @@ footer {
 
             span {
                 padding: 4px;
-                transition: background 300ms ease-in-out;
+                transition: background 100ms ease-in-out;
             }
         }
     }