genemecija/learn-morse-code
1
0
Fork 0
mirror of https://github.com/genemecija/learn-morse-code.git synced 2025-12-06 07:02:00 +01:00
Code Issues Actions Packages Projects Releases Wiki Activity

Layout updates

Browse source
This commit is contained in:
Gene Mecija 2020-01-31 18:09:54 -08:00
parent 535621a206
commit b62dc542bb
6 changed files with 219 additions and 167 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
src/app-modes/ChallengeMode.js
View file

@ -31,7 +31,7 @@ export default React.memo(function ChallengeMode(props) {
alert('No more words.')
return
}
console.log('word:', word);
let challengeLetters = word.split('')
@ -41,7 +41,7 @@ export default React.memo(function ChallengeMode(props) {
if (morseCharBuffer.slice(-1) === '_') { // If end of morse character
let morseLetter = morseCode[morseArray[index]] || '[?]'
let challengeLetter = challengeLetters[index-offset]
let challengeLetter = challengeLetters[index-offset].toLowerCase()
if (morseLetter === challengeLetter) {
correctCharIndexes.push(index-offset)
@ -78,9 +78,12 @@ export default React.memo(function ChallengeMode(props) {
//
challengeWordClass = 'correct'
setTimeout(() => {
getNextWord()
setMorseCharBuffer('')
}, 500)
}, 800)
setTimeout(() => {
getNextWord()
}, 1000)
}
return (

5
src/components/MorseHistory.js
View file

@ -10,7 +10,10 @@ export default (function MorseHistory() {
return (
<div id="morseHistory">
{morseCards}
<div id="overlay"></div>
<div id="morseCards">
{morseCards}
</div>
</div>
)
})

154
src/css/App.css
View file

@ -399,7 +399,7 @@ i[class*="ri-"] {
align-items: center;
-ms-flex-item-align: center;
align-self: center;
height: 50px;
height: 5rem;
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content;
@ -409,8 +409,8 @@ i[class*="ri-"] {
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;
font-size: 3rem;
font-family: "Courier", monospace;
font-size: 4rem;
font-family: "Courier Prime", Courier, monospace;
font-weight: bold;
background: #fdfdfd;
text-transform: uppercase;
@ -421,13 +421,24 @@ i[class*="ri-"] {
#challengeWord span {
padding: 4px;
margin: 1px;
line-height: 2.5rem;
-webkit-transition: background 300ms ease-in-out;
transition: background 300ms ease-in-out;
-webkit-transition: background 100ms ease-in-out;
transition: background 100ms ease-in-out;
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
line-height: 3rem;
}
#challengeWord span.correct {
background: rgba(0, 255, 0, 0.6);
border-radius: 3px;
}
#challengeWord.correct {
background: rgba(0, 200, 0, 0.7);
background: rgba(0, 200, 0, 0.6);
}
#morseBufferDisplay {
@ -448,8 +459,7 @@ i[class*="ri-"] {
width: 100%;
height: 150px;
margin-bottom: 20px;
font-family: "Courier", monospace;
font-weight: bold;
font-family: "Courier Prime", Courier, monospace;
}
#morseBufferDisplay #alphanumeric-container {
@ -458,8 +468,9 @@ i[class*="ri-"] {
display: -ms-flexbox;
display: flex;
padding-left: 5px;
height: 3rem;
min-width: 250px;
height: 5rem;
padding-top: 10px;
width: 90%;
margin-bottom: 10px;
display: flex;
-webkit-box-pack: center;
@ -469,12 +480,10 @@ i[class*="ri-"] {
-ms-flex-align: center;
align-items: center;
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;
}
#morseBufferDisplay #alphanumeric-container #alphanumeric {
font-size: 3rem;
font-size: 4rem;
background-color: transparent;
}
@ -502,9 +511,8 @@ i[class*="ri-"] {
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
font-size: 25px;
font-size: 3rem;
font-family: "Courier", monospace;
font-weight: bold;
}
#morseBufferDisplay #ditDahs span {
@ -552,7 +560,7 @@ i[class*="ri-"] {
width: 100%;
height: 150px;
margin-bottom: 20px;
font-family: "Courier", monospace;
font-family: "Courier Prime", Courier, monospace;
font-weight: bold;
}
@ -609,6 +617,7 @@ i[class*="ri-"] {
}
#challengeBufferDisplay #ditDahs .ditDah {
background: #fdfdfd;
height: 40px;
width: 30px !important;
margin-left: 3px;
@ -641,11 +650,6 @@ i[class*="ri-"] {
border-radius: 3px;
}
.correct {
background: rgba(0, 255, 0, 0.4);
border-radius: 3px;
}
#morseHistory-textbox {
border: 1px solid cyan;
display: -webkit-box;
@ -665,6 +669,7 @@ i[class*="ri-"] {
}
#morseHistory {
border: 1px solid purple;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
@ -673,34 +678,21 @@ i[class*="ri-"] {
-ms-flex-direction: column;
flex-direction: column;
width: 100%;
height: 320px;
position: relative;
padding-top: 10px;
}
#morseHistory .morseCard:nth-child(1) {
opacity: 100%;
}
#morseHistory .morseCard:nth-child(2) {
opacity: 85%;
}
#morseHistory .morseCard:nth-child(3) {
opacity: 70%;
}
#morseHistory .morseCard:nth-child(4) {
opacity: 55%;
}
#morseHistory .morseCard:nth-child(5) {
opacity: 40%;
}
#morseHistory .morseCard:nth-child(6) {
opacity: 20%;
}
#morseHistory .morseCard:nth-child(7) {
opacity: 10%;
#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;
position: absolute;
display: inline-block;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 100;
}
.morseCard {
@ -714,32 +706,9 @@ i[class*="ri-"] {
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
/* border: 1px solid orange; */
margin-bottom: 2px;
font-size: 1.7rem;
font-family: "Courier", monospace;
/* width: 100%; */
}
.morseCard div div {
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.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: 3px;
margin-bottom: 4px;
font-size: 1.6rem;
font-family: "Courier Prime", Courier, monospace;
}
.morseCard .ditDahs-container, .morseCard .alphanumeric-container {
@ -750,10 +719,36 @@ i[class*="ri-"] {
font-weight: bold;
}
.morseCard .alphanumeric-container span {
padding-top: 0.17em;
}
.morseCard .ditDahs-container {
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
max-width: 50%;
}
.morseCard div div {
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: 1em;
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: 3px;
}
.morseCard .ditDahs {
@ -769,5 +764,16 @@ i[class*="ri-"] {
overflow-wrap: break-word;
font-family: "Courier", monospace;
font-weight: bold;
max-width: 100%;
overflow-x: hidden;
}
.morseCard .ditDahs span.space {
border-radius: 3px;
background: #f1f1f1;
opacity: 0.5;
width: 3px;
margin-left: 4px;
margin-right: 4px;
}
/*# sourceMappingURL=App.css.map */

2
src/css/App.css.map
View file

File diff suppressed because one or more lines are too long

47
src/hooks/useStraightKey.js
View file

@ -48,7 +48,7 @@ function useStraightKey() {
function handleInputStart(event) {
// event.preventDefault()
console.log(event.keyCode);
if (event.keyCode === 32 && document.activeElement.id === 'wordlist-picker') {
event.preventDefault()
@ -66,29 +66,30 @@ function useStraightKey() {
(event.repeat)) {
return
}
document.getElementById('morseButton').classList.add('active')
isRunning = true
if (context.state === 'interrupted') {
context.resume()
if (event.keyCode === 32) {
document.getElementById('morseButton').classList.add('active')
isRunning = true
if (context.state === 'interrupted') {
context.resume()
}
o = context.createOscillator()
o.frequency.value = frequency
o.type = "sine"
g = context.createGain()
g.gain.exponentialRampToValueAtTime(config.mainVolume, context.currentTime)
o.connect(g)
g.connect(context.destination)
o.start()
checkGapBetweenInputs()
clearInterval(gapTimer)
startCharTimer()
}
o = context.createOscillator()
o.frequency.value = frequency
o.type = "sine"
g = context.createGain()
g.gain.exponentialRampToValueAtTime(config.mainVolume, context.currentTime)
o.connect(g)
g.connect(context.destination)
o.start()
checkGapBetweenInputs()
clearInterval(gapTimer)
startCharTimer()
}
}

167
src/scss/App.scss
View file

@ -1,8 +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;
// $buffer-font: 'Courier Prime', monospace;
$buffer-font: 'Courier', monospace;
$buffer-font: 'Courier Prime', Courier, monospace;
// $buffer-font: 'Courier', monospace;
$ditDah-font: 'Courier', monospace;
$main-bg-color-light: #f1f1f1;
@ -372,18 +372,19 @@ i[class*="ri-"] {
align-items: center;
align-self: center;
height: 50px;
height: 5rem;
width: fit-content;
margin-bottom: 20px;
padding-left: 10px;
padding-right: 10px;
// padding-top: 10px;
// border: 1px solid green;
border-radius: $main-border-radius;
box-shadow: $main-box-shadow-light;
font-size: 3rem;
font-size: 4rem;
font-family: $buffer-font;
font-weight: bold;
@ -394,12 +395,20 @@ i[class*="ri-"] {
span {
padding: 4px;
margin: 1px;
line-height: 2.5rem;
transition: background 300ms ease-in-out; //, opacity 100ms ease-in-out;
transition: background 100ms ease-in-out; //, opacity 100ms ease-in-out;
display: inline-flex;
align-items: center;
line-height: 3rem;
&.correct {
background: rgba(0,255,0,0.6);
border-radius: $main-border-radius;
}
}
&.correct {
background: rgba(0,200,0,0.7);
background: rgba(0,200,0,0.6);
}
}
@ -414,34 +423,33 @@ i[class*="ri-"] {
height: 150px;
margin-bottom: 20px;
font-family: $buffer-font;
font-weight: bold;
// font-weight: bold;
#alphanumeric-container {
// border-left: 2px solid #000;
background: #fdfdfd;
display: flex;
padding-left: 5px;
height: 3rem;
min-width: 250px;
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;
// box-shadow: $main-box-shadow-light;
// box-shadow: $morseCard-shadow-light;
#alphanumeric {
font-size: 3rem;
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;
@ -457,9 +465,9 @@ i[class*="ri-"] {
display: flex;
flex-direction: row;
justify-content: center;
font-size: 25px;
font-size: 3rem;
font-family: $ditDah-font;
font-weight: bold;
// font-weight: bold;
span {
padding: $main-border-radius;
@ -537,7 +545,7 @@ i[class*="ri-"] {
transition: background 100ms ease-in-out;
}
.ditDah {
// background: #DDD;
background: #fdfdfd;
height: 40px;
width: 30px !important;
@ -565,11 +573,7 @@ i[class*="ri-"] {
border-radius: $main-border-radius;
// text-decoration: line-through;
}
.correct {
background: rgba(0,255,0,0.4);
// color: rgb(120, 0, 0);
border-radius: $main-border-radius;
}
// #morseHistory {
// border: 1px solid purple;
@ -595,40 +599,57 @@ i[class*="ri-"] {
}
}
#morseHistory {
// border: 1px solid purple;
border: 1px solid purple;
display: flex;
flex-direction: column;
width: 100%;
height: 320px;
position: relative;
padding-top: 10px;
// // padding-bottom: 20px;
.morseCard:nth-child(1){
opacity: 100%;
#overlay {
// background: blue;
box-shadow: inset 20px 0px 20px $main-bg-color-light, inset -20px 0px 20px $main-bg-color-light, inset 0px -100px 100px $main-bg-color-light;
position: absolute;
display: inline-block;
top:0;
left:0;
width: 100%;
height: 100%;
z-index: 100;
}
.morseCard:nth-child(2){
opacity: 85%;
}
.morseCard:nth-child(3){
opacity: 70%;
}
.morseCard:nth-child(4){
opacity: 55%;
}
.morseCard:nth-child(5){
opacity: 40%;
}
.morseCard:nth-child(6){
opacity: 20%;
}
.morseCard:nth-child(7){
opacity: 10%;
}
// .morseCard:nth-child(8){
// opacity: 30%;
// }
// .morseCard:nth-child(9){
// opacity: 20%;
// }
// .morseCard:nth-child(10){
// opacity: 10%;
// #morseCards {
// .morseCard:nth-child(1){
// opacity: 100%;
// }
// .morseCard:nth-child(2){
// opacity: 85%;
// }
// .morseCard:nth-child(3){
// opacity: 70%;
// }
// .morseCard:nth-child(4){
// opacity: 55%;
// }
// .morseCard:nth-child(5){
// opacity: 40%;
// }
// .morseCard:nth-child(6){
// opacity: 20%;
// }
// .morseCard:nth-child(7){
// opacity: 10%;
// }
// .morseCard:nth-child(8){
// opacity: 30%;
// }
// .morseCard:nth-child(9){
// opacity: 20%;
// }
// .morseCard:nth-child(10){
// opacity: 10%;
// }
// }
}
@ -636,22 +657,36 @@ i[class*="ri-"] {
display: flex;
flex-direction: row !important;
justify-content: center;
/* border: 1px solid orange; */
margin-bottom: 2px;
font-size: 1.7rem;
margin-bottom: 4px;
font-size: 1.6rem;
font-family: $buffer-font;
/* width: 100%; */
.ditDahs-container, .alphanumeric-container {
display: flex;
width: 50%;
font-weight: bold;
// border: 1px solid green;
}
.alphanumeric-container span {
// background: blue;
padding-top: 0.17em;
}
.ditDahs-container {
justify-content: flex-end;
// border: 1px solid red;
max-width: 50%;
}
div div {
padding: 3px;
margin: 2px;
background: #fdfdfd;
// border: 1px solid cyan;
// width: 50%;
white-space: nowrap;
border-radius: $main-border-radius;
box-shadow: $morseCard-shadow-light;
line-height: 1.7rem;
line-height: 1em;
display: flex;
span.morseError {
@ -663,14 +698,7 @@ i[class*="ri-"] {
// text-decoration: line-through;
}
}
.ditDahs-container, .alphanumeric-container {
display: flex;
width: 50%;
font-weight: bold;
}
.ditDahs-container {
justify-content: flex-end;
}
.ditDahs {
// border: 1px solid red;
display: flex;
@ -679,5 +707,16 @@ i[class*="ri-"] {
overflow-wrap: break-word;
font-family: $ditDah-font;
font-weight: bold;
max-width: 100%;
overflow-x: hidden;
span.space {
border-radius: $main-border-radius;
background: $main-bg-color-light;
opacity: 0.5;
width: 3px;
margin-left: 4px;
margin-right: 4px;
}
}
}