working vue components for 2D automata

src/components/Canvas.vue

@@ -9,8 +9,8 @@
   </main>
 </template>
 <script>
-import { initialState1d, createBoard } from '../modules/automata.js'
+import { evolve2d, initialState1d, initialState2d, conwayRules, createBoard } from '../modules/automata.js'
-import { getRandomInt } from '../modules/common.js'
+import { getRandomInt, sleep } from '../modules/common.js'
 import {mapGetters} from 'vuex'
 export default {
   name: 'Canvas',
@@ -24,6 +24,7 @@ export default {
     ...mapGetters({
       cellProperties: 'getCellProperties',
       rules: 'getRuleSet1d',
+      drawing: 'isDrawing'
     })
   },
   mounted() {
@@ -32,7 +33,9 @@ export default {
     this.canvas.height = 720
     this.ctx = this.canvas.getContext('2d')
     this.$root.$on('draw1d', () => { this.draw1d() })
+    this.$root.$on('draw2d', () => { this.draw2d() })
     this.$root.$on('reset', () => { this.reset() })
+    this.$root.$on('stop', () => { this.stop() })
   },
   methods: {
     drawCanvas(board) {
@@ -65,8 +68,30 @@ export default {
       )
       this.drawCanvas(board)
     },
+    async draw2d() {
+      if (this.drawing === 0) return
+      const initialState = initialState2d(
+        Math.floor(this.canvas.width / this.cellProperties.size),
+        Math.floor(this.canvas.height / this.cellProperties.size),
+        getRandomInt,
+        [0, 2],
+      );
+      const board = evolve2d(initialState, conwayRules);
+      
+      const draw2dNext = async (b) => {
+        if (this.drawing === 0) return
+        const newBoard = evolve2d(b, conwayRules)
+        this.drawCanvas(b, this.cellProperties)
+        await sleep(300)
+        draw2dNext(newBoard)
+      }
+      return draw2dNext(board)
+    },
+    stop() {
+      this.$root.$store.state.drawing = 0
+    },
     reset() {
-      this.$root.$store.state.drawing = 0;
+      this.stop()
       this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height)
     }
   }

src/components/Menu2dCA.vue

@@ -2,22 +2,24 @@
   <MenuRow row-title="2D Cellular Automata">
     <div class="form-field">
       <input
-        id="start2d"
         type="button"
         name="start2d"
         value="start"
+        @click="draw2d"
       >
       <input
         type="button"
         name="stop"
         class="stop"
         value="stop"
+        @click="stop"
       >
       <input
         type="button"
         name="reset"
         class="reset"
         value="reset"
+        @click="reset"
       >
     </div>
   </MenuRow>
@@ -29,6 +31,18 @@ export default {
   name: 'Menu2dCA',
   components: {
     MenuRow
+  },
+  methods: {
+    draw2d() {
+      this.$root.$store.state.drawing = 1
+      this.$root.$emit('draw2d')
+    },
+    reset() {
+      this.$root.$emit('reset')
+    },
+    stop() {
+      this.$root.$emit('stop')
+    },
   }
 }
 </script>

src/components/MenuElementaryCA.vue

@@ -64,6 +64,7 @@ export default {
       this.$store.commit('update1dRules', data)
     },
     draw1d() {
+      this.$root.$store.state.drawing = 1
       this.$root.$emit('draw1d')
     },
     getRule(id) {

src/store/index.js

@@ -39,6 +39,9 @@ export default new Vuex.Store({
     },
     getRule1d(state) {
       return (rule) => state.rules1d[rule]
+    },
+    isDrawing(state) {
+      return state.drawing
     }
   },
   actions: {