kristoferssolo/maze-ascension
1
0
Fork 0
mirror of https://github.com/kristoferssolo/maze-ascension.git synced 2025-10-21 19:20:34 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

style: format web files

Browse Source
This commit is contained in:
Kristofers Solo 2025-01-06 12:55:01 +02:00
parent a698495c06
commit 7ff943e829
2 changed files with 63 additions and 65 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

66
web/index.html
View File

@ -1,38 +1,36 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head>
<meta charset="utf-8" /> <head>
<meta name="description" <meta charset="utf-8" />
content="Maze exploration game built using the Bevy engine"> <meta name="description" content="Maze exploration game built using the Bevy engine">
<meta name="keywords" content="game, bevy"> <meta name="keywords" content="game, bevy">
<title>Maze Ascension: The Labyrinth of Echoes</title> <title>Maze Ascension: The Labyrinth of Echoes</title>
<link data-trunk rel="copy-dir" href="../assets" /> <link data-trunk rel="copy-dir" href="../assets" />
<link data-trunk rel="inline" href="style.css" /> <link data-trunk rel="inline" href="style.css" />
<link data-trunk rel="inline" type="module" href="restart-audio-context.js" /> <link data-trunk rel="inline" type="module" href="restart-audio-context.js" />
<link data-trunk <link data-trunk rel="rust" data-cargo-no-default-features data-wasm-opt="s" href="../" />
rel="rust" </head>
data-cargo-no-default-features
data-wasm-opt="s" <body>
href="../" /> <div id="game" class="center">
</head> <div id="loading-screen" class="center">
<body> <span class="spinner"></span>
<div id="game" class="center">
<div id="loading-screen" class="center">
<span class="spinner"></span>
</div>
<canvas id="bevy"> Javascript and canvas support is required </canvas>
</div> </div>
<script type="module"> <canvas id="bevy"> Javascript and canvas support is required </canvas>
// Hide loading screen when the game starts. </div>
const loading_screen = document.getElementById("loading-screen"); <script type="module">
const bevy = document.getElementById("bevy"); // Hide loading screen when the game starts.
const observer = new MutationObserver(() => { const loading_screen = document.getElementById("loading-screen");
if (bevy.height > 1) { const bevy = document.getElementById("bevy");
loading_screen.style.display = "none"; const observer = new MutationObserver(() => {
observer.disconnect(); if (bevy.height > 1) {
} loading_screen.style.display = "none";
}); observer.disconnect();
observer.observe(bevy, { attributeFilter: ["height"] }); }
</script> });
</body> observer.observe(bevy, {attributeFilter: ["height"]});
</script>
</body>
</html> </html>

62
web/style.css
View File

@ -1,56 +1,56 @@
:root { :root {
/* Consider adjusting this color to match your splash screen! */ /* Consider adjusting this color to match your splash screen! */
--loading-screen-bg-color: #282828; --loading-screen-bg-color: #282828;
} }
* { * {
margin: 0; margin: 0;
padding: 0; padding: 0;
border: 0; border: 0;
} }
html, html,
body { body {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
.center { .center {
width: 100%; width: 100%;
height: 100%; height: 100%;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
flex-direction: column; flex-direction: column;
} }
#loading-screen { #loading-screen {
background-color: var(--loading-screen-bg-color); background-color: var(--loading-screen-bg-color);
} }
.spinner { .spinner {
width: 128px; width: 128px;
height: 128px; height: 128px;
border: 64px solid transparent; border: 64px solid transparent;
border-bottom-color: #ececec; border-bottom-color: #ececec;
border-right-color: #b2b2b2; border-right-color: #b2b2b2;
border-top-color: #787878; border-top-color: #787878;
border-radius: 50%; border-radius: 50%;
box-sizing: border-box; box-sizing: border-box;
animation: spin 1.2s linear infinite; animation: spin 1.2s linear infinite;
} }
@keyframes spin { @keyframes spin {
0% { 0% {
transform: rotate(0deg); transform: rotate(0deg);
} }
100% { 100% {
transform: rotate(360deg); transform: rotate(360deg);
} }
} }
#bevy { #bevy {
/* Hide Bevy app before it loads */ /* Hide Bevy app before it loads */
height: 0; height: 0;
} }