working vue components for 1D automata

src/components/Canvas.vue

@@ -11,61 +11,63 @@
 <script>
 import { initialState1d, createBoard } from '../modules/automata.js'
 import { getRandomInt } from '../modules/common.js'
+import {mapGetters} from 'vuex'
 export default {
   name: 'Canvas',
   data() {
     return {
       canvas: null,
-      ctx: null
+      ctx: null,
     }
   },
   computed: {
-    cellProperties() {
-      return this.$store.state.cellProperties
-    },
-    rules() {
-      return this.$store.state.rules1d
-    }
+    ...mapGetters({
+      cellProperties: 'getCellProperties',
+      rules: 'getRuleSet1d',
+    })
   },
   mounted() {
     this.canvas = this.$refs['canvas']
     this.canvas.width = 1280
     this.canvas.height = 720
-    this.context = this.canvas.getContext('2d')
+    this.ctx = this.canvas.getContext('2d')
     this.$root.$on('draw1d', () => { this.draw1d() })
+    this.$root.$on('reset', () => { this.reset() })
   },
   methods: {
     drawCanvas(board) {
-      const props = this.CellProperties;
+      const props = this.cellProperties
       board.map((row, y) => {
-        const d = props.size;
+        const d = props.size
         return row.map(
           (cell, x) => {
             this.ctx.fillStyle = (
               () => {
-                if (cell === 1) return props.liveColor;
-                return props.deadColor;
-              })();
-            this.ctx.fillRect(x * d, y * d, d, d);
-            return cell;
+                if (cell === 1) return props.liveColor
+                return props.deadColor
+              })()
+            this.ctx.fillRect(x * d, y * d, d, d)
+            return cell
           },
-        );
-      });
+        )
+      })
     },
-    draw1d() {
-      const rules = this.rules;
-      const props = this.CellProperties;
-      console.log(props.size)
+    async draw1d() {
       const initialState = initialState1d(
-        Math.floor(this.canvas.width / props.size),
+        Math.floor(this.canvas.width / this.cellProperties.size),
         getRandomInt,
         [0, 2],
-      );
+      )
       const board = createBoard(
         initialState,
-        rules,
-        Math.floor(this.canvas.height / props.size));
-      this.drawCanvas(board);
+        this.rules,
+        Math.floor(this.canvas.height / this.cellProperties.size)
+      )
+      this.drawCanvas(board)
+    },
+    reset() {
+      this.$root.$store.state.drawing = 0;
+      this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height)
     }
   }
 }