.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

package-lock.json

@@ -12,7 +12,8 @@
         "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",
@@ -2019,6 +2020,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",
@@ -3380,6 +3392,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

@@ -14,7 +14,8 @@
     "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/components/CanvasBoard.vue

@@ -9,19 +9,17 @@
   </main>
 </template>
 <script>
-  import { mapActions, mapState, mapWritableState } from "pinia";
+import {
-  import { globalStore } from "../stores/index.js";
-  import {
   create1dState,
   create1dStateOneCell,
   create2dState,
   createBoard,
   conwayRules,
   evolve2d,
-  } from "../modules/automata.js";
+} from "../modules/automata.js";
-  import { getRandomInt, sleep } from "../modules/common.js";
+import { getRandomInt, sleep } from "../modules/common.js";
-
+import { mapGetters } from "vuex";
-  export default {
+export default {
   name: "CanvasBoard",
   data() {
     return {
@@ -30,22 +28,20 @@
     };
   },
   computed: {
-      ...mapState(globalStore, {
+    ...mapGetters({
-        cellProperties: "cellProperties",
+      cellProperties: "getCellProperties",
-        rules: "rules1d",
+      rules: "get1dRules",
-        refreshRate: "refreshRate",
+      canvasWidth: "getCanvasWidth",
-        initial1dState: "initial1dState",
+      canvasHeight: "getCanvasHeight",
-        drawingDirection: "drawingDirection",
+      refreshRate: "getRefreshRate",
-        canDraw: "canDraw",
+      initial1dState: "getInitial1dState",
-        getDraw1d: "draw1d",
+      drawingDirection: "getDrawingDirection",
-        getDraw2d: "draw2d",
+      canDraw: "getCanDraw",
-        getDraw2dLast: "draw2dLast",
+      lastBoard: "getLastBoard",
-      }),
+      getDraw1d: "getDraw1d",
-      ...mapWritableState(globalStore, {
+      getDraw2d: "getDraw2d",
-        lastBoard: "lastBoard",
+      getDraw2dLast: "getDraw2dLast",
-        canvasWidth: "canvasWidth",
+      getReset: "getReset",
-        canvasHeight: "canvasHeight",
-        getReset: "reset",
     }),
     boardWidth: function () {
       return Math.floor(this.canvasWidth / this.cellProperties.size);
@@ -71,11 +67,13 @@
   mounted() {
     this.canvas = Object.freeze(document.getElementById("canvas-board"));
     this.ctx = this.canvas.getContext("2d");
-      this.canvasWidth = this.canvas.parentElement.clientWidth;
+    this.$store.commit("setCanvasWidth", this.canvas.parentElement.clientWidth);
-      this.canvasHeight = this.canvas.parentElement.clientHeight;
+    this.$store.commit(
+      "setCanvasHeight",
+      this.canvas.parentElement.clientHeight
+    );
   },
   methods: {
-      ...mapActions(globalStore, ["toggleStop"]),
     drawCanvas(board) {
       const props = this.cellProperties;
       board.map((row, y) => {
@@ -104,9 +102,9 @@
         this.rules.rules,
         this.boardWidth
       );
-        this.lastBoard = Object.freeze(board);
+      this.$store.commit("setLastBoard", Object.freeze(board));
       this.drawCanvas(board);
-        this.toggleStop();
+      this.$store.dispatch("stop");
     },
     draw2d(board) {
       if (!this.canDraw) return;
@@ -127,22 +125,22 @@
         [0, 2]
       );
       const board = evolve2d(initialState, conwayRules);
-        this.lastBoard = Object.freeze(board);
+      this.$store.commit("setLastBoard", Object.freeze(board));
       this.draw2d(board);
     },
     async draw2dLast() {
-        if (this.lastBoard != undefined) this.draw2d(this.lastBoard);
+      this.draw2d(this.lastBoard);
     },
     reset() {
-        this.toggleStop();
+      this.$store.dispatch("stop");
       this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
-        this.getReset = 0;
+      this.$store.commit("toggleReset", 0);
     },
   },
-  };
+};
 </script>
 <style>
-  #mainContent {
+#mainContent {
   min-width: 70%;
-  }
+}
 </style>

src/components/MainMenu.vue

@@ -8,11 +8,11 @@
 </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",
   components: {
     MenuCellProperties,
@@ -20,28 +20,28 @@
     MenuElementaryCA,
     Menu2dCA,
   },
-  };
+};
 </script>
 
 <style>
