.pre-commit-config.yaml

@@ -1,9 +0,0 @@
-repos:
-  - repo: https://github.com/pre-commit/mirrors-eslint
-    rev: "v8.28.0"
-    hooks:
-      - id: eslint
-  - repo: https://github.com/pre-commit/mirrors-prettier
-    rev: "v2.7.1"
-    hooks:
-      - id: prettier

.prettierrc.json

@@ -1,3 +1 @@
-{
+{}
-  "vueIndentScriptAndStyle": true
-}

README.md

@@ -2,8 +2,6 @@
 
 Explore 1D and 2D cellular automata, with a few bells and whistles.
 
-![rules73](./example.png)
-
 ## Project setup
 
 ```
@@ -13,7 +11,7 @@ npm install
 ### Compiles and hot-reloads for development
 
 ```
-npm run dev
+npm run serve
 ```
 
 ### Compiles and minifies for production
@@ -28,15 +26,9 @@ npm run build
 npm run lint
 ```
 
-### Format files
-
-```
-npm run format
-```
-
 ### Customize configuration
 
-See [Configuration Reference](https://vitejs.dev/guide/).
+See [Configuration Reference](https://cli.vuejs.org/config/).
 
 ### References
 

package-lock.json

@@ -10,9 +10,9 @@
       "dependencies": {
         "@vitejs/plugin-vue": "^3.2.0",
         "install": "^0.13.0",
-        "pinia": "^2.0.27",
         "vite": "^3.2.4",
-        "vue": "3.2"
+        "vue": "3.2",
+        "vuex": "4.1"
       },
       "devDependencies": {
         "eslint": "^8.28.0",
@@ -1548,56 +1548,6 @@
       "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz",
       "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ=="
     },
-    "node_modules/pinia": {
-      "version": "2.0.27",
-      "resolved": "https://registry.npmjs.org/pinia/-/pinia-2.0.27.tgz",
-      "integrity": "sha512-nOnXP0OFeL8R4WjAHsterU+11vptda643gH02xKNtSCDPiRzVfRYodOLihLDoa0gL1KKuQKV+KOzEgdt3YvqEw==",
-      "dependencies": {
-        "@vue/devtools-api": "^6.4.5",
-        "vue-demi": "*"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/posva"
-      },
-      "peerDependencies": {
-        "@vue/composition-api": "^1.4.0",
-        "typescript": ">=4.4.4",
-        "vue": "^2.6.14 || ^3.2.0"
-      },
-      "peerDependenciesMeta": {
-        "@vue/composition-api": {
-          "optional": true
-        },
-        "typescript": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/pinia/node_modules/vue-demi": {
-      "version": "0.13.11",
-      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.13.11.tgz",
-      "integrity": "sha512-IR8HoEEGM65YY3ZJYAjMlKygDQn25D5ajNFNoKh9RSDMQtlzCxtfQjdQgv9jjK+m3377SsJXY8ysq8kLCZL25A==",
-      "hasInstallScript": true,
-      "bin": {
-        "vue-demi-fix": "bin/vue-demi-fix.js",
-        "vue-demi-switch": "bin/vue-demi-switch.js"
-      },
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/antfu"
-      },
-      "peerDependencies": {
-        "@vue/composition-api": "^1.0.0-rc.1",
-        "vue": "^3.0.0-0 || ^2.6.0"
-      },
-      "peerDependenciesMeta": {
-        "@vue/composition-api": {
-          "optional": true
-        }
-      }
-    },
     "node_modules/postcss": {
       "version": "8.4.19",
       "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.19.tgz",
@@ -2019,6 +1969,17 @@
         "eslint": ">=6.0.0"
       }
     },
+    "node_modules/vuex": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/vuex/-/vuex-4.1.0.tgz",
+      "integrity": "sha512-hmV6UerDrPcgbSy9ORAtNXDr9M4wlNP4pEFKye4ujJF8oqgFFuxDCdOLS3eNoRTtq5O3hoBDh9Doj1bQMYHRbQ==",
+      "dependencies": {
+        "@vue/devtools-api": "^6.0.0-beta.11"
+      },
+      "peerDependencies": {
+        "vue": "^3.2.0"
+      }
+    },
     "node_modules/which": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
@@ -3122,23 +3083,6 @@
       "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz",
       "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ=="
     },
