mirror of
https://github.com/sigmasternchen/x86-64-wordle
synced 2025-03-15 08:09:01 +00:00
feat: Add setup screen for word length
This commit is contained in:
parent
92058e63a7
commit
2f9603264c
3 changed files with 73 additions and 9 deletions
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -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}
|
||||
/>
|
||||
}</>
|
||||
};
|
23
src/components/SetupScreen.jsx
Normal file
23
src/components/SetupScreen.jsx
Normal 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>;
|
||||
}
|
Loading…
Reference in a new issue