From 329689138c944791a8cc93554a81272208ec6acd Mon Sep 17 00:00:00 2001
From: Catalin Constantin Mititiuc <webdevcat@proton.me>
Date: Mon, 16 Jun 2025 22:41:29 -0700
Subject: [PATCH] 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 @@
         </fieldset>
       </div>
 
+      <div class="map-placeholder">
+        Loading...
+      </div>
+
       <object type="image/svg+xml" data="map.svg"></object>
 
       <div id="status">
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);