From 5c21fb2ac378bb6bf10afc53eedc5f34a8e6b656 Mon Sep 17 00:00:00 2001
From: Gator <gator@ariona.fr>
Date: Sun, 4 Dec 2022 18:14:57 +0100
Subject: [PATCH] update board dimensions after window resize

---
 src/App.vue                    | 34 +++++++++++++++++++++++++---------
 src/components/CanvasBoard.vue | 16 +++++++++-------
 src/components/MenuReset.vue   |  2 +-
 src/stores/index.js            |  8 ++++++++
 4 files changed, 43 insertions(+), 17 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 8a6ebf3..b86443a 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -18,6 +18,8 @@
   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",
@@ -32,22 +34,35 @@
         windowWidth: window.innerWidth,
       };
     },
-    methods: {
-      toggleMainMenu() {
-        this.mainMenu = !this.mainMenu;
-      },
-      onResize() {
-        this.windowWidth = window.innerWidth;
-      },
+    computed: {
+      ...mapWritableState(globalStore, {
+        canvasWidth: "canvasWidth",
+        canvasHeight: "canvasHeight",
+      }),
     },
     mounted() {
       this.$nextTick(() => {
         window.addEventListener("resize", this.onResize);
       });
     },
-    beforeDestroy() {
+    beforeUnmount() {
       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>
 
@@ -121,8 +136,9 @@
     h1 {
       font-size: medium;
       display: flex;
-      justify-content: space-around;
       align-items: center;
+      justify-content: space-between;
+      padding: 0 10px;
     }
 
     #burger-toggle {
diff --git a/src/components/CanvasBoard.vue b/src/components/CanvasBoard.vue
index 9058621..084ada8 100644
--- a/src/components/CanvasBoard.vue
+++ b/src/components/CanvasBoard.vue
@@ -38,6 +38,8 @@
         getDraw1d: "draw1d",
         getDraw2d: "draw2d",
         getDraw2dLast: "draw2dLast",
+        boardWidth: "boardWidth",
+        boardHeight: "boardHeight",
       }),
       ...mapWritableState(globalStore, {
         lastBoard: "lastBoard",
@@ -45,12 +47,6 @@
         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) {
@@ -71,9 +67,15 @@
       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"]),
+      ...mapActions(globalStore, [
+        "toggleStop",
+        "setBoardWidth",
+        "setBoardHeight",
+      ]),
       drawCanvas(board) {
         const props = this.cellProperties;
         board.map((row, y) => {
diff --git a/src/components/MenuReset.vue b/src/components/MenuReset.vue
index c43e8ce..ad90d12 100644
--- a/src/components/MenuReset.vue
+++ b/src/components/MenuReset.vue
@@ -30,7 +30,7 @@
 <style scoped>
   .form-field {
     display: flex;
-    margin: 0;
+    margin: 5px;
     justify-content: flex-end;
   }
 </style>
diff --git a/src/stores/index.js b/src/stores/index.js
index 2bb78ff..1257b45 100644
--- a/src/stores/index.js
+++ b/src/stores/index.js
@@ -37,6 +37,14 @@ 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;
     },