Add bloons, optimize the flash initialization

public/flash/instantiateFlash.js

@@ -1,26 +1,32 @@
 const id = window.location.pathname.split("/").pop();
-id && RufflePlayer ? window.addEventListener("load", ()=>{
+if (id && RufflePlayer) {
-    const e = RufflePlayer.newest().createPlayer();
+    window.addEventListener("load", loadRuffle);
-    e.config = {
+} else {
-        preloader: !1,
+    document.querySelector("#loader").classList.add("hidden");
-        splashScreen: !1,
+    document.querySelector("#error").classList.remove("hidden");
-        unmuteOverlay: "hidden",
+}
-        autoplay: "on",
+
-        contextMenu: !1,
+function loadRuffle() {
-        showSwfDownload: !1
+  const ruffle = RufflePlayer.newest().createPlayer();
-    },
+  ruffle.config = {
-    e.style.width = "100%",
+      splashScreen: false,
-    e.style.height = "100%";
+      unmuteOverlay: "hidden",
-    const a = document.querySelector("#gameContainer");
+      autoplay: "on",
-    a == null || a.appendChild(e),
+      contextMenu: "on",
-    e.load(`/games/flash/${id}.swf`).then(()=>{
+      showSwfDownload: false
-        document.querySelector("#loader").classList.add("hidden"),
+  };
-        document.querySelector("#gameContainer").classList.remove("hidden")
+  ruffle.style.width = "100%";
-    }
+  ruffle.style.height = "100%";
-    ).catch(o=>{
+  const gameContainer = document.querySelector("#gameContainer");
-        console.log(o)
+  if (gameContainer != null) {
-    }
+      gameContainer.appendChild(ruffle);
-    )
+  }
+  ruffle.load(`/games/flash/${id}.swf`).then(() => {
+      let loader = document.querySelector("#loader");
+      loader.classList.remove("loading");
+      loader.classList.add("hidden");
+      document.querySelector("#gameContainer").classList.remove("hidden");
+  });
+  // Stop the event listener, saves miniscule amount of memory
+  window.removeEventListener("load", loadRuffle);
 }
-) : (document.querySelector("#loader").classList.add("hidden"),
-document.querySelector("#error").classList.remove("hidden"));

public/games

@@ -1 +1 @@
-Subproject commit 98c48fe6bf57706348442ac5b963055fa0e3599f
+Subproject commit e3170261ecfbd6073322b3cfa500729936b5fa2e

src/components/LoadingSpinner.astro

@@ -0,0 +1,29 @@
+<img src="/favicon.svg" class="load-img" />
+<svg class="loading-spinner" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+  <circle class="full-circle" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+  <path class="indicator" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+</svg>
+
+<style>
+  @keyframes spin {
+    to {
+      transform: rotate(360deg);
+    }
+  }
+  .loading-spinner {
+    width: 2rem;
+    height: 2rem;
+    animation: spin 1s linear infinite;
+  }
+  .load-img {
+    width: 2.5rem;
+    height: 2.5rem;
+    margin: 0.5rem;
+  }
+  .full-circle {
+    opacity: 25%;
+  }
+  .indicator {
+    opacity: 75%;
+  }
+</style>

src/components/ProxyRegistrar.astro

@@ -53,37 +53,37 @@
   }
 
   async function loadPageExtensions() {
-      try {
+    try {
-        let iframe = document.getElementById("proxy-frame") as HTMLIFrameElement;
+      let iframe = document.getElementById("proxy-frame") as HTMLIFrameElement;
-        let db = loadIDB("AluDB", 1);
+      let db = loadIDB("AluDB", 1);
-        db.onsuccess = () => {
+      db.onsuccess = () => {
-          let store = GetStore("InstalledExtensions", "readonly");
+        let store = GetStore("InstalledExtensions", "readonly");
-          let request = store.getAll();
+        let request = store.getAll();
-          request.onsuccess = () => {
+        request.onsuccess = () => {
-            let extensions = request.result;
+          let extensions = request.result;
-            extensions.forEach((extension: IExtensionMetadata) => {
+          extensions.forEach((extension: IExtensionMetadata) => {
-              // Eval the extension script inside of the iframe
+            // Eval the extension script inside of the iframe
-              if (!(extension.type == "page")) return;
+            if (!(extension.type == "page")) return;
-              if (extension.pages && extension.pages.length > 0) {
+            if (extension.pages && extension.pages.length > 0) {
-                // Check if the current URL matches the extension's URL
+              // Check if the current URL matches the extension's URL
-                extension.pages.forEach((url) => {
+              extension.pages.forEach((url) => {
-                  console.log(url);
+                console.log(url);
-                  console.log(iframe.contentWindow!.__uv$location.host);
+                console.log(iframe.contentWindow!.__uv$location.host);
-                  if (iframe.contentWindow!.__uv$location.host.includes(url)) {
+                if (iframe.contentWindow!.__uv$location.host.includes(url)) {
-                    let script = extension.script;
+                  let script = extension.script;
-                    let scriptElement = document.createElement("script");
+                  let scriptElement = document.createElement("script");
-                    scriptElement.src = script;
+                  scriptElement.src = script;
-                    scriptElement.type = "module";
+                  scriptElement.type = "module";
-                    iframe.contentDocument!.head.appendChild(scriptElement);
+                  iframe.contentDocument!.head.appendChild(scriptElement);
-                  }
+                }
-                });
+              });
-              }
+            }
-            });
+          });
-          };
         };
-      } catch (err) {
+      };
-        console.error(`Failed load extension scripts: ${err}`);
+    } catch (err) {
-      }
+      console.error(`Failed load extension scripts: ${err}`);
+    }
   }
 
   async function loadContent() {

src/json/games.json

@@ -51,6 +51,12 @@
     "slug": "bloons-tower-defense-4",
     "flash": true
   },
+  "bloons": {
+    "name": "Bloons",
+    "image": "/games/flash/img/bloons.webp",
+    "slug": "bloons",
+    "flash": true
+  },
   "cannon-basketball-4": {
     "name": "Cannon Basketball 4",
     "image": "/games/cannon-basketball-4/logo.png",

src/layouts/Layout.astro

@@ -45,8 +45,8 @@ const { title, optionalPreloads } = Astro.props;
         return <link rel="preload" href={item.href} as={item.as} />;
       })
     }
