genemecija/learn-morse-code
1
0
Fork 0
mirror of https://github.com/genemecija/learn-morse-code.git synced 2026-04-21 06:03:56 +00:00
Code Issues Projects Releases Packages Wiki Activity

Styling, layout

Browse source
This commit is contained in:
Gene Mecija 2020-01-28 23:46:23 -08:00
parent 4aecd0c7ff
commit 5759522aff
12 changed files with 406 additions and 189 deletions
Download patch file Download diff file Expand all files Collapse all files

3
public/index.html
View file

@ -15,6 +15,7 @@
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/ user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
--> -->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" /> <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<link href="https://cdn.jsdelivr.net/npm/remixicon@2.2.0/fonts/remixicon.css" rel="stylesheet"></link>
<!-- <!--
Notice the use of %PUBLIC_URL% in the tags above. Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build. It will be replaced with the URL of the `public` folder during the build.
@ -24,7 +25,7 @@
work correctly both with client-side routing and a non-root public URL. work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`. Learn how to configure a non-root public URL by running `npm run build`.
--> -->
<title>React App</title> <title>Learn Morse Code</title>
</head> </head>
<body> <body>
<noscript>You need to enable JavaScript to run this app.</noscript> <noscript>You need to enable JavaScript to run this app.</noscript>

29
src/App.js
View file

@ -21,7 +21,6 @@ import Legend from './components/Legend';
import WordsPerMinute from "./components/WordsPerMinute" import WordsPerMinute from "./components/WordsPerMinute"
import MorseButtons from './components/MorseButtons' import MorseButtons from './components/MorseButtons'
import Footer from './components/Footer'; import Footer from './components/Footer';
import { WPMContext } from './contexts/wpmContext';
import StraightKey from './components/StraightKey'; import StraightKey from './components/StraightKey';
import ElectronicKey from './components/ElectronicKey'; import ElectronicKey from './components/ElectronicKey';
@ -31,19 +30,24 @@ export default React.memo(function App() {
const {keyType} = useContext(KeyTypeContext) const {keyType} = useContext(KeyTypeContext)
const {gameMode} = useContext(GameModeContext) const {gameMode} = useContext(GameModeContext)
const wpm = useContext(WPMContext)
return ( return (
<> <>
<Header /> <Header />
<div id='main-content'> <div id='main-content'>
<Legend /> <Legend />
<WordsPerMinute />
<MorseBufferContextProvider> <MorseBufferContextProvider>
<WordListPickerContextProvider>
<ModePicker /> <WordFeederContextProvider>
<KeyTypePicker /> <div id="mainOptions">
<ModePicker />
<WordsPerMinute />
<KeyTypePicker />
{gameMode === 'challenge' &&
<WordListPicker />
}
</div>
{keyType === "straight" ? {keyType === "straight" ?
<StraightKey /> : <ElectronicKey /> <StraightKey /> : <ElectronicKey />
@ -64,17 +68,12 @@ export default React.memo(function App() {
} */} } */}
{gameMode === 'challenge' && {gameMode === 'challenge' &&
<> <ChallengeMode />
<WordListPickerContextProvider>
<WordFeederContextProvider>
<WordListPicker />
<ChallengeMode />
</WordFeederContextProvider>
</WordListPickerContextProvider>
</>
} }
<MorseButtons /> <MorseButtons />
</WordFeederContextProvider>
</WordListPickerContextProvider>
</MorseBufferContextProvider> </MorseBufferContextProvider>
</div> </div>
<Footer /> <Footer />

22
src/components/KeyTypePicker.js
View file

@ -1,6 +1,7 @@
import React, {useContext} from "react" import React, {useContext} from "react"
import {KeyTypeContext} from "../contexts/keyTypeContext" import {KeyTypeContext} from "../contexts/keyTypeContext"
export default React.memo(function KeyTypePicker() { export default React.memo(function KeyTypePicker() {
const {setKeyType} = useContext(KeyTypeContext) const {setKeyType} = useContext(KeyTypeContext)
@ -9,7 +10,7 @@ export default React.memo(function KeyTypePicker() {
setKeyType(e.target.id) setKeyType(e.target.id)
console.log("KEYTYPE PICKED:", 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 => { buttons.forEach(button => {
if (button.id === e.target.id) { if (button.id === e.target.id) {
button.classList.add('selected') button.classList.add('selected')
@ -21,23 +22,30 @@ export default React.memo(function KeyTypePicker() {
document.querySelector('.paddle').classList.add('showPaddles') document.querySelector('.paddle').classList.add('showPaddles')
document.querySelector('.paddle#left').classList.add('showPaddles') document.querySelector('.paddle#left').classList.add('showPaddles')
document.querySelector('.paddle#right').classList.add('showPaddles') document.querySelector('.paddle#right').classList.add('showPaddles')
document.getElementById('morseButtonText').innerHTML = '<div id="paddleText"><div id="comma">COMMA (,)</div><div id="period">PERIOD (.)</div></div>'
} else { } else {
document.querySelector('#morseButton').classList.remove('showPaddles') document.querySelector('#morseButton').classList.remove('showPaddles')
document.querySelector('.paddle').classList.remove('showPaddles') document.querySelector('.paddle').classList.remove('showPaddles')
document.querySelector('.paddle#left').classList.remove('showPaddles') document.querySelector('.paddle#left').classList.remove('showPaddles')
document.querySelector('.paddle#right').classList.remove('showPaddles') document.querySelector('.paddle#right').classList.remove('showPaddles')
document.getElementById('morseButtonText').innerHTML = 'SPACEBAR'
} }
} }
return ( return (
<div id="keyType" className="mode-picker"> <div id="keyType" className="mode-picker">
<button id="straight" class="selected" onClick={handleClick}> <div id="title">
Straight Key Keyer Type&nbsp;<i class="ri-question-line"></i>
</button> </div>
<button id="electronic" onClick={handleClick}> <div id="buttons">
Electronic Key <button id="straight" class="selected" onClick={handleClick}>
</button> Straight Keyer
</button>
<button id="electronic" onClick={handleClick}>
Electronic Keyer
</button>
</div>
</div> </div>
) )
}) })

30
src/components/ModePicker.js
View file

@ -10,20 +10,32 @@ function ModePicker() {
function handleClick(e) { function handleClick(e) {
setMorseCharBuffer('') setMorseCharBuffer('')
setGameMode(e.target.id) setGameMode(e.target.id)
let buttons = document.querySelector(".mode-picker#gameMode #buttons").childNodes
buttons.forEach(button => {
if (button.id === e.target.id) {
button.classList.add('selected')
} else { button.classList.remove('selected')}
})
console.log("Switched to " + e.target.id + " mode."); console.log("Switched to " + e.target.id + " mode.");
} }
return ( return (
<div id="gameMode" className="mode-picker"> <div id="gameMode" className="mode-picker">
<button id="practice" class="selected" onClick={handleClick}> <div id="title">
Practice Mode
</button> </div>
<button id="training" onClick={handleClick}> <div id='buttons'>
Training Mode <button id="practice" class="selected" onClick={handleClick}>
</button> Practice
<button id="challenge" onClick={handleClick}> </button>
Challenge Mode <button id="training" onClick={handleClick}>
</button> Training
</button>
<button id="challenge" onClick={handleClick}>
Challenge
</button>
</div>
</div> </div>
) )
} }

13
src/components/MorseButtons.js
View file

@ -2,9 +2,14 @@ import React from "react"
export default React.memo(function MorseButtons() { export default React.memo(function MorseButtons() {
return ( return (
<div id="morseButton"> <>
<button className="paddle" id="left">DIT</button> <div id="morseButton">
<button className="paddle" id="right">DAH</button> <button className="paddle" id="left"></button>
</div> <button className="paddle" id="right"></button>
</div>
<div id="morseButtonText">
SPACEBAR
</div>
</>
) )
}) })

64
src/components/WordListPicker.js
View file

@ -4,7 +4,7 @@ import { WordFeederContext } from "../contexts/wordFeederContext";
export default React.memo(function WordListPicker() { export default React.memo(function WordListPicker() {
const {setWordListCategory} = useContext(WordListPickerContext) const {wordListCategory, setWordListCategory} = useContext(WordListPickerContext)
const {resetFeeder, setOrder} = useContext(WordFeederContext) const {resetFeeder, setOrder} = useContext(WordFeederContext)
const orderOpts = ['sequential', 'random'] const orderOpts = ['sequential', 'random']
@ -13,7 +13,7 @@ export default React.memo(function WordListPicker() {
resetFeeder() resetFeeder()
if (orderOpts.includes(e.target.id)) { 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 => { buttons.forEach(button => {
if (button.id === e.target.id) { if (button.id === e.target.id) {
button.classList.add('selected') button.classList.add('selected')
@ -22,40 +22,48 @@ export default React.memo(function WordListPicker() {
setOrder(e.target.id) setOrder(e.target.id)
} else { } else {
let buttons = document.querySelector(".mode-picker#wordListPicker").childNodes setWordListCategory(e.target.value)
buttons.forEach(button => { console.log("Switched to " + e.target.value + " word list.");
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 ( return (
<> <>
<div id="wordListPicker" className="mode-picker"> <div id="wordListPicker" className="mode-picker">
<button id="alphabet" class="selected" onClick={handleClick}> <div id="title">
Alphabet Word List
</button> </div>
<button id="common100" onClick={handleClick}> <div id="input">
100 Most Common Words <select defaultValue={wordListCategory} onChange={handleClick}>
</button> <option value="alphabet">Alphabet</option>
<button id="test" onClick={handleClick}> <option value="common100">100 Most Common Words</option>
Test List <option value="test">Test List</option>
</button> </select>
</div>
{/* <div id="buttons">
<button id="alphabet" class="selected" onClick={handleClick}>
Alphabet
</button>
<button id="common100" onClick={handleClick}>
100 Most Common Words
</button>
<button id="test" onClick={handleClick}>
Test List
</button>
</div> */}
</div> </div>
<div id="wordOrderPicker" className="mode-picker"> <div id="wordOrderPicker" className="mode-picker">
<button id="sequential" class="selected" onClick={handleClick}> <div id="title">
Sequential Word Order
</button> </div>
<button id="random" onClick={handleClick}> <div id="buttons">
Random <button id="sequential" class="selected" onClick={handleClick}>
</button> Sequential
</button>
<button id="random" onClick={handleClick}>
Random
</button>
</div>
</div> </div>
</> </>
) )

9
src/components/WordsPerMinute.js
View file

@ -12,6 +12,13 @@ export default React.memo(function WordsPerMinute(props) {
return ( return (
// <input id='wpm-input' type='text' value={wpm} onChange={handleChange} /> // <input id='wpm-input' type='text' value={wpm} onChange={handleChange} />
<input type="number" name="wpm" id='wpm-input' min="5" max="30" value={wpm} onChange={handleChange}></input> <div id='wpm' class='mode-picker'>
<div id='title'>
WPM
</div>
<div id='input'>
<input type="number" name="wpm" id='wpm-input' min="5" max="30" value={wpm} onChange={handleChange}></input>
</div>
</div>
) )
}) })

2
src/config.json
View file

@ -8,5 +8,5 @@
"normal": 24, "normal": 24,
"fast": 17 "fast": 17
}, },
"historySize": 10 "historySize": 7
} }

216
src/css/App.css
View file

@ -1,14 +1,21 @@
@import url("https://fonts.googleapis.com/css?family=Courier+Prime:700|Rubik&display=swap");
* { * {
-webkit-box-sizing: border-box; -webkit-box-sizing: border-box;
box-sizing: border-box; box-sizing: border-box;
margin: 0px; margin: 0px;
padding: 0px; padding: 0px;
cursor: default;
}
button {
font-family: #f2f2f2;
cursor: pointer;
} }
html, body { html, body {
height: 100%; height: 100%;
width: 100%; width: 100%;
background: #2c2c2c; background: #f2f2f2;
} }
#root { #root {
@ -54,21 +61,33 @@ header {
align-self: center; align-self: center;
} }
.mode-picker #title {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
margin: 7px;
}
.mode-picker button { .mode-picker button {
background: #2c2c2c; background: #f2f2f2;
color: #CCC; color: #333;
margin: 15px; margin: 7px;
padding: 5px; padding: 5px;
-webkit-box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.2), 0px -1px 1px rgba(255, 255, 255, 0.1); -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 rgba(255, 255, 255, 0.1); box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.2), 0px -1px 1px white;
border: 0px; border: 0px;
border-radius: 5px; border-radius: 5px;
} }
.mode-picker .selected { .mode-picker .selected {
color: goldenrod; -webkit-box-shadow: inset 0px 2px 2px rgba(0, 0, 0, 0.2), inset 0px -1px 1px white;
-webkit-box-shadow: inset 0px 2px 2px rgba(0, 0, 0, 0.2), inset 0px -1px 1px rgba(255, 255, 255, 0.1); box-shadow: inset 0px 2px 2px rgba(0, 0, 0, 0.2), inset 0px -1px 1px white;
box-shadow: inset 0px 2px 2px rgba(0, 0, 0, 0.2), inset 0px -1px 1px rgba(255, 255, 255, 0.1);
} }
#legend { #legend {
@ -85,14 +104,14 @@ header {
-ms-flex-pack: space-evenly; -ms-flex-pack: space-evenly;
justify-content: space-evenly; justify-content: space-evenly;
position: fixed; position: fixed;
top: 50px; top: 250px;
left: 50px; left: 50px;
-ms-flex-wrap: wrap; -ms-flex-wrap: wrap;
flex-wrap: wrap; flex-wrap: wrap;
} }
#legend div { #legend div {
border: 1px solid #999; border: 1px solid #ccc;
border-radius: 3px; border-radius: 3px;
margin: 1px; margin: 1px;
width: 80px; width: 80px;
@ -101,7 +120,6 @@ header {
display: flex; display: flex;
-ms-flex-wrap: nowrap; -ms-flex-wrap: nowrap;
flex-wrap: nowrap; flex-wrap: nowrap;
background: #BBB;
} }
#legend div button { #legend div button {
@ -110,6 +128,8 @@ header {
margin: 4px; margin: 4px;
border: 0px; border: 0px;
border-radius: 2px; border-radius: 2px;
-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;
} }
#legend div span { #legend div span {
@ -123,7 +143,8 @@ header {
#morseButton { #morseButton {
width: 100px; width: 100px;
height: 100px; height: 100px;
margin: 30px; margin-top: 30px;
margin-bottom: 10px;
border-radius: 50px; border-radius: 50px;
-ms-flex-item-align: center; -ms-flex-item-align: center;
align-self: center; align-self: center;
@ -138,6 +159,8 @@ header {
align-items: center; align-items: center;
-webkit-transition: all 500ms ease-in-out; -webkit-transition: all 500ms ease-in-out;
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;
} }
#morseButton.showPaddles { #morseButton.showPaddles {
@ -147,6 +170,23 @@ header {
box-shadow: 0px 0px 0px transparent; box-shadow: 0px 0px 0px transparent;
} }
#morseButtonText {
font-weight: bold;
color: #ccc;
font-size: 0.7rem;
margin-bottom: 40px;
}
#paddleText {
width: 150px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
.paddle { .paddle {
font-size: 1rem; font-size: 1rem;
color: transparent; color: transparent;
@ -183,6 +223,79 @@ header {
font-weight: bold; font-weight: bold;
width: 250px; width: 250px;
height: 100px; 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;
} }
#challengeWord { #challengeWord {
@ -204,8 +317,8 @@ header {
width: -moz-fit-content; width: -moz-fit-content;
width: fit-content; width: fit-content;
display: flex; display: flex;
font-size: 40px; font-size: 3rem;
font-family: 'Courier'; font-family: "Courier Prime", monospace;
font-weight: bold; font-weight: bold;
background: #EEE; background: #EEE;
text-transform: uppercase; text-transform: uppercase;
@ -218,6 +331,7 @@ header {
#challengeWord span { #challengeWord span {
padding: 4px; padding: 4px;
margin: 1px; margin: 1px;
line-height: 2.5rem;
-webkit-transition: background 300ms ease-in-out; -webkit-transition: background 300ms ease-in-out;
transition: background 300ms ease-in-out; transition: background 300ms ease-in-out;
} }
@ -244,10 +358,11 @@ header {
width: 50vw; width: 50vw;
height: 150px; height: 150px;
margin-bottom: 20px; margin-bottom: 20px;
font-family: "Courier Prime", monospace;
} }
#morseBufferDisplay #alphanumeric-container { #morseBufferDisplay #alphanumeric-container {
background: #ccc; background: #fdfdfd;
display: -webkit-box; display: -webkit-box;
display: -ms-flexbox; display: -ms-flexbox;
display: flex; display: flex;
@ -263,14 +378,10 @@ header {
-ms-flex-align: center; -ms-flex-align: center;
align-items: center; align-items: center;
border-radius: 4px; border-radius: 4px;
-webkit-box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.2);
box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.2);
} }
#morseBufferDisplay #alphanumeric-container #alphanumeric { #morseBufferDisplay #alphanumeric-container #alphanumeric {
font-size: 40px; font-size: 40px;
font-family: 'Courier';
font-weight: bold;
background-color: transparent; background-color: transparent;
} }
@ -299,7 +410,7 @@ header {
-ms-flex-pack: center; -ms-flex-pack: center;
justify-content: center; justify-content: center;
font-size: 25px; font-size: 25px;
font-family: 'Courier'; font-family: "Courier", monospace;
font-weight: bold; font-weight: bold;
} }
@ -310,7 +421,7 @@ header {
} }
#morseBufferDisplay #ditDahs .ditDah { #morseBufferDisplay #ditDahs .ditDah {
background: #DDD; background: #fdfdfd;
height: 40px; height: 40px;
width: 30px !important; width: 30px !important;
margin-left: 3px; margin-left: 3px;
@ -330,16 +441,6 @@ header {
transition: all 100ms ease-in-out; transition: all 100ms ease-in-out;
} }
.example-appear {
opacity: 0.01;
}
.example-appear.example-appear-active {
opacity: 1;
-webkit-transition: opacity .5s ease-in;
transition: opacity .5s ease-in;
}
#challengeBufferDisplay { #challengeBufferDisplay {
display: -webkit-box; display: -webkit-box;
display: -ms-flexbox; display: -ms-flexbox;
@ -358,6 +459,8 @@ header {
width: 100%; width: 100%;
height: 150px; height: 150px;
margin-bottom: 20px; margin-bottom: 20px;
font-family: "Courier Prime", monospace;
font-weight: bold;
} }
#challengeBufferDisplay #alphanumeric-container { #challengeBufferDisplay #alphanumeric-container {
@ -373,8 +476,6 @@ header {
#challengeBufferDisplay #alphanumeric-container #alphanumeric { #challengeBufferDisplay #alphanumeric-container #alphanumeric {
font-size: 40px; font-size: 40px;
font-family: 'Courier';
font-weight: bold;
background-color: transparent; background-color: transparent;
margin-bottom: 10px; margin-bottom: 10px;
} }
@ -404,7 +505,7 @@ header {
-ms-flex-pack: center; -ms-flex-pack: center;
justify-content: center; justify-content: center;
font-size: 25px; font-size: 25px;
font-family: 'Courier'; font-family: "Courier", monospace;
font-weight: bold; font-weight: bold;
} }
@ -419,8 +520,8 @@ header {
width: 30px !important; width: 30px !important;
margin-left: 3px; margin-left: 3px;
border-radius: 5px; border-radius: 5px;
-webkit-box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.2); -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); box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.2), 0px -1px 1px white;
display: -webkit-box; display: -webkit-box;
display: -ms-flexbox; display: -ms-flexbox;
display: flex; display: flex;
@ -467,38 +568,26 @@ header {
} }
#morseHistory .morseCard:nth-child(2) { #morseHistory .morseCard:nth-child(2) {
opacity: 90%; opacity: 85%;
} }
#morseHistory .morseCard:nth-child(3) { #morseHistory .morseCard:nth-child(3) {
opacity: 80%;
}
#morseHistory .morseCard:nth-child(4) {
opacity: 70%; opacity: 70%;
} }
#morseHistory .morseCard:nth-child(4) {
opacity: 55%;
}
#morseHistory .morseCard:nth-child(5) { #morseHistory .morseCard:nth-child(5) {
opacity: 60%;
}
#morseHistory .morseCard:nth-child(6) {
opacity: 50%;
}
#morseHistory .morseCard:nth-child(7) {
opacity: 40%; opacity: 40%;
} }
#morseHistory .morseCard:nth-child(8) { #morseHistory .morseCard:nth-child(6) {
opacity: 30%;
}
#morseHistory .morseCard:nth-child(9) {
opacity: 20%; opacity: 20%;
} }
#morseHistory .morseCard:nth-child(10) { #morseHistory .morseCard:nth-child(7) {
opacity: 10%; opacity: 10%;
} }
@ -516,20 +605,23 @@ header {
/* border: 1px solid orange; */ /* border: 1px solid orange; */
margin-bottom: 2px; margin-bottom: 2px;
font-size: 1.5rem; font-size: 1.5rem;
font-family: 'Courier'; font-family: "Courier Prime", monospace;
/* width: 100%; */ /* width: 100%; */
} }
.morseCard div div { .morseCard div div {
cursor: default; cursor: default;
padding: 5px; padding: 5px;
margin: 3px; margin: 2px;
background: #EEE; background: #fdfdfd;
white-space: nowrap; white-space: nowrap;
border-radius: 5px; border-radius: 3px;
-webkit-box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.2); -webkit-box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.2);
box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.2); box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.2);
line-height: 1rem; line-height: 1.2rem;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
} }
.morseCard .ditDahs-container, .morseCard .alphanumeric-container { .morseCard .ditDahs-container, .morseCard .alphanumeric-container {
@ -557,5 +649,7 @@ header {
-ms-flex-align: center; -ms-flex-align: center;
align-items: center; align-items: center;
overflow-wrap: break-word; overflow-wrap: break-word;
font-family: "Courier", monospace;
font-weight: bold;
} }
/*# sourceMappingURL=App.css.map */ /*# sourceMappingURL=App.css.map */

2
src/css/App.css.map
View file

File diff suppressed because one or more lines are too long

2
src/hooks/useElectronicKey.js
View file

@ -350,7 +350,7 @@ function useElectronicKey() {
// clearHistory() // clearHistory()
} }
// eslint-disable-next-line // eslint-disable-next-line
}, [wpm]) }, [wpm, gameMode])
useEffect(() => { useEffect(() => {
// PRACTICE MODE // PRACTICE MODE

203
src/scss/App.scss
View file

@ -1,20 +1,38 @@
$main-bg-color: #2c2c2c; // $main-bg-color-dark: #2c2c2c;
$main-box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.2); @import url('https://fonts.googleapis.com/css?family=Courier+Prime:700|Rubik&display=swap');
$main-font: 'Rubik', sans-serif;
$buffer-font: 'Courier Prime', monospace;
$ditDah-font: 'Courier', monospace;
$main-bg-color-light: #f2f2f2;
$main-font-color-light: #333;
$morseCard-shadow-light: 0px 3px 3px rgba(0, 0, 0, 0.2);
$main-box-shadow-light: 0px 3px 3px rgba(0, 0, 0, 0.2), 0px -1px 1px rgba(255, 255, 255, 1);
$main-box-shadow-light-selected: inset 0px 2px 2px rgba(0, 0, 0, 0.2), 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: 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); $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);
$main-border-radius: 5px; $main-border-radius: 5px;
$border-radius-neumorphic: 0px -6px 10px rgba(255, 255, 255, 1), 0px 4px 15px rgba(0, 0, 0, 0.15); $border-radius-neumorphic: 0px -6px 10px rgba(255, 255, 255, 1), 0px 4px 15px rgba(0, 0, 0, 0.15);
$border-radius-neumorphic-dark: 0px -10px 20px rgba(255, 255, 255, 0.1), 0px 10px 10px rgba(0, 0, 0, 0.4); $border-radius-neumorphic-dark: 0px -10px 20px rgba(255, 255, 255, 0.1), 0px 10px 10px rgba(0, 0, 0, 0.4);
$border-radius-neumorphic-active: 0 15px 20px rgba(0, 0, 0, 0.015), inset 0px -2px 5px rgb(255, 255, 255), inset 0px 2px 5px rgba(0, 0, 0, 0.15); $border-radius-neumorphic-active: 0 15px 20px rgba(0, 0, 0, 0.015), inset 0px -2px 5px rgb(255, 255, 255), inset 0px 2px 5px rgba(0, 0, 0, 0.15);
* { * {
box-sizing: border-box; box-sizing: border-box;
margin: 0px; margin: 0px;
padding: 0px padding: 0px;
cursor: default;
}
button {
font-family: $main-bg-color-light;
cursor: pointer;
} }
html, body { html, body {
height: 100%; height: 100%;
width: 100%; width: 100%;
background: $main-bg-color; background: $main-bg-color-light;
// background: #444; // background: #444;
} }
#root { #root {
@ -43,19 +61,26 @@ footer {
.mode-picker { .mode-picker {
display: flex; display: flex;
align-self: center; align-self: center;
#title {
display: flex;
justify-content: center;
align-items: center;
margin: 7px;
}
button { button {
// background: #fcfcfc; // background: #fcfcfc;
background: $main-bg-color; background: $main-bg-color-light;
color: #CCC; color: $main-font-color-light;
margin: 15px; margin: 7px;
padding: 5px; padding: 5px;
box-shadow: $main-box-shadow-dark; box-shadow: $main-box-shadow-light;
border: 0px; border: 0px;
border-radius: $main-border-radius; border-radius: $main-border-radius;
} }
.selected { .selected {
color: goldenrod; // color: goldenrod;
box-shadow: $main-box-shadow-dark-selected; box-shadow: $main-box-shadow-light-selected;
} }
} }
@ -66,18 +91,18 @@ footer {
flex-direction: column; flex-direction: column;
justify-content: space-evenly; justify-content: space-evenly;
position: fixed; position: fixed;
top: 50px; top: 250px;
left: 50px; left: 50px;
flex-wrap: wrap; flex-wrap: wrap;
div { div {
border: 1px solid #999; border: 1px solid #ccc;
border-radius: 3px; border-radius: 3px;
margin: 1px; margin: 1px;
width: 80px; width: 80px;
display: flex; display: flex;
flex-wrap: nowrap; flex-wrap: nowrap;
background: #BBB; // background: #BBB;
button { button {
width: 20px; width: 20px;
@ -85,6 +110,7 @@ footer {
margin: 4px; margin: 4px;
border: 0px; border: 0px;
border-radius: 2px; border-radius: 2px;
box-shadow: $main-box-shadow-light;
} }
span { span {
width: 60%; width: 60%;
@ -98,7 +124,8 @@ footer {
#morseButton { #morseButton {
width: 100px; width: 100px;
height: 100px; height: 100px;
margin: 30px; margin-top: 30px;
margin-bottom: 10px;
// background: goldenrod; // background: goldenrod;
border-radius: 50px; border-radius: 50px;
align-self: center; align-self: center;
@ -106,12 +133,24 @@ footer {
justify-content: center; justify-content: center;
align-items: center; align-items: center;
transition: all 500ms ease-in-out; transition: all 500ms ease-in-out;
box-shadow: $main-box-shadow-light;
} }
#morseButton.showPaddles { #morseButton.showPaddles {
width: 239px; width: 239px;
background: transparent; background: transparent;
box-shadow: 0px 0px 0px transparent; box-shadow: 0px 0px 0px transparent;
} }
#morseButtonText {
font-weight: bold;
color: #ccc;
font-size: 0.7rem;
margin-bottom: 40px;
}
#paddleText {
width: 150px;
display: flex;
justify-content: space-between;
}
.paddle { .paddle {
font-size: 1rem; font-size: 1rem;
@ -122,7 +161,7 @@ footer {
margin: 0px; margin: 0px;
border: 0px; border: 0px;
transition: all 500ms ease-in-out; transition: all 500ms ease-in-out;
&#left { &#left {
border-radius: 50px 0 0 50px; border-radius: 50px 0 0 50px;
@ -145,6 +184,56 @@ footer {
font-weight: bold; font-weight: bold;
width: 250px; width: 250px;
height: 100px; height: 100px;
box-shadow: $main-box-shadow-light;
}
}
i[class*="ri-"] {
font-weight: normal;
font-size: 0.9rem;
color: #777;
&:hover {
color: goldenrod;
}
}
#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;
} }
} }
@ -160,8 +249,9 @@ footer {
border-radius: 5px; border-radius: 5px;
width: fit-content; width: fit-content;
display: flex; display: flex;
font-size: 40px; font-size: 3rem;
font-family: 'Courier'; // font-family: 'Courier';
font-family: $buffer-font;
font-weight: bold; font-weight: bold;
background: #EEE; background: #EEE;
text-transform: uppercase; text-transform: uppercase;
@ -171,6 +261,7 @@ footer {
span { span {
padding: 4px; padding: 4px;
margin: 1px; margin: 1px;
line-height: 2.5rem;
transition: background 300ms ease-in-out; //, opacity 100ms ease-in-out; transition: background 300ms ease-in-out; //, opacity 100ms ease-in-out;
} }
&.correct { &.correct {
@ -189,10 +280,11 @@ footer {
width: 50vw; width: 50vw;
height: 150px; height: 150px;
margin-bottom: 20px; margin-bottom: 20px;
font-family: $buffer-font;
#alphanumeric-container { #alphanumeric-container {
// border-left: 2px solid #000; // border-left: 2px solid #000;
background: #ccc; background: #fdfdfd;
display: flex; display: flex;
padding-left: 5px; padding-left: 5px;
height: 50px; height: 50px;
@ -202,12 +294,10 @@ footer {
justify-content: center; justify-content: center;
align-items: center; align-items: center;
border-radius: 4px; border-radius: 4px;
box-shadow: $main-box-shadow; // box-shadow: $main-box-shadow-light;
#alphanumeric { #alphanumeric {
font-size: 40px; font-size: 40px;
font-family: 'Courier';
font-weight: bold;
background-color: transparent; background-color: transparent;
@ -233,7 +323,7 @@ footer {
flex-direction: row; flex-direction: row;
justify-content: center; justify-content: center;
font-size: 25px; font-size: 25px;
font-family: 'Courier'; font-family: $ditDah-font;
font-weight: bold; font-weight: bold;
span { span {
@ -242,7 +332,7 @@ footer {
} }
.ditDah { .ditDah {
background: #DDD; background: #fdfdfd;
height: 40px; height: 40px;
width: 30px !important; width: 30px !important;
margin-left: 3px; margin-left: 3px;
@ -259,15 +349,6 @@ footer {
} }
} }
.example-appear {
opacity: 0.01;
}
.example-appear.example-appear-active {
opacity: 1;
transition: opacity .5s ease-in;
}
#challengeBufferDisplay { #challengeBufferDisplay {
display: flex; display: flex;
justify-content: center; justify-content: center;
@ -277,6 +358,8 @@ footer {
width: 100%; width: 100%;
height: 150px; height: 150px;
margin-bottom: 20px; margin-bottom: 20px;
font-family: $buffer-font;
font-weight: bold;
#alphanumeric-container { #alphanumeric-container {
// border-left: 2px solid #000; // border-left: 2px solid #000;
@ -287,8 +370,6 @@ footer {
#alphanumeric { #alphanumeric {
font-size: 40px; font-size: 40px;
font-family: 'Courier';
font-weight: bold;
background-color: transparent; background-color: transparent;
margin-bottom: 10px; margin-bottom: 10px;
@ -313,7 +394,7 @@ footer {
flex-direction: row; flex-direction: row;
justify-content: center; justify-content: center;
font-size: 25px; font-size: 25px;
font-family: 'Courier'; font-family: $ditDah-font;
font-weight: bold; font-weight: bold;
span { span {
@ -328,7 +409,7 @@ footer {
margin-left: 3px; margin-left: 3px;
// box-shadow: 0px 1px 0px #000; // box-shadow: 0px 1px 0px #000;
border-radius: $main-border-radius; border-radius: $main-border-radius;
box-shadow: $main-box-shadow; box-shadow: $main-box-shadow-light;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
@ -372,32 +453,32 @@ footer {
opacity: 100%; opacity: 100%;
} }
.morseCard:nth-child(2){ .morseCard:nth-child(2){
opacity: 90%; opacity: 85%;
} }
.morseCard:nth-child(3){ .morseCard:nth-child(3){
opacity: 80%;
}
.morseCard:nth-child(4){
opacity: 70%; opacity: 70%;
} }
.morseCard:nth-child(4){
opacity: 55%;
}
.morseCard:nth-child(5){ .morseCard:nth-child(5){
opacity: 60%;
}
.morseCard:nth-child(6){
opacity: 50%;
}
.morseCard:nth-child(7){
opacity: 40%; opacity: 40%;
} }
.morseCard:nth-child(8){ .morseCard:nth-child(6){
opacity: 30%;
}
.morseCard:nth-child(9){
opacity: 20%; opacity: 20%;
} }
.morseCard:nth-child(10){ .morseCard:nth-child(7){
opacity: 10%; opacity: 10%;
} }
// .morseCard:nth-child(8){
// opacity: 30%;
// }
// .morseCard:nth-child(9){
// opacity: 20%;
// }
// .morseCard:nth-child(10){
// opacity: 10%;
// }
} }
.morseCard { .morseCard {
@ -407,21 +488,21 @@ footer {
/* border: 1px solid orange; */ /* border: 1px solid orange; */
margin-bottom: 2px; margin-bottom: 2px;
font-size: 1.5rem; font-size: 1.5rem;
font-family: 'Courier'; font-family: $buffer-font;
/* width: 100%; */ /* width: 100%; */
div div { div div {
// border: 1px solid purple;
cursor: default; cursor: default;
padding: 5px; padding: 5px;
margin: 3px; margin: 2px;
background: #EEE; background: #fdfdfd;
// width: 50%; // width: 50%;
white-space: nowrap; white-space: nowrap;
border-radius: $main-border-radius; border-radius: 3px;
box-shadow: $main-box-shadow; box-shadow: $morseCard-shadow-light;
line-height: 1rem; line-height: 1.2rem;
display: flex;
} }
.ditDahs-container, .alphanumeric-container { .ditDahs-container, .alphanumeric-container {
display: flex; display: flex;
@ -437,5 +518,7 @@ footer {
justify-content: flex-end; justify-content: flex-end;
align-items: center; align-items: center;
overflow-wrap: break-word; overflow-wrap: break-word;
font-family: $ditDah-font;
font-weight: bold;
} }
} }