mirror of
https://github.com/genemecija/learn-morse-code.git
synced 2026-01-20 15:20:24 +01:00
Info updates, sidebar hide updates
This commit is contained in:
Gene Mecija
parent
e82779e6ed
commit
030a0386df
BIN
public/media/electronic_key.jpg
Normal file
BIN
public/media/electronic_key.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 48 KiB |
BIN
public/media/straight_key.jpg
Normal file
BIN
public/media/straight_key.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 54 KiB |
10
src/App.js
10
src/App.js
|
|
@ -32,9 +32,12 @@ export default React.memo(function App() {
|
|||
|
||||
const {gameMode} = useContext(GameModeContext)
|
||||
|
||||
function handleClick() {
|
||||
function toggleRight() {
|
||||
document.querySelector('.sidebar#right').classList.toggle('hide')
|
||||
}
|
||||
function toggleLeft() {
|
||||
document.querySelector('.sidebar#left').classList.toggle('hide')
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
|
|
@ -46,7 +49,7 @@ export default React.memo(function App() {
|
|||
<WordListPickerContextProvider>
|
||||
<WordFeederContextProvider>
|
||||
<GameClockContextProvider>
|
||||
<div className="sidebar" id="left">
|
||||
<div className="sidebar" id="left" onClick={toggleLeft}>
|
||||
<Info />
|
||||
</div>
|
||||
<div id="main-interface">
|
||||
|
|
@ -74,7 +77,8 @@ export default React.memo(function App() {
|
|||
|
||||
<MorseButtons />
|
||||
</div>
|
||||
<div className="sidebar" id="right" onClick={handleClick}>
|
||||
<div className="sidebar" id="right">
|
||||
<div id="settings" onClick={toggleRight}><i class="ri-settings-3-fill"></i></div>
|
||||
<div id="mainOptions">
|
||||
<h2>Options</h2>
|
||||
<ModePicker />
|
||||
|
|
|
|||
|
|
@ -1,27 +1,44 @@
|
|||
import React from "react"
|
||||
import useMorsePlayer from "../hooks/useMorsePlayer"
|
||||
|
||||
export default React.memo(function Info() {
|
||||
|
||||
function handleClick() {
|
||||
document.querySelector('.sidebar#left').classList.toggle('hide')
|
||||
}
|
||||
const {playMorseWord} = useMorsePlayer()
|
||||
|
||||
return (
|
||||
<div id="info" onClick={handleClick}>
|
||||
<div id="info">
|
||||
<h2>Info</h2>
|
||||
<p>Morse code is a method of communication via tones and silences of various lengths.</p>
|
||||
<ul>
|
||||
<h3>Dits and Dahs</h3>
|
||||
<li><b>Dit</b> - Denoted as a dot (.), the base unit of morse code.</li>
|
||||
<li><b>Dah</b> - Denoted as a dash (-), the length of 3 dits</li>
|
||||
<h3>Spacing</h3>
|
||||
<li><b>Intra-character Spacing</b> - Silence the length of 1 dit</li>
|
||||
<li><b>Inter-character Spacing</b> - Silence the length of 3 dits</li>
|
||||
<li><b>Inter-word Spacing</b> - Silence the length of 7 dits</li>
|
||||
</ul>
|
||||
<p>Morse code is a method of communication via short and long tones with standard spacing between each tone.</p>
|
||||
|
||||
<h3>Dits and Dahs</h3>
|
||||
<p>
|
||||
<b>Dit</b> <i className="ri-volume-up-fill" onClick={() => playMorseWord('.')}></i><br />
|
||||
Denoted as a dot (.), dits are short tones and are base unit of morse code.<br />
|
||||
<b>Dah</b> <i className="ri-volume-up-fill" onClick={() => playMorseWord('-')}></i><br />
|
||||
Denoted as a dash (-), dahs are long tones the length of three dits.
|
||||
</p>
|
||||
|
||||
<h3>Spacing</h3>
|
||||
<p>
|
||||
<b>Intra-character Spacing</b> <i className="ri-volume-up-fill" onClick={() => playMorseWord('...')}></i><br />
|
||||
Silence between dits and dahs the length of one dit. Three dits separated by dit-long spaces is an "S".<br />
|
||||
<b>Inter-character Spacing</b> <i className="ri-volume-up-fill" onClick={() => playMorseWord('. . .')}></i><br />
|
||||
Silence the length of 3 dits. Three dits separated by three-dit-long spaces is "EEE".<br />
|
||||
<b>Inter-word Spacing</b> <i className="ri-volume-up-fill" onClick={() => playMorseWord('././.')}></i><br />
|
||||
Silence the length of 7 dits. Three dits separated by seven-dit-long spaces is "E E E".
|
||||
</p>
|
||||
|
||||
<h3>Speed</h3>
|
||||
<p>
|
||||
Adjusting the <b>WPM</b> (Words Per Minute) in the Options Menu on the right sidebar will adjust the lengths of the dits, dahs, and spacing accordingly.
|
||||
</p>
|
||||
|
||||
<h3>Telegraph Key Types</h3>
|
||||
<p>The instrument used to send morse code is called the key. <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. <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>
|
||||
<p>The instrument used to send morse code is called the key.</p>
|
||||
<img src='./media/images/straight_key.jpg' alt="Straight Key"></img>
|
||||
<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>
|
||||
<img src={"../media/images/electronic_key.jpg"} alt="Electronic Key"></img>
|
||||
<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,4 +1,4 @@
|
|||
@import url("https://fonts.googleapis.com/css?family=Courier+Prime:700|Rubik&display=swap");
|
||||
@import url("https://fonts.googleapis.com/css?family=Courier+Prime:700|Asap|Roboto:700|Roboto|Ubuntu&display=swap");
|
||||
* {
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
|
|
@ -8,7 +8,7 @@
|
|||
}
|
||||
|
||||
button {
|
||||
font-family: "Rubik", sans-serif;
|
||||
font-family: "Roboto", sans-serif;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
|
|
@ -45,7 +45,7 @@ html, body {
|
|||
align-items: center;
|
||||
padding-left: 15px;
|
||||
background: #333;
|
||||
font-family: "Rubik", sans-serif;
|
||||
font-family: "Roboto", sans-serif;
|
||||
font-size: 2.5em;
|
||||
color: #f1f1f1;
|
||||
z-index: 1000;
|
||||
|
|
@ -87,24 +87,41 @@ html, body {
|
|||
-webkit-box-pack: start;
|
||||
-ms-flex-pack: start;
|
||||
justify-content: flex-start;
|
||||
height: 100%;
|
||||
min-width: 400px;
|
||||
width: 400px;
|
||||
height: calc(100% - 5em);
|
||||
min-width: 500px;
|
||||
width: 500px;
|
||||
margin-top: 50px;
|
||||
padding: 1.5em;
|
||||
position: fixed;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
z-index: 100;
|
||||
-webkit-transition: all 300ms ease-in-out;
|
||||
transition: all 300ms ease-in-out;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
#main-content .sidebar#left.hide {
|
||||
background: blue;
|
||||
left: -360px;
|
||||
left: -460px;
|
||||
}
|
||||
|
||||
#main-content .sidebar#left #info {
|
||||
font-family: 'Roboto', sans-serif;
|
||||
line-height: 1.5em;
|
||||
}
|
||||
|
||||
#main-content .sidebar#left #info h3 {
|
||||
font-family: "Roboto", sans-serif;
|
||||
margin-top: 1em;
|
||||
margin-bottom: 0.5;
|
||||
}
|
||||
|
||||
#main-content .sidebar#left #info p {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
#main-content .sidebar#right {
|
||||
border: 1px solid green;
|
||||
background: #f1f1f1;
|
||||
-webkit-box-shadow: -3px 0px 5px rgba(0, 0, 0, 0.2);
|
||||
box-shadow: -3px 0px 5px rgba(0, 0, 0, 0.2);
|
||||
|
|
@ -118,14 +135,18 @@ html, body {
|
|||
-webkit-box-pack: justify;
|
||||
-ms-flex-pack: justify;
|
||||
justify-content: space-between;
|
||||
height: 100%;
|
||||
height: calc(100% - 5em);
|
||||
min-width: 400px;
|
||||
width: 400px;
|
||||
padding: 1.5em;
|
||||
padding-top: 70px;
|
||||
top: 0px;
|
||||
margin-top: 50px;
|
||||
position: fixed;
|
||||
right: 0px;
|
||||
z-index: 100;
|
||||
font-family: 'Roboto', sans-serif;
|
||||
line-height: 1.5em;
|
||||
-webkit-transition: all 300ms ease-in-out;
|
||||
transition: all 300ms ease-in-out;
|
||||
}
|
||||
|
|
@ -135,6 +156,33 @@ html, body {
|
|||
right: -360px;
|
||||
}
|
||||
|
||||
#main-content .sidebar#right.hide #mainOptions, #main-content .sidebar#right.hide #legend {
|
||||
opacity: 0%;
|
||||
}
|
||||
|
||||
#main-content .sidebar#right.hide #settings {
|
||||
-webkit-transform: rotateZ(270deg);
|
||||
transform: rotateZ(270deg);
|
||||
}
|
||||
|
||||
#main-content .sidebar#right #settings {
|
||||
width: -webkit-fit-content;
|
||||
width: -moz-fit-content;
|
||||
width: fit-content;
|
||||
height: -webkit-fit-content;
|
||||
height: -moz-fit-content;
|
||||
height: fit-content;
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
left: 5px;
|
||||
-webkit-transition: all 500ms ease-in-out;
|
||||
transition: all 500ms ease-in-out;
|
||||
}
|
||||
|
||||
#main-content .sidebar#right #settings i {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
#main-content #main-interface {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
|
|
@ -157,9 +205,10 @@ html, body {
|
|||
|
||||
#footer {
|
||||
width: 100%;
|
||||
height: 2em;
|
||||
padding: 0.3em;
|
||||
background: #333;
|
||||
font-family: "Rubik", sans-serif;
|
||||
font-family: "Roboto", sans-serif;
|
||||
font-size: 1em;
|
||||
color: #f1f1f1;
|
||||
z-index: 1000;
|
||||
|
|
@ -482,13 +531,13 @@ i[class*="ri-"] {
|
|||
}
|
||||
|
||||
#challenge-overlay {
|
||||
position: absolute;
|
||||
position: fixed;
|
||||
display: inline-block;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 100;
|
||||
z-index: 50;
|
||||
background: rgba(255, 255, 255, 0.3);
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
|
|
@ -586,11 +635,9 @@ i[class*="ri-"] {
|
|||
-webkit-box-align: start;
|
||||
-ms-flex-align: start;
|
||||
align-items: flex-start;
|
||||
border: 1px solid blue;
|
||||
}
|
||||
|
||||
#challenge-overlay #challengeReady #challengeOptions .mode-picker {
|
||||
border: 1px solid green;
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
|
|
@ -955,8 +1002,9 @@ i[class*="ri-"] {
|
|||
#morseHistory-textbox {
|
||||
background: #ddd;
|
||||
border-radius: 5px;
|
||||
height: auto;
|
||||
min-height: 1em;
|
||||
width: 90%;
|
||||
padding: 0.5em;
|
||||
font-family: Courier;
|
||||
font-size: 1.5rem;
|
||||
display: -webkit-box;
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -112,6 +112,11 @@ function useMorsePlayer() {
|
|||
|
||||
}, delay))
|
||||
delay += ditMaxTime*3
|
||||
} else if (char === '/') {
|
||||
timeouts.push(setTimeout(() => {
|
||||
|
||||
}, delay))
|
||||
delay += ditMaxTime*7
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,8 @@
|
|||
// $main-bg-color-dark: #2c2c2c;
|
||||
@import url('https://fonts.googleapis.com/css?family=Courier+Prime:700|Rubik&display=swap');
|
||||
$main-font: 'Rubik', sans-serif;
|
||||
@import url('https://fonts.googleapis.com/css?family=Courier+Prime:700|Asap|Roboto:700|Roboto|Ubuntu&display=swap');
|
||||
// $main-font: 'Asap', sans-serif;
|
||||
$main-font: 'Roboto', sans-serif;
|
||||
// $main-font-bold: 'Roboto', sans-serif;
|
||||
$buffer-font: 'Courier Prime', Courier, monospace;
|
||||
// $buffer-font: 'Courier', monospace;
|
||||
$ditDah-font: 'Courier', monospace;
|
||||
|
|
@ -82,44 +84,87 @@ html, body {
|
|||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
height: 100%;
|
||||
min-width: 400px;
|
||||
width: 400px;
|
||||
// height: 100%;
|
||||
height: calc(100% - 5em);
|
||||
min-width: 500px;
|
||||
width: 500px;
|
||||
margin-top: 50px;
|
||||
padding: 1.5em;
|
||||
position: fixed;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
// top: 50px;
|
||||
transition: all 300ms ease-in-out;
|
||||
z-index: 100;
|
||||
|
||||
transition: all 300ms ease-in-out;
|
||||
|
||||
&.hide {
|
||||
background: blue;
|
||||
left: -360px;
|
||||
left: -460px;
|
||||
// top: 50px;
|
||||
}
|
||||
|
||||
#info {
|
||||
font-family: 'Roboto', sans-serif;
|
||||
line-height: 1.5em;
|
||||
|
||||
h3 {
|
||||
font-family: $main-font;
|
||||
margin-top: 1em;
|
||||
margin-bottom: 0.5;
|
||||
// text-transform: uppercase;
|
||||
}
|
||||
p {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.sidebar#right {
|
||||
// border: 1px solid green;
|
||||
border: 1px solid green;
|
||||
background: $main-bg-color-light;
|
||||
box-shadow: -3px 0px 5px rgba(0,0,0,0.2);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
height: 100%;
|
||||
height: calc(100% - 5em);
|
||||
min-width: 400px;
|
||||
width: 400px;
|
||||
padding: 1.5em;
|
||||
padding-top: 70px;
|
||||
top: 0px;
|
||||
margin-top: 50px;
|
||||
position: fixed;
|
||||
right: 0px;
|
||||
z-index: 100;
|
||||
|
||||
font-family: 'Roboto', sans-serif;
|
||||
line-height: 1.5em;
|
||||
|
||||
transition: all 300ms ease-in-out;
|
||||
|
||||
&.hide {
|
||||
background: blue;
|
||||
right: -360px;
|
||||
#mainOptions, #legend {
|
||||
opacity: 0%;
|
||||
}
|
||||
// top: 50px;
|
||||
|
||||
#settings {
|
||||
transform: rotateZ(270deg);
|
||||
}
|
||||
}
|
||||
|
||||
#settings {
|
||||
// border: 1px solid red;
|
||||
width: fit-content;
|
||||
height: fit-content;
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
left: 5px;
|
||||
transition: all 500ms ease-in-out;
|
||||
i {
|
||||
font-size: 2rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
#main-interface {
|
||||
|
|
@ -140,6 +185,7 @@ html, body {
|
|||
}
|
||||
#footer {
|
||||
width: 100%;
|
||||
height: 2em;
|
||||
padding: 0.3em;
|
||||
background: #333;
|
||||
font-family: $main-font;
|
||||
|
|
@ -446,13 +492,13 @@ $button-height: 60px;
|
|||
}
|
||||
|
||||
#challenge-overlay {
|
||||
position: absolute;
|
||||
position: fixed;
|
||||
display: inline-block;
|
||||
top:0;
|
||||
left:0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 100;
|
||||
z-index: 50;
|
||||
// background-color: rgba(0,0,0,0.4);
|
||||
background: rgba(255,255,255,0.3);
|
||||
// background-image: linear-gradient(0deg, transparent, rgba(1,1,1,1));
|
||||
|
|
@ -528,10 +574,10 @@ $button-height: 60px;
|
|||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
border: 1px solid blue;
|
||||
// border: 1px solid blue;
|
||||
|
||||
.mode-picker {
|
||||
border: 1px solid green;
|
||||
// border: 1px solid green;
|
||||
// width: 300px;
|
||||
display: flex;
|
||||
// align-self: flex-start;s
|
||||
|
|
@ -878,8 +924,9 @@ $button-height: 60px;
|
|||
// border: 1px solid cyan;
|
||||
background: #ddd;
|
||||
border-radius: 5px;
|
||||
height: auto;
|
||||
min-height: 1em;
|
||||
width: 90%;
|
||||
padding: 0.5em;
|
||||
font-family: Courier;
|
||||
font-size: 1.5rem;
|
||||
display: flex;
|
||||
|
|
|
|||
Loading…
Reference in a new issue