linting and formating

.pre-commit-config.yaml

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

@@ -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,12 +92,10 @@
       };
     },
     computed: {
-      ...mapWritableState(
+      ...mapWritableState(globalStore, {
-        globalStore, {
         initialState: "initial1dState",
-          rules: "rules1d"
+        rules: "rules1d",
-        }
+      }),
-      ),
       rules1dFileName() {
         // TODO: broken
         return (
@@ -130,11 +128,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,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",
         "refreshRate",
-          "drawingDirection"
+        "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,7 +10,7 @@
 </template>
 
 <script>
-  import { mapWritableState } from 'pinia'
+  import { mapWritableState } from "pinia";
   import { globalStore } from "../stores/index.js";
 
   export default {
@@ -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() {