Remove inline styles

This commit is contained in:
Florine W. Dekker 2021-04-28 13:51:53 +02:00
parent 4429b627bb
commit df985be394
Signed by: FWDekker
GPG Key ID: B1B567AF58D6EE0F
7 changed files with 22 additions and 21 deletions

BIN
package-lock.json generated

Binary file not shown.

View File

@ -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"
}
}

View File

@ -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;

View File

@ -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>

View File

@ -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();

View File

@ -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

View File

@ -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");
}
}