-    "pinia": {
-      "version": "2.0.27",
-      "resolved": "https://registry.npmjs.org/pinia/-/pinia-2.0.27.tgz",
-      "integrity": "sha512-nOnXP0OFeL8R4WjAHsterU+11vptda643gH02xKNtSCDPiRzVfRYodOLihLDoa0gL1KKuQKV+KOzEgdt3YvqEw==",
-      "requires": {
-        "@vue/devtools-api": "^6.4.5",
-        "vue-demi": "*"
-      },
-      "dependencies": {
-        "vue-demi": {
-          "version": "0.13.11",
-          "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.13.11.tgz",
-          "integrity": "sha512-IR8HoEEGM65YY3ZJYAjMlKygDQn25D5ajNFNoKh9RSDMQtlzCxtfQjdQgv9jjK+m3377SsJXY8ysq8kLCZL25A==",
-          "requires": {}
-        }
-      }
-    },
     "postcss": {
       "version": "8.4.19",
       "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.19.tgz",
@@ -3380,6 +3324,14 @@
         "semver": "^7.3.6"
       }
     },
+    "vuex": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/vuex/-/vuex-4.1.0.tgz",
+      "integrity": "sha512-hmV6UerDrPcgbSy9ORAtNXDr9M4wlNP4pEFKye4ujJF8oqgFFuxDCdOLS3eNoRTtq5O3hoBDh9Doj1bQMYHRbQ==",
+      "requires": {
+        "@vue/devtools-api": "^6.0.0-beta.11"
+      }
+    },
     "which": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",

package.json

@@ -12,9 +12,9 @@
   "dependencies": {
     "@vitejs/plugin-vue": "^3.2.0",
     "install": "^0.13.0",
-    "pinia": "^2.0.27",
     "vite": "^3.2.4",
-    "vue": "3.2"
+    "vue": "3.2",
+    "vuex": "4.1"
   },
   "devDependencies": {
     "eslint": "^8.28.0",

src/App.vue

@@ -9,58 +9,58 @@
 </template>
 
 <script>
-  import MainMenu from "./components/MainMenu.vue";
+import MainMenu from "./components/MainMenu.vue";
-  import CanvasBoard from "./components/CanvasBoard.vue";
+import CanvasBoard from "./components/CanvasBoard.vue";
 
-  export default {
+export default {
-    name: "App",
+  name: "App",
-    components: {
+  components: {
-      MainMenu,
+    MainMenu,
-      CanvasBoard,
+    CanvasBoard,
-    },
+  },
-  };
+};
 </script>
 
 <style>
-  #app {
+#app {
-    font-family: Avenir, Helvetica, Arial, sans-serif;
+  font-family: Avenir, Helvetica, Arial, sans-serif;
-    -webkit-font-smoothing: antialiased;
+  -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
+  -moz-osx-font-smoothing: grayscale;
-    text-align: center;
+  text-align: center;
-    /* color: #2c3e50; */
+  /* color: #2c3e50; */
-  }
+}
 
-  * {
+* {
-    margin: 0;
+  margin: 0;
-    padding: 0;
+  padding: 0;
-  }
+}
 
-  body {
+body {
-    background: black;
+  background: black;
-    color: white;
+  color: white;
-    font-family: Courier New;
+  font-family: Courier New;
-  }
+}
 
-  canvas {
+canvas {
-    flex: auto;
+  flex: auto;
-    background: #110812;
+  background: #110812;
-    margin-right: 10px;
+  margin-right: 10px;
-  }
+}
 
-  h1,
+h1,
-  h2 {
+h2 {
-    font-weight: bold;
+  font-weight: bold;
-  }
+}
 
-  h1 {
+h1 {
-    margin: 10px auto;
+  margin: 10px auto;
-    font-size: larger;
+  font-size: larger;
-    text-align: center;
+  text-align: center;
-  }
+}
 
-  #container {
+#container {
-    display: flex;
+  display: flex;
-    height: calc(100vh - 100px);
+  height: calc(100vh - 100px);
-    overflow: hidden;
+  overflow: hidden;
-  }
+}
 </style>

src/components/CanvasBoard.vue

@@ -9,140 +9,138 @@
   </main>
 </template>
 <script>
