use canvas ... still not what I want. I want rust to write to the canvas memory.

6 years ago · c7543ff299
3 changed files with 82 additions and 4 deletions
--- 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()
    }
--- a/tutorial/wasm-game-of-life/www/index.html
+++ b/tutorial/wasm-game-of-life/www/index.html
@ -18,7 +18,7 @@
    </style>
  </head>
  <body>
-    <pre id="game-of-life-canvas"></pre>
+    <canvas id="game-of-life-canvas"></canvas>
    <script src="./bootstrap.js"></script>
  </body>
 </html>
--- 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);