Solution to tutorial 3

gameOfLife.js

 "use strict";
-
-// Our code is wrapped in an anonymous function to keep 
-// variables private by default
-(function () {
-
-    let h = 20 // height of the board
-    let w = 40 // width of the board
-
-    /* 
-    The board is represented in memory as a flat array, eg:
-    [ 0, 0, 0, 0, 
-        0, 0, 0, 0, 
-        0, 0, 0, 0 ]
-    But we'll initialise its contents in a function.
-    */
-    let board = []
-
-    // Calculates an index into the board for a given (x, y) location
-    function boardIndex(x, y) {
-        return y * w + x
+var Life = /** @class */ (function () {
+    function Life(w, h) {
+        if (w === void 0) { w = 40; }
+        if (h === void 0) { h = 20; }
+        this.w = w;
+        this.h = h;
+        this.board = this.emptyBoard();
     }
-
-    // Zeroes the contents of the board array
-    function emptyBoard() {
-        for (let x = 0; x < w; x++) {
-            for (let y = 0; y < h; y++) {
-                board[boardIndex(x, y)] = 0
+    Life.prototype.boardIndex = function (x, y) {
+        return y * this.w + x;
+    };
+    Life.prototype.x = function (index) {
+        return index % this.w;
+    };
+    Life.prototype.y = function (index) {
+        return Math.floor(index / this.w);
+    };
+    Life.prototype.emptyBoard = function () {
+        var arr = [];
+        for (var i = 0; i < this.h * this.w; i++) {
+            arr.push(false);
         }
+        return arr;
+    };
+    Life.prototype.toggleCell = function (x, y) {
+        var b = this.boardIndex(x, y);
+        this.board[b] = !this.board[b];
+    };
+    Life.prototype.isAlive = function (x, y) {
+        var b = this.boardIndex(x, y);
+        return (x >= 0) && (y >= 0) && (x < this.w) && (y < this.h)
+            && this.board[b];
+    };
+    Life.prototype.liveNeighbours = function (x, y) {
+        var live = 0;
+        for (var _i = 0, _a = [x - 1, x, x + 1]; _i < _a.length; _i++) {
+            var i = _a[_i];
+            for (var _b = 0, _c = [y - 1, y, y + 1]; _b < _c.length; _b++) {
+                var j = _c[_b];
+                if (this.isAlive(i, j) && (i != x || j != y)) {
+                    live++;
                 }
             }
-
-    // toggles wheter a cell is "alive" or not
-    function toggleCell(x, y) {
-        let idx = boardIndex(x, y)
-        board[idx] = !board[idx]
         }
-
-    // determines whether a cell is alive, dealing with range checks
-    function isAlive(x, y) {
-        let idx = boardIndex(x, y)
-        return (x >= 0) && (y >= 0) && (x < w) && (y < h) && board[idx]
+        return live;
+    };
+    Life.prototype.stepGame = function () {
+        var nextBoard = this.emptyBoard();
+        for (var x = 0; x < this.w; x++) {
+            for (var y = 0; y < this.h; y++) {
+                var index = this.boardIndex(x, y);
+                var alive = this.isAlive(x, y);
+                var neighbours = this.liveNeighbours(x, y);
+                if ((alive && (neighbours == 2 || neighbours == 3)) ||
+                    (!alive && neighbours == 3)) {
+                    nextBoard[index] = true;
                 }
-
-    function liveNeighbours(x, y) {
-        let count = 0
-        for (let i = x - 1; i <= x + 1; i++) {
-            for (let j = y - 1; j <= y + 1; j++) {
-                if (isAlive(i,j) && ((i != x) || (j != y))) {
-                    count++
+                else {
+                    nextBoard[index] = false;
                 }
             }
         }
-        return count
-    }
-
-    // Steps the game forward by a single tick, by calculating the 
-    // next state of the board's cells
-    function stepGame() {
-        let nextBoard = []
-
-        for (var x = 0; x < w; x++) {
-            for (let y = 0; y < h; y++) {
-                let idx = boardIndex(x, y)
-                let alive = isAlive(x, y)
-                let neighbours = liveNeighbours(x, y)
-
-                if (
-                    (alive && (neighbours == 2 || neighbours == 3)) ||
-                    (!alive && neighbours == 3)
-                ) {
-                    nextBoard[idx] = 1
-                } else {
-                    nextBoard[idx] = 0
-                }
-            }
-        }
-
-        board = nextBoard
-    }
-
-    
-    // publish our game on the window object
-    window.gameOfLife = {
-
-        getW: function() { return w },
-
-        getH: function() { return h },
-
-        isAlive: isAlive,
-
-        emptyBoard: emptyBoard,
-
-        toggleCell: toggleCell,
-
-        stepGame: stepGame
-
-    }
-
-
-})()
\ No newline at end of file
+        this.board = nextBoard;
+    };
+    return Life;
+}());
+//# sourceMappingURL=gameOfLife.js.map
\ No newline at end of file

gameOfLife.ts

+
+class Life {
+
+    board: Array<boolean>
+
+    constructor(public w:number = 40, public h:number = 20) {
+        this.board = this.emptyBoard()
+    }
+
+    boardIndex(x:number, y:number):number {
+        return y * this.w + x
+    }
+
+    x(index:number) {
+        return index % this.w
+    }
+
+    y(index:number) {
+        return Math.floor(index / this.w)
+    }
+
+    emptyBoard():boolean[] {
+        let arr = <boolean[]>[]
+        for (let i = 0; i < this.h * this.w; i++) {
+            arr.push(false)
+        }
+        return arr
+    }
+
+    toggleCell(x:number, y:number):void {
+        let b = this.boardIndex(x,y)
+        this.board[b] = !this.board[b]
+    }
+
+    isAlive(x:number, y:number):boolean {
+        let b = this.boardIndex(x,y)
+        return (x >= 0) && (y >= 0) && (x < this.w) && (y < this.h) 
+          && this.board[b]
+    }
+
+    liveNeighbours(x:number, y:number) {
+        let live = 0
+        for (let i of [x - 1, x, x + 1]) {
+            for (let j of [y - 1, y, y + 1]) {
+                if (this.isAlive(i,j) && (i != x || j != y)) {
+                    live++
+                }
+            }
+        }
+        return live
+    }
+
+    stepGame():void {
+        let nextBoard = this.emptyBoard()
+        for (let x = 0; x < this.w; x++) {
+            for (let y = 0; y < this.h; y++) {
+                let index = this.boardIndex(x, y)
+                let alive = this.isAlive(x, y)
+                let neighbours = this.liveNeighbours(x, y)
+
+                if (
+                    (alive && (neighbours == 2 || neighbours == 3)) ||
+                    (!alive && neighbours == 3)
+                ) {
+                    nextBoard[index] = true
+                } else {
+                    nextBoard[index] = false
+                }    
+            }
+        }
+        this.board = nextBoard
+    }
+
+}
+
+
+

index.html

@@ -7,14 +7,14 @@
     <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: { gameOfLife.stepGame(); render(); }">Step</button>
+        <button class="btn btn-primary" onclick="javascript: { life.stepGame(); render(); }">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>    
-    gameOfLife.emptyBoard()
     render()
   </script>
 

package-lock.json

+{
+  "name": "tutorial-conway-life-t3",
+  "version": "1.0.0",
+  "lockfileVersion": 1,
+  "requires": true,
+  "dependencies": {
+    "@types/d3": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/@types/d3/-/d3-5.0.0.tgz",
+      "integrity": "sha512-BVfPw7ha+UgsG24v6ymerMY4+pJgQ/6p+hJA4loCeaaqV9snGS/G6ReVaQEn8Himn67dWn/Je9WhRbnDO7MzLw==",
+      "dev": true,
+      "requires": {
+        "@types/d3-array": "*",
+        "@types/d3-axis": "*",
+        "@types/d3-brush": "*",
+        "@types/d3-chord": "*",
+        "@types/d3-collection": "*",
+        "@types/d3-color": "*",
+        "@types/d3-contour": "*",
+        "@types/d3-dispatch": "*",
+        "@types/d3-drag": "*",
+        "@types/d3-dsv": "*",
+        "@types/d3-ease": "*",
+        "@types/d3-fetch": "*",
+        "@types/d3-force": "*",
+        "@types/d3-format": "*",
+        "@types/d3-geo": "*",
+        "@types/d3-hierarchy": "*",
+        "@types/d3-interpolate": "*",
+        "@types/d3-path": "*",
+        "@types/d3-polygon": "*",
+        "@types/d3-quadtree": "*",
+        "@types/d3-random": "*",
+        "@types/d3-scale": "*",
+        "@types/d3-scale-chromatic": "*",
+        "@types/d3-selection": "*",
+        "@types/d3-shape": "*",
+        "@types/d3-time": "*",
+        "@types/d3-time-format": "*",
+        "@types/d3-timer": "*",
+        "@types/d3-transition": "*",
+        "@types/d3-voronoi": "*",
+        "@types/d3-zoom": "*"
+      }
+    },
+    "@types/d3-array": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/@types/d3-array/-/d3-array-1.2.1.tgz",
+      "integrity": "sha512-YBaAfimGdWE4nDuoGVKsH89/dkz2hWZ0i8qC+xxqmqi+XJ/aXiRF0jPtzXmN7VdkpVjy1xuDmM5/m1FNuB6VWA==",
+      "dev": true
+    },
+    "@types/d3-axis": {
+      "version": "1.0.10",
+      "resolved": "https://registry.npmjs.org/@types/d3-axis/-/d3-axis-1.0.10.tgz",
+      "integrity": "sha512-5YF0wfdQMPKw01VAAupLIlg/T4pn5M3/vL9u0KZjiemnVnnKBEWE24na4X1iW+TfZiYJ8j+BgK2KFYnAAT54Ug==",
+      "dev": true,
+      "requires": {
+        "@types/d3-selection": "*"
+      }
+    },
+    "@types/d3-brush": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/@types/d3-brush/-/d3-brush-1.0.8.tgz",
+      "integrity": "sha512-9Thv09jvolu9T1BE3fHmIeYSgbwSpdxtF6/A5HZEDjSTfgtA0mtaXRk5AiWOo0KjuLsI+/7ggD3ZGN5Ye8KXPQ==",
+      "dev": true,
+      "requires": {
+        "@types/d3-selection": "*"
+      }
+    },
+    "@types/d3-chord": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/@types/d3-chord/-/d3-chord-1.0.7.tgz",
+      "integrity": "sha512-WbCN7SxhZMpQQw46oSjAovAmvl3IdjhLuQ4r7AXCzNKyxtXXBWuihSPZ4bVwFQF3+S2z37i9d4hfUBatcSJpog==",
+      "dev": true
+    },
+    "@types/d3-collection": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/@types/d3-collection/-/d3-collection-1.0.7.tgz",
+      "integrity": "sha512-vR3BT0GwHc5y93Jv6bxn3zoxP/vGu+GdXu/r1ApjbP9dLk9I2g6NiV7iP/QMQSuFZd0It0n/qWrfXHxCWwHIkg==",
+      "dev": true
+    },
+    "@types/d3-color": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/@types/d3-color/-/d3-color-1.2.1.tgz",
+      "integrity": "sha512-xwb1tqvYNWllbHuhMFhiXk63Imf+QNq/dJdmbXmr2wQVnwGenCuj3/0IWJ9hdIFQIqzvhT7T37cvx93jtAsDbQ==",
+      "dev": true
+    },
+    "@types/d3-contour": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/@types/d3-contour/-/d3-contour-1.2.1.tgz",
+      "integrity": "sha512-p8iC4KeVFyT3qRTGQRj0Jf5QDdPsDUevBEnma7gEsY1yDolVSLanG2eFAiLV+xj8/5DK7oU7Ey8z0drs3pbsug==",
+      "dev": true,
+      "requires": {
+        "@types/d3-array": "*",
+        "@types/geojson": "*"
+      }
+    },
+    "@types/d3-dispatch": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/@types/d3-dispatch/-/d3-dispatch-1.0.6.tgz",
+      "integrity": "sha512-xyWJQMr832vqhu6fD/YqX+MSFBWnkxasNhcStvlhqygXxj0cKqPft0wuGoH5TIq5ADXgP83qeNVa4R7bEYN3uA==",
+      "dev": true
+    },
+    "@types/d3-drag": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/@types/d3-drag/-/d3-drag-1.2.1.tgz",
+      "integrity": "sha512-J9liJ4NNeV0oN40MzPiqwWjqNi3YHCRtHNfNMZ1d3uL9yh1+vDuo346LBEr8yyBm30WHvrHssAkExVZrGCswtA==",
+      "dev": true,
+      "requires": {
+        "@types/d3-selection": "*"
+      }
+    },
+    "@types/d3-dsv": {
+      "version": "1.0.33",
+      "resolved": "https://registry.npmjs.org/@types/d3-dsv/-/d3-dsv-1.0.33.tgz",
+      "integrity": "sha512-jx5YvaVC3Wfh6LobaiWTeU1NkvL2wPmmpmajk618bD+xVz98yNWzmZMvmlPHGK0HXbMeHmW/6oVX48V9AH1bRQ==",
+      "dev": true
+    },
+    "@types/d3-ease": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/@types/d3-ease/-/d3-ease-1.0.7.tgz",
+      "integrity": "sha1-k6MBhovp4VBh89RDQ7GrP4rLbwk=",
+      "dev": true
+    },
+    "@types/d3-fetch": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@types/d3-fetch/-/d3-fetch-1.1.2.tgz",
+      "integrity": "sha512-w6ANZv/mUh+6IV3drT22zgPWMRobzuGXhzOZC8JPD+ygce0/Vx6vTci3m3dizkocnQQCOwNbrWWWPYqpWiKzRQ==",
+      "dev": true,
+      "requires": {
+        "@types/d3-dsv": "*"
+      }
+    },
+    "@types/d3-force": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@types/d3-force/-/d3-force-1.1.1.tgz",
+      "integrity": "sha512-ePkELuaFWY4yOuf+Bvx5Xd+ihFiYG4bdnW0BlvigovIm8Sob2t76e9RGO6lybQbv6AlW9Icn9HuZ9fmdzEoJyg==",
+      "dev": true
+    },
+    "@types/d3-format": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/@types/d3-format/-/d3-format-1.3.0.tgz",
+      "integrity": "sha512-ZiY4j3iJvAdOwzwW24WjlZbUNvqOsnPAMfPBmdXqxj3uKJbrzBlRrdGl5uC89pZpFs9Dc92E81KcwG2uEgkIZA==",
+      "dev": true
+    },
+    "@types/d3-geo": {
+      "version": "1.10.3",
+      "resolved": "https://registry.npmjs.org/@types/d3-geo/-/d3-geo-1.10.3.tgz",
+      "integrity": "sha512-hfdaxM2L0wA9mDZrrSf2o+DyhEpnJYCiAN+lHFtpfZOVCQrYBA5g33sGRpUbAvjSMyO5jkHbftMWPEhuCMChSg==",
+      "dev": true,
+      "requires": {
+        "@types/geojson": "*"
+      }
+    },
+    "@types/d3-hierarchy": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@types/d3-hierarchy/-/d3-hierarchy-1.1.2.tgz",
+      "integrity": "sha512-L+Ht4doqlCIH8jYN2AC1mYIOj13OxlRhdWNWXv2pc3o5A9i3YmQ0kz6A7w8c+Ujylfusi/FO+zVlVnQoOHc2Qw==",
+      "dev": true
+    },
+    "@types/d3-interpolate": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/@types/d3-interpolate/-/d3-interpolate-1.2.0.tgz",
+      "integrity": "sha512-qM9KlUrqbwIhBRtw9OtAEbkis1AxsOJEun2uxaX/vEsBp3vyNBmhPz9boXXEqic9ZRi7fCpUNRwyZvxa0PioIw==",
+      "dev": true,
+      "requires": {
+        "@types/d3-color": "*"
+      }
+    },
+    "@types/d3-path": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/@types/d3-path/-/d3-path-1.0.7.tgz",
+      "integrity": "sha512-U8dFRG+8WhkLJr2sxZ9Cw/5WeRgBnNqMxGdA1+Z0+ZG6tK0s75OQ4OXnxeyfKuh6E4wQPY8OAKr1+iNDx01BEQ==",
+      "dev": true
+    },
+    "@types/d3-polygon": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/@types/d3-polygon/-/d3-polygon-1.0.6.tgz",
+      "integrity": "sha512-E6Kyodn9JThgLq20nxSbEce9ow5/ePgm9PX2EO6W1INIL4DayM7cFaiG10DStuamjYAd0X4rntW2q+GRjiIktw==",
+      "dev": true
+    },
+    "@types/d3-quadtree": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/@types/d3-quadtree/-/d3-quadtree-1.0.5.tgz",
+      "integrity": "sha1-HOHmWerkUw3wyxJ/KX8XQaNnqC4=",
+      "dev": true
+    },
+    "@types/d3-random": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@types/d3-random/-/d3-random-1.1.1.tgz",
+      "integrity": "sha512-jUPeBq1XKK9/5XasTvy5QAUwFeMsjma2yt/nP02yC2Tijovx7i/W5776U/HZugxc5SSmtpx4Z3g9KFVon0QrjQ==",
+      "dev": true
+    },
+    "@types/d3-scale": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/@types/d3-scale/-/d3-scale-2.0.1.tgz",
+      "integrity": "sha512-D5ZWv8ToLvqacE7XkdMNHMiiVDULdDxT7FMMGU0YJC3/nVzBmApjyTyxracUWOQyY3KK7YhZ05on8pOcNi0dfQ==",
+      "dev": true,
+      "requires": {
+        "@types/d3-time": "*"
+      }
+    },
+    "@types/d3-scale-chromatic": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/@types/d3-scale-chromatic/-/d3-scale-chromatic-1.2.0.tgz",
+      "integrity": "sha512-bhS2SVzUzRtrxp1REhGCfHmj8pyDv9oDmsonYiPvBl8KCxPJTxnfXBF39PzAJrYnRKM41TR0kQzsJvL+NmcDtg==",
+      "dev": true
+    },
+    "@types/d3-selection": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/@types/d3-selection/-/d3-selection-1.3.1.tgz",
+      "integrity": "sha512-G+eO+2G1iW3GNrROxhoU+ar+bIJbQq1QkxcfhwjQ19xA20n3T31j5pSJqAOWvPSoFTz4Ets/DQgYhmgT4jepDg==",
+      "dev": true
+    },
+    "@types/d3-shape": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@types/d3-shape/-/d3-shape-1.2.3.tgz",
+      "integrity": "sha512-iP9TcX0EVi+LlX+jK9ceS+yhEz5abTitF+JaO2ugpRE/J+bccaYLe/0/3LETMmdaEkYarIyboZW8OF67Mpnj1w==",
+      "dev": true,
+      "requires": {
+        "@types/d3-path": "*"
+      }
+    },
+    "@types/d3-time": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/@types/d3-time/-/d3-time-1.0.8.tgz",
+      "integrity": "sha512-/UCphyyw97YAq4zKsuXH33R3UNB4jDSza0fLvMubWr/ONh9IePi1NbgFP222blhiCe724ebJs8U87+aDuAq/jA==",
+      "dev": true
+    },
+    "@types/d3-time-format": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/@types/d3-time-format/-/d3-time-format-2.1.0.tgz",
+      "integrity": "sha512-/myT3I7EwlukNOX2xVdMzb8FRgNzRMpsZddwst9Ld/VFe6LyJyRp0s32l/V9XoUzk+Gqu56F/oGk6507+8BxrA==",
+      "dev": true
+    },
+    "@types/d3-timer": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/@types/d3-timer/-/d3-timer-1.0.7.tgz",
+      "integrity": "sha512-830pT+aYZrgbA91AuynP3KldfB1A1s60d0gKiV+L7JcSKSJapUzUffAm8VZod7RQOxF5SzoItV6cvrTzjbmrJQ==",
+      "dev": true
+    },
+    "@types/d3-transition": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@types/d3-transition/-/d3-transition-1.1.2.tgz",
+      "integrity": "sha512-sTENKlKkUaKUYjeYIj69VYIi3VKeBinY/pYdy5VkjNmEOIasUtZIyAY04waMU4Rq7u+czKQdcP7Aoaf5wpDGfA==",
+      "dev": true,
+      "requires": {
+        "@types/d3-selection": "*"
+      }
+    },
+    "@types/d3-voronoi": {
+      "version": "1.1.7",
+      "resolved": "https://registry.npmjs.org/@types/d3-voronoi/-/d3-voronoi-1.1.7.tgz",
+      "integrity": "sha512-/dHFLK5jhXTb/W4XEQcFydVk8qlIAo85G3r7+N2fkBFw190l0R1GQ8C1VPeXBb2GfSU5GbT2hjlnE7i7UY5Gvg==",
+      "dev": true
+    },
+    "@types/d3-zoom": {
+      "version": "1.7.1",
+      "resolved": "https://registry.npmjs.org/@types/d3-zoom/-/d3-zoom-1.7.1.tgz",
+      "integrity": "sha512-Ofjwz6Pt53tRef9TAwwayN+JThNVYC/vFOepa/H4KtwjhsqkmEseHvc2jpJM7vye5PQ5XHtTSOpdY4Y/6xZWEg==",
+      "dev": true,
+      "requires": {
+        "@types/d3-interpolate": "*",
+        "@types/d3-selection": "*"
+      }
+    },
+    "@types/geojson": {
+      "version": "7946.0.4",
+      "resolved": "https://registry.npmjs.org/@types/geojson/-/geojson-7946.0.4.tgz",
+      "integrity": "sha512-MHmwBtCb7OCv1DSivz2UNJXPGU/1btAWRKlqJ2saEhVJkpkvqHMMaOpKg0v4sAbDWSQekHGvPVMM8nQ+Jen03Q==",
+      "dev": true
+    },
+    "typescript": {
+      "version": "2.9.2",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-2.9.2.tgz",
+      "integrity": "sha512-Gr4p6nFNaoufRIY4NMdpQRNmgxVIGMs4Fcu/ujdYk3nAZqk7supzBE9idmvfZIlH/Cuj//dvi+019qEue9lV0w==",
+      "dev": true
+    }
+  }
+}

