Web Dev Solutions

Catalin Mititiuc

From c23d9be9545d714d90a380197ba5e8411e73d6df Mon Sep 17 00:00:00 2001 From: Catalin Mititiuc Date: Mon, 22 Apr 2024 12:09:50 -0700 Subject: Fade the map in after it is done loading --- public/index.html | 4 ++++ public/style.css | 5 +++++ src/index.js | 6 ++++++ 3 files changed, 15 insertions(+) diff --git a/public/index.html b/public/index.html index 68acea4..a60db29 100644 --- a/public/index.html +++ b/public/index.html @@ -143,6 +143,10 @@ +
+ Loading... +
+
diff --git a/public/style.css b/public/style.css index 00d9d74..a8fa57a 100644 --- a/public/style.css +++ b/public/style.css @@ -16,6 +16,11 @@ svg, object { height: 100%; } +object { + opacity: 0; + transition: opacity 0.25s; +} + svg image { image-rendering: pixelated; } diff --git a/src/index.js b/src/index.js index cb746f4..617e953 100644 --- a/src/index.js +++ b/src/index.js @@ -75,6 +75,12 @@ const RecordSheet = new function () { }; }; +const mapPlaceholder = document.querySelector('.map-placeholder'); +document.querySelector('object').addEventListener('load', function () { + mapPlaceholder.remove(); + this.style.opacity = 1; +}); + window.addEventListener('load', () => { const svg = document.querySelector('object').contentDocument.querySelector('svg'), game = new Game(svg); -- cgit v1.2.3