feat: Add win/loose check

This commit is contained in:
sigmasternchen 2024-09-20 21:53:00 +02:00
parent 25a76e90fe
commit ddd2631bb8
4 changed files with 65 additions and 9 deletions

View file

@ -60,6 +60,12 @@ body {
text-align: center; text-align: center;
} }
.keyboard.disabled .key {
cursor: initial;
background-color: #555;
color: #888;
}
.key { .key {
display: inline-block; display: inline-block;
height: 40px; height: 40px;
@ -113,4 +119,33 @@ body {
.toast.show { .toast.show {
transform: translate(-50%, 0); transform: translate(-50%, 0);
}
.result {
position: fixed;
width: 500px;
height: 300px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
border-radius: 5px;
font-size: 70px;
padding-top: 100px;
pointer-events: none;
opacity: 0;
transition: opacity 0.5s;
}
.result.won {
background-color: #090;
}
.result.lost {
background-color: #900;
}
.result.show {
pointer-events: initial;
opacity: 1;
} }

View file

@ -7,19 +7,22 @@ import {CellState, sortCellStates} from "../model/CellState";
import {Toast} from "./Toast"; import {Toast} from "./Toast";
import dictionary from "../data/dictionary.json" import dictionary from "../data/dictionary.json"
import {newSFC32} from "../random/sfc32"; import {newSFC32} from "../random/sfc32";
import {GameState} from "../model/GameState";
const validWordsRegex = /[A-Z]+/; const validWordsRegex = /[A-Z]+/;
export const App = () => { export const App = () => {
const [gameState, setGameState] = useState(GameState.Active);
const [pastGuesses, setPastGuesses] = useState([]); const [pastGuesses, setPastGuesses] = useState([]);
const [currentGuess, setCurrentGuess] = useState(""); const [currentGuess, setCurrentGuess] = useState("");
const [message, setMessage] = useState(""); const [message, setMessage] = useState("");
const length = 5; const wordLength = 5;
const numberOfGuesses = 6;
const availableWords = dictionary const availableWords = dictionary
.filter(word => validWordsRegex.test(word)) .filter(word => validWordsRegex.test(word))
.filter(word => word.length === length); .filter(word => word.length === wordLength);
const today = Date.now() / 1000 / 60 / 60 / 24; const today = Date.now() / 1000 / 60 / 60 / 24;
const random = newSFC32(today); const random = newSFC32(today);
@ -57,9 +60,17 @@ export const App = () => {
const inputHandler = key => { const inputHandler = key => {
if (key === "ENTER") { if (key === "ENTER") {
if (currentGuess.length === length) { if (currentGuess.length === wordLength) {
setPastGuesses(pastGuesses.concat([currentGuess])); setPastGuesses(pastGuesses.concat([currentGuess]));
setCurrentGuess(""); setCurrentGuess("");
if (currentGuess.toUpperCase() === correct.toUpperCase()) {
setGameState(GameState.Won);
} else {
if (pastGuesses.length === numberOfGuesses - 1) {
setGameState(GameState.Lost);
}
}
} else { } else {
setMessage("Not enough letters."); setMessage("Not enough letters.");
} }
@ -68,7 +79,7 @@ export const App = () => {
setCurrentGuess(currentGuess.substring(0, currentGuess.length - 1)); setCurrentGuess(currentGuess.substring(0, currentGuess.length - 1));
} }
} else { } else {
if (currentGuess.length < length) { if (currentGuess.length < wordLength) {
setCurrentGuess(currentGuess + key); setCurrentGuess(currentGuess + key);
} }
} }
@ -87,10 +98,12 @@ export const App = () => {
return <div> return <div>
<Field <Field
size={[5, 6]} size={[wordLength, numberOfGuesses]}
fieldData={fieldData} fieldData={fieldData}
/> />
<Keyboard used={usedWithState} onKey={inputHandler}/> <Keyboard enabled={gameState === GameState.Active} used={usedWithState} onKey={inputHandler}/>
<Toast message={message} /> <Toast message={message}/>
<div className={"result won " + (gameState === GameState.Won ? "show" : "")}>You won!</div>
<div className={"result lost " + (gameState === GameState.Lost ? "show" : "")}>You lost!</div>
</div> </div>
}; };

View file

@ -2,7 +2,7 @@ import React from "react";
import {CellState} from "../model/CellState"; import {CellState} from "../model/CellState";
import {Key} from "./Key"; import {Key} from "./Key";
export const Keyboard = ({used, onKey}) => { export const Keyboard = ({enabled, used, onKey}) => {
const keys = [ const keys = [
"Q", "W", "E", "R", "T", "Y", "U", "I", "O", "P", null, "Q", "W", "E", "R", "T", "Y", "U", "I", "O", "P", null,
"A", "S", "D", "F", "G", "H", "J", "K", "L", null, "A", "S", "D", "F", "G", "H", "J", "K", "L", null,
@ -10,7 +10,7 @@ export const Keyboard = ({used, onKey}) => {
]; ];
let newlineCounter = 0; let newlineCounter = 0;
return <div className="keyboard"> return <div className={"keyboard " + (!enabled ? "disabled" : "")}>
{ {
keys.map((key) => { keys.map((key) => {
if (key) { if (key) {

8
src/model/GameState.js Normal file
View file

@ -0,0 +1,8 @@
import {makeEnum} from "../utils";
export const GameState = makeEnum([
"Setup",
"Active",
"Won",
"Lost"
]);