✨ Add web page to display during the wasm bundle

Dioxus.toml

@@ -3,14 +3,14 @@ name = "beau-gosse-du-92"
 default_platform = "desktop"
 
 [web.app]
-name = "beau-gosse-du-92"
+title = "BG92"
 
 [web.watcher]
 reload_html = true
-watch_path = ["src", "font"]
+watch_path = ["public/index.html", "public/assets/index.css", "src"]
 
 [web.resource]
-script = []
+style = ["assets/index.css"]
 
 [web.resource.dev]
 style = []

index.html

@@ -0,0 +1 @@
+public/index.html

public/assets/index.css

@@ -0,0 +1,191 @@
+html, body {
+    height: 100%;
+    width: 100%;
+
+    margin: 0;
+}
+
+#main {
+    height: 100%;
+    width: 100%;
+}
+
+@keyframes multicolor {
+    0%  { fill: #1DB2CF; /* color-primary-100 */ }
+    33% { fill: #7E6BB6; /* color-secondary-100 */ }
+    66% { fill: #D53583; /* color-ternary-100 */ }
+}
+
+:root {
+    --wallpaper-pattern-height: 128px;
+    --spinner-height: calc(32px * 2);
+    --window-center-pos: calc(50% + (var(--wallpaper-pattern-height) / 2) - (var(--spinner-height) / 2));
+}
+
+/* @media (0px < height <= calc(var(--wallpaper-pattern-height) * 5)) { */
+@media (min-height: 0px) and (max-height: 640px) {
+    :root {
+        --spinner-top: var(--window-center-pos);
+    }
+}
+/* @media (calc($wallpaper-pattern-height * 5) < height <= calc($wallpaper-pattern-height * 6)) { */
+@media (min-height: 640px) and (max-height: 768px) {
+    :root {
+        --spinner-top: calc(var(--window-center-pos) + (var(--wallpaper-pattern-height) * 1));
+    }
+}
+/* @media (calc($wallpaper-pattern-height * 6) < height <= calc($wallpaper-pattern-height * 8)) { */
+@media (min-height: 768px) and (max-height: 1024px) {
+    :root {
+        --spinner-top: calc(var(--window-center-pos) + (var(--wallpaper-pattern-height) * 2));
+    }
+}
+/* @media (calc($wallpaper-pattern-height * 8) < height <= calc($wallpaper-pattern-height * 10)) { */
+@media (min-height: 1024px) and (max-height: 1280px) {
+    :root {
+        --spinner-top: calc(var(--window-center-pos) + (var(--wallpaper-pattern-height) * 3));
+    }
+}
+/* @media (calc($wallpaper-pattern-height * 10) < height <= calc($wallpaper-pattern-height * 12)) { */
+@media (min-height: 1280px) and (max-height: 1536px) {
+    :root {
+        --spinner-top: calc(var(--window-center-pos) + (var(--wallpaper-pattern-height) * 4));
+    }
+}
+/* @media (calc($wallpaper-pattern-height * 12) < height <= calc($wallpaper-pattern-height * 14)) { */
+@media (min-height: 1536px) and (max-height: 1792px) {
+    :root {
+        --spinner-top: calc(var(--window-center-pos) + (var(--wallpaper-pattern-height) * 5));
+    }
+}
+/* @media (calc($wallpaper-pattern-height * 14) < height <= calc($wallpaper-pattern-height * 16)) { */
+@media (min-height: 1792px) and (max-height: 2048px) {
+    :root {
+        --spinner-top: calc(var(--window-center-pos) + (var(--wallpaper-pattern-height) * 6));
+    }
+}
+/* @media (calc($wallpaper-pattern-height * 16) < height <= calc($wallpaper-pattern-height * 18)) { */
+@media (min-height: 2048px) and (max-height: 2304px) {
+    :root {
+        --spinner-top: calc(var(--window-center-pos) + (var(--wallpaper-pattern-height) * 7));
+    }
+}
+/* @media (calc($wallpaper-pattern-height * 18) < height <= calc($wallpaper-pattern-height * 20)) { */
+@media (min-height: 2304px) and (max-height: 2560px) {
+    :root {
+        --spinner-top: calc(var(--window-center-pos) + (var(--wallpaper-pattern-height) * 8));
+    }
+}
+/* @media (calc($wallpaper-pattern-height * 20) < height <= calc($wallpaper-pattern-height * 22)) { */
+@media (min-height: 2560px) and (max-height: 2816px) {
+    :root {
+        --spinner-top: calc(var(--window-center-pos) + (var(--wallpaper-pattern-height) * 9));
+    }
+}
+/* @media (calc($wallpaper-pattern-height * 22) < height <= calc($wallpaper-pattern-height * 24)) { */
+@media (min-height: 2816px) and (max-height: 3072px) {
+    :root {
+        --spinner-top: calc(var(--window-center-pos) + (var(--wallpaper-pattern-height) * 10));
+    }
+}
+/* @media (calc($wallpaper-pattern-height * 24) < height <= calc($wallpaper-pattern-height * 26)) { */
+@media (min-height: 3072px) and (max-height: 3328px) {
+    :root {
+        --spinner-top: calc(var(--window-center-pos) + (var(--wallpaper-pattern-height) * 11));
+    }
+}
+/* @media (calc($wallpaper-pattern-height * 26) < height <= calc($wallpaper-pattern-height * 28)) { */
+@media (min-height: 3328px) and (max-height: 3584px) {
+    :root {
+        --spinner-top: calc(var(--window-center-pos) + (var(--wallpaper-pattern-height) * 12));
+    }
+}
+/* @media (calc($wallpaper-pattern-height * 28) < height <= calc($wallpaper-pattern-height * 30)) { */
+@media (min-height: 3584px) and (max-height: 3840px) {
+    :root {
+        --spinner-top: calc(var(--window-center-pos) + (var(--wallpaper-pattern-height) * 13));
+    }
+}
+/* @media (calc($wallpaper-pattern-height * 30) < height <= calc($wallpaper-pattern-height * 32)) { */
+@media (min-height: 3840px) and (max-height: 4096px) {
+    :root {
+        --spinner-top: calc(var(--window-center-pos) + (var(--wallpaper-pattern-height) * 14));
+    }
+}
+/* @media (calc($wallpaper-pattern-height * 32) < height <= calc($wallpaper-pattern-height * 34)) { */
+@media (min-height: 4096px) and (max-height: 4352px) {
+    :root {
+        --spinner-top: calc(var(--window-center-pos) + (var(--wallpaper-pattern-height) * 15));
+    }
+}
+/* @media (calc($wallpaper-pattern-height * 34) < height <= calc($wallpaper-pattern-height * 36)) { */
+@media (min-height: 4352px) and (max-height: 4608px) {
+    :root {
+        --spinner-top: calc(var(--window-center-pos) + (var(--wallpaper-pattern-height) * 16));
+    }
+}
+/* @media (calc($wallpaper-pattern-height * 36) < height <= calc($wallpaper-pattern-height * 38)) { */
+@media (min-height: 4608px) and (max-height: 4864px) {
+    :root {
+        --spinner-top: calc(var(--window-center-pos) + (var(--wallpaper-pattern-height) * 17));
+    }
+}
+/* @media (calc($wallpaper-pattern-height * 38) < height <= calc($wallpaper-pattern-height * 40)) { */
+@media (min-height: 4864px) and (max-height: 5120px) {
+    :root {
+        --spinner-top: calc(var(--window-center-pos) + (var(--wallpaper-pattern-height) * 18));
+    }
+}
+
+.loader {
+    height: 100%;
+    width: 100%;
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    .wallpaper {
+        height: 100%;
+        width: 100%;
+        z-index: -1;
+
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        overflow: hidden;
+
+        .content {
+            background-image: url("../images/wallpaper-pattern.svg");
+            background-position: center;
+
+            width: 150%;
+            height: 150%;
+        }
+    }
+
+    .spinner {
+        height: 5%;
+        aspect-ratio: 2;
+
+        position: absolute;
+
+        top: var(--spinner-top);
+
+        svg {
+            --fps: 4;
+            --duration_sec: 3;
+            --steps: calc(var(--duration_sec) * var(--fps));
+
+            height: 100%;
+            width: 100%;
+
+            fill: #1DB2CF; /* color-primary-100 */
+            stroke: #1B1B1B; /* greyscale-90 */
+
+            animation: 3s multicolor linear infinite;
+            animation-timing-function: steps(var(--steps), end);
+        }
+    }
+}

public/index.html

@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <!-- Hack to avoid the addition of the script part by dioxus-cli -->
+        <!-- <title>{base_path}</title> -->
+        <!-- <title>{app_name}</title> -->
+
+        <title></title>
+        <meta content="text/html;charset=utf-8" http-equiv="Content-Type" />
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+        <meta charset="UTF-8" />
+        {style_include}
+        {script_include}
+    </head>
+    <body>
+        <div id="main">
+            <div id="preloader" class="loader">
+                <div class="wallpaper">
+                    <div class="content"></div>
+                </div>
+                <div class="spinner">
+                    <svg viewBox="0 0 184 94" xmlns="http://www.w3.org/2000/svg">
+                        <path
+                            stroke-linejoin="round"
+                            stroke-width="6"
+                            d="M121.208 2 2 57.011l70.927-.265L61.363 92 182 36.724h-69.498L121.208 2Z"
+                        />
+                    </svg>
+                </div>
+            </div>
+        </div>
+        <script type="module" async>
+         import init from "{base_path}/assets/dioxus/beau-gosse-du-92.js";
+
+         // Ensure that everything needed to render preloader has been downloaded
+         // before fetching the app wasm bundle.
+         window.onload=function() {
+             init("{base_path}/assets/dioxus/beau-gosse-du-92_bg.wasm").then(
+                 wasm => {
+                     const preloader = document.getElementById("preloader");
+                 if (preloader !== undefined) {
+                     preloader.style.display = 'none';
+                 }
+
+                 if (wasm.__wbindgen_start == undefined) {
+                     wasm.main();
+                 }
+             }
+             );
+         }
+        </script>
+    </body>
+</html>