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

Wordlists, footer updates

Browse source
This commit is contained in:
Gene Mecija 2020-02-10 19:07:09 -08:00
parent 113e4a2348
commit 91bca8c545
9 changed files with 94 additions and 148 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
src/components/Footer.js
View file

@ -2,12 +2,7 @@ import React from "react"
export default (function Footer() {
function handleClick(e) {
e.preventDefault()
}
return (
<div id="footer">Created by Gene Mecija • GitHub • Twitter</div>
<div id="footer">Created by Gene Mecija •&nbsp;<a href='https://github.com/genemecija/learn-morse-code'>View on Github</a>&nbsp;•&nbsp;<a href='https://twitter.com/genemecija'>Twitter</a></div>
)
})

16
src/components/WordListPicker.js
View file

@ -27,15 +27,17 @@ export default React.memo(function WordListPicker() {
}
}
let wordLists = ['alphabet', 'numbers', 'common100', 'test', 'short']
let options = wordLists.map((wl, index) => (<option value={wl} key={index}>{wl.substr(0,1).toUpperCase() + wl.substr(1)}</option>))
let wordLists = ['alphabet', 'numbers', 'boys', 'girls', 'common100', 'test', 'short']
const metadata = {
'alphabet': {description: 'Each letter of the alphabet', count: 26},
'numbers': {description: '0-9', count: 10},
'common100': {description: '100 most common words', count: 100},
'test': {description: 'A test list', count: 5},
'short': {description: 'A short list', count: 1}
'alphabet': {name: 'Alphabet', description: 'Each letter of the alphabet', count: 26},
'numbers': {name: 'Numbers', description: '0-9', count: 10},
'boys': {name: 'Boys Names', description: 'Top 20 Boys Names', count: 20},
'girls': {name: 'Girls Names', description: 'Top 20 Girls Names', count: 20},
'common100': {name: 'Common 100', description: '100 most common words', count: 100},
'test': {name: 'Test List', description: 'A test list', count: 5},
'short': {name: 'Short List', description: 'A short list', count: 1}
}
let options = wordLists.map((wl, index) => (<option value={wl} key={index}>{metadata[wl]['name']}</option>))
return (
<div id="challengeOptions">

6
src/contexts/wordListPickerContext.js
View file

@ -2,6 +2,8 @@ import React, {useState} from "react"
import alphabet from '../data/alphabet.json'
import numbers from '../data/numbers.json'
import common100 from '../data/common100.json'
import boys from '../data/names_boys.json'
import girls from '../data/names_girls.json'
const WordListPickerContext = React.createContext()
@ -17,6 +19,10 @@ function WordListPickerContextProvider(props) {
wordList = alphabet.words
} else if (wordListCategory === 'numbers') {
wordList = numbers.words
} else if (wordListCategory === 'boys') {
wordList = boys.words
} else if (wordListCategory === 'girls') {
wordList = girls.words
} else if (wordListCategory === 'common100') {
wordList = common100.words
} else if (wordListCategory === 'test') {

20
src/css/App.css
View file

@ -448,6 +448,12 @@ html, body {
width: 100%;
height: 2em;
padding: 0.3em;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
background: #333;
font-family: "Roboto", sans-serif;
font-size: 1em;
@ -455,6 +461,18 @@ html, body {
z-index: 1000;
}
#footer a {
text-decoration: none;
}
#footer a:visited {
color: #eee;
}
#footer a:hover {
color: gold;
}
h2 {
margin-bottom: 0.5em;
}
@ -854,7 +872,7 @@ i[class*="ri-"] {
font-weight: bold;
padding: 0.3em;
background: #666;
color: goldenrod;
color: gold;
text-transform: uppercase;
letter-spacing: 0.3rem;
}

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

File diff suppressed because one or more lines are too long

60
src/data/3letter.json
View file

@ -1,60 +0,0 @@
{ "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"
]
}

22
src/data/names_boys.json Normal file
View file

@ -0,0 +1,22 @@
{
"words": [
"Liam",
"Noah",
"Elijah",
"Logan",
"Mason",
"James",
"Aiden",
"Ethan",
"Lucas",
"Jacob",
"Michael",
"Matthew",
"Benjamin",
"Alexander",
"William",
"Daniel",
"Jayden",
"Oliver"
]
}

24
src/data/names_girls.json Normal file
View file

@ -0,0 +1,24 @@
{
"words": [
"Emma",
"Olivia",
"Ava",
"Isabella",
"Sophia",
"Mia",
"Amelia",
"Charlotte",
"Abigail",
"Emily",
"Harper",
"Evelyn",
"Madison",
"Victoria",
"Sofia",
"Scarlett",
"Aria",
"Elizabeth"
]
}

85
src/scss/App.scss
View file

@ -452,91 +452,30 @@ html, body {
width: 5em;
}
}
// #mainOptions-title {
// font-size: 2em;
// font-weight: bold;
// margin-bottom: 30px;
// text-transform: uppercase;
// }
}
// #gameMode {
// // border: 1px solid red;
// display: flex;
// justify-content: center;
// align-items: center;
// width: 100%;
// font-size: 1.5em;
// font-weight: bold;
// // margin-top: 1em;
// margin-bottom: 2em;
// z-index: 100;
// #buttons {
// // border: 1px solid purple;
// display: flex;
// flex-direction: column;
// padding: 0px;
// button {
// // background: $main-bg-color-light;
// // box-shadow: $main-box-shadow-light;
// // border-radius: $main-border-radius;
// // border: 0px;
// // padding: 0.5em;
// // margin-left: 10px;
// // margin-right: 10px;
// // font-size: 1rem;
// // color: $main-font-color-light;
// // &.selected {
// // // color: rgb(70, 118, 134);;
// // box-shadow: $main-box-shadow-light-selected;
// // }
// background: white;
// font-size: 0.7em;
// // font-weight: bold;
// // text-transform: uppercase;
// margin-top: 3px;
// padding: 0.3em;
// width: 10em;
// height: 100%;
// display: flex;
// justify-content: center;
// // position: relative;
// // overflow: hidden;
// transition: all 150ms ease-in-out;
// border: 0px;
// border-bottom: 2px solid transparent;
// &:hover {
// background: rgba(0, 0, 0, 0.1);
// border-color: #999;
// }
// &.selected {
// border-color: rgb(180, 60, 60);
// }
// }
// }
// }
}
}
#footer {
width: 100%;
height: 2em;
padding: 0.3em;
display: flex;
justify-content: center;
background: #333;
font-family: $main-font;
font-size: 1em;
// font-weight: bold;
color: $main-bg-color-light;
z-index: 1000;
a {
text-decoration: none;
}
a:visited {
color: $main-bg-color-light;
}
a:hover {
color: gold;
}
}
h2 {
margin-bottom: 0.5em;
@ -951,7 +890,7 @@ $button-radius: 50px;
font-weight: bold;
padding: 0.3em;
background: #666;
color: goldenrod;
color: gold;
text-transform: uppercase;
letter-spacing: 0.3rem;