add JS rendering

solygambas · solygambas · commit 900932d47fa1 · 2022-02-20T13:45:54.000+01:00
diff --git a/05-game-of-life/README.md b/05-game-of-life/README.md
@@ -8,6 +8,7 @@ A zero-player game to learn how to use Rust, WebAssembly, and JavaScript togethe
 - building the project with wasm-pack.
 - putting it into a web page with wasm-app.
 - serving locally with webpack.
-- implementing the Game of Life in Rust.
+- implementing the Game of Life with Rust.
+- rendering with JavaScript.
 
 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,12 +3,6 @@ mod utils;
 use std::fmt;
 use wasm_bindgen::prelude::*;
 
-// When the `wee_alloc` feature is enabled, use `wee_alloc` as the global
-// allocator.
-#[cfg(feature = "wee_alloc")]
-#[global_allocator]
-static ALLOC: wee_alloc::WeeAlloc = wee_alloc::WeeAlloc::INIT;
-
 #[wasm_bindgen]
 #[repr(u8)]
 #[derive(Clone, Copy, Debug, PartialEq, Eq)]
@@ -37,8 +31,8 @@ impl Universe {
                     continue;
                 }
                 let neighbor_row = (row + delta_row) % self.height;
-                let neighbor_column = (column + delta_col) % self.width;
-                let idx = self.get_index(neighbor_row, neighbor_column);
+                let neighbor_col = (column + delta_col) % self.width;
+                let idx = self.get_index(neighbor_row, neighbor_col);
                 count += self.cells[idx] as u8;
             }
         }
diff --git a/05-game-of-life/www/index.html b/05-game-of-life/www/index.html
@@ -2,10 +2,24 @@
 <html>
   <head>
     <meta charset="utf-8">
-    <title>Hello wasm-pack!</title>
+    <title>Game of Life</title>
+    <style>
+      body {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+      }
+    </style>
   </head>
   <body>
     <noscript>This page contains webassembly and javascript content, please enable javascript in your browser.</noscript>
+    <pre id="game-of-life-canvas"></pre>
     <script src="./bootstrap.js"></script>
   </body>
 </html>
diff --git a/05-game-of-life/www/index.js b/05-game-of-life/www/index.js
@@ -1,3 +1,13 @@
-import * as wasm from "game-of-life";
+import { Universe } from "game-of-life";
 
-wasm.greet("WebAssembly");
+const pre = document.getElementById("game-of-life-canvas");
+const universe = Universe.new();
+
+const renderLoop = () => {
+    pre.textContent = universe.render();
+    universe.tick();
+  
+    requestAnimationFrame(renderLoop);
+  };
+
+  requestAnimationFrame(renderLoop);
diff --git a/05-game-of-life/www/package-lock.json b/05-game-of-life/www/package-lock.json
diff --git a/README.md b/README.md
@@ -95,6 +95,7 @@ A zero-player game to learn how to use Rust, WebAssembly, and JavaScript togethe
 - building the project with wasm-pack.
 - putting it into a web page with wasm-app.
 - serving locally with webpack.
-- implementing the Game of Life in Rust.
+- implementing the Game of Life with Rust.
+- rendering with JavaScript.
 
 Based on [The Rust and WebAssembly Book](https://rustwasm.github.io/docs/book/) by The Rust and WebAssembly Working Group (2021).
