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 = {
@@ -12,6 +13,7 @@ function Board(width, height, grid = []) {
     }),
       (this.grid = grid);
   }
+}
 
 // create a first state, either a single living cell
 // at the center or random ones

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) {
+  render(board) {
     const d = board.cellProperties.size;
     // bool to RGBA colors
     const img = boardToPic(board);
@@ -23,7 +24,7 @@ function render(board) {
   }
 
   // draw image on canvas
-function renderImage(image, ctx, tw, th) {
+  renderImage(image, ctx, tw, th) {
     ctx.fillStyle = "black";
     ctx.fillRect(0, 0, tw, th);
     const dimensions = scaleToTargetSize(image.width, image.height, tw, th);
@@ -37,7 +38,8 @@ function renderImage(image, ctx, tw, th) {
     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;
@@ -46,22 +48,20 @@ function resize(width, 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 };