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;
}
.keyboard.disabled .key {
cursor: initial;
background-color: #555;
color: #888;
}
.key {
display: inline-block;
height: 40px;
@ -113,4 +119,33 @@ body {
.toast.show {
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 dictionary from "../data/dictionary.json"
import {newSFC32} from "../random/sfc32";
import {GameState} from "../model/GameState";
const validWordsRegex = /[A-Z]+/;
export const App = () => {
const [gameState, setGameState] = useState(GameState.Active);
const [pastGuesses, setPastGuesses] = useState([]);
const [currentGuess, setCurrentGuess] = useState("");
const [message, setMessage] = useState("");
const length = 5;
const wordLength = 5;
const numberOfGuesses = 6;
const availableWords = dictionary
.filter(word => validWordsRegex.test(word))
.filter(word => word.length === length);
.filter(word => word.length === wordLength);
const today = Date.now() / 1000 / 60 / 60 / 24;
const random = newSFC32(today);
@ -57,9 +60,17 @@ export const App = () => {
const inputHandler = key => {
if (key === "ENTER") {
if (currentGuess.length === length) {
if (currentGuess.length === wordLength) {
setPastGuesses(pastGuesses.concat([currentGuess]));
setCurrentGuess("");
if (currentGuess.toUpperCase() === correct.toUpperCase()) {
setGameState(GameState.Won);
} else {
if (pastGuesses.length === numberOfGuesses - 1) {
setGameState(GameState.Lost);
}
}
} else {
setMessage("Not enough letters.");
}
@ -68,7 +79,7 @@ export const App = () => {
setCurrentGuess(currentGuess.substring(0, currentGuess.length - 1));
}
} else {
if (currentGuess.length < length) {
if (currentGuess.length < wordLength) {
setCurrentGuess(currentGuess + key);
}
}
@ -87,10 +98,12 @@ export const App = () => {
return <div>
<Field
size={[5, 6]}
size={[wordLength, numberOfGuesses]}
fieldData={fieldData}
/>
<Keyboard used={usedWithState} onKey={inputHandler}/>
<Toast message={message} />
<Keyboard enabled={gameState === GameState.Active} used={usedWithState} onKey={inputHandler}/>
<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>
};

View file

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