From b5dea59ede558677c3e75e0b6b976c0e9ba6387b Mon Sep 17 00:00:00 2001
From: Tim Jentzsch <commits@timjen.net>
Date: Tue, 15 Oct 2024 22:46:15 +0200
Subject: [PATCH 1/3] Fix detection for game loading

Now works for the default bevy app configuration
---
 assets/web/index.html | 20 ++++++++++++++++----
 1 file changed, 16 insertions(+), 4 deletions(-)
diff --git a/assets/web/index.html b/assets/web/index.html
index d21f98b..f32273d 100644
--- a/assets/web/index.html
+++ b/assets/web/index.html
@@ -89,14 +89,26 @@
     <script type="module">
       // Hide loading screen when the game starts.
       const loading_screen = document.getElementById("loading-screen");
-      const bevy = document.getElementById("bevy");
-      const observer = new MutationObserver(() => {
-        if (bevy.height > 1) {
+      const observer = new MutationObserver((records) => {
+        for (const record of records) {
+          for (const addedNode of record.addedNodes) {
+            if (addedNode instanceof HTMLCanvasElement) {
+              // A new canvas has been created, which means that the game has been loaded
+              // Hide the loading screen!
           loading_screen.style.display = "none";
           observer.disconnect();
+              break;
+            }
+          }
         }
       });
-      observer.observe(bevy, { attributeFilter: ["height"] });
+
+      observer.observe(document.body, {
+        subtree: false,
+        childList: true,
+        attributes: false,
+        characterData: false,
+      });
     </script>
 
     <script type="module">

From 5079d8f48e90d0922bcc71c04f42d227eae6a4ec Mon Sep 17 00:00:00 2001
From: Tim Jentzsch <commits@timjen.net>
Date: Tue, 15 Oct 2024 22:46:40 +0200
Subject: [PATCH 2/3] Adjust styling of index.html to work better for default
 Bevy app

---
 assets/web/index.html | 23 +++++++----------------
 1 file changed, 7 insertions(+), 16 deletions(-)

diff --git a/assets/web/index.html b/assets/web/index.html
index f32273d..55d42db 100644
--- a/assets/web/index.html
+++ b/assets/web/index.html
@@ -6,7 +6,7 @@
     <style>
       /* Styles for the loading screen */
       :root {
-        --web-bg-color: #282828;
+        --web-bg-color: #2b2c2f;
       }
 
       * {
@@ -30,7 +30,7 @@
         flex-direction: column;
       }
 
-      #game {
+      body {
         background-color: var(--web-bg-color);
       }
 
@@ -55,21 +55,12 @@
           transform: rotate(360deg);
         }
       }
-
-      #bevy {
-        /* Hide Bevy app before it loads */
-        height: 0;
-      }
     </style>
   </head>
 
-  <body>
-    <div id="game" class="center">
-      <div id="loading-screen" class="center">
-        <span class="spinner"></span>
-      </div>
-
-      <canvas id="bevy">Javascript and canvas support is required</canvas>
+  <body class="center">
+    <div id="loading-screen" class="center">
+      <span class="spinner"></span>
     </div>
 
     <script type="module">
@@ -95,8 +86,8 @@
             if (addedNode instanceof HTMLCanvasElement) {
               // A new canvas has been created, which means that the game has been loaded
               // Hide the loading screen!
-          loading_screen.style.display = "none";
-          observer.disconnect();
+              loading_screen.style.display = "none";
+              observer.disconnect();
               break;
             }
           }

From 0100bd1532f78ad02f86c61dfad622a75b6346eb Mon Sep 17 00:00:00 2001
From: Tim Jentzsch <commits@timjen.net>
Date: Wed, 16 Oct 2024 22:40:49 +0200
Subject: [PATCH 3/3] Avoid unnecessary work when checking for canvas element

---
 assets/web/index.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/assets/web/index.html b/assets/web/index.html
index 55d42db..476d79a 100644
--- a/assets/web/index.html
+++ b/assets/web/index.html
@@ -88,7 +88,7 @@
               // Hide the loading screen!
               loading_screen.style.display = "none";
               observer.disconnect();
-              break;
+              return;
             }
           }
         }