-    <script src="https://www.googletagmanager.com/gtag/js?id=G-P1JX4G9KSF" type="text/partytown" is:inline></script>
+    <script src="https://www.googletagmanager.com/gtag/js?id=G-P1JX4G9KSF" is:inline></script>
-    <script type="text/partytown" is:inline>
+    <script is:inline>
       window.dataLayer = window.dataLayer || [];
       function gtag() {
         window.dataLayer.push(arguments);

src/pages/game/[game].astro

@@ -31,8 +31,9 @@ if (!gameData) {
           <iframe scrolling="no" src={`/game/unity/${gameData.slug}`} title={gameData.name} id="game-frame" />
         ) : gameData.flash ? (
           <iframe scrolling="no" src={`/game/flash/${gameData.slug}`} title={gameData.name} id="game-frame" />
-        ) : <iframe scrolling="no" src={`/games/${gameData.slug}`} title={gameData.name} id="game-frame" />
+        ) : (
-          
+          <iframe scrolling="no" src={`/games/${gameData.slug}`} title={gameData.name} id="game-frame" />
+        )
       }
       <div class="game-info">
         <div class="game-info-top">

src/pages/game/flash/[game].astro

@@ -1,4 +1,6 @@
 ---
+import LoadingSpinner from "@components/LoadingSpinner.astro";
+
 export const prerender = false;
 ---
 
@@ -9,49 +11,42 @@ export const prerender = false;
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Radon Games</title>
     <script src="https://cdn.jsdelivr.net/npm/@ruffle-rs/ruffle@0.1.0-nightly.2024.7.23/ruffle.min.js" is:inline></script>
-    
     <script type="module" src="/flash/instantiateFlash.js" is:inline defer></script>
-    <link rel="stylesheet" href="/unity/index.css">
+    <link rel="stylesheet" href="/unity/index.css" />
   </head>
-  <body class="w-full h-full bg-slate-800 text-slate-200">
+  <body>
-    <div
+    <div id="loader" class="loading">
-      id="loader"
+      <LoadingSpinner/>
-      class="w-full h-full flex items-center justify-center flex-col gap-5"
-    >
-      <img src="/favicon.svg" class="w-10" />
-      <svg
-        class="animate-spin h-5 w-5"
-        xmlns="http://www.w3.org/2000/svg"
-        fill="none"
-        viewBox="0 0 24 24"
-      >
-        <circle
-          class="opacity-25"
-          cx="12"
-          cy="12"
-          r="10"
-          stroke="currentColor"
-          stroke-width="4"
-        ></circle>
-        <path
-          class="opacity-75"
-          fill="currentColor"
-          d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
-        ></path>
-      </svg>
     </div>
-    <div class="h-full w-full hidden" id="error">
+    <div id="gameContainer" class="game hidden"></div>
-      <div
+  </body>
-        class="w-full h-full flex items-center justify-center flex-col gap-5"
-      >
-        <img src="logo.png" class="w-10" />
-        <p>An error occurred.</p>
-        <p class="underline cursor-pointer" onclick="location.reload()">
-          Refresh
-        </p>
-      </div>
-    </div>
-    <div id="gameContainer" class="w-full h-full hidden bg-white"></div>
-  <script defer src="https://static.cloudflareinsights.com/beacon.min.js/vcd15cbe7772f49c399c6a5babf22c1241717689176015" integrity="sha512-ZpsOmlRQV6y907TI0dKBHq9Md29nnaEIPlkf84rnaERnq6zvWvPUqr2ft8M1aS28oN72PdrCzSjY4U6VaAw1EQ==" data-cf-beacon='{"rayId":"8a78f4d95f1f61cf","version":"2024.7.0","r":1,"token":"cf313dfff389483fae99876f60faccea","serverTiming":{"name":{"cfL4":true}}}' crossorigin="anonymous"></script>
-</body>
 </html>
+
+<style>
+  body {
+    width: 100%;
+    height: 100%;
+    background-color: #1f2937;
+    color: #f3f4f6;
+  }
+
+  .loading {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 5px;
+    width: 100%;
+    height: 100%;
+  }
+
+  .game {
+    width: 100%;
+    height: 100%;
+    background-color: #fff;
+  }
+
+  .hidden {
+    display: none;
+  }
+</style>