diff --git a/html/static/styles.css b/html/static/styles.css index 90e2007..6bd69c8 100644 --- a/html/static/styles.css +++ b/html/static/styles.css @@ -7,6 +7,40 @@ body { background-color: black; } +.setup { + text-align: center; + color: white; +} + +.setup ul { + list-style-type: none; +} + +.setup li { + position: relative; + margin: 0 auto; + display: block; + width: 200px; + height: 40px; + border: 1px solid lightgrey; + cursor: pointer; + text-align: left; + padding: 7px 7px 7px 25px; + font-size: 20px; +} + +.setup li span { + position: absolute; + left: 60px; + bottom: 10px; + font-size: 15px; + color: #aaa; +} + +.setup li:hover { + background-color: #555; +} + .field { text-align: center; } diff --git a/src/components/App.jsx b/src/components/App.jsx index e4e82a4..02488aa 100644 --- a/src/components/App.jsx +++ b/src/components/App.jsx @@ -1,18 +1,18 @@ -import React from "react"; +import React, {useState} from "react"; import dictionary from "../data/dictionary.json" import {newSFC32} from "../random/sfc32"; import {Game} from "./Game"; +import {SetupScreen} from "./SetupScreen"; const validWordsRegex = /[A-Z]+/; export const App = () => { - const wordLength = 5; + const [wordLength, setWordLength] = useState(null); const numberOfGuesses = 6; const today = Date.now() / 1000 / 60 / 60 / 24; const random = newSFC32(today); - const availableWords = dictionary .filter(word => validWordsRegex.test(word)) .filter(word => word.length === wordLength); @@ -21,10 +21,17 @@ export const App = () => { console.log(correct) - return + return <>{ wordLength === null ? + : + setWordLength(null)} + numberOfGuesses={numberOfGuesses} + availableWords={availableWords} + correctWord={correct} + /> + } }; \ No newline at end of file diff --git a/src/components/SetupScreen.jsx b/src/components/SetupScreen.jsx new file mode 100644 index 0000000..07ee905 --- /dev/null +++ b/src/components/SetupScreen.jsx @@ -0,0 +1,23 @@ +import React from "react"; + +export const SetupScreen = ({dictionary, selectLength}) => { + + const lengthsMap = Object.groupBy( + dictionary, + word => word.length + ); + + const lengths = Object.keys(lengthsMap) + .map(length => [length, lengthsMap[length].length]); + + return
+

Select word length

+
    + {lengths.map(([length, numberOfWordsWithLength]) => +
  • selectLength(parseInt(length))}> + {length} ({numberOfWordsWithLength} words) +
  • + )} +
+
; +} \ No newline at end of file