package.json

+{
+  "name": "tutorial-conway-life-t3",
+  "version": "1.0.0",
+  "description": "For the second tutorial, we're going to work with SVG, and CSS via SASS.",
+  "main": "gameOfLife.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git@gitlab.une.edu.au:cosc360in2018/tutorial-conway-life-t2.git"
+  },
+  "author": "",
+  "license": "ISC",
+  "devDependencies": {
+    "@types/d3": "^5.0.0",
+    "typescript": "^2.9.2"
+  },
+  "dependencies": {}
+}

render.js

 "use strict";
-
+/// <reference types="d3" />
+var life = new Life();
+var game = d3.select("#game").append("g");
+var cellSize = 20;
 function render() {
-
-    let xmlns = "http://www.w3.org/2000/svg"
-
-    let cellSize = 20
-
-    let gameDiv = document.getElementById("game")
-    gameDiv.innerHTML = ""
-
-    for (let y = 0; y < gameOfLife.getH(); y++) {
-        let row = document.createElementNS(xmlns, "g")
-        row.setAttribute("class", "gamerow")
-        gameDiv.appendChild(row)
-
-        for (let x = 0; x < gameOfLife.getW(); x++) {
-            
-            let t = document.createElementNS(xmlns, "rect")
-            t.setAttribute("x", x * cellSize)
-            t.setAttribute("y", y * cellSize)
-            t.setAttribute("width", cellSize)
-            t.setAttribute("height", cellSize)
-            t.classList.add("cell")
-
-            if (gameOfLife.isAlive(x, y)) {
-                t.classList.add("alive")
-            }
-
-            let handler = function(evt) {
-                gameOfLife.toggleCell(x, y)
-                render()
-            }
-                
-            t.addEventListener("mousedown", handler)
-
-            row.appendChild(t)
-        }
-    }
-
+    console.log("rendering");
+    var update = game.selectAll("rect").data(life.board);
+    update.attr("class", function (d) {
+        return d ? "cell alive" : "cell";
+    });
+    update.enter()
+        .append("rect")
+        .attr("class", function (d) {
+        return d ? "cell alive" : "cell";
+    })
+        .attr("x", function (val, i) {
+        return life.x(i) * cellSize;
+    })
+        .attr("y", function (val, i) {
+        return life.y(i) * cellSize;
+    })
+        .attr("width", cellSize)
+        .attr("height", cellSize)
+        .on("click", function (d, i) {
+        var x = life.x(i);
+        var y = life.y(i);
+        life.toggleCell(x, y);
+        render();
+    });
 }
