merge: 'welcome, success and failure screens' (#1) from dev into main

Reviewed-on: #1

Cargo.toml

@@ -1,6 +1,6 @@
 [package]
 name = "invaders"
-version = "0.1.0"
+version = "0.1.1"
 authors = ["thetek <git@thetek.de>"]
 description = "space invaders written using webassembly, rust and webgl"
 repository = "https://git.tjdev.de/thetek/invaders"
@@ -23,7 +23,7 @@ getrandom = { version = "0.2.9", features = ["js"] }
 
 [dependencies.web-sys]
 version = "0.3.61"
-features = ["console", "Document", "Element", "EventListener", "HtmlCanvasElement", "HtmlImageElement", "ImageData", "KeyboardEvent", "WebGlBuffer", "WebGlProgram", "WebGl2RenderingContext", "WebGlUniformLocation", "WebGlShader", "WebGlTexture", "WebGlVertexArrayObject", "Window"]
+features = ["console", "Document", "Element", "EventListener", "HtmlCanvasElement", "HtmlImageElement", "ImageData", "KeyboardEvent", "Performance", "WebGlBuffer", "WebGlProgram", "WebGl2RenderingContext", "WebGlUniformLocation", "WebGlShader", "WebGlTexture", "WebGlVertexArrayObject", "Window"]
 
 [profile.release]
 opt-level = "s" # optimize for small code size

src/game.rs

@@ -92,10 +92,10 @@ impl Game {
             enemies,
             enemy_direction: config::ENEMY_SPEED,
             enemy_offset: 0.0,
-            last_time: 0.0,
+            last_time: window().unwrap().performance().unwrap().now() as f32,
             player_bullets: vec![],
             enemy_bullets: vec![],
-            enemy_last_shoot_time: 0.0,
+            enemy_last_shoot_time: window().unwrap().performance().unwrap().now() as f32,
             game_running: true,
         })
     }
@@ -215,7 +215,7 @@ impl Game {
         }
 
         if self.enemies.is_empty() {
-            utils::alert("You won! Refresh the page to start again.");
+            js_sys::eval("window.game_won()").unwrap();
             self.game_running = false;
         }
     }
@@ -230,7 +230,7 @@ impl Game {
             );
 
             if is_colliding {
-                utils::alert("You lost. Refresh the page to start again.");
+                js_sys::eval("window.game_lost()").unwrap();
                 self.game_running = false;
                 break;
             }
