From 695dab59eef823dab7ee5cb5cea9ddd8ff3df40f Mon Sep 17 00:00:00 2001 From: Gator Date: Sun, 4 Dec 2022 15:36:39 +0100 Subject: [PATCH 1/9] burger menu for mobile (media queries + resize) --- src/App.vue | 62 +++++++++++++++++++++++++++++++--- src/components/CanvasBoard.vue | 19 +++++------ src/components/MainMenu.vue | 32 ++++++------------ src/components/MenuRow.vue | 23 ++++++++++++- 4 files changed, 100 insertions(+), 36 deletions(-) diff --git a/src/App.vue b/src/App.vue index ceba7c4..1d78e37 100644 --- a/src/App.vue +++ b/src/App.vue @@ -1,8 +1,13 @@ @@ -108,7 +101,7 @@ }, }, methods: { - ...mapActions(globalStore, ["toggleDraw1d", "toggleReset"]), + ...mapActions(globalStore, ["toggleDraw1d"]), copyRules() { const rules = JSON.stringify(this.rules); navigator.clipboard.writeText(rules); diff --git a/src/components/MenuReset.vue b/src/components/MenuReset.vue new file mode 100644 index 0000000..c43e8ce --- /dev/null +++ b/src/components/MenuReset.vue @@ -0,0 +1,36 @@ + + + From 5c21fb2ac378bb6bf10afc53eedc5f34a8e6b656 Mon Sep 17 00:00:00 2001 From: Gator Date: Sun, 4 Dec 2022 18:14:57 +0100 Subject: [PATCH 6/9] 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(); + }); + }, + }, }; @@ -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 @@ 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; }, From cb3ddadfdf39d9492472d9775ab52ac53ae66422 Mon Sep 17 00:00:00 2001 From: Gator Date: Sun, 4 Dec 2022 18:17:14 +0100 Subject: [PATCH 7/9] ruleset presets typo --- src/components/MenuElementaryCA.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/MenuElementaryCA.vue b/src/components/MenuElementaryCA.vue index 58971ed..17db072 100644 --- a/src/components/MenuElementaryCA.vue +++ b/src/components/MenuElementaryCA.vue @@ -29,7 +29,7 @@