Tweak some colors

danstewart · Jan 20, 2022 · b4f8d41 · b4f8d41
1 parent a3e34f4
commit b4f8d41
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 27 deletions.
diff --git a/src/css/main.css b/src/css/main.css
@@ -1,6 +1,8 @@
 body {
     margin-top: 50px;
-    background-color: #f5f5dc;
+    /* background-color: #f5f5dc; */
+    background-color: #708090;
+    color: white;
     margin-bottom: 150px;
 }
 
@@ -40,7 +42,7 @@ input {
 }
 
 .grid-item {
-    border: 1px solid #ccc;
+    background-color: white;
     margin-right: 5px;
     padding: 10px;
     height: 5rem;
@@ -52,21 +54,7 @@ input {
     text-align: center;
     line-height: 125%;
     font-weight: bold;
-}
-
-.green {
-    background-color: green;
-    color: white;
-}
-
-.orange {
-    background-color: orange;
-    color: white;
-}
-
-.gray {
-    background-color: gray;
-    color: white;
+    color: black;
 }
 
 .keyboard-row {
@@ -78,10 +66,25 @@ input {
 
 .keyboard-key {
     margin-right: 0.5em;
-    /* padding: 0.5em 0.75em; */
+    height: 4rem;
 }
 
 .special-key {
     background-color: #656874;
     color: white;
 }
+
+.green {
+    background-color: green;
+    color: white;
+}
+
+.orange {
+    background-color: orange;
+    color: white;
+}
+
+.gray {
+    background-color: #696969;
+    color: white;
+}
diff --git a/src/js/controllers/grid.js b/src/js/controllers/grid.js
@@ -21,7 +21,7 @@ class GridRow extends Controller {
 
             squares.push(html`
                 <div class="grid-item ${state}">
-                    <div class="grid-item-letter">${letter}</div>
+                    <div class="grid-item-letter ${state}">${letter}</div>
                 </div>
             `);
         }
@@ -105,7 +105,7 @@ class GridView extends Controller {
         }
     }
 
-
+    // TODO: Clean this up a bit...
     submitAnswer() {
         const row = this.rows[this.activeRow];
 
@@ -114,13 +114,6 @@ class GridView extends Controller {
             return;
         }
 
-        if (row.letters.join("") === this.targetWord) {
-            this.showFlash("Good job!", "success", null);
-            row.state = Array.from({ length: this.length }, () => "green");
-            row.render();
-            return;
-        }
-
         let states = [];
         const submitted = Array.from(row.letters);
         const expected = this.targetWord.split("");
@@ -169,6 +162,14 @@ class GridView extends Controller {
         }
 
         row.state = states;
+
+        // Check for success
+        if (row.letters.join("") === this.targetWord) {
+            this.showFlash("Good job!", "success", null);
+            row.render();
+            return;
+        }
+
         this.activeRow++;
         this.addRow();
     }