add interactivity

solygambas · solygambas · commit c6b48768db0f · 2022-02-21T08:01:02.000+01:00
diff --git a/05-game-of-life/Cargo.toml b/05-game-of-life/Cargo.toml
@@ -33,11 +33,12 @@ wee_alloc = { version = "0.4.5", optional = true }
 [dev-dependencies]
 wasm-bindgen-test = "0.3.13"
 
-[dependencies.web-sys]
-version = "0.3"
-features = [
-  "console",
-]
+# logging
+# [dependencies.web-sys]
+# version = "0.3"
+# features = [
+#   "console",
+# ]
 
 [profile.release]
 # Tell `rustc` to optimize for small code size.
diff --git a/05-game-of-life/README.md b/05-game-of-life/README.md
@@ -13,5 +13,7 @@ A zero-player game to learn how to use Rust, WebAssembly, and JavaScript togethe
 - implementing the Game of Life with Rust.
 - rendering to canvas directly from memory with JavaScript.
 - testing the tick function and debugging.
+- pausing and resuming the game.
+- toggling a cell's state on click.
 
 Based on [The Rust and WebAssembly Book](https://rustwasm.github.io/docs/book/) by The Rust and WebAssembly Working Group (2021).
diff --git a/05-game-of-life/src/lib.rs b/05-game-of-life/src/lib.rs
@@ -3,14 +3,14 @@ mod utils;
 use std::fmt;
 use wasm_bindgen::prelude::*;
 extern crate js_sys;
-extern crate web_sys;
+// extern crate web_sys;
 
 // A macro to provide `println!(..)`-style syntax for `console.log` logging.
-macro_rules! log {
-    ($( $t:tt)* ) => {
-        web_sys::console::log_1(&format!( $( $t )*).into());
-    };
-}
+// macro_rules! log {
+//     ($( $t:tt)* ) => {
+//         web_sys::console::log_1(&format!( $( $t )*).into());
+//     };
+// }
 
 #[wasm_bindgen]
 #[repr(u8)]
@@ -20,6 +20,15 @@ pub enum Cell {
     Alive = 1,
 }
 
+impl Cell {
+    fn toggle(&mut self) {
+        *self = match *self {
+            Cell::Dead => Cell::Alive,
+            Cell::Alive => Cell::Dead,
+        }
+    }
+}
+
 #[wasm_bindgen]
 pub struct Universe {
     width: u32,
@@ -74,13 +83,13 @@ impl Universe {
                 let cell = self.cells[idx];
                 let live_neighbors = self.live_neighbor_count(row, col);
 
-                log!(
-                    "cell[{}, {}] is initially {:?} and has {} live neighbors",
-                    row,
-                    col,
-                    cell,
-                    live_neighbors
-                );
+                // log!(
+                //     "cell[{}, {}] is initially {:?} and has {} live neighbors",
+                //     row,
+                //     col,
+                //     cell,
+                //     live_neighbors
+                // );
 
                 let next_cell = match (cell, live_neighbors) {
                     // Rule 1: Any live cell with fewer than two live neighbours
@@ -99,7 +108,7 @@ impl Universe {
                     (otherwise, _) => otherwise,
                 };
 
-                log!("it becomes {:?}", next_cell);
+                // log!("it becomes {:?}", next_cell);
 
                 next[idx] = next_cell;
             }
@@ -160,6 +169,11 @@ impl Universe {
         self.height = height;
         self.cells = (0..self.width * height).map(|_i| Cell::Dead).collect();
     }
+
+    pub fn toggle_cell(&mut self, row: u32, col: u32) {
+        let idx = self.get_index(row, col);
+        self.cells[idx].toggle();
+    }
 }
 
 impl fmt::Display for Universe {
diff --git a/05-game-of-life/www/index.html b/05-game-of-life/www/index.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html>
   <head>
-    <meta charset="utf-8">
+    <meta charset="utf-8" />
     <title>Game of Life</title>
     <style>
       body {
@@ -18,7 +18,11 @@
     </style>
   </head>
   <body>
-    <noscript>This page contains webassembly and javascript content, please enable javascript in your browser.</noscript>
+    <noscript
+      >This page contains webassembly and javascript content, please enable
+      javascript in your browser.</noscript
+    >
+    <button id="play-pause"></button>
     <canvas id="game-of-life-canvas"></canvas>
     <script src="./bootstrap.js"></script>
   </body>
diff --git a/05-game-of-life/www/index.js b/05-game-of-life/www/index.js
@@ -31,12 +31,14 @@ canvas.width = (CELL_SIZE + 1) * width + 1;
 
 const ctx = canvas.getContext("2d");
 
+let animationId = null;
+
 const renderLoop = () => {
-  debugger;
-  universe.tick();
+  //   debugger;
   drawGrid();
   drawCells();
-  requestAnimationFrame(renderLoop);
+  universe.tick();
+  animationId = requestAnimationFrame(renderLoop);
 };
 
 const drawGrid = () => {
@@ -79,6 +81,47 @@ const drawCells = () => {
   ctx.stroke();
 };
 
+// Pausing and Resuming the Game
+const isPaused = () => animationId === null;
+
+const playPauseButton = document.getElementById("play-pause");
+
+const play = () => {
+  playPauseButton.textContent = "⏸";
+  renderLoop();
+};
+
+const pause = () => {
+  playPauseButton.textContent = "▶";
+  cancelAnimationFrame(animationId);
+  animationId = null;
+};
+
+playPauseButton.addEventListener("click", (event) =>
+  isPaused() ? play() : pause()
+);
+
+// Toggling a Cell's State on "click" Events
+canvas.addEventListener("click", (event) => {
+  const boundingRect = canvas.getBoundingClientRect();
+
+  const scaleX = canvas.width / boundingRect.width;
+  const scaleY = canvas.height / boundingRect.height;
+
+  const canvasLeft = (event.clientX - boundingRect.left) * scaleX;
+  const canvasTop = (event.clientY - boundingRect.top) * scaleY;
+
+  const row = Math.min(Math.floor(canvasTop / (CELL_SIZE + 1), height - 1));
+  const col = Math.min(Math.floor(canvasLeft / (CELL_SIZE + 1), width - 1));
+
+  universe.toggle_cell(row, col);
+
+  drawGrid();
+  drawCells();
+});
+
+// Init
 drawGrid();
 drawCells();
-requestAnimationFrame(renderLoop);
+// requestAnimationFrame(renderLoop);
+play();
diff --git a/README.md b/README.md
@@ -104,5 +104,7 @@ A zero-player game to learn how to use Rust, WebAssembly, and JavaScript togethe
 - implementing the Game of Life with Rust.
 - rendering to canvas directly from memory with JavaScript.
 - testing the tick function and debugging.
+- pausing and resuming the game.
+- toggling a cell's state on click.
 
 Based on [The Rust and WebAssembly Book](https://rustwasm.github.io/docs/book/) by The Rust and WebAssembly Working Group (2021).
