Change window size to default and add loading indicator for wasm file

GitGhillie · Oct 28, 2023 · 783d66e · 783d66e
1 parent c07ef46
commit 783d66e
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 13 deletions.
diff --git a/build/web/styles.css b/build/web/styles.css
@@ -3,26 +3,53 @@ body, html {
 }
 
 body {
- background: repeating-linear-gradient(
- 135deg,
- black 0,
- black 2px,
- white 2px,
- white 20px
- );
+ background-color: lightgray;
  margin: 0;
+ display: flex;
+ justify-content: center;
+ align-items: center;
 }
 
 .game-container {
- width: 100%;
- height: 100%;
+ width: 800px;
+ height: 600px;
  display: flex;
  justify-content: center;
  align-items: center;
 }
 
+.lds-dual-ring {
+ display: inline-block;
+ position: absolute;
+ left: 0;
+ right: 0;
+ margin: auto;
+ width: 80px;
+ height: 80px;
+}
+
+.lds-dual-ring:after {
+ content: " ";
+ display: block;
+ width: 64px;
+ height: 64px;
+ border-radius: 50%;
+ border: 6px solid #fff;
+ border-color: #fff transparent #fff transparent;
+ animation: lds-dual-ring 1.2s linear infinite;
+}
+
+@keyframes lds-dual-ring {
+ 0% {
+ transform: rotate(0deg);
+ }
+ 100% {
+ transform: rotate(360deg);
+ }
+}
+
 #bevy {
- background-color: white;
- width: 800px;
- height: 600px;
+ width: 0;
+ height: 0;
+ z-index: 2;
 }
diff --git a/index.html b/index.html
@@ -12,6 +12,7 @@
  <body>
  <link data-trunk rel="inline" href="build/web/sound.js"/>
  <div class="game-container">
+ <div class="lds-dual-ring"></div>
  <canvas id="bevy">
  Javascript and support for canvas is required
  </canvas>

diff --git a/src/main.rs b/src/main.rs
@@ -16,9 +16,10 @@ fn main() {
  .add_plugins(DefaultPlugins.set(WindowPlugin {
  primary_window: Some(Window {
  title: "Bevy game".to_string(), // ToDo
- resolution: (800., 600.).into(),
  // Bind to canvas included in `index.html`
  canvas: Some("#bevy".to_owned()),
+ // The canvas size is constrained in index.html and build/web/styles.css
+ fit_canvas_to_parent: true,
  // Tells wasm not to override default event handling, like F5 and Ctrl+R
  prevent_default_event_handling: false,
  ..default()