linting and formating

.pre-commit-config.yaml

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

src/components/CanvasBoard.vue

@@ -9,7 +9,7 @@
   </main>
 </template>
 <script>
-  import { mapActions, mapState, mapWritableState } from 'pinia'
+  import { mapActions, mapState, mapWritableState } from "pinia";
   import { globalStore } from "../stores/index.js";
   import {
     create1dState,
@@ -71,8 +71,8 @@
     mounted() {
       this.canvas = Object.freeze(document.getElementById("canvas-board"));
       this.ctx = this.canvas.getContext("2d");
-      this.canvasWidth = this.canvas.parentElement.clientWidth
+      this.canvasWidth = this.canvas.parentElement.clientWidth;
-      this.canvasHeight = this.canvas.parentElement.clientHeight
+      this.canvasHeight = this.canvas.parentElement.clientHeight;
     },
     methods: {
       ...mapActions(globalStore, ["toggleStop"]),
@@ -104,9 +104,9 @@
           this.rules.rules,
           this.boardWidth
         );
-        this.lastBoard = Object.freeze(board)
+        this.lastBoard = Object.freeze(board);
         this.drawCanvas(board);
-        this.toggleStop()
+        this.toggleStop();
       },
       draw2d(board) {
         if (!this.canDraw) return;
@@ -127,17 +127,16 @@
           [0, 2]
         );
         const board = evolve2d(initialState, conwayRules);
-        this.lastBoard = Object.freeze(board)
+        this.lastBoard = Object.freeze(board);
         this.draw2d(board);
       },
       async draw2dLast() {
-        if (this.lastBoard != undefined)
+        if (this.lastBoard != undefined) this.draw2d(this.lastBoard);
-          this.draw2d(this.lastBoard);
       },
       reset() {
-        this.toggleStop()
+        this.toggleStop();
         this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
-        this.getReset = 0
+        this.getReset = 0;
       },
     },
   };

src/components/Menu2dCA.vue

@@ -5,7 +5,12 @@
       <input type="button" value="start" @click="toggleDraw2dLast()" />
     </div>
     <div class="form-field">
-      <input type="button" name="start2d" value="start" @click="toggleDraw2d()" />
+      <input
+        type="button"
+        name="start2d"
+        value="start"
+        @click="toggleDraw2d()"
+      />
       <input
         type="button"
         name="stop"
@@ -35,7 +40,12 @@
       MenuRow,
     },
     methods: {
-      ...mapActions(globalStore, ["toggleDraw2d", "toggleDraw2dLast", "toggleReset", "toggleStop"]),
+      ...mapActions(globalStore, [
+        "toggleDraw2d",
+        "toggleDraw2dLast",
+        "toggleReset",
+        "toggleStop",
+      ]),
     },
   };
 </script>

src/components/MenuCellProperties.vue

@@ -34,7 +34,7 @@
 </template>
 
 <script>
-  import { mapWritableState } from 'pinia'
+  import { mapWritableState } from "pinia";
   import { globalStore } from "../stores/index.js";
   import MenuRow from "./MenuRow.vue";
   export default {
@@ -43,7 +43,7 @@
       MenuRow,
     },
     computed: {
-      ...mapWritableState(globalStore, ["cellProperties"])
+      ...mapWritableState(globalStore, ["cellProperties"]),
     },
     methods: {
       getCellProperties(event) {

src/components/MenuElementaryCA.vue

@@ -25,7 +25,7 @@
       </div>
       <div class="form-field">
         <label
-        >Rules presets
+          >Rules presets
           <br />
           <select
             name="ruleset-elementary"
@@ -51,7 +51,7 @@
         class="form-field"
       >
         <label
-        >{{ name }}
+          >{{ name }}
           <input
             :value="rule"
             type="checkbox"
@@ -76,8 +76,8 @@
 </template>
 
 <script>
-  import { mapActions, mapWritableState } from 'pinia'
+  import { mapActions, 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,20 +92,18 @@
       };
     },
     computed: {
-      ...mapWritableState(
+      ...mapWritableState(globalStore, {
-        globalStore, {
+        initialState: "initial1dState",
-          initialState: "initial1dState",
+        rules: "rules1d",
-          rules: "rules1d"
+      }),
-        }
-      ),
       rules1dFileName() {
         // TODO: broken
         return (
           Object.keys(this.rules)
-                .map((index) => {
+            .map((index) => {
-                  return this.rules[index];
+              return this.rules[index];
-                })
+            })
-                .join("_") + ".json"
+            .join("_") + ".json"
         );
       },
     },
@@ -130,20 +128,20 @@
         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;
       },
     },
   };
 </script>
 <style>
   .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,7 +56,7 @@
 </template>
 
 <script>
-  import { mapWritableState } from 'pinia'
+  import { mapWritableState } from "pinia";
   import { globalStore } from "../stores/index.js";
   import MenuRow from "./MenuRow.vue";
   export default {
@@ -65,24 +65,21 @@
       MenuRow,
     },
     computed: {
-      ...mapWritableState(
+      ...mapWritableState(globalStore, [
-        globalStore,
+        "canvasWidth",
-        [
+        "canvasHeight",
-          "canvasWidth",
+        "refreshRate",
-          "canvasHeight",
+        "drawingDirection",
-          "refreshRate",
+      ]),
-          "drawingDirection"
-      ]
-      ),
     },
     methods: {
       updateCanvasHeight: function (event) {
         const elem = event.target;
-        this.canvasHeight = elem.value
+        this.canvasHeight = elem.value;
       },
       updateCanvasWidth: function (event) {
         const elem = event.target;
-        this.canvasWidth = elem.value
+        this.canvasWidth = elem.value;
       },
       updateRefreshRate: function (event) {
         const elem = event.target;
@@ -91,7 +88,7 @@
       updateDrawingDirection: function (event) {
         const elem = event.target;
         const value = elem.checked ? "x" : "y";
-        this.drawingDirection = value
+        this.drawingDirection = value;
       },
     },
   };

src/components/MenuRow.vue

@@ -10,9 +10,9 @@
 </template>
 
 <script>
-  import { mapWritableState } from 'pinia'
+  import { mapWritableState } from "pinia";
   import { globalStore } from "../stores/index.js";
-  
+
   export default {
     name: "MenuRow",
     props: {
@@ -23,14 +23,14 @@
     },
     computed: {
       // TODO: should be passed as a props/slot, not in a store
-      ...mapWritableState(globalStore, ["activeMenu"])
+      ...mapWritableState(globalStore, ["activeMenu"]),
     },
     methods: {
       updateActiveMenu(event) {
         const elem = event.target;
         const value = elem.id;
-        if (value == this.activeMenu) this.activeMenu = ""
+        if (value == this.activeMenu) this.activeMenu = "";
-        else this.activeMenu = value
+        else this.activeMenu = value;
       },
     },
   };

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,7 +35,7 @@ export const globalStore = defineStore("globalStore", {
       draw2dLast: false,
       reset: false,
       canDraw: true,
-    }
+    };
   },
   actions: {
     toggleDraw1d() {