diff --git a/public/index.html b/public/index.html
index aa069f2..ff10222 100644
--- a/public/index.html
+++ b/public/index.html
@@ -15,6 +15,7 @@
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-->
+
- React App
+ Learn Morse Code
diff --git a/src/App.js b/src/App.js
index 27dbfe7..c56c56f 100644
--- a/src/App.js
+++ b/src/App.js
@@ -21,7 +21,6 @@ import Legend from './components/Legend';
import WordsPerMinute from "./components/WordsPerMinute"
import MorseButtons from './components/MorseButtons'
import Footer from './components/Footer';
-import { WPMContext } from './contexts/wpmContext';
import StraightKey from './components/StraightKey';
import ElectronicKey from './components/ElectronicKey';
@@ -31,19 +30,24 @@ export default React.memo(function App() {
const {keyType} = useContext(KeyTypeContext)
const {gameMode} = useContext(GameModeContext)
- const wpm = useContext(WPMContext)
-
return (
<>
-
+
-
-
-
+
+
+
+
+
+
+ {gameMode === 'challenge' &&
+
+ }
+
{keyType === "straight" ?
:
@@ -64,17 +68,12 @@ export default React.memo(function App() {
} */}
{gameMode === 'challenge' &&
- <>
-
-
-
-
-
-
-
+
}
+
+
diff --git a/src/components/KeyTypePicker.js b/src/components/KeyTypePicker.js
index 2448a00..1b8fdbe 100644
--- a/src/components/KeyTypePicker.js
+++ b/src/components/KeyTypePicker.js
@@ -1,6 +1,7 @@
import React, {useContext} from "react"
import {KeyTypeContext} from "../contexts/keyTypeContext"
+
export default React.memo(function KeyTypePicker() {
const {setKeyType} = useContext(KeyTypeContext)
@@ -9,7 +10,7 @@ export default React.memo(function KeyTypePicker() {
setKeyType(e.target.id)
console.log("KEYTYPE PICKED:", e.target.id);
- let buttons = document.querySelector(".mode-picker#keyType").childNodes
+ let buttons = document.querySelector(".mode-picker#keyType #buttons").childNodes
buttons.forEach(button => {
if (button.id === e.target.id) {
button.classList.add('selected')
@@ -21,23 +22,30 @@ export default React.memo(function KeyTypePicker() {
document.querySelector('.paddle').classList.add('showPaddles')
document.querySelector('.paddle#left').classList.add('showPaddles')
document.querySelector('.paddle#right').classList.add('showPaddles')
+ document.getElementById('morseButtonText').innerHTML = ''
} else {
document.querySelector('#morseButton').classList.remove('showPaddles')
document.querySelector('.paddle').classList.remove('showPaddles')
document.querySelector('.paddle#left').classList.remove('showPaddles')
document.querySelector('.paddle#right').classList.remove('showPaddles')
+ document.getElementById('morseButtonText').innerHTML = 'SPACEBAR'
}
}
return (
-
-
+
+ Keyer Type
+
+
+
+
+
-
-
-
+
+ Mode
+
+
+
+
+
+
-
-
-
+ <>
+
+
+
+
+
+ SPACEBAR
+
+
)
})
\ No newline at end of file
diff --git a/src/components/WordListPicker.js b/src/components/WordListPicker.js
index 2f686fe..078e0a8 100644
--- a/src/components/WordListPicker.js
+++ b/src/components/WordListPicker.js
@@ -4,7 +4,7 @@ import { WordFeederContext } from "../contexts/wordFeederContext";
export default React.memo(function WordListPicker() {
- const {setWordListCategory} = useContext(WordListPickerContext)
+ const {wordListCategory, setWordListCategory} = useContext(WordListPickerContext)
const {resetFeeder, setOrder} = useContext(WordFeederContext)
const orderOpts = ['sequential', 'random']
@@ -13,7 +13,7 @@ export default React.memo(function WordListPicker() {
resetFeeder()
if (orderOpts.includes(e.target.id)) {
- let buttons = document.querySelector(".mode-picker#wordOrderPicker").childNodes
+ let buttons = document.querySelector(".mode-picker#wordOrderPicker #buttons").childNodes
buttons.forEach(button => {
if (button.id === e.target.id) {
button.classList.add('selected')
@@ -22,40 +22,48 @@ export default React.memo(function WordListPicker() {
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.");
+ setWordListCategory(e.target.value)
+ console.log("Switched to " + e.target.value + " word list.");
}
-
-
}
return (
<>
-
-
-
+
+ Word List
+
+
+
+
+ {/*
+
+
+
+
*/}
-
-
+
+ Word Order
+
+
+
+
+