From 121866e86a2e145a4584cbe336d3f15a8ea1070f Mon Sep 17 00:00:00 2001
From: sigmasternchen <git@sigma-star.io>
Date: Fri, 20 Sep 2024 19:52:37 +0200
Subject: [PATCH] feat: Add distinction between empty and unknown

---
 .gitignore               |  2 ++
 html/static/styles.css   |  5 ++++
 src/components/App.jsx   | 56 ++++++++++++++++++++--------------------
 src/components/Field.jsx |  2 +-
 src/model/CellState.js   |  2 ++
 5 files changed, 38 insertions(+), 29 deletions(-)
 create mode 100644 .gitignore

diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..2d2b47d
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,2 @@
+.idea
+node_modules
\ No newline at end of file
diff --git a/html/static/styles.css b/html/static/styles.css
index 1f4c4b3..d5887f7 100644
--- a/html/static/styles.css
+++ b/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 {
diff --git a/src/components/App.jsx b/src/components/App.jsx
index d36f185..98367fa 100644
--- a/src/components/App.jsx
+++ b/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>
 };
\ No newline at end of file
diff --git a/src/components/Field.jsx b/src/components/Field.jsx
index 55baf42..1137b87 100644
--- a/src/components/Field.jsx
+++ b/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 />])
diff --git a/src/model/CellState.js b/src/model/CellState.js
index 8b19e65..e1daabe 100644
--- a/src/model/CellState.js
+++ b/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;