From e683a4a824ef114c0c67bb94274b4a6947390860 Mon Sep 17 00:00:00 2001 From: Gene Mecija Date: Sun, 9 Feb 2020 01:47:07 -0800 Subject: [PATCH] Layout updates --- src/App.js | 40 +-- src/components/ChallengeControls.js | 20 -- src/components/ChallengeDisplay.js | 3 +- src/components/FrequencyPicker.js | 55 ++++ src/components/Info.js | 18 +- src/components/ModePicker.js | 7 +- src/components/MorseBufferDisplay.js | 1 + src/components/Options.js | 3 +- src/components/PlayMorseInput.js | 2 +- src/components/SidebarLeft.js | 15 +- src/components/WordListPicker.js | 2 +- src/components/WordsPerMinute.js | 37 ++- src/contexts/frequencyContext.js | 19 ++ src/contexts/wpmContext.js | 2 +- src/css/App.css | 350 +++++++++++------------ src/css/App.css.map | 2 +- src/hooks/useElectronicKey.js | 17 +- src/hooks/useMorsePlayer.js | 4 +- src/hooks/useStraightKey.js | 14 +- src/scss/App.scss | 397 ++++++++++++++++----------- 20 files changed, 587 insertions(+), 421 deletions(-) create mode 100644 src/components/FrequencyPicker.js create mode 100644 src/contexts/frequencyContext.js diff --git a/src/App.js b/src/App.js index 1743083..c03b5d8 100644 --- a/src/App.js +++ b/src/App.js @@ -5,28 +5,23 @@ import { GameModeContext } from "./contexts/gameModeContext" import { MorseBufferContextProvider } from "./contexts/morseBufferContext" import { WordFeederContextProvider } from './contexts/wordFeederContext'; import { WordListPickerContextProvider } from './contexts/wordListPickerContext'; +import { GameClockContextProvider } from './contexts/gameClockContext'; +import { WPMContextProvider } from './contexts/wpmContext'; +import { FrequencyContextProvider } from './contexts/frequencyContext'; +import { KeyTypeContextProvider } from './contexts/keyTypeContext'; + +import PracticeMode from './app-modes/PracticeMode'; +import ChallengeMode from './app-modes/ChallengeMode' import ModePicker from './components/ModePicker' import KeyTypePicker from './components/KeyTypePicker' -import WordListPicker from './components/WordListPicker'; - -import PracticeMode from './app-modes/PracticeMode'; -import TrainingMode from './app-modes/TrainingMode' -import ChallengeMode from './app-modes/ChallengeMode' - import Header from './components/Header'; -import Legend from './components/Legend'; -// import GameClock from "./components/GameClock" import WordsPerMinute from "./components/WordsPerMinute" import MorseButtons from './components/MorseButtons' import Footer from './components/Footer'; -import Info from './components/Info'; -import { GameClockContextProvider } from './contexts/gameClockContext'; import ChallengeOverlay from './components/ChallengeOverlay'; -import { KeyTypeContextProvider } from './contexts/keyTypeContext'; -import { WPMContextProvider } from './contexts/wpmContext'; -import PlayMorseInput from './components/PlayMorseInput'; import SidebarLeft from './components/SidebarLeft'; +import FrequencyPicker from './components/FrequencyPicker'; export default React.memo(function App() { @@ -34,25 +29,29 @@ export default React.memo(function App() { const {gameMode} = useContext(GameModeContext) - - function toggleRight() { - document.querySelector('.sidebar#right').classList.toggle('hide') - // document.querySelector('#main-interface').classList.toggle('expandRight') - } - return ( <>
+
- +
+
+ + +
+
+ + +
+
{gameMode === 'practice' && } @@ -85,6 +84,7 @@ export default React.memo(function App() { +
diff --git a/src/components/ChallengeControls.js b/src/components/ChallengeControls.js index 04fb73c..b50c260 100644 --- a/src/components/ChallengeControls.js +++ b/src/components/ChallengeControls.js @@ -1,27 +1,7 @@ import React from "react" - export default (function ChallengeControls(props) { - // const {startGameClock} = useContext(GameClockContext) - - // function startChallenge(e) { - // let countdown - // let count = 3 - // document.getElementById('challengeReady').classList.add('starting') - // document.getElementById('challengeReady').innerHTML = `Challenge starting in${count}` - // countdown = setInterval(() => { - // count-- - // document.getElementById('challengeReady').innerHTML = `Challenge starting in${count}` - // if (count === 0) { - // // Do this when countdown hits 0 - // document.getElementById('challenge-overlay').classList.add('hide') - // clearInterval(countdown) - // startGameClock() - // } - // }, 1000) - // } - return (
diff --git a/src/components/ChallengeDisplay.js b/src/components/ChallengeDisplay.js index 89af411..ac6e451 100644 --- a/src/components/ChallengeDisplay.js +++ b/src/components/ChallengeDisplay.js @@ -5,9 +5,8 @@ import ChallengeBufferDisplay from "./ChallengeBufferDisplay"; // import ChallengeWord from "./ChallengeWord"; function ChallengeDisplay(props) { - console.log('props.buffer:', props.buffer, '|END'); + let morseLetters = props.buffer.split('_').filter(l => l !== '') - console.log('morseLetters:', morseLetters, morseLetters.length); let challengeLetters = props.word.split('') let correctIndexes = [] let incorrectIndex = null diff --git a/src/components/FrequencyPicker.js b/src/components/FrequencyPicker.js new file mode 100644 index 0000000..1f8f8d5 --- /dev/null +++ b/src/components/FrequencyPicker.js @@ -0,0 +1,55 @@ +import React, {useContext} from "react" +import { FrequencyContext } from "../contexts/frequencyContext"; + +export default React.memo(function FrequencyPicker(props) { + + const {frequency, setFrequency} = useContext(FrequencyContext) + + const maxFreq = 1500 + const minFreq = 300 + + function handleChange(e) { + if (Number(e.target.value) > maxFreq) { + setFrequency(maxFreq) + } else if (Number(e.target.value) < minFreq) { + setFrequency(minFreq) + } else { + setFrequency(Number(e.target.value)) + } + // setFrequency(Number(e.target.value)) + } + function increment() { + // setFrequency(prevFreq => prevFreq + 10) + setFrequency(prevFreq => { + if (prevFreq + 10 <= maxFreq) { + return (prevFreq + 10) + } else { + return maxFreq + } + }) + } + function decrement() { + // setFrequency(prevFreq => prevFreq - 10) + setFrequency(prevFreq => { + if (prevFreq - 10 >= minFreq) { + return (prevFreq - 10) + } else { + return minFreq + } + }) + } + + + return ( +
+
+ Frequency ({minFreq}-{maxFreq}) +
+
+ + + +
+
+ ) +}) \ No newline at end of file diff --git a/src/components/Info.js b/src/components/Info.js index 4045f03..177f97c 100644 --- a/src/components/Info.js +++ b/src/components/Info.js @@ -16,23 +16,23 @@ export default React.memo(function Info() {

Dits and Dahs

-

Dit

playMorseWord('.')}>
+ Dit playMorseWord('.')}>
Denoted as a dot (.), dits are short tones and are base unit of morse code.
-

Dah

playMorseWord('-')}>
+ Dah playMorseWord('-')}>
Denoted as a dash (-), dahs are long tones the length of three dits.

