src/App.vue

@@ -10,22 +10,17 @@
       <MainMenu v-if="mainMenu || windowWidth >= 800" />
       <CanvasBoard />
     </div>
-    <MenuReset row-title="" />
   </div>
 </template>
 
 <script>
   import MainMenu from "./components/MainMenu.vue";
   import CanvasBoard from "./components/CanvasBoard.vue";
-  import MenuReset from "./components/MenuReset.vue";
-  import { mapWritableState, mapActions } from "pinia";
-  import { globalStore } from "./stores/index.js";
 
   export default {
     name: "App",
     components: {
       MainMenu,
-      MenuReset,
       CanvasBoard,
     },
     data() {
@@ -34,35 +29,22 @@
         windowWidth: window.innerWidth,
       };
     },
-    computed: {
-      ...mapWritableState(globalStore, {
-        canvasWidth: "canvasWidth",
-        canvasHeight: "canvasHeight",
-      }),
+    methods: {
+      toggleMainMenu() {
+        this.mainMenu = !this.mainMenu;
+      },
+      onResize() {
+        this.windowWidth = window.innerWidth;
+      },
     },
     mounted() {
       this.$nextTick(() => {
         window.addEventListener("resize", this.onResize);
       });
     },
-    beforeUnmount() {
+    beforeDestroy() {
       window.removeEventListener("resize", this.onResize);
     },
-    methods: {
-      ...mapActions(globalStore, ["setBoardWidth", "setBoardHeight"]),
-      toggleMainMenu() {
-        this.mainMenu = !this.mainMenu;
-      },
-      onResize() {
-        this.$nextTick(() => {
-          this.windowWidth = window.innerWidth;
-          this.canvasWidth = window.innerWidth;
-          this.canvasHeight = window.innerHeight;
-          this.setBoardWidth();
-          this.setBoardHeight();
-        });
-      },
-    },
   };
 </script>
 
@@ -136,9 +118,8 @@
     h1 {
       font-size: medium;
       display: flex;
+      justify-content: space-around;
       align-items: center;
-      justify-content: space-between;
-      padding: 0 10px;
     }
 
     #burger-toggle {

src/components/CanvasBoard.vue

@@ -38,8 +38,6 @@
         getDraw1d: "draw1d",
         getDraw2d: "draw2d",
         getDraw2dLast: "draw2dLast",
-        boardWidth: "boardWidth",
-        boardHeight: "boardHeight",
       }),
       ...mapWritableState(globalStore, {
         lastBoard: "lastBoard",
@@ -47,6 +45,12 @@
         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) {
@@ -67,15 +71,9 @@
       this.ctx = this.canvas.getContext("2d");
       this.canvasWidth = this.canvas.parentElement.clientWidth;
       this.canvasHeight = this.canvas.parentElement.clientHeight;
-      this.setBoardWidth();
-      this.setBoardHeight();
     },
     methods: {
-      ...mapActions(globalStore, [
-        "toggleStop",
-        "setBoardWidth",
-        "setBoardHeight",
-      ]),
+      ...mapActions(globalStore, ["toggleStop"]),
       drawCanvas(board) {
         const props = this.cellProperties;
         board.map((row, y) => {

src/components/Menu2dCA.vue

@@ -1,17 +1,30 @@
 <template>
   <MenuRow row-title="2D Cellular Automata">
     <div class="form-field">
-      <label>Start from empty board</label>
+      <label>Start from last result</label>
+      <input type="button" value="start" @click="toggleDraw2dLast()" />
+    </div>
+    <div class="form-field">
       <input
         type="button"
         name="start2d"
         value="start"
         @click="toggleDraw2d()"
       />
-    </div>
-    <div class="form-field">
-      <label>Start from last result</label>
-      <input type="button" value="start" @click="toggleDraw2dLast()" />
+      <input
+        type="button"
+        name="stop"
+        class="stop"
+        value="stop"
+        @click="toggleStop()"
+      />
+      <input
+        type="button"
+        name="reset"
+        class="reset"
+        value="reset"
+        @click="toggleReset()"
+      />
     </div>
   </MenuRow>
 </template>
@@ -27,7 +40,12 @@
       MenuRow,
     },
     methods: {
-      ...mapActions(globalStore, ["toggleDraw2dLast", "toggleDraw2d"]),
+      ...mapActions(globalStore, [
+        "toggleDraw2d",
+        "toggleDraw2dLast",
+        "toggleReset",
+        "toggleStop",
+      ]),
     },
   };
 </script>

src/components/MenuElementaryCA.vue

@@ -64,6 +64,13 @@
     </form>
     <div class="form-field">
       <input type="button" name="start" value="start" @click="toggleDraw1d()" />
+      <input
+        type="button"
+        name="reset"
+        class="reset"
+        value="reset"
+        @click="toggleReset"
+      />
     </div>
   </MenuRow>
 </template>
@@ -101,7 +108,7 @@
       },
     },
     methods: {
-      ...mapActions(globalStore, ["toggleDraw1d"]),
+      ...mapActions(globalStore, ["toggleDraw1d", "toggleReset"]),
       copyRules() {
         const rules = JSON.stringify(this.rules);
         navigator.clipboard.writeText(rules);

src/components/MenuReset.vue

@@ -1,36 +0,0 @@
-<template>
-  <div class="form-field">
-    <input
-      type="button"
-      name="stop"
-      class="stop"
-      value="stop"
-      @click="toggleStop()"
-    />
-    <input
-      type="button"
-      name="reset"
-      class="reset"
-      value="reset"
-      @click="toggleReset()"
-    />
-  </div>
-</template>
-<script>
-  import { mapActions } from "pinia";
-  import { globalStore } from "../stores/index.js";
-
-  export default {
-    name: "MenuReset",
-    methods: {
-      ...mapActions(globalStore, ["toggleReset", "toggleStop"]),
-    },
-  };
-</script>
-<style scoped>
-  .form-field {
-    display: flex;
-    margin: 5px;
-    justify-content: flex-end;
-  }
-</style>

src/stores/index.js

@@ -37,14 +37,6 @@ export const globalStore = defineStore("globalStore", {
     };
   },
   actions: {
-    setBoardWidth() {
-      this.boardWidth = Math.floor(this.canvasWidth / this.cellProperties.size);
-    },
-    setBoardHeight() {
-      this.boardHeight = Math.floor(
-        this.canvasHeight / this.cellProperties.size
-      );
-    },
     toggleDraw1d() {
       this.draw1d = true;
     },