-  import { mapActions, mapState, mapWritableState } from "pinia";
+import {
-  import { globalStore } from "../stores/index.js";
+  create1dState,
-  import {
+  create1dStateOneCell,
-    create1dState,
+  create2dState,
-    create1dStateOneCell,
+  createBoard,
-    create2dState,
+  conwayRules,
-    createBoard,
+  evolve2d,
-    conwayRules,
+} from "../modules/automata.js";
-    evolve2d,
+import { getRandomInt, sleep } from "../modules/common.js";
-  } from "../modules/automata.js";
+import { mapGetters } from "vuex";
-  import { getRandomInt, sleep } from "../modules/common.js";
+export default {
-
+  name: "CanvasBoard",
-  export default {
+  data() {
-    name: "CanvasBoard",
+    return {
-    data() {
+      canvas: null,
-      return {
+      ctx: null,
-        canvas: null,
+    };
-        ctx: null,
+  },
-      };
+  computed: {
+    ...mapGetters({
+      cellProperties: "getCellProperties",
+      rules: "get1dRules",
+      canvasWidth: "getCanvasWidth",
+      canvasHeight: "getCanvasHeight",
+      refreshRate: "getRefreshRate",
+      initial1dState: "getInitial1dState",
+      drawingDirection: "getDrawingDirection",
+      canDraw: "getCanDraw",
+      lastBoard: "getLastBoard",
+      getDraw1d: "getDraw1d",
+      getDraw2d: "getDraw2d",
+      getDraw2dLast: "getDraw2dLast",
+      getReset: "getReset",
+    }),
+    boardWidth: function () {
+      return Math.floor(this.canvasWidth / this.cellProperties.size);
     },
-    computed: {
+    boardHeight: function () {
-      ...mapState(globalStore, {
+      return Math.floor(this.canvasHeight / this.cellProperties.size);
-        cellProperties: "cellProperties",
-        rules: "rules1d",
-        refreshRate: "refreshRate",
-        initial1dState: "initial1dState",
-        drawingDirection: "drawingDirection",
-        canDraw: "canDraw",
-        getDraw1d: "draw1d",
-        getDraw2d: "draw2d",
-        getDraw2dLast: "draw2dLast",
-      }),
-      ...mapWritableState(globalStore, {
-        lastBoard: "lastBoard",
-        canvasWidth: "canvasWidth",
-        canvasHeight: "canvasHeight",
-        getReset: "reset",
-      }),
-      boardWidth: function () {
-        return Math.floor(this.canvasWidth / this.cellProperties.size);
-      },
-      boardHeight: function () {
-        return Math.floor(this.canvasHeight / this.cellProperties.size);
-      },
     },
-    watch: {
+  },
-      getDraw1d(value) {
+  watch: {
-        if (value == true) this.draw1d();
+    getDraw1d(value) {
-      },
+      if (value == true) this.draw1d();
-      getDraw2d(value) {
-        if (value == true) this.draw2dNew();
-      },
-      getDraw2dLast(value) {
-        if (value == true) this.draw2dLast();
-      },
-      getReset(value) {
-        if (value == true) this.reset();
-      },
     },
-    mounted() {
+    getDraw2d(value) {
-      this.canvas = Object.freeze(document.getElementById("canvas-board"));
+      if (value == true) this.draw2dNew();
-      this.ctx = this.canvas.getContext("2d");
-      this.canvasWidth = this.canvas.parentElement.clientWidth;
-      this.canvasHeight = this.canvas.parentElement.clientHeight;
     },
-    methods: {
+    getDraw2dLast(value) {
-      ...mapActions(globalStore, ["toggleStop"]),
+      if (value == true) this.draw2dLast();
-      drawCanvas(board) {
+    },
-        const props = this.cellProperties;
+    getReset(value) {
-        board.map((row, y) => {
+      if (value == true) this.reset();
-          const d = props.size;
+    },
-          return row.map((cell, x) => {
+  },
-            this.ctx.fillStyle = (() => {
+  mounted() {
-              if (cell === 1) return props.liveColor;
+    this.canvas = Object.freeze(document.getElementById("canvas-board"));
-              return props.deadColor;
+    this.ctx = this.canvas.getContext("2d");
-            })();
+    this.$store.commit("setCanvasWidth", this.canvas.parentElement.clientWidth);
-            if (this.drawingDirection === "x")
+    this.$store.commit(
-              this.ctx.fillRect(y * d, x * d, d, d);
+      "setCanvasHeight",
-            else this.ctx.fillRect(x * d, y * d, d, d);
+      this.canvas.parentElement.clientHeight
-            return cell;
+    );
-          });
+  },
+  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]);
-      },
-      draw1d() {
-        const initialState = this.compute1dInitialState();
-        const board = createBoard(
-          initialState,
-          this.rules.rules,
-          this.boardWidth
-        );
-        this.lastBoard = Object.freeze(board);
-        this.drawCanvas(board);
-        this.toggleStop();
-      },
-      draw2d(board) {
-        if (!this.canDraw) return;
-        const draw2dNext = async (b) => {
-          if (!this.canDraw) return;
-          const newBoard = evolve2d(b, conwayRules);
-          this.drawCanvas(b, this.cellProperties);
-          await sleep(this.refreshRate);
-          draw2dNext(newBoard);
-        };
-        return draw2dNext(board);
-      },
-      draw2dNew() {
-        const initialState = create2dState(
-          this.boardWidth,
-          this.boardHeight,
-          getRandomInt,
-          [0, 2]
-        );
-        const board = evolve2d(initialState, conwayRules);
-        this.lastBoard = Object.freeze(board);
-        this.draw2d(board);
-      },
-      async draw2dLast() {
-        if (this.lastBoard != undefined) this.draw2d(this.lastBoard);
-      },
-      reset() {
-        this.toggleStop();
-        this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
-        this.getReset = 0;
-      },
     },
-  };
+    compute1dInitialState() {
+      if (this.initial1dState === "onecell")
+        return create1dStateOneCell(this.boardWidth);
+      return create1dState(this.boardWidth, getRandomInt, [0, 2]);
+    },
+    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");
+    },
+    draw2d(board) {
+      if (!this.canDraw) return;
+      const draw2dNext = async (b) => {
+        if (!this.canDraw) return;
+        const newBoard = evolve2d(b, conwayRules);
+        this.drawCanvas(b, this.cellProperties);
+        await sleep(this.refreshRate);
+        draw2dNext(newBoard);
+      };
+      return draw2dNext(board);
+    },
+    draw2dNew() {
+      const initialState = create2dState(
+        this.boardWidth,
+        this.boardHeight,
+        getRandomInt,
+        [0, 2]
+      );
+      const board = evolve2d(initialState, conwayRules);
+      this.$store.commit("setLastBoard", Object.freeze(board));
+      this.draw2d(board);
+    },
+    async draw2dLast() {
+      this.draw2d(this.lastBoard);
+    },
+    reset() {
+      this.$store.dispatch("stop");
+      this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
+      this.$store.commit("toggleReset", 0);
+    },
+  },
+};
 </script>
 <style>
-  #mainContent {
+#mainContent {
-    min-width: 70%;
+  min-width: 70%;
-  }
+}
 </style>

