drawing logic back into component

src/components/CanvasBoard.vue

@@ -5,52 +5,135 @@
       ref="canvas-board"
       :width="canvasWidth"
       :height="canvasHeight"
-    >
-    </canvas>
+    />
   </main>
 </template>
 <script>
-  import { mapGetters } from "vuex";
-  export default {
-    name: "CanvasBoard",
-    computed: {
-      ...mapGetters({
-        canvasWidth: "getCanvasWidth",
-        canvasHeight: "getCanvasHeight",
-      }),
+import {
+  create1dState,
+  create1dStateOneCell,
+  create2dState,
+  createBoard,
+  conwayRules,
+  evolve2d,
+} from "../modules/automata.js";
+import { getRandomInt, sleep } from "../modules/common.js";
+import { mapGetters } from "vuex";
+export default {
+  name: "CanvasBoard",
+  data() {
+    return {
+      canvas: null,
+      ctx: null,
+      drawing: 0,
+    };
+  },
+  computed: {
+    ...mapGetters({
+      cellProperties: "getCellProperties",
+      rules: "get1dRules",
+      canvasWidth: "getCanvasWidth",
+      canvasHeight: "getCanvasHeight",
+      refreshRate: "getRefreshRate",
+      initial1dState: "getInitial1dState",
+      drawingDirection: "getDrawingDirection",
+      lastBoard: "getLastBoard",
+      isDrawing1d: "getIsDrawing1d",
+    }),
+    boardWidth: function () {
+      return Math.floor(this.canvasWidth / this.cellProperties.size);
     },
-    mounted() {
-      const canvas = document.getElementById("canvas-board")
-      const ctx = canvas.getContext("2d");
-      this.$store.commit(
-        "setCanvas",
-        canvas
-      )
-      this.$store.commit(
-        "setContext",
-        ctx
-      )
-      this.$store.commit(
-        "setCanvasWidth",
-        canvas.parentElement.clientWidth
-      );
-      this.$store.commit(
-        "setCanvasHeight",
-        canvas.parentElement.clientHeight
-      );
-      this.$store.commit(
-        "setBoardWidth",
-        canvas.parentElement.clientWidth
-      );
-      this.$store.commit(
-        "setBoardHeight",
-        canvas.parentElement.clientHeight
-      );
+    boardHeight: function () {
+      return Math.floor(this.canvasHeight / this.cellProperties.size);
     },
-  };
+  },
+  watch: {
+    isDrawing1d(value) {
+      if (value == true) {
+        this.draw1d();
+      }
+    },
+  },
+  mounted() {
+    this.canvas = Object.freeze(document.getElementById("canvas-board"));
+    this.ctx = this.canvas.getContext("2d");
+    this.$store.commit("setCanvasWidth", this.canvas.parentElement.clientWidth);
+    this.$store.commit(
+      "setCanvasHeight",
+      this.canvas.parentElement.clientHeight
+    );
+  },
+  methods: {
+    drawCanvas(board) {
+      const props = this.cellProperties;
+      board.map((row, y) => {
+        const d = props.size;
+        return row.map((cell, x) => {
+          this.ctx.fillStyle = (() => {
+            if (cell === 1) return props.liveColor;
+            return props.deadColor;
+          })();
+          if (this.drawingDirection === "x")
+            this.ctx.fillRect(y * d, x * d, d, d);
+          else this.ctx.fillRect(x * d, y * d, d, d);
+          return cell;
+        });
+      });
+    },
+    compute1dInitialState() {
+      if (this.initial1dState === "onecell")
+        return create1dStateOneCell(this.boardWidth);
+      return create1dState(this.boardWidth, getRandomInt, [0, 2]);
+    },
+    async draw1d() {
+      const initialState = this.compute1dInitialState();
+      const board = createBoard(
+        initialState,
+        this.rules.rules,
+        this.boardWidth
+      );
+      this.$store.commit("setLastBoard", Object.freeze(board));
+      this.drawCanvas(board);
+      this.$store.dispatch("stop");
+    },
+    async draw2d(board) {
+      if (this.drawing === 0) return;
+
+      const draw2dNext = async (b) => {
+        if (this.drawing === 0) return;
+        const newBoard = evolve2d(b, conwayRules);
+        this.drawCanvas(b, this.cellProperties);
+        await sleep(this.refreshRate);
+        draw2dNext(newBoard);
+      };
+      return draw2dNext(board);
+    },
+    async draw2dNew() {
+      const initialState = create2dState(
+        this.boardWidth,
+        this.boardHeight,
+        getRandomInt,
+        [0, 2]
+      );
+      const board = evolve2d(initialState, conwayRules);
+      this.$store.commit("setLastBoard", board);
+      this.draw2d(board);
+    },
+    async draw2dLast() {
+      this.draw2d(this.lastBoard);
+    },
+    stop() {
+      this.$store.commit("setDrawingStatus", 0);
+    },
+    reset() {
+      this.stop();
+      this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
+    },
+  },
+};
 </script>
 <style>
-  #mainContent {
-     min-width: 70%;
-  }
+#mainContent {
+  min-width: 70%;
+}
 </style>

