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