+//# sourceMappingURL=render.js.map
\ No newline at end of file

render.ts

+/// <reference types="d3" />
+
+const life = new Life()
+const game = d3.select("#game").append("g")
+const cellSize = 20
+
+function render() {
+    console.log("rendering")
+    
+    let update = game.selectAll("rect").data(life.board)
+      
+    update.attr("class", (d) => {
+        return d ? "cell alive" : "cell"            
+    })
+      
+    update.enter()
+        .append("rect")
+        .attr("class", (d) => {
+            return d ? "cell alive" : "cell"            
+        })
+        .attr("x", (val,i) => {
+          return life.x(i) * cellSize
+        })
+        .attr("y", (val,i) => {
+          return life.y(i) * cellSize
+        })
+        .attr("width", cellSize)
+        .attr("height", cellSize)
+        .on("click", (d,i) => {
+            let x = life.x(i)
+            let y = life.y(i)
+            life.toggleCell(x,y)
+            render()
+        })
+  
+
+}
\ No newline at end of file

tsconfig.json

+{
+  "compilerOptions": {
+    /* Basic Options */
+    "target": "es5",                          /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017','ES2018' or 'ESNEXT'. */
+    //"module": "commonjs",                     /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */
+    // "lib": [],                             /* Specify library files to be included in the compilation. */
+    // "allowJs": true,                       /* Allow javascript files to be compiled. */
+    // "checkJs": true,                       /* Report errors in .js files. */
+    // "jsx": "preserve",                     /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */
+    // "declaration": true,                   /* Generates corresponding '.d.ts' file. */
+    // "declarationMap": true,                /* Generates a sourcemap for each corresponding '.d.ts' file. */
+    "sourceMap": true,                     /* Generates corresponding '.map' file. */
+    // "outFile": "./",                       /* Concatenate and emit output to single file. */
+    // "outDir": "./",                        /* Redirect output structure to the directory. */
+    // "rootDir": "./",                       /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */
+    // "composite": true,                     /* Enable project compilation */
+    // "removeComments": true,                /* Do not emit comments to output. */
+    // "noEmit": true,                        /* Do not emit outputs. */
+    // "importHelpers": true,                 /* Import emit helpers from 'tslib'. */
+    // "downlevelIteration": true,            /* Provide full support for iterables in 'for-of', spread, and destructuring when targeting 'ES5' or 'ES3'. */
+    // "isolatedModules": true,               /* Transpile each file as a separate module (similar to 'ts.transpileModule'). */
+
+    /* Strict Type-Checking Options */
+    "strict": true,                           /* Enable all strict type-checking options. */
+    // "noImplicitAny": true,                 /* Raise error on expressions and declarations with an implied 'any' type. */
+    // "strictNullChecks": true,              /* Enable strict null checks. */
+    // "strictFunctionTypes": true,           /* Enable strict checking of function types. */
+    // "strictPropertyInitialization": true,  /* Enable strict checking of property initialization in classes. */
+    // "noImplicitThis": true,                /* Raise error on 'this' expressions with an implied 'any' type. */
+    // "alwaysStrict": true,                  /* Parse in strict mode and emit "use strict" for each source file. */
+
+    /* Additional Checks */
+    // "noUnusedLocals": true,                /* Report errors on unused locals. */
+    // "noUnusedParameters": true,            /* Report errors on unused parameters. */
+    // "noImplicitReturns": true,             /* Report error when not all code paths in function return a value. */
+    // "noFallthroughCasesInSwitch": true,    /* Report errors for fallthrough cases in switch statement. */
+
+    /* Module Resolution Options */
+    // "moduleResolution": "node",            /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */
+    // "baseUrl": "./",                       /* Base directory to resolve non-absolute module names. */
+    // "paths": {},                           /* A series of entries which re-map imports to lookup locations relative to the 'baseUrl'. */
+    // "rootDirs": [],                        /* List of root folders whose combined content represents the structure of the project at runtime. */
+    // "typeRoots": [],                       /* List of folders to include type definitions from. */
+    // "types": [],                           /* Type declaration files to be included in compilation. */
+    // "allowSyntheticDefaultImports": true,  /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */
+    "esModuleInterop": true                   /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */
+    // "preserveSymlinks": true,              /* Do not resolve the real path of symlinks. */
+
+    /* Source Map Options */
+    // "sourceRoot": "./",                    /* Specify the location where debugger should locate TypeScript files instead of source locations. */
+    // "mapRoot": "./",                       /* Specify the location where debugger should locate map files instead of generated locations. */
+    // "inlineSourceMap": true,               /* Emit a single file with source maps instead of having a separate file. */
+    // "inlineSources": true,                 /* Emit the source alongside the sourcemaps within a single file; requires '--inlineSourceMap' or '--sourceMap' to be set. */
+
+    /* Experimental Options */
+    // "experimentalDecorators": true,        /* Enables experimental support for ES7 decorators. */
+    // "emitDecoratorMetadata": true,         /* Enables experimental support for emitting type metadata for decorators. */
+  }
+}
\ No newline at end of file