From b4f2586aa832732f3db0c80bbe9e67d550b24389 Mon Sep 17 00:00:00 2001
From: "Florine W. Dekker" <florine@fwdekker.com>
Date: Sat, 26 Nov 2022 12:08:20 +0100
Subject: [PATCH] Upgrade template to v3

---
 package-lock.json          | Bin 233121 -> 229135 bytes
 package.json               |  18 +--
 src/main/css/main.css      |  67 +++-----
 src/main/index.html        | 316 ++++++++++++++++++------------------
 src/main/js/Common.ts      |   4 +-
 src/main/js/Display.ts     |  28 ++--
 src/main/js/Field.ts       |  30 ++--
 src/main/js/Game.ts        | 321 ++++++++++++-------------------------
 src/main/js/HighScores.ts  |   4 +-
 src/main/js/Main.ts        |  15 +-
 src/main/js/ModalDialog.ts | 128 +++++++++++++++
 src/main/js/Preferences.ts |   4 +-
 src/main/js/Solver.ts      |   3 +-
 src/main/js/Statistics.ts  |   4 +-
 src/main/js/UI.ts          |  87 ----------
 15 files changed, 456 insertions(+), 573 deletions(-)
 create mode 100644 src/main/js/ModalDialog.ts
 delete mode 100644 src/main/js/UI.ts

diff --git a/package-lock.json b/package-lock.json
index 02265aa4ec750d186a50709f54e83c96946f5223..dca71e41983d60e9bde4187dd87112d74634ad72 100644
GIT binary patch
delta 9608
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
O6IYJD{FmsrR{tm1G22Q2

delta 10712
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

diff --git a/package.json b/package.json
index 63887f1..7956252 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "minesweeper",
-    "version": "0.82.16",
+    "version": "0.83.0",
     "description": "Just Minesweeper!",
     "author": "Florine W. Dekker",
     "browser": "dist/bundle.js",
@@ -17,21 +17,21 @@
     },
     "dependencies": {
         "alea": "^1.0.1",
-        "canvas-confetti": "^1.5.1"
+        "canvas-confetti": "^1.6.0"
     },
     "devDependencies": {
-        "grunt": "^1.4.1",
+        "grunt": "^1.5.3",
         "grunt-cli": "^1.4.3",
-        "grunt-contrib-clean": "^2.0.0",
+        "grunt-contrib-clean": "^2.0.1",
         "grunt-contrib-copy": "^1.0.0",
         "grunt-contrib-watch": "^1.1.0",
         "grunt-focus": "^1.0.0",
         "grunt-text-replace": "^0.4.0",
         "grunt-webpack": "^5.0.0",
-        "ts-loader": "^9.2.6",
-        "ts-node": "^10.5.0",
-        "typescript": "^4.5.5",
-        "webpack": "^5.69.1",
-        "webpack-cli": "^4.9.2"
+        "ts-loader": "^9.4.1",
+        "ts-node": "^10.9.1",
+        "typescript": "^4.9.3",
+        "webpack": "^5.75.0",
+        "webpack-cli": "^5.0.0"
     }
 }
diff --git a/src/main/css/main.css b/src/main/css/main.css
index 9dc89a7..fe8d695 100644
--- a/src/main/css/main.css
+++ b/src/main/css/main.css
@@ -1,71 +1,42 @@
-form {
-    display: inline;
-}
-
-form button.cancel {
-    background-color: #606c76;
-    border-color: #606c76;
-}
-
-
 /* Controls */
-.row.controls {
-    text-align: center;
+.controls-group {
+    display: flex;
+    flex-direction: column;
+    gap: 1em;
 }
 
-.row.controls input, .row.controls button {
-    display: inline;
+.controls {
+    display: flex;
+    gap: 1em;
+
+    flex-wrap: wrap;
+    align-items: start;
+    justify-content: center;
+    justify-items: center;
 }
 
-.row.controls select, .row.controls input {
+.controls select {
     width: unset;
+    margin-bottom: 0;
 }
 
 
 /* Canvas */
-#canvasContainer {
+#canvas-container {
     text-align: center;
 }
 
 #canvas {
-    display: inline;
-    box-sizing: border-box;
     border: 4mm ridge #bdbdbd;
 }
 
-#canvas.invisible {
-    visibility: hidden !important;
-}
-
-
-/* Overlay */
-.overlayWrapper {
-    z-index: 20;
-    position: fixed;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
 
+/* Dialogs */
+#high-scores-dialog article,
+#statistics-dialog article {
     width: 100%;
-    height: 100%;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-
-    background-color: rgba(0, 0, 0, 0.5);
 }
 
-.overlay {
-    padding: 6rem;
-    min-width: 33%;
-    max-height: 80%;
-    overflow: auto;
-
-    background-color: white;
-}
-
-
-#statisticsOverlay td {
+#statistics-dialog td {
     text-align: right;
 }
diff --git a/src/main/index.html b/src/main/index.html
index b815f5f..6c6f237 100644
--- a/src/main/index.html
+++ b/src/main/index.html
@@ -8,18 +8,24 @@
     <meta name="description" content="Just Minesweeper!" />
     <meta name="theme-color" content="#0033cc" />
 
+    <meta name="fwd:auto:show-main" />
+    <meta name="fwd:nav:target" content="#nav" />
+    <meta name="fwd:nav:highlight-path" content="/Tools/Minesweeper/" />
+    <meta name="fwd:footer:target" content="#footer" />
+    <meta name="fwd:footer:vcs-url" content="https://git.fwdekker.com/tools/minesweeper/" />
+    <meta name="fwd:footer:version" content="v%%VERSION_NUMBER%%" />
+
     <title>Minesweeper | FWDekker</title>
 
-    <link rel="stylesheet" href="https://static.fwdekker.com/fonts/roboto/roboto.css" />
     <link rel="stylesheet" href="https://static.fwdekker.com/fonts/fork-awesome/1.x.x/fork-awesome.css" />
-    <link rel="stylesheet" href="https://static.fwdekker.com/lib/template/2.x.x/template.css" />
+    <link rel="stylesheet" href="https://static.fwdekker.com/lib/template/3.x.x/template.css?v=%%VERSION_NUMBER%%" />
     <!--suppress HtmlUnknownTarget -->
     <link rel="stylesheet" href="main.css?v=%%VERSION_NUMBER%%" />
     <script async src="https://stats.fwdekker.com/count.js"
             data-goatcounter="https://stats.fwdekker.com/count"></script>
 </head>
 <body>
-<noscript>
+<noscript class="fwd-js-notice">
     <img src="https://stats.fwdekker.com/count?p=/tools/minesweeper/" alt="Counting pixel" />
 
     <p>
@@ -28,184 +34,166 @@
         instructions on how to enable JavaScript in your web browser</a>.
     </p>
 </noscript>
