drawing logic back into component

.eslintrc.js

@@ -14,13 +14,12 @@ module.exports = {
   rules: {
     // override/add rules settings here, such as:
     // 'vue/no-unused-vars': 'error'
-    'vue/match-component-import-name': 'warn',
+    "vue/match-component-import-name": "warn",
-    'vue/no-ref-object-destructure': 'warn',
+    "vue/no-ref-object-destructure": "warn",
-    'vue/no-required-prop-with-default': 'warn',
+    "vue/no-required-prop-with-default": "warn",
-    'vue/no-restricted-class': 'warn',
+    "vue/no-restricted-class": "warn",
-    'vue/no-template-target-blank' : 'warn',
+    "vue/no-template-target-blank": "warn",
-    'vue/no-this-in-before-route-enter' : 'warn',
+    "vue/no-this-in-before-route-enter": "warn",
-    'vue/prefer-prop-type-boolean-first' : 'warn',
+    "vue/prefer-prop-type-boolean-first": "warn",
-    
   },
 };

src/components/CanvasBoard.vue

@@ -5,52 +5,135 @@
       ref="canvas-board"
       :width="canvasWidth"
       :height="canvasHeight"
-    >
+    />
-    </canvas>
   </main>
 </template>
 <script>
-  import { mapGetters } from "vuex";
+import {
-  export default {
+  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);
+    },
+    boardHeight: function () {
+      return Math.floor(this.canvasHeight / this.cellProperties.size);
+    },
+  },
+  watch: {
+    isDrawing1d(value) {
+      if (value == true) {
+        this.draw1d();
+      }
+    },
   },
   mounted() {
-      const canvas = document.getElementById("canvas-board")
+    this.canvas = Object.freeze(document.getElementById("canvas-board"));
-      const ctx = canvas.getContext("2d");
+    this.ctx = this.canvas.getContext("2d");
-      this.$store.commit(
+    this.$store.commit("setCanvasWidth", this.canvas.parentElement.clientWidth);
-        "setCanvas",
-        canvas
-      )
-      this.$store.commit(
-        "setContext",
-        ctx
-      )
-      this.$store.commit(
-        "setCanvasWidth",
-        canvas.parentElement.clientWidth
-      );
     this.$store.commit(
       "setCanvasHeight",
-        canvas.parentElement.clientHeight
+      this.canvas.parentElement.clientHeight
-      );
-      this.$store.commit(
-        "setBoardWidth",
-        canvas.parentElement.clientWidth
-      );
-      this.$store.commit(
-        "setBoardHeight",
-        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 {
+#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 }}
@@ -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,7 +46,8 @@
         <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
@@ -73,9 +76,9 @@
 </template>
 
 <script>
-  import { mapGetters } from "vuex";
+import { mapGetters } from "vuex";
-  import MenuRow from "./MenuRow.vue";
+import MenuRow from "./MenuRow.vue";
-  export default {
+export default {
   name: "MenuElementaryCA",
   components: {
     MenuRow,
@@ -95,11 +98,11 @@
             "010": 0,
             "001": 0,
             "000": 1,
-            }
+          },
         },
         {
           name: "rule 86",
-            rules:{
+          rules: {
             100: 1,
             101: 0,
             110: 0,
@@ -161,7 +164,7 @@
             "001": 1,
             "000": 1,
           },
-          }
+        },
       ],
       initialStates: [
         {
@@ -211,10 +214,10 @@
       // TODO : change this, awfully confusing
       const elem = event.target;
       const name = elem.value;
-        const rules = this.presetRules.find(
+      const rules = this.presetRules.find((ruleset) => {
-          (ruleset) => { return ruleset.name === name }
+        return ruleset.name === name;
-        )
+      });
-        Object.keys(rules.rules).map((value, index) => {
+      Object.keys(rules.rules).map((value) => {
         const data = { name: name, rule: value, value: rules.rules[value] };
         this.$store.commit("update1dSingleRule", data);
       });
@@ -224,20 +227,20 @@
       this.$store.commit("setInitial1dState", elem.value);
     },
     draw1d() {
-        this.$store.commit("setDrawingStatus", 1);
+      /* this.$store.commit("setDrawingStatus", 1); */
       this.$store.dispatch("draw1d");
     },
     reset() {
       this.$store.dispatch("reset");
     },
   },
-  };
+};
 </script>
 <style>
-  .menu-row a {
+.menu-row a {
   color: white;
   font-weight: bold;
   text-decoration: none;
   font-size: small;
-  }
+}
 </style>

src/main.js

@@ -1,13 +1,9 @@
-import { createApp } from 'vue'
+import { createApp } from "vue";
 import App from "./App.vue";
 import { store } from "./store";
 
-const gobalsProperties = {'canvas': null}; 
+const app = createApp(App);
 
-const app = createApp(App)
+app.use(store);
 
-app.provide('gobalsProperties', gobalsProperties)
+app.mount("#app");
-
-app.use(store)
-
-app.mount('#app')

src/store/index.js

@@ -8,25 +8,14 @@ rules:
 confusion bewteen ruleset and rules. 
 it's never clear if we refers to a rule or the whole (named) set
 */
-import { createStore } from 'vuex'
+import { createStore } from "vuex";
-import {
-  create1dState,
-  create1dStateOneCell,
-  create2dState,
-  createBoard,
-  conwayRules,
-  evolve2d,
-} from "../modules/automata.js";
-import { getRandomInt, sleep } from "../modules/common.js";
 
 export const store = createStore({
-  strict: process.env.NODE_ENV !== 'production',
+  strict: process.env.NODE_ENV !== "production",
   state: {
-    drawing: 0,
     rules1d: {
       name: "rule 73",
-      rules:
+      rules: {
-      {
         111: 0,
         110: 1,
         101: 0,
@@ -35,15 +24,13 @@ export const store = createStore({
         "010": 0,
         "001": 0,
         "000": 1,
-      }
+      },
     },
     cellProperties: {
       size: 3,
       liveColor: "#000000",
       deadColor: "#F5F5F5",
     },
-    canvas: null,
-    ctx: null,
     canvasWidth: 0,
     canvasHeight: 0,
     boardWidth: 0,
@@ -53,10 +40,11 @@ export const store = createStore({
     activeMenu: "",
     drawingDirection: "y",
     lastBoard: {},
+    isDrawing1d: false,
   },
   mutations: {
     update1dSingleRule(state, data) {
-      state.rules1d.name = data.name
+      state.rules1d.name = data.name;
       state.rules1d.rules[data.rule] = data.value;
     },
     update1dRules(state, data) {
@@ -65,9 +53,6 @@ export const store = createStore({
     setCellProperties(state, data) {
       state.cellProperties[data.name] = data.value;
     },
-    setDrawingStatus(state, data) {
-      state.drawing = data;
-    },
     setCanvasWidth(state, data) {
       state.canvasWidth = data;
     },
@@ -90,18 +75,13 @@ export const store = createStore({
       state.lastBoard = data;
     },
     setCanvas(state, data) {
-      state.canvas = data
+      state.canvas = data;
     },
     setContext(state, data) {
-      state.ctx = data
+      state.ctx = data;
     },
-    setBoardWidth(state) {
+    setIsDrawing1d(state, data) {
-      const width = Math.floor(state.canvasWidth / state.cellProperties.size);
+      state.isDrawing1d = data;
-      state.boardWidth = width
-    },
-    setBoardHeight(state) {
-      const height = Math.floor(state.canvasHeight / state.cellProperties.size);
-      state.boardHeight = height
     },
   },
   getters: {
@@ -115,9 +95,6 @@ export const store = createStore({
       // getter with side-effect. no work
       return state.rules1d;
     },
-    isDrawing(state) {
-      return state.drawing;
-    },
     getCanvasWidth(state) {
       return state.canvasWidth;
     },
@@ -139,85 +116,18 @@ export const store = createStore({
     getLastBoard(state) {
       return state.lastBoard;
     },
+    getIsDrawing1d(state) {
+      return state.isDrawing1d;
+    },
   },
   actions: {
-    async drawCanvas({state}, board) {
+    draw1d({ commit }) {
-      /** Draw the board on the canvas according to the
+      commit("setIsDrawing1d", 1);
-          cells' properties and drawing direction */
-      const props = state.cellProperties
-      board.map((row, y) => {
-        const d = props.size;
-        return row.map((cell, x) => {
-          state.ctx.fillStyle = (() => {
-            if (cell === 1) return props.liveColor;
-            return props.deadColor;
-          })();
-          if (state.drawingDirection === "x")
-            state.ctx.fillRect(y * d, x * d, d, d);
-          else state.ctx.fillRect(x * d, y * d, d, d);
-          return cell;
-        });
-      });
-    },
-    async compute1dInitialState({state}) {
-      /** 
-          create the initial state for an elementary automaton based :
-          - on the selected board dimensions 
-          - if we want to start from a single cell or several random ones 
-      */
-      if (state.initial1dState === "onecell")
-        return create1dStateOneCell(state.canvasWidth);
-      return create1dState(state.canvasWidth, getRandomInt, [0, 2]);
-    },
-    async draw1d({state, commit, dispatch}) {
-      /** draw an elementary cellular automaton from an initial state and
-         a set of rules */
-      const initialState = await dispatch("compute1dInitialState")
-      const board = createBoard(initialState, state.rules1d.rules, state.boardWidth);
-      commit("setLastBoard", board);
-      await dispatch("drawCanvas", board);
-    },
-    async draw2d({state, dispatch}, board) {
-      /** draw a 2D cellular automaton from an initial state and
-         a set of rules */
-      if (this.drawing === 0) return;
-
-      const draw2dNext = async (b) => {
-        if (state.drawing === 0) return;
-        const newBoard = evolve2d(b, conwayRules);
-        dispatch("drawCanvas", b, this.cellProperties);
-        await sleep(this.refreshRate);
-        draw2dNext(newBoard);
-      };
-      return draw2dNext(board);
-    },
-    async draw2dNew({state, commit, dispatch}) {
-      /** draw a 2d cellular automaton from a random initial state
-         and a set of rules */
-      const initialState = create2dState(
-        state.boardWidth,
-        state.boardHeight,
-        getRandomInt,
-        [0, 2]
-      );
-      const board = evolve2d(initialState, conwayRules);
-      commit("setLastBoard", board);
-      await dispatch("draw2d", board);
-    },
-    async draw2dLast({state, dispatch}) {
-      /** draw a 2d cellular automaton from the latest known state
-         of the board and a set of rules */
-      await dispatch("draw2d", state.lastBoard);
     },
     stop({ commit }) {
-      /** stop currently running drawing routine */
+      commit("setIsDrawing1d");
-      commit("setDrawingStatus", 0);
+      // commit("setIsDrawing2d")
     },
-    reset({state, dispatch}) {
-      /** stop currently running drawing routine and clear the board */
-      dispatch("stop");
-      state.ctx.clearRect(0, 0, state.canvasWidth, state.canvasHeight);
-    }
   },
   modules: {},
 });