🐛 Fix wallpaper-pattern misalignment

For now, the LoadingPage component is kept, just in case.

.cargo/config.toml

@@ -0,0 +1,8 @@
+[profile.release]
+opt-level = "z"
+debug = false
+lto = true
+codegen-units = 1
+panic = "abort"
+strip = true
+incremental = false

Cargo.toml

@@ -37,7 +37,7 @@ tracing-web = "0.1.3"
 tracing-subscriber = "0.3.18"
 
 [target.'cfg(target_family = "wasm")'.dependencies]
-web-sys = { version = "0.3.69" }
+web-sys = "0.3.69"
 
 [build-dependencies]
 regex = "1.10.3"

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 = []

Dockerfile

@@ -2,19 +2,21 @@ FROM rust:latest AS builder
 
 WORKDIR /usr/src/beau-gosse-du-92
 
-COPY ./fonts ./fonts
-COPY ./images ./images
-
-
-COPY ./Dioxus.toml .
-COPY Cargo.* .
-COPY ./build.rs .
-COPY ./src ./src
-
 RUN cargo install dioxus-cli
-RUN dx build -r --platform web
+
+COPY Cargo.* .
+COPY ./src ./src
+COPY ./public ./public
+COPY ./Dioxus.toml .
+COPY ./build.rs .
+COPY ./.cargo ./.cargo
+
+RUN ln -s ./public/index.html ./index.html \
+    && dx build -r --platform web
 
 
 FROM nginx:mainline-alpine-slim
 
-COPY --from=builder /usr/src/beau-gosse-du-92/dist /usr/share/nginx/html
+WORKDIR /usr/share/nginx/html
+
+COPY --from=builder /usr/src/beau-gosse-du-92/dist .

index.html

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

public/assets/index.css

@@ -0,0 +1,207 @@
+
+@font-face {
+    src: url("../fonts/Geist/Geist-Medium.woff2") format("woff2");
+    font-family: "Geist";
+    font-weight: normal;
+}
+
+@font-face {
+    src: url("../fonts/Geist/Geist-Bold.woff2") format("woff2");
+    font-family: "Geist";
+    font-weight: bold;
+}
+
+html, body {
+    height: 100%;
+    width: 100%;
+
+    margin: 0;
+
+    font-family: "Geist";
+    font-weight: normal;
+}
+
+#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/images/wallpaper-pattern.svg

@@ -4,7 +4,7 @@
     <path fill="#1DB2CF" d="M 9.736 -15 L -30 3.337 l 23.642 -0.088 L -10.212 15 L 30 -3.425 H 6.834 L 9.736 -15 Z"/>
     <path fill="#D53583" d="M 201.736 -15 L 162 3.337 l 23.642 -0.088 L 181.788 15 L 222 -3.425 H 198.834 L 201.736 -15 Z"/>
     <path fill="#1DB2CF" d="M 393.736 -15 L 354 3.337 l 23.642 -0.088 L 373.788 15 L 414 -3.425 H 390.834 L 393.736 -15 Z"/>
-    <path fill="#7E6BB6" d="M 109.736 50 L 70 68.337 l 23.642 -0.088 L 89.788 80 L 130 61.575 H 106.834 L 109.736 50 Z"/>
+    <path fill="#7E6BB6" d="M 105.736 50 L 66 68.337 l 23.642 -0.088 L 85.788 80 L 126 61.575 H 102.834 L 105.736 50 Z"/>
     <path fill="#7E6BB6" d="M 297.736 50 L 258 68.337 l 23.642 -0.088 L 277.788 80 L 318 61.575 H 294.834 L 297.736 50 Z"/>
     <path fill="#1DB2CF" d="M 9.736 114 L -30 132.337 l 23.642 -0.088 L -10.212 144 L 30 125.575 H 6.834 L 9.736 114 Z"/>
     <path fill="#D53583" d="M 201.736 114 L 162 132.337 l 23.642 -0.088 L 181.788 144 L 222 125.575 H 198.834 L 201.736 114 Z"/>

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>

src/infrastructure/services/random_svg_generators.rs