-<main class="hidden">
-    <div id="nav"></div>
-    <div id="contents">
-        <div id="header"></div>
+<nav id="nav"></nav>
+<main class="container hidden">
+    <div role="document">
+        <section>
+            <header class="fwd-header">
+                <hgroup>
+                    <h1><a href=".">Minesweeper</a></h1>
+                    <h2>Just Minesweeper!</h2>
+                </hgroup>
+            </header>
 
-        <section class="container">
-            <!-- Controls -->
-            <div class="row controls">
-                <div class="column">
-                    <!-- Preferences -->
-                    <form id="preferencesOpenForm">
-                        <button><i class="fa fa-cogs"></i>&emsp;Preferences</button>
-                    </form>
-
-                    <!-- Statistics -->
-                    <form id="statisticsOpenForm">
-                        <button><i class="fa fa-tachometer"></i>&emsp;Statistics</button>
-                    </form>
-
-                    <!-- High scores -->
-                    <form id="highScoresOpenForm">
-                        <button><i class="fa fa-trophy"></i>&emsp;High scores</button>
-                    </form>
-                </div>
-            </div>
-            <div class="row controls">
-                <div class="column">
-                    <!-- Difficulty -->
-                    <label for="difficulty"></label>
-                    <select id="difficulty">
-                        <option>Select difficulty</option>
-                    </select>
-
-                    <!-- New game -->
-                    <form id="newGameForm">
-                        <button><i class="fa fa-random"></i>&emsp;New game</button>
-                    </form>
-
-                    <!-- Restart -->
-                    <form id="restartForm">
-                        <button><i class="fa fa-sync"></i>&emsp;Restart game</button>
-                    </form>
-
-                    <!-- Seed -->
-                    <form id="seedOpenForm">
-                        <button><i class="fa fa-tree"></i>&emsp;Enter seed</button>
-                    </form>
-                </div>
-            </div>
-            <div class="row controls">
-                <div class="column">
-                    <!-- Undo -->
-                    <form id="undoForm">
-                        <button><i class="fa fa-undo"></i>&emsp;Undo</button>
-                    </form>
-
-                    <!-- Redo -->
-                    <form id="redoForm">
-                        <button><i class="fa fa-repeat"></i>&emsp;Redo</button>
-                    </form>
-
-                    <!-- Hint -->
-                    <form id="hintForm">
-                        <button><i class="fa fa-lightbulb-o"></i>&emsp;Hint</button>
-                    </form>
-
-                    <!-- Solver -->
-                    <form id="solveForm">
-                        <button><i class="fa fa-key"></i>&emsp;Solve</button>
-                    </form>
-                </div>
-            </div>
-            <br />
-
-            <!-- Field -->
-            <div class="row">
-                <div class="column">
-                    <!-- Canvas -->
-                    <div id="canvasContainer">
-                        <canvas id="canvas" class="invisible" width="1" height="1">
-                            Your browser must support the &lt;canvas&gt; element to run this game.
-                        </canvas>
+            <article>
+                <header class="controls-group">
+                    <div class="controls">
+                        <a role="button" href="#" id="preferences-open"><i class="fa fa-cogs"></i>&emsp;Preferences</a>
+                        <a role="button" href="#" id="statistics-open"><i class="fa fa-tachometer"></i>&emsp;Statistics</a>
+                        <a role="button" href="#" id="high-scores-open">
+                            <i class="fa fa-trophy"></i>&emsp;High scores</a>
                     </div>
+                    <div class="controls">
+                        <a role="button" href="#" id="new-game"><i class="fa fa-random"></i>&emsp;New game</a>
+                        <a role="button" href="#" id="restart"><i class="fa fa-sync"></i>&emsp;Restart game</a>
+                        <a role="button" href="#" id="seed-open"><i class="fa fa-tree"></i>&emsp;Enter seed</a>
+                    </div>
+                    <div class="controls">
+                        <!--suppress HtmlFormInputWithoutLabel -->
+                        <select id="difficulty">
+                            <option>Select difficulty</option>
+                        </select>
+                    </div>
+                </header>
+                <div id="canvas-container">
+                    <canvas id="canvas" class="hidden" width="1" height="1">
+                        Your browser must support the &lt;canvas&gt; element to run this game.
+                    </canvas>
                 </div>
-            </div>
+                <footer class="controls">
+                    <a role="button" href="#" id="undo"><i class="fa fa-undo"></i>&emsp;Undo</a>
+                    <a role="button" href="#" id="redo"><i class="fa fa-repeat"></i>&emsp;Redo</a>
+                    <a role="button" href="#" id="hint"><i class="fa fa-lightbulb-o"></i>&emsp;Hint</a>
+                    <a role="button" href="#" id="solve"><i class="fa fa-key"></i>&emsp;Solve</a>
+                </footer>
+            </article>
         </section>
+        <footer id="footer"></footer>
     </div>
-    <div id="footer"></div>
 
-    <!-- Custom difficulty overlay -->
-    <div class="overlayWrapper hidden" id="customDifficultyOverlay">
-        <div class="overlay">
-            <h2>Custom difficulty</h2>
-            <form id="customDifficultyForm">
-                <label for="settingsWidth">Width</label>
-                <input type="number" id="settingsWidth" min="3" max="99" value="9" />
+    <!-- Custom difficulty dialog -->
+    <dialog id="custom-difficulty-dialog">
+        <article>
+            <header>
+                <hgroup>
+                    <h1>Custom difficulty</h1>
+                    <h2>Configure a custom difficulty.</h2>
+                </hgroup>
+            </header>
+            <form id="custom-difficulty-form">
+                <label for="settings-width">Width</label>
+                <input type="number" id="settings-width" min="3" max="99" value="9" autofocus />
 
-                <label for="settingsHeight">Height</label>
-                <input type="number" id="settingsHeight" min="3" max="99" value="9" />
+                <label for="settings-height">Height</label>
+                <input type="number" id="settings-height" min="3" max="99" value="9" />
 
-                <label for="settingsMines">Mines</label>
-                <input type="number" id="settingsMines" min="0" value="10" />
+                <label for="settings-mines">Mines</label>
+                <input type="number" id="settings-mines" min="0" value="10" />
 
-                <label for="settingsSolvable">Ensure solvability (slow for complex settings)</label>
-                <input type="checkbox" id="settingsSolvable" />
-                <br /><br />
-
-                <button>New game</button>
+                <input type="checkbox" id="settings-solvable" />
+                <label for="settings-solvable">Ensure solvability. <small>(Slow for complex settings.)</small></label>
             </form>
