Fade the map in after it is done loading

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

public/style.css

@@ -16,6 +16,11 @@ svg, object {
   height: 100%;
 }
 
+object {
+  opacity: 0;
+  transition: opacity 0.25s;
+}
+
 svg image {
   image-rendering: pixelated;
 }

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