mirror of
https://github.com/genemecija/learn-morse-code.git
synced 2025-12-06 07:02:00 +01:00
Styling, layout
This commit is contained in:
Gene Mecija
parent
4aecd0c7ff
commit
5759522aff
|
|
@ -15,6 +15,7 @@
|
|||
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 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.
|
||||
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.
|
||||
Learn how to configure a non-root public URL by running `npm run build`.
|
||||
-->
|
||||
<title>React App</title>
|
||||
<title>Learn Morse Code</title>
|
||||
</head>
|
||||
<body>
|
||||
<noscript>You need to enable JavaScript to run this app.</noscript>
|
||||
|
|
|
|||
29
src/App.js
29
src/App.js
|
|
@ -21,7 +21,6 @@ import Legend from './components/Legend';
|
|||
import WordsPerMinute from "./components/WordsPerMinute"
|
||||
import MorseButtons from './components/MorseButtons'
|
||||
import Footer from './components/Footer';
|
||||
import { WPMContext } from './contexts/wpmContext';
|
||||
import StraightKey from './components/StraightKey';
|
||||
import ElectronicKey from './components/ElectronicKey';
|
||||
|
||||
|
|
@ -31,19 +30,24 @@ export default React.memo(function App() {
|
|||
|
||||
const {keyType} = useContext(KeyTypeContext)
|
||||
const {gameMode} = useContext(GameModeContext)
|
||||
const wpm = useContext(WPMContext)
|
||||
|
||||
|
||||
return (
|
||||
<>
|
||||
<Header />
|
||||
<div id='main-content'>
|
||||
<Legend />
|
||||
<WordsPerMinute />
|
||||
|
||||
<MorseBufferContextProvider>
|
||||
|
||||
<ModePicker />
|
||||
<KeyTypePicker />
|
||||
<WordListPickerContextProvider>
|
||||
<WordFeederContextProvider>
|
||||
<div id="mainOptions">
|
||||
<ModePicker />
|
||||
<WordsPerMinute />
|
||||
<KeyTypePicker />
|
||||
{gameMode === 'challenge' &&
|
||||
<WordListPicker />
|
||||
}
|
||||
</div>
|
||||
|
||||
{keyType === "straight" ?
|
||||
<StraightKey /> : <ElectronicKey />
|
||||
|
|
@ -64,17 +68,12 @@ export default React.memo(function App() {
|
|||
} */}
|
||||
|
||||
{gameMode === 'challenge' &&
|
||||
<>
|
||||
<WordListPickerContextProvider>
|
||||
<WordFeederContextProvider>
|
||||
<WordListPicker />
|
||||
<ChallengeMode />
|
||||
</WordFeederContextProvider>
|
||||
</WordListPickerContextProvider>
|
||||
</>
|
||||
<ChallengeMode />
|
||||
}
|
||||
|
||||
<MorseButtons />
|
||||
</WordFeederContextProvider>
|
||||
</WordListPickerContextProvider>
|
||||
</MorseBufferContextProvider>
|
||||
</div>
|
||||
<Footer />
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
import React, {useContext} from "react"
|
||||
import {KeyTypeContext} from "../contexts/keyTypeContext"
|
||||
|
||||
|
||||
export default React.memo(function KeyTypePicker() {
|
||||
|
||||
const {setKeyType} = useContext(KeyTypeContext)
|
||||
|
|
@ -9,7 +10,7 @@ export default React.memo(function KeyTypePicker() {
|
|||
setKeyType(e.target.id)
|
||||
console.log("KEYTYPE PICKED:", e.target.id);
|
||||
|
||||
let buttons = document.querySelector(".mode-picker#keyType").childNodes
|
||||
let buttons = document.querySelector(".mode-picker#keyType #buttons").childNodes
|
||||
buttons.forEach(button => {
|
||||
if (button.id === e.target.id) {
|
||||
button.classList.add('selected')
|
||||
|
|
@ -21,23 +22,30 @@ export default React.memo(function KeyTypePicker() {
|
|||
document.querySelector('.paddle').classList.add('showPaddles')
|
||||
document.querySelector('.paddle#left').classList.add('showPaddles')
|
||||
document.querySelector('.paddle#right').classList.add('showPaddles')
|
||||
document.getElementById('morseButtonText').innerHTML = '<div id="paddleText"><div id="comma">COMMA (,)</div><div id="period">PERIOD (.)</div></div>'
|
||||
} else {
|
||||
document.querySelector('#morseButton').classList.remove('showPaddles')
|
||||
document.querySelector('.paddle').classList.remove('showPaddles')
|
||||
document.querySelector('.paddle#left').classList.remove('showPaddles')
|
||||
document.querySelector('.paddle#right').classList.remove('showPaddles')
|
||||
document.getElementById('morseButtonText').innerHTML = 'SPACEBAR'
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
return (
|
||||
<div id="keyType" className="mode-picker">
|
||||
<button id="straight" class="selected" onClick={handleClick}>
|
||||
Straight Key
|
||||
</button>
|
||||
<button id="electronic" onClick={handleClick}>
|
||||
Electronic Key
|
||||
</button>
|
||||
<div id="title">
|
||||
Keyer Type <i class="ri-question-line"></i>
|
||||
</div>
|
||||
<div id="buttons">
|
||||
<button id="straight" class="selected" onClick={handleClick}>
|
||||
Straight Keyer
|
||||
</button>
|
||||
<button id="electronic" onClick={handleClick}>
|
||||
Electronic Keyer
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
})
|
||||
|
|
|
|||
|
|
@ -10,20 +10,32 @@ function ModePicker() {
|
|||
function handleClick(e) {
|
||||
setMorseCharBuffer('')
|
||||
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.");
|
||||
}
|
||||
|
||||
return (
|
||||
<div id="gameMode" className="mode-picker">
|
||||
<button id="practice" class="selected" onClick={handleClick}>
|
||||
Practice
|
||||
</button>
|
||||
<button id="training" onClick={handleClick}>
|
||||
Training Mode
|
||||
</button>
|
||||
<button id="challenge" onClick={handleClick}>
|
||||
Challenge Mode
|
||||
</button>
|
||||
<div id="title">
|
||||
Mode
|
||||
</div>
|
||||
<div id='buttons'>
|
||||
<button id="practice" class="selected" onClick={handleClick}>
|
||||
Practice
|
||||
</button>
|
||||
<button id="training" onClick={handleClick}>
|
||||
Training
|
||||
</button>
|
||||
<button id="challenge" onClick={handleClick}>
|
||||
Challenge
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,9 +2,14 @@ import React from "react"
|
|||
|
||||
export default React.memo(function MorseButtons() {
|
||||
return (
|
||||
<div id="morseButton">
|
||||
<button className="paddle" id="left">DIT</button>
|
||||
<button className="paddle" id="right">DAH</button>
|
||||
</div>
|
||||
<>
|
||||
<div id="morseButton">
|
||||
<button className="paddle" id="left"></button>
|
||||
<button className="paddle" id="right"></button>
|
||||
</div>
|
||||
<div id="morseButtonText">
|
||||
SPACEBAR
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
})
|
||||
|
|
@ -4,7 +4,7 @@ import { WordFeederContext } from "../contexts/wordFeederContext";
|
|||
|
||||
export default React.memo(function WordListPicker() {
|
||||
|
||||
const {setWordListCategory} = useContext(WordListPickerContext)
|
||||
const {wordListCategory, setWordListCategory} = useContext(WordListPickerContext)
|
||||
const {resetFeeder, setOrder} = useContext(WordFeederContext)
|
||||
|
||||
const orderOpts = ['sequential', 'random']
|
||||
|
|
@ -13,7 +13,7 @@ export default React.memo(function WordListPicker() {
|
|||
resetFeeder()
|
||||
|
||||
if (orderOpts.includes(e.target.id)) {
|
||||
let buttons = document.querySelector(".mode-picker#wordOrderPicker").childNodes
|
||||
let buttons = document.querySelector(".mode-picker#wordOrderPicker #buttons").childNodes
|
||||
buttons.forEach(button => {
|
||||
if (button.id === e.target.id) {
|
||||
button.classList.add('selected')
|
||||
|
|
@ -22,40 +22,48 @@ export default React.memo(function WordListPicker() {
|
|||
|
||||
setOrder(e.target.id)
|
||||
} else {
|
||||
let buttons = document.querySelector(".mode-picker#wordListPicker").childNodes
|
||||
buttons.forEach(button => {
|
||||
if (button.id === e.target.id) {
|
||||
button.classList.add('selected')
|
||||
} else { button.classList.remove('selected')}
|
||||
})
|
||||
|
||||
setWordListCategory(e.target.id)
|
||||
console.log("Switched to " + e.target.id + " mode.");
|
||||
setWordListCategory(e.target.value)
|
||||
console.log("Switched to " + e.target.value + " word list.");
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<div id="wordListPicker" className="mode-picker">
|
||||
<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 id="title">
|
||||
Word List
|
||||
</div>
|
||||
<div id="input">
|
||||
<select defaultValue={wordListCategory} onChange={handleClick}>
|
||||
<option value="alphabet">Alphabet</option>
|
||||
<option value="common100">100 Most Common Words</option>
|
||||
<option value="test">Test List</option>
|
||||
</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 id="wordOrderPicker" className="mode-picker">
|
||||
<button id="sequential" class="selected" onClick={handleClick}>
|
||||
Sequential
|
||||
</button>
|
||||
<button id="random" onClick={handleClick}>
|
||||
Random
|
||||
</button>
|
||||
<div id="title">
|
||||
Word Order
|
||||
</div>
|
||||
<div id="buttons">
|
||||
<button id="sequential" class="selected" onClick={handleClick}>
|
||||
Sequential
|
||||
</button>
|
||||
<button id="random" onClick={handleClick}>
|
||||
Random
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
|
|
|
|||
|
|
@ -12,6 +12,13 @@ export default React.memo(function WordsPerMinute(props) {
|
|||
|
||||
return (
|
||||
// <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>
|
||||
)
|
||||
})
|
||||
|
|
@ -8,5 +8,5 @@
|
|||
"normal": 24,
|
||||
"fast": 17
|
||||
},
|
||||
"historySize": 10
|
||||
"historySize": 7
|
||||
}
|
||||
216
src/css/App.css
216
src/css/App.css
|
|
@ -1,14 +1,21 @@
|
|||
@import url("https://fonts.googleapis.com/css?family=Courier+Prime:700|Rubik&display=swap");
|
||||
* {
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
button {
|
||||
font-family: #f2f2f2;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
html, body {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
background: #2c2c2c;
|
||||
background: #f2f2f2;
|
||||
}
|
||||
|
||||
#root {
|
||||
|
|
@ -54,21 +61,33 @@ header {
|
|||
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 {
|
||||
background: #2c2c2c;
|
||||
color: #CCC;
|
||||
margin: 15px;
|
||||
background: #f2f2f2;
|
||||
color: #333;
|
||||
margin: 7px;
|
||||
padding: 5px;
|
||||
-webkit-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 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 white;
|
||||
border: 0px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.mode-picker .selected {
|
||||
color: goldenrod;
|
||||
-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 rgba(255, 255, 255, 0.1);
|
||||
-webkit-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 white;
|
||||
}
|
||||
|
||||
#legend {
|
||||
|
|
@ -85,14 +104,14 @@ header {
|
|||
-ms-flex-pack: space-evenly;
|
||||
justify-content: space-evenly;
|
||||
position: fixed;
|
||||
top: 50px;
|
||||
top: 250px;
|
||||
left: 50px;
|
||||
-ms-flex-wrap: wrap;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
#legend div {
|
||||
border: 1px solid #999;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 3px;
|
||||
margin: 1px;
|
||||
width: 80px;
|
||||
|
|
@ -101,7 +120,6 @@ header {
|
|||
display: flex;
|
||||
-ms-flex-wrap: nowrap;
|
||||
flex-wrap: nowrap;
|
||||
background: #BBB;
|
||||
}
|
||||
|
||||
#legend div button {
|
||||
|
|
@ -110,6 +128,8 @@ header {
|
|||
margin: 4px;
|
||||
border: 0px;
|
||||
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 {
|
||||
|
|
@ -123,7 +143,8 @@ header {
|
|||
#morseButton {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
margin: 30px;
|
||||
margin-top: 30px;
|
||||
margin-bottom: 10px;
|
||||
border-radius: 50px;
|
||||
-ms-flex-item-align: center;
|
||||
align-self: center;
|
||||
|
|
@ -138,6 +159,8 @@ header {
|
|||
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;
|
||||
}
|
||||
|
||||
#morseButton.showPaddles {
|
||||
|
|
@ -147,6 +170,23 @@ header {
|
|||
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 {
|
||||
font-size: 1rem;
|
||||
color: transparent;
|
||||
|
|
@ -183,6 +223,79 @@ header {
|
|||
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;
|
||||
}
|
||||
|
||||
#challengeWord {
|
||||
|
|
@ -204,8 +317,8 @@ header {
|
|||
width: -moz-fit-content;
|
||||
width: fit-content;
|
||||
display: flex;
|
||||
font-size: 40px;
|
||||
font-family: 'Courier';
|
||||
font-size: 3rem;
|
||||
font-family: "Courier Prime", monospace;
|
||||
font-weight: bold;
|
||||
background: #EEE;
|
||||
text-transform: uppercase;
|
||||
|
|
@ -218,6 +331,7 @@ header {
|
|||
#challengeWord span {
|
||||
padding: 4px;
|
||||
margin: 1px;
|
||||
line-height: 2.5rem;
|
||||
-webkit-transition: background 300ms ease-in-out;
|
||||
transition: background 300ms ease-in-out;
|
||||
}
|
||||
|
|
@ -244,10 +358,11 @@ header {
|
|||
width: 50vw;
|
||||
height: 150px;
|
||||
margin-bottom: 20px;
|
||||
font-family: "Courier Prime", monospace;
|
||||
}
|
||||
|
||||
#morseBufferDisplay #alphanumeric-container {
|
||||
background: #ccc;
|
||||
background: #fdfdfd;
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
|
|
@ -263,14 +378,10 @@ header {
|
|||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
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 {
|
||||
font-size: 40px;
|
||||
font-family: 'Courier';
|
||||
font-weight: bold;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
|
|
@ -299,7 +410,7 @@ header {
|
|||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
font-size: 25px;
|
||||
font-family: 'Courier';
|
||||
font-family: "Courier", monospace;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
|
|
@ -310,7 +421,7 @@ header {
|
|||
}
|
||||
|
||||
#morseBufferDisplay #ditDahs .ditDah {
|
||||
background: #DDD;
|
||||
background: #fdfdfd;
|
||||
height: 40px;
|
||||
width: 30px !important;
|
||||
margin-left: 3px;
|
||||
|
|
@ -330,16 +441,6 @@ header {
|
|||
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 {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
|
|
@ -358,6 +459,8 @@ header {
|
|||
width: 100%;
|
||||
height: 150px;
|
||||
margin-bottom: 20px;
|
||||
font-family: "Courier Prime", monospace;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
#challengeBufferDisplay #alphanumeric-container {
|
||||
|
|
@ -373,8 +476,6 @@ header {
|
|||
|
||||
#challengeBufferDisplay #alphanumeric-container #alphanumeric {
|
||||
font-size: 40px;
|
||||
font-family: 'Courier';
|
||||
font-weight: bold;
|
||||
background-color: transparent;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
|
@ -404,7 +505,7 @@ header {
|
|||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
font-size: 25px;
|
||||
font-family: 'Courier';
|
||||
font-family: "Courier", monospace;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
|
|
@ -419,8 +520,8 @@ header {
|
|||
width: 30px !important;
|
||||
margin-left: 3px;
|
||||
border-radius: 5px;
|
||||
-webkit-box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.2);
|
||||
box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.2);
|
||||
-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;
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
|
|
@ -467,38 +568,26 @@ header {
|
|||
}
|
||||
|
||||
#morseHistory .morseCard:nth-child(2) {
|
||||
opacity: 90%;
|
||||
opacity: 85%;
|
||||
}
|
||||
|
||||
#morseHistory .morseCard:nth-child(3) {
|
||||
opacity: 80%;
|
||||
}
|
||||
|
||||
#morseHistory .morseCard:nth-child(4) {
|
||||
opacity: 70%;
|
||||
}
|
||||
|
||||
#morseHistory .morseCard:nth-child(4) {
|
||||
opacity: 55%;
|
||||
}
|
||||
|
||||
#morseHistory .morseCard:nth-child(5) {
|
||||
opacity: 60%;
|
||||
}
|
||||
|
||||
#morseHistory .morseCard:nth-child(6) {
|
||||
opacity: 50%;
|
||||
}
|
||||
|
||||
#morseHistory .morseCard:nth-child(7) {
|
||||
opacity: 40%;
|
||||
}
|
||||
|
||||
#morseHistory .morseCard:nth-child(8) {
|
||||
opacity: 30%;
|
||||
}
|
||||
|
||||
#morseHistory .morseCard:nth-child(9) {
|
||||
#morseHistory .morseCard:nth-child(6) {
|
||||
opacity: 20%;
|
||||
}
|
||||
|
||||
#morseHistory .morseCard:nth-child(10) {
|
||||
#morseHistory .morseCard:nth-child(7) {
|
||||
opacity: 10%;
|
||||
}
|
||||
|
||||
|
|
@ -516,20 +605,23 @@ header {
|
|||
/* border: 1px solid orange; */
|
||||
margin-bottom: 2px;
|
||||
font-size: 1.5rem;
|
||||
font-family: 'Courier';
|
||||
font-family: "Courier Prime", monospace;
|
||||
/* width: 100%; */
|
||||
}
|
||||
|
||||
.morseCard div div {
|
||||
cursor: default;
|
||||
padding: 5px;
|
||||
margin: 3px;
|
||||
background: #EEE;
|
||||
margin: 2px;
|
||||
background: #fdfdfd;
|
||||
white-space: nowrap;
|
||||
border-radius: 5px;
|
||||
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: 1rem;
|
||||
line-height: 1.2rem;
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.morseCard .ditDahs-container, .morseCard .alphanumeric-container {
|
||||
|
|
@ -557,5 +649,7 @@ header {
|
|||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
overflow-wrap: break-word;
|
||||
font-family: "Courier", monospace;
|
||||
font-weight: bold;
|
||||
}
|
||||
/*# sourceMappingURL=App.css.map */
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -350,7 +350,7 @@ function useElectronicKey() {
|
|||
// clearHistory()
|
||||
}
|
||||
// eslint-disable-next-line
|
||||
}, [wpm])
|
||||
}, [wpm, gameMode])
|
||||
|
||||
useEffect(() => {
|
||||
// PRACTICE MODE
|
||||
|
|
|
|||
|
|
@ -1,20 +1,38 @@
|
|||
$main-bg-color: #2c2c2c;
|
||||
$main-box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.2);
|
||||
// $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;
|
||||
$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-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;
|
||||
|
||||
$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-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;
|
||||
margin: 0px;
|
||||
padding: 0px
|
||||
padding: 0px;
|
||||
cursor: default;
|
||||
}
|
||||
button {
|
||||
font-family: $main-bg-color-light;
|
||||
cursor: pointer;
|
||||
}
|
||||
html, body {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
background: $main-bg-color;
|
||||
background: $main-bg-color-light;
|
||||
// background: #444;
|
||||
}
|
||||
#root {
|
||||
|
|
@ -43,19 +61,26 @@ footer {
|
|||
.mode-picker {
|
||||
display: flex;
|
||||
align-self: center;
|
||||
#title {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin: 7px;
|
||||
}
|
||||
|
||||
button {
|
||||
// background: #fcfcfc;
|
||||
background: $main-bg-color;
|
||||
color: #CCC;
|
||||
margin: 15px;
|
||||
background: $main-bg-color-light;
|
||||
color: $main-font-color-light;
|
||||
margin: 7px;
|
||||
padding: 5px;
|
||||
box-shadow: $main-box-shadow-dark;
|
||||
box-shadow: $main-box-shadow-light;
|
||||
border: 0px;
|
||||
border-radius: $main-border-radius;
|
||||
}
|
||||
.selected {
|
||||
color: goldenrod;
|
||||
box-shadow: $main-box-shadow-dark-selected;
|
||||
// color: goldenrod;
|
||||
box-shadow: $main-box-shadow-light-selected;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -66,18 +91,18 @@ footer {
|
|||
flex-direction: column;
|
||||
justify-content: space-evenly;
|
||||
position: fixed;
|
||||
top: 50px;
|
||||
top: 250px;
|
||||
left: 50px;
|
||||
flex-wrap: wrap;
|
||||
|
||||
div {
|
||||
border: 1px solid #999;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 3px;
|
||||
margin: 1px;
|
||||
width: 80px;
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
background: #BBB;
|
||||
// background: #BBB;
|
||||
|
||||
button {
|
||||
width: 20px;
|
||||
|
|
@ -85,6 +110,7 @@ footer {
|
|||
margin: 4px;
|
||||
border: 0px;
|
||||
border-radius: 2px;
|
||||
box-shadow: $main-box-shadow-light;
|
||||
}
|
||||
span {
|
||||
width: 60%;
|
||||
|
|
@ -98,7 +124,8 @@ footer {
|
|||
#morseButton {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
margin: 30px;
|
||||
margin-top: 30px;
|
||||
margin-bottom: 10px;
|
||||
// background: goldenrod;
|
||||
border-radius: 50px;
|
||||
align-self: center;
|
||||
|
|
@ -106,12 +133,24 @@ footer {
|
|||
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;
|
||||
}
|
||||
#morseButtonText {
|
||||
font-weight: bold;
|
||||
color: #ccc;
|
||||
font-size: 0.7rem;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
#paddleText {
|
||||
width: 150px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.paddle {
|
||||
font-size: 1rem;
|
||||
|
|
@ -122,7 +161,7 @@ footer {
|
|||
margin: 0px;
|
||||
border: 0px;
|
||||
transition: all 500ms ease-in-out;
|
||||
|
||||
|
||||
&#left {
|
||||
border-radius: 50px 0 0 50px;
|
||||
|
||||
|
|
@ -145,6 +184,56 @@ footer {
|
|||
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;
|
||||
}
|
||||
}
|
||||
|
||||
#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;
|
||||
width: fit-content;
|
||||
display: flex;
|
||||
font-size: 40px;
|
||||
font-family: 'Courier';
|
||||
font-size: 3rem;
|
||||
// font-family: 'Courier';
|
||||
font-family: $buffer-font;
|
||||
font-weight: bold;
|
||||
background: #EEE;
|
||||
text-transform: uppercase;
|
||||
|
|
@ -171,6 +261,7 @@ footer {
|
|||
span {
|
||||
padding: 4px;
|
||||
margin: 1px;
|
||||
line-height: 2.5rem;
|
||||
transition: background 300ms ease-in-out; //, opacity 100ms ease-in-out;
|
||||
}
|
||||
&.correct {
|
||||
|
|
@ -189,10 +280,11 @@ footer {
|
|||
width: 50vw;
|
||||
height: 150px;
|
||||
margin-bottom: 20px;
|
||||
font-family: $buffer-font;
|
||||
|
||||
#alphanumeric-container {
|
||||
// border-left: 2px solid #000;
|
||||
background: #ccc;
|
||||
background: #fdfdfd;
|
||||
display: flex;
|
||||
padding-left: 5px;
|
||||
height: 50px;
|
||||
|
|
@ -202,12 +294,10 @@ footer {
|
|||
justify-content: center;
|
||||
align-items: center;
|
||||
border-radius: 4px;
|
||||
box-shadow: $main-box-shadow;
|
||||
// box-shadow: $main-box-shadow-light;
|
||||
|
||||
#alphanumeric {
|
||||
font-size: 40px;
|
||||
font-family: 'Courier';
|
||||
font-weight: bold;
|
||||
background-color: transparent;
|
||||
|
||||
|
||||
|
|
@ -233,7 +323,7 @@ footer {
|
|||
flex-direction: row;
|
||||
justify-content: center;
|
||||
font-size: 25px;
|
||||
font-family: 'Courier';
|
||||
font-family: $ditDah-font;
|
||||
font-weight: bold;
|
||||
|
||||
span {
|
||||
|
|
@ -242,7 +332,7 @@ footer {
|
|||
}
|
||||
|
||||
.ditDah {
|
||||
background: #DDD;
|
||||
background: #fdfdfd;
|
||||
height: 40px;
|
||||
width: 30px !important;
|
||||
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 {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
|
@ -277,6 +358,8 @@ footer {
|
|||
width: 100%;
|
||||
height: 150px;
|
||||
margin-bottom: 20px;
|
||||
font-family: $buffer-font;
|
||||
font-weight: bold;
|
||||
|
||||
#alphanumeric-container {
|
||||
// border-left: 2px solid #000;
|
||||
|
|
@ -287,8 +370,6 @@ footer {
|
|||
|
||||
#alphanumeric {
|
||||
font-size: 40px;
|
||||
font-family: 'Courier';
|
||||
font-weight: bold;
|
||||
background-color: transparent;
|
||||
margin-bottom: 10px;
|
||||
|
||||
|
|
@ -313,7 +394,7 @@ footer {
|
|||
flex-direction: row;
|
||||
justify-content: center;
|
||||
font-size: 25px;
|
||||
font-family: 'Courier';
|
||||
font-family: $ditDah-font;
|
||||
font-weight: bold;
|
||||
|
||||
span {
|
||||
|
|
@ -328,7 +409,7 @@ footer {
|
|||
margin-left: 3px;
|
||||
// box-shadow: 0px 1px 0px #000;
|
||||
border-radius: $main-border-radius;
|
||||
box-shadow: $main-box-shadow;
|
||||
box-shadow: $main-box-shadow-light;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
|
@ -372,32 +453,32 @@ footer {
|
|||
opacity: 100%;
|
||||
}
|
||||
.morseCard:nth-child(2){
|
||||
opacity: 90%;
|
||||
opacity: 85%;
|
||||
}
|
||||
.morseCard:nth-child(3){
|
||||
opacity: 80%;
|
||||
}
|
||||
.morseCard:nth-child(4){
|
||||
opacity: 70%;
|
||||
}
|
||||
.morseCard:nth-child(4){
|
||||
opacity: 55%;
|
||||
}
|
||||
.morseCard:nth-child(5){
|
||||
opacity: 60%;
|
||||
}
|
||||
.morseCard:nth-child(6){
|
||||
opacity: 50%;
|
||||
}
|
||||
.morseCard:nth-child(7){
|
||||
opacity: 40%;
|
||||
}
|
||||
.morseCard:nth-child(8){
|
||||
opacity: 30%;
|
||||
}
|
||||
.morseCard:nth-child(9){
|
||||
.morseCard:nth-child(6){
|
||||
opacity: 20%;
|
||||
}
|
||||
.morseCard:nth-child(10){
|
||||
.morseCard:nth-child(7){
|
||||
opacity: 10%;
|
||||
}
|
||||
// .morseCard:nth-child(8){
|
||||
// opacity: 30%;
|
||||
// }
|
||||
// .morseCard:nth-child(9){
|
||||
// opacity: 20%;
|
||||
// }
|
||||
// .morseCard:nth-child(10){
|
||||
// opacity: 10%;
|
||||
// }
|
||||
}
|
||||
|
||||
.morseCard {
|
||||
|
|
@ -407,21 +488,21 @@ footer {
|
|||
/* border: 1px solid orange; */
|
||||
margin-bottom: 2px;
|
||||
font-size: 1.5rem;
|
||||
font-family: 'Courier';
|
||||
font-family: $buffer-font;
|
||||
/* width: 100%; */
|
||||
|
||||
|
||||
|
||||
|
||||
div div {
|
||||
// border: 1px solid purple;
|
||||
cursor: default;
|
||||
padding: 5px;
|
||||
margin: 3px;
|
||||
background: #EEE;
|
||||
margin: 2px;
|
||||
background: #fdfdfd;
|
||||
// width: 50%;
|
||||
white-space: nowrap;
|
||||
border-radius: $main-border-radius;
|
||||
box-shadow: $main-box-shadow;
|
||||
line-height: 1rem;
|
||||
border-radius: 3px;
|
||||
box-shadow: $morseCard-shadow-light;
|
||||
line-height: 1.2rem;
|
||||
display: flex;
|
||||
}
|
||||
.ditDahs-container, .alphanumeric-container {
|
||||
display: flex;
|
||||
|
|
@ -437,5 +518,7 @@ footer {
|
|||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
overflow-wrap: break-word;
|
||||
font-family: $ditDah-font;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
Loading…
Reference in a new issue