-            <form id="customDifficultyCancelForm">
-                <button class="cancel">Cancel</button>
-            </form>
-        </div>
-    </div>
-    <!-- Seed input overlay -->
-    <div class="overlayWrapper hidden" id="seedOverlay">
-        <div class="overlay">
-            <h2>Seed</h2>
-            <form id="seedForm">
+            <footer>
+                <a role="button" href="#" id="custom-difficulty-cancel" class="secondary">Cancel</a>
+                <a role="button" href="#" id="custom-difficulty-submit">New game</a>
+            </footer>
+        </article>
+    </dialog>
+    <!-- Seed input dialog -->
+    <dialog id="seed-dialog">
+        <article>
+            <header>
+                <hgroup>
+                    <h1>Seed</h1>
+                    <h2>
+                        Enter a number to generate a minefield with.
+                        Given a difficulty level and first click position, the same seed always generates the exact same
+                        minefield.
+                    </h2>
+                </hgroup>
+            </header>
+            <form id="seed-form">
                 <!--suppress HtmlFormInputWithoutLabel Only one input, so header already explains everything -->
-                <input id="seed" />
-
-                <button>New game</button>
+                <input id="seed" autofocus />
             </form>
-            <form id="seedCancelForm">
-                <button class="cancel">Cancel</button>
-            </form>
-        </div>
-    </div>
-    <!-- Preferences overlay -->
-    <div class="overlayWrapper hidden" id="preferencesOverlay">
-        <div class="overlay">
-            <h2>Preferences</h2>
-            <form id="preferencesForm">
-                <label for="preferencesEnableMarks">Enable question marks</label>
-                <input type="checkbox" id="preferencesEnableMarks" />
-
-                <label for="preferencesShowTooManyFlagsHints">Highlight squares with too many flags around them</label>
-                <input type="checkbox" id="preferencesShowTooManyFlagsHints" />
+            <footer>
+                <a role="button" href="#" id="seed-cancel" class="secondary">Cancel</a>
+                <a role="button" href="#" id="seed-submit">New game</a>
+            </footer>
+        </article>
+    </dialog>
+    <!-- Preferences dialog -->
+    <dialog id="preferences-dialog">
+        <article>
+            <header>
+                <hgroup>
+                    <h1>Preferences</h1>
+                    <h2>
+                        Configure the gameplay to your liking.
+                    </h2>
+                </hgroup>
+            </header>
+            <form id="preferences-form">
+                <input role="switch" type="checkbox" id="preferences-enable-marks" autofocus />
+                <label for="preferences-enable-marks">Right-clicking a square twice places a question mark.</label>
                 <br /><br />
 
-                <button>Save</button>
+                <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.
+                </label>
             </form>
-            <form id="preferencesCancelForm">
-                <button class="cancel">Cancel</button>
-            </form>
-        </div>
-    </div>
-    <!-- Statistics overlay -->
-    <div class="overlayWrapper hidden" id="statisticsOverlay">
-        <div class="overlay">
-            <h2>Statistics</h2>
-            <div id="statisticsDiv"></div>
-            <form id="statisticsResetForm">
-                <button>Reset</button>
-            </form>
-            <form id="statisticsCloseForm">
-                <button class="cancel">Close</button>
-            </form>
-        </div>
-    </div>
-    <!-- High scores overlay -->
-    <div class="overlayWrapper hidden" id="highScoresOverlay">
-        <div class="overlay">
-            <h2>High scores</h2>
-            <div id="highScoresDiv"></div>
-            <form id="highScoresResetForm">
-                <button>Reset</button>
-            </form>
-            <form id="highScoresCloseForm">
-                <button class="cancel">Close</button>
-            </form>
-        </div>
-    </div>
+            <footer>
+                <a role="button" href="#" id="preferences-cancel" class="secondary">Cancel</a>
+                <a role="button" href="#" id="preferences-submit">Save</a>
+            </footer>
+        </article>
+    </dialog>
+    <!-- Statistics dialog -->
+    <dialog id="statistics-dialog">
+        <article tabindex="-1" autofocus>
+            <header>
+                <hgroup>
+                    <h1>Statistics</h1>
+                    <h2>Your achievements expressed in numbers.</h2>
+                </hgroup>
+            </header>
+            <div id="statistics-div"></div>
+            <footer>
+                <a role="button" href="#" id="statistics-close" class="secondary">Close</a>
+                <a role="button" href="#" id="statistics-reset" class="secondary">Reset</a>
+            </footer>
+        </article>
+    </dialog>
+    <!-- High scores dialog -->
+    <dialog id="high-scores-dialog">
+        <article tabindex="-1" autofocus>
+            <header>
+                <hgroup>
+                    <h1>High scores</h1>
+                    <h2>Your best moments playing Minesweeper.</h2>
+                </hgroup>
+            </header>
+            <div id="high-scores-div"></div>
+            <footer>
+                <a role="button" href="#" id="high-scores-close" class="secondary">Close</a>
+                <a role="button" href="#" id="high-scores-reset" class="secondary">Reset</a>
+            </footer>
+        </article>
+    </dialog>
 </main>
 
-<script src="https://static.fwdekker.com/lib/template/2.x.x/template.js"></script>
-<script src="https://static.fwdekker.com/lib/template/2.x.x/storage.js"></script>
+<script src="https://static.fwdekker.com/lib/template/3.x.x/template.js?v=%%VERSION_NUMBER%%"></script>
 <!--suppress HtmlUnknownTarget -->
 <script src="bundle.js?v=%%VERSION_NUMBER%%"></script>
 </body>
