feat: Add Toast functionality

html/static/styles.css

@@ -93,4 +93,24 @@ body {
 .key.Right {
     background-color: #090;
     border: none;
+}
+
+.toast {
+    position: fixed;
+    top: 0;
+    left: 50%;
+    transform: translate(-50%, -100%);
+    min-height: 50px;
+    background-color: lightgrey;
+    width: 400px;
+    border-radius: 0 0 5px 5px;
+    text-align: center;
+    font-size: 20px;
+    padding-top: 10px;
+    padding-bottom: 10px;
+    transition: transform 0.3s;
+}
+
+.toast.show {
+    transform: translate(-50%, 0);
 }

src/components/App.jsx

@@ -1,17 +1,21 @@
-import React from "react";
+import React, {useState} from "react";
 import {Field} from "./Field";
 import {calculateDifference} from "../logic/game-logic";
 import {id, objectMap, zip} from "../utils";
 import {Keyboard} from "./Keyboard";
 import {CellState, sortCellStates} from "../model/CellState";
+import {Toast} from "./Toast";
 
 export const App = () => {
+    const [pastGuesses, setPastGuesses] = useState([]);
+    const [currentGuess, setCurrentGuess] = useState("");
+
+    const [message, setMessage] = useState("");
+
     const length = 5;
     const correct = "guess";
 
-    const [pastGuesses, setPastGuesses] = React.useState([]);
 
-    const [currentGuess, setCurrentGuess] = React.useState("");
 
     const fieldDataForPastGuesses = pastGuesses
         .map(guess => guess.toUpperCase())
@@ -41,17 +45,21 @@ export const App = () => {
     );
 
     const inputHandler = key => {
-        if (currentGuess.length > 0 && key === "BACK") {
-            setCurrentGuess(currentGuess.substring(0, currentGuess.length - 1));
-        } else if (currentGuess.length >= length) {
-            if (key === "ENTER") {
+        if (key === "ENTER") {
+            if (currentGuess.length === length) {
                 setPastGuesses(pastGuesses.concat([currentGuess]));
                 setCurrentGuess("");
             } else {
-                // do nothing
+                setMessage("Not enough letters.");
+            }
+        } else if (key === "BACK") {
+            if (currentGuess.length > 0) {
+                setCurrentGuess(currentGuess.substring(0, currentGuess.length - 1));
+            }
+        } else {
+            if (currentGuess.length < length) {
+                setCurrentGuess(currentGuess + key);
             }
-        } else if (key.length === 1) {
-            setCurrentGuess(currentGuess + key);
         }
     };
 
@@ -65,11 +73,13 @@ export const App = () => {
         ])
 
 
+
     return <div>
         <Field
             size={[5, 6]}
             fieldData={fieldData}
         />
         <Keyboard used={usedWithState} onKey={inputHandler}/>
+        <Toast message={message} />
     </div>
 };

src/components/Toast.jsx

@@ -0,0 +1,19 @@
+import React, {useEffect, useState} from 'react';
+
+export const Toast = ({message}) => {
+    const [oldMessage, setOldMessage] = useState("");
+    const [show, setShow] = useState(false);
+
+    useEffect(() => {
+        if (message && message !== oldMessage) {
+            setOldMessage(message);
+            setShow(true);
+            setTimeout(() => setShow(false), 2000);
+        }
+    });
+
+    return <div className={"toast " + (show ? "show" : "")}>
+        {message}
+    </div>
+}
+