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/App.vue

@@ -27,7 +27,7 @@ export default {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   text-align: center;
-   /* color: #2c3e50; */
+  /* color: #2c3e50; */
 }
 
 * {

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,
-    name: "CanvasBoard",
+  create1dStateOneCell,
-    computed: {
+  create2dState,
-      ...mapGetters({
+  createBoard,
-        canvasWidth: "getCanvasWidth",
+  conwayRules,
-        canvasHeight: "getCanvasHeight",
+  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() {
+    boardHeight: function () {
-      const canvas = document.getElementById("canvas-board")
+      return Math.floor(this.canvasHeight / this.cellProperties.size);
-      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
-      );
     },
-  };
+  },
+  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 {
+#mainContent {
-     min-width: 70%;
+  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 { mapGetters } from "vuex";
-  import MenuRow from "./MenuRow.vue";
+import MenuRow from "./MenuRow.vue";
-  export default {
+export default {
-    name: "MenuElementaryCA",
+  name: "MenuElementaryCA",
-    components: {
+  components: {
-      MenuRow,
+    MenuRow,
-    },
+  },
-    data() {
+  data() {
-      // TODO: Why not a getter in the store?
+    // TODO: Why not a getter in the store?
-      return {
+    return {
-        presetRules: [
+      presetRules: [
-          {
+        {
-            name: "rule 73",
+          name: "rule 73",
-            rules: {
+          rules: {
-              100: 0,
+            100: 0,
-              101: 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: {
+          name: "rule 90",
-              100: 1,
+          rules: {
-              101: 0,
+            100: 1,
-              110: 1,
+            101: 0,
-              111: 0,
+            110: 1,
-              "011": 0,
+            111: 0,
-              "010": 0,
+            "011": 0,
-              "001": 1,
+            "010": 0,
-              "000": 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: {
+          name: "unknown rule",
-              100: 0,
+          rules: {
-              101: 0,
+            100: 0,
-              110: 0,
+            101: 0,
-              111: 1,
+            110: 0,
-              "011": 0,
+            111: 1,
-              "010": 0,
+            "011": 0,
-              "001": 1,
+            "010": 0,
-              "000": 1,
+            "001": 1,
-            },
+            "000": 1,
-          }
-  ],
-        initialStates: [
-          {
-            id: "onecell",
-            name: "One cell at center",
-            description: "State with a single cell in the middle",
           },
-          {
+        },
-            id: "random",
+      ],
-            name: "Random cell",
+      initialStates: [
-            description: "State populated with random cells",
+        {
-          },
+          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({
+  methods: {
-        initialState: "getInitial1dState",
+    copyRules() {
-        rules: "get1dRules",
+      const rules = JSON.stringify(this.rules);
-      }),
+      navigator.clipboard.writeText(rules);
-      rules1dFileName() {
-        return (
-          Object.keys(this.rules)
-                .map((index) => {
-                  return this.rules[index];
-                })
-                .join("_") + ".json"
-        );
-      },
     },
-    methods: {
+    isCurrentPreset(event) {
-      copyRules() {
+      const elem = event.target;
-        const rules = JSON.stringify(this.rules);
+      return this.initialState === elem.value;
-        navigator.clipboard.writeText(rules);
+    },
-      },
+    updateSingleRule(event) {
-      isCurrentPreset(event) {
+      const elem = event.target;
-        const elem = event.target;
+      const value = elem.checked ? 1 : 0;
-        return this.initialState === elem.value;
+      const data = { rule: elem.name, value: value };
-      },
+      this.$store.commit("update1dSingleRule", data);
-      updateSingleRule(event) {
+    },
-        const elem = event.target;
+    updateRules(event) {
-        const value = elem.checked ? 1 : 0;
+      // TODO : change this, awfully confusing
-        const data = { rule: elem.name, value: value };
+      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 {
+.menu-row a {
-     color: white;
+  color: white;
-     font-weight: bold;
+  font-weight: bold;
-     text-decoration: none;
+  text-decoration: none;
-     font-size: small;
+  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: {},
 });