mirror of
https://github.com/genemecija/learn-morse-code.git
synced 2026-01-09 10:09:58 +01:00
Morse translator, button changes
This commit is contained in:
Gene Mecija
parent
2f19154e90
commit
e792f1c2be
|
|
@ -25,6 +25,7 @@ import { GameClockContextProvider } from './contexts/gameClockContext';
|
|||
import ChallengeOverlay from './components/ChallengeOverlay';
|
||||
import { KeyTypeContextProvider } from './contexts/keyTypeContext';
|
||||
import { WPMContextProvider } from './contexts/wpmContext';
|
||||
import PlayMorseInput from './components/PlayMorseInput';
|
||||
|
||||
export default React.memo(function App() {
|
||||
|
||||
|
|
@ -50,7 +51,7 @@ export default React.memo(function App() {
|
|||
<WordFeederContextProvider>
|
||||
<GameClockContextProvider>
|
||||
<div className="sidebar" id="left">
|
||||
<div id="settings-icon" onClick={toggleRight}><i class="ri-settings-3-fill"></i></div>
|
||||
<div id="settings-icon" onClick={toggleRight}><i class="ri-settings-3-line"></i></div>
|
||||
<div id="mainOptions">
|
||||
<h1>Options</h1>
|
||||
<ModePicker />
|
||||
|
|
@ -60,6 +61,7 @@ export default React.memo(function App() {
|
|||
<WordListPicker />
|
||||
} */}
|
||||
</div>
|
||||
<PlayMorseInput />
|
||||
<Legend />
|
||||
</div>
|
||||
<div id="main-interface">
|
||||
|
|
@ -86,6 +88,7 @@ export default React.memo(function App() {
|
|||
}
|
||||
|
||||
<MorseButtons />
|
||||
<span id='tip'>Tap the button to use the telegraph.</span>
|
||||
</div>
|
||||
<div className="sidebar" id="right">
|
||||
<div id="info-icon" onClick={toggleLeft}><i class="ri-information-line"></i></div>
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@ export default React.memo(function Info() {
|
|||
|
||||
return (
|
||||
<div id="info">
|
||||
<h1>Info</h1>
|
||||
<h1>Morse Code</h1>
|
||||
<p>Morse code is a method of communication via short and long tones with standard spacing between each tone.</p>
|
||||
|
||||
<h2>Dits and Dahs</h2>
|
||||
|
|
@ -39,8 +39,7 @@ export default React.memo(function Info() {
|
|||
<p>The instrument used to send morse code is called the key.</p>
|
||||
|
||||
<center><img src={straight_key} alt="Straight Key" /></center>
|
||||
<p><b>Straight Keys</b> use a single button and generates tones when pressed down. Straight keys require greater accuracy as you control the dits, dahs, and spacing manually.</p><br/>
|
||||
|
||||
<p><b>Straight Keys</b> use a single button and generates tones when pressed down. Straight keys require greater accuracy as you control the dits, dahs, and spacing manually.</p>
|
||||
<center><img src={electronic_key} alt="Electronic Key"></img></center>
|
||||
<p><b>Electronic Keys</b> automatically generate dits or dahs of appropriate length. The Electronic Keyer used here is an Iambic keyer. It uses two paddles, one for dits, one for dahs. Switch between the two at the appropriate times to build letters.</p>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,6 @@
|
|||
import React, { useContext } from "react"
|
||||
import React from "react"
|
||||
import morseCode from '../data/morse-code.json'
|
||||
import useMorsePlayer from "../hooks/useMorsePlayer";
|
||||
import { WPMContext } from "../contexts/wpmContext.js";
|
||||
|
||||
function Legend() {
|
||||
|
||||
|
|
@ -35,11 +34,41 @@ function Legend() {
|
|||
return morse
|
||||
}
|
||||
|
||||
const legend = Object.keys(morseCode).map((morse, index) =>
|
||||
<button key={"legend_item_"+index} className="item" onClick={handleClick}>
|
||||
<span className="alpha" key={"legend_btn_"+index}>{morse.toUpperCase()}</span>
|
||||
<span className="morse" key={"legend_spn_"+index}>{morseCode[morse]}</span>
|
||||
</button>
|
||||
const numbers = Object.keys(morseCode).map((morse, index) =>
|
||||
{
|
||||
if (index < 10) {
|
||||
return (
|
||||
<button key={"legend_item_"+index} className="item" onClick={handleClick}>
|
||||
<span className="alpha" key={"legend_btn_"+index}>{morse.toUpperCase()}</span>
|
||||
<span className="morse" key={"legend_spn_"+index}>{morseCode[morse]}</span>
|
||||
</button>
|
||||
)
|
||||
}
|
||||
}
|
||||
)
|
||||
const letters = Object.keys(morseCode).map((morse, index) =>
|
||||
{
|
||||
if (index >= 10 && index < 36) {
|
||||
return (
|
||||
<button key={"legend_item_"+index} className="item" onClick={handleClick}>
|
||||
<span className="alpha" key={"legend_btn_"+index}>{morse.toUpperCase()}</span>
|
||||
<span className="morse" key={"legend_spn_"+index}>{morseCode[morse]}</span>
|
||||
</button>
|
||||
)
|
||||
}
|
||||
}
|
||||
)
|
||||
const special = Object.keys(morseCode).map((morse, index) =>
|
||||
{
|
||||
if (index > 36) {
|
||||
return (
|
||||
<button key={"legend_item_"+index} className="item" onClick={handleClick}>
|
||||
<span className="alpha" key={"legend_btn_"+index}>{morse.toUpperCase()}</span>
|
||||
<span className="morse" key={"legend_spn_"+index}>{morseCode[morse]}</span>
|
||||
</button>
|
||||
)
|
||||
}
|
||||
}
|
||||
)
|
||||
|
||||
return (
|
||||
|
|
@ -48,12 +77,9 @@ function Legend() {
|
|||
<h1>Morse Code</h1>
|
||||
</div>
|
||||
<div id="legend-items">
|
||||
{legend}
|
||||
<div>
|
||||
<button id="test" onClick={handleClick}>Anya</button>
|
||||
<button id="test" onClick={handleClick}>Alexandra</button>
|
||||
<button id="test" onClick={handleClick}>Paris</button>
|
||||
</div>
|
||||
<div id="letters">{letters}</div>
|
||||
<div id="numbers">{numbers}</div>
|
||||
<div id="special">{special}</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
|
|
|
|||
|
|
@ -5,12 +5,14 @@ import {MorseBufferContext} from "../contexts/morseBufferContext"
|
|||
|
||||
export default (function MorseHistoryTextBox() {
|
||||
|
||||
const {morseWords} = useContext(MorseBufferContext)
|
||||
const {morseWords, setMorseWords} = useContext(MorseBufferContext)
|
||||
|
||||
let text = ''
|
||||
let span = []
|
||||
|
||||
console.log('morseWords', morseWords);
|
||||
function clearHistory() {
|
||||
setMorseWords([])
|
||||
}
|
||||
|
||||
morseWords.forEach((word, index) => {
|
||||
if (word.includes(' ')) {
|
||||
|
|
@ -18,9 +20,7 @@ export default (function MorseHistoryTextBox() {
|
|||
word.split(' ').forEach(letter => {
|
||||
if (morseCode[letter] === undefined) {
|
||||
newWord += '[?]'
|
||||
console.log('undefined', letter);
|
||||
} else {
|
||||
console.log('here1');
|
||||
newWord += morseCode[letter].toUpperCase()
|
||||
}
|
||||
})
|
||||
|
|
@ -41,6 +41,9 @@ export default (function MorseHistoryTextBox() {
|
|||
// } catch {}
|
||||
|
||||
return (
|
||||
<div id="morseHistory-textbox">{text}</div>
|
||||
<>
|
||||
<div id="morseHistory-textbox">{text}</div>
|
||||
<button onClick={clearHistory}>Clear History</button>
|
||||
</>
|
||||
)
|
||||
})
|
||||
63
src/components/PlayMorseInput.js
Normal file
63
src/components/PlayMorseInput.js
Normal file
|
|
@ -0,0 +1,63 @@
|
|||
import React, { useContext, useState, useEffect } from "react"
|
||||
import morseCode from '../data/morse-code.json'
|
||||
import useMorsePlayer from "../hooks/useMorsePlayer";
|
||||
import { WPMContext } from "../contexts/wpmContext.js";
|
||||
|
||||
export default (function PlayMorseInput() {
|
||||
|
||||
const { playMorseWord } = useMorsePlayer()
|
||||
const [inputValue, setInputValue] = useState('')
|
||||
const [morseTranslation, setMorseTranslation] = useState('')
|
||||
|
||||
function handleChange(e) {
|
||||
e.preventDefault()
|
||||
|
||||
setInputValue(e.target.value)
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
let arr = Array.from(inputValue.trim().toLowerCase())
|
||||
let morse = arr.map(item => {
|
||||
if (item === ' ') {
|
||||
return '/'
|
||||
} else {
|
||||
let r = convertWordToMorse(item)
|
||||
return (r === 'undefined' ? '?' : r + ' ')
|
||||
}
|
||||
})
|
||||
let a = morse.map(i => i.trim()).join(' ').replace(/ \/ /g,'/').replace(/ \?/g,'?')
|
||||
console.log(a);
|
||||
setMorseTranslation(a)
|
||||
|
||||
}, [inputValue])
|
||||
|
||||
function handlePlay() {
|
||||
playMorseWord(morseTranslation)
|
||||
}
|
||||
|
||||
function convertWordToMorse(word) {
|
||||
let morse = ''
|
||||
for (let i in word) {
|
||||
morse += morseCode[word[i].toLowerCase()]
|
||||
// morse += ' '
|
||||
}
|
||||
return morse
|
||||
}
|
||||
|
||||
|
||||
return (
|
||||
<div id="playMorseInput">
|
||||
<div id="title">
|
||||
<h1>Translate To Morse</h1>
|
||||
</div>
|
||||
<div id="input">
|
||||
<input type="text" id='morseInput' value={inputValue} onChange={handleChange} placeholder="Type here." maxLength="25"/> Listen <i className="ri-volume-up-fill" onClick={handlePlay}></i>
|
||||
</div>
|
||||
<div id="morseTranslation">
|
||||
<span id="morseTrans">
|
||||
{morseTranslation === '' ? 'Morse translation will appear here.' : morseTranslation.replace(/\?/g,'[?]').replace(/\] /g,']')}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
})
|
||||
196
src/css/App.css
196
src/css/App.css
|
|
@ -15,7 +15,7 @@ button {
|
|||
html, body {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
background: #f1f1f1;
|
||||
background: #eee;
|
||||
}
|
||||
|
||||
#root {
|
||||
|
|
@ -47,7 +47,7 @@ html, body {
|
|||
background: #333;
|
||||
font-family: "Roboto", sans-serif;
|
||||
font-size: 2.5em;
|
||||
color: #f1f1f1;
|
||||
color: #eee;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
|
|
@ -74,7 +74,7 @@ html, body {
|
|||
}
|
||||
|
||||
#main-content .sidebar#left {
|
||||
background: #f1f1f1;
|
||||
background: #eee;
|
||||
-webkit-box-shadow: 3px 0px 5px rgba(0, 0, 0, 0.2);
|
||||
box-shadow: 3px 0px 5px rgba(0, 0, 0, 0.2);
|
||||
display: -webkit-box;
|
||||
|
|
@ -91,10 +91,9 @@ html, body {
|
|||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
height: calc(100% - 5em);
|
||||
min-width: 400px;
|
||||
min-width: 455px;
|
||||
width: 30%;
|
||||
margin-top: 50px;
|
||||
padding: 1.5em;
|
||||
position: fixed;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
|
|
@ -103,13 +102,13 @@ html, body {
|
|||
transition: all 500ms ease-in-out;
|
||||
}
|
||||
|
||||
#main-content .sidebar#left #mainOptions, #main-content .sidebar#left #legend {
|
||||
#main-content .sidebar#left #mainOptions, #main-content .sidebar#left #playMorseInput, #main-content .sidebar#left #legend {
|
||||
-webkit-transition: all 500ms ease-in-out;
|
||||
transition: all 500ms ease-in-out;
|
||||
opacity: 100%;
|
||||
}
|
||||
|
||||
#main-content .sidebar#left #mainOptions h1, #main-content .sidebar#left #legend h1 {
|
||||
#main-content .sidebar#left #mainOptions h1, #main-content .sidebar#left #playMorseInput h1, #main-content .sidebar#left #legend h1 {
|
||||
margin-bottom: 0.3em;
|
||||
}
|
||||
|
||||
|
|
@ -140,6 +139,19 @@ html, body {
|
|||
right: 5px;
|
||||
-webkit-transition: all 500ms ease-in-out;
|
||||
transition: all 500ms ease-in-out;
|
||||
-webkit-transition: -webkit-transform 200ms ease-in-out;
|
||||
transition: -webkit-transform 200ms ease-in-out;
|
||||
transition: transform 200ms ease-in-out;
|
||||
transition: transform 200ms ease-in-out, -webkit-transform 200ms ease-in-out;
|
||||
}
|
||||
|
||||
#main-content .sidebar#left #settings-icon:hover {
|
||||
-webkit-transform: scale(1.1);
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
#main-content .sidebar#left #settings-icon:hover i {
|
||||
color: #333;
|
||||
}
|
||||
|
||||
#main-content .sidebar#left #settings-icon i {
|
||||
|
|
@ -147,7 +159,7 @@ html, body {
|
|||
}
|
||||
|
||||
#main-content .sidebar#right {
|
||||
background: #f1f1f1;
|
||||
background: #eee;
|
||||
-webkit-box-shadow: -3px 0px 5px rgba(0, 0, 0, 0.2);
|
||||
box-shadow: -3px 0px 5px rgba(0, 0, 0, 0.2);
|
||||
display: -webkit-box;
|
||||
|
|
@ -222,9 +234,22 @@ html, body {
|
|||
position: absolute;
|
||||
top: 10px;
|
||||
left: 5px;
|
||||
z-index: 1010;
|
||||
-webkit-transition: all 500ms ease-in-out;
|
||||
transition: all 500ms ease-in-out;
|
||||
z-index: 1010;
|
||||
-webkit-transition: -webkit-transform 200ms ease-in-out;
|
||||
transition: -webkit-transform 200ms ease-in-out;
|
||||
transition: transform 200ms ease-in-out;
|
||||
transition: transform 200ms ease-in-out, -webkit-transform 200ms ease-in-out;
|
||||
}
|
||||
|
||||
#main-content .sidebar#right #info-icon:hover {
|
||||
-webkit-transform: scale(1.1);
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
#main-content .sidebar#right #info-icon:hover i {
|
||||
color: #333;
|
||||
}
|
||||
|
||||
#main-content .sidebar#right #info-icon i {
|
||||
|
|
@ -232,6 +257,7 @@ html, body {
|
|||
}
|
||||
|
||||
#main-content #main-interface {
|
||||
border: 1px solid blue;
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
|
|
@ -242,9 +268,6 @@ html, body {
|
|||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
-webkit-box-pack: start;
|
||||
-ms-flex-pack: start;
|
||||
justify-content: flex-start;
|
||||
height: 100%;
|
||||
min-width: 600px;
|
||||
width: 40%;
|
||||
|
|
@ -260,7 +283,7 @@ html, body {
|
|||
background: #333;
|
||||
font-family: "Roboto", sans-serif;
|
||||
font-size: 1em;
|
||||
color: #f1f1f1;
|
||||
color: #eee;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
|
|
@ -286,9 +309,9 @@ i[class*="ri-"] {
|
|||
-webkit-box-align: start;
|
||||
-ms-flex-align: start;
|
||||
align-items: flex-start;
|
||||
width: 380px;
|
||||
width: 450px;
|
||||
max-width: 95vw;
|
||||
height: 200px;
|
||||
font-family: "Roboto", sans-serif;
|
||||
}
|
||||
|
||||
#mainOptions .mode-picker {
|
||||
|
|
@ -298,8 +321,8 @@ i[class*="ri-"] {
|
|||
display: flex;
|
||||
-ms-flex-item-align: start;
|
||||
align-self: flex-start;
|
||||
-ms-flex-line-pack: center;
|
||||
align-content: center;
|
||||
-ms-flex-line-pack: start;
|
||||
align-content: flex-start;
|
||||
-webkit-box-pack: start;
|
||||
-ms-flex-pack: start;
|
||||
justify-content: flex-start;
|
||||
|
|
@ -308,6 +331,13 @@ i[class*="ri-"] {
|
|||
#mainOptions .mode-picker div {
|
||||
padding: 5px;
|
||||
height: 2.4em;
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-pack: start;
|
||||
-ms-flex-pack: start;
|
||||
justify-content: flex-start;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
#mainOptions .mode-picker #title {
|
||||
|
|
@ -328,9 +358,9 @@ i[class*="ri-"] {
|
|||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-pack: justify;
|
||||
-ms-flex-pack: justify;
|
||||
justify-content: space-between;
|
||||
-webkit-box-pack: space-evenly;
|
||||
-ms-flex-pack: space-evenly;
|
||||
justify-content: space-evenly;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
|
|
@ -374,15 +404,15 @@ i[class*="ri-"] {
|
|||
}
|
||||
|
||||
#mainOptions .mode-picker button {
|
||||
background: #f1f1f1;
|
||||
-webkit-box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.3), 0px -1px 1px white;
|
||||
box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.3), 0px -1px 1px white;
|
||||
background: #eee;
|
||||
-webkit-box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.35), 0px -1px 1px white;
|
||||
box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.35), 0px -1px 1px white;
|
||||
border-radius: 3px;
|
||||
border: 0px;
|
||||
padding: 0.3em;
|
||||
margin-left: 10px;
|
||||
margin-right: 10px;
|
||||
font-size: 0.9em;
|
||||
font-size: 0.85em;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
|
|
@ -391,9 +421,27 @@ i[class*="ri-"] {
|
|||
box-shadow: inset 0px 2px 2px rgba(0, 0, 0, 0.3), inset 0px -1px 1px white;
|
||||
}
|
||||
|
||||
#playMorseInput {
|
||||
width: 450px;
|
||||
}
|
||||
|
||||
#playMorseInput #input input {
|
||||
padding-left: 3px;
|
||||
border-radius: 3px;
|
||||
border: 1px solid #ddd;
|
||||
height: 1.5rem;
|
||||
font-size: 0.9em;
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
#playMorseInput #morseTrans {
|
||||
font-size: 0.9em;
|
||||
font-family: "Courier", monospace;
|
||||
}
|
||||
|
||||
#legend {
|
||||
background: #f1f1f1;
|
||||
width: 380px;
|
||||
background: #eee;
|
||||
width: 450px;
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
|
|
@ -408,7 +456,7 @@ i[class*="ri-"] {
|
|||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
#legend #legend-items {
|
||||
#legend #legend-items div {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
|
|
@ -418,17 +466,28 @@ i[class*="ri-"] {
|
|||
-ms-flex-pack: justify;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
#legend #legend-items .item, #legend #legend-items span {
|
||||
#legend #legend-items div .item, #legend #legend-items div span {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#legend #legend-items .item {
|
||||
font-family: "Courier", monospace;
|
||||
font-size: 0.9em;
|
||||
border: 1px solid #ccc;
|
||||
#legend #legend-items div#letters .item {
|
||||
width: 17%;
|
||||
}
|
||||
|
||||
#legend #legend-items div#numbers .item {
|
||||
width: 18%;
|
||||
}
|
||||
|
||||
#legend #legend-items div#special .item {
|
||||
width: 20%;
|
||||
}
|
||||
|
||||
#legend #legend-items div .item {
|
||||
font-family: "Courier", monospace;
|
||||
font-size: 0.85em;
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
|
|
@ -439,37 +498,38 @@ i[class*="ri-"] {
|
|||
padding: 0.3em;
|
||||
border: 0px;
|
||||
border-radius: 2px;
|
||||
-webkit-box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.3), 0px -1px 1px white;
|
||||
box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.3), 0px -1px 1px white;
|
||||
-webkit-box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.35), 0px -1px 1px white;
|
||||
box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.35), 0px -1px 1px white;
|
||||
}
|
||||
|
||||
#legend #legend-items .item:active {
|
||||
#legend #legend-items div .item: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 #legend-items .item span:first-child {
|
||||
#legend #legend-items div .item span:first-child {
|
||||
display: inline-block;
|
||||
padding: 1px;
|
||||
padding-left: 5px;
|
||||
padding-right: 5px;
|
||||
background: #DDD;
|
||||
width: 1.5em;
|
||||
background: #e0e0e0;
|
||||
border-radius: 2px;
|
||||
font-size: 1.3em;
|
||||
font-size: 1.2em;
|
||||
}
|
||||
|
||||
#legend #legend-items .item span:last-child {
|
||||
#legend #legend-items div .item span:last-child {
|
||||
display: inline-block;
|
||||
padding-left: 5px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#morseButton {
|
||||
width: 400px;
|
||||
height: 60px;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
margin-top: 30px;
|
||||
margin-bottom: 10px;
|
||||
border-radius: 5px;
|
||||
border-radius: 50%;
|
||||
-ms-flex-item-align: center;
|
||||
align-self: center;
|
||||
display: -webkit-box;
|
||||
|
|
@ -481,8 +541,8 @@ i[class*="ri-"] {
|
|||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
-webkit-box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.3), 0px -1px 1px white;
|
||||
box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.3), 0px -1px 1px white;
|
||||
-webkit-box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.35), 0px -1px 1px white;
|
||||
box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.35), 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;
|
||||
|
|
@ -499,8 +559,8 @@ i[class*="ri-"] {
|
|||
#morseButton button {
|
||||
font-size: 1rem;
|
||||
color: transparent;
|
||||
width: 200px;
|
||||
height: 60px;
|
||||
width: 50px;
|
||||
height: 100px;
|
||||
background: #f4f4f4;
|
||||
margin: 0px;
|
||||
border: 0px;
|
||||
|
|
@ -514,14 +574,14 @@ i[class*="ri-"] {
|
|||
color: #888;
|
||||
font-size: 1rem;
|
||||
font-weight: bold;
|
||||
width: calc($button-height+5px);
|
||||
height: 60px;
|
||||
-webkit-box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.3), 0px -1px 1px white;
|
||||
box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.3), 0px -1px 1px white;
|
||||
-webkit-box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.35), 0px -1px 1px white;
|
||||
box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.35), 0px -1px 1px white;
|
||||
}
|
||||
|
||||
#morseButton button#left {
|
||||
border-radius: 5px 0 0 5px;
|
||||
border-radius: 50px 0 0 50px;
|
||||
width: 50%;
|
||||
background: red;
|
||||
}
|
||||
|
||||
#morseButton button#left.showPaddles {
|
||||
|
|
@ -530,7 +590,9 @@ i[class*="ri-"] {
|
|||
}
|
||||
|
||||
#morseButton button#right {
|
||||
border-radius: 0 5px 5px 0;
|
||||
width: 50%;
|
||||
background: blue;
|
||||
border-radius: 0 50px 50px 0;
|
||||
}
|
||||
|
||||
#morseButton button#right.showPaddles {
|
||||
|
|
@ -556,7 +618,6 @@ i[class*="ri-"] {
|
|||
font-weight: bold;
|
||||
color: #aaa;
|
||||
font-size: 0.7rem;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
#paddleText {
|
||||
|
|
@ -653,9 +714,9 @@ i[class*="ri-"] {
|
|||
}
|
||||
|
||||
#challenge-overlay #challengeReady button {
|
||||
background: #f1f1f1;
|
||||
-webkit-box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.3), 0px -1px 1px white;
|
||||
box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.3), 0px -1px 1px white;
|
||||
background: #eee;
|
||||
-webkit-box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.35), 0px -1px 1px white;
|
||||
box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.35), 0px -1px 1px white;
|
||||
border-radius: 3px;
|
||||
border: 0px;
|
||||
padding: 0.3em;
|
||||
|
|
@ -797,8 +858,8 @@ i[class*="ri-"] {
|
|||
margin-bottom: 10px;
|
||||
margin-top: 25px;
|
||||
border-radius: 3px;
|
||||
-webkit-box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.3), 0px -1px 1px white;
|
||||
box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.3), 0px -1px 1px white;
|
||||
-webkit-box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.35), 0px -1px 1px white;
|
||||
box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.35), 0px -1px 1px white;
|
||||
font-size: 4rem;
|
||||
font-family: "Courier Prime", Courier, monospace;
|
||||
font-weight: bold;
|
||||
|
|
@ -834,6 +895,11 @@ i[class*="ri-"] {
|
|||
background: #5ae65a;
|
||||
}
|
||||
|
||||
#tip {
|
||||
font-size: 2rem;
|
||||
color: #aaa;
|
||||
}
|
||||
|
||||
#morseBufferDisplay {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
|
|
@ -856,8 +922,8 @@ i[class*="ri-"] {
|
|||
}
|
||||
|
||||
#morseBufferDisplay #overlay {
|
||||
-webkit-box-shadow: inset 20px 0px 20px -5px #f1f1f1;
|
||||
box-shadow: inset 20px 0px 20px -5px #f1f1f1;
|
||||
-webkit-box-shadow: inset 20px 0px 20px -5px #eee;
|
||||
box-shadow: inset 20px 0px 20px -5px #eee;
|
||||
position: absolute;
|
||||
display: inline-block;
|
||||
top: 0;
|
||||
|
|
@ -1100,8 +1166,8 @@ i[class*="ri-"] {
|
|||
}
|
||||
|
||||
#morseHistory #overlay {
|
||||
-webkit-box-shadow: inset 20px 0px 20px #f1f1f1, inset -20px 0px 20px #f1f1f1, inset 0px -100px 100px #f1f1f1;
|
||||
box-shadow: inset 20px 0px 20px #f1f1f1, inset -20px 0px 20px #f1f1f1, inset 0px -100px 100px #f1f1f1;
|
||||
-webkit-box-shadow: inset 20px 0px 20px #eee, inset -20px 0px 20px #eee, inset 0px -100px 100px #eee;
|
||||
box-shadow: inset 20px 0px 20px #eee, inset -20px 0px 20px #eee, inset 0px -100px 100px #eee;
|
||||
position: absolute;
|
||||
display: inline-block;
|
||||
top: 0;
|
||||
|
|
@ -1186,7 +1252,7 @@ i[class*="ri-"] {
|
|||
|
||||
.morseCard .ditDahs span.space {
|
||||
border-radius: 3px;
|
||||
background: #f1f1f1;
|
||||
background: #eee;
|
||||
opacity: 0.5;
|
||||
width: 3px;
|
||||
margin-left: 4px;
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -43,5 +43,14 @@
|
|||
"/": "-..-.",
|
||||
"@": ".--.-.",
|
||||
"(": "-.--.",
|
||||
")": "-.--.-"
|
||||
")": "-.--.-",
|
||||
"'": ".----.",
|
||||
"\"": ".-..-.",
|
||||
"&": ".-...",
|
||||
":": "---...",
|
||||
";": "-.-.-.",
|
||||
"=": "-...-",
|
||||
"+": ".-.-.",
|
||||
"_": "..--.-",
|
||||
"$": "...-..-"
|
||||
}
|
||||
|
|
@ -43,5 +43,14 @@
|
|||
"-..-.": "/",
|
||||
".--.-.": "@",
|
||||
"-.--.": "(",
|
||||
"-.--.-": ")"
|
||||
}
|
||||
"-.--.-": ")",
|
||||
".----.": "'",
|
||||
".-..-.": "\"",
|
||||
".-...": "&",
|
||||
"---...": ": ",
|
||||
"-.-.-.": ";",
|
||||
"-...-": "=",
|
||||
".-.-.": "+",
|
||||
"..--.-": "_",
|
||||
"...-..-": "$"
|
||||
}
|
||||
|
|
@ -239,6 +239,9 @@ function useElectronicKey() {
|
|||
|
||||
paddlesReleasedSimultaneously = false
|
||||
|
||||
if ((event.keyCode === 188 || event.keyCode === 190) && document.activeElement.id === 'morseInput') {
|
||||
return
|
||||
}
|
||||
if (event.repeat) { return }
|
||||
|
||||
if (event.keyCode === 188 || event.target.id === "left") {
|
||||
|
|
@ -269,7 +272,6 @@ function useElectronicKey() {
|
|||
// event.preventDefault()
|
||||
|
||||
// if (!insideBufferDisplay) {return}
|
||||
|
||||
if (event.keyCode === 188 || event.target.id === "left") {
|
||||
document.querySelector('.paddle#left').classList.remove('active')
|
||||
|
||||
|
|
|
|||
|
|
@ -50,10 +50,16 @@ function useStraightKey() {
|
|||
|
||||
console.log(event.keyCode);
|
||||
|
||||
if (event.keyCode === 32 && document.activeElement.id === 'wordlist-picker') {
|
||||
event.preventDefault()
|
||||
document.activeElement.blur()
|
||||
if (event.keyCode === 32) {
|
||||
if (document.activeElement.id === 'wordlist-picker') {
|
||||
event.preventDefault()
|
||||
document.activeElement.blur()
|
||||
}
|
||||
else if (document.activeElement.id === 'morseInput') {
|
||||
return
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
if (isRunning) {
|
||||
|
|
|
|||
|
|
@ -7,12 +7,13 @@ $buffer-font: 'Courier Prime', Courier, monospace;
|
|||
// $buffer-font: 'Courier', monospace;
|
||||
$ditDah-font: 'Courier', monospace;
|
||||
|
||||
$main-bg-color-light: #f1f1f1;
|
||||
// $main-bg-color-light: #f1f1f1;
|
||||
$main-bg-color-light: #eee;
|
||||
$main-font-color-light: #333;
|
||||
$correct-bg-color: rgba(90,230,90,1);
|
||||
|
||||
$morseCard-shadow-light: 0px 3px 3px rgba(0, 0, 0, 0.2);
|
||||
$main-box-shadow-light: 0px 3px 3px rgba(0, 0, 0, 0.3), 0px -1px 1px rgba(255, 255, 255, 1);
|
||||
$main-box-shadow-light: 0px 3px 3px rgba(0, 0, 0, 0.35), 0px -1px 1px rgba(255, 255, 255, 1);
|
||||
$main-box-shadow-light-selected: inset 0px 2px 2px rgba(0, 0, 0, 0.3), inset 0px -1px 1px rgba(255, 255, 255, 1);
|
||||
$main-box-shadow-dark: 0px 3px 3px rgba(0, 0, 0, 0.2), 0px -1px 1px rgba(255, 255, 255, 0.1);
|
||||
$main-box-shadow-dark-selected: inset 0px 2px 2px rgba(0, 0, 0, 0.2), inset 0px -1px 1px rgba(255, 255, 255, 0.1);
|
||||
|
|
@ -88,10 +89,10 @@ html, body {
|
|||
align-items: center;
|
||||
// height: 100%;
|
||||
height: calc(100% - 5em);
|
||||
min-width: 400px;
|
||||
min-width: 455px;
|
||||
width: 30%;
|
||||
margin-top: 50px;
|
||||
padding: 1.5em;
|
||||
// padding: 1.5em;
|
||||
|
||||
position: fixed;
|
||||
top: 0px;
|
||||
|
|
@ -101,7 +102,7 @@ html, body {
|
|||
|
||||
transition: all 500ms ease-in-out;
|
||||
|
||||
#mainOptions, #legend {
|
||||
#mainOptions, #playMorseInput, #legend {
|
||||
h1 {
|
||||
margin-bottom: 0.3em;
|
||||
}
|
||||
|
|
@ -129,6 +130,11 @@ html, body {
|
|||
top: 3px;
|
||||
right: 5px;
|
||||
transition: all 500ms ease-in-out;
|
||||
transition: transform 200ms ease-in-out;
|
||||
&:hover {
|
||||
transform: scale(1.1);
|
||||
i {color: #333;}
|
||||
}
|
||||
i {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
|
@ -201,20 +207,25 @@ html, body {
|
|||
position: absolute;
|
||||
top: 10px;
|
||||
left: 5px;
|
||||
transition: all 500ms ease-in-out;
|
||||
z-index: 1010;
|
||||
transition: all 500ms ease-in-out;
|
||||
transition: transform 200ms ease-in-out;
|
||||
&:hover {
|
||||
transform: scale(1.1);
|
||||
i {color: #333;}
|
||||
}
|
||||
i {
|
||||
font-size: 2rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
#main-interface {
|
||||
// border: 1px solid blue;
|
||||
border: 1px solid blue;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
// justify-content: flex-start;
|
||||
// flex-grow: 1;
|
||||
height: 100%;
|
||||
min-width: 600px;
|
||||
|
|
@ -252,22 +263,27 @@ i[class*="ri-"] {
|
|||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
width: 380px;
|
||||
width: 450px;
|
||||
max-width: 95vw;
|
||||
height: 200px;
|
||||
// height: 200px;
|
||||
font-family: $main-font;
|
||||
// border: 1px solid red;
|
||||
|
||||
.mode-picker {
|
||||
// border: 1px solid green;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
// flex-direction: column;
|
||||
align-self: flex-start;
|
||||
align-content: center;
|
||||
align-content: flex-start;
|
||||
justify-content: flex-start;
|
||||
|
||||
div {
|
||||
padding: 5px;
|
||||
height: 2.4em;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
#title {
|
||||
font-weight: bold;
|
||||
|
|
@ -283,7 +299,7 @@ i[class*="ri-"] {
|
|||
#buttons {
|
||||
// border: 1px solid blue;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
justify-content: space-evenly;
|
||||
align-items: center;
|
||||
}
|
||||
#input {
|
||||
|
|
@ -326,7 +342,7 @@ i[class*="ri-"] {
|
|||
margin-left: 10px;
|
||||
margin-right: 10px;
|
||||
|
||||
font-size: 0.9em;
|
||||
font-size: 0.85em;
|
||||
color: $main-font-color-light;
|
||||
|
||||
&.selected {
|
||||
|
|
@ -336,31 +352,59 @@ i[class*="ri-"] {
|
|||
}
|
||||
}
|
||||
|
||||
#playMorseInput {
|
||||
width: 450px;
|
||||
// border: 1px solid blue;
|
||||
|
||||
#input input {
|
||||
padding-left: 3px;
|
||||
border-radius: 3px;
|
||||
border: 1px solid #ddd;
|
||||
height: 1.5rem;
|
||||
font-size: 0.9em;
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
#morseTrans {
|
||||
font-size: 0.9em;
|
||||
font-family: $ditDah-font;
|
||||
}
|
||||
}
|
||||
|
||||
#legend {
|
||||
// border: 1px solid orange;
|
||||
background: $main-bg-color-light;
|
||||
width: 380px;
|
||||
width: 450px;
|
||||
|
||||
// height: 325px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-evenly;
|
||||
flex-wrap: wrap;
|
||||
|
||||
#legend-items {
|
||||
#legend-items div {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
margin-bottom: 10px;
|
||||
.item, span {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&#letters .item {
|
||||
width: 17%;
|
||||
}
|
||||
&#numbers .item {
|
||||
width: 18%;
|
||||
}
|
||||
&#special .item {
|
||||
width: 20%;
|
||||
}
|
||||
|
||||
.item {
|
||||
font-family: $ditDah-font;
|
||||
font-size: 0.9em;
|
||||
border: 1px solid #ccc;
|
||||
width: 20%;
|
||||
font-size: 0.85em;
|
||||
// height: 2em;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
@ -388,34 +432,39 @@ i[class*="ri-"] {
|
|||
// box-shadow: 0px 0px 2px rgba(0,0,0,0.3);
|
||||
// }
|
||||
// }
|
||||
|
||||
span:first-child {
|
||||
display: inline-block;
|
||||
padding: 1px;
|
||||
padding-left: 5px;
|
||||
padding-right: 5px;
|
||||
background: #DDD;
|
||||
width: 1.5em;
|
||||
background: #e0e0e0;
|
||||
border-radius: 2px;
|
||||
|
||||
font-size: 1.3em;
|
||||
// font-weight: bold;
|
||||
font-size: 1.2em;
|
||||
// width: 60%;
|
||||
// justify-content: center;
|
||||
// text-align: center;
|
||||
}
|
||||
span:last-child {
|
||||
// background: #08c;
|
||||
// font-family: $ditDah-font;
|
||||
display: inline-block;
|
||||
padding-left: 5px;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
$button-height: 60px;
|
||||
$button-diameter: 100px;
|
||||
$button-radius: 50px;
|
||||
#morseButton {
|
||||
width: 400px;
|
||||
height: $button-height;
|
||||
width: $button-diameter;
|
||||
height: $button-diameter;
|
||||
margin-top: 30px;
|
||||
margin-bottom: 10px;
|
||||
border-radius: 5px;
|
||||
border-radius: 50%;
|
||||
align-self: center;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
|
@ -435,8 +484,8 @@ $button-height: 60px;
|
|||
button {
|
||||
font-size: 1rem;
|
||||
color: transparent;
|
||||
width: 200px;
|
||||
height: $button-height;
|
||||
width: $button-radius;
|
||||
height: $button-diameter;
|
||||
// background: yellow;
|
||||
background: #f4f4f4;
|
||||
margin: 0px;
|
||||
|
|
@ -448,19 +497,23 @@ $button-height: 60px;
|
|||
color: #888;
|
||||
font-size: 1rem;
|
||||
font-weight: bold;
|
||||
width: calc($button-height+5px);
|
||||
height: $button-height;
|
||||
// width: calc($button-height+5px);
|
||||
// height: $button-height;
|
||||
box-shadow: $main-box-shadow-light;
|
||||
}
|
||||
&#left {
|
||||
border-radius: 5px 0 0 5px;
|
||||
border-radius: $button-radius 0 0 $button-radius;
|
||||
width: 50%;
|
||||
background: red;
|
||||
&.showPaddles{
|
||||
margin-right: 7px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
}
|
||||
&#right {
|
||||
border-radius: 0 5px 5px 0;
|
||||
width: 50%;
|
||||
background: blue;
|
||||
border-radius: 0 $button-radius $button-radius 0;
|
||||
&.showPaddles{
|
||||
margin-left: 7px;
|
||||
border-radius: 5px;
|
||||
|
|
@ -482,7 +535,6 @@ $button-height: 60px;
|
|||
font-weight: bold;
|
||||
color: #aaa;
|
||||
font-size: 0.7rem;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
#paddleText {
|
||||
width: 140px;
|
||||
|
|
@ -589,9 +641,6 @@ $button-height: 60px;
|
|||
// animation: hideOverlay 2000ms 1 ease-out forwards;
|
||||
z-index: -100;
|
||||
}
|
||||
.notify {
|
||||
|
||||
}
|
||||
|
||||
#challengeReady {
|
||||
position: relative;
|
||||
|
|
@ -762,7 +811,10 @@ $button-height: 60px;
|
|||
|
||||
}
|
||||
|
||||
|
||||
#tip {
|
||||
font-size: 2rem;
|
||||
color: #aaa;
|
||||
}
|
||||
|
||||
#morseBufferDisplay {
|
||||
// border: 1px solid green;
|
||||
|
|
@ -939,9 +991,6 @@ $button-height: 60px;
|
|||
font-size: 3rem;
|
||||
font-family: $ditDah-font;
|
||||
|
||||
span {
|
||||
|
||||
}
|
||||
span {
|
||||
// background: #fdfdfd;
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue