Update Game of life to allow changing Cell from JS

README.md

@@ -67,3 +67,35 @@ wasm-pack publish
   for logging panic messages to the developer console.
 * [`wee_alloc`](https://github.com/rustwasm/wee_alloc), an allocator optimized
   for small code size.
+
+
+# Note for myself
+
+Crée l'arborescence www
+
+~~~
+$ wasm-pack build
+$ npm init wasm-app www
+$ cd www/
+$ npm install
+~~~
+
+Puis :
+
+~~~
+$ vim www/package.json
+--
+  "dependencies": {
+    "wasm-game-of-life": "file:../pkg", // Add this line!
+--
+~~~
+
+Puis :
+
+~~~
+$ vim www/index.js
+--
+import * as wasm from "wasm-game-of-life";
+(…)
+--
+~~~

src/lib.rs

@@ -8,12 +8,146 @@ use wasm_bindgen::prelude::*;
 #[global_allocator]
 static ALLOC: wee_alloc::WeeAlloc = wee_alloc::WeeAlloc::INIT;
 
-#[wasm_bindgen]
+
+#[wasm_bindgen] // Alert export to JS
 extern {
-    fn alert(s: &str);
+  pub fn alert(s: &str);
 }
 
-#[wasm_bindgen]
+// Universe is represented as a linear Array of Cells
-pub fn greet() {
+// If we want to access row 5 column 2 we apply :
-    alert("Hello, wasm-game-of-life!");
+// cell_pos = 5(row) * width(universe) + 2(column)
+#[wasm_bindgen] // Export to JS
+#[repr(u8)] // each cell is represented as a single byte
+#[derive(Clone, Copy, Debug, PartialEq, Eq)]
+pub enum Cell {
+  Dead = 0,
+  Alive = 1,
+}
+
+#[wasm_bindgen] // Export to JS
+pub struct Universe {
+  width: u32,
+  height: u32,
+  cells: Vec<Cell>,
+}
+
+// Not exported to JS
+impl Universe {
+
+  fn live_neighbor_count(&self, row: u32, column: u32) -> u8 {
+    let mut count = 0;
+    for delta_row in [self.height-1, 0, 1].iter().cloned() {
+      for delta_col in [self.width -1, 0, 1].iter().cloned() {
+        if delta_row == 0 && delta_col == 0 {
+          continue;
+        }
+
+        let neighbor_row = (row + delta_row) % self.height;
+        let neighbor_col = (column + delta_col) % self.width;
+        let idx = self.get_index(neighbor_row, neighbor_col);
+
+        count += self.cells[idx] as u8;
+      }
+    }
+    count
+  }
+}
+
+use std::fmt;
+
+impl fmt::Display for Universe {
+  fn fmt(&self, f: &mut fmt::Formatter) -> fmt::Result {
+    for line in self.cells.as_slice().chunks(self.width as usize) {
+      for &cell in line {
+        let symbol = if cell == Cell::Dead { '◻' } else { '◼' };
+        write!(f, "{}", symbol)?;
+      }
+      write!(f, "\n")?;
+    }
+
+    Ok(())
+  }
+}
+
+// Exported to JS
+#[wasm_bindgen]
+impl Universe {
+  pub fn get_index(&self, row: u32, column: u32) -> usize {
+    (row * self.width + column) as usize
+  }
+
+  pub fn width(&self) -> u32 {
+    self.width
+  }
+
+  pub fn height(&self) -> u32 {
+    self.height
+  }
+
+  // Return mutable pointer to Cell
+  pub fn cells(&mut self) -> *mut Cell {
+    self.cells.as_mut_ptr()
+  }
+
+  // Will be called by JS
+  pub fn tick(&mut self) {
+    let mut next = self.cells.clone();
+
+    for row in 0..self.height {
+      for col in 0..self.width {
+        let idx = self.get_index(row, col);
+        let cell = self.cells[idx];
+        let live_neighbors = self.live_neighbor_count(row, col);
+
+        // BM: Match + tuple c'est cool
+        let next_cell = match (cell, live_neighbors) {
+          // Rule 1: Any live cell with fewer than two live neighbours
+          // dies, as if caused by underpopulation.
+          (Cell::Alive, x) if x < 2 => Cell::Dead,
+          // Rule 2: Any live cell with two or three live neighbours
+          // lives on to the next generation.
+          (Cell::Alive, 2) | (Cell::Alive, 3) => Cell::Alive,
+          // Rule 3: Any live cell with more than three live
+          // neighbours dies, as if by overpopulation.
+          (Cell::Alive, x) if x > 3 => Cell::Dead,
+          // Rule 4: Any dead cell with exactly three live neighbours
+          // becomes a live cell, as if by reproduction.
+          (Cell::Dead, 3) => Cell::Alive,
+          // All other cells remain in the same state.
+          (otherwise, _) => otherwise,
+        };
+
+        next[idx] = next_cell;
+      }
+    }
+
+    self.cells = next;
+  }
+
+  pub fn new(w: u32, h: u32) -> Universe {
+    let width = w;
+    let height = h;
+
+
+    let cells = (0..width * height)
+      .map(|i| {
+        if i % 2 == 0 || i % 7 == 0 {
+          Cell::Alive
+        } else {
+          Cell::Dead
+        }
+      })
+      .collect();
+
+    Universe {
+      width,
+      height,
+      cells,
+    }
+  }
+
+  pub fn render(&self) -> String {
+    self.to_string()
+  }
 }

www/.bin/create-wasm-app.js

@@ -0,0 +1,24 @@
+#!/usr/bin/env node
+
+const { spawn } = require("child_process");
+const fs = require("fs");
+
+let folderName = '.';
+
+if (process.argv.length >= 3) {
+  folderName = process.argv[2];
+  if (!fs.existsSync(folderName)) {
+    fs.mkdirSync(folderName);
+  }
+}
+
+const clone = spawn("git", ["clone", "https://github.com/rustwasm/create-wasm-app.git", folderName]);
+
+clone.on("close", code => {
+  if (code !== 0) {
+    console.error("cloning the template failed!")
+    process.exit(code);
+  } else {
+    console.log("🦀 Rust + 🕸 Wasm = ❤");
+  }
+});

www/.gitignore

@@ -0,0 +1,2 @@
+node_modules
+dist

www/LICENSE-APACHE

@@ -0,0 +1,201 @@
+                              Apache License
+                        Version 2.0, January 2004
+                     http://www.apache.org/licenses/
+
+TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+1. Definitions.
+
+   "License" shall mean the terms and conditions for use, reproduction,
+   and distribution as defined by Sections 1 through 9 of this document.
+
+   "Licensor" shall mean the copyright owner or entity authorized by
+   the copyright owner that is granting the License.
+
+   "Legal Entity" shall mean the union of the acting entity and all
+   other entities that control, are controlled by, or are under common
+   control with that entity. For the purposes of this definition,
+   "control" means (i) the power, direct or indirect, to cause the
+   direction or management of such entity, whether by contract or
+   otherwise, or (ii) ownership of fifty percent (50%) or more of the
+   outstanding shares, or (iii) beneficial ownership of such entity.
+
+   "You" (or "Your") shall mean an individual or Legal Entity
+   exercising permissions granted by this License.
+
+   "Source" form shall mean the preferred form for making modifications,
+   including but not limited to software source code, documentation
+   source, and configuration files.
+
+   "Object" form shall mean any form resulting from mechanical
+   transformation or translation of a Source form, including but
+   not limited to compiled object code, generated documentation,
+   and conversions to other media types.
+
+   "Work" shall mean the work of authorship, whether in Source or
+   Object form, made available under the License, as indicated by a
+   copyright notice that is included in or attached to the work
+   (an example is provided in the Appendix below).
+
+   "Derivative Works" shall mean any work, whether in Source or Object
+   form, that is based on (or derived from) the Work and for which the
+   editorial revisions, annotations, elaborations, or other modifications
+   represent, as a whole, an original work of authorship. For the purposes
+   of this License, Derivative Works shall not include works that remain
+   separable from, or merely link (or bind by name) to the interfaces of,
+   the Work and Derivative Works thereof.
+
+   "Contribution" shall mean any work of authorship, including
+   the original version of the Work and any modifications or additions
+   to that Work or Derivative Works thereof, that is intentionally
+   submitted to Licensor for inclusion in the Work by the copyright owner
+   or by an individual or Legal Entity authorized to submit on behalf of
+   the copyright owner. For the purposes of this definition, "submitted"
+   means any form of electronic, verbal, or written communication sent
+   to the Licensor or its representatives, including but not limited to
+   communication on electronic mailing lists, source code control systems,
+   and issue tracking systems that are managed by, or on behalf of, the
+   Licensor for the purpose of discussing and improving the Work, but
+   excluding communication that is conspicuously marked or otherwise
+   designated in writing by the copyright owner as "Not a Contribution."
+
+   "Contributor" shall mean Licensor and any individual or Legal Entity
+   on behalf of whom a Contribution has been received by Licensor and
+   subsequently incorporated within the Work.
+
+2. Grant of Copyright License. Subject to the terms and conditions of
+   this License, each Contributor hereby grants to You a perpetual,
+   worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+   copyright license to reproduce, prepare Derivative Works of,
+   publicly display, publicly perform, sublicense, and distribute the
+   Work and such Derivative Works in Source or Object form.
+
+3. Grant of Patent License. Subject to the terms and conditions of
+   this License, each Contributor hereby grants to You a perpetual,
+   worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+   (except as stated in this section) patent license to make, have made,
+   use, offer to sell, sell, import, and otherwise transfer the Work,
+   where such license applies only to those patent claims licensable
+   by such Contributor that are necessarily infringed by their
+   Contribution(s) alone or by combination of their Contribution(s)
+   with the Work to which such Contribution(s) was submitted. If You
+   institute patent litigation against any entity (including a
+   cross-claim or counterclaim in a lawsuit) alleging that the Work
+   or a Contribution incorporated within the Work constitutes direct
+   or contributory patent infringement, then any patent licenses
+   granted to You under this License for that Work shall terminate
+   as of the date such litigation is filed.
+
+4. Redistribution. You may reproduce and distribute copies of the
+   Work or Derivative Works thereof in any medium, with or without
+   modifications, and in Source or Object form, provided that You
+   meet the following conditions:
+
+   (a) You must give any other recipients of the Work or
+       Derivative Works a copy of this License; and
+
+   (b) You must cause any modified files to carry prominent notices
+       stating that You changed the files; and
+
+   (c) You must retain, in the Source form of any Derivative Works
+       that You distribute, all copyright, patent, trademark, and
+       attribution notices from the Source form of the Work,
+       excluding those notices that do not pertain to any part of
+       the Derivative Works; and
+
+   (d) If the Work includes a "NOTICE" text file as part of its
+       distribution, then any Derivative Works that You distribute must
+       include a readable copy of the attribution notices contained
+       within such NOTICE file, excluding those notices that do not
+       pertain to any part of the Derivative Works, in at least one
+       of the following places: within a NOTICE text file distributed
+       as part of the Derivative Works; within the Source form or
+       documentation, if provided along with the Derivative Works; or,
+       within a display generated by the Derivative Works, if and
+       wherever such third-party notices normally appear. The contents
+       of the NOTICE file are for informational purposes only and
+       do not modify the License. You may add Your own attribution
+       notices within Derivative Works that You distribute, alongside
+       or as an addendum to the NOTICE text from the Work, provided
+       that such additional attribution notices cannot be construed
+       as modifying the License.
+
+   You may add Your own copyright statement to Your modifications and
+   may provide additional or different license terms and conditions
+   for use, reproduction, or distribution of Your modifications, or
+   for any such Derivative Works as a whole, provided Your use,
+   reproduction, and distribution of the Work otherwise complies with
+   the conditions stated in this License.
+
+5. Submission of Contributions. Unless You explicitly state otherwise,
+   any Contribution intentionally submitted for inclusion in the Work
+   by You to the Licensor shall be under the terms and conditions of
+   this License, without any additional terms or conditions.
+   Notwithstanding the above, nothing herein shall supersede or modify
+   the terms of any separate license agreement you may have executed
+   with Licensor regarding such Contributions.
+
+6. Trademarks. This License does not grant permission to use the trade
+   names, trademarks, service marks, or product names of the Licensor,
+   except as required for reasonable and customary use in describing the
+   origin of the Work and reproducing the content of the NOTICE file.
+
+7. Disclaimer of Warranty. Unless required by applicable law or
+   agreed to in writing, Licensor provides the Work (and each
+   Contributor provides its Contributions) on an "AS IS" BASIS,
+   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+   implied, including, without limitation, any warranties or conditions
+   of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
+   PARTICULAR PURPOSE. You are solely responsible for determining the
+   appropriateness of using or redistributing the Work and assume any
+   risks associated with Your exercise of permissions under this License.
+
+8. Limitation of Liability. In no event and under no legal theory,
+   whether in tort (including negligence), contract, or otherwise,
+   unless required by applicable law (such as deliberate and grossly
+   negligent acts) or agreed to in writing, shall any Contributor be
+   liable to You for damages, including any direct, indirect, special,
+   incidental, or consequential damages of any character arising as a
+   result of this License or out of the use or inability to use the
+   Work (including but not limited to damages for loss of goodwill,
+   work stoppage, computer failure or malfunction, or any and all
+   other commercial damages or losses), even if such Contributor
+   has been advised of the possibility of such damages.
+
+9. Accepting Warranty or Additional Liability. While redistributing
+   the Work or Derivative Works thereof, You may choose to offer,
+   and charge a fee for, acceptance of support, warranty, indemnity,
+   or other liability obligations and/or rights consistent with this
+   License. However, in accepting such obligations, You may act only
+   on Your own behalf and on Your sole responsibility, not on behalf
+   of any other Contributor, and only if You agree to indemnify,
+   defend, and hold each Contributor harmless for any liability
+   incurred by, or claims asserted against, such Contributor by reason
+   of your accepting any such warranty or additional liability.
+
+END OF TERMS AND CONDITIONS
+
+APPENDIX: How to apply the Apache License to your work.
+
+   To apply the Apache License to your work, attach the following
+   boilerplate notice, with the fields enclosed by brackets "[]"
+   replaced with your own identifying information. (Don't include
+   the brackets!)  The text should be enclosed in the appropriate
+   comment syntax for the file format. We also recommend that a
+   file or class name and description of purpose be included on the
+   same "printed page" as the copyright notice for easier
+   identification within third-party archives.
+
+Copyright [yyyy] [name of copyright owner]
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.

www/LICENSE-MIT

@@ -0,0 +1,25 @@
+Copyright (c) [year] [name]
+
+Permission is hereby granted, free of charge, to any
+person obtaining a copy of this software and associated
+documentation files (the "Software"), to deal in the
+Software without restriction, including without
+limitation the rights to use, copy, modify, merge,
+publish, distribute, sublicense, and/or sell copies of
+the Software, and to permit persons to whom the Software
+is furnished to do so, subject to the following
+conditions:
+
+The above copyright notice and this permission notice
+shall be included in all copies or substantial portions
+of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF
+ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A
+PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT
+SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY
+CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR
+IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER
+DEALINGS IN THE SOFTWARE.

www/README.md

@@ -0,0 +1,48 @@
+<div align="center">
+
+  <h1><code>Game of Life</code></h1>
+
+  <sub>Built with 🦀🕸 by <a href="https://rustwasm.github.io/">The Rust and WebAssembly Working Group</a></sub>
+</div>
+
+## About
+
+This template is designed for depending on NPM packages that contain
+Rust-generated WebAssembly and using them to create a Website.
+
+* Want to create an NPM package with Rust and WebAssembly? [Check out
+  `wasm-pack-template`.](https://github.com/rustwasm/wasm-pack-template)
+* Want to make a monorepo-style Website without publishing to NPM? Check out
+  [`rust-webpack-template`](https://github.com/rustwasm/rust-webpack-template)
+  and/or
+  [`rust-parcel-template`](https://github.com/rustwasm/rust-parcel-template).
+
+## 🚴 Usage
+
+```
+npm init wasm-app
+```
+
+## 🔋 Batteries Included
+
+- `.gitignore`: ignores `node_modules`
+- `LICENSE-APACHE` and `LICENSE-MIT`: most Rust projects are licensed this way, so these are included for you
+- `README.md`: the file you are reading now!
+- `index.html`: a bare bones html document that includes the webpack bundle
+- `index.js`: example js file with a comment showing how to import and use a wasm pkg
+- `package.json` and `package-lock.json`:
+  - pulls in devDependencies for using webpack:
+      - [`webpack`](https://www.npmjs.com/package/webpack)
+      - [`webpack-cli`](https://www.npmjs.com/package/webpack-cli)
+      - [`webpack-dev-server`](https://www.npmjs.com/package/webpack-dev-server)
+  - defines a `start` script to run `webpack-dev-server`
+- `webpack.config.js`: configuration file for bundling your js with webpack
+
+## License
+
+Licensed under either of
+
+* Apache License, Version 2.0, ([LICENSE-APACHE](LICENSE-APACHE) or http://www.apache.org/licenses/LICENSE-2.0)
+* MIT license ([LICENSE-MIT](LICENSE-MIT) or http://opensource.org/licenses/MIT)
+
+at your option.

www/bootstrap.js

@@ -0,0 +1,5 @@
+// A dependency graph that contains any wasm must all be imported
+// asynchronously. This `bootstrap.js` file does the single async import, so
+// that no one else needs to worry about it again.
+import("./index.js")
+  .catch(e => console.error("Error importing `index.js`:", e));

www/index.html

@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Hello wasm-pack!</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>
+
+    <canvas id="game-of-life-canvas"></canvas>
+    <script src="./bootstrap.js"></script>
+  </body>
+</html>

www/index.js

@@ -0,0 +1,138 @@
+// Import the WebAssembly memory at the top of the file.
+import { memory } from "wasm-game-of-life/wasm_game_of_life_bg";
+
+import { Universe, Cell } from "wasm-game-of-life";
+
+let req_id;
+let stop = false;
+
+const CELL_SIZE = 60; // px
+const GRID_COLOR = "#CCCCCC";
+const DEAD_COLOR = "#FFFFFF";
+const ALIVE_COLOR = "#3399FF";
+
+const universe = Universe.new(5,5);
+
+const width = universe.width();
+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');
+
+// The JavaScript runs in a requestAnimationFrame loop.
+const renderLoop = async () => {
+  await new Promise(r => setTimeout(r, 200));
+  universe.tick();
+  drawCells();
+
+  if (stop == false)
+    req_id = requestAnimationFrame(renderLoop);
+};
+
+// Return Cell position
+function getCursorPos(canvas, evt) {
+  const rect = canvas.getBoundingClientRect();
+
+  // Bound check: It seems that the last case can overlap
+  let x = Math.trunc((evt.clientX - rect.left) / CELL_SIZE);
+  if (x >= (width))
+    x = x - 1;
+
+  let y = Math.trunc((evt.clientY - rect.top) / CELL_SIZE);
+  if (y >= (height))
+    y = y - 1;
+
+  return { x,
+           y,
+         };
+}
+
+canvas.addEventListener('mouseover',
+                        function(evt) {
+                          console.log("Stopping Animation Frame");
+                          stop = true;
+                        });
+
+canvas.addEventListener('mouseout',
+                        function(evt) {
+                          console.log("Starting Animation Frame");
+                          stop = false;
+                          start();
+                        });
+
+// Get Mouse position
+canvas.addEventListener('click',
+                        function(evt) {
+                          var mousePos = getCursorPos(canvas, evt);
+                          let cellsPtr = universe.cells();
+                          let cells = new Uint8Array(memory.buffer, cellsPtr, width * height);
+                          console.log("Click position : X = " + (mousePos.x) + ", Y = " + (mousePos.y));
+                          const idx = universe.get_index(mousePos.y, mousePos.x);
+                          if (cells[idx] === Cell.Dead)
+                            console.log("Cell[" + idx + "] is : " +  "Dead !");
+                          else
+                            console.log("Cell[" + idx + "] is : " +  "Alive !");
+
+                          // Change to inverse !
+                          cells[idx] = (cells[idx] === Cell.Dead) ? Cell.Alive : Cell.Dead;
+                          drawCells();
+                        });
+
+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();
+};
+
+
+// We can directly access WebAssembly's linear memory via memory, which is defined in the raw wasm module wasm_game_of_life_bg.
+// To draw the cells, we get a pointer to the universe's cells, construct a Uint8Array overlaying the cells buffer, iterate over each cell, and draw a white or black rectangle depending on whether the cell is dead or alive, respectively.
+// By working with pointers and overlays, we avoid copying the cells across the boundary on every tick.
+const drawCells = () => {
+  // Modify Plus const
+  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 < width; col++) {
+      const idx = universe.get_index(row, col);
+
+      ctx.fillStyle = (cells[idx] === Cell.Dead) ? DEAD_COLOR : ALIVE_COLOR;
+
+      ctx.fillRect(
+        col * (CELL_SIZE + 1) + 1, // x
+        row * (CELL_SIZE + 1) + 1, // y
+        CELL_SIZE, // Width
+        CELL_SIZE // Height
+      );
+    }
+  }
+
+  ctx.stroke();
+};
+
+function start() {
+  drawGrid();
+  drawCells();
+  req_id = requestAnimationFrame(renderLoop);
+}
+
+start();

www/package.json

@@ -0,0 +1,38 @@
+{
+  "name": "Wasm GameOfLife",
+  "version": "0.1.0",
+  "description": "Game of Life in Wasm",
+  "main": "index.js",
+  "bin": {
+    "create-wasm-app": ".bin/create-wasm-app.js"
+  },
+  "scripts": {
+    "build": "webpack --config webpack.config.js",
+    "start": "webpack-dev-server"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/rustwasm/create-wasm-app.git"
+  },
+  "keywords": [
+    "webassembly",
+    "wasm",
+    "rust",
+    "webpack"
+  ],
+  "author": "Ashley Williams <ashley666ashley@gmail.com>",
+  "license": "(MIT OR Apache-2.0)",
+  "bugs": {
+    "url": "https://github.com/rustwasm/create-wasm-app/issues"
+  },
+  "homepage": "https://dev.beneth.fr/wasm_game_of_life",
+  "devDependencies": {
+    "webpack": "^4.29.3",
+    "webpack-cli": "^3.1.0",
+    "webpack-dev-server": "^3.1.5",
+    "copy-webpack-plugin": "^5.0.0"
+  },
+  "dependencies": {
+    "wasm-game-of-life": "file:../pkg"
+  }
+}

www/webpack.config.js

@@ -0,0 +1,14 @@
+const CopyWebpackPlugin = require("copy-webpack-plugin");
+const path = require('path');
+
+module.exports = {
+  entry: "./bootstrap.js",
+  output: {
+    path: path.resolve(__dirname, "dist"),
+    filename: "bootstrap.js",
+  },
+  mode: "development",
+  plugins: [
+    new CopyWebpackPlugin(['index.html'])
+  ],
+};