Add preference to show chordable squares

package.json

@@ -1,6 +1,6 @@
 {
     "name": "minesweeper",
-    "version": "0.83.2",
+    "version": "0.84.0",
     "description": "Just Minesweeper!",
     "author": "Florine W. Dekker",
     "browser": "dist/bundle.js",

src/main/index.html

@@ -150,8 +150,12 @@
 
                 <input role="switch" type="checkbox" id="preferences-show-too-many-flags-hints" />
                 <label for="preferences-show-too-many-flags-hints">
-                    Highlight squares with too many flags around them.
+                    Highlight squares with too many flags around them in red.
                 </label>
+                <br /><br />
+
+                <input role="switch" type="checkbox" id="preferences-show-chordable-hints" />
+                <label for="preferences-show-chordable-hints">Highlight squares that can be chorded in blue.</label>
             </form>
             <footer>
                 <a role="button" href="#" id="preferences-cancel" class="secondary">Cancel</a>

src/main/js/Display.ts

@@ -311,6 +311,22 @@ export class Display {
             ctx.restore();
         }
 
+        if (this.preferences.showChordableHints) {
+            ctx.save();
+            ctx.fillStyle = "rgba(0, 0, 255, 0.3)";
+            this.field.squareList
+                .filter(it => !it.isCovered)
+                .filter(it => {
+                    const mines = it.getNeighborCount(it => it.hasMine);
+                    const flags = it.getNeighborCount(it => it.hasFlag);
+                    const covered = it.getNeighborCount(it => it.isCovered);
+
+                    return mines === flags && covered !== flags;
+                })
+                .forEach(square => ctx.fillRect(square.x * this.scale, square.y * this.scale, this.scale, this.scale));
+            ctx.restore();
+        }
+
         if (this.hintSquare != null) {
             ctx.save();
             ctx.fillStyle = "rgba(0, 255, 0, 0.3)";

src/main/js/Game.ts

@@ -183,12 +183,14 @@ export class Game {
         // Preferences
         const enableMarksInput = $("#preferences-enable-marks");
         const showTooManyFlagsHintsInput = $("#preferences-show-too-many-flags-hints");
+        const showChordableHints = $("#preferences-show-chordable-hints");
         const preferencesDialog = new ModalDialog({
             dialog: $("#preferences-dialog"),
             openButton: $("#preferences-open"),
             onOpen: () => {
                 enableMarksInput.checked = preferences.marksEnabled;
                 showTooManyFlagsHintsInput.checked = preferences.showTooManyFlagsHints;
+                showChordableHints.checked = preferences.showChordableHints;
             },
             form: $("#preferences-form"),
             closeButton: $("#preferences-cancel"),
@@ -196,6 +198,7 @@ export class Game {
             onSubmit: () => {
                 preferences.marksEnabled = enableMarksInput.checked;
                 preferences.showTooManyFlagsHints = showTooManyFlagsHintsInput.checked;
+                preferences.showChordableHints = showChordableHints.checked;
 
                 preferencesDialog.close();
             }

src/main/js/Preferences.ts

@@ -35,6 +35,14 @@ export class Preferences {
         this.storage.setBoolean("marksEnabled", value);
     }
 
+    get showChordableHints(): boolean {
+        return this.storage.getBoolean("showChordableHints", false);
+    }
+
+    set showChordableHints(value: boolean) {
+        this.storage.setBoolean("showChordableHints", value);
+    }
+
     get showTooManyFlagsHints(): boolean {
         return this.storage.getBoolean("showTooManyFlagsHints", true);
     }