feat: Add setup screen for word length

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;
 }

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 <Game
+    return <>{ wordLength === null ?
+        <SetupScreen
+            dictionary={dictionary}
+            selectLength={setWordLength}
+        /> :
+        <Game
             wordLength={wordLength}
+            reset={() => setWordLength(null)}
             numberOfGuesses={numberOfGuesses}
             availableWords={availableWords}
             correctWord={correct}
         />
+    }</>
 };

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 <div className="setup">
+        <h1>Select word length</h1>
+        <ul>
+        {lengths.map(([length, numberOfWordsWithLength]) =>
+            <li key={length} onClick={() => selectLength(parseInt(length))}>
+                {length} <span>({numberOfWordsWithLength} words)</span>
+            </li>
+        )}
+        </ul>
+    </div>;
+}