es6 class syntax

src/modules/board.js

@@ -2,7 +2,8 @@ import { create2dState, create1dStateOneCell, create1dState } from "./core.js";
 
 import { getRandomInt } from "./common.js";
 
-function Board(width, height, grid = []) {
+class Board {
+  constructor(width, height, grid = []) {
     this.width = width;
     this.height = height;
     (this.cellProperties = {
@@ -11,6 +12,7 @@ function Board(width, height, grid = []) {
       deadColor: "#F5F5F5",
     }),
       (this.grid = grid);
+  }
 }
 
 // create a first state, either a single living cell

src/modules/renderer.js

@@ -1,17 +1,18 @@
 import { boardToPic, scaleToTargetSize } from "./picture.js";
 
-function scaleAndApply(context, ratio, callback) {
-  context.save();
-  // rescale
-  context.imageSmoothingEnabled = false;
-  context.scale(ratio, ratio);
-  // apply
-  callback();
-  context.restore();
-}
+class Renderer {
+  constructor() {
+    this.canvas = null;
+    this.workCanvas = null;
+    this.workCtx = null;
+    this.width = null;
+    this.height = null;
+    this.ctx = null;
+    this.refreshRate = 300;
+  }
 
-// draws the board representation on the canvas
-function render(board) {
+  // draws the board representation on the canvas
+  render(board) {
     const d = board.cellProperties.size;
     // bool to RGBA colors
     const img = boardToPic(board);
@@ -20,10 +21,10 @@ function render(board) {
       this.workCtx.putImageData(img, 0, 0);
       this.ctx.drawImage(this.workCanvas, 0, 0, this.width, this.height);
     });
-}
+  }
 
-// draw image on canvas
-function renderImage(image, ctx, tw, th) {
+  // draw image on canvas
+  renderImage(image, ctx, tw, th) {
     ctx.fillStyle = "black";
     ctx.fillRect(0, 0, tw, th);
     const dimensions = scaleToTargetSize(image.width, image.height, tw, th);
@@ -35,33 +36,32 @@ function renderImage(image, ctx, tw, th) {
       dimensions[1]
     );
     return ctx.getImageData(0, 0, tw, th);
-}
+  }
 
-function resize(width, height) {
+  // resize canvas and workcavas
+  resize(width, height) {
     this.width = width;
     this.height = height;
     this.canvas.height = height;
     this.canvas.width = width;
     this.workCanvas.height = height;
     this.workCanvas.width = width;
-}
+  }
 
-function reset() {
+  // clear any drawing from canvas
+  reset() {
     this.ctx.clearRect(0, 0, this.width, this.height);
+  }
 }
 
-function Renderer() {
-  this.canvas = null;
-  this.workCanvas = null;
-  this.workCtx = null;
-  this.width = null;
-  this.height = null;
-  this.ctx = null;
-  this.refreshRate = 300;
-  this.render = render;
-  this.renderImage = renderImage;
-  this.reset = reset;
-  this.resize = resize;
+function scaleAndApply(context, ratio, callback) {
+  context.save();
+  // rescale
+  context.imageSmoothingEnabled = false;
+  context.scale(ratio, ratio);
+  // apply
+  callback();
+  context.restore();
 }
 
 export { Renderer };