i liked a global event bus better
This commit is contained in:
parent
9b39bba6e7
commit
aa66c523a3
@ -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);
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
@ -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");
|
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
@ -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() {
|
||||||
|
@ -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: {},
|
||||||
|
Loading…
Reference in New Issue
Block a user