i liked a global event bus better

This commit is contained in:
Ali Gator 2022-12-01 23:58:04 +01:00
parent 9b39bba6e7
commit aa66c523a3
4 changed files with 82 additions and 36 deletions

View File

@ -25,7 +25,6 @@ export default {
return { return {
canvas: null, canvas: null,
ctx: null, ctx: null,
drawing: 0,
}; };
}, },
computed: { computed: {
@ -37,8 +36,12 @@ export default {
refreshRate: "getRefreshRate", refreshRate: "getRefreshRate",
initial1dState: "getInitial1dState", initial1dState: "getInitial1dState",
drawingDirection: "getDrawingDirection", drawingDirection: "getDrawingDirection",
canDraw: "getCanDraw",
lastBoard: "getLastBoard", lastBoard: "getLastBoard",
isDrawing1d: "getIsDrawing1d", getDraw1d: "getDraw1d",
getDraw2d: "getDraw2d",
getDraw2dLast: "getDraw2dLast",
getReset: "getReset",
}), }),
boardWidth: function () { boardWidth: function () {
return Math.floor(this.canvasWidth / this.cellProperties.size); return Math.floor(this.canvasWidth / this.cellProperties.size);
@ -48,10 +51,17 @@ export default {
}, },
}, },
watch: { watch: {
isDrawing1d(value) { getDraw1d(value) {
if (value == true) { if (value == true) this.draw1d();
this.draw1d(); },
} getDraw2d(value) {
if (value == true) this.draw2dNew();
},
getDraw2dLast(value) {
if (value == true) this.draw2dLast();
},
getReset(value) {
if (value == true) this.reset();
}, },
}, },
mounted() { mounted() {
@ -85,7 +95,7 @@ export default {
return create1dStateOneCell(this.boardWidth); return create1dStateOneCell(this.boardWidth);
return create1dState(this.boardWidth, getRandomInt, [0, 2]); return create1dState(this.boardWidth, getRandomInt, [0, 2]);
}, },
async draw1d() { draw1d() {
const initialState = this.compute1dInitialState(); const initialState = this.compute1dInitialState();
const board = createBoard( const board = createBoard(
initialState, initialState,
@ -96,11 +106,10 @@ export default {
this.drawCanvas(board); this.drawCanvas(board);
this.$store.dispatch("stop"); this.$store.dispatch("stop");
}, },
async draw2d(board) { draw2d(board) {
if (this.drawing === 0) return; if (!this.canDraw) return;
const draw2dNext = async (b) => { const draw2dNext = async (b) => {
if (this.drawing === 0) return; if (!this.canDraw) return;
const newBoard = evolve2d(b, conwayRules); const newBoard = evolve2d(b, conwayRules);
this.drawCanvas(b, this.cellProperties); this.drawCanvas(b, this.cellProperties);
await sleep(this.refreshRate); await sleep(this.refreshRate);
@ -108,7 +117,7 @@ export default {
}; };
return draw2dNext(board); return draw2dNext(board);
}, },
async draw2dNew() { draw2dNew() {
const initialState = create2dState( const initialState = create2dState(
this.boardWidth, this.boardWidth,
this.boardHeight, this.boardHeight,
@ -116,18 +125,16 @@ export default {
[0, 2] [0, 2]
); );
const board = evolve2d(initialState, conwayRules); const board = evolve2d(initialState, conwayRules);
this.$store.commit("setLastBoard", board); this.$store.commit("setLastBoard", Object.freeze(board));
this.draw2d(board); this.draw2d(board);
}, },
async draw2dLast() { async draw2dLast() {
this.draw2d(this.lastBoard); this.draw2d(this.lastBoard);
}, },
stop() {
this.$store.commit("setDrawingStatus", 0);
},
reset() { reset() {
this.stop(); this.$store.dispatch("stop");
this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height); this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
this.$store.commit("toggleReset", 0);
}, },
}, },
}; };

View File

@ -2,7 +2,7 @@
<MenuRow row-title="2D Cellular Automata"> <MenuRow row-title="2D Cellular Automata">
<div class="form-field"> <div class="form-field">
<label>Start from last result</label> <label>Start from last result</label>
<input type="button" value="start" @click="startFromLast" /> <input type="button" value="start" @click="draw2dLast" />
</div> </div>
<div class="form-field"> <div class="form-field">
<input type="button" name="start2d" value="start" @click="draw2d" /> <input type="button" name="start2d" value="start" @click="draw2d" />
@ -40,17 +40,16 @@ export default {
}, },
methods: { methods: {
draw2d() { draw2d() {
this.$root.$store.state.drawing = 1; this.$store.dispatch("draw2d");
this.$root.$emit("draw2dNew"); },
draw2dLast() {
this.$store.dispatch("draw2dLast");
}, },
reset() { reset() {
this.$root.$emit("reset"); this.$store.dispatch("reset");
}, },
stop() { stop() {
this.$root.$emit("stop"); this.$store.dispatch("stop");
},
startFromLast() {
this.$root.$emit("draw2dLast");
}, },
}, },
}; };

View File

@ -69,7 +69,7 @@
name="reset" name="reset"
class="reset" class="reset"
value="reset" value="reset"
@click="reset()" @click="reset"
/> />
</div> </div>
</MenuRow> </MenuRow>
@ -227,7 +227,6 @@ export default {
this.$store.commit("setInitial1dState", elem.value); this.$store.commit("setInitial1dState", elem.value);
}, },
draw1d() { draw1d() {
/* this.$store.commit("setDrawingStatus", 1); */
this.$store.dispatch("draw1d"); this.$store.dispatch("draw1d");
}, },
reset() { reset() {

View File

@ -40,7 +40,11 @@ export const store = createStore({
activeMenu: "", activeMenu: "",
drawingDirection: "y", drawingDirection: "y",
lastBoard: {}, lastBoard: {},
isDrawing1d: false, draw1d: false,
draw2d: false,
draw2dLast: false,
reset: false,
canDraw: true,
}, },
mutations: { mutations: {
update1dSingleRule(state, data) { update1dSingleRule(state, data) {
@ -80,8 +84,20 @@ export const store = createStore({
setContext(state, data) { setContext(state, data) {
state.ctx = data; state.ctx = data;
}, },
setIsDrawing1d(state, data) { toggleDraw1d(state, data) {
state.isDrawing1d = 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: { getters: {
@ -92,7 +108,6 @@ export const store = createStore({
return state.rules1d; return state.rules1d;
}, },
getRule1d(state) { getRule1d(state) {
// getter with side-effect. no work
return state.rules1d; return state.rules1d;
}, },
getCanvasWidth(state) { getCanvasWidth(state) {
@ -116,17 +131,43 @@ export const store = createStore({
getLastBoard(state) { getLastBoard(state) {
return state.lastBoard; return state.lastBoard;
}, },
getIsDrawing1d(state) { getDraw1d(state) {
return state.isDrawing1d; return state.draw1d;
},
getDraw2d(state) {
return state.draw2d;
},
getDraw2dLast(state) {
return state.draw2dLast;
},
getReset(state) {
return state.reset;
},
getCanDraw(state) {
return state.canDraw;
}, },
}, },
actions: { actions: {
draw1d({ commit }) { 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 }) { stop({ commit }) {
commit("setIsDrawing1d"); commit("toggleDraw1d", false);
// commit("setIsDrawing2d") commit("toggleDraw2d", false);
commit("toggleDraw2dLast", false);
commit("canDraw", false);
}, },
}, },
modules: {}, modules: {},