From 30965c20ba2db185cfcce6d1537d82b4c2be1636 Mon Sep 17 00:00:00 2001
From: Alvie Rahman <alvierahman90@gmail.com>
Date: Fri, 28 Jan 2022 02:23:55 +0000
Subject: [PATCH] show available letters on keyboard

---
 game.js    |  4 ++++
 styles.css | 18 ++++++++++++------
 2 files changed, 16 insertions(+), 6 deletions(-)

diff --git a/game.js b/game.js
index 6d7b408..2e10863 100644
--- a/game.js
+++ b/game.js
@@ -23,6 +23,7 @@ const kbBackspace = document.getElementById("kb_backspace")
 const gridItemId = (row, column) => "grid_item_" + row + "_" + column
 const getGridRow = (row) => gridItems[row]
 const getGridItem = (row, column) => gridItems[row].items[column]
+const getkbLetter = letter => kbLetters.filter(kbl => kbl.innerHTML.toLowerCase() === letter.toLowerCase())[0]
 const isLetter = string => /^[a-zA-Z]$/.test(string)
 
 
@@ -57,11 +58,14 @@ function checkGridRow() {
 
         if (gridItem.letter === word[column]) {
             gridItem.HTMLItem.classList.add('grid_correct')
+            getkbLetter(gridItem.letter).classList.add('kb_letter_correct_discovered')
             correct_letters += 1
         } else if (dedupword.includes(gridItem.letter)) {
             gridItem.HTMLItem.classList.add('grid_present')
+            getkbLetter(gridItem.letter).classList.add('kb_letter_present_discovered')
         } else {
             gridItem.HTMLItem.classList.add('grid_wrong')
+            getkbLetter(gridItem.letter).classList.add('kb_letter_incorrect_discovered')
         }
 
         dedupword = dedupword.replace(gridItem.letter, '')
diff --git a/styles.css b/styles.css
index 6bf3f99..8da9233 100644
--- a/styles.css
+++ b/styles.css
@@ -13,6 +13,8 @@
   --blue: #7cafc2;
   --purple: #ba8baf;
   --brown: #a16946;
+  --kb-key-width: min(9vw, 3em);
+  --kb-filler-width: min(4.5vw, 3em);
 }
 
 body {
@@ -60,7 +62,7 @@ body {
 
 .grid_correct { background-color: var(--green)}
 .grid_present { background-color: var(--yellow)}
-.grid_wrong { background-color: var(--default-bg)}
+.grid_wrong { background-color: var(--dark-bg)}
 
 .correct {
   animation: correct 0.5s;
@@ -144,16 +146,20 @@ body {
 }
 
 .kb_row * {
-    width: min(10vw, 3em);
-    height: min(10vw, 3em);
+    width: var(--kb-key-width);
+    height: var(--kb-key-width);
+    margin: min(0.5vw, 0.15em);
     text-align: center;
-    margin: 0;
 }
 
 .kb_filler {
-    width: min(5vw, 1.5em);
+    width: var(--kb-filler-width);
 }
 
 .kb_letter {
-    line-height: min(10vw, 3em)
+    line-height: var(--kb-key-width);
 }
+
+.kb_letter_incorrect_discovered { background: var(--dark-bg) }
+.kb_letter_correct_discovered { background: var(--green) !important }
+.kb_letter_present_discovered { background: var(--yellow) }