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