feat: Add win/loose check

html/static/styles.css

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

src/components/App.jsx

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

src/components/Keyboard.jsx

@@ -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) {

src/model/GameState.js

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