src/components/MainMenu.vue

@@ -8,55 +8,55 @@
 </template>
 
 <script>
-  import MenuCellProperties from "./MenuCellProperties.vue";
+import MenuCellProperties from "./MenuCellProperties.vue";
-  import MenuGeneralOptions from "./MenuGeneralOptions.vue";
+import MenuGeneralOptions from "./MenuGeneralOptions.vue";
-  import MenuElementaryCA from "./MenuElementaryCA.vue";
+import MenuElementaryCA from "./MenuElementaryCA.vue";
-  import Menu2dCA from "./Menu2dCA.vue";
+import Menu2dCA from "./Menu2dCA.vue";
-  export default {
+export default {
-    name: "MainMenu",
+  name: "MainMenu",
-    components: {
+  components: {
-      MenuCellProperties,
+    MenuCellProperties,
-      MenuGeneralOptions,
+    MenuGeneralOptions,
-      MenuElementaryCA,
+    MenuElementaryCA,
-      Menu2dCA,
+    Menu2dCA,
-    },
+  },
-  };
+};
 </script>
 
 <style>
+#sidebar {
+  width: 25%;
+  padding: 0 10px;
+  overflow-y: scroll;
+}
+
+/* Hide scrollbar for Chrome, Safari and Opera */
+#sidebar::-webkit-scrollbar {
+  display: none;
+}
+
+/* Hide scrollbar for IE, Edge and Firefox */
+#sidebar {
+  -ms-overflow-style: none; /* IE and Edge */
+  scrollbar-width: none; /* Firefox */
+}
+
+@media screen and (max-width: 800px) {
+  #container {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+  }
+
+  #mainContent {
+    flex: 1;
+    width: 100%;
+  }
+
   #sidebar {
-    width: 25%;
+    flex: 1;
-    padding: 0 10px;
+    padding: 0;
-    overflow-y: scroll;
+    width: 100%;
-  }
-
-  /* Hide scrollbar for Chrome, Safari and Opera */
-  #sidebar::-webkit-scrollbar {
-    display: none;
-  }
-
-  /* Hide scrollbar for IE, Edge and Firefox */
-  #sidebar {
-    -ms-overflow-style: none; /* IE and Edge */
-    scrollbar-width: none; /* Firefox */
-  }
-
-  @media screen and (max-width: 800px) {
-    #container {
-      display: flex;
-      flex-direction: column;
-      justify-content: center;
-    }
-
-    #mainContent {
-      flex: 1;
-      width: 100%;
-    }
-
-    #sidebar {
-      flex: 1;
-      padding: 0;
-      width: 100%;
-    }
   }
+}
 </style>

src/components/Menu2dCA.vue

@@ -2,50 +2,55 @@
   <MenuRow row-title="2D Cellular Automata">
     <div class="form-field">
       <label>Start from last result</label>
-      <input type="button" value="start" @click="toggleDraw2dLast()" />
+      <input type="button" value="start" @click="draw2dLast" />
     </div>
     <div class="form-field">