diff --git a/src/main/js/Common.ts b/src/main/js/Common.ts
index fa54791..15887c6 100644
--- a/src/main/js/Common.ts
+++ b/src/main/js/Common.ts
@@ -119,7 +119,7 @@ export function waitForForkAwesome(onSuccess: () => void, onFailure: () => void,
     ctx.textBaseline = "middle";
 
     const startTime = performance.now();
-    const failTime = timeout === null ? null : startTime + timeout;
+    const failTime = timeout == null ? null : startTime + timeout;
     requestAnimationFrame(fontOnload);
 
     /**
@@ -129,7 +129,7 @@ export function waitForForkAwesome(onSuccess: () => void, onFailure: () => void,
      */
     function fontOnload(time: number): void {
         const currentCount = getPixelCount();
-        if (failTime !== null && time > failTime) onFailure();
+        if (failTime != null && time > failTime) onFailure();
         else if (currentCount < targetPixelCount) requestAnimationFrame(fontOnload);
         else onSuccess();
     }
diff --git a/src/main/js/Display.ts b/src/main/js/Display.ts
index 95e325f..0b730c6 100644
--- a/src/main/js/Display.ts
+++ b/src/main/js/Display.ts
@@ -156,7 +156,7 @@ export class Display {
      * @private
      */
     private getFieldOffset(): { x: number, y: number } {
-        if (this.field === null) return {x: 0, y: 0};
+        if (this.field == null) return {x: 0, y: 0};
         if (this.field.width >= this.minSquareWidth) return {x: 0, y: 0};
         return {x: Math.floor((this.minSquareWidth - this.field.width) * this.scale / 2), y: 0};
     }
@@ -169,7 +169,7 @@ export class Display {
     setField(field: Field | null): void {
         this.hintSquare = null;
         this.field = field;
-        if (this.field === null) return;
+        if (this.field == null) return;
 
         this.canvas.width = Math.max(this.minSquareWidth, this.field.width) * this.scale;
         this.canvas.height = this.field.height * this.scale + this.scale;
@@ -213,7 +213,7 @@ export class Display {
         const {x, y} = this.getFieldOffset();
 
         this.clearCanvas(ctx);
-        if (this.field === null) return;
+        if (this.field == null) return;
 
         ctx.save();
         ctx.translate(x, y);
@@ -247,7 +247,7 @@ export class Display {
      * @private
      */
     private drawGrid(ctx: CanvasRenderingContext2D): void {
-        if (this.field === null) return;
+        if (this.field == null) return;
 
         ctx.save();
         ctx.beginPath();
@@ -271,7 +271,7 @@ export class Display {
      * @private
      */
     private drawCovers(ctx: CanvasRenderingContext2D): void {
-        if (this.field === null) return;
+        if (this.field == null) return;
 
         ctx.save();
         ctx.fillStyle = "#555";
@@ -279,7 +279,7 @@ export class Display {
             .filter(it => it.isCovered)
             .filter(it => {
                 // True if square should be covered
-                if (this.field!.hasLost || this.field!.hasWon || this.mouseSquare === null)
+                if (this.field!.hasLost || this.field!.hasWon || this.mouseSquare == null)
                     return true;
                 if (this.mouseHoldUncover && this.mouseSquare === it)
                     return it.hasFlag || it.hasMark;
@@ -299,7 +299,7 @@ export class Display {
      * @private
      */
     private drawHints(ctx: CanvasRenderingContext2D): void {
-        if (this.field === null) return;
+        if (this.field == null) return;
 
         if (this.preferences.showTooManyFlagsHints) {
             ctx.save();
@@ -311,7 +311,7 @@ export class Display {
             ctx.restore();
         }
 
-        if (this.hintSquare !== null) {
+        if (this.hintSquare != null) {
             ctx.save();
             ctx.fillStyle = "rgba(0, 255, 0, 0.3)";
             ctx.fillRect(this.hintSquare.x * this.scale, this.hintSquare.y * this.scale, this.scale, this.scale);
@@ -326,11 +326,11 @@ export class Display {
      * @private
      */
     private drawSymbols(ctx: CanvasRenderingContext2D): void {
-        if (this.field === null) return;
+        if (this.field == null) return;
 
         ctx.save();
         this.field.squareList.forEach(square => {
-            if (this.field === null) return;
+            if (this.field == null) return;
 
             let icon;
             if (square.hasFlag)
@@ -354,7 +354,7 @@ export class Display {
      * @private
      */
     private drawStatusBar(ctx: CanvasRenderingContext2D): void {
-        if (this.field === null) return;
+        if (this.field == null) return;
 
         ctx.save();
         ctx.fillStyle = "#000";
@@ -378,7 +378,7 @@ export class Display {
         // Deaths
         let deathsSymbol;
         if (this.field.hasLost) {
-            if (this.loseTime === null)
+            if (this.loseTime == null)
                 this.loseTime = Date.now();
 
             deathsSymbol = Math.floor((Date.now() - this.loseTime) / 1000) % 2 === 0
@@ -422,10 +422,10 @@ export class Display {
      * @private
      */
     private drawWinConfetti(): void {
-        if (this.field === null) return;
+        if (this.field == null) return;
 
         const rect = this.canvas.getBoundingClientRect();
-        if (this.field.hasWon && this.winTime === null) {
+        if (this.field.hasWon && this.winTime == null) {
             confetti({
                 origin: {
                     x: (rect.left + rect.width / 2) / document.documentElement.clientWidth,
diff --git a/src/main/js/Field.ts b/src/main/js/Field.ts
index 5d5fcf3..8c1b0ab 100644
--- a/src/main/js/Field.ts
+++ b/src/main/js/Field.ts
@@ -1,3 +1,5 @@
+const {MemoryStorage} = (window as any).fwdekker.storage;
+
 // @ts-ignore
 import alea from "alea";
 import {Action, ActionHistory} from "./Action";
@@ -7,8 +9,6 @@ import {HighScores} from "./HighScores";
 import {Solver} from "./Solver";
 import {Statistics} from "./Statistics";
 import {Timer} from "./Timer";
-// @ts-ignore
-const {MemoryStorage} = window.fwdekker.storage;
 
 
 /**
@@ -127,13 +127,15 @@ export class Field {
 
 
     /**
-     * Returns the square at the given coordinates, or `orElse` if there is no square there.
+     * Returns the square at the given coordinates, `orElse` if there is no square there, or `undefined` if there is no
+     * square there and `orElse` is not given.
      *
      * @param coords the coordinates of the square to look up
      * @param orElse the value to return if there is no square at the given coordinates
-     * @returns the square at the given coordinates, or `orElse` if there is no square there
+     * @returns the square at the given coordinates, `orElse` if there is no square there, or `undefined` if there is no
+     * square there and `orElse` is not given
      */
-    getSquareOrElse(coords: { x: number, y: number }, orElse: any = null): Square | any {
+    getSquareOrElse<T = void>(coords: { x: number, y: number }, orElse?: T): Square | T {
         return this.squares[coords.y]?.[coords.x] ?? orElse;
     }
 
@@ -523,15 +525,15 @@ export class Square {
     get neighbors(): Square[] {
         if (this._neighbors === undefined) {
             this._neighbors = [
-                this.field.getSquareOrElse({x: this.x - 1, y: this.y - 1}),
-                this.field.getSquareOrElse({x: this.x, y: this.y - 1}),
-                this.field.getSquareOrElse({x: this.x + 1, y: this.y - 1}),
-                this.field.getSquareOrElse({x: this.x - 1, y: this.y}),
-                this.field.getSquareOrElse({x: this.x + 1, y: this.y}),
-                this.field.getSquareOrElse({x: this.x - 1, y: this.y + 1}),
-                this.field.getSquareOrElse({x: this.x, y: this.y + 1}),
-                this.field.getSquareOrElse({x: this.x + 1, y: this.y + 1}),
-            ].filter(it => it !== null);
+                this.field.getSquareOrElse({x: this.x - 1, y: this.y - 1}, null),
+                this.field.getSquareOrElse({x: this.x, y: this.y - 1}, null),
+                this.field.getSquareOrElse({x: this.x + 1, y: this.y - 1}, null),
+                this.field.getSquareOrElse({x: this.x - 1, y: this.y}, null),
+                this.field.getSquareOrElse({x: this.x + 1, y: this.y}, null),
+                this.field.getSquareOrElse({x: this.x - 1, y: this.y + 1}, null),
+                this.field.getSquareOrElse({x: this.x, y: this.y + 1}, null),
+                this.field.getSquareOrElse({x: this.x + 1, y: this.y + 1}, null),
+            ].filter((it): it is Square => it !== null);
         }
 
         return this._neighbors!;
diff --git a/src/main/js/Game.ts b/src/main/js/Game.ts
index 8bdf827..4e872a3 100644
--- a/src/main/js/Game.ts
+++ b/src/main/js/Game.ts
@@ -1,16 +1,16 @@
-// @ts-ignore
-const {$} = window.fwdekker;
+const {$, stringToHtml} = (window as any).fwdekker;
+
 // @ts-ignore
 import alea from "alea";
-import {blurActiveElement, stringToHash} from "./Common";
+import {stringToHash} from "./Common";
 import {customDifficulty, defaultDifficulty, difficulties} from "./Difficulty";
 import {Display} from "./Display";
 import {Field} from "./Field";
 import {HighScores} from "./HighScores";
+import {ModalDialog} from "./ModalDialog";
 import {Preferences} from "./Preferences";
 import {Solver} from "./Solver";
 import {Statistics} from "./Statistics";
-import {Overlay} from "./UI";
 
 
 /**
@@ -22,33 +22,13 @@ export class Game {
     private statisticsTimer: number | undefined;
 
     private readonly canvas: HTMLCanvasElement;
-    private readonly difficultySelect: HTMLSelectElement;
-    private readonly newGameForm: HTMLFormElement;
-    private readonly restartForm: HTMLFormElement;
-    private readonly seedOverlay: Overlay;
-    private readonly seedOpenForm: HTMLFormElement;
-    private readonly seedInput: HTMLFormElement;
-    private readonly undoForm: HTMLFormElement;
-    private readonly redoForm: HTMLFormElement;
-    private readonly hintForm: HTMLFormElement;
-    private readonly solveForm: HTMLFormElement;
-    private readonly customDifficultyOverlay: Overlay;
+    private readonly customDifficultyOverlay: ModalDialog;
     private readonly widthInput: HTMLInputElement;
     private readonly heightInput: HTMLInputElement;
     private readonly minesInput: HTMLInputElement;
     private readonly solvableInput: HTMLInputElement;
-    private readonly preferencesOverlay: Overlay;
-    private readonly enableMarksInput: HTMLInputElement;
-    private readonly showTooManyFlagsHintsInput: HTMLInputElement;
-    private readonly preferencesOpenForm: HTMLFormElement;
-    private readonly statisticsOverlay: Overlay;
     private readonly statisticsDiv: HTMLDivElement;
-    private readonly statisticsResetForm: HTMLFormElement;
-    private readonly statisticsOpenForm: HTMLFormElement;
-    private readonly highScoresOverlay: Overlay;
     private readonly highScoresDiv: HTMLDivElement;
-    private readonly highScoresResetForm: HTMLFormElement;
-    private readonly highScoresOpenForm: HTMLFormElement;
 
     private readonly rng: any;
     private seed: string;
@@ -71,7 +51,7 @@ export class Game {
         this.field = null;  // Placeholder until `initNewField`
         this.display = new Display(this.canvas, this.field, preferences);
         this.display.startDrawLoop();
-        this.canvas.classList.remove("invisible");
+        this.canvas.classList.remove("hidden");
 
         this.rng = alea("" + Date.now());
         this.seed = "" + this.rng.uint32();
@@ -83,44 +63,40 @@ export class Game {
 
 
         // Settings
-        this.difficultySelect = $("#difficulty");
+        const difficultySelect = $("#difficulty");
         difficulties.forEach(it => {
-            const option = document.createElement("option");
-            option.value = it.name;
-            option.innerHTML = `${it.name}${it.description !== null ? ` (${it.description})` : ""}`;
-            this.difficultySelect.add(option);
+            const description = `${it.name}${it.description != null ? ` (${it.description})` : ""}`;
+            difficultySelect.appendChild(stringToHtml(`<option value=${it.name}>${description}</option>`));
         });
-        this.difficultySelect.addEventListener(
+        difficultySelect.addEventListener("click", (event: MouseEvent) => event.stopPropagation());
+        difficultySelect.addEventListener(
             "change",
-            event => {
-                event.preventDefault();
-
-                const difficulty = difficulties[this.difficultySelect.selectedIndex - 1];
-                this.difficultySelect.selectedIndex = 0;
+            () => {
+                const difficulty = difficulties[difficultySelect.selectedIndex - 1];
+                difficultySelect.selectedIndex = 0;
                 if (difficulty === undefined) return;
 
-                if (difficulty.name !== customDifficulty.name) {
-                    this.difficultySelect.selectedIndex = 0;
+                if (difficulty.name === customDifficulty.name)
+                    this.customDifficultyOverlay.open();
+                else
                     this.initNewField(difficulty.width, difficulty.height, difficulty.mineCount, difficulty.solvable);
-                    return;
-                }
+            }
+        );
 
-                this.customDifficultyOverlay.show();
+        // Custom difficulty
+        this.customDifficultyOverlay = new ModalDialog({
+            dialog: $("#custom-difficulty-dialog"),
+            onOpen: () => {
                 this.widthInput.value = "" + (this.field?.width ?? defaultDifficulty.width);
                 this.heightInput.value = "" + (this.field?.height ?? defaultDifficulty.height);
                 this.minesInput.value = "" + (this.field?.mineCount ?? defaultDifficulty.mineCount);
                 this.solvableInput.checked = this.field?.isSolvable ?? defaultDifficulty.solvable;
                 this.setMineLimit();
-                this.widthInput.focus();
-            }
-        );
-
-        // Custom difficulty
-        this.customDifficultyOverlay = new Overlay(
-            $("#customDifficultyOverlay"),
-            $("#customDifficultyForm"),
-            $("#customDifficultyCancelForm"),
-            () => {
+            },
+            form: $("#custom-difficulty-form"),
+            closeButton: $("#custom-difficulty-cancel"),
+            submitButton: $("#custom-difficulty-submit"),
+            onSubmit: () => {
                 this.initNewField(
                     +this.widthInput.value,
                     +this.heightInput.value,
@@ -128,218 +104,135 @@ export class Game {
                     this.solvableInput.checked
                 );
             }
-        );
+        });
 
-        this.widthInput = $("#settingsWidth");
+        this.widthInput = $("#settings-width");
         this.widthInput.addEventListener("change", _ => this.setMineLimit());
-        this.heightInput = $("#settingsHeight");
+        this.heightInput = $("#settings-height");
         this.heightInput.addEventListener("change", _ => this.setMineLimit());
-        this.minesInput = $("#settingsMines");
-        this.solvableInput = $("#settingsSolvable");
+        this.minesInput = $("#settings-mines");
+        this.solvableInput = $("#settings-solvable");
 
         // New game form
-        this.newGameForm = $("#newGameForm");
-        this.newGameForm.addEventListener(
-            "submit",
-            event => {
-                event.preventDefault();
-
-                this.initNewField(this.field?.width, this.field?.height, this.field?.mineCount, this.field?.isSolvable);
-                blurActiveElement();
-            }
+        $("#new-game").addEventListener(
+            "click",
+            () =>
+                this.initNewField(this.field?.width, this.field?.height, this.field?.mineCount, this.field?.isSolvable)
         );
 
         // Restart
-        this.restartForm = $("#restartForm");
-        this.restartForm.addEventListener(
-            "submit",
-            event => {
-                event.preventDefault();
-
-                this.field?.undo();  // Undoes all
-                blurActiveElement();
-            }
-        );
+        $("#restart").addEventListener("click", () => this.field?.undo());  // Undoes all
 
         // Seed
-        this.seedInput = $("#seed");
-        this.seedOpenForm = $("#seedOpenForm");
-        this.seedOpenForm.addEventListener(
-            "submit",
-            event => {
-                event.preventDefault();
-
-                this.seedOverlay.show();
-                this.seedInput.value = this.seed;
-                this.seedInput.focus();
-                setTimeout(() => this.seedInput.select(), 0);
-            }
-        );
-        this.seedOverlay = new Overlay(
-            $("#seedOverlay"),
-            $("#seedForm"),
-            $("#seedCancelForm"),
-            () => {
+        const seedInput = $("#seed");
+        const seedDialog = new ModalDialog({
+            dialog: $("#seed-dialog"),
+            openButton: $("#seed-open"),
+            onOpen: () => seedInput.value = this.seed,
+            form: $("#seed-form"),
+            closeButton: $("#seed-cancel"),
+            submitButton: $("#seed-submit"),
+            onSubmit: () => {
                 this.initNewField(
                     this.field?.width,
                     this.field?.height,
                     this.field?.mineCount,
                     this.field?.isSolvable,
-                    this.seedInput.value
+                    seedInput.value
                 );
+                seedDialog.close();
             }
-        );
+        });
 
         // Undo
-        this.undoForm = $("#undoForm");
-        this.undoForm.addEventListener(
-            "submit",
-            event => {
-                event.preventDefault();
-
-                this.field?.undo(1);
-                blurActiveElement();
-            }
-        );
+        $("#undo").addEventListener("click", () => this.field?.undo(1));
 
         // Redo
-        this.redoForm = $("#redoForm");
-        this.redoForm.addEventListener(
-            "submit",
-            event => {
-                event.preventDefault();
-
-                this.field?.redo(1);
-                blurActiveElement();
-            }
-        );
+        $("#redo").addEventListener("click", () => this.field?.redo(1));
 
         // Hint
-        this.hintForm = $("#hintForm");
-        this.hintForm.addEventListener(
-            "submit",
-            event => {
-                event.preventDefault();
-
-                if (this.field !== null) {
+        $("#hint").addEventListener(
+            "click",
+            () => {
+                if (this.field != null) {
                     this.statistics.hintsRequested++;
                     this.display.hintSquare = Solver.getHint(this.field);
                 }
-                blurActiveElement();
             }
         );
 
         // Solve
-        this.solveForm = $("#solveForm");
-        this.solveForm.addEventListener(
-            "submit",
-            event => {
-                event.preventDefault();
-
-                if (this.field !== null) {
+        $("#solve").addEventListener(
+            "click",
+            () => {
+                if (this.field != null) {
                     this.statistics.solverUsages++;
                     Solver.solve(this.field);
                 }
-                blurActiveElement();
             }
         );
 
         // Preferences
-        this.enableMarksInput = $("#preferencesEnableMarks");
-        this.showTooManyFlagsHintsInput = $("#preferencesShowTooManyFlagsHints");
-        this.preferencesOpenForm = $("#preferencesOpenForm");
-        this.preferencesOpenForm.addEventListener(
-            "submit",
-            event => {
-                event.preventDefault();
+        const enableMarksInput = $("#preferences-enable-marks");
+        const showTooManyFlagsHintsInput = $("#preferences-show-too-many-flags-hints");
+        const preferencesDialog = new ModalDialog({
+            dialog: $("#preferences-dialog"),
+            openButton: $("#preferences-open"),
+            onOpen: () => {
+                enableMarksInput.checked = preferences.marksEnabled;
+                showTooManyFlagsHintsInput.checked = preferences.showTooManyFlagsHints;
+            },
+            form: $("#preferences-form"),
+            closeButton: $("#preferences-cancel"),
+            submitButton: $("#preferences-submit"),
+            onSubmit: () => {
+                preferences.marksEnabled = enableMarksInput.checked;
+                preferences.showTooManyFlagsHints = showTooManyFlagsHintsInput.checked;
 
-                this.enableMarksInput.checked = preferences.marksEnabled;
-                this.showTooManyFlagsHintsInput.checked = preferences.showTooManyFlagsHints;
-                this.preferencesOverlay.show();
-                blurActiveElement();
+                preferencesDialog.close();
             }
-        );
-        this.preferencesOverlay = new Overlay(
-            $("#preferencesOverlay"),
-            $("#preferencesForm"),
-            $("#preferencesCancelForm"),
-            () => {
-                preferences.marksEnabled = this.enableMarksInput.checked;
-                preferences.showTooManyFlagsHints = this.showTooManyFlagsHintsInput.checked;
-            }
-        );
+        });
 
         // Statistics
-        this.statisticsDiv = $("#statisticsDiv");
-        this.statisticsOpenForm = $("#statisticsOpenForm");
-        this.statisticsOpenForm.addEventListener(
-            "submit",
-            event => {
-                event.preventDefault();
-
-                this.statisticsOverlay.show();
-                blurActiveElement();
-            }
-        );
-        this.statisticsOverlay = new Overlay(
-            $("#statisticsOverlay"),
-            null,
-            $("#statisticsCloseForm")
-        );
-        this.statisticsResetForm = $("#statisticsResetForm");
-        this.statisticsResetForm.addEventListener(
-            "submit",
-            event => {
-                event.preventDefault();
-
+        this.statisticsDiv = $("#statistics-div");
+        new ModalDialog({
+            dialog: $("#statistics-dialog"),
+            openButton: $("#statistics-open"),
+            onOpen: () => this.updateStatistics(),
+            closeButton: $("#statistics-close"),
+            submitButton: $("#statistics-reset"),
+            onSubmit: () => {
                 if (!window.confirm("Are you sure you want to reset all statistics? This cannot be undone."))
                     return;
 
                 this.statistics.clear();
+                this.updateStatistics();
             }
-        );
-        this.updateStatistics();
+        });
 
         // High scores
-        this.highScoresDiv = $("#highScoresDiv");
-        this.highScoresOpenForm = $("#highScoresOpenForm");
-        this.highScoresOpenForm.addEventListener(
-            "submit",
-            event => {
-                event.preventDefault();
-
-                this.highScoresDiv.innerHTML = this.highScores.generateHtmlReport();
-                this.highScoresOverlay.show();
-                blurActiveElement();
-            }
-        );
-        this.highScoresOverlay = new Overlay(
-            $("#highScoresOverlay"),
-            null,
-            $("#highScoresCloseForm")
-        );
-        this.highScoresResetForm = $("#highScoresResetForm");
-        this.highScoresResetForm.addEventListener(
-            "submit",
-            event => {
-                event.preventDefault();
-
+        this.highScoresDiv = $("#high-scores-div");
+        new ModalDialog({
+            dialog: $("#high-scores-dialog"),
+            openButton: $("#high-scores-open"),
+            onOpen: () => this.highScoresDiv.innerHTML = this.highScores.generateHtmlReport(),
+            closeButton: $("#high-scores-close"),
+            submitButton: $("#high-scores-reset"),
+            onSubmit: () => {
                 if (!window.confirm("Are you sure you want to reset all high scores? This cannot be undone."))
                     return;
 
                 this.highScores.clear();
                 this.highScoresDiv.innerHTML = this.highScores.generateHtmlReport();
             }
-        );
+        });
 
         // Canvas
         this.canvas.addEventListener(
             "mousemove",
             event => {
-                this.display.mouseSquare = this.field?.getSquareOrElse(
-                    this.display.posToSquare({x: event.clientX, y: event.clientY}),
-                    null
-                );
+                const squarePos = this.display.posToSquare({x: event.clientX, y: event.clientY});
+                this.display.mouseSquare = this.field?.getSquareOrElse(squarePos, null) ?? null;
             }
         );
         this.canvas.addEventListener(
@@ -357,11 +250,11 @@ export class Game {
             "mousedown",
             event => {
                 event.preventDefault();
-                if (this.field === null) return;
+                if (this.field == null) return;
 
                 this.field.runUndoably(() => {
                     const coords = this.display.posToSquare({x: event.clientX, y: event.clientY});
-                    if (this.field === null || !this.field.hasSquareAt(coords)) return;
+                    if (this.field == null || !this.field.hasSquareAt(coords)) return;
 
                     switch (event.button) {
                         case 0:
@@ -370,7 +263,7 @@ export class Game {
                         case 2:
                             if (!this.leftDown) {
                                 const square = this.field.getSquareOrElse(coords);
-                                if (square !== null) {
+                                if (square != null) {
                                     if (square.hasFlag) {
                                         this.field.toggleFlag(coords);
                                         if (preferences.marksEnabled)
@@ -397,11 +290,11 @@ export class Game {
             "mouseup",
             event => {
                 event.preventDefault();
-                if (this.field === null) return;
+                if (this.field == null) return;
 
                 this.field.runUndoably(() => {
                     const coords = this.display.posToSquare({x: event.clientX, y: event.clientY});
-                    if (this.field === null || !this.field.hasSquareAt(coords)) return;
+                    if (this.field == null || !this.field.hasSquareAt(coords)) return;
 
                     switch (event.button) {
                         case 0:
@@ -459,7 +352,7 @@ export class Game {
      * @param height the height of the field
      * @param mineCount the number of mines to place in the field
      * @param solvable whether the field is guaranteed to be solvable
-     * @param seed the seed to generate the field width, or `null` if a new field should be chosen
+     * @param seed the seed to generate the field width, or `undefined` to use a random seed
      * @private
      */
     private initNewField(
@@ -467,7 +360,7 @@ export class Game {
         height: number = defaultDifficulty.height,
         mineCount: number = defaultDifficulty.mineCount,
         solvable: boolean = defaultDifficulty.solvable,
-        seed: string | null = null
+        seed?: string
     ) {
         this.seed = seed ?? "" + this.rng.uint32();
         this.field = new Field(
@@ -482,13 +375,11 @@ export class Game {
         let lastTime: number | null = null;
         window.clearInterval(this.statisticsTimer);
         this.statisticsTimer = window.setInterval(() => {
-            if (this.field === null) return;
+            if (this.field == null) return;
 
             const elapsedTime = this.field.elapsedTime;
             this.statistics.timeSpent += elapsedTime - (lastTime ?? 0);
             lastTime = elapsedTime;
-
-            this.updateStatistics();
         }, 1000);
     }
 }
diff --git a/src/main/js/HighScores.ts b/src/main/js/HighScores.ts
index eb30f13..f7022e3 100644
--- a/src/main/js/HighScores.ts
+++ b/src/main/js/HighScores.ts
@@ -1,7 +1,7 @@
+const {LocalStorage} = (window as any).fwdekker.storage;
+
 import {formatTime} from "./Common";
 import {difficulties, Difficulty} from "./Difficulty";
-// @ts-ignore
-const {Storage, LocalStorage} = window.fwdekker.storage;
 
 
 /**
diff --git a/src/main/js/Main.ts b/src/main/js/Main.ts
index e1d741c..d169b4c 100644
--- a/src/main/js/Main.ts
+++ b/src/main/js/Main.ts
@@ -1,5 +1,5 @@
-// @ts-ignore
-const {$, doAfterLoad, footer, header, nav} = window.fwdekker;
+const {doAfterLoad} = (window as any).fwdekker;
+
 import {waitForForkAwesome} from "./Common";
 import {BasicIconFont, ForkAwesomeFont} from "./Display";
 import {Game} from "./Game";
@@ -7,17 +7,6 @@ import {Preferences} from "./Preferences";
 
 
 doAfterLoad(() => {
-    // Initialize template
-    $("#nav").appendChild(nav("/Tools/Minesweeper/"));
-    $("#header").appendChild(header({title: "Minesweeper"}));
-    $("#footer").appendChild(footer({
-        vcsURL: "https://git.fwdekker.com/tools/minesweeper/",
-        version: "v%%VERSION_NUMBER%%"
-    }));
-    $("main").classList.remove("hidden");
-
-
-    // Start game
     const preferences = new Preferences();
     waitForForkAwesome(
         () => {
diff --git a/src/main/js/ModalDialog.ts b/src/main/js/ModalDialog.ts
new file mode 100644
index 0000000..fdce313
--- /dev/null
+++ b/src/main/js/ModalDialog.ts
@@ -0,0 +1,128 @@
+const {$} = (window as any).fwdekker;
+
+import {blurActiveElement} from "./Common";
+
+
+/**
+ * A modal dialog displayed in HTML.
+ */
+export class ModalDialog {
+    private readonly dialog: HTMLElement;
+    private readonly openButton?: HTMLElement;
+    private readonly onOpen?: () => void;
+
+
+    /**
+     * Constructs a new modal dialog wrapper.
+     *
+     * @param dialog the dialog maintained by this instance
+     * @param openButton the element that opens the dialog when clicked
+     * @param onOpen the callback to invoke when the dialog is opened
+     * @param form the form contained in the dialog
+     * @param closeButton the element that closes the dialog's form when clicked
+     * @param submitButton the element that submits the dialog's form when clicked
+     * @param onSubmit the callback to invoke when the dialog's form is submitted
+     */
+    constructor(
+        {
+            dialog,
+            openButton,
+            onOpen,
+            form,
+            closeButton,
+            submitButton,
+            onSubmit
+        }: {
+            dialog: HTMLElement,
+            openButton?: HTMLElement,
+            onOpen?: (() => void),
+            form?: HTMLFormElement,
+            closeButton?: HTMLElement,
+            submitButton?: HTMLElement,
+            onSubmit?: (() => void)
+        }
+    ) {
+        this.dialog = dialog;
+        this.openButton = openButton;
+        this.onOpen = onOpen;
+
+        document.addEventListener(
+            "click",
+            event => {
+                if (!(event.target instanceof Node)) return;
+
+                console.log("close");
+                if (event.target !== openButton && !this.dialog.contains(event.target) || this.dialog === event.target)
+                    this.close();
+            }
+        );
+        document.addEventListener(
+            "keydown",
+            event => {
+                if (event.key === "Escape" && this.isOpen())
+                    this.close();
+            }
+        );
+
+        openButton?.addEventListener(
+            "click",
+            event => {
+                event.preventDefault();
+
+                this.open();
+            }
+        );
+        closeButton?.addEventListener(
+            "click",
+            event => {
+                event.preventDefault();
+                this.close();
+            }
+        );
+
+        form?.addEventListener(
+            "submit",
+            event => {
+                event.preventDefault();
+                onSubmit?.();
+            }
+        );
+        submitButton?.addEventListener(
+            "click",
+            event => {
+                event.preventDefault();
+                onSubmit?.();
+            }
+        );
+    }
+
+
+    /**
+     * Opens the dialog.
+     */
+    open(): void {
+        console.log("opening");
+        blurActiveElement();
+        setTimeout(() => $("[autofocus]", this.dialog)?.focus(), 100);
+
+        this.dialog.setAttribute("open", "true");
+        this.onOpen?.();
+    }
+
+    /**
+     * Closes the dialog.
+     */
+    close(): void {
+        if (this.isOpen()) {
+            this.dialog.removeAttribute("open");
+            setTimeout(() => this.openButton?.focus(), 100);
+        }
+    }
+
+    /**
+     * Returns `true` if and only if this dialog is currently open.
+     */
+    isOpen(): boolean {
+        return this.dialog.hasAttribute("open");
+    }
+}
diff --git a/src/main/js/Preferences.ts b/src/main/js/Preferences.ts
index 714a4f6..fd5ade6 100644
--- a/src/main/js/Preferences.ts
+++ b/src/main/js/Preferences.ts
@@ -1,6 +1,6 @@
+const {LocalStorage} = (window as any).fwdekker.storage;
+
 import {BasicIconFont, IconFont} from "./Display";
-// @ts-ignore
-const {Storage, LocalStorage} = window.fwdekker.storage;
 
 
 /**
diff --git a/src/main/js/Solver.ts b/src/main/js/Solver.ts
index e590966..b002d87 100644
--- a/src/main/js/Solver.ts
+++ b/src/main/js/Solver.ts
@@ -220,7 +220,8 @@ export class Solver {
         if (!adjacentSquaresOnly)
             matrix.push(Array(unknowns.length).fill(1).concat(field.mineCount - field.flagCount));
 
-        return new Matrix(matrix).solveBinary()
+        return (new Matrix(matrix))
+            .solveBinary()
             .map((it, i) => it === undefined ? undefined : [it, unknowns[i]]);
     }
 
diff --git a/src/main/js/Statistics.ts b/src/main/js/Statistics.ts
index 6c68060..10049eb 100644
--- a/src/main/js/Statistics.ts
+++ b/src/main/js/Statistics.ts
@@ -1,6 +1,6 @@
+const {LocalStorage} = (window as any).fwdekker.storage;
+
 import {formatTime} from "./Common";
-// @ts-ignore
-const {Storage, LocalStorage} = window.fwdekker.storage;
 
 
 /**
diff --git a/src/main/js/UI.ts b/src/main/js/UI.ts
deleted file mode 100644
index 558e13b..0000000
--- a/src/main/js/UI.ts
+++ /dev/null
@@ -1,87 +0,0 @@
-import {blurActiveElement} from "./Common";
-
-
-/**
- * An overlay displayed in HTML.
- */
-export class Overlay {
-    private readonly overlay: HTMLDivElement;
-    private readonly submitForm: HTMLFormElement | null;
-    private readonly cancelForm: HTMLFormElement | null;
-
-
-    /**
-     * Constructs a new overlay.
-     *
-     * @param overlay the overlay element to show and hide
-     * @param submitForm the form that invokes `onSubmit` and closes the overlay when submitted
-     * @param cancelForm the form that closes the overlay when submitted
-     * @param onSubmit the callback to invoke when the form is submit
-     */
-    constructor(
-        overlay: HTMLDivElement,
-        submitForm: HTMLFormElement | null,
-        cancelForm: HTMLFormElement | null,
-        onSubmit: (() => void) | null = null
-    ) {
-        this.overlay = overlay;
-        overlay.addEventListener(
-            "mousedown",
-            event => {
-                if (event.target === overlay)
-                    this.hide();
-            }
-        );
-        document.addEventListener(
-            "keydown",
-            event => {
-                if (event.key === "Escape" && this.isVisible())
-                    this.hide();
-            }
-        );
-
-        this.submitForm = submitForm;
-        submitForm?.addEventListener(
-            "submit",
-            event => {
-                event.preventDefault();
-
-                this.hide();
-                onSubmit?.();
-            }
-        );
-
-        this.cancelForm = cancelForm;
-        cancelForm?.addEventListener(
-            "submit",
-            event => {
-                event.preventDefault();
-
-                this.hide();
-            }
-        );
-    }
-
-
-    /**
-     * Shows the overlay.
-     */
-    show(): void {
-        this.overlay.classList.remove("hidden");
-    }
-
-    /**
-     * Hides the overlay.
-     */
-    hide(): void {
-        this.overlay.classList.add("hidden");
-        blurActiveElement();
-    }
-
-    /**
-     * Returns `true` if and only if this overlay is currently visible.
-     */
-    isVisible(): boolean {
-        return !this.overlay.classList.contains("hidden");
-    }
-}