update everything, add CI

.github/workflows/test.yml

@@ -0,0 +1,50 @@
+name: test and deploy
+
+on:
+  push:
+    branches: [ master ]
+  pull_request:
+    branches: [ master ]
+
+env:
+  CARGO_TERM_COLOR: always
+
+jobs:
+  build:
+
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v2
+
+      - name: Install wasm-pack
+        uses: jetli/wasm-pack-action@v0.3.0
+
+      - name: Build Rust for WASM
+        run: wasm-pack build
+
+      - name: Test WASM on Firefox
+        run: wasm-pack test --firefox --headless
+
+      - name: Test WASM on Chrome
+        run: wasm-pack test --chrome --headless
+
+      - name: Install Node
+        uses: actions/setup-node@v2
+        with:
+          node-version: 16
+      
+      - name: Change Working Directory to Js
+        run: cd www
+
+      - name: Install Node Modules
+        run: npm ci
+
+      - name: Build Js
+        run: npm run build --if-present
+
+      - name: Deploy To Pages
+        uses: peaceiris/actions-gh-pages@v3
+        with:
+          github_token: ${{ secrets.GITHUB_TOKEN }}
+          publish_dir: ./dist

Cargo.toml

@@ -16,9 +16,9 @@ default = ["console_error_panic_hook",
 random_init = ["rand", "rand_pcg"]
 
 [dependencies]
-wasm-bindgen = "0.2.63"
-rand = {version = "0.7.3", optional = true }
-rand_pcg = {version = "0.2.1", optional = true }
+wasm-bindgen = "0.2.74"
+rand = {version = "0.8.4", optional = true }
+rand_pcg = {version = "0.3.1", optional = true }
 
 # The `console_error_panic_hook` crate provides better debugging of panics by
 # logging them with `console.error`. This is great for development, but requires
@@ -39,8 +39,11 @@ features = [
   "console",
 ]
 
+[dependencies.getrandom]
+features = ["js"]
+
 [dev-dependencies]
-wasm-bindgen-test = "0.3.13"
+wasm-bindgen-test = "0.3.24"
 
 [profile.release]
 # Tell `rustc` to optimize for small code size.

src/lib.rs

@@ -8,6 +8,8 @@ use rand::prelude::*;
 
 use rand_pcg::Pcg64Mcg;
 
+mod time;
+
 // When the `wee_alloc` feature is enabled, use `wee_alloc` as the global
 // allocator.
 // #[cfg(feature = "wee_alloc")]
@@ -80,7 +82,7 @@ impl Universe {
 
     #[cfg(feature = "random_init")]
     fn populate_cell(i: u32, rng: &mut Pcg64Mcg, threshold: u32) -> Cell {
-        match rng.gen_range(0, 101).cmp(&threshold) {
+        match rng.gen_range(0..101).cmp(&threshold) {
             Ordering::Less => Cell::Alive,
             Ordering::Greater => Cell::Dead,
             Ordering::Equal => Cell::Dead,
@@ -88,10 +90,11 @@ impl Universe {
     }
 }
 
-#[wasm_bindgen]
+#[wasm_bindgen] // public methods exported to js
 impl Universe {
     pub fn tick(&mut self) {
         // log!("ticking");
+        let _timer = time::Timer::new("Universe::tick"); // will stop when dropped
         let mut next = self.cells.clone();
 
         for row in 0..self.height {

src/time.rs

@@ -0,0 +1,19 @@
+extern crate web_sys;
+use web_sys::console;
+
+pub struct Timer<'a> {
+    name: &'a str,
+}
+
+impl<'a> Timer<'a> {
+    pub fn new(name: &'a str) -> Timer<'a> {
+        console::time_with_label(name);
+        Timer { name }
+    }
+}
+
+impl<'a> Drop for Timer<'a> {
+    fn drop(&mut self) {
+        console::time_end_with_label(self.name);
+    }
+}

www/index.html

@@ -32,6 +32,7 @@
       <label for="play-check">Play</label>
     <button id="step">Step</button>
     <button id="reset">Reset</button>
+    <div id="fps"></div>
     <script src="./bootstrap.js"></script>
   </body>
 </html>

www/index.js

@@ -1,5 +1,5 @@
 import { Universe, Cell, init } from "game-of-life";
-import { memory } from "game-of-life/game_of_life_bg";
+import { memory } from "game-of-life/game_of_life_bg.wasm";
 
 // let PLAY = true;
 // let PLAY = false;
@@ -72,6 +72,7 @@ const drawCells = () => {
 };
 
 const renderSingle = () => {
+    fps.render(); //new
     universe.tick();
   
     drawGrid();
@@ -181,4 +182,47 @@ const onReset = () => {
 document.getElementById("reset").onclick = onReset;
 
 drawGrid();
-drawCells();
+drawCells();
+
+const fps = new class {
+    constructor() {
+      this.fps = document.getElementById("fps");
+      this.frames = [];
+      this.lastFrameTimeStamp = performance.now();
+    }
+  
+    render() {
+      // Convert the delta time since the last frame render into a measure
+      // of frames per second.
+      const now = performance.now();
+      const delta = now - this.lastFrameTimeStamp;
+      this.lastFrameTimeStamp = now;
+      const fps = 1 / delta * 1000;
+  
+      // Save only the latest 100 timings.
+      this.frames.push(fps);
+      if (this.frames.length > 100) {
+        this.frames.shift();
+      }
+  
+      // Find the max, min, and mean of our 100 latest timings.
+      let min = Infinity;
+      let max = -Infinity;
+      let sum = 0;
+      for (let i = 0; i < this.frames.length; i++) {
+        sum += this.frames[i];
+        min = Math.min(this.frames[i], min);
+        max = Math.max(this.frames[i], max);
+      }
+      let mean = sum / this.frames.length;
+  
+      // Render the statistics.
+      this.fps.textContent = `
+  Frames per Second:
+           latest = ${Math.round(fps)} // 
+  avg of last 100 = ${Math.round(mean)} // 
+  min of last 100 = ${Math.round(min)} // 
+  max of last 100 = ${Math.round(max)}
+  `.trim();
+    }
+  };

www/package.json

@@ -5,7 +5,7 @@
   "main": "index.js",
   "scripts": {
     "build": "webpack --config webpack.config.js",
-    "start": "webpack-dev-server"
+    "start": "webpack serve --config webpack.config.js --progress"
   },
   "repository": {
     "type": "git",
@@ -26,9 +26,9 @@
     "game-of-life": "file:../pkg"
   },
   "devDependencies": {
-    "copy-webpack-plugin": "^5.1.2",
-    "webpack": "^4.44.2",
-    "webpack-cli": "^3.1.0",
-    "webpack-dev-server": "^3.1.5"
+    "copy-webpack-plugin": "^9.0.0",
+    "webpack": "^5.40.0",
+    "webpack-cli": "^4.7.2",
+    "webpack-dev-server": "^3.11.2"
   }
 }

www/webpack.config.js

@@ -8,7 +8,16 @@ module.exports = {
     filename: "bootstrap.js",
   },
   mode: "development",
+  experiments: {
+    asyncWebAssembly: true
+  },
   plugins: [
-    new CopyWebpackPlugin(['index.html'])
+    new CopyWebpackPlugin({
+      patterns: [
+        {
+          from: path.resolve(__dirname, "index.html")
+        }
+      ]
+    })
   ],
 };