Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix loading screen for default Bevy app #144

Merged
merged 6 commits into from
Oct 16, 2024
Merged

Fix loading screen for default Bevy app #144

Changes from 2 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
b5dea59
Fix detection for game loading
TimJentzsch Oct 15, 2024
5079d8f
Adjust styling of index.html to work better for default Bevy app
TimJentzsch Oct 15, 2024
a98280f
Merge branch 'main' into 134-fix-loading-screen
BD103 Oct 16, 2024
0100bd1
Avoid unnecessary work when checking for canvas element
TimJentzsch Oct 16, 2024
d6cd105
Merge branch '134-fix-loading-screen' of github.com:TheBevyFlock/bevy…
TimJentzsch Oct 16, 2024
ccfb6cc
Merge branch 'main' into 134-fix-loading-screen
TimJentzsch Oct 16, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
43 changes: 23 additions & 20 deletions assets/web/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
<style>
/* Styles for the loading screen */
:root {
--web-bg-color: #282828;
--web-bg-color: #2b2c2f;
}

* {
Expand All @@ -30,7 +30,7 @@
flex-direction: column;
}

#game {
body {
background-color: var(--web-bg-color);
}

Expand All @@ -55,21 +55,12 @@
transform: rotate(360deg);
}
}

#bevy {
/* Hide Bevy app before it loads */
height: 0;
}
</style>
</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>
<body class="center">
<div id="loading-screen" class="center">
<span class="spinner"></span>
</div>

<script type="module">
Expand All @@ -89,14 +80,26 @@
<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();
const observer = new MutationObserver((records) => {
for (const record of records) {
for (const addedNode of record.addedNodes) {
if (addedNode instanceof HTMLCanvasElement) {
// A new canvas has been created, which means that the game has been loaded
// Hide the loading screen!
loading_screen.style.display = "none";
observer.disconnect();
break;
TimJentzsch marked this conversation as resolved.
Show resolved Hide resolved
}
}
}
});
observer.observe(bevy, { attributeFilter: ["height"] });

observer.observe(document.body, {
subtree: false,
childList: true,
attributes: false,
characterData: false,
});
</script>

<script type="module">
Expand Down
Loading