feat: Add distinction between empty and unknown

.gitignore

@@ -0,0 +1,2 @@
+.idea
+node_modules

html/static/styles.css

@@ -32,8 +32,13 @@ body {
     text-align: center;
 }
 
+.cell.Empty {
+    background-color: black;
+}
+
 .cell.Unknown {
     background-color: black;
+    border: 1px solid #888;
 }
 
 .cell.Wrong {

src/components/App.jsx

@@ -13,6 +13,33 @@ export const App = () => {
 
     const [currentGuess, setCurrentGuess] = React.useState("");
 
+    const fieldDataForPastGuesses = pastGuesses
+        .map(guess => guess.toUpperCase())
+        .map(guess => [
+            guess.split(""),
+            calculateDifference(correct.toUpperCase(), guess)
+        ])
+        .map(([guess, difference]) => zip(guess, difference))
+        .map(guessWithDifference => guessWithDifference
+            .map(([content, state]) => ({
+                state: state,
+                content: content,
+            }))
+        );
+
+    const usedWithState = objectMap(
+        Object.groupBy(
+            fieldDataForPastGuesses
+                .flatMap(id)
+                .flatMap(id),
+            cell => cell.content
+        ),
+        states => states
+            .map(state => state.state)
+            .toSorted(sortCellStates)
+            .at(-1)
+    );
+
     const inputHandler = key => {
         if (currentGuess.length > 0 && key === "BACK") {
             setCurrentGuess(currentGuess.substring(0, currentGuess.length - 1));
@@ -28,33 +55,6 @@ export const App = () => {
         }
     };
 
-    const fieldDataForPastGuesses = pastGuesses
-        .map(guess => guess.toUpperCase())
-        .map(guess => [
-            guess.split(""),
-            calculateDifference(correct.toUpperCase(), guess)
-        ])
-        .map(([guess, difference]) => zip(guess, difference))
-        .map(guessWithDifference => guessWithDifference
-            .map(([content, state]) => ({
-                state: state,
-                content: content,
-            }))
-        );
-
-    const used = objectMap(
-        Object.groupBy(
-            fieldDataForPastGuesses
-                .flatMap(id)
-                .flatMap(id),
-            cell => cell.content
-        ),
-        states => states
-            .map(state => state.state)
-            .toSorted(sortCellStates)
-            .at(-1)
-    );
-
     const fieldData = fieldDataForPastGuesses
         .concat([currentGuess
             .split("")
@@ -70,6 +70,6 @@ export const App = () => {
             size={[5, 6]}
             fieldData={fieldData}
         />
-        <Keyboard used={used} onKey={inputHandler}/>
+        <Keyboard used={usedWithState} onKey={inputHandler}/>
     </div>
 };

src/components/Field.jsx

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

src/model/CellState.js

@@ -1,6 +1,7 @@
 import {makeEnum} from "../utils";
 
 export const CellState = makeEnum([
+   "Empty",
    "Unknown",
    "Wrong",
    "HalfRight",
@@ -9,6 +10,7 @@ export const CellState = makeEnum([
 
 const cellStateOrder = (cellState) => {
    switch (cellState) {
+      case CellState.Empty: return 0;
       case CellState.Unknown: return 0;
       case CellState.Wrong: return 1;
       case CellState.HalfRight: return 2;