mirror of
https://github.com/genemecija/learn-morse-code.git
synced 2026-01-09 10:09:58 +01:00
Alpha/Dit buffer display overflow fade out, Info section, Layout updates
This commit is contained in:
Gene Mecija
parent
b62dc542bb
commit
60fb1ce2e6
|
|
@ -39,8 +39,8 @@ export default React.memo(function App() {
|
|||
<MorseBufferContextProvider>
|
||||
<WordListPickerContextProvider>
|
||||
<WordFeederContextProvider>
|
||||
<div id="sidebar">
|
||||
<Info />
|
||||
<div className="sidebar" id="left">
|
||||
<Legend />
|
||||
<div id="mainOptions">
|
||||
<h2>Options</h2>
|
||||
<ModePicker />
|
||||
|
|
@ -50,7 +50,6 @@ export default React.memo(function App() {
|
|||
<WordListPicker />
|
||||
}
|
||||
</div>
|
||||
<Legend />
|
||||
</div>
|
||||
<div id="main-interface">
|
||||
{keyType === "straight" ?
|
||||
|
|
@ -77,6 +76,9 @@ export default React.memo(function App() {
|
|||
|
||||
<MorseButtons />
|
||||
</div>
|
||||
<div className="sidebar" id="right">
|
||||
<Info />
|
||||
</div>
|
||||
</WordFeederContextProvider>
|
||||
</WordListPickerContextProvider>
|
||||
</MorseBufferContextProvider>
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@ export default (function PracticeMode(props) {
|
|||
return (
|
||||
<>
|
||||
<MorseBufferDisplay /><br/>
|
||||
<MorseHistory />
|
||||
<MorseHistoryTextBox />
|
||||
</>
|
||||
);
|
||||
|
||||
|
|
|
|||
|
|
@ -1,9 +1,15 @@
|
|||
import React from "react"
|
||||
|
||||
function DitDahDisplay(props) {
|
||||
return (
|
||||
<div className='ditDah'>{props.dd}</div>
|
||||
)
|
||||
if (props.dd === ' ') {
|
||||
return (
|
||||
<div className='ditDah'> </div>
|
||||
)
|
||||
} else {
|
||||
return (
|
||||
<div className='ditDah'>{props.dd}</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
export default DitDahDisplay
|
||||
|
|
@ -5,7 +5,19 @@ export default React.memo(function Info() {
|
|||
return (
|
||||
<div id="info">
|
||||
<h2>Info</h2>
|
||||
<p>This is my info section. It will contain information morse code, e.g. how long dits, dahs, and spacing is.</p>
|
||||
Morse code is communication through various lengths of tones and silences.
|
||||
<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>
|
||||
|
||||
<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 whe pressed down. Straight keys require greater accuracy as you control the dits, dahs, and spacing. <b>Electronic Keys</b> can have two paddles that automatically generate either dits or dahs of appropriate length when pressed.</p>
|
||||
</div>
|
||||
)
|
||||
})
|
||||
|
|
@ -36,14 +36,15 @@ export default React.memo(function KeyTypePicker() {
|
|||
return (
|
||||
<div id="keyType" className="mode-picker">
|
||||
<div id="title">
|
||||
Keyer <i className="ri-question-line"></i>
|
||||
Key Type
|
||||
{/* <i className="ri-question-line"></i> */}
|
||||
</div>
|
||||
<div id="buttons">
|
||||
<button id="straight" className="selected" onClick={handleClick}>
|
||||
Straight Keyer
|
||||
Straight Key
|
||||
</button>
|
||||
<button id="electronic" onClick={handleClick}>
|
||||
Electronic Keyer
|
||||
Electronic Key
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -29,8 +29,11 @@ export default React.memo(function MorseBufferDisplay() {
|
|||
|
||||
return (
|
||||
<div id="morseBufferDisplay">
|
||||
<div id="ditDahs">
|
||||
{ditDahs}
|
||||
<div id="overlay"></div>
|
||||
<div id="ditDahs-container">
|
||||
<div id="ditDahs">
|
||||
{ditDahs}
|
||||
</div>
|
||||
</div>
|
||||
<div id="alphanumeric-container">
|
||||
<div id="alphanumeric">
|
||||
|
|
|
|||
|
|
@ -8,5 +8,5 @@
|
|||
"normal": 24,
|
||||
"fast": 17
|
||||
},
|
||||
"historySize": 7
|
||||
"historySize": 40
|
||||
}
|
||||
152
src/css/App.css
152
src/css/App.css
|
|
@ -43,17 +43,34 @@ header {
|
|||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
height: 95vh;
|
||||
width: 95vw;
|
||||
width: 100%;
|
||||
border: 1px solid red;
|
||||
-webkit-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
-webkit-box-pack: start;
|
||||
-ms-flex-pack: start;
|
||||
justify-content: flex-start;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
#main-content #sidebar {
|
||||
#main-content .sidebar#left {
|
||||
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: start;
|
||||
-ms-flex-pack: start;
|
||||
justify-content: flex-start;
|
||||
height: 100%;
|
||||
min-width: 400px;
|
||||
width: 400px;
|
||||
padding: 1.5em;
|
||||
}
|
||||
|
||||
#main-content .sidebar#right {
|
||||
border: 1px solid green;
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
|
|
@ -62,15 +79,17 @@ header {
|
|||
-webkit-box-direction: normal;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
-ms-flex-pack: distribute;
|
||||
justify-content: space-around;
|
||||
-webkit-box-pack: start;
|
||||
-ms-flex-pack: start;
|
||||
justify-content: flex-start;
|
||||
height: 100%;
|
||||
width: 500px;
|
||||
min-width: 500px;
|
||||
width: 600px;
|
||||
padding: 1.5em;
|
||||
right: 0px;
|
||||
}
|
||||
|
||||
#main-content #main-interface {
|
||||
border: 1px solid blue;
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
|
|
@ -81,12 +100,15 @@ header {
|
|||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
-webkit-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
width: 600px;
|
||||
-webkit-box-pack: start;
|
||||
-ms-flex-pack: start;
|
||||
justify-content: flex-start;
|
||||
-webkit-box-flex: 1;
|
||||
-ms-flex-positive: 1;
|
||||
flex-grow: 1;
|
||||
height: 100%;
|
||||
min-width: 400px;
|
||||
min-width: 500px;
|
||||
width: 500px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
|
|
@ -137,7 +159,7 @@ i[class*="ri-"] {
|
|||
|
||||
#mainOptions .mode-picker #title {
|
||||
font-weight: bold;
|
||||
font-size: 1.1em;
|
||||
font-size: 1.08em;
|
||||
height: 100%;
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
|
|
@ -252,7 +274,7 @@ i[class*="ri-"] {
|
|||
#legend #legend-items .item {
|
||||
border: 1px solid #ccc;
|
||||
margin: 1px;
|
||||
width: 80px;
|
||||
width: 19%;
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
|
|
@ -442,7 +464,6 @@ i[class*="ri-"] {
|
|||
}
|
||||
|
||||
#morseBufferDisplay {
|
||||
border: 1px solid green;
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
|
|
@ -457,48 +478,54 @@ i[class*="ri-"] {
|
|||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: 150px;
|
||||
height: 180px;
|
||||
margin-bottom: 20px;
|
||||
font-family: "Courier Prime", Courier, monospace;
|
||||
position: relative;
|
||||
padding-top: 15px;
|
||||
padding-bottom: 15px;
|
||||
}
|
||||
|
||||
#morseBufferDisplay #overlay {
|
||||
-webkit-box-shadow: inset 20px 0px 20px -5px #f1f1f1;
|
||||
box-shadow: inset 20px 0px 20px -5px #f1f1f1;
|
||||
position: absolute;
|
||||
display: inline-block;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
#morseBufferDisplay #alphanumeric-container {
|
||||
background: #fdfdfd;
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
padding-left: 5px;
|
||||
height: 5rem;
|
||||
padding-top: 10px;
|
||||
width: 90%;
|
||||
margin-bottom: 10px;
|
||||
display: flex;
|
||||
-webkit-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
border-radius: 3px;
|
||||
text-align: center;
|
||||
max-width: 100%;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
#morseBufferDisplay #alphanumeric-container #alphanumeric {
|
||||
font-size: 4rem;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
#morseBufferDisplay #alphanumeric-container #alphanumeric:first-child {
|
||||
background: #fdfdfd;
|
||||
height: 5rem;
|
||||
padding-left: 5px;
|
||||
padding-right: 5px;
|
||||
padding-top: 0.45rem;
|
||||
font-size: 4rem;
|
||||
min-width: 4rem;
|
||||
margin-bottom: 10px;
|
||||
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;
|
||||
float: right;
|
||||
}
|
||||
|
||||
#morseBufferDisplay #alphanumeric-container #alphanumeric span {
|
||||
padding: 3px;
|
||||
-webkit-transition: background 300ms ease-in-out;
|
||||
transition: background 300ms ease-in-out;
|
||||
#morseBufferDisplay #ditDahs-container {
|
||||
text-align: center;
|
||||
max-width: 100%;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
#morseBufferDisplay #ditDahs {
|
||||
#morseBufferDisplay #ditDahs-container #ditDahs {
|
||||
height: 50px;
|
||||
padding-right: 5px;
|
||||
display: -webkit-box;
|
||||
|
|
@ -513,15 +540,10 @@ i[class*="ri-"] {
|
|||
justify-content: center;
|
||||
font-size: 3rem;
|
||||
font-family: "Courier", monospace;
|
||||
float: right;
|
||||
}
|
||||
|
||||
#morseBufferDisplay #ditDahs span {
|
||||
padding: 3px;
|
||||
-webkit-transition: background 100ms ease-in-out;
|
||||
transition: background 100ms ease-in-out;
|
||||
}
|
||||
|
||||
#morseBufferDisplay #ditDahs .ditDah {
|
||||
#morseBufferDisplay #ditDahs-container #ditDahs .ditDah {
|
||||
background: #fdfdfd;
|
||||
height: 40px;
|
||||
width: 30px !important;
|
||||
|
|
@ -651,21 +673,31 @@ i[class*="ri-"] {
|
|||
}
|
||||
|
||||
#morseHistory-textbox {
|
||||
border: 1px solid cyan;
|
||||
background: #ddd;
|
||||
border-radius: 5px;
|
||||
height: auto;
|
||||
width: 90%;
|
||||
font-family: Courier;
|
||||
font-size: 1.5rem;
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
height: 150px;
|
||||
width: 75%;
|
||||
padding: 15px;
|
||||
font-family: Courier;
|
||||
font-size: 1.5rem;
|
||||
-ms-flex-line-pack: start;
|
||||
align-content: flex-start;
|
||||
-ms-flex-wrap: wrap;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
#morseHistory-textbox span {
|
||||
background: #CCC;
|
||||
margin-right: 0.7rem;
|
||||
margin: 5px;
|
||||
background: #fdfdfd;
|
||||
height: 1.5rem;
|
||||
padding: 4px;
|
||||
padding-top: 0px;
|
||||
padding-bottom: 0px;
|
||||
border-radius: 3px;
|
||||
-webkit-box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.2), 0px -1px 1px rgba(255, 255, 255, 0.1);
|
||||
box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.2), 0px -1px 1px rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
#morseHistory {
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -66,7 +66,7 @@ function useStraightKey() {
|
|||
(event.repeat)) {
|
||||
return
|
||||
}
|
||||
if (event.keyCode === 32) {
|
||||
else {
|
||||
document.getElementById('morseButton').classList.add('active')
|
||||
|
||||
isRunning = true
|
||||
|
|
|
|||
|
|
@ -51,29 +51,42 @@ header {
|
|||
#main-content {
|
||||
display: flex;
|
||||
height: 95vh;
|
||||
width: 95vw;
|
||||
width: 100%;
|
||||
border: 1px solid red;
|
||||
justify-content: center;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
|
||||
#sidebar {
|
||||
.sidebar#left {
|
||||
// border: 1px solid green;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
height: 100%;
|
||||
min-width: 400px;
|
||||
width: 400px;
|
||||
padding: 1.5em;
|
||||
}
|
||||
.sidebar#right {
|
||||
border: 1px solid green;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
justify-content: flex-start;
|
||||
height: 100%;
|
||||
width: 500px;
|
||||
min-width: 500px;
|
||||
width: 600px;
|
||||
padding: 1.5em;
|
||||
right: 0px;
|
||||
}
|
||||
#main-interface {
|
||||
border: 1px solid blue;
|
||||
// border: 1px solid blue;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 600px;
|
||||
justify-content: flex-start;
|
||||
flex-grow: 1;
|
||||
height: 100%;
|
||||
min-width: 400px;
|
||||
min-width: 500px;
|
||||
width: 500px;
|
||||
}
|
||||
}
|
||||
footer {
|
||||
|
|
@ -112,7 +125,7 @@ i[class*="ri-"] {
|
|||
|
||||
#title {
|
||||
font-weight: bold;
|
||||
font-size: 1.1em;
|
||||
font-size: 1.08em;
|
||||
// border: 1px solid red;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
|
|
@ -195,7 +208,7 @@ i[class*="ri-"] {
|
|||
.item {
|
||||
border: 1px solid #ccc;
|
||||
margin: 1px;
|
||||
width: 80px;
|
||||
width: 19%;
|
||||
display: flex;
|
||||
|
||||
button {
|
||||
|
|
@ -414,81 +427,106 @@ i[class*="ri-"] {
|
|||
|
||||
|
||||
#morseBufferDisplay {
|
||||
border: 1px solid green;
|
||||
// border: 1px solid green;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-direction: column-reverse;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: 150px;
|
||||
height: 180px;
|
||||
margin-bottom: 20px;
|
||||
font-family: $buffer-font;
|
||||
position: relative;
|
||||
padding-top: 15px;
|
||||
padding-bottom: 15px;
|
||||
// font-weight: bold;
|
||||
|
||||
#overlay {
|
||||
// background: blue;
|
||||
box-shadow: inset 20px 0px 20px -5px $main-bg-color-light;
|
||||
position: absolute;
|
||||
display: inline-block;
|
||||
top:0;
|
||||
left:0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
#alphanumeric-container {
|
||||
// border-left: 2px solid #000;
|
||||
background: #fdfdfd;
|
||||
display: flex;
|
||||
padding-left: 5px;
|
||||
height: 5rem;
|
||||
padding-top: 10px;
|
||||
width: 90%;
|
||||
margin-bottom: 10px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border-radius: $main-border-radius;
|
||||
// box-shadow: $main-box-shadow-light;
|
||||
|
||||
// display: flex;
|
||||
|
||||
|
||||
// display: flex;
|
||||
// justify-content: center;
|
||||
// align-items: center;
|
||||
// box-shadow: $morseCard-shadow-light;
|
||||
text-align: center;
|
||||
max-width: 100%;
|
||||
overflow-x: hidden;
|
||||
// border: 1px solid red;
|
||||
|
||||
#alphanumeric {
|
||||
// border: 1px solid blue;
|
||||
background: #fdfdfd;
|
||||
height: 5rem;
|
||||
padding-left: 5px;
|
||||
padding-right: 5px;
|
||||
padding-top: 0.45rem;
|
||||
font-size: 4rem;
|
||||
background-color: transparent;
|
||||
|
||||
&:first-child {
|
||||
padding-left: 5px;
|
||||
padding-right: 5px;
|
||||
// box-shadow: $main-box-shadow;
|
||||
}
|
||||
span {
|
||||
padding: $main-border-radius;
|
||||
transition: background 300ms ease-in-out;
|
||||
}
|
||||
min-width: 4rem;
|
||||
margin-bottom: 10px;
|
||||
border-radius: $main-border-radius;
|
||||
box-shadow: $main-box-shadow-light;
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
#ditDahs-container {
|
||||
// display: flex;
|
||||
// justify-content: flex-start;
|
||||
text-align: center;
|
||||
max-width: 100%;
|
||||
// border: 1px solid red;
|
||||
overflow-x: hidden;
|
||||
|
||||
#ditDahs {
|
||||
// width: 50%;
|
||||
height: 50px;
|
||||
padding-right: 5px;
|
||||
// border-right: 2px solid #000;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
font-size: 3rem;
|
||||
font-family: $ditDah-font;
|
||||
// font-weight: bold;
|
||||
|
||||
span {
|
||||
padding: $main-border-radius;
|
||||
transition: background 100ms ease-in-out;
|
||||
}
|
||||
|
||||
.ditDah {
|
||||
background: #fdfdfd;
|
||||
height: 40px;
|
||||
width: 30px !important;
|
||||
margin-left: 3px;
|
||||
// box-shadow: 0px 1px 0px #000;
|
||||
border-radius: $main-border-radius;
|
||||
box-shadow: $main-box-shadow-dark;
|
||||
#ditDahs {
|
||||
height: 50px;
|
||||
padding-right: 5px;
|
||||
// border-right: 2px solid #000;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
// border: 1px solid purple;
|
||||
font-size: 3rem;
|
||||
font-family: $ditDah-font;
|
||||
float: right;
|
||||
// font-weight: bold;
|
||||
|
||||
// span {
|
||||
// padding: $main-border-radius;
|
||||
// transition: background 100ms ease-in-out;
|
||||
// width: 30px;
|
||||
// background: blue;
|
||||
// }
|
||||
|
||||
.ditDah {
|
||||
background: #fdfdfd;
|
||||
height: 40px;
|
||||
width: 30px !important;
|
||||
margin-left: 3px;
|
||||
// box-shadow: 0px 1px 0px #000;
|
||||
border-radius: $main-border-radius;
|
||||
box-shadow: $main-box-shadow-dark;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
transition: all 100ms ease-in-out;
|
||||
}
|
||||
|
||||
transition: all 100ms ease-in-out;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -584,20 +622,29 @@ i[class*="ri-"] {
|
|||
// }
|
||||
|
||||
#morseHistory-textbox {
|
||||
border: 1px solid cyan;
|
||||
display: flex;
|
||||
height: 150px;
|
||||
width: 75%;
|
||||
padding: 15px;
|
||||
// background: #ddd;
|
||||
// border: 1px solid cyan;
|
||||
background: #ddd;
|
||||
border-radius: 5px;
|
||||
height: auto;
|
||||
width: 90%;
|
||||
font-family: Courier;
|
||||
font-size: 1.5rem;
|
||||
display: flex;
|
||||
align-content: flex-start;
|
||||
flex-wrap: wrap;
|
||||
|
||||
span {
|
||||
background: #CCC;
|
||||
margin-right: 0.7rem;
|
||||
margin: 5px;
|
||||
background: #fdfdfd;
|
||||
height: 1.5rem;
|
||||
padding: 4px;
|
||||
padding-top: 0px;
|
||||
padding-bottom: 0px;
|
||||
border-radius: $main-border-radius;
|
||||
box-shadow: $main-box-shadow-dark;
|
||||
}
|
||||
}
|
||||
|
||||
#morseHistory {
|
||||
border: 1px solid purple;
|
||||
display: flex;
|
||||
|
|
|
|||
Loading…
Reference in a new issue