-  #sidebar {
+#sidebar {
   width: 25%;
   padding: 0 10px;
   overflow-y: scroll;
-  }
+}
 
-  /* Hide scrollbar for Chrome, Safari and Opera */
+/* Hide scrollbar for Chrome, Safari and Opera */
-  #sidebar::-webkit-scrollbar {
+#sidebar::-webkit-scrollbar {
   display: none;
-  }
+}
 
-  /* Hide scrollbar for IE, Edge and Firefox */
+/* Hide scrollbar for IE, Edge and Firefox */
-  #sidebar {
+#sidebar {
   -ms-overflow-style: none; /* IE and Edge */
   scrollbar-width: none; /* Firefox */
-  }
+}
 
-  @media screen and (max-width: 800px) {
+@media screen and (max-width: 800px) {
   #container {
     display: flex;
     flex-direction: column;
@@ -58,5 +58,5 @@
     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",
   components: {
     MenuRow,
   },
-    methods: {
+  computed: {
-      ...mapActions(globalStore, [
+    ...mapGetters({
-        "toggleDraw2d",
+      lastBoard: "getLastBoard",
-        "toggleDraw2dLast",
+    }),
-        "toggleReset",
-        "toggleStop",
-      ]),
   },
-  };
+  methods: {
+    draw2d() {
+      this.$store.dispatch("draw2d");
+    },
+    draw2dLast() {
+      this.$store.dispatch("draw2dLast");
+    },
+    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";
-  export default {
   name: "MainMenu",
   components: {
     MenuRow,
   },
-    computed: {
+  data() {
-      ...mapWritableState(globalStore, ["cellProperties"]),
+    return {
+      cellProperties: this.$store.state.cellProperties,
+    };
   },
   methods: {
     getCellProperties(event) {
       const elem = event.target;
-        const prop = this.cellProperties;
+      const prop = this.$store.state.cellProperties;
       return prop[elem.name];
     },
     updateCellProperties(event) {
       const elem = event.target;
-        this.cellProperties[elem.name] = elem.value;
+      const prop = { name: elem.name, value: elem.value };
+      //console.log(prop)
+      this.$store.commit("setCellProperties", prop);
     },
   },
-  };
+};
 </script>

src/components/MenuElementaryCA.vue

@@ -63,21 +63,21 @@
       </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 { mapActions, mapState, mapWritableState } from 'pinia'
-  import { presetRules, initialStates } from "./preset.js";
+  import { presetRules, initialStates } from "./preset.js"
   import { globalStore } from "../stores/index.js";
   import MenuRow from "./MenuRow.vue";
   export default {
@@ -92,12 +92,17 @@
       };
     },
     computed: {
-      ...mapWritableState(globalStore, {
+      ...mapWritableState(
+        globalStore, {
           initialState: "initial1dState",
-        rules: "rules1d",
+        }
-      }),
+      ),
+      ...mapState(
+        globalStore, {
+          rules: "rules1d"
+        }
+      ),
       rules1dFileName() {
-        // TODO: broken
         return (
           Object.keys(this.rules)
                 .map((index) => {
@@ -108,7 +113,7 @@
       },
     },
     methods: {
-      ...mapActions(globalStore, ["toggleDraw1d", "toggleReset"]),
+      ...mapActions(globalStore, ["draw1d", "reset"]),
       copyRules() {
         const rules = JSON.stringify(this.rules);
         navigator.clipboard.writeText(rules);
@@ -128,11 +133,11 @@
         const newRuleset = this.presetRules.find((ruleset) => {
           return ruleset.name === name;
         });
-        this.rules.rules = newRuleset.rules;
+        this.rules.rules = newRuleset.rules
       },
       updateInitialState(event) {
         const elem = event.target;
-        this.initial1dState = elem.value;
+        this.initial1dState = elem.value
       },
     },
   };

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",
   components: {
     MenuRow,
   },
   computed: {
-      ...mapWritableState(globalStore, [
+    ...mapGetters({
-        "canvasWidth",
+      canvasWidth: "getCanvasWidth",
-        "canvasHeight",
+      canvasHeight: "getCanvasHeight",
-        "refreshRate",
+      refreshRate: "getRefreshRate",
-        "drawingDirection",
+      drawingDirection: "getDrawingDirection",
-      ]),
+    }),
   },
   methods: {
     updateCanvasHeight: function (event) {
       const elem = event.target;
-        this.canvasHeight = elem.value;
+      this.$store.commit("setCanvasHeight", elem.value);
     },
     updateCanvasWidth: function (event) {
       const elem = event.target;
-        this.canvasWidth = elem.value;
+      this.$store.commit("setCanvasWidth", elem.value);
     },
     updateRefreshRate: function (event) {
       const elem = event.target;
-        this.refreshRate = elem.value;
+      this.$store.commit("setRefreshRate", elem.value);
     },
     updateDrawingDirection: function (event) {
       const elem = event.target;
       const value = elem.checked ? "x" : "y";
-        this.drawingDirection = value;
+      this.$store.commit("setDrawingDirection", value);
+      console.log(this.drawingDirection);
     },
   },
-  };
+};
 </script>

src/components/MenuRow.vue

@@ -10,10 +10,9 @@
 </template>
 
 <script>
-  import { mapWritableState } from "pinia";
+import { mapGetters } from "vuex";
-  import { globalStore } from "../stores/index.js";
 
-  export default {
+export default {
   name: "MenuRow",
   props: {
     rowTitle: {
@@ -22,54 +21,55 @@
     },
   },
   computed: {
-      // TODO: should be passed as a props/slot, not in a store
+    ...mapGetters({
-      ...mapWritableState(globalStore, ["activeMenu"]),
+      activeMenu: "getActiveMenu",
+    }),
   },
   methods: {
     updateActiveMenu(event) {
       const elem = event.target;
       const value = elem.id;
-        if (value == this.activeMenu) this.activeMenu = "";
+      if (value == this.activeMenu) this.$store.commit("setActiveMenu", "");
-        else this.activeMenu = value;
+      else this.$store.commit("setActiveMenu", value);
     },
   },
-  };
+};
 </script>
 
 <style>
-  .menu-row h2 {
+.menu-row h2 {
   font-size: medium;
   padding: 10px;
   cursor: pointer;
   border: 2px solid darkgrey;
   margin: 0 0 10px 0;
-  }
+}
 
-  select {
+select {
   margin-top: 10px;
   padding: 5px;
-  }
+}
 
-  input[type="button"] {
+input[type="button"] {
   min-width: 60px;
   padding: 5px;
   font-weight: bold;
   margin-right: 10px;
-  }
+}
 
-  .form-field {
+.form-field {
   display: flex;
   margin: 10px;
   justify-content: space-between;
-  }
+}
 
-  .menu-row {
+.menu-row {
   flex: 1;
-  }
+}
 
-  label,
+label,
-  .form-field label {
+.form-field label {
   margin-right: 10px;
   font-weight: bold;
-  }
+}
 </style>

src/components/preset.js

@@ -77,7 +77,7 @@ const presetRules = [
       "000": 1,
     },
   },
-];
+]
 
 const initialStates = [
   {
@@ -90,6 +90,6 @@ const initialStates = [
     name: "Random cell",
     description: "State populated with random cells",
   },
-];
+]
 
-export { presetRules, initialStates };
+export { presetRules, initialStates }

src/stores/index.js

@@ -35,25 +35,25 @@ export const globalStore = defineStore("globalStore", {
       draw2dLast: false,
       reset: false,
       canDraw: true,
-    };
+    }
   },
   actions: {
-    toggleDraw1d() {
+    draw1d() {
       this.draw1d = true;
     },
-    toggleDraw2d() {
+    draw2d() {
       this.canDraw = true;
       this.draw2d = true;
     },
-    toggleDraw2dLast() {
+    draw2dLast() {
       this.canDraw = true;
       this.draw2dLast = true;
     },
-    toggleReset() {
+    reset() {
-      this.toggleStop();
+      this.stop();
       this.reset = true;
     },
-    toggleStop() {
+    stop() {
       this.draw1d = false;
       this.draw2d = false;
       this.draw2dLast = false;

vue.config.js

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