feat: Add setup screen for word length

This commit is contained in:
sigmasternchen 2024-09-20 22:47:47 +02:00
parent 92058e63a7
commit 2f9603264c
3 changed files with 73 additions and 9 deletions

View file

@ -7,6 +7,40 @@ body {
background-color: black; 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 { .field {
text-align: center; text-align: center;
} }

View file

@ -1,18 +1,18 @@
import React from "react"; import React, {useState} from "react";
import dictionary from "../data/dictionary.json" import dictionary from "../data/dictionary.json"
import {newSFC32} from "../random/sfc32"; import {newSFC32} from "../random/sfc32";
import {Game} from "./Game"; import {Game} from "./Game";
import {SetupScreen} from "./SetupScreen";
const validWordsRegex = /[A-Z]+/; const validWordsRegex = /[A-Z]+/;
export const App = () => { export const App = () => {
const wordLength = 5; const [wordLength, setWordLength] = useState(null);
const numberOfGuesses = 6; const numberOfGuesses = 6;
const today = Date.now() / 1000 / 60 / 60 / 24; const today = Date.now() / 1000 / 60 / 60 / 24;
const random = newSFC32(today); const random = newSFC32(today);
const availableWords = dictionary const availableWords = dictionary
.filter(word => validWordsRegex.test(word)) .filter(word => validWordsRegex.test(word))
.filter(word => word.length === wordLength); .filter(word => word.length === wordLength);
@ -21,10 +21,17 @@ export const App = () => {
console.log(correct) console.log(correct)
return <Game return <>{ wordLength === null ?
wordLength={wordLength} <SetupScreen
numberOfGuesses={numberOfGuesses} dictionary={dictionary}
availableWords={availableWords} selectLength={setWordLength}
correctWord={correct} /> :
/> <Game
wordLength={wordLength}
reset={() => setWordLength(null)}
numberOfGuesses={numberOfGuesses}
availableWords={availableWords}
correctWord={correct}
/>
}</>
}; };

View file

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