Spacing

-

Intra-character Spacing

playMorseWord('...')}>
- Silence between dits and dahs the length of one dit. Three dits separated by dit-long spaces is an "S".
-

Inter-character Spacing

playMorseWord('. . .')}>
- Silence the length of 3 dits. Three dits separated by three-dit-long spaces is "EEE".
-

Inter-word Spacing

playMorseWord('././.')}>
- Silence the length of 7 dits. Three dits separated by seven-dit-long spaces is "E E E". + Intra-character Spacing playMorseWord('...')}>
+ Silence between dits and dahs the length of one dit. Three dits separated by one-dit-long spaces is an "S".
+ Inter-character Spacing playMorseWord('. . .')}>
+ Silence the length of three dits. Three dits separated by three-dit-long spaces is "EEE".
+ Inter-word Spacing playMorseWord('. /. /.')}>
+ Silence the length of seven dits. Three dits separated by seven-dit-long spaces is "E E E".

-

Speed

+

Speed

Adjusting the WPM (Words Per Minute) in the Options Menu will adjust the lengths of the dits, dahs, and spacing accordingly.

diff --git a/src/components/ModePicker.js b/src/components/ModePicker.js index 60d488e..f7013c1 100644 --- a/src/components/ModePicker.js +++ b/src/components/ModePicker.js @@ -30,16 +30,13 @@ function ModePicker() { return (
- {/*
+
Mode -
*/} +
- diff --git a/src/components/MorseBufferDisplay.js b/src/components/MorseBufferDisplay.js index 3d47fb5..7769c98 100644 --- a/src/components/MorseBufferDisplay.js +++ b/src/components/MorseBufferDisplay.js @@ -29,6 +29,7 @@ export default React.memo(function MorseBufferDisplay() { return (
+
{ditDahs} diff --git a/src/components/Options.js b/src/components/Options.js index 4f7c00e..bbf06e6 100644 --- a/src/components/Options.js +++ b/src/components/Options.js @@ -7,8 +7,7 @@ export default (function Options() { return (
Options
- - +
) }) diff --git a/src/components/PlayMorseInput.js b/src/components/PlayMorseInput.js index 0b27c57..54d8dc8 100644 --- a/src/components/PlayMorseInput.js +++ b/src/components/PlayMorseInput.js @@ -50,7 +50,7 @@ export default (function PlayMorseInput() {

Translate To Morse

- Listen +
diff --git a/src/components/SidebarLeft.js b/src/components/SidebarLeft.js index 646af23..900f9e2 100644 --- a/src/components/SidebarLeft.js +++ b/src/components/SidebarLeft.js @@ -41,18 +41,19 @@ export default (function SidebarLeft() { -
-
+
{sidebarContent === 'nav-learn' && } - {sidebarContent === 'nav-legend' &&
} - {sidebarContent === 'nav-options' && } - + {sidebarContent === 'nav-legend' && +
+ + Adjust the Morse code speed by changing the WPM in the Options menu. + +
+ }
diff --git a/src/components/WordListPicker.js b/src/components/WordListPicker.js index edeabdc..40aede1 100644 --- a/src/components/WordListPicker.js +++ b/src/components/WordListPicker.js @@ -28,7 +28,7 @@ export default React.memo(function WordListPicker() { } let wordLists = ['alphabet', 'numbers', 'common100', 'test', 'short'] - let options = wordLists.map(wl => ()) + let options = wordLists.map((wl, index) => ()) return (
diff --git a/src/components/WordsPerMinute.js b/src/components/WordsPerMinute.js index 76a9781..e40140e 100644 --- a/src/components/WordsPerMinute.js +++ b/src/components/WordsPerMinute.js @@ -1,35 +1,58 @@ import React, {useContext} from "react" import { WPMContext } from "../contexts/wpmContext"; +import useMorsePlayer from "../hooks/useMorsePlayer"; export default React.memo(function WordsPerMinute(props) { console.log('WordsPerMinute rendered'); const {wpm, setWPM} = useContext(WPMContext) - + const {playMorseWord} = useMorsePlayer() + const maxWPM = 30 + const minWPM = 5 function handleChange(e) { - setWPM(Number(e.target.value)) + // setWPM(Number(e.target.value)) + if (Number(e.target.value) > maxWPM) { + setWPM(maxWPM) + } else if (Number(e.target.value) < minWPM) { + setWPM(minWPM) + } else { + setWPM(Number(e.target.value)) + } } function increment() { - setWPM(prevWPM => prevWPM + 1) + // setWPM(prevWPM => prevWPM + 1) + setWPM(prevWPM => { + if (prevWPM + 1 <= maxWPM) { + return (prevWPM + 1) + } else { + return maxWPM + } + }) } function decrement() { - setWPM(prevWPM => prevWPM - 1) + // setWPM(prevWPM => prevWPM - 1) + setWPM(prevWPM => { + if (prevWPM - 1 >= minWPM) { + return (prevWPM - 1) + } else { + return minWPM + } + }) } - console.log('wpm', wpm); - console.log('typeof wpm', typeof wpm); return ( //
- WPM + WPM ({minWPM}-{maxWPM})
+ Test Speed  playMorseWord('.....')}>
) diff --git a/src/contexts/frequencyContext.js b/src/contexts/frequencyContext.js new file mode 100644 index 0000000..eda878b --- /dev/null +++ b/src/contexts/frequencyContext.js @@ -0,0 +1,19 @@ +import React, {useState} from "react" + +const FrequencyContext = React.createContext() + +function FrequencyContextProvider(props) { + + const [frequency, setFrequency] = useState(650) + + return ( + + {props.children} + + ) +} + +export {FrequencyContextProvider, FrequencyContext} diff --git a/src/contexts/wpmContext.js b/src/contexts/wpmContext.js index d457795..9ed06fe 100644 --- a/src/contexts/wpmContext.js +++ b/src/contexts/wpmContext.js @@ -4,7 +4,7 @@ const WPMContext = React.createContext() function WPMContextProvider(props) { - const [wpm, setWPM] = useState(15) + const [wpm, setWPM] = useState(10) return ( { // PRACTICE MODE diff --git a/src/hooks/useMorsePlayer.js b/src/hooks/useMorsePlayer.js index 28305ad..6cf5551 100644 --- a/src/hooks/useMorsePlayer.js +++ b/src/hooks/useMorsePlayer.js @@ -1,10 +1,12 @@ import config from '../config.json' import { WPMContext } from '../contexts/wpmContext.js'; import { useContext } from 'react'; +import { FrequencyContext } from '../contexts/frequencyContext.js'; function useMorsePlayer() { const {wpm} = useContext(WPMContext) + const {frequency} = useContext(FrequencyContext) // const ditMaxTime = 85 //config.ditMaxTime const ditMaxTime = 1200/wpm @@ -18,7 +20,7 @@ function useMorsePlayer() { context = null } - let frequency = config.frequency + // let frequency = config.frequency function play(ditDah) { let length = ((ditDah === '.') ? ditMaxTime : ditMaxTime*3) diff --git a/src/hooks/useStraightKey.js b/src/hooks/useStraightKey.js index 750fa6d..811abe8 100644 --- a/src/hooks/useStraightKey.js +++ b/src/hooks/useStraightKey.js @@ -3,6 +3,7 @@ import {MorseBufferContext} from '../contexts/morseBufferContext' import config from '../config.json' import { WPMContext } from '../contexts/wpmContext' import { GameModeContext } from '../contexts/gameModeContext' +import { FrequencyContext } from '../contexts/frequencyContext' // STRAIGHT KEY TELEGRAPH function useStraightKey() { @@ -10,6 +11,7 @@ function useStraightKey() { const {morseCharBuffer, setMorseCharBuffer, morseWords, setMorseWords} = useContext(MorseBufferContext) const {wpm} = useContext(WPMContext) const {gameMode} = useContext(GameModeContext) + const {frequency} = useContext(FrequencyContext) let charTimer = 0 let charTime = 0 @@ -37,7 +39,7 @@ function useStraightKey() { let o // Oscillator Node let g // Gain Node - let frequency = config.frequency + // let frequency = config.frequency let isRunning = false @@ -51,13 +53,13 @@ function useStraightKey() { console.log(event.keyCode); if (event.keyCode === 32) { - if (document.activeElement.id === 'wordlist-picker') { + if (document.activeElement.id === 'morseInput') { + return + } + else if (document.activeElement.tagName.toLowerCase() !== 'body') { event.preventDefault() document.activeElement.blur() } - else if (document.activeElement.id === 'morseInput') { - return - } } @@ -218,7 +220,7 @@ function useStraightKey() { // clearHistory() } // eslint-disable-next-line - }, [wpm, gameMode]) + }, [wpm, gameMode, frequency]) useEffect(() => { // PRACTICE MODE diff --git a/src/scss/App.scss b/src/scss/App.scss index eac9cdd..cb0fc38 100644 --- a/src/scss/App.scss +++ b/src/scss/App.scss @@ -1,5 +1,5 @@ // $main-bg-color-dark: #2c2c2c; -@import url('https://fonts.googleapis.com/css?family=Courier+Prime:700|Asap|Roboto:700|Roboto|Ubuntu&display=swap'); +@import url('https://fonts.googleapis.com/css?family=Courier+Prime:700|Asap|Roboto:700|Roboto&display=swap'); // $main-font: 'Asap', sans-serif; $main-font: 'Roboto', sans-serif; // $main-font-bold: 'Roboto', sans-serif; @@ -13,7 +13,7 @@ $main-font-color-light: #333; $correct-bg-color: rgba(90,230,90,1); $morseCard-shadow-light: 0px 3px 3px rgba(0, 0, 0, 0.2); -$main-box-shadow-light: 0px 3px 3px rgba(0, 0, 0, 0.35), 0px -1px 1px rgba(255, 255, 255, 1); +$main-box-shadow-light: 0px 2px 2px rgba(0, 0, 0, 0.35), 0px -1px 1px rgba(255, 255, 255, 1); $main-box-shadow-light-selected: inset 0px 2px 2px rgba(0, 0, 0, 0.3), inset 0px -1px 1px rgba(255, 255, 255, 1); $main-box-shadow-dark: 0px 3px 3px rgba(0, 0, 0, 0.2), 0px -1px 1px rgba(255, 255, 255, 0.1); $main-box-shadow-dark-selected: inset 0px 2px 2px rgba(0, 0, 0, 0.2), inset 0px -1px 1px rgba(255, 255, 255, 0.1); @@ -62,9 +62,11 @@ html, body { font-family: $main-font; font-size: 2.5em; // font-weight: bold; + // color: $main-bg-color-light; + color: rgb(218, 184, 32); color: $main-bg-color-light; z-index: 1000; - box-shadow: 0px 2px 2px rgba(0,0,0,0.5); + box-shadow: 0px 2px 2px rgba(0,0,0,0.45); } #main-content { display: flex; @@ -81,8 +83,9 @@ html, body { .sidebar#left { // border: 1px solid blue; + // background: $main-bg-color-light; background: $main-bg-color-light; - box-shadow: 3px 0px 5px rgba(0,0,0,0.2); + box-shadow: 3px 0px 3px rgba(0,0,0,0.25); font-family: 'Roboto', sans-serif; line-height: 1.5em; @@ -142,7 +145,7 @@ html, body { // border: 1px solid black; padding: 10px; // margin: 10px; - width: 20%; + width: 30%; height: 100%; display: flex; justify-content: center; @@ -186,7 +189,7 @@ html, body { display: flex; justify-content: center; align-self: center; - height: calc(100% - 35px); + // height: calc(100% - 35px); // height: 100%; #playerAndLegend { @@ -197,6 +200,17 @@ html, body { flex-direction: column; justify-content: flex-start; align-items: center; + overflow-y: scroll; + #legend, #playMorseInput, span#note { + margin-bottom: 1em; + } + span#note { + font-family: $ditDah-font; + color: #555; + display: inline-block; + width: 65%; + text-align: center; + } } #info { @@ -216,11 +230,13 @@ html, body { margin-bottom: 0.3em; // text-transform: uppercase; } - h3 { + .bold { display: inline-block; + font-size: 1.15em; + font-weight: bold; margin-bottom: 0.1em; } - p, #legend, #playMorseInput { + p { margin-bottom: 2em; } img { @@ -299,6 +315,7 @@ html, body { #main-interface { // border: 1px solid red; + background: white; display: flex; flex-direction: column; align-items: center; @@ -319,36 +336,191 @@ html, body { width: calc(100% - 40px); } - #gameMode { + #mainOptions { // border: 1px solid red; + display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - font-size: 1.5em; - font-weight: bold; - margin-top: 1em; - margin-bottom: 2em; - z-index: 100; + flex-direction: row; + justify-content: flex-start; + // align-items: flex-start; + + height: 6em; + width: 100%; + padding: 10px; + background: rgba(112, 128, 144,0.3); + box-shadow: inset 0px -2px 2px rgba(0,0,0,0.1); - button { - background: $main-bg-color-light; - box-shadow: $main-box-shadow-light; - border-radius: $main-border-radius; - border: 0px; - padding: 0.5em; - margin-left: 10px; - margin-right: 10px; + font-family: $main-font; + z-index: 500; - font-size: 1rem; - color: $main-font-color-light; + #options-left, #options-right { + // border: 1px solid cyan; + display: flex; + flex-direction: column; + justify-content: center; + align-items: flex-start; + width: fit-content; - &.selected { - color: rgb(70, 118, 134);; - box-shadow: $main-box-shadow-light-selected; + .mode-picker { + // border: 1px solid green; + width: fit-content; + display: flex; + align-content: flex-start; + justify-content: flex-start; + + div { + // border: 1px solid blue; + display: flex; + justify-content: center; + align-items: center; + padding: 3px; + height: 100%; + margin-bottom: 5px; + } + #title { + // border: 1px solid red; + justify-content: flex-end; + width: 10em; + font-weight: bold; + font-size: 1.15em; + span#range { + display: inline-block; + padding-left: 5px; + font-size: 0.8em; + } + } + #buttons { + // border: 1px solid blue; + justify-content: space-evenly; + // margin-bottom: 20px; + } + #input { + input { + width: 50px; + height: 1.5rem; + border: 1px solid #ddd; + appearance: textfield; + text-align: center; + border-radius: 3px; + font-size: 0.8rem; + } + select { + height: 1.4rem; + } + button { + width: 1.4em; + height: 1.4em; + border-radius: 3px; + font-size: 1em; + // line-height: 10px; + i { + position: relative; + left: -6px; + top: -2px; + font-size: 1.1em; + font-weight: bold; + } + } + } + button { + background: $main-bg-color-light; + box-shadow: $main-box-shadow-light; + border-radius: $main-border-radius; + border: 0px; + padding: 0.2em; + padding-left: 0.5em; + padding-right: 0.5em; + margin-left: 10px; + margin-right: 10px; + + font-size: 0.9em; + color: $main-font-color-light; + + &.selected { + box-shadow: $main-box-shadow-light-selected; + } + } } } + + #options-left .mode-picker { + #title { + width: 5em; + } + } + + // #mainOptions-title { + // font-size: 2em; + // font-weight: bold; + // margin-bottom: 30px; + // text-transform: uppercase; + // } + + } + // #gameMode { + // // border: 1px solid red; + // display: flex; + // justify-content: center; + // align-items: center; + // width: 100%; + // font-size: 1.5em; + // font-weight: bold; + // // margin-top: 1em; + // margin-bottom: 2em; + // z-index: 100; + + // #buttons { + // // border: 1px solid purple; + // display: flex; + // flex-direction: column; + // padding: 0px; + + // button { + // // background: $main-bg-color-light; + // // box-shadow: $main-box-shadow-light; + // // border-radius: $main-border-radius; + // // border: 0px; + // // padding: 0.5em; + // // margin-left: 10px; + // // margin-right: 10px; + + // // font-size: 1rem; + // // color: $main-font-color-light; + + // // &.selected { + // // // color: rgb(70, 118, 134);; + // // box-shadow: $main-box-shadow-light-selected; + // // } + // background: white; + // font-size: 0.7em; + // // font-weight: bold; + // // text-transform: uppercase; + + // margin-top: 3px; + // padding: 0.3em; + // width: 10em; + // height: 100%; + + + // display: flex; + // justify-content: center; + // // position: relative; + // // overflow: hidden; + // transition: all 150ms ease-in-out; + // border: 0px; + // border-bottom: 2px solid transparent; + + // &:hover { + // background: rgba(0, 0, 0, 0.1); + // border-color: #999; + // } + // &.selected { + // border-color: rgb(180, 60, 60); + // } + // } + // } + // } } } #footer { @@ -361,7 +533,6 @@ html, body { // font-weight: bold; color: $main-bg-color-light; z-index: 1000; - // box-shadow: $main-box-shadow-light; } h2 { margin-bottom: 0.5em; @@ -373,107 +544,7 @@ i[class*="ri-"] { color: #777; } -#mainOptions { - // border: 1px solid red; - display: flex; - flex-direction: column; - align-items: center; - width: 100% !important; - // max-width: 95vw; - // height: 200px; - font-family: $main-font; - padding: 2em; - padding-top: 5em; - // padding-left: 1.5em; - // margin-top: 10px; - // top: 50px; - - #mainOptions-title { - font-size: 2em; - font-weight: bold; - margin-bottom: 30px; - text-transform: uppercase; - } - - .mode-picker { - // border: 1px solid green; - width: auto; - height: auto; - display: flex; - flex-direction: column; - align-content: flex-start; - justify-content: flex-start; - - - div { - // border: 1px solid blue; - padding: 3px; - height: 100%; - display: flex; - justify-content: center; - align-items: center; - margin-bottom: 5px; - } - #title { - // border: 1px solid red; - width: 100%; - font-weight: bold; - font-size: 1.5em; - } - #buttons { - // border: 1px solid blue; - display: flex; - justify-content: space-evenly; - align-items: center; - margin-bottom: 20px; - } - #input { - input { - width: 50px; - height: 2rem; - border: 1px solid #ddd; - appearance: textfield; - text-align: center; - border-radius: 3px; - font-size: 1em; - } - select { - height: 1.4rem; - } - button { - width: 1.6em; - height: 1.6em; - border-radius: 3px; - font-size: 1em; - // line-height: 10px; - i { - position: relative; - left: -5px; - top: -4px; - font-size: 1.1em; - font-weight: bold; - } - } - } - button { - background: $main-bg-color-light; - box-shadow: $main-box-shadow-light; - border-radius: $main-border-radius; - border: 0px; - padding: 0.5em; - margin-left: 10px; - margin-right: 10px; - - font-size: 1em; - color: $main-font-color-light; - - &.selected { - box-shadow: $main-box-shadow-light-selected; - } - } - } -} #playMorseInput { background: #ddd; @@ -486,7 +557,7 @@ i[class*="ri-"] { flex-direction: column; align-items: center; margin-bottom: 45px; - overflow: hidden; + // overflow: hidden; i:hover { color: goldenrod; @@ -555,19 +626,28 @@ i[class*="ri-"] { margin: 5px; padding: 0.3em; - border: 1px solid #aaa; - border-radius: 5px; + border: 1px solid #ccc; + border-radius: 3px; transition: all 50ms ease-in-out; - // box-shadow: $main-box-shadow-light; + background: #ddd; + + border: 0px; + background: $main-bg-color-light; + box-shadow: $main-box-shadow-light; + span { + transition: all 50ms ease-in-out; + } &:active { transform: scale(0.95); border-color: rgba(112, 128, 144,0.6); + background: #ddd; span:first-child { background: rgba(112, 128, 144,0.6); } } &:hover { border-color: rgba(112, 128, 144,0.6); + background: #ddd; span:first-child { background: rgba(112, 128, 144,0.6); } @@ -782,7 +862,7 @@ $button-radius: 50px; height: 100%; z-index: 50; // background-color: rgba(0,0,0,0.4); - background: rgba(255,255,255,0.3); + background: rgba(255,255,255,0.75); // background-image: linear-gradient(0deg, transparent, rgba(1,1,1,1)); display: flex; justify-content: center; @@ -811,7 +891,7 @@ $button-radius: 50px; height: 250px; // background: $main-bg-color-light; background: #fefefe; - margin-top: 150px; + margin-top: 30%; border-radius: 5px; box-shadow: 0px 5px 15px rgba(0,0,0,0.5); @@ -974,6 +1054,7 @@ $button-radius: 50px; #morseBufferDisplay { // border: 1px solid green; + background: #eee; display: flex; justify-content: center; flex-direction: column-reverse; @@ -983,40 +1064,37 @@ $button-radius: 50px; margin-bottom: 20px; font-family: $buffer-font; position: relative; - // font-weight: bold; + // box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.2); + // border-bottom: 2px solid rgba(0,0,0,0.1); #overlay { // background: blue; - box-shadow: inset 20px 0px 20px -5px $main-bg-color-light; + box-shadow: inset 20px 0px 20px -5px #eee; position: absolute; display: inline-block; top:0; - left:0; - width: 100%; + left: calc(50% - 37.5%); + width: 600px; height: 100%; - z-index: 100; + z-index: 40; } #alphanumeric-container { - text-align: center; - max-width: 100%; - min-width: 300px; - overflow: hidden; - - display: inline-block; - padding-top: 10px; // border: 1px solid red; + // max-width: 100%; + // min-width: 300px; + text-align: center; + max-width: 75%; + display: inline-block; + overflow: hidden; + padding-top: 10px; #alphanumeric { // border: 1px solid blue; - background: #fdfdfd; + height: 5rem; - width: 100%; - padding-left: 5px; - padding-right: 5px; padding-top: 0.45rem; font-size: 4rem; - min-width: 4rem; margin-bottom: 10px; border-radius: $main-border-radius; // box-shadow: $main-box-shadow-light; @@ -1024,11 +1102,10 @@ $button-radius: 50px; } } #ditDahs-container { - // display: flex; - // justify-content: flex-start; - text-align: center; - max-width: 100%; // border: 1px solid red; + text-align: center; + max-width: 75%; + display: inline-block; overflow: hidden; #ditDahs { @@ -1203,9 +1280,9 @@ $button-radius: 50px; #morseHistory-textbox { // border: 1px solid cyan; - background: #ddd; + background: #f8f8f8; border-radius: 5px; - min-height: 2em; + min-height: 4em; width: 80%; max-width: 500px; padding: 0.5em;