From da142ef58a0eaa49753e671a9124ba6a0bda93c3 Mon Sep 17 00:00:00 2001 From: Gene Mecija Date: Mon, 27 Jan 2020 17:39:11 -0800 Subject: [PATCH] Added wordlist randomization in Challenge mode --- src/app-modes/ChallengeMode.js | 4 +-- src/components/ChallengeBufferDisplay.js | 2 +- src/components/WordListPicker.js | 39 ++++++++++++++++++++++-- src/contexts/wordFeederContext.js | 28 ++++++++--------- src/contexts/wordListPickerContext.js | 25 +++++++++++++-- src/css/App.css | 4 +-- src/hooks/useElectronicKey.js | 2 +- src/hooks/useStraightKey.js | 4 +-- src/scss/App.scss | 2 +- 9 files changed, 80 insertions(+), 30 deletions(-) diff --git a/src/app-modes/ChallengeMode.js b/src/app-modes/ChallengeMode.js index 28db298..5d73d68 100644 --- a/src/app-modes/ChallengeMode.js +++ b/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 ( diff --git a/src/components/ChallengeBufferDisplay.js b/src/components/ChallengeBufferDisplay.js index 2715c99..bd9428f 100644 --- a/src/components/ChallengeBufferDisplay.js +++ b/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({morseChar}) - ditDahs.push( ) + // ditDahs.push( ) } return ( diff --git a/src/components/WordListPicker.js b/src/components/WordListPicker.js index 3d4487d..418be39 100644 --- a/src/components/WordListPicker.js +++ b/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 ( + <>
+
+ + +
+ ) }) \ No newline at end of file diff --git a/src/contexts/wordFeederContext.js b/src/contexts/wordFeederContext.js index 6f2e8a5..5dbfdbe 100644 --- a/src/contexts/wordFeederContext.js +++ b/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 ( - + {props.children} ) diff --git a/src/contexts/wordListPickerContext.js b/src/contexts/wordListPickerContext.js index 3a90410..6556e42 100644 --- a/src/contexts/wordListPickerContext.js +++ b/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 ( - + {props.children} ) diff --git a/src/css/App.css b/src/css/App.css index 1a1a9f9..c8e52fc 100644 --- a/src/css/App.css +++ b/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 { diff --git a/src/hooks/useElectronicKey.js b/src/hooks/useElectronicKey.js index b6a393c..308cdc3 100644 --- a/src/hooks/useElectronicKey.js +++ b/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]) diff --git a/src/hooks/useStraightKey.js b/src/hooks/useStraightKey.js index bfba50c..095d952 100644 --- a/src/hooks/useStraightKey.js +++ b/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 diff --git a/src/scss/App.scss b/src/scss/App.scss index 6f1f8b1..cd04774 100644 --- a/src/scss/App.scss +++ b/src/scss/App.scss @@ -281,7 +281,7 @@ footer { span { padding: 4px; - transition: background 300ms ease-in-out; + transition: background 100ms ease-in-out; } } }