-      <input
+      <input type="button" name="start2d" value="start" @click="draw2d" />
-        type="button"
-        name="start2d"
-        value="start"
-        @click="toggleDraw2d()"
-      />
       <input
         type="button"
         name="stop"
         class="stop"
         value="stop"
-        @click="toggleStop()"
+        @click="stop"
       />
       <input
         type="button"
         name="reset"
         class="reset"
         value="reset"
-        @click="toggleReset()"
+        @click="reset"
       />
     </div>
   </MenuRow>
 </template>
 
 <script>
-  import { mapActions } from "pinia";
+import MenuRow from "./MenuRow.vue";
-  import MenuRow from "./MenuRow.vue";
+import { mapGetters } from "vuex";
-  import { globalStore } from "../stores/index.js";
 
-  export default {
+export default {
-    name: "Menu2dCA",
+  name: "Menu2dCA",
-    components: {
+  components: {
-      MenuRow,
+    MenuRow,
+  },
+  computed: {
+    ...mapGetters({
+      lastBoard: "getLastBoard",
+    }),
+  },
+  methods: {
+    draw2d() {
+      this.$store.dispatch("draw2d");
     },
-    methods: {
+    draw2dLast() {
-      ...mapActions(globalStore, [
+      this.$store.dispatch("draw2dLast");
-        "toggleDraw2d",
-        "toggleDraw2dLast",
-        "toggleReset",
-        "toggleStop",
-      ]),
     },
-  };
+    reset() {
+      this.$store.dispatch("reset");
+    },
+    stop() {
+      this.$store.dispatch("stop");
+    },
+  },
+};
 </script>

src/components/MenuCellProperties.vue

@@ -34,27 +34,29 @@
 </template>
 
 <script>
-  import { mapWritableState } from "pinia";
+import MenuRow from "./MenuRow.vue";
-  import { globalStore } from "../stores/index.js";
+export default {
-  import MenuRow from "./MenuRow.vue";
+  name: "MainMenu",
-  export default {
+  components: {
-    name: "MainMenu",
+    MenuRow,
-    components: {
+  },
-      MenuRow,
+  data() {
+    return {
+      cellProperties: this.$store.state.cellProperties,
+    };
+  },
+  methods: {
+    getCellProperties(event) {
+      const elem = event.target;
+      const prop = this.$store.state.cellProperties;
+      return prop[elem.name];
     },
-    computed: {
+    updateCellProperties(event) {
-      ...mapWritableState(globalStore, ["cellProperties"]),
+      const elem = event.target;
+      const prop = { name: elem.name, value: elem.value };
+      //console.log(prop)
+      this.$store.commit("setCellProperties", prop);
     },
-    methods: {
+  },
-      getCellProperties(event) {
+};
-        const elem = event.target;
-        const prop = this.cellProperties;
-        return prop[elem.name];
-      },
-      updateCellProperties(event) {
-        const elem = event.target;
-        this.cellProperties[elem.name] = elem.value;
-      },
-    },
-  };
 </script>

src/components/MenuElementaryCA.vue

@@ -63,85 +63,183 @@
       </div>
     </form>
     <div class="form-field">
-      <input type="button" name="start" value="start" @click="toggleDraw1d()" />
+      <input type="button" name="start" value="start" @click="draw1d" />
       <input
         type="button"
         name="reset"
         class="reset"
         value="reset"
-        @click="toggleReset"
+        @click="reset"
       />
     </div>
   </MenuRow>
 </template>
 
 <script>
-  import { mapActions, mapWritableState } from "pinia";
+import { mapGetters } from "vuex";
-  import { presetRules, initialStates } from "./preset.js";
+import MenuRow from "./MenuRow.vue";
-  import { globalStore } from "../stores/index.js";
+export default {
-  import MenuRow from "./MenuRow.vue";
+  name: "MenuElementaryCA",
-  export default {
+  components: {
-    name: "MenuElementaryCA",
+    MenuRow,
-    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: {
+            100: 1,
+            101: 0,
+            110: 0,
+            111: 1,
+            "011": 0,
+            "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 45?",
+          rules: {
+            100: 0,
+            101: 0,
+            110: 1,
+            111: 0,
+            "011": 1,
+            "010": 0,
+            "001": 1,
+            "000": 1,
+          },
+        },
+        {
+          name: "rule 54?",
+          rules: {
+            100: 1,
+            101: 0,
+            110: 1,
+            111: 1,
+            "011": 0,
+            "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",
+        },
+        {
+          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"
+      );
     },
-    data() {
+  },
-      return {
+  methods: {
-        presetRules: presetRules,
+    copyRules() {
-        initialStates: initialStates,
+      const rules = JSON.stringify(this.rules);
-      };
+      navigator.clipboard.writeText(rules);
     },
-    computed: {
+    isCurrentPreset(event) {
-      ...mapWritableState(globalStore, {
+      const elem = event.target;
-        initialState: "initial1dState",
+      return this.initialState === elem.value;
-        rules: "rules1d",
-      }),
-      rules1dFileName() {
-        // TODO: broken
-        return (
-          Object.keys(this.rules)
-            .map((index) => {
-              return this.rules[index];
-            })
-            .join("_") + ".json"
-        );
-      },
     },
-    methods: {
+    updateSingleRule(event) {
-      ...mapActions(globalStore, ["toggleDraw1d", "toggleReset"]),
+      const elem = event.target;
-      copyRules() {
+      const value = elem.checked ? 1 : 0;
-        const rules = JSON.stringify(this.rules);
+      const data = { rule: elem.name, value: value };
-        navigator.clipboard.writeText(rules);
+      this.$store.commit("update1dSingleRule", data);
-      },
-      isCurrentPreset(event) {
-        const elem = event.target;
-        return this.initialState === elem.value;
-      },
-      updateSingleRule(event) {
-        const elem = event.target;
-        const value = elem.checked ? 1 : 0;
-        this.rules.rules[elem.name] = value;
-      },
-      updateRules(event) {
-        const elem = event.target;
-        const name = elem.value;
-        const newRuleset = this.presetRules.find((ruleset) => {
-          return ruleset.name === name;
-        });
-        this.rules.rules = newRuleset.rules;
-      },
-      updateInitialState(event) {
-        const elem = event.target;
-        this.initialState = elem.value;
-      },
     },
-  };
+    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);
+      });
+    },
+    updateInitialState(event) {
+      const elem = event.target;
+      this.$store.commit("setInitial1dState", elem.value);
+    },
+    draw1d() {
+      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/components/MenuGeneralOptions.vue

@@ -56,40 +56,40 @@
 </template>
 
 <script>
-  import { mapWritableState } from "pinia";
+import MenuRow from "./MenuRow.vue";
-  import { globalStore } from "../stores/index.js";
+import { mapGetters } from "vuex";
-  import MenuRow from "./MenuRow.vue";
+export default {
-  export default {
+  name: "MenuGeneralOptions",
-    name: "MenuGeneralOptions",
+  components: {
-    components: {
+    MenuRow,
-      MenuRow,
+  },
+  computed: {
+    ...mapGetters({
+      canvasWidth: "getCanvasWidth",
+      canvasHeight: "getCanvasHeight",
+      refreshRate: "getRefreshRate",
+      drawingDirection: "getDrawingDirection",
+    }),
+  },
+  methods: {
+    updateCanvasHeight: function (event) {
+      const elem = event.target;
+      this.$store.commit("setCanvasHeight", elem.value);
     },
-    computed: {
+    updateCanvasWidth: function (event) {
-      ...mapWritableState(globalStore, [
+      const elem = event.target;
-        "canvasWidth",
+      this.$store.commit("setCanvasWidth", elem.value);
-        "canvasHeight",
-        "refreshRate",
-        "drawingDirection",
-      ]),
     },
-    methods: {
+    updateRefreshRate: function (event) {
-      updateCanvasHeight: function (event) {
+      const elem = event.target;
-        const elem = event.target;
+      this.$store.commit("setRefreshRate", elem.value);
-        this.canvasHeight = elem.value;
-      },
-      updateCanvasWidth: function (event) {
-        const elem = event.target;
-        this.canvasWidth = elem.value;
-      },
-      updateRefreshRate: function (event) {
-        const elem = event.target;
-        this.refreshRate = elem.value;
-      },
-      updateDrawingDirection: function (event) {
-        const elem = event.target;
-        const value = elem.checked ? "x" : "y";
-        this.drawingDirection = value;
-      },
     },
-  };
+    updateDrawingDirection: function (event) {
+      const elem = event.target;
+      const value = elem.checked ? "x" : "y";
+      this.$store.commit("setDrawingDirection", value);
+      console.log(this.drawingDirection);
+    },
+  },
+};
 </script>

src/components/MenuRow.vue

@@ -10,64 +10,66 @@
 </template>
 
 <script>
-  export default {
+import { mapGetters } from "vuex";
-    name: "MenuRow",
+
-    props: {
+export default {
-      rowTitle: {
+  name: "MenuRow",
-        type: String,
+  props: {
-        default: "",
+    rowTitle: {
-      },
+      type: String,
+      default: "",
     },
-    data() {
+  },
-      return {
+  computed: {
-        activeMenu: "",
+    ...mapGetters({
-      };
+      activeMenu: "getActiveMenu",
+    }),
+  },
+  methods: {
+    updateActiveMenu(event) {
+      const elem = event.target;
+      const value = elem.id;
+      if (value == this.activeMenu) this.$store.commit("setActiveMenu", "");
+      else this.$store.commit("setActiveMenu", value);
     },
-    methods: {
+  },
-      updateActiveMenu(event) {
+};
-        const elem = event.target;
-        const value = elem.id;
-        if (value == this.activeMenu) this.activeMenu = "";
-        else this.activeMenu = value;
-      },
-    },
-  };
 </script>
 
 <style>
-  .menu-row h2 {
+.menu-row h2 {
-    font-size: medium;
+  font-size: medium;
-    padding: 10px;
+  padding: 10px;
-    cursor: pointer;
+  cursor: pointer;
-    border: 2px solid darkgrey;
+  border: 2px solid darkgrey;
-    margin: 0 0 10px 0;
+  margin: 0 0 10px 0;
-  }
+}
 
-  select {
+select {
-    margin-top: 10px;
+  margin-top: 10px;
-    padding: 5px;
+  padding: 5px;
-  }
+}
 
-  input[type="button"] {
+input[type="button"] {
-    min-width: 60px;
+  min-width: 60px;
-    padding: 5px;
+  padding: 5px;
-    font-weight: bold;
+  font-weight: bold;
-    margin-right: 10px;
+  margin-right: 10px;
-  }
+}
 
-  .form-field {
+.form-field {
-    display: flex;
+  display: flex;
-    margin: 10px;
+  margin: 10px;
-    justify-content: space-between;
+  justify-content: space-between;
-  }
+}
 
-  .menu-row {
+.menu-row {
-    flex: 1;
+  flex: 1;
-  }
+}
 
-  label,
+label,
-  .form-field label {
+.form-field label {
-    margin-right: 10px;
+  margin-right: 10px;
-    font-weight: bold;
+  font-weight: bold;
-  }
+}
 </style>

src/components/preset.js

@@ -1,95 +0,0 @@
-const 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: {
-      100: 1,
-      101: 0,
-      110: 0,
-      111: 1,
-      "011": 0,
-      "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 45?",
-    rules: {
-      100: 0,
-      101: 0,
-      110: 1,
-      111: 0,
-      "011": 1,
-      "010": 0,
-      "001": 1,
-      "000": 1,
-    },
-  },
-  {
-    name: "rule 54?",
-    rules: {
-      100: 1,
-      101: 0,
-      110: 1,
-      111: 1,
-      "011": 0,
-      "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,
-    },
-  },
-];
-
-const 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",
-  },
-];
-
-export { presetRules, initialStates };

src/main.js

@@ -1,10 +1,9 @@
 import { createApp } from "vue";
 import App from "./App.vue";
-import { createPinia } from "pinia";
+import { store } from "./store";
 
 const app = createApp(App);
-const pinia = createPinia();
 
-app.use(pinia);
+app.use(store);
 
 app.mount("#app");

src/store/index.js

@@ -0,0 +1,174 @@
+/* TODO: terminology is to be changed for : 
+canvas/board : 
+currently, the canvas object is named board, 
+while the structure used to store automata current state is named "board" as well. This is confusing
+drawing board could be enough to lift any ambiguity
+
+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";
+
+export const store = createStore({
+  strict: process.env.NODE_ENV !== "production",
+  state: {
+    rules1d: {
+      name: "rule 73",
+      rules: {
+        111: 0,
+        110: 1,
+        101: 0,
+        100: 0,
+        "011": 1,
+        "010": 0,
+        "001": 0,
+        "000": 1,
+      },
+    },
+    cellProperties: {
+      size: 3,
+      liveColor: "#000000",
+      deadColor: "#F5F5F5",
+    },
+    canvasWidth: 0,
+    canvasHeight: 0,
+    boardWidth: 0,
+    boardHeight: 0,
+    refreshRate: 300,
+    initial1dState: "onecell",
+    activeMenu: "",
+    drawingDirection: "y",
+    lastBoard: {},
+    draw1d: false,
+    draw2d: false,
+    draw2dLast: false,
+    reset: false,
+    canDraw: true,
+  },
+  mutations: {
+    update1dSingleRule(state, data) {
+      state.rules1d.name = data.name;
+      state.rules1d.rules[data.rule] = data.value;
+    },
+    update1dRules(state, data) {
+      state.rules1d = data;
+    },
+    setCellProperties(state, data) {
+      state.cellProperties[data.name] = data.value;
+    },
+    setCanvasWidth(state, data) {
+      state.canvasWidth = data;
+    },
+    setCanvasHeight(state, data) {
+      state.canvasHeight = data;
+    },
+    setRefreshRate(state, data) {
+      state.refreshRate = data;
+    },
+    setInitial1dState(state, data) {
+      state.initial1dState = data;
+    },
+    setActiveMenu(state, data) {
+      state.activeMenu = data;
+    },
+    setDrawingDirection(state, data) {
+      state.drawingDirection = data;
+    },
+    setLastBoard(state, data) {
+      state.lastBoard = data;
+    },
+    setCanvas(state, data) {
+      state.canvas = data;
+    },
+    setContext(state, data) {
+      state.ctx = data;
+    },
+    toggleDraw1d(state, data) {
+      state.draw1d = data;
+    },
+    toggleDraw2d(state, data) {
+      state.draw2d = data;
+    },
+    toggleDraw2dLast(state, data) {
+      state.draw2dLast = data;
+    },
+    toggleReset(state, data) {
+      state.reset = data;
+    },
+    canDraw(state, data) {
+      state.canDraw = data;
+    },
+  },
+  getters: {
+    getCellProperties(state) {
+      return state.cellProperties;
+    },
+    get1dRules(state) {
+      return state.rules1d;
+    },
+    getRule1d(state) {
+      return state.rules1d;
+    },
+    getCanvasWidth(state) {
+      return state.canvasWidth;
+    },
+    getCanvasHeight(state) {
+      return state.canvasHeight;
+    },
+    getRefreshRate(state) {
+      return state.refreshRate;
+    },
+    getInitial1dState(state) {
+      return state.initial1dState;
+    },
+    getActiveMenu(state) {
+      return state.activeMenu;
+    },
+    getDrawingDirection(state) {
+      return state.drawingDirection;
+    },
+    getLastBoard(state) {
+      return state.lastBoard;
+    },
+    getDraw1d(state) {
+      return state.draw1d;
+    },
+    getDraw2d(state) {
+      return state.draw2d;
+    },
+    getDraw2dLast(state) {
+      return state.draw2dLast;
+    },
+    getReset(state) {
+      return state.reset;
+    },
+    getCanDraw(state) {
+      return state.canDraw;
+    },
+  },
+  actions: {
+    draw1d({ commit }) {
+      commit("toggleDraw1d", true);
+    },
+    draw2d({ commit }) {
+      commit("canDraw", true);
+      commit("toggleDraw2d", true);
+    },
+    draw2dLast({ commit }) {
+      commit("canDraw", true);
+      commit("toggleDraw2dLast", true);
+    },
+    reset({ dispatch, commit }) {
+      dispatch("stop");
+      commit("toggleReset", true);
+    },
+    stop({ commit }) {
+      commit("toggleDraw1d", false);
+      commit("toggleDraw2d", false);
+      commit("toggleDraw2dLast", false);
+      commit("canDraw", false);
+    },
+  },
+  modules: {},
+});

src/stores/index.js

@@ -1,62 +0,0 @@
-import { defineStore } from "pinia";
-
-export const globalStore = defineStore("globalStore", {
-  state: () => {
-    return {
-      rules1d: {
-        name: "rule 73",
-        rules: {
-          111: 0,
-          110: 1,
-          101: 0,
-          100: 0,
-          "011": 1,
-          "010": 0,
-          "001": 0,
-          "000": 1,
-        },
-      },
-      cellProperties: {
-        size: 3,
-        liveColor: "#000000",
-        deadColor: "#F5F5F5",
-      },
-      canvasWidth: 0,
-      canvasHeight: 0,
-      boardWidth: 0,
-      boardHeight: 0,
-      refreshRate: 300,
-      initial1dState: "onecell",
-      drawingDirection: "y",
-      lastBoard: {},
-      draw1d: false,
-      draw2d: false,
-      draw2dLast: false,
-      reset: false,
-      canDraw: true,
-    };
-  },
-  actions: {
-    toggleDraw1d() {
-      this.draw1d = true;
-    },
-    toggleDraw2d() {
-      this.canDraw = true;
-      this.draw2d = true;
-    },
-    toggleDraw2dLast() {
-      this.canDraw = true;
-      this.draw2dLast = true;
-    },
-    toggleReset() {
-      this.toggleStop();
-      this.reset = true;
-    },
-    toggleStop() {
-      this.draw1d = false;
-      this.draw2d = false;
-      this.draw2dLast = false;
-      this.canDraw = false;
-    },
-  },
-});

vue.config.js

@@ -0,0 +1,13 @@
+module.exports = {
+  configureWebpack: {
+    devServer: {
+      overlay: {
+        warnings: true,
+        errors: true,
+      },
+      watchOptions: {
+        ignored: [/node_modules/, /public/, /\.#/],
+      },
+    },
+  },
+};