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);
     },
   },
 };

src/components/Menu2dCA.vue

@@ -2,7 +2,7 @@
   <MenuRow row-title="2D Cellular Automata">
     <div class="form-field">
       <label>Start from last result</label>
-      <input type="button" value="start" @click="startFromLast" />
+      <input type="button" value="start" @click="draw2dLast" />
     </div>
     <div class="form-field">
       <input type="button" name="start2d" value="start" @click="draw2d" />
@@ -40,17 +40,16 @@ export default {
   },
   methods: {
     draw2d() {
-      this.$root.$store.state.drawing = 1;
-      this.$root.$emit("draw2dNew");
+      this.$store.dispatch("draw2d");
+    },
+    draw2dLast() {
+      this.$store.dispatch("draw2dLast");
     },
     reset() {
-      this.$root.$emit("reset");
+      this.$store.dispatch("reset");
     },
     stop() {
-      this.$root.$emit("stop");
-    },
-    startFromLast() {
-      this.$root.$emit("draw2dLast");
+      this.$store.dispatch("stop");
     },
   },
 };

src/components/MenuElementaryCA.vue

@@ -69,7 +69,7 @@
         name="reset"
         class="reset"
         value="reset"
-        @click="reset()"
+        @click="reset"
       />
     </div>
   </MenuRow>
@@ -227,7 +227,6 @@ export default {
       this.$store.commit("setInitial1dState", elem.value);
     },
     draw1d() {
-      /* this.$store.commit("setDrawingStatus", 1); */
       this.$store.dispatch("draw1d");
     },
     reset() {

src/store/index.js

@@ -40,7 +40,11 @@ export const store = createStore({
     activeMenu: "",
     drawingDirection: "y",
     lastBoard: {},
-    isDrawing1d: false,
+    draw1d: false,
+    draw2d: false,
+    draw2dLast: false,
+    reset: false,
+    canDraw: true,
   },
   mutations: {
     update1dSingleRule(state, data) {
@@ -80,8 +84,20 @@ export const store = createStore({
     setContext(state, data) {
       state.ctx = data;
     },
-    setIsDrawing1d(state, data) {
-      state.isDrawing1d = data;
+    toggleDraw1d(state, data) {
+      state.draw1d = data;
+    },
+    toggleDraw2d(state, data) {
+      state.draw2d = data;
+    },
+    toggleDraw2dLast(state, data) {
+      state.draw2dLast = data;
+    },
+    toggleReset(state, data) {
+      state.reset = data;
+    },
+    canDraw(state, data) {
+      state.canDraw = data;
     },
   },
   getters: {
@@ -92,7 +108,6 @@ export const store = createStore({
       return state.rules1d;
     },
     getRule1d(state) {
-      // getter with side-effect. no work
       return state.rules1d;
     },
     getCanvasWidth(state) {
@@ -116,17 +131,43 @@ export const store = createStore({
     getLastBoard(state) {
       return state.lastBoard;
     },
-    getIsDrawing1d(state) {
-      return state.isDrawing1d;
+    getDraw1d(state) {
+      return state.draw1d;
+    },
+    getDraw2d(state) {
+      return state.draw2d;
+    },
+    getDraw2dLast(state) {
+      return state.draw2dLast;
+    },
+    getReset(state) {
+      return state.reset;
+    },
+    getCanDraw(state) {
+      return state.canDraw;
     },
   },
   actions: {
     draw1d({ commit }) {
-      commit("setIsDrawing1d", 1);
+      commit("toggleDraw1d", true);
+    },
+    draw2d({ commit }) {
+      commit("canDraw", true);
+      commit("toggleDraw2d", true);
+    },
+    draw2dLast({ commit }) {
+      commit("canDraw", true);
+      commit("toggleDraw2dLast", true);
+    },
+    reset({ dispatch, commit }) {
+      dispatch("stop");
+      commit("toggleReset", true);
     },
     stop({ commit }) {
-      commit("setIsDrawing1d");
-      // commit("setIsDrawing2d")
+      commit("toggleDraw1d", false);
+      commit("toggleDraw2d", false);
+      commit("toggleDraw2dLast", false);
+      commit("canDraw", false);
     },
   },
   modules: {},