i liked a global event bus better

src/components/CanvasBoard.vue

@@ -25,7 +25,6 @@ export default {
     return {
       canvas: null,
       ctx: null,
-      drawing: 0,
     };
   },
   computed: {
@@ -37,8 +36,12 @@ export default {
       refreshRate: "getRefreshRate",
       initial1dState: "getInitial1dState",
       drawingDirection: "getDrawingDirection",
+      canDraw: "getCanDraw",
       lastBoard: "getLastBoard",
-      isDrawing1d: "getIsDrawing1d",
+      getDraw1d: "getDraw1d",
+      getDraw2d: "getDraw2d",
+      getDraw2dLast: "getDraw2dLast",
+      getReset: "getReset",
     }),
     boardWidth: function () {
       return Math.floor(this.canvasWidth / this.cellProperties.size);
@@ -48,10 +51,17 @@ export default {
     },
   },
   watch: {
-    isDrawing1d(value) {
-      if (value == true) {
-        this.draw1d();
-      }
+    getDraw1d(value) {
+      if (value == true) this.draw1d();
+    },
+    getDraw2d(value) {
+      if (value == true) this.draw2dNew();
+    },
+    getDraw2dLast(value) {
+      if (value == true) this.draw2dLast();
+    },
+    getReset(value) {
+      if (value == true) this.reset();
     },
   },
   mounted() {
@@ -85,7 +95,7 @@ export default {
         return create1dStateOneCell(this.boardWidth);
       return create1dState(this.boardWidth, getRandomInt, [0, 2]);
     },
-    async draw1d() {
+    draw1d() {
       const initialState = this.compute1dInitialState();
       const board = createBoard(
         initialState,
@@ -96,11 +106,10 @@ export default {
       this.drawCanvas(board);
       this.$store.dispatch("stop");
     },
-    async draw2d(board) {
-      if (this.drawing === 0) return;
-
+    draw2d(board) {
+      if (!this.canDraw) return;
       const draw2dNext = async (b) => {
-        if (this.drawing === 0) return;
+        if (!this.canDraw) return;
         const newBoard = evolve2d(b, conwayRules);
         this.drawCanvas(b, this.cellProperties);
         await sleep(this.refreshRate);
@@ -108,7 +117,7 @@ export default {
       };
       return draw2dNext(board);
     },
-    async draw2dNew() {
+    draw2dNew() {
       const initialState = create2dState(
         this.boardWidth,
         this.boardHeight,
@@ -116,18 +125,16 @@ export default {
         [0, 2]
       );
       const board = evolve2d(initialState, conwayRules);
-      this.$store.commit("setLastBoard", board);
+      this.$store.commit("setLastBoard", Object.freeze(board));
       this.draw2d(board);
     },
     async draw2dLast() {
       this.draw2d(this.lastBoard);
     },
-    stop() {
-      this.$store.commit("setDrawingStatus", 0);
-    },
     reset() {
-      this.stop();
+      this.$store.dispatch("stop");
       this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
+      this.$store.commit("toggleReset", 0);
     },
   },
 };