diff --git a/src/components/Canvas.vue b/src/components/Canvas.vue index 361c436..1b68572 100644 --- a/src/components/Canvas.vue +++ b/src/components/Canvas.vue @@ -26,7 +26,8 @@ export default { rules: 'getRuleSet1d', drawing: 'isDrawing', canvasWidth: 'getCanvasWidth', - canvasHeight: 'getCanvasHeight' + canvasHeight: 'getCanvasHeight', + refreshRate: 'getRefreshRate' }) }, mounted() { @@ -82,7 +83,7 @@ export default { if (this.drawing === 0) return const newBoard = evolve2d(b, conwayRules) this.drawCanvas(b, this.cellProperties) - await sleep(300) + await sleep(this.refreshRate) draw2dNext(newBoard) } return draw2dNext(board) diff --git a/src/components/MenuGeneralOptions.vue b/src/components/MenuGeneralOptions.vue index f7f76d7..df419ff 100644 --- a/src/components/MenuGeneralOptions.vue +++ b/src/components/MenuGeneralOptions.vue @@ -22,6 +22,20 @@ @input="updateCanvasHeight" > +
+ +
+
+ +
@@ -37,7 +51,8 @@ export default { computed: { ...mapGetters({ canvasWidth: 'getCanvasWidth', - canvasHeight: 'getCanvasHeight' + canvasHeight: 'getCanvasHeight', + refreshRate: 'getRefreshRate' }) }, methods: { @@ -48,6 +63,10 @@ export default { updateCanvasWidth: function(event) { const elem = event.target this.$store.commit('setCanvasWidth', elem.value) + }, + updateRefreshRate: function(event) { + const elem = event.target + this.$store.commit('setRefreshRate', elem.value) } } } diff --git a/src/store/index.js b/src/store/index.js index d3dd52d..ab2b8b6 100644 --- a/src/store/index.js +++ b/src/store/index.js @@ -23,6 +23,7 @@ export default new Vuex.Store({ }, canvasWidth: 1280, canvasHeight: 720, + refreshRate: 300 }, mutations: { update1dRules(state, data) { @@ -39,6 +40,9 @@ export default new Vuex.Store({ }, setCanvasHeight(state, data) { state.canvasHeight = data; + }, + setRefreshRate(state, data) { + state.refreshRate = data; } }, getters: { @@ -59,6 +63,9 @@ export default new Vuex.Store({ }, getCanvasHeight(state) { return state.canvasHeight + }, + getRefreshRate(state) { + return state.refreshRate } }, actions: {