mirror of
https://github.com/sigmasternchen/x86-64-wordle
synced 2025-03-15 08:09:01 +00:00
feat: Add win/loose check
This commit is contained in:
parent
25a76e90fe
commit
ddd2631bb8
4 changed files with 65 additions and 9 deletions
|
@ -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;
|
||||||
}
|
}
|
|
@ -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>
|
||||||
};
|
};
|
|
@ -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
8
src/model/GameState.js
Normal file
|
@ -0,0 +1,8 @@
|
||||||
|
import {makeEnum} from "../utils";
|
||||||
|
|
||||||
|
export const GameState = makeEnum([
|
||||||
|
"Setup",
|
||||||
|
"Active",
|
||||||
|
"Won",
|
||||||
|
"Lost"
|
||||||
|
]);
|
Loading…
Reference in a new issue