Config framework, shortcuts, marks

Author: Tuggster

cell.js

@@ -10,6 +10,7 @@ function preload() {
   falseCell = loadImage("./imgs/false.png");
   blankCell = loadImage("./imgs/empty.png");
   flagCell = loadImage("./imgs/flag.png");
+  markedCell = loadImage("./imgs/flag.png");
   oneCell = loadImage("./imgs/1.png");
   twoCell = loadImage("./imgs/2.png");
   threeCell = loadImage("./imgs/3.png");
@@ -74,6 +75,7 @@ class Cell {
     this.reserved = false;
     this.revealed = false;
     this.flagged = false;
+    this.marked = false;
 
     if (this.mine) {
       this.count = -1;
@@ -115,6 +117,8 @@ class Cell {
         } else {
           image(flagCell, cX, cY, cellSize, cellSize);
         }
+      } else if (this.marked) {
+        image(markedCell, cX, cY, cellSize, cellSize);
       } else {
         image(blankCell, cX, cY, cellSize, cellSize);
       }

contextmenucontroller.js

@@ -7,8 +7,23 @@ window.addEventListener("load", function () {
 
     choices.forEach((element) => {
       element.onRadioToggle = function (selected) {
-        if (element.id === "collapse") {
-          toggleCollapsed(selected); // call your actual function here
+        switch (element.id) {
+          case "collapse": {
+            setPreferenceValue("collapsed", selected);
+            break;
+          }
+          case "shortcuts": {
+            setPreferenceValue("shortcuts", selected);
+            break;
+          }
+          case "saturation": {
+            setPreferenceValue("color", selected);
+            break;
+          }
+          case "marks": {
+            setPreferenceValue("marks", selected);
+            break;
+          }
         }
       };
 
@@ -32,9 +47,6 @@ window.addEventListener("load", function () {
     });
   });
 
-  const isCollapsed = this.localStorage.getItem(LOCAL_STORAGE_COLLAPSE_KEY);
-  toggleCollapsed(isCollapsed);
-
   const leaderboardCtx = document.querySelector("#leaderboard-ctx");
 
   const newNode = this.document.createElement("p");
@@ -52,16 +64,6 @@ window.addEventListener("load", function () {
     hoveringMain = false;
   });
 
-  let saturation = this.document.getElementById("saturation");
-  saturation.addEventListener("click", () => {
-    let containers = document.querySelectorAll(".game-container");
-
-    containers.forEach((element) => {
-      this.document.body.style.filter = `saturate(${saturation.classList.contains("selected") ? 1 : 0})`;
-      this.document.body.style.backdropFilter = `saturate(${saturation.classList.contains("selected") ? 1 : 0})`;
-    });
-  });
-
   let barButtons = this.document.querySelectorAll(".options-bar *");
   barButtons.forEach((button) => {
     let buttonName = button.getAttribute("name");

game.js

@@ -272,7 +272,7 @@ class MinesweeperRound {
     let gX = x * cellSize;
     let gY = y * cellSize + headerSize;
     let gCell = this.grid[x + y * this.width];
-    if (!gCell.revealed && !gCell.flagged) {
+    if (!gCell.revealed && !gCell.flagged && !gCell.marked) {
       image(clearedCell, gX, gY, cellSize, cellSize);
     }
   }
@@ -289,6 +289,29 @@ class MinesweeperRound {
     }
   }
 
+  unmarkCell(x, y) {
+    let gCell = this.grid[x + y * this.width];
+    if (gCell.marked && !gCell.revealed && !gCell.flagged) {
+      gCell.flagged = false;
+      gCell.marked = false;
+    }
+  }
+
+  markCell(x, y) {
+    let gCell = this.grid[x + y * this.width];
+    if (!gCell.revealed && gCell.flagged) {
+      if (gCell.flagged) {
+        gCell.flagged = false;
+        gCell.marked = true;
+        this.flagged--;
+      } else {
+        gCell.flagged = true;
+        gCell.marked = false;
+        this.flagged--;
+      }
+    }
+  }
+
   seedGame() {
     let rejects = 0;
     for (let i = 0; i < this.mines; 0) {

index.html

@@ -185,13 +185,16 @@ <h2>Mines:</h2>
         </div>
         <hr />
         <div class="cmenu-radio optional">
-          <p>Marks (?)</p>
+          <p id="marks">Marks (?)</p>
+        </div>
+        <div class="cmenu-radio optional">
+          <p id="shortcuts">Shortcuts</p>
         </div>
         <div class="cmenu-radio optional">
           <p id="saturation" class="selected">Color</p>
         </div>
         <hr />
-        <p>Best Times...</p>
+        <p onclick="getLeaderboardForDifficulty(true)">Best Times...</p>
         <hr />
         <p>Exit</p>
       </div>
@@ -247,6 +250,8 @@ <h2>Mines:</h2>
         canvasHTML = createCanvas(windowWidth - border * 2, windowHeight - border * 2);
         document.getElementById("defaultCanvas0").remove();
 
+        markedCell.filter(GRAY);
+
         let canvasElement = canvasHTML.elt;
         canvasElement.parentElement.class = "game";
 
@@ -290,6 +295,9 @@ <h2>Mines:</h2>
       }
 
       function clickLogic() {
+        const shortcutsEnabled = getPreferenceValue("shortcuts");
+        const marksEnabled = getPreferenceValue("marks");
+
         if (!hoveringMain) {
           return;
         }
@@ -319,27 +327,31 @@ <h2>Mines:</h2>
           if (!touch) {
             if (mouseIsPressed == 1) {
               game.peekCell(mX, mY);
-              // if (!lastClick)
-              //   // rButton.src = facePeek;
+
               let cell = game.grid[xStart + yStart * game.width];
-              if (mX != xStart || mY != yStart || cell.revealed) {
+              const draggedOrClicking = mX != xStart || mY != yStart || cell.revealed;
+              if (draggedOrClicking && shortcutsEnabled) {
                 peekRadius(xStart, yStart, false);
               }
             } else if (lastClick == 1 && mouseIsPressed == 0) {
               if (mouseButton === LEFT && !keyIsDown(SHIFT)) {
-                game.peekCell(mX, mY);
                 let cell = game.grid[xStart + yStart * game.width];
-                if (!cell.revealed) {
+                game.peekCell(mX, mY);
+                if (!cell.revealed && !cell.marked) {
                   game.revealCell(mX, mY);
-                } else if (mX == xStart && mY == yStart) {
+                } else if (!cell.revealed && cell.marked) {
+                  game.unmarkCell(mX, mY);
+                } else if (mX == xStart && mY == yStart && shortcutsEnabled) {
                   peekRadius(mX, mY, "reveal");
                 }
               } else if (mouseButton === RIGHT || keyIsDown(SHIFT)) {
                 let cell = game.grid[xStart + yStart * game.width];
-                if (!cell.revealed) {
+                if (!cell.revealed && ((marksEnabled && !cell.flagged) || !marksEnabled)) {
                   game.flagCell(mX, mY);
-                } else if (mX == xStart && mY == yStart) {
+                } else if (mX == xStart && mY == yStart && !cell.flagged && !cell.marked && shortcutsEnabled) {
                   peekRadius(xStart, yStart, "flag");
+                } else if (cell.flagged && marksEnabled) {
+                  game.markCell(mX, mY);
                 }
               }
             }
@@ -407,7 +419,7 @@ <h2>Mines:</h2>
               if (!cell.revealed && !cell.flagged) game.flagCell(iX, iY);
             }
 
-            if (cell.flagged) safeCount++;
+            if (cell.flagged || cell.marked) safeCount++;
 
             rect(cX, cY, cellSize);
           }
@@ -425,7 +437,9 @@ <h2>Mines:</h2>
                 if (iX < 0 || iX > game.width - 1 || iY < 0 || iY > game.height - 1) continue;
 
                 let cell = game.grid[iX + iY * game.width];
-                game.revealCell(iX, iY);
+                if (!cell.marked) {
+                  game.revealCell(iX, iY);
+                }
               }
             }
           }

leaderboard.js

@@ -2,15 +2,8 @@ let leaderboardData = [];
 let collapsed = false;
 
 const toggleCollapsed = (state) => {
-  this.localStorage.setItem(LOCAL_STORAGE_COLLAPSE_KEY, state);
   getLeaderboardForDifficulty(false);
-
-  const collapseBtn = this.document.getElementById("collapse");
-  if (state == "true") {
-    collapseBtn.classList.add("selected");
-  } else {
-    collapseBtn.classList.remove("selected");
-  }
+  handleRadioUpdate("collapse", state);
 };
 
 const getCollapsed = () => {