src/components/MenuElementaryCA.vue

@@ -11,7 +11,8 @@
             @input="updateInitialState"
           >
             <option
-              v-for="state in initialStates"
+              v-for="(state, index) in initialStates"
+              :key="'initial-state-elementary' + index"
               :value="state.id"
             >
               {{ state.name }}
@@ -24,7 +25,7 @@
       </div>
       <div class="form-field">
         <label
-        >Rules presets
+          >Rules presets
           <br />
           <select
             name="ruleset-elementary"
@@ -32,7 +33,8 @@
             @input="updateRules"
           >
             <option
-              v-for="ruleset in presetRules"
+              v-for="(ruleset, index) in presetRules"
+              :key="'ruleset-preset-elementary-' + index"
               :value="ruleset.name"
             >
               {{ ruleset.name }}
@@ -44,11 +46,12 @@
         <a style="cursor: pointer" @click="copyRules">copy rules</a>
       </div>
       <div
-        v-for="(rule, name) in rules.rules"
+        v-for="(rule, name, index) in rules.rules"
+        :key="'rule-' + index"
         class="form-field"
       >
         <label
-        >{{ name }}
+          >{{ name }}
           <input
             :value="rule"
             type="checkbox"
@@ -73,33 +76,33 @@
 </template>
 
 <script>
