Merge pull request #335 from johanhelsing/pages-website-simple

Create a GitHub pages site with the `bevy_ggrs` example (simple)
johanhelsing · Jan 12, 2024 · b933e42 · b933e42
2 parents c8bf324 + c664044
commit b933e42
Show file tree

Hide file tree

Showing 3 changed files with 306 additions and 3 deletions.
diff --git a/.github/workflows/website.yml b/.github/workflows/website.yml
@@ -0,0 +1,56 @@
+on:
+  push:
+    branches:
+      - main
+
+name: Website
+
+jobs:
+  build:
+    name: Build Examples
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout sources
+        uses: actions/checkout@v3
+
+      - name: Install stable toolchain
+        uses: dtolnay/rust-toolchain@stable
+        with:
+          toolchain: stable
+          target: wasm32-unknown-unknown
+
+      #- name: Rust Cache
+      #  uses: Swatinem/rust-cache@v2.5.0
+
+      - name: Install bevy_wasm_pack
+        run: cargo install --git https://github.com/johanhelsing/bevy_wasm_pack
+
+      - name: Build bevy_ggrs example
+        run: bevy_wasm_pack dist bevy_ggrs_example --dir-name bevy_ggrs
+
+      - name: Copy index.html
+        run: cp website/index.html dist/index.html
+
+      - name: Copy assets
+        run: cp -r examples/bevy_ggrs/assets dist/assets
+
+      - name: Upload GitHub Pages artifact
+        uses: actions/upload-pages-artifact@v1.0.9
+        with:
+          path: dist
+
+  deploy:
+    name: Deploy Pages
+    needs:
+      - build
+    permissions:
+      pages: write
+      id-token: write
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    runs-on: ubuntu-latest
+    steps:
+      - name: Deploy GitHub Pages site
+        id: deployment
+        uses: actions/deploy-pages@v2.0.2
diff --git a/examples/bevy_ggrs/Cargo.toml b/examples/bevy_ggrs/Cargo.toml
@@ -27,9 +27,8 @@ bevy = { version = "0.12", default-features = false, features = [
   "bevy_ui",
   "bevy_text",
   "bevy_asset",
-  "ktx2",
-  "zstd",
-  "tonemapping_luts",
+  "bevy_sprite",
+  "png",
   "webgl2",
   # gh actions runners don't like wayland
   "x11",

diff --git a/website/index.html b/website/index.html
@@ -0,0 +1,248 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width,
+      initial-scale=1, maximum-scale=1, user-scalable=0" />
+  <script async defer data-domain="johanhelsing.studio" src="https://plausible.banan.land/js/plausible.js"></script>
+
+
+  <style>
+    html {
+      height: 100%;
+      width: 100%;
+      /* there is a sub-pixel width visible on the right in embeds, making it black makes it less noticeable */
+      background: #000;
+    }
+
+    body {
+      background: #282828;
+      width: 100%;
+      height: 100%;
+      overflow: hidden;
+      margin: 0;
+      display: flex;
+      user-select: none;
+      /* Avoid scrolling and other pesky behaviors on mobile */
+      touch-action: none;
+    }
+
+    canvas {
+      background: #282828;
+      width: 100vw;
+      height: 100%;
+    }
+  </style>
+
+  <!-- Loading -->
+  <style>
+    :root {
+      --main-bg-color: #282828;
+      --logo-color: #d3aa77;
+    }
+
+    .jgjk_splash_bg {
+      color: var(--logo-color);
+      background: var(--main-bg-color);
+      width: 100vw;
+      height: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      opacity: 1;
+      z-index: 5;
+      position: absolute;
+      pointer-events: none;
+      flex-direction: column;
+      ;
+    }
+
+    .jgjk_splash_logo {
+      width: 55%;
+      aspect-ratio: 360 / 38;
+      opacity: 0;
+      pointer-events: none;
+      margin: 1.2vmin;
+    }
+
+    .jgjk_splash_logo_visible {
+      transition: opacity 0.4s ease-in;
+      opacity: 1;
+    }
+
+    .jgjk_splash_logo_hidden {
+      transition: opacity 0.6s ease-out;
+      opacity: 0;
+    }
+
+    .jgjk_splash_hidden {
+      opacity: 0;
+      transition: opacity 0.4s ease-out;
+    }
+
+    .jgjk_loading_bar {
+      display: block;
+      width: 90vmax;
+      max-width: 55%;
+      visibility: visible;
+      opacity: 1;
+      transition: opacity 2s linear;
+      display: flex;
+      align-items: center;
+      margin-bottom: 5vh;
+    }
+
+    @keyframes slide {
+      100% {
+        background-position: 100% 100%;
+      }
+    }
+
+    .jgjk_loading_fill {
+      height: 0.5vmin;
+      min-height: 0.4vw;
+      border-radius: 100vw;
+      background: #ccc;
+      width: 1%;
+      /* transition: width 1s cubic-bezier(0.65, 0, 0.35, 1); */
+      /* box-shadow: 0px 0px 1vmin 0px #000; */
+      box-shadow: 0px 0px 0.3vmin 0px #000;
+    }
+
+    .jgjk_logo_text {
+      fill: var(--logo-color);
+    }
+  </style>
+</head>
+
+<script type="module">
+  window.addEventListener("touchstart", ev => ev.preventDefault());
+  window.addEventListener("touchend", ev => ev.preventDefault());
+
+  function sleep(ms) {
+    return new Promise(resolve => setTimeout(resolve, ms));
+  }
+  const logo = document.getElementsByClassName("jgjk_splash_logo")[0];
+  const splash_bg = document.getElementsByClassName("jgjk_splash_bg")[0];
+  const loading_fill = document.getElementsByClassName("jgjk_loading_fill")[0];
+
+  let loadingFinished = false;
+  let resolveLoading;
+  window.jgjkSplash = {
+    loadingFinished() {
+      loadingFinished = true;
+      resolveLoading && resolveLoading();
+    },
+    loadingProgress(progress) {
+      loading_fill.style.width = `${progress * 100}%`
+    }
+  };
+
+  await sleep(300);
+  logo.classList.add("jgjk_splash_logo_visible");
+  await sleep(2000);
+
+  if (!loadingFinished) {
+    // TODO: show the progress bar
+    await new Promise(resolve => resolveLoading = resolve);
+  }
+  await sleep(300);
+
+  // We're done :), hide the splash screen
+  splash_bg.classList.add("jgjk_splash_hidden");
+
+  // also try to focus the iframe
+  document.getElementsByTagName("canvas")[0].focus()
+</script>
+
+<body oncontextmenu="return false">
+  <div class="jgjk_splash_bg">
+    <svg class="jgjk_splash_logo" width="117.5mm" height="19.05mm" version="1.1" viewBox="0 0 117.5 19.05" xmlns="http://www.w3.org/2000/svg">
+    <g transform="translate(-74.386 -117.66)">
+      <path d="m137.4 117.66c-0.37253 0-0.67709 0.12686-0.91416 0.38086-0.23706 0.23706-0.35605 0.54214-0.35605 0.91467v16.205c0 0.37253 0.11899 0.68548 0.35605 0.93948 0.23707 0.23706 0.54163 0.35553 0.91416 0.35553 0.3556 0 0.65177-0.11847 0.88883-0.35553 0.254-0.254 0.38138-0.56695 0.38138-0.93948v-6.7314c0-0.59267 0.13524-1.1342 0.40617-1.6252 0.28787-0.49106 0.68573-0.88053 1.1937-1.1684 0.52493-0.28787 1.1178-0.43201 1.7782-0.43201 0.71119 0 1.2616 0.14414 1.6511 0.43201 0.4064 0.28787 0.68579 0.67734 0.83819 1.1684 0.16933 0.49107 0.25373 1.0326 0.25373 1.6252v6.7314c0 0.37253 0.11847 0.68548 0.35553 0.93948 0.23707 0.23706 0.54214 0.35553 0.91468 0.35553 0.3556 0 0.65177-0.11847 0.88883-0.35553 0.254-0.254 0.38137-0.56695 0.38137-0.93948v-6.7314c0-1.016-0.13576-1.947-0.40669-2.7936-0.254-0.84667-0.7027-1.5155-1.3462-2.0066-0.64347-0.50799-1.5493-0.76222-2.7177-0.76222-0.57574 0-1.1178 0.10169-1.6258 0.30489-0.50799 0.18626-0.97348 0.44049-1.3968 0.76223-0.4064 0.32173-0.75393 0.67713-1.0418 1.0666-0.04918 0.0707-0.08244 0.13965-0.1266 0.2098v-6.2549c0-0.37253-0.12738-0.67761-0.38138-0.91467-0.23706-0.254-0.53323-0.38086-0.88883-0.38086zm14.732 0c-0.37254 0-0.67709 0.12686-0.91416 0.38086-0.23707 0.23706-0.35553 0.54214-0.35553 0.91467v16.408c0 0.37253 0.11846 0.67709 0.35553 0.91416 0.23707 0.23706 0.54162 0.35605 0.91416 0.35605 0.3556 0 0.65228-0.11899 0.88935-0.35605 0.254-0.254 0.38085-0.55856 0.38085-0.91416v-0.63976c0.25822 0.2998 0.5539 0.59105 0.91416 0.86817 0.44027 0.32173 0.94821 0.59274 1.5239 0.81287 0.57573 0.2032 1.1854 0.30489 1.8288 0.30489 1.1515 0 2.1846-0.29617 3.099-0.88883 0.9144-0.6096 1.6425-1.4394 2.1844-2.4893 0.54186-1.0499 0.81287-2.2524 0.81287-3.607 0-1.3547-0.27101-2.5482-0.81287-3.5812-0.54187-1.0499-1.2784-1.8713-2.2097-2.4639-0.9144-0.59267-1.9644-0.88884-3.1497-0.88884-0.57573 0-1.1345 0.10169-1.6764 0.30489-0.52493 0.18627-0.99932 0.43998-1.4226 0.76171-0.4064 0.32174-0.74503 0.66036-1.016 1.016-0.03181 0.03976-0.04719 0.0783-0.07597 0.11783v-6.0358c0-0.37253-0.12685-0.67761-0.38085-0.91467-0.23707-0.254-0.53375-0.38086-0.88935-0.38086zm-36.271 2.2862c-0.3556 0-0.66016 0.12685-0.91416 0.38085-0.23707 0.23707-0.35553 0.54162-0.35553 0.91416v2.0066h-1.3973c-0.33867 0-0.62645 0.11008-0.86352 0.33022-0.22013 0.22013-0.33021 0.49952-0.33021 0.83819 0 0.32173 0.11008 0.60112 0.33021 0.83819 0.23707 0.22013 0.52485 0.33021 0.86352 0.33021h1.3973v7.5442c0 0.8128 0.11846 1.4476 0.35553 1.9048 0.23707 0.44026 0.53324 0.76211 0.88883 0.96531 0.37254 0.2032 0.75362 0.33006 1.1431 0.38086 0.38946 0.0508 0.72809 0.07596 1.016 0.07596 0.508 0 0.98187-0.12685 1.4221-0.38085 0.44027-0.254 0.66043-0.58424 0.66043-0.99064 0-0.32173-0.0844-0.57544-0.25373-0.76171-0.16934-0.18627-0.35543-0.27957-0.55863-0.27957s-0.38141 0.03407-0.53381 0.1018c-0.13547 0.06774-0.2964 0.10129-0.48266 0.10129-0.18627 0-0.37236-0.03355-0.55862-0.10129-0.16934-0.06773-0.30458-0.1951-0.40618-0.38137s-0.15245-0.43159-0.15245-0.73639v-7.4424h2.0319c0.33867 0 0.61806-0.11008 0.83819-0.33021 0.23707-0.22013 0.35554-0.49062 0.35554-0.81236 0-0.33866-0.11847-0.61805-0.35554-0.83819-0.22013-0.23706-0.49952-0.35605-0.83819-0.35605h-2.0319v-2.0066c0-0.37254-0.11846-0.67709-0.35553-0.91416-0.23707-0.254-0.54214-0.38085-0.91467-0.38085zm-12.852 2.8448c-1.1345 0-2.1672 0.29617-3.0985 0.88884-0.9144 0.59266-1.6425 1.4141-2.1844 2.4639-0.54187 1.0329-0.81287 2.2349-0.81287 3.6065 0 1.3377 0.271 2.5318 0.81287 3.5817 0.54187 1.0499 1.2784 1.8797 2.2097 2.4893 0.93134 0.59266 1.9813 0.88883 3.1497 0.88883 0.6604 0 1.2784-0.11008 1.8542-0.33021 0.57574-0.23707 1.0753-0.52485 1.4986-0.86352 0.36016-0.30253 0.63817-0.6128 0.86351-0.92759v0.57206c0 0.37253 0.11847 0.68548 0.35554 0.93948 0.23706 0.23706 0.54214 0.35553 0.91467 0.35553 0.3556 0 0.65177-0.11847 0.88883-0.35553 0.254-0.254 0.38086-0.56695 0.38086-0.93948v-10.973c0-0.37254-0.12686-0.67709-0.38086-0.91416-0.23706-0.254-0.53323-0.38137-0.88883-0.38137-0.37253 0-0.67761 0.12737-0.91467 0.38137-0.23707 0.254-0.35554 0.55856-0.35554 0.91416v0.51935c-0.19125-0.22259-0.40648-0.43956-0.66042-0.64648-0.4572-0.37253-0.99921-0.67709-1.6257-0.91415-0.6096-0.23707-1.2785-0.35554-2.0066-0.35554zm25.857 0c-1.3039 0-2.4555 0.30456-3.4546 0.91416-0.99907 0.6096-1.778 1.4394-2.3368 2.4892-0.5588 1.0329-0.83819 2.2181-0.83819 3.5559 0 1.3208 0.26261 2.5065 0.78755 3.5564 0.54186 1.0499 1.2956 1.8796 2.2608 2.4892 0.98213 0.6096 2.1332 0.91416 3.454 0.91416 0.89747 0 1.7189-0.11008 2.4639-0.33021 0.74506-0.22014 1.3379-0.49953 1.7782-0.83819 0.4572-0.3556 0.68575-0.71991 0.68575-1.0924 0-0.33867-0.10169-0.61806-0.30489-0.8382-0.18627-0.23706-0.46566-0.35553-0.83819-0.35553-0.32174 0-0.56706 0.08492-0.73639 0.25425-0.16934 0.1524-0.3895 0.30494-0.66043 0.45733-0.22013 0.11854-0.49952 0.21971-0.83819 0.30438-0.32173 0.06773-0.73689 0.1018-1.2449 0.1018-0.84666 0-1.5915-0.20338-2.235-0.60978-0.62653-0.4064-1.1261-0.9568-1.4986-1.6511-0.3556-0.69427-0.5333-1.4816-0.5333-2.3621s0.1777-1.6679 0.5333-2.3621c0.37253-0.69427 0.88047-1.2447 1.5239-1.6511 0.6604-0.4064 1.4393-0.60927 2.3368-0.60927 0.28786 0 0.60971 0.03355 0.96531 0.10129 0.37254 0.06773 0.65193 0.15265 0.8382 0.25425 0.2032 0.11853 0.37251 0.237 0.50798 0.35553 0.13546 0.11853 0.27909 0.22022 0.43149 0.30489 0.16934 0.08467 0.38111 0.12712 0.63511 0.12712 0.32173 0 0.56757-0.11898 0.7369-0.35605 0.18627-0.254 0.27906-0.52448 0.27906-0.81235 0-0.4572-0.20287-0.85558-0.60927-1.1942-0.4064-0.3556-0.9657-0.62609-1.6769-0.81236-0.69427-0.2032-1.4984-0.30489-2.4128-0.30489zm43.586 0c-1.2531 0-2.3963 0.30456-3.4292 0.91416-1.016 0.59267-1.8285 1.4141-2.4381 2.4639-0.59266 1.0329-0.88935 2.2354-0.88935 3.607 0 1.3547 0.29669 2.5566 0.88935 3.6065 0.6096 1.0329 1.4221 1.846 2.4381 2.4386 1.0329 0.59266 2.1762 0.88883 3.4292 0.88883 1.27 0 2.4127-0.29617 3.4287-0.88883 1.016-0.59267 1.8206-1.4057 2.4133-2.4386 0.6096-1.0499 0.91416-2.2518 0.91416-3.6065 0-1.3716-0.30456-2.5741-0.91416-3.607-0.59266-1.0499-1.3973-1.8713-2.4133-2.4639-1.016-0.6096-2.1587-0.91416-3.4287-0.91416zm-91.364 0.07597c-0.59267 0-1.1431 0.10169-1.6511 0.30489-0.508 0.2032-0.97348 0.46581-1.3968 0.78755-0.4064 0.32173-0.74503 0.67713-1.016 1.0666-0.039495 0.05677-0.065546 0.11205-0.1018 0.16846v-0.80356c0-0.37254-0.12686-0.67709-0.38086-0.91416-0.23707-0.254-0.53324-0.38086-0.88883-0.38086-0.37253 0-0.67761 0.12686-0.91467 0.38086-0.23707 0.23707-0.35553 0.54162-0.35553 0.91416v10.77c0 0.37253 0.11847 0.68548 0.35553 0.93948 0.23707 0.23706 0.54214 0.35553 0.91467 0.35553 0.3556 0 0.65177-0.11847 0.88883-0.35553 0.254-0.254 0.38086-0.56695 0.38086-0.93948v-6.7314c0-0.59267 0.13576-1.1342 0.40669-1.6252 0.28787-0.49106 0.68573-0.88053 1.1937-1.1684 0.508-0.28787 1.0919-0.43201 1.7523-0.43201 0.69427 0 1.2363 0.14414 1.6257 0.43201s0.66047 0.67734 0.81287 1.1684c0.16933 0.49107 0.25373 1.0326 0.25373 1.6252v6.7314c0 0.37253 0.11898 0.68548 0.35605 0.93948 0.23707 0.23706 0.54162 0.35553 0.91416 0.35553s0.67709-0.11847 0.91416-0.35553c0.23707-0.254 0.35605-0.56695 0.35605-0.93948v-6.7055c0-0.59267 0.14363-1.1347 0.4315-1.6257 0.28787-0.49107 0.68573-0.88054 1.1937-1.1684 0.52493-0.3048 1.1178-0.45733 1.7782-0.45733 0.69427 0 1.2363 0.15253 1.6257 0.45733 0.4064 0.28787 0.68579 0.67734 0.83819 1.1684 0.16933 0.49106 0.25373 1.0331 0.25373 1.6257v6.7055c0 0.37253 0.11847 0.68548 0.35553 0.93948 0.254 0.23706 0.55907 0.35553 0.91467 0.35553 0.37253 0 0.67709-0.11847 0.91416-0.35553 0.23707-0.254 0.35553-0.56695 0.35553-0.93948v-6.7314c0-1.0329-0.12686-1.9639-0.38086-2.7936-0.254-0.84667-0.7027-1.5155-1.3462-2.0066-0.64347-0.50799-1.5493-0.76222-2.7177-0.76222-0.7112 0-1.3801 0.15253-2.0066 0.45733-0.62653 0.28787-1.1685 0.66057-1.6257 1.1178-0.41079 0.41079-0.7162 0.82118-0.93534 1.232-0.24968-0.75838-0.63691-1.3845-1.1731-1.8671-0.67733-0.62653-1.6424-0.93999-2.8954-0.93999zm100.81 0.15244c-0.33866 0-0.64322 0.12686-0.91415 0.38086-0.254 0.23706-0.38086 0.53375-0.38086 0.88935 0 0.28787 0.09279 0.54158 0.27905 0.76171l3.8602 4.8679-3.7584 4.6571c-0.2032 0.23707-0.30489 0.49968-0.30489 0.78755 0 0.32173 0.13576 0.59274 0.40669 0.81287s0.55032 0.33021 0.83819 0.33021c0.4064 0 0.74503-0.1777 1.016-0.5333l3.2794-4.192 3.3243 4.192c0.28787 0.3556 0.63488 0.5333 1.0413 0.5333 0.32173 0 0.61842-0.12685 0.88935-0.38085 0.27094-0.254 0.40618-0.55069 0.40618-0.88936 0-0.28786-0.0933-0.54157-0.27957-0.76171l-3.839-4.8416 3.7124-4.6581c0.11854-0.11854 0.19455-0.24539 0.22841-0.38086 0.0508-0.1524 0.07597-0.29655 0.07597-0.43201 0-0.3048-0.11847-0.56742-0.35554-0.78755-0.22013-0.23707-0.50791-0.35554-0.86351-0.35554-0.38947 0-0.72809 0.195-1.016 0.58446l-3.1936 4.2494-3.4101-4.3005c-0.27093-0.3556-0.61846-0.5333-1.0418-0.5333zm-78.511 2.1084c0.79587 0 1.4899 0.20287 2.0826 0.60927 0.6096 0.4064 1.084 0.95679 1.4227 1.6511 0.33866 0.69426 0.50797 1.4816 0.50797 2.3621 0 0.8636-0.16931 1.6509-0.50797 2.3621-0.33867 0.69426-0.81306 1.2447-1.4227 1.6511-0.59266 0.4064-1.2867 0.60978-2.0826 0.60978-0.79586 0-1.4988-0.20338-2.1084-0.60978-0.59266-0.4064-1.0581-0.9568-1.3968-1.6511-0.33867-0.7112-0.50798-1.4985-0.50798-2.3621 0-0.88053 0.16931-1.6679 0.50798-2.3621 0.33867-0.69427 0.81254-1.2447 1.4221-1.6511s1.3041-0.60927 2.0831-0.60927zm53.924 0c0.79587 0 1.4904 0.20287 2.0831 0.60927s1.0582 0.95679 1.3968 1.6511c0.3556 0.67733 0.53331 1.4563 0.53331 2.3368 0 0.8636-0.17771 1.6509-0.53331 2.3621-0.33866 0.7112-0.80414 1.27-1.3968 1.6764s-1.2872 0.60978-2.0831 0.60978c-0.8128 0-1.5241-0.20338-2.1337-0.60978-0.59266-0.4064-1.0581-0.9568-1.3968-1.6511-0.33867-0.7112-0.50798-1.5069-0.50798-2.3874 0-0.88054 0.16931-1.6595 0.50798-2.3368 0.33867-0.69427 0.80415-1.2447 1.3968-1.6511 0.6096-0.4064 1.3209-0.60927 2.1337-0.60927zm15.139 0c0.79587 0 1.5072 0.20287 2.1337 0.60927 0.64347 0.38946 1.1514 0.93147 1.5239 1.6257 0.37253 0.67733 0.55862 1.482 0.55862 2.4133 0 0.89746-0.18609 1.6932-0.55862 2.3874-0.37253 0.69426-0.88047 1.2363-1.5239 1.6257-0.62653 0.38946-1.3378 0.58394-2.1337 0.58394-0.77893 0-1.4902-0.19448-2.1337-0.58394-0.62653-0.38947-1.1345-0.93148-1.5239-1.6257-0.37254-0.69427-0.55863-1.49-0.55863-2.3874 0-0.93134 0.18609-1.736 0.55863-2.4133 0.38946-0.69427 0.8974-1.2363 1.5239-1.6257 0.64347-0.4064 1.3548-0.60927 2.1337-0.60927z" fill="#d3aa77"/>
+    </g>
+    </svg>
+    <div class="jgjk_loading_bar">
+      <div class="jgjk_loading_fill"></div>
+    </div>
+  </div>
+</body>
+
+<script type="module">
+    (async () => {
+      // let params = (new URL(document.location)).searchParams;
+      // const app = params.get("app").replace(/\[^0-9a-z_-]/g, "")
+      const app = "bevy_ggrs";
+      console.log(`loading ${app}`);
+      const appRoot = `https://johanhelsing.github.io/matchbox/${app}`
+
+      const appModule = await import(`${appRoot}/app.js`)
+      const init = appModule.default;
+
+      const fetchWithProgress = async (path, progress) => {
+        const response = await fetch(path)
+        // May be incorrect if compressed
+        const contentLength = response.headers.get("Content-Length")
+        const total = parseInt(contentLength, 10)
+
+        let bytesLoaded = 0
+        const ts = new TransformStream({
+          transform(chunk, ctrl) {
+            bytesLoaded += chunk.byteLength
+            progress(bytesLoaded / total)
+            ctrl.enqueue(chunk)
+          }
+        })
+
+        return new Response(response.body.pipeThrough(ts), response)
+      }
+
+      const initWasmWithProgress = async (wasmFile, progress) => {
+        console.log("starting download")
+        if (typeof TransformStream === "function" && ReadableStream.prototype.pipeThrough) {
+          let done = false
+          const response = await fetchWithProgress(wasmFile, function () {
+            if (done) {
+              return
+            }
+            if (arguments[0] >= 1) {
+              progress(1)
+              done = true
+              console.log("Fetching wasm finished")
+              window.jgjkSplash.loadingFinished()
+            } else {
+              progress.apply(null, arguments)
+            }
+          });
+          await init(response)
+        } else {
+          // xhr fallback, this is slower and doesn't use WebAssembly.InstantiateStreaming,
+          // but it's only happening on Firefox, and we can probably live with the game
+          // starting slightly slower there...
+          const xhr = new XMLHttpRequest()
+          await new Promise(function (resolve, reject) {
+            xhr.open("GET", wasmFile)
+            xhr.responseType = "arraybuffer"
+            xhr.onload = resolve
+            xhr.onerror = reject
+            xhr.onprogress = e => progress(e.loaded / e.total)
+            xhr.send()
+          })
+
+          progress(1)
+          window.jgjkSplash.loadingFinished()
+          await init(xhr.response)
+        }
+      }
+
+      const wasmFile = `${appRoot}/app.wasm`
+      // await initWasmWithProgress(wasmFile, p => console.log(`progress: ${p}`));
+      await initWasmWithProgress(wasmFile, jgjkSplash.loadingProgress)
+      // init never returns on bevy apps :(
+      // window.jgjkSplash.loadingFinished()
+      console.log("Initialized wasm")
+    })()
+</script>
+
+</html>