@@ -147,7 +147,7 @@ async fn fetch_dicebear_svg(
 
 #[cfg(feature = "desktop")]
 fn gen_placeholder_fetcher<'a>(path: &'static str) -> Box<impl Future<Output = Option<String>>> {
-    let path = format!(".{}", &path);
+    let path = format!("./public/{}", &path);
     Box::new(async move {
         match read_to_string(&path).await {
             Ok(content) => Some(content),

src/main.rs

@@ -5,9 +5,6 @@ mod infrastructure;
 mod ui;
 mod utils;
 
-use std::time::Duration;
-
-use async_std::task;
 use dioxus::prelude::*;
 
 #[cfg(feature = "desktop")]
@@ -21,7 +18,6 @@ use tracing_web::MakeWebConsoleWriter;
 
 use crate::base::{login, sync_rooms};
 use crate::base::{APP_SETTINGS, ROOMS, SESSION};
-use crate::ui::components::loading::LoadingPage;
 use crate::ui::components::login::Login;
 use crate::ui::components::main_window::MainWindow;
 
@@ -30,17 +26,6 @@ mod base;
 fn app() -> Element {
     debug!("*** App rendering ***");
 
-    let mut ready = use_signal(|| false);
-
-    // Dummy timer simulating the loading of the application
-    let _: Coroutine<()> = use_coroutine(|_: UnboundedReceiver<_>| async move {
-        debug!("Not ready");
-        task::sleep(Duration::from_secs(3)).await;
-        // task::sleep(Duration::from_secs(0)).await;
-        debug!("Ready");
-        ready.set(true);
-    });
-
     let login_coro = use_coroutine(|rx| login(rx, &APP_SETTINGS, &SESSION));
 
     let mut sync_rooms_coro = None;
@@ -100,20 +85,14 @@ fn app() -> Element {
         // }
     }
 
-    if *ready.read() {
-        if SESSION.read().is_logged {
-            debug!("Should render the MainWindow component");
-            rsx! {
-                MainWindow {},
-            }
-        } else {
-            rsx! {
-                Login {},
-            }
+    if SESSION.read().is_logged {
+        debug!("Should render the MainWindow component");
+        rsx! {
+            MainWindow {},
         }
     } else {
         rsx! {
-            LoadingPage {},
+            Login {},
         }
     }
 }

src/ui/_base.scss

@@ -230,10 +230,10 @@ body {
     margin-right: 1%;
 }
 .aeroButton:hover {
-    border-image: url(./images/aerobutton_border.png) 2 round;
+    border-image: url(/public/images/aerobutton_border.png) 2 round;
 }
 .aeroButton:active {
-    border-image: url(./images/aerobutton_border_down.png) 2 round;
+    border-image: url(/public/images/aerobutton_border_down.png) 2 round;
 }
 
 .button {
@@ -246,8 +246,8 @@ body {
     margin-right: 1%;
 }
 .button:hover {
-    border-image: url(./images/button_border.png) 2 round;
+    border-image: url(/public/images/button_border.png) 2 round;
 }
 .button:active {
-    border-image: url(./images/button_border_down.png) 2 round;
+    border-image: url(/public/images/button_border_down.png) 2 round;
 }

src/ui/components/avatar_selector.rs

@@ -47,7 +47,7 @@ pub fn AvatarSelector() -> Element {
             },
             img {
                 class: ClassName::AVATAR_SELECTOR_PICTURE,
-                src: "./images/default-avatar.png",
+                src: "/public/images/default-avatar.png",
             },
         },
     }

src/ui/components/chats_window/mod.rs

@@ -48,7 +48,7 @@ fn render_rooms_tabs(
                     class: ClassName::TAB,
                     button {
                         img {
-                            src: "./images/status_online.png",
+                            src: "/public/images/status_online.png",
                         },
                         "{room_name}",
                     },

src/ui/components/chats_window/navbar.rs

@@ -13,37 +13,37 @@ pub fn Navbar() -> Element {
             class: ClassName::NAVBAR,
 
             button {
-                style: "background: url(./images/add_user2.png) center no-repeat",
+                style: "background: url(/public/images/add_user2.png) center no-repeat",
             },
 
             button {
-                style: "background: url(./images/directory.png) center no-repeat",
+                style: "background: url(/public/images/directory.png) center no-repeat",
             },
 
             button {
-                style: "background: url(./images/phone.png) center no-repeat",
+                style: "background: url(/public/images/phone.png) center no-repeat",
             },
 
             button {
-                style: "background: url(./images/medias.png) center no-repeat",
+                style: "background: url(/public/images/medias.png) center no-repeat",
             },
 
             button {
-                style: "background: url(./images/games.png) center no-repeat",
+                style: "background: url(/public/images/games.png) center no-repeat",
             },
 
             button {
-                style: "background: url(./images/ban_user.png) center no-repeat",
+                style: "background: url(/public/images/ban_user.png) center no-repeat",
             },
 
             button {
                 class: ClassName::FLEX_RIGHT_AERO_BUTTON,
-                style: "background: url(./images/brush.png) center no-repeat",
+                style: "background: url(/public/images/brush.png) center no-repeat",
             },
 
             button {
                 class: ClassName::FLEX_LAST_BUTTON,
-                style: "background: url(./images/settings.png) center no-repeat",
+                style: "background: url(/public/images/settings.png) center no-repeat",
             },
         },
     }

src/ui/components/contacts_window/contacts_section.rs

@@ -110,7 +110,7 @@ pub fn ContactsSection(props: ContactsSectionProps) -> Element {
             li {
                 onclick: move |_| on_clicked_room(&id, &CHATS_WIN_INTERFACE),
                 img {
-                    src: "./images/status_online.png",
+                    src: "/public/images/status_online.png",
                 },
                 p {
                     {formatted},

src/ui/components/contacts_window/mod.rs

@@ -40,24 +40,24 @@ pub fn ContactsWindow() -> Element {
 
                     button {
                         class: ClassName::AERO_BUTTON,
-                        style: "background: url(./images/letter.png) center no-repeat",
+                        style: "background: url(/public/images/letter.png) center no-repeat",
                     },
                     button {
                         class: ClassName::AERO_BUTTON,
-                        style: "background: url(./images/directory.png) no-repeat center",
+                        style: "background: url(/public/images/directory.png) no-repeat center",
                     },
                     button {
                         class: ClassName::AERO_BUTTON,
-                        style: "background: url(./images/news.png) no-repeat center",
+                        style: "background: url(/public/images/news.png) no-repeat center",
                     },
 
                     button {
                         class: ClassName::FLEX_RIGHT_AERO_BUTTON,
-                        style: "background: url(./images/brush.png) no-repeat center",
+                        style: "background: url(/public/images/brush.png) no-repeat center",
                     },
                     button {
                         class: ClassName::AERO_BUTTON,
-                        style: "background: url(./images/settings.png) no-repeat center",
+                        style: "background: url(/public/images/settings.png) no-repeat center",
                     },
 
                 },
@@ -78,12 +78,12 @@ pub fn ContactsWindow() -> Element {
 
                     button {
                         class: ClassName::BUTTON,
-                        style: "background: url(./images/add_user.png) no-repeat center",
+                        style: "background: url(/public/images/add_user.png) no-repeat center",
                     },
 
                     button {
                         class: ClassName::BUTTON,
-                        style: "background: url(./images/tbc_transfert.png) no-repeat center",
+                        style: "background: url(/public/images/tbc_transfert.png) no-repeat center",
                     },
                 },
             },

src/ui/components/header.rs

@@ -9,7 +9,7 @@ pub fn Header() -> Element {
         div {
             class: ClassName::ROOT,
             img {
-                src: "./images/logo-msn.png"
+                src: "/public/images/logo-msn.png"
             }
             svg {
                 view_box: "0 0 100 10",

src/ui/components/login.scss

@@ -90,6 +90,10 @@
             }
         }
 
+        input {
+            font-family: inherit;
+        }
+
         &__homeserver {
             grid-area: homeserver;
         }