feat: Input functionality

html/static/styles.css

@@ -12,18 +12,26 @@ body {
 }
 
 .cell {
+    position: relative;
     display: inline-block;
     width: 55px;
     height: 55px;
     margin: 3px;
     border: 1px solid #555;
-    text-align: center;
     font-size: 35px;
     color: white;
-    padding-top: 7px;
     font-weight: bold;
 }
 
+.cell span {
+    position: absolute;
+    left: 0;
+    top: 7px;
+    right: 0;
+    bottom: 0;
+    text-align: center;
+}
+
 .cell.Unknown {
     background-color: black;
 }
@@ -59,7 +67,8 @@ body {
     padding-top: 8px;
     padding-left: 7px;
     padding-right: 7px;
-    font-weight: bold
+    font-weight: bold;
+    cursor: pointer;
 }
 
 .key.Unknown {;

src/components/App.jsx

@@ -3,18 +3,32 @@ import {Field} from "./Field";
 import {calculateDifference} from "../logic/game-logic";
 import {id, objectMap, zip} from "../utils";
 import {Keyboard} from "./Keyboard";
-import {sortCellStates} from "../model/CellState";
+import {CellState, sortCellStates} from "../model/CellState";
 
 export const App = () => {
+    const length = 5;
     const correct = "guess";
-    const guesses = [
-        "ascii",
-        "eager",
-        "faces",
-        "guess",
-    ];
 
-    const fieldData = guesses
+    const [pastGuesses, setPastGuesses] = React.useState([]);
+
+    const [currentGuess, setCurrentGuess] = React.useState("");
+
+    const inputHandler = key => {
+        if (currentGuess.length > 0 && key === "BACK") {
+            setCurrentGuess(currentGuess.substring(0, currentGuess.length - 1));
+        } else if (currentGuess.length >= length) {
+            if (key === "ENTER") {
+                setPastGuesses(pastGuesses.concat([currentGuess]));
+                setCurrentGuess("");
+            } else {
+                // do nothing
+            }
+        } else if (key.length === 1) {
+            setCurrentGuess(currentGuess + key);
+        }
+    };
+
+    const fieldDataForPastGuesses = pastGuesses
         .map(guess => guess.toUpperCase())
         .map(guess => [
             guess.split(""),
@@ -30,7 +44,7 @@ export const App = () => {
 
     const used = objectMap(
         Object.groupBy(
-            fieldData
+            fieldDataForPastGuesses
                 .flatMap(id)
                 .flatMap(id),
             cell => cell.content
@@ -41,12 +55,21 @@ export const App = () => {
             .at(-1)
     );
 
+    const fieldData = fieldDataForPastGuesses
+        .concat([currentGuess
+            .split("")
+            .map(char => ({
+                state: CellState.Unknown,
+                content: char,
+            }))
+        ])
+
 
     return <div>
         <Field
             size={[5, 6]}
             fieldData={fieldData}
         />
-        <Keyboard used={used} />
+        <Keyboard used={used} onKey={inputHandler}/>
     </div>
 };

src/components/Cell.jsx

@@ -1,5 +1,7 @@
 import React from "react";
 
 export const Cell = ({state, content}) => {
-    return <div className={"cell " + state}>{content}</div>
+    return <div className={"cell " + state}>
+        <span>{content}</span>
+    </div>
 }

src/components/Field.jsx

@@ -11,7 +11,7 @@ export const Field = ({size, fieldData}) => {
                 range(size[0]).map(x => (
                     <Cell
                         state={fieldData?.[y]?.[x]?.state ?? CellState.Unknown}
-                        content={fieldData?.[y]?.[x]?.content ?? ""}
+                        content={fieldData?.[y]?.[x]?.content ?? " "}
                     />
                 )).concat([<br />])
             )

src/components/Key.jsx

@@ -1,5 +1,5 @@
 import React from "react";
 
-export const Key = ({state, content}) => {
-    return <div className={"key " + state}>{content}</div>
+export const Key = ({state, content, onKey}) => {
+    return <div className={"key " + state} onClick={() => onKey(content)}>{content}</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}) => {
+export const Keyboard = ({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,
@@ -13,7 +13,7 @@ export const Keyboard = ({used}) => {
         {
             keys.map((key) => {
                 if (key) {
-                    return <Key state={used[key] ?? CellState.Unknown} content={key} />;
+                    return <Key onKey={onKey} state={used[key] ?? CellState.Unknown} content={key} />;
                 } else {
                     return <br />
                 }