diff --git a/src/App.js b/src/App.js index c56c56f..132b1c4 100644 --- a/src/App.js +++ b/src/App.js @@ -35,43 +35,45 @@ export default React.memo(function App() { <>
- - -
- - - - {gameMode === 'challenge' && - - } + - - {keyType === "straight" ? - : - } - - {gameMode === 'practice' && - - } - - {/* {gameMode === 'timed' && - <> +
{keyType === "straight" ? - : } -
-
-
- - } */} + : + } - {gameMode === 'challenge' && - - } + {gameMode === 'practice' && + + } + + {/* {gameMode === 'timed' && + <> + {keyType === "straight" ? + : } +
+
+
+ + } */} - + {gameMode === 'challenge' && + + } + + +
diff --git a/src/app-modes/ChallengeMode.js b/src/app-modes/ChallengeMode.js index 5d73d68..f672f55 100644 --- a/src/app-modes/ChallengeMode.js +++ b/src/app-modes/ChallengeMode.js @@ -1,4 +1,4 @@ -import React, {useContext} from 'react'; +import React, {useContext, useEffect} from 'react'; import '../css/App.css'; import morseCode from '../data/morse-reverse.json' import ChallengeWord from '../components/ChallengeWord' @@ -24,17 +24,20 @@ export default React.memo(function ChallengeMode(props) { let incorrectMorseIndexes = [] // Indexes of incorrect morse characters in morse character buffer let offset = 0 - + + if (!word) { console.log('FINISHED ALL WORDS!') alert('No more words.') return } + + let challengeLetters = word.split('') + // Iterate through the morse character buffer and compare with each letter of challenge word morseArray.forEach((item, index) => { - if (morseCharBuffer.slice(-1) === '_') { // If end of morse character let morseLetter = morseCode[morseArray[index]] || '[?]' diff --git a/src/app-modes/PracticeMode.js b/src/app-modes/PracticeMode.js index ca7b645..b312ae2 100644 --- a/src/app-modes/PracticeMode.js +++ b/src/app-modes/PracticeMode.js @@ -1,6 +1,7 @@ import React from 'react'; import '../css/App.css'; import MorseBufferDisplay from '../components/MorseBufferDisplay' +import MorseHistoryTextBox from '../components/MorseHistory_textbox' import MorseHistory from '../components/MorseHistory' @@ -9,7 +10,7 @@ export default (function PracticeMode(props) { return ( <>
-
+ ); diff --git a/src/components/KeyTypePicker.js b/src/components/KeyTypePicker.js index 1b8fdbe..1b2b41b 100644 --- a/src/components/KeyTypePicker.js +++ b/src/components/KeyTypePicker.js @@ -36,10 +36,10 @@ export default React.memo(function KeyTypePicker() { return (
- Keyer Type  + Keyer Type 
-
- - + +
SPACEBAR diff --git a/src/components/MorseHistory_textbox.js b/src/components/MorseHistory_textbox.js index 3b9474e..c63725c 100644 --- a/src/components/MorseHistory_textbox.js +++ b/src/components/MorseHistory_textbox.js @@ -3,11 +3,12 @@ import React, {useContext, useState} from "react" import morseCode from '../data/morse-reverse.json' import {MorseBufferContext} from "../contexts/morseBufferContext" -export default (function MorseHistory() { +export default (function MorseHistoryTextBox() { const {morseWords} = useContext(MorseBufferContext) let text = '' + let span = [] console.log('morseWords', morseWords); @@ -23,14 +24,15 @@ export default (function MorseHistory() { newWord += morseCode[letter].toUpperCase() } }) - text = newWord + ' ' + text + // text = newWord + ' ' + text + span.splice(0, 0, {newWord}) } else if (morseCode[word] === undefined) { - text = '[?]' + text - console.log('undefined', word); + // text = '[?] ' + text + span.splice(0, 0, [?]) } else { - console.log('here2'); - text = morseCode[word].toUpperCase() + ' ' + text + // text = morseCode[word].toUpperCase() + ' ' + text + span.splice(0, 0, {morseCode[word].toUpperCase()}) } }) @@ -39,6 +41,6 @@ export default (function MorseHistory() { // } catch {} return ( -
{text}
+
{span}
) }) \ No newline at end of file diff --git a/src/components/WordListPicker.js b/src/components/WordListPicker.js index 078e0a8..46ac6d0 100644 --- a/src/components/WordListPicker.js +++ b/src/components/WordListPicker.js @@ -34,7 +34,7 @@ export default React.memo(function WordListPicker() { Word List
- @@ -57,7 +57,7 @@ export default React.memo(function WordListPicker() { Word Order
-   +   +
) diff --git a/src/contexts/wordFeederContext.js b/src/contexts/wordFeederContext.js index 5dbfdbe..e63de92 100644 --- a/src/contexts/wordFeederContext.js +++ b/src/contexts/wordFeederContext.js @@ -5,7 +5,7 @@ const WordFeederContext = React.createContext() function WordFeederContextProvider(props) { console.log('LOADED: wordFeederContext'); // let wordList = ['hi', 'morse', 'code', 'hello', 'gene'] - const {wordList, wordListShuffled} = useContext(WordListPickerContext) + const {wordList, wordListShuffled, wordListCategory} = useContext(WordListPickerContext) const [wordIndex, setWordIndex] = useState(0) const [order, setOrder] = useState('sequential') diff --git a/src/contexts/wordListPickerContext.js b/src/contexts/wordListPickerContext.js index 6556e42..76832eb 100644 --- a/src/contexts/wordListPickerContext.js +++ b/src/contexts/wordListPickerContext.js @@ -42,7 +42,7 @@ function WordListPickerContextProvider(props) { return ( - + {props.children} ) diff --git a/src/contexts/wpmContext.js b/src/contexts/wpmContext.js index 81ecbb2..d457795 100644 --- a/src/contexts/wpmContext.js +++ b/src/contexts/wpmContext.js @@ -8,8 +8,9 @@ function WPMContextProvider(props) { return ( + wpm: Number(wpm), + setWPM: setWPM} + }> {props.children} ) diff --git a/src/css/App.css b/src/css/App.css index 74674a4..b0083b6 100644 --- a/src/css/App.css +++ b/src/css/App.css @@ -8,14 +8,14 @@ } button { - font-family: #f2f2f2; + font-family: #f1f1f1; cursor: pointer; } html, body { height: 100%; width: 100%; - background: #f2f2f2; + background: #f1f1f1; } #root { @@ -35,10 +35,43 @@ html, body { } header { - margin-top: 100px; + margin-top: 50px; } #main-content { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + height: 95vh; + width: 95vw; + border: 1px solid red; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; +} + +#main-content #sidebar { + border: 1px solid green; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + -ms-flex-pack: distribute; + justify-content: space-around; + height: 100%; + width: 350px; + padding-top: 50px; + padding-bottom: 50px; +} + +#main-content #main-interface { + border: 1px solid blue; display: -webkit-box; display: -ms-flexbox; display: flex; @@ -46,11 +79,114 @@ header { -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; - width: 95vw; - border: 1px solid red; -webkit-box-align: center; -ms-flex-align: center; align-items: center; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + width: 900px; + height: 100%; + min-width: 400px; +} + +i[class*="ri-"] { + cursor: pointer; + font-weight: normal; + font-size: 0.9rem; + color: #777; +} + +i[class*="ri-"]:hover { + color: goldenrod; +} + +#mainOptions { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + -webkit-box-align: start; + -ms-flex-align: start; + align-items: flex-start; + width: 100%; + max-width: 95vw; + height: 200px; + border: 1px solid red; +} + +#mainOptions .mode-picker { + width: 100%; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -ms-flex-item-align: start; + align-self: flex-start; + -ms-flex-line-pack: center; + align-content: center; + -webkit-box-pack: start; + -ms-flex-pack: start; + justify-content: flex-start; +} + +#mainOptions .mode-picker #title { + font-weight: bold; +} + +#mainOptions .mode-picker #buttons { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: justify; + -ms-flex-pack: justify; + justify-content: space-between; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; +} + +#mainOptions .mode-picker #buttons button { + height: 1.4rem; +} + +#mainOptions .mode-picker #input { + margin-left: 10px; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; +} + +#mainOptions .mode-picker #input input { + width: 50px; + -webkit-appearance: textfield; + -moz-appearance: textfield; + appearance: textfield; + text-align: center; + border-radius: 3px; + border: 1px solid #ddd; + height: 1.3rem; +} + +#mainOptions .mode-picker #input select { + height: 1.4rem; +} + +#mainOptions .mode-picker #input button { + height: 20px; + width: 20px; + border-radius: 50%; + line-height: 10px; +} + +#mainOptions .mode-picker #input button i { + position: relative; + left: -2px; } .mode-picker { @@ -75,7 +211,7 @@ header { } .mode-picker button { - background: #f2f2f2; + background: #f1f1f1; color: #333; margin: 7px; padding: 5px; @@ -91,19 +227,15 @@ header { } #legend { - width: 400px; - height: 325px; + background: #f1f1f1; + width: 100%; + max-width: 95vw; display: -webkit-box; display: -ms-flexbox; display: flex; - -webkit-box-orient: vertical; - -webkit-box-direction: normal; - -ms-flex-direction: column; - flex-direction: column; -webkit-box-pack: space-evenly; -ms-flex-pack: space-evenly; justify-content: space-evenly; - position: fixed; top: 250px; left: 50px; -ms-flex-wrap: wrap; @@ -132,6 +264,13 @@ header { box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.2), 0px -1px 1px white; } +#legend div button:active { + -webkit-transform: translateY(3px); + transform: translateY(3px); + -webkit-box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.3); + box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.3); +} + #legend div span { width: 60%; -webkit-box-pack: center; @@ -141,11 +280,11 @@ header { } #morseButton { - width: 100px; - height: 100px; + width: 400px; + height: 55px; margin-top: 30px; margin-bottom: 10px; - border-radius: 50px; + border-radius: 5px; -ms-flex-item-align: center; align-self: center; display: -webkit-box; @@ -157,14 +296,72 @@ header { -webkit-box-align: center; -ms-flex-align: center; align-items: center; - -webkit-transition: all 500ms ease-in-out; - transition: all 500ms ease-in-out; + -webkit-box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.2), 0px -1px 1px white; + box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.2), 0px -1px 1px white; + -webkit-transition: width 500ms ease-out, background 500ms ease-out, -webkit-transform 40ms ease-out, -webkit-box-shadow 40ms ease-out; + transition: width 500ms ease-out, background 500ms ease-out, -webkit-transform 40ms ease-out, -webkit-box-shadow 40ms ease-out; + transition: transform 40ms ease-out, box-shadow 40ms ease-out, width 500ms ease-out, background 500ms ease-out; + transition: transform 40ms ease-out, box-shadow 40ms ease-out, width 500ms ease-out, background 500ms ease-out, -webkit-transform 40ms ease-out, -webkit-box-shadow 40ms ease-out; +} + +#morseButton.active { + -webkit-transform: translateY(3px); + transform: translateY(3px); + -webkit-box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.3); + box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.3); +} + +#morseButton button { + font-size: 1rem; + color: transparent; + width: 200px; + height: 55px; + background: #f4f4f4; + margin: 0px; + border: 0px; + -webkit-transition: width 500ms ease-out, background 500ms ease-out, -webkit-transform 40ms ease-out, -webkit-box-shadow 40ms ease-out; + transition: width 500ms ease-out, background 500ms ease-out, -webkit-transform 40ms ease-out, -webkit-box-shadow 40ms ease-out; + transition: transform 40ms ease-out, box-shadow 40ms ease-out, width 500ms ease-out, background 500ms ease-out; + transition: transform 40ms ease-out, box-shadow 40ms ease-out, width 500ms ease-out, background 500ms ease-out, -webkit-transform 40ms ease-out, -webkit-box-shadow 40ms ease-out; +} + +#morseButton button.showPaddles { + color: #888; + font-size: 1rem; + font-weight: bold; + width: 60px; + height: 55px; -webkit-box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.2), 0px -1px 1px white; box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.2), 0px -1px 1px white; } +#morseButton button#left { + border-radius: 5px 0 0 5px; +} + +#morseButton button#left.showPaddles { + margin-right: 7px; + border-radius: 5px; +} + +#morseButton button#right { + border-radius: 0 5px 5px 0; +} + +#morseButton button#right.showPaddles { + margin-left: 7px; + border-radius: 5px; +} + +#morseButton button.active { + -webkit-transform: translateY(3px); + transform: translateY(3px); + -webkit-box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.3); + box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.3); +} + #morseButton.showPaddles { - width: 239px; + width: 134px; background: transparent; -webkit-box-shadow: 0px 0px 0px transparent; box-shadow: 0px 0px 0px transparent; @@ -172,130 +369,18 @@ header { #morseButtonText { font-weight: bold; - color: #ccc; + color: #bbb; font-size: 0.7rem; margin-bottom: 40px; } #paddleText { - width: 150px; + width: 140px; display: -webkit-box; display: -ms-flexbox; display: flex; - -webkit-box-pack: justify; - -ms-flex-pack: justify; - justify-content: space-between; -} - -.paddle { - font-size: 1rem; - color: transparent; - width: 100px; - height: 100px; - background: goldenrod; - margin: 0px; - border: 0px; - -webkit-transition: all 500ms ease-in-out; - transition: all 500ms ease-in-out; -} - -.paddle#left { - border-radius: 50px 0 0 50px; -} - -.paddle#left.showPaddles { - margin-right: 7px; - border-radius: 20px 0 0 20px; -} - -.paddle#right { - border-radius: 0 50px 50px 0; -} - -.paddle#right.showPaddles { - margin-left: 7px; - border-radius: 0 20px 20px 0; -} - -.paddle.showPaddles { - color: #000; - font-size: 2.5rem; - font-weight: bold; - width: 250px; - height: 100px; - -webkit-box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.2), 0px -1px 1px white; - box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.2), 0px -1px 1px white; -} - -i[class*="ri-"] { - font-weight: normal; - font-size: 0.9rem; - color: #777; -} - -i[class*="ri-"]:hover { - color: goldenrod; -} - -#mainOptions { - display: -webkit-box; - display: -ms-flexbox; - display: flex; - -webkit-box-orient: vertical; - -webkit-box-direction: normal; - -ms-flex-direction: column; - flex-direction: column; - -webkit-box-align: start; - -ms-flex-align: start; - align-items: flex-start; - width: 400px; -} - -#mainOptions .mode-picker { - -ms-flex-item-align: start; - align-self: flex-start; - width: 100%; - -webkit-box-pack: start; - -ms-flex-pack: start; - justify-content: flex-start; -} - -#mainOptions .mode-picker #buttons { - display: -webkit-box; - display: -ms-flexbox; - display: flex; - -webkit-box-pack: justify; - -ms-flex-pack: justify; - justify-content: space-between; - -ms-flex-line-pack: justify; - align-content: space-between; -} - -#mainOptions .mode-picker #input { - margin-left: 10px; - display: -webkit-box; - display: -ms-flexbox; - display: flex; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; -} - -#mainOptions .mode-picker #input input { - width: 50px; - text-align: center; - border-radius: 3px; - border: 1px solid #ddd; - height: 1.3rem; -} - -#mainOptions .mode-picker #input select:focus { - -webkit-box-shadow: none; - box-shadow: none; -} - -#mainOptions #title { - font-weight: bold; + -ms-flex-pack: distribute; + justify-content: space-around; } #challengeWord { @@ -308,22 +393,23 @@ i[class*="ri-"]:hover { -webkit-box-align: center; -ms-flex-align: center; align-items: center; + -ms-flex-item-align: center; + align-self: center; height: 50px; - margin-bottom: 20px; - padding-left: 10px; - padding-right: 10px; - border-radius: 5px; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; - display: flex; + margin-bottom: 20px; + padding-left: 10px; + padding-right: 10px; + border-radius: 4px; + -webkit-box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.2), 0px -1px 1px white; + box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.2), 0px -1px 1px white; font-size: 3rem; - font-family: "Courier Prime", monospace; + font-family: "Courier", monospace; font-weight: bold; - background: #EEE; + background: #fdfdfd; text-transform: uppercase; - -ms-flex-item-align: center; - align-self: center; -webkit-transition: all 300ms ease-in-out; transition: all 300ms ease-in-out; } @@ -355,10 +441,11 @@ i[class*="ri-"]:hover { -webkit-box-align: center; -ms-flex-align: center; align-items: center; - width: 50vw; + width: 100%; height: 150px; margin-bottom: 20px; - font-family: "Courier Prime", monospace; + font-family: "Courier", monospace; + font-weight: bold; } #morseBufferDisplay #alphanumeric-container { @@ -367,7 +454,7 @@ i[class*="ri-"]:hover { display: -ms-flexbox; display: flex; padding-left: 5px; - height: 50px; + height: 3rem; min-width: 250px; margin-bottom: 10px; display: flex; @@ -378,10 +465,12 @@ i[class*="ri-"]:hover { -ms-flex-align: center; align-items: center; border-radius: 4px; + -webkit-box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.2), 0px -1px 1px white; + box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.2), 0px -1px 1px white; } #morseBufferDisplay #alphanumeric-container #alphanumeric { - font-size: 40px; + font-size: 3rem; background-color: transparent; } @@ -459,7 +548,7 @@ i[class*="ri-"]:hover { width: 100%; height: 150px; margin-bottom: 20px; - font-family: "Courier Prime", monospace; + font-family: "Courier", monospace; font-weight: bold; } @@ -553,7 +642,26 @@ i[class*="ri-"]:hover { border-radius: 5px; } +#morseHistory-textbox { + border: 1px solid cyan; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + height: 150px; + width: 75%; + padding: 15px; + font-family: Courier; + font-size: 1.5rem; +} + +#morseHistory-textbox span { + background: #CCC; + margin-right: 0.7rem; + height: 1.5rem; +} + #morseHistory { + border: 1px solid purple; display: -webkit-box; display: -ms-flexbox; display: flex; @@ -561,6 +669,7 @@ i[class*="ri-"]:hover { -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; + width: 100%; } #morseHistory .morseCard:nth-child(1) { @@ -604,26 +713,32 @@ i[class*="ri-"]:hover { justify-content: center; /* border: 1px solid orange; */ margin-bottom: 2px; - font-size: 1.5rem; - font-family: "Courier Prime", monospace; + font-size: 1.7rem; + font-family: "Courier", monospace; /* width: 100%; */ } .morseCard div div { - cursor: default; - padding: 5px; + padding: 3px; margin: 2px; background: #fdfdfd; white-space: nowrap; border-radius: 3px; -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: 1.2rem; + line-height: 1.7rem; display: -webkit-box; display: -ms-flexbox; display: flex; } +.morseCard div div span.morseError { + background: rgba(255, 0, 0, 0.4); + height: 1.7rem; + color: #780000; + border-radius: 5px; +} + .morseCard .ditDahs-container, .morseCard .alphanumeric-container { display: -webkit-box; display: -ms-flexbox; diff --git a/src/css/App.css.map b/src/css/App.css.map index c2bc9b5..de9c89a 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/hooks/useElectronicKey.js b/src/hooks/useElectronicKey.js index 77ee095..659ffc5 100644 --- a/src/hooks/useElectronicKey.js +++ b/src/hooks/useElectronicKey.js @@ -235,13 +235,15 @@ function useElectronicKey() { function handleInputStart(event) { - event.preventDefault() + // event.preventDefault() paddlesReleasedSimultaneously = false if (event.repeat) { return } if (event.keyCode === 188 || event.target.id === "left") { + document.getElementById('left').classList.add('active') + leftIsPressed = true if (!rightIsPressed) { pressedFirst = 'left'} @@ -251,6 +253,8 @@ function useElectronicKey() { } } else if (event.keyCode === 190 || event.target.id === "right") { + document.getElementById('right').classList.add('active') + rightIsPressed = true if (!leftIsPressed) { pressedFirst = 'right'} @@ -262,11 +266,13 @@ function useElectronicKey() { } function handleInputEnd(event) { - event.preventDefault() + // event.preventDefault() // if (!insideBufferDisplay) {return} if (event.keyCode === 188 || event.target.id === "left") { + document.getElementById('left').classList.remove('active') + leftIsPressed = false if (pressedFirst === 'left') { pressedFirst = null } @@ -275,6 +281,8 @@ function useElectronicKey() { else { stopDepressSyncTimer() } } if (event.keyCode === 190 || event.target.id === "right") { + document.getElementById('right').classList.remove('active') + rightIsPressed = false if (pressedFirst === 'right') { pressedFirst = null } diff --git a/src/hooks/useStraightKey.js b/src/hooks/useStraightKey.js index 095d952..9043c2c 100644 --- a/src/hooks/useStraightKey.js +++ b/src/hooks/useStraightKey.js @@ -46,43 +46,14 @@ function useStraightKey() { } function handleInputStart(event) { - event.preventDefault() - console.log('ditMaxTime',ditMaxTime); - console.log('letterGapMinTime',letterGapMinTime); - console.log('wordGapMaxTime',wordGapMaxTime); - // console.log('event.type', event.type); - // if (event.type === 'mousedown' && event.target.className !== 'paddle') { - // if (event.target.id === 'wpm-input') { - // console.log('REMOVED KEYDOWN/UP'); - // document.removeEventListener('keydown', handleInputStart) - // document.removeEventListener('keyup', handleInputEnd) - // event.target.focus() - // } else { - // document.addEventListener('keydown', handleInputStart) - // document.addEventListener('keyup', handleInputEnd) - // document.activeElement.blur() - // } - // } + // event.preventDefault() + + - // console.log(event.target); - // if (event.type === 'mousedown' && event.target.className !== 'paddle') { - // if (bufferDisplay.includes(event.target.id)) { - // document.addEventListener('keydown', handleInputStart) - // document.addEventListener('keyup', handleInputEnd) - // insideBufferDisplay = true - // console.log('insideBufferDisplay', insideBufferDisplay); - // } else { - // document.removeEventListener('keydown', handleInputStart) - // document.removeEventListener('keyup', handleInputEnd) - // insideBufferDisplay = false - // console.log('insideBufferDisplay', insideBufferDisplay); - // if (event.target.id === 'wpm-input') { - // event.target.focus() - // } else { - // document.activeElement.blur() - // } - // } - // } + if (event.keyCode === 32 && document.activeElement.id === 'wordlist-picker') { + event.preventDefault() + document.activeElement.blur() + } if (isRunning) { @@ -93,8 +64,10 @@ function useStraightKey() { event.target.id !== "morseButton" && event.target.className !== "paddle") || (event.repeat)) { - return - } + return + } + + document.getElementById('morseButton').classList.add('active') isRunning = true @@ -128,7 +101,7 @@ function useStraightKey() { } function handleInputEnd(event) { - event.preventDefault() + // event.preventDefault() // if (event.target.id !== 'morseBufferDisplay') { // insideBufferDisplay = true @@ -143,6 +116,9 @@ function useStraightKey() { (event.repeat)) { return } + + document.getElementById('morseButton').classList.remove('active') + isRunning = false diff --git a/src/scss/App.scss b/src/scss/App.scss index 1746ffc..38e2009 100644 --- a/src/scss/App.scss +++ b/src/scss/App.scss @@ -1,10 +1,11 @@ // $main-bg-color-dark: #2c2c2c; @import url('https://fonts.googleapis.com/css?family=Courier+Prime:700|Rubik&display=swap'); $main-font: 'Rubik', sans-serif; -$buffer-font: 'Courier Prime', monospace; +// $buffer-font: 'Courier Prime', monospace; +$buffer-font: 'Courier', monospace; $ditDah-font: 'Courier', monospace; -$main-bg-color-light: #f2f2f2; +$main-bg-color-light: #f1f1f1; $main-font-color-light: #333; @@ -45,19 +46,109 @@ html, body { border: 3px solid green; } header { - margin-top: 100px; + margin-top: 50px; } #main-content { display: flex; - flex-direction: column; + height: 95vh; width: 95vw; border: 1px solid red; + justify-content: center; align-items: center; + + #sidebar { + border: 1px solid green; + display: flex; + flex-direction: column; + justify-content: space-around; + height: 100%; + width: 350px; + padding-top: 50px; + padding-bottom: 50px; + } + #main-interface { + border: 1px solid blue; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + width: 900px; + height: 100%; + min-width: 400px; + } } footer { } +i[class*="ri-"] { + cursor: pointer; + font-weight: normal; + font-size: 0.9rem; + color: #777; + &:hover { + color: goldenrod; + } +} + +#mainOptions { + display: flex; + flex-direction: column; + align-items: flex-start; + width: 100%; + max-width: 95vw; + height: 200px; + border: 1px solid red; + .mode-picker { + // border: 1px solid green; + width: 100%; + display: flex; + align-self: flex-start; + align-content: center; + justify-content: flex-start; + // height: 60px; + // height: 45px; + #title { + font-weight: bold; + } + #buttons { + // border: 1px solid blue; + display: flex; + justify-content: space-between; + align-items: center; + button { + height: 1.4rem; + } + } + #input { + margin-left: 10px; + display: flex; + align-items: center; + input { + width: 50px; + appearance: textfield; + text-align: center; + border-radius: 3px; + border: 1px solid #ddd; + height: 1.3rem; + } + select { + height: 1.4rem; + } + button { + height: 20px; + width: 20px; + border-radius: 50%; + line-height: 10px; + i { + position: relative; + left: -2px; + } + } + } + } +} + .mode-picker { display: flex; align-self: center; @@ -85,12 +176,13 @@ footer { } #legend { - width: 400px; - height: 325px; + background: $main-bg-color-light; + width: 100%; + max-width: 95vw; + // height: 325px; display: flex; - flex-direction: column; + // flex-direction: column; justify-content: space-evenly; - position: fixed; top: 250px; left: 50px; flex-wrap: wrap; @@ -111,6 +203,10 @@ footer { border: 0px; border-radius: 2px; box-shadow: $main-box-shadow-light; + &:active { + transform: translateY(3px); + box-shadow: 0px 0px 2px rgba(0,0,0,0.3); + } } span { width: 60%; @@ -122,140 +218,175 @@ footer { } #morseButton { - width: 100px; - height: 100px; + width: 400px; + height: 55px; margin-top: 30px; margin-bottom: 10px; - // background: goldenrod; - border-radius: 50px; + border-radius: 5px; align-self: center; display: flex; justify-content: center; align-items: center; - transition: all 500ms ease-in-out; box-shadow: $main-box-shadow-light; -} -#morseButton.showPaddles { - width: 239px; - background: transparent; - box-shadow: 0px 0px 0px transparent; + transition: transform 40ms ease-out, box-shadow 40ms ease-out, width 500ms ease-out, background 500ms ease-out; + + + &.active { + transform: translateY(3px); + box-shadow: 0px 0px 2px rgba(0,0,0,0.3); + } + // &:active > button, &.active > button { + // transform: translateY(1px); + // } + + button { + font-size: 1rem; + color: transparent; + width: 200px; + height: 55px; + // background: yellow; + background: #f4f4f4; + margin: 0px; + border: 0px; + // transition: all 20ms ease-out; + transition: transform 40ms ease-out, box-shadow 40ms ease-out, width 500ms ease-out, background 500ms ease-out; + + &.showPaddles { + color: #888; + font-size: 1rem; + font-weight: bold; + width: 60px; + height: 55px; + box-shadow: $main-box-shadow-light; + } + &#left { + border-radius: 5px 0 0 5px; + &.showPaddles{ + margin-right: 7px; + border-radius: 5px; + } + } + &#right { + border-radius: 0 5px 5px 0; + &.showPaddles{ + margin-left: 7px; + border-radius: 5px; + } + } + &.active { + transform: translateY(3px); + box-shadow: 0px 0px 2px rgba(0,0,0,0.3); + } + } + + &.showPaddles { + width: 134px; + background: transparent; + box-shadow: 0px 0px 0px transparent; + } } #morseButtonText { font-weight: bold; - color: #ccc; + color: #bbb; font-size: 0.7rem; margin-bottom: 40px; } #paddleText { - width: 150px; + width: 140px; display: flex; - justify-content: space-between; + justify-content: space-around; } +// #morseButton.mobile { +// width: 100px; +// height: 100px; +// margin-top: 30px; +// margin-bottom: 10px; +// // background: goldenrod; +// border-radius: 50px; +// align-self: center; +// display: flex; +// justify-content: center; +// align-items: center; +// transition: all 500ms ease-in-out; +// box-shadow: $main-box-shadow-light; +// } +// #morseButton.showPaddles.mobile { +// width: 239px; +// background: transparent; +// box-shadow: 0px 0px 0px transparent; +// } +// #morseButtonText.mobile { +// font-weight: bold; +// color: #bbb; +// font-size: 0.7rem; +// margin-bottom: 40px; +// } +// #paddleText.mobile { +// width: 150px; +// display: flex; +// justify-content: space-between; +// } -.paddle { - font-size: 1rem; - color: transparent; - width: 100px; - height: 100px; - background: goldenrod; - margin: 0px; - border: 0px; - transition: all 500ms ease-in-out; +// .paddle.mobile { +// font-size: 1rem; +// color: transparent; +// width: 100px; +// height: 100px; +// background: goldenrod; +// margin: 0px; +// border: 0px; +// transition: all 500ms ease-in-out; - &#left { - border-radius: 50px 0 0 50px; +// &#left { +// border-radius: 50px 0 0 50px; - &.showPaddles{ - margin-right: 7px; - border-radius: 20px 0 0 20px; - } - } - &#right { - border-radius: 0 50px 50px 0; +// &.showPaddles{ +// margin-right: 7px; +// border-radius: 20px 0 0 20px; +// } +// } +// &#right { +// border-radius: 0 50px 50px 0; - &.showPaddles{ - margin-left: 7px; - border-radius: 0 20px 20px 0; - } - } - &.showPaddles { - color: #000; - font-size: 2.5rem; - font-weight: bold; - width: 250px; - height: 100px; - box-shadow: $main-box-shadow-light; - } -} -i[class*="ri-"] { - font-weight: normal; - font-size: 0.9rem; - color: #777; - &:hover { - color: goldenrod; - } -} +// &.showPaddles{ +// margin-left: 7px; +// border-radius: 0 20px 20px 0; +// } +// } +// &.showPaddles { +// color: #000; +// font-size: 2.5rem; +// font-weight: bold; +// width: 250px; +// height: 100px; +// box-shadow: $main-box-shadow-light; +// } +// } -#mainOptions { - display: flex; - flex-direction: column; - align-items: flex-start; - width: 400px; - // border: 1px solid red; - .mode-picker { - align-self: flex-start; - // border: 1px solid green; - width: 100%; - justify-content: flex-start; - #buttons { - // border: 1px solid blue; - display: flex; - justify-content: space-between; - align-content: space-between; - } - #input { - margin-left: 10px; - display: flex; - align-items: center; - input { - width: 50px; - // appearance: textfield; - text-align: center; - border-radius: 3px; - border: 1px solid #ddd; - height: 1.3rem; - } - select { - &:focus { - box-shadow: none; - } - } - } - } - #title { - font-weight: bold; - } -} #challengeWord { display: flex; justify-content: center; align-items: center; - // border: 1px solid green; + align-self: center; + height: 50px; + width: fit-content; + margin-bottom: 20px; padding-left: 10px; padding-right: 10px; - border-radius: 5px; - width: fit-content; - display: flex; + + // border: 1px solid green; + border-radius: 4px; + box-shadow: $main-box-shadow-light; + font-size: 3rem; - // font-family: 'Courier'; font-family: $buffer-font; font-weight: bold; - background: #EEE; + + background: #fdfdfd; text-transform: uppercase; - align-self: center; transition: all 300ms ease-in-out; span { @@ -277,27 +408,29 @@ i[class*="ri-"] { justify-content: center; flex-direction: column-reverse; align-items: center; - width: 50vw; + width: 100%; height: 150px; margin-bottom: 20px; font-family: $buffer-font; + font-weight: bold; #alphanumeric-container { // border-left: 2px solid #000; background: #fdfdfd; display: flex; padding-left: 5px; - height: 50px; + height: 3rem; min-width: 250px; margin-bottom: 10px; display: flex; justify-content: center; align-items: center; border-radius: 4px; - // box-shadow: $main-box-shadow-light; + box-shadow: $main-box-shadow-light; + // box-shadow: $morseCard-shadow-light; #alphanumeric { - font-size: 40px; + font-size: 3rem; background-color: transparent; @@ -444,10 +577,26 @@ i[class*="ri-"] { // font-size: 1.5em; // } +#morseHistory-textbox { + border: 1px solid cyan; + display: flex; + height: 150px; + width: 75%; + padding: 15px; + // background: #ddd; + font-family: Courier; + font-size: 1.5rem; + span { + background: #CCC; + margin-right: 0.7rem; + height: 1.5rem; + } +} #morseHistory { - // /* border: 1px solid blue; */ + border: 1px solid purple; display: flex; flex-direction: column; + width: 100%; .morseCard:nth-child(1){ opacity: 100%; @@ -487,22 +636,30 @@ i[class*="ri-"] { justify-content: center; /* border: 1px solid orange; */ margin-bottom: 2px; - font-size: 1.5rem; + font-size: 1.7rem; font-family: $buffer-font; /* width: 100%; */ - + div div { - cursor: default; - padding: 5px; + padding: 3px; margin: 2px; background: #fdfdfd; // width: 50%; white-space: nowrap; border-radius: 3px; box-shadow: $morseCard-shadow-light; - line-height: 1.2rem; + line-height: 1.7rem; display: flex; + + span.morseError { + background: rgba(255,0,0,0.4); + height: 1.7rem; + // background: blue; + color: rgb(120, 0, 0); + border-radius: 5px; + // text-decoration: line-through; + } } .ditDahs-container, .alphanumeric-container { display: flex;