Remove inline styles

package.json

@@ -1,6 +1,6 @@
 {
     "name": "minesweeper",
-    "version": "0.82.9",
+    "version": "0.82.10",
     "description": "Just Minesweeper!",
     "author": "Felix W. Dekker",
     "browser": "dist/bundle.js",
@@ -20,7 +20,7 @@
         "canvas-confetti": "^1.4.0"
     },
     "devDependencies": {
-        "grunt": "^1.3.0",
+        "grunt": "^1.4.0",
         "grunt-cli": "^1.4.2",
         "grunt-contrib-clean": "^2.0.0",
         "grunt-contrib-copy": "^1.0.0",
@@ -28,10 +28,10 @@
         "grunt-focus": "^1.0.0",
         "grunt-text-replace": "^0.4.0",
         "grunt-webpack": "^4.0.3",
-        "ts-loader": "^8.1.0",
+        "ts-loader": "^9.1.1",
         "ts-node": "^9.1.1",
         "typescript": "^4.2.4",
-        "webpack": "^5.33.2",
+        "webpack": "^5.36.0",
         "webpack-cli": "^4.6.0"
     }
 }

src/main/css/main.css

@@ -33,17 +33,18 @@ form button.cancel {
 }
 
 #canvas {
-    visibility: hidden;
     display: inline;
     box-sizing: border-box;
     border: 4mm ridge #bdbdbd;
 }
 
+#canvas.invisible {
+    visibility: hidden !important;
+}
+
 
 /* Overlay */
 .overlayWrapper {
-    visibility: hidden;
-
     z-index: 20;
     position: fixed;
     top: 0;

src/main/index.html

@@ -21,13 +21,13 @@
 <noscript>
     <img src="https://stats.fwdekker.com/count?p=/tools/minesweeper/" alt="Counting pixel" />
 
-    <p style="color: red; font-weight: bold;">
+    <p>
         This website does not function if JavaScript is disabled.
         Please check the <a href="https://www.enable-javascript.com/">
         instructions on how to enable JavaScript in your web browser</a>.
     </p>
 </noscript>
-<main style="display: none;">
+<main class="hidden">
     <div id="nav"></div>
     <div id="contents">
         <div id="header"></div>
@@ -106,7 +106,7 @@
                 <div class="column">
                     <!-- Canvas -->
                     <div id="canvasContainer">
-                        <canvas id="canvas" width="1" height="1">
+                        <canvas id="canvas" class="invisible" width="1" height="1">
                             Your browser must support the &lt;canvas&gt; element to run this game.
                         </canvas>
                     </div>
@@ -117,7 +117,7 @@
     <div id="footer"></div>
 
     <!-- Custom difficulty overlay -->
-    <div class="overlayWrapper" id="customDifficultyOverlay">
+    <div class="overlayWrapper hidden" id="customDifficultyOverlay">
         <div class="overlay">
             <h2>Custom difficulty</h2>
             <form id="customDifficultyForm">
@@ -142,7 +142,7 @@
         </div>
     </div>
     <!-- Seed input overlay -->
-    <div class="overlayWrapper" id="seedOverlay">
+    <div class="overlayWrapper hidden" id="seedOverlay">
         <div class="overlay">
             <h2>Seed</h2>
             <form id="seedForm">
@@ -157,7 +157,7 @@
         </div>
     </div>
     <!-- Preferences overlay -->
-    <div class="overlayWrapper" id="preferencesOverlay">
+    <div class="overlayWrapper hidden" id="preferencesOverlay">
         <div class="overlay">
             <h2>Preferences</h2>
             <form id="preferencesForm">
@@ -176,7 +176,7 @@
         </div>
     </div>
     <!-- Statistics overlay -->
-    <div class="overlayWrapper" id="statisticsOverlay">
+    <div class="overlayWrapper hidden" id="statisticsOverlay">
         <div class="overlay">
             <h2>Statistics</h2>
             <div id="statisticsDiv"></div>
@@ -189,7 +189,7 @@
         </div>
     </div>
     <!-- High scores overlay -->
-    <div class="overlayWrapper" id="highScoresOverlay">
+    <div class="overlayWrapper hidden" id="highScoresOverlay">
         <div class="overlay">
             <h2>High scores</h2>
             <div id="highScoresDiv"></div>

src/main/js/Game.ts

@@ -71,7 +71,7 @@ export class Game {
         this.field = null;  // Placeholder until `initNewField`
         this.display = new Display(this.canvas, this.field, preferences);
         this.display.startDrawLoop();
-        this.canvas.style.visibility = "unset";
+        this.canvas.classList.remove("invisible");
 
         this.rng = alea("" + Date.now());
         this.seed = "" + this.rng.uint32();

src/main/js/Main.ts

@@ -1,5 +1,5 @@
 // @ts-ignore
-const {$, doAfterLoad, footer, header, nav, showPage} = window.fwdekker;
+const {$, doAfterLoad, footer, header, nav} = window.fwdekker;
 import {waitForForkAwesome} from "./Common";
 import {BasicIconFont, ForkAwesomeFont} from "./Display";
 import {Game} from "./Game";
@@ -14,7 +14,7 @@ doAfterLoad(() => {
         vcsURL: "https://git.fwdekker.com/FWDekker/minesweeper/",
         version: "v%%VERSION_NUMBER%%"
     }));
-    showPage();
+    $("main").classList.remove("hidden");
 
 
     // Start game

src/main/js/UI.ts

@@ -67,14 +67,14 @@ export class Overlay {
      * Shows the overlay.
      */
     show(): void {
-        this.overlay.style.visibility = "unset";
+        this.overlay.classList.remove("hidden");
     }
 
     /**
      * Hides the overlay.
      */
     hide(): void {
-        this.overlay.style.visibility = "hidden";
+        this.overlay.classList.add("hidden");
         blurActiveElement();
     }
 
@@ -82,6 +82,6 @@ export class Overlay {
      * Returns `true` if and only if this overlay is currently visible.
      */
     isVisible(): boolean {
-        return this.overlay.style.visibility !== "hidden";
+        return this.overlay.classList.contains("hidden");
     }
 }