Adrien/beau-gosse-du-92
1
0
Fork 0
Code Issues 2 Pull Requests 1 Packages Projects Releases Wiki Activity

♻️ Use of the assets management introduced by Dioxus 0.6.0
All checks were successful
ci/woodpecker/push/dockerize Pipeline was successful
Details
ci/woodpecker/push/deploy Pipeline was successful
Details

Browse Source 
Cf. https://dioxuslabs.com/blog/release-060#stabilizing-manganis-asset-system
This commit is contained in:
Adrien
2025-04-21 09:39:54 +02:00
parent 219fac87b1
commit 722d98f5d1
6 changed files with 220 additions and 236 deletions
Download Patch File Download Diff File Expand all files Collapse all files

210
public/index.html
View File

@@ -1,15 +1,207 @@
<!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>
<title>{app_name}</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}
<style>
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: 5%;
--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: 641px) and (max-height: 768px) {
:root {
--spinner-top: calc(var(--window-center-pos) + (var(--wallpaper-pattern-height) * 2));
}
}
/* @media (calc($wallpaper-pattern-height * 6) < height <= calc($wallpaper-pattern-height * 8)) { */
@media (min-height: 769px) 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: 1025px) 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: 1281px) 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: 1537px) 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: 1793px) 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: 2049px) 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: 2305px) 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: 2561px) 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: 2817px) 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: 3073px) 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: 3329px) 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: 3585px) 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: 3841px) 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: 4097px) 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: 4353px) 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: 4609px) 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: 4865px) 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("data:image/svg+xml, <svg xmlns='http://www.w3.org/2000/svg' height='128' width='384' viewBox='0 0 384 128'><pattern id='p' width='384' height='128' patternUnits='userSpaceOnUse' stroke='%231B1B1B' stroke-linejoin='round' stroke-width='4'><path fill='%231DB2CF' 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='%23D53583' 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='%231DB2CF' 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='%237E6BB6' 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='%237E6BB6' 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='%231DB2CF' d='M 9.736 113 L -30 131.337 l 23.642 -0.088 L -10.212 143 L 30 124.575 H 6.834 L 9.736 113 Z'/><path fill='%23D53583' d='M 201.736 113 L 162 131.337 l 23.642 -0.088 L 181.788 143 L 222 124.575 H 198.834 L 201.736 113 Z'/><path fill='%231DB2CF' d='M 393.736 113 L 354 131.337 l 23.642 -0.088 L 373.788 143 L 414 124.575 H 390.834 L 393.736 113 Z'/></pattern><rect fill='url(%23p)' width='100%' height='100%'/></svg>");
background-position: center;
backgrond-size: var(--wallpaper-pattern-height);
width: 150%;
height: 150%;
}
}
.spinner {
height: var(--spinner-height);
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);
}
}
}
</style>
</head>
<body>
<div id="main">
@@ -18,7 +210,7 @@
<div class="content"></div>
</div>
<div class="spinner">
<svg viewBox="0 0 184 94" xmlns="http://www.w3.org/2000/svg">
<svg xmlns="http://www.w3.org/2000/svg" width='184' height='94' viewBox="0 0 184 94">
<path
stroke-linejoin="round"
stroke-width="6"
@@ -29,12 +221,12 @@
</div>
</div>
<script type="module" async>
import init from "{base_path}/assets/dioxus/beau-gosse-du-92.js";
import init from "{base_path}/wasm/beau-gosse-du-92.js";
// Ensure that everything needed to render preloader has been downloaded
// before fetching the wasm bundle.
window.onload=function() {
init("{base_path}/assets/dioxus/beau-gosse-du-92_bg.wasm").then(
init("{base_path}/wasm/beau-gosse-du-92_bg.wasm").then(
wasm => {
const preloader = document.getElementById("preloader");
if (preloader !== undefined) {