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/style changes

Browse source
This commit is contained in:
Gene Mecija 2020-02-04 17:45:42 -08:00
parent 2b15d7c04b
commit e677c6e9fc
12 changed files with 186 additions and 67 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
src/components/ChallengeOverlay.js
View file

@ -19,9 +19,12 @@ export default (function ChallengeOverlay() {
count--
if (count === 0) {
// Do this when countdown hits 0
document.getElementById('challenge-overlay').classList.add('hide')
document.getElementById('challenge-overlay').classList.add('fade')
clearInterval(countdown)
startGameClock()
setTimeout(() => {
document.getElementById('challenge-overlay').classList.add('hide')
startGameClock()
}, 900);
}
document.getElementById('challengeReady').innerHTML = `<span id="message">Challenge starting in</span><span id="count">${count}</span>`
}, 1000)
@ -31,8 +34,9 @@ export default (function ChallengeOverlay() {
return (
<div id="challenge-overlay">
<div id="challengeReady" className="notify">
<h2>Challenge Options</h2>
<WordListPicker />
<button id="startChallenge" onClick={startChallenge}>Click to Start Challenge!</button>
<button id="startChallenge" onClick={startChallenge}>Start Challenge</button>
</div>
</div>
)

2
src/components/Footer.js
View file

@ -8,6 +8,6 @@ export default (function Footer() {
}
return (
<footer>Created by Gene Mecija • GitHub • Twitter</footer>
<div id="footer">Created by Gene Mecija • GitHub • Twitter</div>
)
})

2
src/components/Header.js
View file

@ -8,6 +8,6 @@ export default (function Header () {
}
return (
<header>Learn Morse Code</header>
<div id="header">Learn Morse Code</div>
)
})

14
src/components/MorseHistory_textbox.js
View file

@ -24,15 +24,15 @@ export default (function MorseHistoryTextBox() {
newWord += morseCode[letter].toUpperCase()
}
})
// text = newWord + ' ' + text
span.splice(0, 0, <span key={index}>{newWord}</span>)
text = newWord + ' ' + text
// span.splice(0, 0, <span key={index}>{newWord}</span>)
}
else if (morseCode[word] === undefined) {
// text = '[?] ' + text
span.splice(0, 0, <span key={index}>[?]</span>)
text = '[?] ' + text
// span.splice(0, 0, <span key={index}>[?]</span>)
} else {
// text = morseCode[word].toUpperCase() + ' ' + text
span.splice(0, 0, <span key={index}>{morseCode[word].toUpperCase()}</span>)
text = morseCode[word].toUpperCase() + ' ' + text
// span.splice(0, 0, <span key={index}>{morseCode[word].toUpperCase()}</span>)
}
})
@ -41,6 +41,6 @@ export default (function MorseHistoryTextBox() {
// } catch {}
return (
<div id="morseHistory-textbox">{span}</div>
<div id="morseHistory-textbox">{text}</div>
)
})

8
src/components/WordListPicker.js
View file

@ -27,6 +27,9 @@ export default React.memo(function WordListPicker() {
}
}
let wordLists = ['alphabet', 'numbers', 'common100', 'test', 'short']
let options = wordLists.map(wl => (<option value={wl}>{wl.substr(0,1).toUpperCase() + wl.substr(1)}</option>))
return (
<div id="challengeOptions">
<div id="wordListPicker" className="mode-picker">
@ -35,10 +38,7 @@ export default React.memo(function WordListPicker() {
</div>
<div id="input">
<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>
<option value="short">Short List</option>
{options}
</select>
</div>
</div>

2
src/config.json
View file

@ -8,5 +8,5 @@
"normal": 24,
"fast": 17
},
"historySize": 10
"historySize": 50
}

3
src/contexts/wordListPickerContext.js
View file

@ -1,5 +1,6 @@
import React, {useState} from "react"
import alphabet from '../data/alphabet.json'
import numbers from '../data/numbers.json'
import common100 from '../data/common100.json'
@ -14,6 +15,8 @@ function WordListPickerContextProvider(props) {
if (wordListCategory === 'alphabet') {
wordList = alphabet.words
} else if (wordListCategory === 'numbers') {
wordList = numbers.words
} else if (wordListCategory === 'common100') {
wordList = common100.words
} else if (wordListCategory === 'test') {

73
src/css/App.css
View file

@ -8,7 +8,7 @@
}
button {
font-family: #f1f1f1;
font-family: "Rubik", sans-serif;
cursor: pointer;
}
@ -31,11 +31,26 @@ html, body {
-ms-flex-align: center;
align-items: center;
width: 100%;
border: 3px solid green;
}
header {
margin-top: 50px;
#header {
min-height: 50px;
min-height: 50px;
width: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
padding-left: 15px;
background: #333;
font-family: "Rubik", sans-serif;
font-size: 2.5em;
font-weight: bold;
color: #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;
}
#main-content {
@ -44,7 +59,6 @@ header {
display: flex;
height: 95vh;
width: 100%;
border: 1px solid red;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
@ -416,22 +430,18 @@ i[class*="ri-"] {
@-webkit-keyframes hideOverlay {
0% {
opacity: 100%;
z-index: 1000;
}
100% {
opacity: 0%;
z-index: -1000;
}
}
@keyframes hideOverlay {
0% {
opacity: 100%;
z-index: 1000;
}
100% {
opacity: 0%;
z-index: -1000;
}
}
@ -452,24 +462,17 @@ i[class*="ri-"] {
justify-content: center;
}
#challenge-overlay.hide {
-webkit-animation: hideOverlay 3s ease-out forwards;
animation: hideOverlay 3s ease-out forwards;
#challenge-overlay.fade {
-webkit-animation: hideOverlay 1s ease-out forwards;
animation: hideOverlay 1s ease-out forwards;
}
#challenge-overlay .notify {
width: 400px;
height: 250px;
background: #f1f1f1;
margin-top: 150px;
border-radius: 5px;
-webkit-box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.5);
box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.5);
#challenge-overlay.hide {
z-index: -100;
}
#challenge-overlay #challengeReady {
position: relative;
width: 400px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
@ -483,6 +486,13 @@ i[class*="ri-"] {
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
padding: 1.5rem;
height: 250px;
background: #fefefe;
margin-top: 150px;
border-radius: 5px;
-webkit-box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.5);
box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.5);
}
#challenge-overlay #challengeReady #message {
@ -515,6 +525,12 @@ i[class*="ri-"] {
max-width: 250px;
}
#challenge-overlay #challengeReady button#startChallenge {
font-size: 1.2em;
font-weight: bold;
padding: 0.3em;
}
#challenge-overlay #challengeReady button.selected {
-webkit-box-shadow: inset 0px 2px 2px rgba(0, 0, 0, 0.3), inset 0px -1px 1px white;
box-shadow: inset 0px 2px 2px rgba(0, 0, 0, 0.3), inset 0px -1px 1px white;
@ -528,16 +544,17 @@ i[class*="ri-"] {
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
border: 1px solid blue;
}
#challenge-overlay #challengeReady #challengeOptions .mode-picker {
width: 300px;
border: 1px solid green;
display: -webkit-box;
display: -ms-flexbox;
display: flex;

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

