Added solution to tutorial 4

index.html

@@ -7,16 +7,12 @@
     <h1>Conway's Game of Life</h1>
     <svg xmlns="http://www.w3.org/2000/svg" id="game" width="640" height="400"></svg>
     <div>
-        <button class="btn btn-primary" onclick="javascript: { life.stepGame(); render(); }">Step</button>
+        <button id="step" class="btn btn-primary" >Step</button>
     </div>
   </div>
 
   <script src="https://d3js.org/d3.v5.min.js"></script>
-  <script src="gameOfLife.js"></script>
-  <script src="render.js"></script>
-  <script>    
-    render()
-  </script>
+  <script src="dist/bundle.js"></script>
 
   <link rel="stylesheet" href="style.css" />
 

package.json

@@ -4,6 +4,7 @@
   "description": "For the second tutorial, we're going to work with SVG, and CSS via SASS.",
   "main": "gameOfLife.js",
   "scripts": {
+    "build": "webpack",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "repository": {
@@ -14,7 +15,16 @@
   "license": "ISC",
   "devDependencies": {
     "@types/d3": "^5.0.0",
-    "typescript": "^2.9.2"
+    "css-loader": "^1.0.0",
+    "ts-loader": "^4.4.2",
+    "typescript": "^2.9.2",
+    "vue": "^2.5.16",
+    "vue-loader": "^15.2.6",
+    "vue-template-compiler": "^2.5.16",
+    "webpack": "^4.16.3"
   },
-  "dependencies": {}
+  "dependencies": {
+    "d3": "^5.5.0",
+    "webpack-cli": "^3.1.0"
+  }
 }

gameOfLife.ts → src/gameOfLife.ts

 
-class Life {
+export default class Life {
 
     board: Array<boolean>
 

src/index.ts

+import { render, life } from "./render"
+
+render()
+
+document.getElementById("step")!.addEventListener("click", () => {
+    life.stepGame()
+    render()
+})
\ No newline at end of file

render.ts → src/render.ts

-/// <reference types="d3" />
+import Life from "./gameOfLife"
+import * as d3 from "d3"
+
+let foo = "bar"
 
 const life = new Life()
 const game = d3.select("#game").append("g")
 const cellSize = 20
 
+export {
+    life as life,
+    render as render
+}
+
 function render() {
     console.log("rendering")
     

webpack.config.js

+const path = require('path');
+
+module.exports = {
+  entry: './src/index.ts',
+  module: {
+    rules: [
+      {
+        test: /\.tsx?$/,
+        use: 'ts-loader',
+        exclude: /node_modules/
+      }
+    ]
+  },
+  resolve: {
+    extensions: [ '.tsx', '.ts', '.js' ]
+  },
+  output: {
+    filename: 'bundle.js',
+    path: path.resolve(__dirname, 'dist')
+  }
+};
\ No newline at end of file