Lowlights solved tiles in countdownMode

index.js

@@ -342,7 +342,7 @@ class Game {
     }
     return result;
   }
-
+  
   countFlags() {
     let result = 0;
     for (let y = 0; y < this.height; y++) {
@@ -355,6 +355,35 @@ class Game {
     return result;
   }
 
+   // all adjacent tiles are flagged and revealed (not necessarily solved)
+  isComplete(x, y) {
+    for (const [x0, y0] of neighbors(x, y, this.width, this.height)) {
+      if (this.map.labels[y0][x0] === null && !this.flags[y0][x0]) {
+        return false;
+      }
+    }
+    return true;
+  }
+
+  labeledTile(x, y, label)
+  {
+    // TODO: can a stylesheet be adjusted to lowlight any tile?
+    // not just hard-coded to just 0 in countdownMode
+    // Maybe create an overlay, instead...
+
+    if (this.countdownMode) {
+      const flagsAround = this.countFlagsAround(x, y);
+
+      if( flagsAround === label && this.isComplete(x,y) ) {
+        return `known label-solved`;
+      } else{
+        return`known label-${label - flagsAround}`;
+      }
+    } else {
+      return `known label-${label}`;
+    }
+  }
+
   refresh() {
     for (let y = 0; y < this.height; y++) {
       for (let x = 0; x < this.width; x++) {
@@ -372,12 +401,7 @@ class Game {
         } else if (this.state === State.WIN && mine) {
           className = 'unknown bomb-win';
         } else if (label !== null && label > 0) {
-            if (this.countdownMode) {
-                const modLabel = label - this.countFlagsAround(x, y);
-                className = `known label-${modLabel}`;
-            } else {
-                className = `known label-${label}`;
-            }
+          className = this.labeledTile(x, y, label);
         } else if (label === 0) {
           className = 'known';
         } else if (flag) {

style.css

@@ -30,6 +30,12 @@
 .cell.label--3 { color: #ff0000; }
 .cell.label--2 { color: #ff0000; }
 .cell.label--1 { color: #ff0000; }
+.cell.label-solved { 
+    background: #888;
+    border-top-color: #888;
+    border-left-color: #888;
+    color: #050505;
+}
 .cell.label-0  {
     background: #aaa;
     border-top-color: #aaa;
@@ -93,6 +99,7 @@
 .cell.label--3::after { content: "-3"; }
 .cell.label--2::after { content: "-2"; }
 .cell.label--1::after { content: "-1"; }
+.cell.label-solved::after { content: "0"; }
 .cell.label-0::after  { content:  "0"; }
 .cell.label-1::after  { content:  "1"; }
 .cell.label-2::after  { content:  "2"; }