From 233cffe1b4de072bdc0e3494988874455a8adbe4 Mon Sep 17 00:00:00 2001
From: Erich Eckner <git@eckner.net>
Date: Mon, 26 Dec 2022 19:38:15 +0100
Subject: colorize keyboard

---
 index.html | 43 ++++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 42 insertions(+), 1 deletion(-)

diff --git a/index.html b/index.html
index 623eb7d..5556c6c 100644
--- a/index.html
+++ b/index.html
@@ -137,6 +137,7 @@ td.black {background-color: #000000;}
               .querySelector("#column_" + i)
               .className = colors[response.colors[i-1]];
           }
+          colorizeKeyboard();
           addNewRow();
         }
       }
@@ -153,6 +154,46 @@ td.black {background-color: #000000;}
     cursor_column = Math.min(5,Math.max(0,cursor_column + cursor_increment));
     updateCursorDisplay();
   };
+  colorizeKeyboard = function(){
+    for (let i=1; i<=5; i++) {
+      const char =
+        table
+          .querySelector("#row_" + row_count)
+          .querySelector("#column_" + i)
+          .innerHTML;
+      const oldColor =
+        document
+          .getElementById("key_" + char)
+          .className;
+      const recentColor =
+        table
+          .querySelector("#row_" + row_count)
+          .querySelector("#column_" + i)
+          .className;
+      var newColor = oldColor;
+      switch (oldColor) {
+        case "green":
+          break;
+        case "yellow":
+          if (recentColor == "green") {
+            newColor = recentColor;
+          }
+          break;
+        case "white":
+          newColor = recentColor;
+          break;
+        default:
+          newColor = recentColor;
+          break;
+      };
+      if (newColor == "white") {
+        newColor = "black";
+      }
+      document
+        .getElementById("key_" + char)
+        .className = newColor;
+    };
+  };
   addNewRow();
   createPuzzle();
   for (i=1; i<=3; i++) {
@@ -177,7 +218,7 @@ td.black {background-color: #000000;}
       .getElementById('keyboard')
       .getElementsByTagName("tbody")[0]
       .querySelector("#row_" + row)
-      .innerHTML += "<td id=\"key_" + c + "\" style=\"" + cell_style + "\"><button onclick=\"pressButton('" + pbc + "')\">" + c + "</button></td>";
+      .innerHTML += "<td class=\"white\" id=\"key_" + c + "\" style=\"" + cell_style + "\"><button onclick=\"pressButton('" + pbc + "')\">" + c + "</button></td>";
   }
   addCharToKeyboardOne = function(c, index, array) { addCharToKeyboard(c,1); }
   addCharToKeyboardTwo = function(c, index, array) { addCharToKeyboard(c,2); }
-- 
cgit v1.2.3-54-g00ecf