File diff suppressed because one or more lines are too long

60
src/data/3letter.json Normal file
View file

@ -0,0 +1,60 @@
{ "words": [
"act",
"all",
"and",
"any",
"are",
"bar",
"boy",
"but",
"can",
"car",
"dad",
"day",
"dew",
"eat",
"for",
"get",
"gym",
"has",
"her",
"him",
"his",
"how",
"ink",
"jet",
"key",
"let",
"log",
"mad",
"man",
"mom",
"nap",
"new",
"nor",
"now",
"old",
"one",
"our",
"out",
"pal",
"put",
"ram",
"saw",
"say",
"see",
"she",
"tan",
"the",
"urn",
"use",
"vet",
"was",
"way",
"who",
"yap",
"yet",
"you",
"zoo"
]
}

13
src/data/numbers.json Normal file
View file

@ -0,0 +1,13 @@
{ "words": [
"1",
"2",
"3",
"4",
"5",
"6",
"7",
"8",
"9",
"0"
]
}

64
src/scss/App.scss
View file

@ -29,7 +29,7 @@ $border-radius-neumorphic-active: 0 15px 20px rgba(0, 0, 0, 0.015), inset 0px -2
cursor: default;
}
button {
font-family: $main-bg-color-light;
font-family: $main-font;
cursor: pointer;
}
html, body {
@ -45,16 +45,28 @@ html, body {
// justify-content: center;
align-items: center;
width: 100%;
border: 3px solid green;
// border: 3px solid green;
}
header {
margin-top: 50px;
#header {
// margin-top: 50px;
min-height: 50px;
min-height: 50px;
width: 100%;
display: flex;
align-items: center;
padding-left: 15px;
background: #333;
font-family: $main-font;
font-size: 2.5em;
font-weight: bold;
color: $main-bg-color-light;
box-shadow: $main-box-shadow-light;
}
#main-content {
display: flex;
height: 95vh;
width: 100%;
border: 1px solid red;
// border: 1px solid red;
justify-content: flex-start;
align-items: center;
@ -388,11 +400,9 @@ $button-height: 60px;
@keyframes hideOverlay {
0% {
opacity: 100%;
z-index: 1000;
}
100% {
opacity: 0%;
z-index: -1000;
}
}
@ -412,27 +422,35 @@ $button-height: 60px;
// align-items: center;
&.fade {
// animation: hideOverlay 2000ms 1 ease-out forwards;
animation: hideOverlay 1s ease-out forwards;
}
&.hide {
// animation: hideOverlay 2000ms 1 ease-out forwards;
animation: hideOverlay 3s ease-out forwards;
z-index: -100;
}
.notify {
width: 400px;
height: 250px;
background: $main-bg-color-light;
margin-top: 150px;
border-radius: 5px;
box-shadow: 0px 5px 15px rgba(0,0,0,0.5);
}
#challengeReady {
position: relative;
width: 400px;
// width: 400px;
display: flex;
flex-direction: column;
justify-content: space-evenly;
align-items: center;
// width: 400px;
padding: 1.5rem;
height: 250px;
// background: $main-bg-color-light;
background: #fefefe;
margin-top: 150px;
border-radius: 5px;
box-shadow: 0px 5px 15px rgba(0,0,0,0.5);
#message {
font-size: 2em;
font-weight: bold;
@ -457,7 +475,11 @@ $button-height: 60px;
font-size: 0.75em;
color: $main-font-color-light;
max-width: 250px;
&#startChallenge {
font-size: 1.2em;
font-weight: bold;
padding: 0.3em;
}
&.selected {
box-shadow: $main-box-shadow-light-selected;
}
@ -465,13 +487,13 @@ $button-height: 60px;
#challengeOptions {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
// border: 1px solid blue;
justify-content: flex-start;
align-items: flex-start;
border: 1px solid blue;
.mode-picker {
// border: 1px solid green;
width: 300px;
border: 1px solid green;
// width: 300px;
display: flex;
// align-self: flex-start;s
align-content: center;