mirror of
https://github.com/genemecija/learn-morse-code.git
synced 2026-01-06 00:29:56 +01:00
Layout, styling, WPM buttons & functionality, Morse Buttons
This commit is contained in:
Gene Mecija
parent
5759522aff
commit
a41921c15b
62
src/App.js
62
src/App.js
|
|
@ -35,43 +35,45 @@ export default React.memo(function App() {
|
|||
<>
|
||||
<Header />
|
||||
<div id='main-content'>
|
||||
<Legend />
|
||||
|
||||
<MorseBufferContextProvider>
|
||||
<WordListPickerContextProvider>
|
||||
<WordFeederContextProvider>
|
||||
<div id="mainOptions">
|
||||
<ModePicker />
|
||||
<WordsPerMinute />
|
||||
<KeyTypePicker />
|
||||
{gameMode === 'challenge' &&
|
||||
<WordListPicker />
|
||||
}
|
||||
<div id="sidebar">
|
||||
<div id="mainOptions">
|
||||
<ModePicker />
|
||||
<KeyTypePicker />
|
||||
<WordsPerMinute />
|
||||
{gameMode === 'challenge' &&
|
||||
<WordListPicker />
|
||||
}
|
||||
</div>
|
||||
<Legend />
|
||||
</div>
|
||||
|
||||
{keyType === "straight" ?
|
||||
<StraightKey /> : <ElectronicKey />
|
||||
}
|
||||
|
||||
{gameMode === 'practice' &&
|
||||
<PracticeMode />
|
||||
}
|
||||
|
||||
{/* {gameMode === 'timed' &&
|
||||
<>
|
||||
<div id="main-interface">
|
||||
{keyType === "straight" ?
|
||||
<StraightKey gameMode='training' /> : <ElectronicKey gameMode='training' />}
|
||||
<TrainingMode /><br/>
|
||||
<MorseBufferDisplay /><br/>
|
||||
<MorseHistory /><br/>
|
||||
</>
|
||||
} */}
|
||||
<StraightKey /> : <ElectronicKey />
|
||||
}
|
||||
|
||||
{gameMode === 'challenge' &&
|
||||
<ChallengeMode />
|
||||
}
|
||||
{gameMode === 'practice' &&
|
||||
<PracticeMode />
|
||||
}
|
||||
|
||||
{/* {gameMode === 'timed' &&
|
||||
<>
|
||||
{keyType === "straight" ?
|
||||
<StraightKey gameMode='training' /> : <ElectronicKey gameMode='training' />}
|
||||
<TrainingMode /><br/>
|
||||
<MorseBufferDisplay /><br/>
|
||||
<MorseHistory /><br/>
|
||||
</>
|
||||
} */}
|
||||
|
||||
<MorseButtons />
|
||||
{gameMode === 'challenge' &&
|
||||
<ChallengeMode />
|
||||
}
|
||||
|
||||
<MorseButtons />
|
||||
</div>
|
||||
</WordFeederContextProvider>
|
||||
</WordListPickerContextProvider>
|
||||
</MorseBufferContextProvider>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import React, {useContext} from 'react';
|
||||
import React, {useContext, useEffect} from 'react';
|
||||
import '../css/App.css';
|
||||
import morseCode from '../data/morse-reverse.json'
|
||||
import ChallengeWord from '../components/ChallengeWord'
|
||||
|
|
@ -24,17 +24,20 @@ export default React.memo(function ChallengeMode(props) {
|
|||
let incorrectMorseIndexes = [] // Indexes of incorrect morse characters in morse character buffer
|
||||
|
||||
let offset = 0
|
||||
|
||||
|
||||
|
||||
if (!word) {
|
||||
console.log('FINISHED ALL WORDS!')
|
||||
alert('No more words.')
|
||||
return
|
||||
}
|
||||
|
||||
|
||||
let challengeLetters = word.split('')
|
||||
|
||||
|
||||
// Iterate through the morse character buffer and compare with each letter of challenge word
|
||||
morseArray.forEach((item, index) => {
|
||||
|
||||
if (morseCharBuffer.slice(-1) === '_') { // If end of morse character
|
||||
|
||||
let morseLetter = morseCode[morseArray[index]] || '[?]'
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
import React from 'react';
|
||||
import '../css/App.css';
|
||||
import MorseBufferDisplay from '../components/MorseBufferDisplay'
|
||||
import MorseHistoryTextBox from '../components/MorseHistory_textbox'
|
||||
import MorseHistory from '../components/MorseHistory'
|
||||
|
||||
|
||||
|
|
@ -9,7 +10,7 @@ export default (function PracticeMode(props) {
|
|||
return (
|
||||
<>
|
||||
<MorseBufferDisplay /><br/>
|
||||
<MorseHistory /><br/>
|
||||
<MorseHistory />
|
||||
</>
|
||||
);
|
||||
|
||||
|
|
|
|||
|
|
@ -36,10 +36,10 @@ export default React.memo(function KeyTypePicker() {
|
|||
return (
|
||||
<div id="keyType" className="mode-picker">
|
||||
<div id="title">
|
||||
Keyer Type <i class="ri-question-line"></i>
|
||||
Keyer Type <i className="ri-question-line"></i>
|
||||
</div>
|
||||
<div id="buttons">
|
||||
<button id="straight" class="selected" onClick={handleClick}>
|
||||
<button id="straight" className="selected" onClick={handleClick}>
|
||||
Straight Keyer
|
||||
</button>
|
||||
<button id="electronic" onClick={handleClick}>
|
||||
|
|
|
|||
|
|
@ -1,14 +1,18 @@
|
|||
import React, {useContext} from "react"
|
||||
import {GameModeContext} from "../contexts/gameModeContext"
|
||||
import { MorseBufferContext } from "../contexts/morseBufferContext"
|
||||
import { WordFeederContext } from "../contexts/wordFeederContext"
|
||||
|
||||
function ModePicker() {
|
||||
|
||||
const {setGameMode} = useContext(GameModeContext)
|
||||
const {setMorseCharBuffer} = useContext(MorseBufferContext)
|
||||
const {resetFeeder} = useContext(WordFeederContext)
|
||||
|
||||
function handleClick(e) {
|
||||
setMorseCharBuffer('')
|
||||
resetFeeder()
|
||||
|
||||
setGameMode(e.target.id)
|
||||
|
||||
let buttons = document.querySelector(".mode-picker#gameMode #buttons").childNodes
|
||||
|
|
@ -26,7 +30,7 @@ function ModePicker() {
|
|||
Mode
|
||||
</div>
|
||||
<div id='buttons'>
|
||||
<button id="practice" class="selected" onClick={handleClick}>
|
||||
<button id="practice" className="selected" onClick={handleClick}>
|
||||
Practice
|
||||
</button>
|
||||
<button id="training" onClick={handleClick}>
|
||||
|
|
|
|||
|
|
@ -4,8 +4,8 @@ export default React.memo(function MorseButtons() {
|
|||
return (
|
||||
<>
|
||||
<div id="morseButton">
|
||||
<button className="paddle" id="left"></button>
|
||||
<button className="paddle" id="right"></button>
|
||||
<button className="paddle" id="left"><<br/>,</button>
|
||||
<button className="paddle" id="right">><br/>.</button>
|
||||
</div>
|
||||
<div id="morseButtonText">
|
||||
SPACEBAR
|
||||
|
|
|
|||
|
|
@ -3,11 +3,12 @@ import React, {useContext, useState} from "react"
|
|||
import morseCode from '../data/morse-reverse.json'
|
||||
import {MorseBufferContext} from "../contexts/morseBufferContext"
|
||||
|
||||
export default (function MorseHistory() {
|
||||
export default (function MorseHistoryTextBox() {
|
||||
|
||||
const {morseWords} = useContext(MorseBufferContext)
|
||||
|
||||
let text = ''
|
||||
let span = []
|
||||
|
||||
console.log('morseWords', morseWords);
|
||||
|
||||
|
|
@ -23,14 +24,15 @@ export default (function MorseHistory() {
|
|||
newWord += morseCode[letter].toUpperCase()
|
||||
}
|
||||
})
|
||||
text = newWord + ' ' + text
|
||||
// text = newWord + ' ' + text
|
||||
span.splice(0, 0, <span>{newWord}</span>)
|
||||
}
|
||||
else if (morseCode[word] === undefined) {
|
||||
text = '[?]' + text
|
||||
console.log('undefined', word);
|
||||
// text = '[?] ' + text
|
||||
span.splice(0, 0, <span>[?]</span>)
|
||||
} else {
|
||||
console.log('here2');
|
||||
text = morseCode[word].toUpperCase() + ' ' + text
|
||||
// text = morseCode[word].toUpperCase() + ' ' + text
|
||||
span.splice(0, 0, <span>{morseCode[word].toUpperCase()}</span>)
|
||||
}
|
||||
})
|
||||
|
||||
|
|
@ -39,6 +41,6 @@ export default (function MorseHistory() {
|
|||
// } catch {}
|
||||
|
||||
return (
|
||||
<div id="morseHistory">{text}</div>
|
||||
<div id="morseHistory-textbox">{span}</div>
|
||||
)
|
||||
})
|
||||
|
|
@ -34,7 +34,7 @@ export default React.memo(function WordListPicker() {
|
|||
Word List
|
||||
</div>
|
||||
<div id="input">
|
||||
<select defaultValue={wordListCategory} onChange={handleClick}>
|
||||
<select id="wordlist-picker" defaultValue={wordListCategory} onChange={handleClick}>
|
||||
<option value="alphabet">Alphabet</option>
|
||||
<option value="common100">100 Most Common Words</option>
|
||||
<option value="test">Test List</option>
|
||||
|
|
@ -57,7 +57,7 @@ export default React.memo(function WordListPicker() {
|
|||
Word Order
|
||||
</div>
|
||||
<div id="buttons">
|
||||
<button id="sequential" class="selected" onClick={handleClick}>
|
||||
<button id="sequential" className="selected" onClick={handleClick}>
|
||||
Sequential
|
||||
</button>
|
||||
<button id="random" onClick={handleClick}>
|
||||
|
|
|
|||
|
|
@ -6,18 +6,30 @@ export default React.memo(function WordsPerMinute(props) {
|
|||
|
||||
const {wpm, setWPM} = useContext(WPMContext)
|
||||
|
||||
|
||||
function handleChange(e) {
|
||||
setWPM(Number(e.target.value))
|
||||
}
|
||||
function increment() {
|
||||
setWPM(prevWPM => prevWPM + 1)
|
||||
}
|
||||
function decrement() {
|
||||
setWPM(prevWPM => prevWPM - 1)
|
||||
}
|
||||
|
||||
console.log('wpm', wpm);
|
||||
console.log('typeof wpm', typeof wpm);
|
||||
|
||||
return (
|
||||
// <input id='wpm-input' type='text' value={wpm} onChange={handleChange} />
|
||||
<div id='wpm' class='mode-picker'>
|
||||
<div id='wpm' className='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>
|
||||
<button id='wpm-down' onClick={decrement}><i className="ri-arrow-down-s-line"></i></button>
|
||||
<input type="number" name="wpm" id='wpm-input' min="5" max="30" value={wpm} onChange={handleChange}></input>
|
||||
<button id='wpm-up' onClick={increment}><i className="ri-arrow-up-s-line"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@ const WordFeederContext = React.createContext()
|
|||
function WordFeederContextProvider(props) {
|
||||
console.log('LOADED: wordFeederContext');
|
||||
// let wordList = ['hi', 'morse', 'code', 'hello', 'gene']
|
||||
const {wordList, wordListShuffled} = useContext(WordListPickerContext)
|
||||
const {wordList, wordListShuffled, wordListCategory} = useContext(WordListPickerContext)
|
||||
|
||||
const [wordIndex, setWordIndex] = useState(0)
|
||||
const [order, setOrder] = useState('sequential')
|
||||
|
|
|
|||
|
|
@ -42,7 +42,7 @@ function WordListPickerContextProvider(props) {
|
|||
|
||||
|
||||
return (
|
||||
<WordListPickerContext.Provider value={{wordList: wordList, wordListShuffled: randomize(wordList), setWordListCategory: setWordListCategory}}>
|
||||
<WordListPickerContext.Provider value={{wordList: wordList, wordListShuffled: randomize(wordList), wordListCategory: wordListCategory, setWordListCategory: setWordListCategory}}>
|
||||
{props.children}
|
||||
</WordListPickerContext.Provider>
|
||||
)
|
||||
|
|
|
|||
|
|
@ -8,8 +8,9 @@ function WPMContextProvider(props) {
|
|||
|
||||
return (
|
||||
<WPMContext.Provider value={{
|
||||
wpm: wpm,
|
||||
setWPM: setWPM}}>
|
||||
wpm: Number(wpm),
|
||||
setWPM: setWPM}
|
||||
}>
|
||||
{props.children}
|
||||
</WPMContext.Provider>
|
||||
)
|
||||
|
|
|
|||
423
src/css/App.css
423
src/css/App.css
|
|
@ -8,14 +8,14 @@
|
|||
}
|
||||
|
||||
button {
|
||||
font-family: #f2f2f2;
|
||||
font-family: #f1f1f1;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
html, body {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
background: #f2f2f2;
|
||||
background: #f1f1f1;
|
||||
}
|
||||
|
||||
#root {
|
||||
|
|
@ -35,10 +35,43 @@ html, body {
|
|||
}
|
||||
|
||||
header {
|
||||
margin-top: 100px;
|
||||
margin-top: 50px;
|
||||
}
|
||||
|
||||
#main-content {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
height: 95vh;
|
||||
width: 95vw;
|
||||
border: 1px solid red;
|
||||
-webkit-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
#main-content #sidebar {
|
||||
border: 1px solid green;
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-box-direction: normal;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
-ms-flex-pack: distribute;
|
||||
justify-content: space-around;
|
||||
height: 100%;
|
||||
width: 350px;
|
||||
padding-top: 50px;
|
||||
padding-bottom: 50px;
|
||||
}
|
||||
|
||||
#main-content #main-interface {
|
||||
border: 1px solid blue;
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
|
|
@ -46,11 +79,114 @@ header {
|
|||
-webkit-box-direction: normal;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
width: 95vw;
|
||||
border: 1px solid red;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
-webkit-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
width: 900px;
|
||||
height: 100%;
|
||||
min-width: 400px;
|
||||
}
|
||||
|
||||
i[class*="ri-"] {
|
||||
cursor: pointer;
|
||||
font-weight: normal;
|
||||
font-size: 0.9rem;
|
||||
color: #777;
|
||||
}
|
||||
|
||||
i[class*="ri-"]:hover {
|
||||
color: goldenrod;
|
||||
}
|
||||
|
||||
#mainOptions {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-box-direction: normal;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
-webkit-box-align: start;
|
||||
-ms-flex-align: start;
|
||||
align-items: flex-start;
|
||||
width: 100%;
|
||||
max-width: 95vw;
|
||||
height: 200px;
|
||||
border: 1px solid red;
|
||||
}
|
||||
|
||||
#mainOptions .mode-picker {
|
||||
width: 100%;
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-ms-flex-item-align: start;
|
||||
align-self: flex-start;
|
||||
-ms-flex-line-pack: center;
|
||||
align-content: center;
|
||||
-webkit-box-pack: start;
|
||||
-ms-flex-pack: start;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
#mainOptions .mode-picker #title {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
#mainOptions .mode-picker #buttons {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-pack: justify;
|
||||
-ms-flex-pack: justify;
|
||||
justify-content: space-between;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
#mainOptions .mode-picker #buttons button {
|
||||
height: 1.4rem;
|
||||
}
|
||||
|
||||
#mainOptions .mode-picker #input {
|
||||
margin-left: 10px;
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
#mainOptions .mode-picker #input input {
|
||||
width: 50px;
|
||||
-webkit-appearance: textfield;
|
||||
-moz-appearance: textfield;
|
||||
appearance: textfield;
|
||||
text-align: center;
|
||||
border-radius: 3px;
|
||||
border: 1px solid #ddd;
|
||||
height: 1.3rem;
|
||||
}
|
||||
|
||||
#mainOptions .mode-picker #input select {
|
||||
height: 1.4rem;
|
||||
}
|
||||
|
||||
#mainOptions .mode-picker #input button {
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
border-radius: 50%;
|
||||
line-height: 10px;
|
||||
}
|
||||
|
||||
#mainOptions .mode-picker #input button i {
|
||||
position: relative;
|
||||
left: -2px;
|
||||
}
|
||||
|
||||
.mode-picker {
|
||||
|
|
@ -75,7 +211,7 @@ header {
|
|||
}
|
||||
|
||||
.mode-picker button {
|
||||
background: #f2f2f2;
|
||||
background: #f1f1f1;
|
||||
color: #333;
|
||||
margin: 7px;
|
||||
padding: 5px;
|
||||
|
|
@ -91,19 +227,15 @@ header {
|
|||
}
|
||||
|
||||
#legend {
|
||||
width: 400px;
|
||||
height: 325px;
|
||||
background: #f1f1f1;
|
||||
width: 100%;
|
||||
max-width: 95vw;
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-box-direction: normal;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
-webkit-box-pack: space-evenly;
|
||||
-ms-flex-pack: space-evenly;
|
||||
justify-content: space-evenly;
|
||||
position: fixed;
|
||||
top: 250px;
|
||||
left: 50px;
|
||||
-ms-flex-wrap: wrap;
|
||||
|
|
@ -132,6 +264,13 @@ header {
|
|||
box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.2), 0px -1px 1px white;
|
||||
}
|
||||
|
||||
#legend div button:active {
|
||||
-webkit-transform: translateY(3px);
|
||||
transform: translateY(3px);
|
||||
-webkit-box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.3);
|
||||
box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
#legend div span {
|
||||
width: 60%;
|
||||
-webkit-box-pack: center;
|
||||
|
|
@ -141,11 +280,11 @@ header {
|
|||
}
|
||||
|
||||
#morseButton {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
width: 400px;
|
||||
height: 55px;
|
||||
margin-top: 30px;
|
||||
margin-bottom: 10px;
|
||||
border-radius: 50px;
|
||||
border-radius: 5px;
|
||||
-ms-flex-item-align: center;
|
||||
align-self: center;
|
||||
display: -webkit-box;
|
||||
|
|
@ -157,14 +296,72 @@ header {
|
|||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
-webkit-transition: all 500ms ease-in-out;
|
||||
transition: all 500ms ease-in-out;
|
||||
-webkit-box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.2), 0px -1px 1px white;
|
||||
box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.2), 0px -1px 1px white;
|
||||
-webkit-transition: width 500ms ease-out, background 500ms ease-out, -webkit-transform 40ms ease-out, -webkit-box-shadow 40ms ease-out;
|
||||
transition: width 500ms ease-out, background 500ms ease-out, -webkit-transform 40ms ease-out, -webkit-box-shadow 40ms ease-out;
|
||||
transition: transform 40ms ease-out, box-shadow 40ms ease-out, width 500ms ease-out, background 500ms ease-out;
|
||||
transition: transform 40ms ease-out, box-shadow 40ms ease-out, width 500ms ease-out, background 500ms ease-out, -webkit-transform 40ms ease-out, -webkit-box-shadow 40ms ease-out;
|
||||
}
|
||||
|
||||
#morseButton.active {
|
||||
-webkit-transform: translateY(3px);
|
||||
transform: translateY(3px);
|
||||
-webkit-box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.3);
|
||||
box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
#morseButton button {
|
||||
font-size: 1rem;
|
||||
color: transparent;
|
||||
width: 200px;
|
||||
height: 55px;
|
||||
background: #f4f4f4;
|
||||
margin: 0px;
|
||||
border: 0px;
|
||||
-webkit-transition: width 500ms ease-out, background 500ms ease-out, -webkit-transform 40ms ease-out, -webkit-box-shadow 40ms ease-out;
|
||||
transition: width 500ms ease-out, background 500ms ease-out, -webkit-transform 40ms ease-out, -webkit-box-shadow 40ms ease-out;
|
||||
transition: transform 40ms ease-out, box-shadow 40ms ease-out, width 500ms ease-out, background 500ms ease-out;
|
||||
transition: transform 40ms ease-out, box-shadow 40ms ease-out, width 500ms ease-out, background 500ms ease-out, -webkit-transform 40ms ease-out, -webkit-box-shadow 40ms ease-out;
|
||||
}
|
||||
|
||||
#morseButton button.showPaddles {
|
||||
color: #888;
|
||||
font-size: 1rem;
|
||||
font-weight: bold;
|
||||
width: 60px;
|
||||
height: 55px;
|
||||
-webkit-box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.2), 0px -1px 1px white;
|
||||
box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.2), 0px -1px 1px white;
|
||||
}
|
||||
|
||||
#morseButton button#left {
|
||||
border-radius: 5px 0 0 5px;
|
||||
}
|
||||
|
||||
#morseButton button#left.showPaddles {
|
||||
margin-right: 7px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
#morseButton button#right {
|
||||
border-radius: 0 5px 5px 0;
|
||||
}
|
||||
|
||||
#morseButton button#right.showPaddles {
|
||||
margin-left: 7px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
#morseButton button.active {
|
||||
-webkit-transform: translateY(3px);
|
||||
transform: translateY(3px);
|
||||
-webkit-box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.3);
|
||||
box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
#morseButton.showPaddles {
|
||||
width: 239px;
|
||||
width: 134px;
|
||||
background: transparent;
|
||||
-webkit-box-shadow: 0px 0px 0px transparent;
|
||||
box-shadow: 0px 0px 0px transparent;
|
||||
|
|
@ -172,130 +369,18 @@ header {
|
|||
|
||||
#morseButtonText {
|
||||
font-weight: bold;
|
||||
color: #ccc;
|
||||
color: #bbb;
|
||||
font-size: 0.7rem;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
#paddleText {
|
||||
width: 150px;
|
||||
width: 140px;
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-pack: justify;
|
||||
-ms-flex-pack: justify;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.paddle {
|
||||
font-size: 1rem;
|
||||
color: transparent;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background: goldenrod;
|
||||
margin: 0px;
|
||||
border: 0px;
|
||||
-webkit-transition: all 500ms ease-in-out;
|
||||
transition: all 500ms ease-in-out;
|
||||
}
|
||||
|
||||
.paddle#left {
|
||||
border-radius: 50px 0 0 50px;
|
||||
}
|
||||
|
||||
.paddle#left.showPaddles {
|
||||
margin-right: 7px;
|
||||
border-radius: 20px 0 0 20px;
|
||||
}
|
||||
|
||||
.paddle#right {
|
||||
border-radius: 0 50px 50px 0;
|
||||
}
|
||||
|
||||
.paddle#right.showPaddles {
|
||||
margin-left: 7px;
|
||||
border-radius: 0 20px 20px 0;
|
||||
}
|
||||
|
||||
.paddle.showPaddles {
|
||||
color: #000;
|
||||
font-size: 2.5rem;
|
||||
font-weight: bold;
|
||||
width: 250px;
|
||||
height: 100px;
|
||||
-webkit-box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.2), 0px -1px 1px white;
|
||||
box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.2), 0px -1px 1px white;
|
||||
}
|
||||
|
||||
i[class*="ri-"] {
|
||||
font-weight: normal;
|
||||
font-size: 0.9rem;
|
||||
color: #777;
|
||||
}
|
||||
|
||||
i[class*="ri-"]:hover {
|
||||
color: goldenrod;
|
||||
}
|
||||
|
||||
#mainOptions {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-box-direction: normal;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
-webkit-box-align: start;
|
||||
-ms-flex-align: start;
|
||||
align-items: flex-start;
|
||||
width: 400px;
|
||||
}
|
||||
|
||||
#mainOptions .mode-picker {
|
||||
-ms-flex-item-align: start;
|
||||
align-self: flex-start;
|
||||
width: 100%;
|
||||
-webkit-box-pack: start;
|
||||
-ms-flex-pack: start;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
#mainOptions .mode-picker #buttons {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-pack: justify;
|
||||
-ms-flex-pack: justify;
|
||||
justify-content: space-between;
|
||||
-ms-flex-line-pack: justify;
|
||||
align-content: space-between;
|
||||
}
|
||||
|
||||
#mainOptions .mode-picker #input {
|
||||
margin-left: 10px;
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
#mainOptions .mode-picker #input input {
|
||||
width: 50px;
|
||||
text-align: center;
|
||||
border-radius: 3px;
|
||||
border: 1px solid #ddd;
|
||||
height: 1.3rem;
|
||||
}
|
||||
|
||||
#mainOptions .mode-picker #input select:focus {
|
||||
-webkit-box-shadow: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
#mainOptions #title {
|
||||
font-weight: bold;
|
||||
-ms-flex-pack: distribute;
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
#challengeWord {
|
||||
|
|
@ -308,22 +393,23 @@ i[class*="ri-"]:hover {
|
|||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
-ms-flex-item-align: center;
|
||||
align-self: center;
|
||||
height: 50px;
|
||||
margin-bottom: 20px;
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
border-radius: 5px;
|
||||
width: -webkit-fit-content;
|
||||
width: -moz-fit-content;
|
||||
width: fit-content;
|
||||
display: flex;
|
||||
margin-bottom: 20px;
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
border-radius: 4px;
|
||||
-webkit-box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.2), 0px -1px 1px white;
|
||||
box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.2), 0px -1px 1px white;
|
||||
font-size: 3rem;
|
||||
font-family: "Courier Prime", monospace;
|
||||
font-family: "Courier", monospace;
|
||||
font-weight: bold;
|
||||
background: #EEE;
|
||||
background: #fdfdfd;
|
||||
text-transform: uppercase;
|
||||
-ms-flex-item-align: center;
|
||||
align-self: center;
|
||||
-webkit-transition: all 300ms ease-in-out;
|
||||
transition: all 300ms ease-in-out;
|
||||
}
|
||||
|
|
@ -355,10 +441,11 @@ i[class*="ri-"]:hover {
|
|||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
width: 50vw;
|
||||
width: 100%;
|
||||
height: 150px;
|
||||
margin-bottom: 20px;
|
||||
font-family: "Courier Prime", monospace;
|
||||
font-family: "Courier", monospace;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
#morseBufferDisplay #alphanumeric-container {
|
||||
|
|
@ -367,7 +454,7 @@ i[class*="ri-"]:hover {
|
|||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
padding-left: 5px;
|
||||
height: 50px;
|
||||
height: 3rem;
|
||||
min-width: 250px;
|
||||
margin-bottom: 10px;
|
||||
display: flex;
|
||||
|
|
@ -378,10 +465,12 @@ i[class*="ri-"]:hover {
|
|||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
border-radius: 4px;
|
||||
-webkit-box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.2), 0px -1px 1px white;
|
||||
box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.2), 0px -1px 1px white;
|
||||
}
|
||||
|
||||
#morseBufferDisplay #alphanumeric-container #alphanumeric {
|
||||
font-size: 40px;
|
||||
font-size: 3rem;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
|
|
@ -459,7 +548,7 @@ i[class*="ri-"]:hover {
|
|||
width: 100%;
|
||||
height: 150px;
|
||||
margin-bottom: 20px;
|
||||
font-family: "Courier Prime", monospace;
|
||||
font-family: "Courier", monospace;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
|
|
@ -553,7 +642,26 @@ i[class*="ri-"]:hover {
|
|||
border-radius: 5px;
|
||||
}
|
||||
|
||||
#morseHistory-textbox {
|
||||
border: 1px solid cyan;
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
height: 150px;
|
||||
width: 75%;
|
||||
padding: 15px;
|
||||
font-family: Courier;
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
#morseHistory-textbox span {
|
||||
background: #CCC;
|
||||
margin-right: 0.7rem;
|
||||
height: 1.5rem;
|
||||
}
|
||||
|
||||
#morseHistory {
|
||||
border: 1px solid purple;
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
|
|
@ -561,6 +669,7 @@ i[class*="ri-"]:hover {
|
|||
-webkit-box-direction: normal;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#morseHistory .morseCard:nth-child(1) {
|
||||
|
|
@ -604,26 +713,32 @@ i[class*="ri-"]:hover {
|
|||
justify-content: center;
|
||||
/* border: 1px solid orange; */
|
||||
margin-bottom: 2px;
|
||||
font-size: 1.5rem;
|
||||
font-family: "Courier Prime", monospace;
|
||||
font-size: 1.7rem;
|
||||
font-family: "Courier", monospace;
|
||||
/* width: 100%; */
|
||||
}
|
||||
|
||||
.morseCard div div {
|
||||
cursor: default;
|
||||
padding: 5px;
|
||||
padding: 3px;
|
||||
margin: 2px;
|
||||
background: #fdfdfd;
|
||||
white-space: nowrap;
|
||||
border-radius: 3px;
|
||||
-webkit-box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.2);
|
||||
box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.2);
|
||||
line-height: 1.2rem;
|
||||
line-height: 1.7rem;
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.morseCard div div span.morseError {
|
||||
background: rgba(255, 0, 0, 0.4);
|
||||
height: 1.7rem;
|
||||
color: #780000;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.morseCard .ditDahs-container, .morseCard .alphanumeric-container {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -235,13 +235,15 @@ function useElectronicKey() {
|
|||
|
||||
|
||||
function handleInputStart(event) {
|
||||
event.preventDefault()
|
||||
// event.preventDefault()
|
||||
|
||||
paddlesReleasedSimultaneously = false
|
||||
|
||||
if (event.repeat) { return }
|
||||
|
||||
if (event.keyCode === 188 || event.target.id === "left") {
|
||||
document.getElementById('left').classList.add('active')
|
||||
|
||||
leftIsPressed = true
|
||||
if (!rightIsPressed) { pressedFirst = 'left'}
|
||||
|
||||
|
|
@ -251,6 +253,8 @@ function useElectronicKey() {
|
|||
}
|
||||
}
|
||||
else if (event.keyCode === 190 || event.target.id === "right") {
|
||||
document.getElementById('right').classList.add('active')
|
||||
|
||||
rightIsPressed = true
|
||||
if (!leftIsPressed) { pressedFirst = 'right'}
|
||||
|
||||
|
|
@ -262,11 +266,13 @@ function useElectronicKey() {
|
|||
}
|
||||
|
||||
function handleInputEnd(event) {
|
||||
event.preventDefault()
|
||||
// event.preventDefault()
|
||||
|
||||
// if (!insideBufferDisplay) {return}
|
||||
|
||||
if (event.keyCode === 188 || event.target.id === "left") {
|
||||
document.getElementById('left').classList.remove('active')
|
||||
|
||||
leftIsPressed = false
|
||||
|
||||
if (pressedFirst === 'left') { pressedFirst = null }
|
||||
|
|
@ -275,6 +281,8 @@ function useElectronicKey() {
|
|||
else { stopDepressSyncTimer() }
|
||||
}
|
||||
if (event.keyCode === 190 || event.target.id === "right") {
|
||||
document.getElementById('right').classList.remove('active')
|
||||
|
||||
rightIsPressed = false
|
||||
if (pressedFirst === 'right') { pressedFirst = null }
|
||||
|
||||
|
|
|
|||
|
|
@ -46,43 +46,14 @@ function useStraightKey() {
|
|||
}
|
||||
|
||||
function handleInputStart(event) {
|
||||
event.preventDefault()
|
||||
console.log('ditMaxTime',ditMaxTime);
|
||||
console.log('letterGapMinTime',letterGapMinTime);
|
||||
console.log('wordGapMaxTime',wordGapMaxTime);
|
||||
// console.log('event.type', event.type);
|
||||
// if (event.type === 'mousedown' && event.target.className !== 'paddle') {
|
||||
// if (event.target.id === 'wpm-input') {
|
||||
// console.log('REMOVED KEYDOWN/UP');
|
||||
// document.removeEventListener('keydown', handleInputStart)
|
||||
// document.removeEventListener('keyup', handleInputEnd)
|
||||
// event.target.focus()
|
||||
// } else {
|
||||
// document.addEventListener('keydown', handleInputStart)
|
||||
// document.addEventListener('keyup', handleInputEnd)
|
||||
// document.activeElement.blur()
|
||||
// }
|
||||
// }
|
||||
// event.preventDefault()
|
||||
|
||||
|
||||
|
||||
// console.log(event.target);
|
||||
// if (event.type === 'mousedown' && event.target.className !== 'paddle') {
|
||||
// if (bufferDisplay.includes(event.target.id)) {
|
||||
// document.addEventListener('keydown', handleInputStart)
|
||||
// document.addEventListener('keyup', handleInputEnd)
|
||||
// insideBufferDisplay = true
|
||||
// console.log('insideBufferDisplay', insideBufferDisplay);
|
||||
// } else {
|
||||
// document.removeEventListener('keydown', handleInputStart)
|
||||
// document.removeEventListener('keyup', handleInputEnd)
|
||||
// insideBufferDisplay = false
|
||||
// console.log('insideBufferDisplay', insideBufferDisplay);
|
||||
// if (event.target.id === 'wpm-input') {
|
||||
// event.target.focus()
|
||||
// } else {
|
||||
// document.activeElement.blur()
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
if (event.keyCode === 32 && document.activeElement.id === 'wordlist-picker') {
|
||||
event.preventDefault()
|
||||
document.activeElement.blur()
|
||||
}
|
||||
|
||||
|
||||
if (isRunning) {
|
||||
|
|
@ -93,8 +64,10 @@ function useStraightKey() {
|
|||
event.target.id !== "morseButton" &&
|
||||
event.target.className !== "paddle") ||
|
||||
(event.repeat)) {
|
||||
return
|
||||
}
|
||||
return
|
||||
}
|
||||
|
||||
document.getElementById('morseButton').classList.add('active')
|
||||
|
||||
isRunning = true
|
||||
|
||||
|
|
@ -128,7 +101,7 @@ function useStraightKey() {
|
|||
}
|
||||
|
||||
function handleInputEnd(event) {
|
||||
event.preventDefault()
|
||||
// event.preventDefault()
|
||||
|
||||
// if (event.target.id !== 'morseBufferDisplay') {
|
||||
// insideBufferDisplay = true
|
||||
|
|
@ -143,6 +116,9 @@ function useStraightKey() {
|
|||
(event.repeat)) {
|
||||
return
|
||||
}
|
||||
|
||||
document.getElementById('morseButton').classList.remove('active')
|
||||
|
||||
isRunning = false
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -1,10 +1,11 @@
|
|||
// $main-bg-color-dark: #2c2c2c;
|
||||
@import url('https://fonts.googleapis.com/css?family=Courier+Prime:700|Rubik&display=swap');
|
||||
$main-font: 'Rubik', sans-serif;
|
||||
$buffer-font: 'Courier Prime', monospace;
|
||||
// $buffer-font: 'Courier Prime', monospace;
|
||||
$buffer-font: 'Courier', monospace;
|
||||
$ditDah-font: 'Courier', monospace;
|
||||
|
||||
$main-bg-color-light: #f2f2f2;
|
||||
$main-bg-color-light: #f1f1f1;
|
||||
|
||||
$main-font-color-light: #333;
|
||||
|
||||
|
|
@ -45,19 +46,109 @@ html, body {
|
|||
border: 3px solid green;
|
||||
}
|
||||
header {
|
||||
margin-top: 100px;
|
||||
margin-top: 50px;
|
||||
}
|
||||
#main-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 95vh;
|
||||
width: 95vw;
|
||||
border: 1px solid red;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
#sidebar {
|
||||
border: 1px solid green;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
height: 100%;
|
||||
width: 350px;
|
||||
padding-top: 50px;
|
||||
padding-bottom: 50px;
|
||||
}
|
||||
#main-interface {
|
||||
border: 1px solid blue;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 900px;
|
||||
height: 100%;
|
||||
min-width: 400px;
|
||||
}
|
||||
}
|
||||
footer {
|
||||
|
||||
}
|
||||
|
||||
i[class*="ri-"] {
|
||||
cursor: pointer;
|
||||
font-weight: normal;
|
||||
font-size: 0.9rem;
|
||||
color: #777;
|
||||
&:hover {
|
||||
color: goldenrod;
|
||||
}
|
||||
}
|
||||
|
||||
#mainOptions {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
width: 100%;
|
||||
max-width: 95vw;
|
||||
height: 200px;
|
||||
border: 1px solid red;
|
||||
.mode-picker {
|
||||
// border: 1px solid green;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-self: flex-start;
|
||||
align-content: center;
|
||||
justify-content: flex-start;
|
||||
// height: 60px;
|
||||
// height: 45px;
|
||||
#title {
|
||||
font-weight: bold;
|
||||
}
|
||||
#buttons {
|
||||
// border: 1px solid blue;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
button {
|
||||
height: 1.4rem;
|
||||
}
|
||||
}
|
||||
#input {
|
||||
margin-left: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
input {
|
||||
width: 50px;
|
||||
appearance: textfield;
|
||||
text-align: center;
|
||||
border-radius: 3px;
|
||||
border: 1px solid #ddd;
|
||||
height: 1.3rem;
|
||||
}
|
||||
select {
|
||||
height: 1.4rem;
|
||||
}
|
||||
button {
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
border-radius: 50%;
|
||||
line-height: 10px;
|
||||
i {
|
||||
position: relative;
|
||||
left: -2px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mode-picker {
|
||||
display: flex;
|
||||
align-self: center;
|
||||
|
|
@ -85,12 +176,13 @@ footer {
|
|||
}
|
||||
|
||||
#legend {
|
||||
width: 400px;
|
||||
height: 325px;
|
||||
background: $main-bg-color-light;
|
||||
width: 100%;
|
||||
max-width: 95vw;
|
||||
// height: 325px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
// flex-direction: column;
|
||||
justify-content: space-evenly;
|
||||
position: fixed;
|
||||
top: 250px;
|
||||
left: 50px;
|
||||
flex-wrap: wrap;
|
||||
|
|
@ -111,6 +203,10 @@ footer {
|
|||
border: 0px;
|
||||
border-radius: 2px;
|
||||
box-shadow: $main-box-shadow-light;
|
||||
&:active {
|
||||
transform: translateY(3px);
|
||||
box-shadow: 0px 0px 2px rgba(0,0,0,0.3);
|
||||
}
|
||||
}
|
||||
span {
|
||||
width: 60%;
|
||||
|
|
@ -122,140 +218,175 @@ footer {
|
|||
}
|
||||
|
||||
#morseButton {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
width: 400px;
|
||||
height: 55px;
|
||||
margin-top: 30px;
|
||||
margin-bottom: 10px;
|
||||
// background: goldenrod;
|
||||
border-radius: 50px;
|
||||
border-radius: 5px;
|
||||
align-self: center;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
transition: all 500ms ease-in-out;
|
||||
box-shadow: $main-box-shadow-light;
|
||||
}
|
||||
#morseButton.showPaddles {
|
||||
width: 239px;
|
||||
background: transparent;
|
||||
box-shadow: 0px 0px 0px transparent;
|
||||
transition: transform 40ms ease-out, box-shadow 40ms ease-out, width 500ms ease-out, background 500ms ease-out;
|
||||
|
||||
|
||||
&.active {
|
||||
transform: translateY(3px);
|
||||
box-shadow: 0px 0px 2px rgba(0,0,0,0.3);
|
||||
}
|
||||
// &:active > button, &.active > button {
|
||||
// transform: translateY(1px);
|
||||
// }
|
||||
|
||||
button {
|
||||
font-size: 1rem;
|
||||
color: transparent;
|
||||
width: 200px;
|
||||
height: 55px;
|
||||
// background: yellow;
|
||||
background: #f4f4f4;
|
||||
margin: 0px;
|
||||
border: 0px;
|
||||
// transition: all 20ms ease-out;
|
||||
transition: transform 40ms ease-out, box-shadow 40ms ease-out, width 500ms ease-out, background 500ms ease-out;
|
||||
|
||||
&.showPaddles {
|
||||
color: #888;
|
||||
font-size: 1rem;
|
||||
font-weight: bold;
|
||||
width: 60px;
|
||||
height: 55px;
|
||||
box-shadow: $main-box-shadow-light;
|
||||
}
|
||||
&#left {
|
||||
border-radius: 5px 0 0 5px;
|
||||
&.showPaddles{
|
||||
margin-right: 7px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
}
|
||||
&#right {
|
||||
border-radius: 0 5px 5px 0;
|
||||
&.showPaddles{
|
||||
margin-left: 7px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
}
|
||||
&.active {
|
||||
transform: translateY(3px);
|
||||
box-shadow: 0px 0px 2px rgba(0,0,0,0.3);
|
||||
}
|
||||
}
|
||||
|
||||
&.showPaddles {
|
||||
width: 134px;
|
||||
background: transparent;
|
||||
box-shadow: 0px 0px 0px transparent;
|
||||
}
|
||||
}
|
||||
#morseButtonText {
|
||||
font-weight: bold;
|
||||
color: #ccc;
|
||||
color: #bbb;
|
||||
font-size: 0.7rem;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
#paddleText {
|
||||
width: 150px;
|
||||
width: 140px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
justify-content: space-around;
|
||||
}
|
||||
// #morseButton.mobile {
|
||||
// width: 100px;
|
||||
// height: 100px;
|
||||
// margin-top: 30px;
|
||||
// margin-bottom: 10px;
|
||||
// // background: goldenrod;
|
||||
// border-radius: 50px;
|
||||
// align-self: center;
|
||||
// display: flex;
|
||||
// justify-content: center;
|
||||
// align-items: center;
|
||||
// transition: all 500ms ease-in-out;
|
||||
// box-shadow: $main-box-shadow-light;
|
||||
// }
|
||||
// #morseButton.showPaddles.mobile {
|
||||
// width: 239px;
|
||||
// background: transparent;
|
||||
// box-shadow: 0px 0px 0px transparent;
|
||||
// }
|
||||
// #morseButtonText.mobile {
|
||||
// font-weight: bold;
|
||||
// color: #bbb;
|
||||
// font-size: 0.7rem;
|
||||
// margin-bottom: 40px;
|
||||
// }
|
||||
// #paddleText.mobile {
|
||||
// width: 150px;
|
||||
// display: flex;
|
||||
// justify-content: space-between;
|
||||
// }
|
||||
|
||||
.paddle {
|
||||
font-size: 1rem;
|
||||
color: transparent;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background: goldenrod;
|
||||
margin: 0px;
|
||||
border: 0px;
|
||||
transition: all 500ms ease-in-out;
|
||||
// .paddle.mobile {
|
||||
// font-size: 1rem;
|
||||
// color: transparent;
|
||||
// width: 100px;
|
||||
// height: 100px;
|
||||
// background: goldenrod;
|
||||
// margin: 0px;
|
||||
// border: 0px;
|
||||
// transition: all 500ms ease-in-out;
|
||||
|
||||
&#left {
|
||||
border-radius: 50px 0 0 50px;
|
||||
// &#left {
|
||||
// border-radius: 50px 0 0 50px;
|
||||
|
||||
&.showPaddles{
|
||||
margin-right: 7px;
|
||||
border-radius: 20px 0 0 20px;
|
||||
}
|
||||
}
|
||||
&#right {
|
||||
border-radius: 0 50px 50px 0;
|
||||
// &.showPaddles{
|
||||
// margin-right: 7px;
|
||||
// border-radius: 20px 0 0 20px;
|
||||
// }
|
||||
// }
|
||||
// &#right {
|
||||
// border-radius: 0 50px 50px 0;
|
||||
|
||||
&.showPaddles{
|
||||
margin-left: 7px;
|
||||
border-radius: 0 20px 20px 0;
|
||||
}
|
||||
}
|
||||
&.showPaddles {
|
||||
color: #000;
|
||||
font-size: 2.5rem;
|
||||
font-weight: bold;
|
||||
width: 250px;
|
||||
height: 100px;
|
||||
box-shadow: $main-box-shadow-light;
|
||||
}
|
||||
}
|
||||
i[class*="ri-"] {
|
||||
font-weight: normal;
|
||||
font-size: 0.9rem;
|
||||
color: #777;
|
||||
&:hover {
|
||||
color: goldenrod;
|
||||
}
|
||||
}
|
||||
// &.showPaddles{
|
||||
// margin-left: 7px;
|
||||
// border-radius: 0 20px 20px 0;
|
||||
// }
|
||||
// }
|
||||
// &.showPaddles {
|
||||
// color: #000;
|
||||
// font-size: 2.5rem;
|
||||
// font-weight: bold;
|
||||
// width: 250px;
|
||||
// height: 100px;
|
||||
// box-shadow: $main-box-shadow-light;
|
||||
// }
|
||||
// }
|
||||
|
||||
#mainOptions {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
width: 400px;
|
||||
// border: 1px solid red;
|
||||
.mode-picker {
|
||||
align-self: flex-start;
|
||||
// border: 1px solid green;
|
||||
width: 100%;
|
||||
justify-content: flex-start;
|
||||
#buttons {
|
||||
// border: 1px solid blue;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-content: space-between;
|
||||
}
|
||||
#input {
|
||||
margin-left: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
input {
|
||||
width: 50px;
|
||||
// appearance: textfield;
|
||||
text-align: center;
|
||||
border-radius: 3px;
|
||||
border: 1px solid #ddd;
|
||||
height: 1.3rem;
|
||||
}
|
||||
select {
|
||||
&:focus {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
#title {
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
#challengeWord {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
// border: 1px solid green;
|
||||
align-self: center;
|
||||
|
||||
height: 50px;
|
||||
width: fit-content;
|
||||
|
||||
margin-bottom: 20px;
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
border-radius: 5px;
|
||||
width: fit-content;
|
||||
display: flex;
|
||||
|
||||
// border: 1px solid green;
|
||||
border-radius: 4px;
|
||||
box-shadow: $main-box-shadow-light;
|
||||
|
||||
font-size: 3rem;
|
||||
// font-family: 'Courier';
|
||||
font-family: $buffer-font;
|
||||
font-weight: bold;
|
||||
background: #EEE;
|
||||
|
||||
background: #fdfdfd;
|
||||
text-transform: uppercase;
|
||||
align-self: center;
|
||||
transition: all 300ms ease-in-out;
|
||||
|
||||
span {
|
||||
|
|
@ -277,27 +408,29 @@ i[class*="ri-"] {
|
|||
justify-content: center;
|
||||
flex-direction: column-reverse;
|
||||
align-items: center;
|
||||
width: 50vw;
|
||||
width: 100%;
|
||||
height: 150px;
|
||||
margin-bottom: 20px;
|
||||
font-family: $buffer-font;
|
||||
font-weight: bold;
|
||||
|
||||
#alphanumeric-container {
|
||||
// border-left: 2px solid #000;
|
||||
background: #fdfdfd;
|
||||
display: flex;
|
||||
padding-left: 5px;
|
||||
height: 50px;
|
||||
height: 3rem;
|
||||
min-width: 250px;
|
||||
margin-bottom: 10px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border-radius: 4px;
|
||||
// box-shadow: $main-box-shadow-light;
|
||||
box-shadow: $main-box-shadow-light;
|
||||
// box-shadow: $morseCard-shadow-light;
|
||||
|
||||
#alphanumeric {
|
||||
font-size: 40px;
|
||||
font-size: 3rem;
|
||||
background-color: transparent;
|
||||
|
||||
|
||||
|
|
@ -444,10 +577,26 @@ i[class*="ri-"] {
|
|||
// font-size: 1.5em;
|
||||
// }
|
||||
|
||||
#morseHistory-textbox {
|
||||
border: 1px solid cyan;
|
||||
display: flex;
|
||||
height: 150px;
|
||||
width: 75%;
|
||||
padding: 15px;
|
||||
// background: #ddd;
|
||||
font-family: Courier;
|
||||
font-size: 1.5rem;
|
||||
span {
|
||||
background: #CCC;
|
||||
margin-right: 0.7rem;
|
||||
height: 1.5rem;
|
||||
}
|
||||
}
|
||||
#morseHistory {
|
||||
// /* border: 1px solid blue; */
|
||||
border: 1px solid purple;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
|
||||
.morseCard:nth-child(1){
|
||||
opacity: 100%;
|
||||
|
|
@ -487,22 +636,30 @@ i[class*="ri-"] {
|
|||
justify-content: center;
|
||||
/* border: 1px solid orange; */
|
||||
margin-bottom: 2px;
|
||||
font-size: 1.5rem;
|
||||
font-size: 1.7rem;
|
||||
font-family: $buffer-font;
|
||||
/* width: 100%; */
|
||||
|
||||
|
||||
|
||||
div div {
|
||||
cursor: default;
|
||||
padding: 5px;
|
||||
padding: 3px;
|
||||
margin: 2px;
|
||||
background: #fdfdfd;
|
||||
// width: 50%;
|
||||
white-space: nowrap;
|
||||
border-radius: 3px;
|
||||
box-shadow: $morseCard-shadow-light;
|
||||
line-height: 1.2rem;
|
||||
line-height: 1.7rem;
|
||||
display: flex;
|
||||
|
||||
span.morseError {
|
||||
background: rgba(255,0,0,0.4);
|
||||
height: 1.7rem;
|
||||
// background: blue;
|
||||
color: rgb(120, 0, 0);
|
||||
border-radius: 5px;
|
||||
// text-decoration: line-through;
|
||||
}
|
||||
}
|
||||
.ditDahs-container, .alphanumeric-container {
|
||||
display: flex;
|
||||
|
|
|
|||
Loading…
Reference in a new issue