diff --git a/src/App.js b/src/App.js index f98920d..af132d3 100644 --- a/src/App.js +++ b/src/App.js @@ -9,7 +9,6 @@ import ModePicker from './components/ModePicker' function App() { const [morseCharBuffer, setMorseCharBuffer] = useState('') // e.g. '-..' - // const [morseLettersBuffer, setMorseLettersBuffer] = useState([]) // e.g. ['-..','.','-,'] const [morseWords, setMorseWords] = useState([]) // e.g. [['-..','.','-,'], ['...','---','...']] let charTimer = 0 @@ -22,7 +21,7 @@ function App() { const ditMaxTime = 5 // default: 3 const letterGapMinTime = ditMaxTime*3 const wordGapMaxTime = ditMaxTime*7 - const morseHistorySize = 1 + const morseHistorySize = 5 // Tone Setup let AudioContext = window.AudioContext || window.webkitAudioContext || false @@ -157,6 +156,7 @@ function App() { // setMorseLettersBuffer(prev => [...prev, morseCharBuffer]) // eslint-disable-next-line }, [morseCharBuffer]) + console.log('App.js rendered') return (
@@ -169,4 +169,4 @@ function App() { ); } -export default App; +export default React.memo(App); diff --git a/src/app-modes/practice.js b/src/app-modes/practice.js new file mode 100644 index 0000000..e69de29 diff --git a/src/components/AlphaNumeric.js b/src/components/AlphaNumeric.js index ea04c2a..e6d6d9f 100644 --- a/src/components/AlphaNumeric.js +++ b/src/components/AlphaNumeric.js @@ -2,7 +2,7 @@ import React from "react" import morseCode from '../data/morse-reverse.json' function AlphaNumeric(props) { - + console.log('AlphaNumeric rendered'); if (props.morseLetter === '') { return ( @@ -20,4 +20,4 @@ function AlphaNumeric(props) { } } -export default AlphaNumeric \ No newline at end of file +export default React.memo(AlphaNumeric) \ No newline at end of file diff --git a/src/components/DitDah.js b/src/components/DitDah.js index 00f205a..75fcc95 100644 --- a/src/components/DitDah.js +++ b/src/components/DitDah.js @@ -2,7 +2,7 @@ import React from "react" import morseCode from '../data/morse-reverse.json' function DitDah(props) { - + console.log('DitDah rendered'); if (props.morseLetter === '') { return (   @@ -20,4 +20,4 @@ function DitDah(props) { } } -export default DitDah \ No newline at end of file +export default React.memo(DitDah) \ No newline at end of file diff --git a/src/components/DitDahDisplay.js b/src/components/DitDahDisplay.js index a5e755d..12adb66 100644 --- a/src/components/DitDahDisplay.js +++ b/src/components/DitDahDisplay.js @@ -1,7 +1,7 @@ import React from "react" function DitDahDisplay(props) { - + console.log('DitDahDisplay rendered'); return (
{props.dd} diff --git a/src/components/ModePicker.js b/src/components/ModePicker.js index f04ca2d..c1ff0f6 100644 --- a/src/components/ModePicker.js +++ b/src/components/ModePicker.js @@ -9,6 +9,9 @@ function ModePicker() {
Timed Mode
+
+ Challenge Mode +
) } diff --git a/src/components/MorseBufferDisplay.js b/src/components/MorseBufferDisplay.js index b2b3de1..9324eb0 100644 --- a/src/components/MorseBufferDisplay.js +++ b/src/components/MorseBufferDisplay.js @@ -3,7 +3,7 @@ import DitDahDisplay from "./DitDahDisplay" import morseCode from '../data/morse-reverse.json' function MorseBufferDisplay(props) { - + console.log('MorseBufferDisplay rendered'); let ditDahs = props.buffer.split('').map((ditdah,index) => ) let alphanumeric = '' @@ -34,11 +34,13 @@ function MorseBufferDisplay(props) {
{ditDahs}
-
- {alphanumeric.toUpperCase()} +
+
+ {alphanumeric.toUpperCase()} +
) } -export default MorseBufferDisplay \ No newline at end of file +export default React.memo(MorseBufferDisplay) \ No newline at end of file diff --git a/src/components/MorseButton.js b/src/components/MorseButton.js index d43b362..66aaadd 100644 --- a/src/components/MorseButton.js +++ b/src/components/MorseButton.js @@ -1,7 +1,7 @@ import React from "react" function MorseButton() { - + console.log('MorseButton rendered'); return (
) diff --git a/src/components/MorseCard.js b/src/components/MorseCard.js index cb58b25..bd52193 100644 --- a/src/components/MorseCard.js +++ b/src/components/MorseCard.js @@ -3,7 +3,7 @@ import AlphaNumeric from './AlphaNumeric' import DitDah from './DitDah' function MorseCard(props) { - + console.log('MorseCard rendered'); let morseComponent let alphaNumericsComponent @@ -22,14 +22,18 @@ function MorseCard(props) { return (
-
- {morseComponent} +
+
+ {morseComponent} +
-
- {alphaNumericsComponent} +
+
+ {alphaNumericsComponent} +
) } -export default MorseCard \ No newline at end of file +export default React.memo(MorseCard) \ No newline at end of file diff --git a/src/components/MorseDisplay.js b/src/components/MorseDisplay.js index 2bec5c1..6affd9b 100644 --- a/src/components/MorseDisplay.js +++ b/src/components/MorseDisplay.js @@ -2,7 +2,7 @@ import React from "react" import MorseCard from './MorseCard' function MorseDisplay(props) { - + console.log('MorseDisplay rendered'); let morseCards = props.morseWords.map((word,index) => ) return ( @@ -12,4 +12,4 @@ function MorseDisplay(props) { ) } -export default MorseDisplay \ No newline at end of file +export default React.memo(MorseDisplay) \ No newline at end of file diff --git a/src/css/App.css b/src/css/App.css index 8f88edf..4e2edcc 100644 --- a/src/css/App.css +++ b/src/css/App.css @@ -5,6 +5,7 @@ html, body { width: 100%; -webkit-box-sizing: border-box; box-sizing: border-box; + background: #FFF; } #root { @@ -28,10 +29,12 @@ html, body { } #mode-picker div { + background: #fcfcfc; margin: 15px; padding: 5px; - -webkit-box-shadow: 0px 0px 15px #000; - box-shadow: 0px 0px 15px #000; + -webkit-box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.2); + box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.2); + border-radius: 5px; } #main-content { @@ -64,9 +67,9 @@ html, body { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; - border: 1px solid green; width: 100%; height: 40px; + margin-bottom: 20px; } #morseBufferDisplay #ditDahs { @@ -90,8 +93,9 @@ html, body { height: 40px; width: 30px !important; margin-left: 3px; - -webkit-box-shadow: 0px 1px 0px #000; - box-shadow: 0px 1px 0px #000; + border-radius: 5px; + -webkit-box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.2); + box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.2); display: -webkit-box; display: -ms-flexbox; display: flex; @@ -106,13 +110,25 @@ html, body { font-weight: bold; } -#morseBufferDisplay #alphanumeric { - padding-left: 5px; +#morseBufferDisplay #alphanumeric-container { border-left: 2px solid #000; + padding-left: 5px; width: 50%; + display: -webkit-box; + display: -ms-flexbox; + display: flex; +} + +#morseBufferDisplay #alphanumeric-container #alphanumeric { font-size: 40px; font-family: 'Courier'; font-weight: bold; + background-color: transparent; +} + +#morseBufferDisplay #alphanumeric-container #alphanumeric:first-child { + padding-left: 5px; + padding-right: 5px; } .space { @@ -121,6 +137,8 @@ html, body { .morseError { background: rgba(255, 0, 0, 0.4); + color: #780000; + border-radius: 5px; } #morseDisplay { @@ -167,19 +185,35 @@ html, body { justify-content: center; /* border: 1px solid orange; */ margin-bottom: 2px; - font-size: 40px; + font-size: 2.5rem; font-family: 'Courier'; font-weight: bold; /* width: 100%; */ } -.morseCard div { - /* border: 1px solid purple; */ +.morseCard div div { + cursor: default; padding: 5px; - margin: 2px; + margin: 3px; background: #EEE; - width: 50%; white-space: nowrap; + border-radius: 5px; + -webkit-box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.2); + box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.2); + line-height: 2rem; +} + +.morseCard .ditDahs-container, .morseCard .alphanumeric-container { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + width: 50%; +} + +.morseCard .ditDahs-container { + -webkit-box-pack: end; + -ms-flex-pack: end; + justify-content: flex-end; } .morseCard .ditDahs { diff --git a/src/css/App.css.map b/src/css/App.css.map index 5617bd2..d2d75c2 100644 --- a/src/css/App.css.map +++ b/src/css/App.css.map @@ -1,6 +1,6 @@ { "version": 3, - "mappings": "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", + "mappings": "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", "sources": [ "../scss/App.scss" ], diff --git a/src/data/wordlist_grade_1.json b/src/data/wordlist_grade_1.json new file mode 100644 index 0000000..79997b1 --- /dev/null +++ b/src/data/wordlist_grade_1.json @@ -0,0 +1,34 @@ +{ + "words": [ + "am", + "and", + "big", + "bit", + "but", + "cat", + "did", + "eat", + "frog", + "green", + "hand", + "hog", + "is", + "like", + "little", + "map", + "meet", + "nose", + "pet", + "ran", + "rip", + "see", + "six", + "some", + "stop", + "that", + "then", + "try", + "when", + "you" + ] +} diff --git a/src/scss/App.scss b/src/scss/App.scss index cb8fac0..8590253 100644 --- a/src/scss/App.scss +++ b/src/scss/App.scss @@ -1,9 +1,15 @@ +$main-bg-color: #FFF; +$main-box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.2); +$main-border-radius: 5px; +// $border-radius-neumorphic: 0px -6px 10px rgba(255, 255, 255, 1), 0px 4px 15px rgba(0, 0, 0, 0.15); + html, body { margin: 0px; padding: 0px; height: 100%; width: 100%; box-sizing: border-box; + background: $main-bg-color; } #root { height: 100%; @@ -14,11 +20,12 @@ html, body { } #mode-picker { display: flex; - div { + background: #fcfcfc; margin: 15px; padding: 5px; - box-shadow: 0px 0px 15px #000; + box-shadow: $main-box-shadow; + border-radius: $main-border-radius; } } #main-content { @@ -40,9 +47,10 @@ html, body { #morseBufferDisplay { display: flex; justify-content: center; - border: 1px solid green; + // border: 1px solid green; width: 100%; height: 40px; + margin-bottom: 20px; #ditDahs { width: 50%; @@ -57,7 +65,9 @@ html, body { height: 40px; width: 30px !important; margin-left: 3px; - box-shadow: 0px 1px 0px #000; + // box-shadow: 0px 1px 0px #000; + border-radius: $main-border-radius; + box-shadow: $main-box-shadow; display: flex; justify-content: center; align-items: center; @@ -67,13 +77,24 @@ html, body { } } - #alphanumeric { - padding-left: 5px; + #alphanumeric-container { border-left: 2px solid #000; + padding-left: 5px; width: 50%; - font-size: 40px; - font-family: 'Courier'; - font-weight: bold; + display: flex; + + #alphanumeric { + font-size: 40px; + font-family: 'Courier'; + font-weight: bold; + background-color: transparent; + + &:first-child { + padding-left: 5px; + padding-right: 5px; + // box-shadow: $main-box-shadow; + } + } } } @@ -82,6 +103,8 @@ html, body { } .morseError { background: rgba(255,0,0,0.4); + color: rgb(120, 0, 0); + border-radius: 5px; } #morseDisplay { @@ -112,21 +135,33 @@ html, body { justify-content: center; /* border: 1px solid orange; */ margin-bottom: 2px; - font-size: 40px; + font-size: 2.5rem; font-family: 'Courier'; font-weight: bold; /* width: 100%; */ - div { - /* border: 1px solid purple; */ + + div div { + // border: 1px solid purple; + cursor: default; padding: 5px; - margin: 2px; + margin: 3px; background: #EEE; - width: 50%; + // width: 50%; white-space: nowrap; + border-radius: $main-border-radius; + box-shadow: $main-box-shadow; + line-height: 2rem; + } + .ditDahs-container, .alphanumeric-container { + display: flex; + width: 50%; + } + .ditDahs-container { + justify-content: flex-end; } - .ditDahs { + // border: 1px solid red; display: flex; justify-content: flex-end; align-items: center;