fixes empty initial step and board dimensions

src/components/CanvasBoard.vue

@@ -47,6 +47,10 @@
         canvasHeight: "canvasHeight",
         getReset: "reset",
       }),
+      // used to determine the dimensions of the board
+      max() {
+        return Math.max(this.boardWidth, this.boardHeight);
+      },
     },
     watch: {
       getDraw1d(value) {
@@ -76,6 +80,7 @@
         "setBoardWidth",
         "setBoardHeight",
       ]),
+      // draws the board on the canvas
       drawCanvas(board) {
         const props = this.cellProperties;
         board.map((row, y) => {
@@ -92,22 +97,22 @@
           });
         });
       },
+      // create a first state, either a single living cell
+      // at the center or random ones
       compute1dInitialState() {
         if (this.initial1dState === "onecell")
           return create1dStateOneCell(this.boardWidth);
         return create1dState(this.boardWidth, getRandomInt, [0, 2]);
       },
+      // draw elementary automaton on the canvas based on selected ruleset
       draw1d() {
         const initialState = this.compute1dInitialState();
-        const board = createBoard(
-          initialState,
-          this.ruleset.rules,
-          this.boardWidth
-        );
+        const board = createBoard(initialState, this.ruleset.rules, this.max);
         this.lastBoard = Object.freeze(board);
         this.drawCanvas(board);
         this.toggleStop();
       },
+      // draw 2D automaton on the canvas (currently only the game of life)
       draw2d(board) {
         if (!this.canDraw) return;
         const draw2dNext = async (b) => {
@@ -119,6 +124,7 @@
         };
         return draw2dNext(board);
       },
+      // draw 2d automaton from a new state
       draw2dNew() {
         const initialState = create2dState(
           this.boardWidth,
@@ -130,9 +136,11 @@
         this.lastBoard = Object.freeze(board);
         this.draw2d(board);
       },
+      // draw 2d automaton from the last known generated board
       async draw2dLast() {
         if (this.lastBoard != undefined) this.draw2d(this.lastBoard);
       },
+      // stop drawing routines and clear the canvas
       reset() {
         this.toggleStop();
         this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);