Add a loading screen to the web page

[TimJentzsch]

This PR adds a loading screen to the web page.
Because the WASM binary is quite big, it can take a long time for the game to load. In this time, the user just sees a black/white screen and might be confused why nothing is happening.

This PR adds a (very simple) loading screen to indicate that something is happening. It could be expanded arbitrarily in the future, if needed.

It currently looks like this:

The three dots of the loading indicator are animated.

How it works

1. The game script is imported asynchronously via import("./bevy_game.wasm").then(...).
2. A div for the loading screen was added inside the body.
3. A loading-screen.mjs script implements the loading screen:
4. Once the document has been loaded, the three dots are animated.
5. A mutation observer waits for the canvas element to be created. This indicates that the game has finished loading.
6. Once this happens, the loading screen and mutation observer is removed.

How to test it

I created the wasm folder which contains everything needed to run the game on the web.
Personally I use cargo bavy run --wasm (via cargo-bavy) to run the changes locally.

Alternatively, you can do the following:

• Copy the assets folder into the wasm folder.
• Compile to the wasm32-unknown-unknown target in release mode.
• Create bindings for the wasm file and move them to the wasm folder. They should be named bevy_game.js and bevy_game.wasm (note that these are different names than before).
• Host the wasm folder on a webserver.

In Firefox, you can turn on throttling in the network tab to see the loading screen. In Chrome it should work in a similar way.

TODO

• Get feedback for loading screen "design".
• Adjust README instructions for running the game in the browser.
• Adjust GitHub workflows to use the new wasm assets.

[ramirezmike]

This is pretty neat, I had done loading screens within the game while assets are loading, but I hadn't thought about prior to the game launching.

Personally I use cargo bavy run --wasm (via cargo-bavy) to run the changes locally.

I've tried that and it didn't work for me in the past. Gonna try it out on your PR when I get a chance.

Overall, I'm cool with this. I would maybe set the background to a darker color, maybe even black, and the font color to white.

Ideally, it'd be cool if it matched the initial splash screen in the game

But, waiting for an image like that to load kinda defeats the purpose, right? Might not be so bad as an .svg, but, I think that doesn't necessarily have to be part of this.

[TimJentzsch]

Sure, I can try matching the other loading screen!
Loading the image and font shouldn't be that big of a problem I think, the WASM file is 27MB so that's the biggest bottle neck.

If you keep having problems with cargo bavy let me know, maybe I can fix it

[ramirezmike]

ah @TimJentzsch

I saw you closed this today. At some point in the past I had disabled a lot of my github notifications because it was blowing up my email and my phone and didn't opt back in until my work life balance was a bit more stable. I suspect this fell off my radar during that time :(

I'm not sure when I'll continue working on this game, but if you're cool with it I can reopen this and merge your PR. If not, that's cool too. Again, sorry about that 🙏

[TimJentzsch]

ah @TimJentzsch

I saw you closed this today. At some point in the past I had disabled a lot of my github notifications because it was blowing up my email and my phone and didn't opt back in until my work life balance was a bit more stable. I suspect this fell off my radar during that time :(

I'm not sure when I'll continue working on this game, but if you're cool with it I can reopen this and merge your PR. If not, that's cool too. Again, sorry about that 🙏

Not your fault, it was mine!
The PR was in draft mode and I didn't yet include your feedback on matching the loading screen designs.
Yesterday, I just closed a lot of PRs that I didn't touch in a long time, but I can take another shot at this :)

[TimJentzsch]

Ok, maybe it won't be so easy:

error: failed to select a version for `quote`.
    ... required by package `syn v2.0.0`
    ... which satisfies dependency `syn = "^2.0"` of package `bevy-inspector-egui-derive v0.22.0 (https://github.com/jakobhellermann/bevy-inspector-egui?rev=faea5e2406f94bc0146c55b2c668da8f921dcbc2#1b916a05)`
    ... which satisfies git dependency `bevy-inspector-egui-derive` of package `bevy-inspector-egui v0.22.1 (https://github.com/jakobhellermann/bevy-inspector-egui?rev=faea5e2406f94bc0146c55b2c668da8f921dcbc2#1b916a05)`
    ... which satisfies git dependency `bevy-inspector-egui` of package `bull_cliche v0.1.0 (/home/tim/dev/bevyengine/adores_antiques)`
versions that meet the requirements `^1.0.25` are: 1.0.35, 1.0.34, 1.0.33, 1.0.32, 1.0.31, 1.0.30, 1.0.29, 1.0.28, 1.0.27, 1.0.26

all possible versions conflict with previously selected packages.

  previously selected package `quote v1.0.21`
    ... which satisfies dependency `quote = "^1.0"` (locked to 1.0.21) of package `bevy-inspector-egui-derive v0.22.0 (https://github.com/jakobhellermann/bevy-inspector-egui?rev=faea5e2406f94bc0146c55b2c668da8f921dcbc2#1b916a05)`
    ... which satisfies git dependency `bevy-inspector-egui-derive` of package `bevy-inspector-egui v0.22.1 (https://github.com/jakobhellermann/bevy-inspector-egui?rev=faea5e2406f94bc0146c55b2c668da8f921dcbc2#1b916a05)`
    ... which satisfies git dependency `bevy-inspector-egui` of package `bull_cliche v0.1.0 (/home/tim/dev/bevyengine/adores_antiques)`

failed to select a version for `quote` which could resolve this conflict