@@ -244,7 +244,7 @@ impl Game {
 
         for enemy in &self.enemies {
             if enemy.pos_y < ENEMY_MIN_Y {
-                utils::alert("You lost. Refresh the page to start again.");
+                js_sys::eval("window.game_lost()").unwrap();
                 self.game_running = false;
                 break;
             }

src/lib.rs

@@ -13,7 +13,10 @@ static ALLOC: wee_alloc::WeeAlloc = wee_alloc::WeeAlloc::INIT;
 pub fn wasm_main() {
     #[cfg(feature = "console_error_panic_hook")]
     utils::set_panic_hook();
+}
 
+#[wasm_bindgen]
+pub fn game_start() {
     match game::run() {
         Ok(_) => (),
         Err(x) => utils::alert_err(x),

src/render.rs

@@ -348,6 +348,8 @@ impl Renderer {
                 };
                 gl.tex_parameteri(Gl::TEXTURE_2D, Gl::TEXTURE_MIN_FILTER, Gl::NEAREST as i32);
                 gl.tex_parameteri(Gl::TEXTURE_2D, Gl::TEXTURE_MAG_FILTER, Gl::NEAREST as i32);
+                gl.tex_parameteri(Gl::TEXTURE_2D, Gl::TEXTURE_WRAP_S, Gl::CLAMP_TO_EDGE as i32);
+                gl.tex_parameteri(Gl::TEXTURE_2D, Gl::TEXTURE_WRAP_T, Gl::CLAMP_TO_EDGE as i32);
                 gl.generate_mipmap(Gl::TEXTURE_2D);
             }) as Box<dyn FnMut()>);
             imgrc.set_onload(Some(a.as_ref().unchecked_ref()));

src/utils.rs

@@ -1,11 +1,6 @@
 use wasm_bindgen::prelude::*;
 use web_sys::window;
 
-#[wasm_bindgen]
-extern "C" {
-    pub fn alert(s: &str);
-}
-
 pub fn set_panic_hook() {
     #[cfg(feature = "console_error_panic_hook")]
     console_error_panic_hook::set_once();
@@ -14,7 +9,7 @@ pub fn set_panic_hook() {
 pub fn alert_err(msg: JsValue) {
     let mut s = String::from("ERROR! --- ");
     s.push_str(&msg.as_string().unwrap_or_else(|| String::from("unknown")));
-    alert(&s);
+    window().unwrap().alert_with_message(&s).unwrap();
 }
 
 pub fn request_animation_frame(f: &Closure<dyn FnMut(f32)>) {

www/index.html

@@ -4,6 +4,7 @@
     <meta charset="utf-8">
     <title>Invaders</title>
     <style>
+      * { box-sizing: border-box; }
       html, body {
         background-color: #111;
         color: #bbb;
@@ -15,11 +16,75 @@
       canvas {
         margin: calc(50vh - 300px) auto;
       }
+      .overlay {
+        height: 600px;
+        left: calc(50vw - 400px);
+        padding-top: 240px;
+        position: absolute;
+        text-align: center;
+        top: calc(50vh - 300px);
+        width: 800px;
+      }
+      #success {
+        background-color: #040;
+        color: #0f0;
+      }
+      #success button {
+        border: 2px solid #0f0;
+        color: #0f0;
+      }
+      #failure {
+        background-color: #400;
+        color: #f00;
+      }
+      #failure button {
+        border: 2px solid #f00;
+        color: #f00;
+      }
+      #welcome {
+        background-color: #000;
+        color: #fff;
+      }
+      #welcome button {
+        border: 2px solid #fff;
+        color: #fff;
+      }
+      #welcome p {
+        margin-top: -1rem;
+      }
+      button {
+        background: none;
+        border-radius: .25rem;
+        cursor: pointer;
+        font-family: monospace;
+        font-size: 1rem;
+        outline: none;
+        padding: .5rem 1rem;
+      }
+      button:hover {
+        background-color: rgba(255, 255, 255, 0.2);
+      }
+      .hidden {
+        display: none;
+      }
     </style>
   </head>
   <body>
     <noscript>This page contains WebAssembly and JavaScript content, please enable JavaScript in your browser.</noscript>
     <script src="./bootstrap.js"></script>
     <canvas id="canvas" width="800" height="600">This page contains WebGL content, please enable WebGL in your browser.</canvas>
+    <div id="welcome" class="overlay">
+      <h1>Invaders</h1>
+      <p>v0.1.1</p>
+      <button onclick="window.play_game()">Play</button>
+    </div>
+    <div id="success" class="overlay hidden">
+      <h1>You won!</h1>
+      <button onclick="window.play_game()">Play again</button>
+    </div>
+    <div id="failure" class="overlay hidden">
+      <h1>You lost!</h1>
+      <button onclick="window.play_game()">Play again</button>
+    </div>
   </body>
 </html>

www/index.js

@@ -1,3 +1,22 @@
 import * as wasm from 'invaders-wasm'
 
 wasm.wasm_main()
+
+function play_game() {
+  document.getElementById('welcome').classList.add('hidden')
+  document.getElementById('success').classList.add('hidden')
+  document.getElementById('failure').classList.add('hidden')
+  wasm.game_start()
+}
+
+function game_won() {
+  document.getElementById('success').classList.remove('hidden')
+}
+
+function game_lost() {
+  document.getElementById('failure').classList.remove('hidden')
+}
+
+window.play_game = play_game
+window.game_won = game_won
+window.game_lost = game_lost