diff --git a/src/components/CanvasBoard.vue b/src/components/CanvasBoard.vue index 1f1338d..a7edc56 100644 --- a/src/components/CanvasBoard.vue +++ b/src/components/CanvasBoard.vue @@ -25,7 +25,6 @@ export default { return { canvas: null, ctx: null, - drawing: 0, }; }, computed: { @@ -37,8 +36,12 @@ export default { refreshRate: "getRefreshRate", initial1dState: "getInitial1dState", drawingDirection: "getDrawingDirection", + canDraw: "getCanDraw", lastBoard: "getLastBoard", - isDrawing1d: "getIsDrawing1d", + getDraw1d: "getDraw1d", + getDraw2d: "getDraw2d", + getDraw2dLast: "getDraw2dLast", + getReset: "getReset", }), boardWidth: function () { return Math.floor(this.canvasWidth / this.cellProperties.size); @@ -48,10 +51,17 @@ export default { }, }, watch: { - isDrawing1d(value) { - if (value == true) { - this.draw1d(); - } + getDraw1d(value) { + if (value == true) this.draw1d(); + }, + getDraw2d(value) { + if (value == true) this.draw2dNew(); + }, + getDraw2dLast(value) { + if (value == true) this.draw2dLast(); + }, + getReset(value) { + if (value == true) this.reset(); }, }, mounted() { @@ -85,7 +95,7 @@ export default { return create1dStateOneCell(this.boardWidth); return create1dState(this.boardWidth, getRandomInt, [0, 2]); }, - async draw1d() { + draw1d() { const initialState = this.compute1dInitialState(); const board = createBoard( initialState, @@ -96,11 +106,10 @@ export default { this.drawCanvas(board); this.$store.dispatch("stop"); }, - async draw2d(board) { - if (this.drawing === 0) return; - + draw2d(board) { + if (!this.canDraw) return; const draw2dNext = async (b) => { - if (this.drawing === 0) return; + if (!this.canDraw) return; const newBoard = evolve2d(b, conwayRules); this.drawCanvas(b, this.cellProperties); await sleep(this.refreshRate); @@ -108,7 +117,7 @@ export default { }; return draw2dNext(board); }, - async draw2dNew() { + draw2dNew() { const initialState = create2dState( this.boardWidth, this.boardHeight, @@ -116,18 +125,16 @@ export default { [0, 2] ); const board = evolve2d(initialState, conwayRules); - this.$store.commit("setLastBoard", board); + this.$store.commit("setLastBoard", Object.freeze(board)); this.draw2d(board); }, async draw2dLast() { this.draw2d(this.lastBoard); }, - stop() { - this.$store.commit("setDrawingStatus", 0); - }, reset() { - this.stop(); + this.$store.dispatch("stop"); this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height); + this.$store.commit("toggleReset", 0); }, }, }; diff --git a/src/components/Menu2dCA.vue b/src/components/Menu2dCA.vue index 97ef740..2d268b1 100644 --- a/src/components/Menu2dCA.vue +++ b/src/components/Menu2dCA.vue @@ -2,7 +2,7 @@
- +
@@ -40,17 +40,16 @@ export default { }, methods: { draw2d() { - this.$root.$store.state.drawing = 1; - this.$root.$emit("draw2dNew"); + this.$store.dispatch("draw2d"); + }, + draw2dLast() { + this.$store.dispatch("draw2dLast"); }, reset() { - this.$root.$emit("reset"); + this.$store.dispatch("reset"); }, stop() { - this.$root.$emit("stop"); - }, - startFromLast() { - this.$root.$emit("draw2dLast"); + this.$store.dispatch("stop"); }, }, }; diff --git a/src/components/MenuElementaryCA.vue b/src/components/MenuElementaryCA.vue index d968453..3d4d30b 100644 --- a/src/components/MenuElementaryCA.vue +++ b/src/components/MenuElementaryCA.vue @@ -69,7 +69,7 @@ name="reset" class="reset" value="reset" - @click="reset()" + @click="reset" />
@@ -227,7 +227,6 @@ export default { this.$store.commit("setInitial1dState", elem.value); }, draw1d() { - /* this.$store.commit("setDrawingStatus", 1); */ this.$store.dispatch("draw1d"); }, reset() { diff --git a/src/store/index.js b/src/store/index.js index 0c9cb5a..129ef94 100644 --- a/src/store/index.js +++ b/src/store/index.js @@ -40,7 +40,11 @@ export const store = createStore({ activeMenu: "", drawingDirection: "y", lastBoard: {}, - isDrawing1d: false, + draw1d: false, + draw2d: false, + draw2dLast: false, + reset: false, + canDraw: true, }, mutations: { update1dSingleRule(state, data) { @@ -80,8 +84,20 @@ export const store = createStore({ setContext(state, data) { state.ctx = data; }, - setIsDrawing1d(state, data) { - state.isDrawing1d = data; + toggleDraw1d(state, data) { + state.draw1d = data; + }, + toggleDraw2d(state, data) { + state.draw2d = data; + }, + toggleDraw2dLast(state, data) { + state.draw2dLast = data; + }, + toggleReset(state, data) { + state.reset = data; + }, + canDraw(state, data) { + state.canDraw = data; }, }, getters: { @@ -92,7 +108,6 @@ export const store = createStore({ return state.rules1d; }, getRule1d(state) { - // getter with side-effect. no work return state.rules1d; }, getCanvasWidth(state) { @@ -116,17 +131,43 @@ export const store = createStore({ getLastBoard(state) { return state.lastBoard; }, - getIsDrawing1d(state) { - return state.isDrawing1d; + getDraw1d(state) { + return state.draw1d; + }, + getDraw2d(state) { + return state.draw2d; + }, + getDraw2dLast(state) { + return state.draw2dLast; + }, + getReset(state) { + return state.reset; + }, + getCanDraw(state) { + return state.canDraw; }, }, actions: { draw1d({ commit }) { - commit("setIsDrawing1d", 1); + commit("toggleDraw1d", true); + }, + draw2d({ commit }) { + commit("canDraw", true); + commit("toggleDraw2d", true); + }, + draw2dLast({ commit }) { + commit("canDraw", true); + commit("toggleDraw2dLast", true); + }, + reset({ dispatch, commit }) { + dispatch("stop"); + commit("toggleReset", true); }, stop({ commit }) { - commit("setIsDrawing1d"); - // commit("setIsDrawing2d") + commit("toggleDraw1d", false); + commit("toggleDraw2d", false); + commit("toggleDraw2dLast", false); + commit("canDraw", false); }, }, modules: {},