diff --git a/tutorial/wasm-game-of-life/src/lib.rs b/tutorial/wasm-game-of-life/src/lib.rs index 2fe1e8c..d5c453c 100644 --- a/tutorial/wasm-game-of-life/src/lib.rs +++ b/tutorial/wasm-game-of-life/src/lib.rs @@ -43,6 +43,18 @@ impl Universe { } } + pub fn width(&self) -> u32 { + self.width + } + + pub fn height(&self) -> u32 { + self.height + } + + pub fn cells(&self) -> *const Cell { + self.cells.as_ptr() + } + pub fn render(&self) -> String { self.to_string() } diff --git a/tutorial/wasm-game-of-life/www/index.html b/tutorial/wasm-game-of-life/www/index.html index 0d09239..ec89e14 100644 --- a/tutorial/wasm-game-of-life/www/index.html +++ b/tutorial/wasm-game-of-life/www/index.html @@ -18,7 +18,7 @@ - 

+    
     
   
 
diff --git a/tutorial/wasm-game-of-life/www/index.js b/tutorial/wasm-game-of-life/www/index.js
index fb1bcde..6139ba9 100644
--- a/tutorial/wasm-game-of-life/www/index.js
+++ b/tutorial/wasm-game-of-life/www/index.js
@@ -1,13 +1,79 @@
-import { Universe } from "wasm-game-of-life";
+import { Universe, Cell } from "wasm-game-of-life";
+import { memory } from "wasm-game-of-life/wasm_game_of_life_bg";
+
+const CELL_SIZE   = 5; // px
+const GRID_COLOR  = "#CCCCCC";
+const DEAD_COLOR  = "#FFFFFF";
+const ALIVE_COLOR = "#000000";
 
-const      pre = document.getElementById("game-of-life-canvas");
 const universe = Universe.new();
+const    width = universe.height();
+const   height = universe.height();
+
+const canvas  = document.getElementById("game-of-life-canvas");
+canvas.height = (CELL_SIZE + 1) * height + 1;
+canvas.width  = (CELL_SIZE + 1) * width + 1;
+
+const ctx = canvas.getContext('2d');
 
 const renderLoop = () => {
-    pre.textContent = universe.render();
     universe.tick();
 
+    drawGrid();
+    drawCells();
+
     requestAnimationFrame(renderLoop);
 };
 
+const drawGrid = () => {
+    ctx.beginPath();
+    ctx.strokeStyle = GRID_COLOR;
+
+    // vertical lines.
+    for (let i = 0; i <= width; i++) {
+        ctx.moveTo(i * (CELL_SIZE + 1) + 1,                            0);
+        ctx.lineTo(i * (CELL_SIZE + 1) + 1, (CELL_SIZE + 1) * height + 1);
+    }
+
+    // horizontal lines.
+    for (let j = 0; j <= height; j++) {
+        ctx.moveTo(                          0, j * (CELL_SIZE + 1) + 1);
+        ctx.lineTo((CELL_SIZE + 1) * width + 1, j * (CELL_SIZE + 1) + 1);
+    }
+
+    ctx.stroke();
+};
+
+const getIndex = (row, col) => {
+    return row * width + col;
+};
+
+const drawCells = () => {
+    const cellsPtr = universe.cells()
+    const cells    = new Uint8Array(memory.buffer, cellsPtr, width * height);
+
+    ctx.beginPath();
+
+    for (let row = 0; row < height; row++) {
+        for (let col = 0; col < height; col++) {
+            const idx = getIndex(row, col);
+
+            ctx.fillStyle = cells[idx] === Cell.Dead
+                ? DEAD_COLOR
+                : ALIVE_COLOR;
+
+            ctx.fillRect(
+                col * (CELL_SIZE + 1) + 1,
+                row * (CELL_SIZE + 1) + 1,
+                CELL_SIZE,
+                CELL_SIZE
+            );
+        }
+    }
+
+    ctx.stroke();
+};
+
+drawGrid();
+drawCells();
 requestAnimationFrame(renderLoop);