vue 2 to 3 #1
@ -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)
|
||||
|
@ -22,6 +22,20 @@
|
||||
@input="updateCanvasHeight"
|
||||
>
|
||||
</div>
|
||||
<div class="form-field">
|
||||
<label for="live">Refresh Rate (ms)</label>
|
||||
</div>
|
||||
<div class="form-field">
|
||||
<input
|
||||
id="refreshRate"
|
||||
name="refreshRate"
|
||||
type="number"
|
||||
min="100"
|
||||
step="100"
|
||||
:value="refreshRate"
|
||||
@input="updateRefreshRate"
|
||||
>
|
||||
</div>
|
||||
</form>
|
||||
</MenuRow>
|
||||
</template>
|
||||
@ -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)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -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: {
|
||||
|
Loading…
Reference in New Issue
Block a user