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

62
web/style.css
View File

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