From 239be6204e609e82801df726fd08eccdc6ef24ca Mon Sep 17 00:00:00 2001 From: Gator Date: Fri, 2 Dec 2022 15:52:43 +0100 Subject: [PATCH 01/22] rules preset in separate file --- src/components/MenuElementaryCA.vue | 231 +++++++++------------------- src/components/preset.js | 95 ++++++++++++ 2 files changed, 164 insertions(+), 162 deletions(-) create mode 100644 src/components/preset.js diff --git a/src/components/MenuElementaryCA.vue b/src/components/MenuElementaryCA.vue index 3d4d30b..672690f 100644 --- a/src/components/MenuElementaryCA.vue +++ b/src/components/MenuElementaryCA.vue @@ -25,7 +25,7 @@
- +
diff --git a/src/components/MenuRow.vue b/src/components/MenuRow.vue index 1db739a..0a36f31 100644 --- a/src/components/MenuRow.vue +++ b/src/components/MenuRow.vue @@ -10,66 +10,66 @@ diff --git a/src/stores/index.js b/src/stores/index.js index 850c03c..6736eb2 100644 --- a/src/stores/index.js +++ b/src/stores/index.js @@ -38,22 +38,22 @@ export const globalStore = defineStore("globalStore", { } }, actions: { - draw1d() { + toggleDraw1d() { this.draw1d = true; }, - draw2d() { + toggleDraw2d() { this.canDraw = true; this.draw2d = true; }, - draw2dLast() { + toggleDraw2dLast() { this.canDraw = true; this.draw2dLast = true; }, - reset() { - this.stop(); + toggleReset() { + this.toggleStop(); this.reset = true; }, - stop() { + toggleStop() { this.draw1d = false; this.draw2d = false; this.draw2dLast = false; From 0556992c3b7e5c80718cab282ea3d80284340d30 Mon Sep 17 00:00:00 2001 From: Gator Date: Fri, 2 Dec 2022 17:11:01 +0100 Subject: [PATCH 06/22] updated pre-commit config --- .pre-commit-config.yaml | 1 + 1 file changed, 1 insertion(+) diff --git a/.pre-commit-config.yaml b/.pre-commit-config.yaml index c19e3bb..a5c87d0 100644 --- a/.pre-commit-config.yaml +++ b/.pre-commit-config.yaml @@ -1,3 +1,4 @@ +repos: - repo: https://github.com/pre-commit/mirrors-eslint rev: 'v8.28.0' hooks: From d7c2d451803b8c9678ccd28207b84df20b3f7686 Mon Sep 17 00:00:00 2001 From: Gator Date: Fri, 2 Dec 2022 17:11:34 +0100 Subject: [PATCH 07/22] linting and formating --- .pre-commit-config.yaml | 12 ++++----- src/components/CanvasBoard.vue | 19 +++++++------- src/components/Menu2dCA.vue | 14 ++++++++-- src/components/MenuCellProperties.vue | 4 +-- src/components/MenuElementaryCA.vue | 38 +++++++++++++-------------- src/components/MenuGeneralOptions.vue | 23 +++++++--------- src/components/MenuRow.vue | 10 +++---- src/components/preset.js | 6 ++--- src/stores/index.js | 2 +- 9 files changed, 66 insertions(+), 62 deletions(-) diff --git a/.pre-commit-config.yaml b/.pre-commit-config.yaml index a5c87d0..8b797b3 100644 --- a/.pre-commit-config.yaml +++ b/.pre-commit-config.yaml @@ -1,9 +1,9 @@ repos: -- repo: https://github.com/pre-commit/mirrors-eslint - rev: 'v8.28.0' + - repo: https://github.com/pre-commit/mirrors-eslint + rev: "v8.28.0" hooks: - - id: eslint -- repo: https://github.com/pre-commit/mirrors-prettier - rev: 'v2.7.1' + - id: eslint + - repo: https://github.com/pre-commit/mirrors-prettier + rev: "v2.7.1" hooks: - - id: prettier + - id: prettier diff --git a/src/components/CanvasBoard.vue b/src/components/CanvasBoard.vue index 28bca70..21cb38e 100644 --- a/src/components/CanvasBoard.vue +++ b/src/components/CanvasBoard.vue @@ -9,7 +9,7 @@ diff --git a/src/components/MenuCellProperties.vue b/src/components/MenuCellProperties.vue index 3684795..49b07f9 100644 --- a/src/components/MenuCellProperties.vue +++ b/src/components/MenuCellProperties.vue @@ -34,7 +34,7 @@ diff --git a/src/components/MenuGeneralOptions.vue b/src/components/MenuGeneralOptions.vue index 31099f0..f12b8f2 100644 --- a/src/components/MenuGeneralOptions.vue +++ b/src/components/MenuGeneralOptions.vue @@ -56,7 +56,7 @@ - diff --git a/src/components/CanvasBoard.vue b/src/components/CanvasBoard.vue index 21cb38e..9058621 100644 --- a/src/components/CanvasBoard.vue +++ b/src/components/CanvasBoard.vue @@ -1,12 +1,10 @@ diff --git a/src/components/MainMenu.vue b/src/components/MainMenu.vue index 4da6c79..a1c3488 100644 --- a/src/components/MainMenu.vue +++ b/src/components/MainMenu.vue @@ -1,5 +1,5 @@ diff --git a/src/components/MenuElementaryCA.vue b/src/components/MenuElementaryCA.vue index aeb7f08..58971ed 100644 --- a/src/components/MenuElementaryCA.vue +++ b/src/components/MenuElementaryCA.vue @@ -64,13 +64,6 @@
-
@@ -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 19/22] 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 20/22] 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 @@