-  import { mapGetters } from "vuex";
-  import MenuRow from "./MenuRow.vue";
-  export default {
-    name: "MenuElementaryCA",
-    components: {
-      MenuRow,
-    },
-    data() {
-      // TODO: Why not a getter in the store?
-      return {
-        presetRules: [
-          {
-            name: "rule 73",
-            rules: {
-              100: 0,
-              101: 0,
+import { mapGetters } from "vuex";
+import MenuRow from "./MenuRow.vue";
+export default {
+  name: "MenuElementaryCA",
+  components: {
+    MenuRow,
+  },
+  data() {
+    // TODO: Why not a getter in the store?
+    return {
+      presetRules: [
+        {
+          name: "rule 73",
+          rules: {
+            100: 0,
+            101: 0,
             110: 1,
             111: 0,
             "011": 1,
             "010": 0,
             "001": 0,
             "000": 1,
-            }
           },
-          {
-            name: "rule 86",
-            rules:{
+        },
+        {
+          name: "rule 86",
+          rules: {
             100: 1,
             101: 0,
             110: 0,
@@ -108,24 +111,24 @@
             "010": 1,
             "001": 0,
             "000": 1,
-            },
           },
-          {
-            name: "rule 90",
-            rules: {
-              100: 1,
-              101: 0,
-              110: 1,
-              111: 0,
-              "011": 0,
-              "010": 0,
-              "001": 1,
-              "000": 0,
-            },
+        },
+        {
+          name: "rule 90",
+          rules: {
+            100: 1,
+            101: 0,
+            110: 1,
+            111: 0,
+            "011": 0,
+            "010": 0,
+            "001": 1,
+            "000": 0,
           },
-          {
-            name: "rule 45?",
-            rules: {
+        },
+        {
+          name: "rule 45?",
+          rules: {
             100: 0,
             101: 0,
             110: 1,
@@ -134,11 +137,11 @@
             "010": 0,
             "001": 1,
             "000": 1,
-            },
           },
-          {
-            name: "rule 54?",
-            rules: {
+        },
+        {
+          name: "rule 54?",
+          rules: {
             100: 1,
             101: 0,
             110: 1,
@@ -147,97 +150,97 @@
             "010": 1,
             "001": 1,
             "000": 0,
-            },
           },
-          {
-            name: "unknown rule",
-            rules: {
-              100: 0,
-              101: 0,
-              110: 0,
-              111: 1,
-              "011": 0,
-              "010": 0,
-              "001": 1,
-              "000": 1,
-            },
-          }
-  ],
-        initialStates: [
-          {
-            id: "onecell",
-            name: "One cell at center",
-            description: "State with a single cell in the middle",
+        },
+        {
+          name: "unknown rule",
+          rules: {
+            100: 0,
+            101: 0,
+            110: 0,
+            111: 1,
+            "011": 0,
+            "010": 0,
+            "001": 1,
+            "000": 1,
           },
-          {
-            id: "random",
-            name: "Random cell",
-            description: "State populated with random cells",
-          },
-        ],
-      };
+        },
+      ],
+      initialStates: [
+        {
+          id: "onecell",
+          name: "One cell at center",
+          description: "State with a single cell in the middle",
+        },
+        {
+          id: "random",
+          name: "Random cell",
+          description: "State populated with random cells",
+        },
+      ],
+    };
+  },
+  computed: {
+    ...mapGetters({
+      initialState: "getInitial1dState",
+      rules: "get1dRules",
+    }),
+    rules1dFileName() {
+      return (
+        Object.keys(this.rules)
+          .map((index) => {
+            return this.rules[index];
+          })
+          .join("_") + ".json"
+      );
     },
-    computed: {
-      ...mapGetters({
-        initialState: "getInitial1dState",
-        rules: "get1dRules",
-      }),
-      rules1dFileName() {
-        return (
-          Object.keys(this.rules)
-                .map((index) => {
-                  return this.rules[index];
-                })
-                .join("_") + ".json"
-        );
-      },
+  },
+  methods: {
+    copyRules() {
+      const rules = JSON.stringify(this.rules);
+      navigator.clipboard.writeText(rules);
     },
-    methods: {
-      copyRules() {
-        const rules = JSON.stringify(this.rules);
-        navigator.clipboard.writeText(rules);
-      },
-      isCurrentPreset(event) {
-        const elem = event.target;
-        return this.initialState === elem.value;
-      },
-      updateSingleRule(event) {
-        const elem = event.target;
-        const value = elem.checked ? 1 : 0;
-        const data = { rule: elem.name, value: value };
+    isCurrentPreset(event) {
+      const elem = event.target;
+      return this.initialState === elem.value;
+    },
+    updateSingleRule(event) {
+      const elem = event.target;
+      const value = elem.checked ? 1 : 0;
+      const data = { rule: elem.name, value: value };
+      this.$store.commit("update1dSingleRule", data);
+    },
+    updateRules(event) {
+      // TODO : change this, awfully confusing
+      const elem = event.target;
+      const name = elem.value;
+      const rules = this.presetRules.find((ruleset) => {
+        return ruleset.name === name;
+      });
+      Object.keys(rules.rules).map((value) => {
+        const data = { name: name, rule: value, value: rules.rules[value] };
         this.$store.commit("update1dSingleRule", data);
-      },
-      updateRules(event) {
-        // TODO : change this, awfully confusing
-        const elem = event.target;
-        const name = elem.value;
-        const rules = this.presetRules.find(
-          (ruleset) => { return ruleset.name === name }
-        )
-        Object.keys(rules.rules).map((value, index) => {
-          const data = { name: name, rule: value, value: rules.rules[value] };
-          this.$store.commit("update1dSingleRule", data);
-        });
-      },
-      updateInitialState(event) {
-        const elem = event.target;
-        this.$store.commit("setInitial1dState", elem.value);
-      },
-      draw1d() {
-        this.$store.commit("setDrawingStatus", 1);
-        this.$store.dispatch("draw1d");
-      },
-      reset() {
-        this.$store.dispatch("reset");
-      },
+      });
     },
-  };
+    updateInitialState(event) {
+      const elem = event.target;
+      this.$store.commit("setInitial1dState", elem.value);
+    },
+    draw1d() {
+      /* this.$store.commit("setDrawingStatus", 1); */
+      this.$store.dispatch("draw1d");
+    },
+    reset() {
+      this.$store.dispatch("reset");
+    },
+  },
+};
 </script>
 <style>
-  .menu-row a {
-     color: white;
-     font-weight: bold;
-     text-decoration: none;
-     font-size: small;
-  }
+.menu-row a {
+  color: white;
+  font-weight: bold;
+  text-decoration: none;
+  font-size: small;
+}
 </style>