vue 2 to 3 #1

Merged
gator merged 25 commits from dev into master 2022-12-02 11:23:43 +01:00
3 changed files with 30 additions and 3 deletions
Showing only changes of commit 6f1e813316 - Show all commits

View File

@ -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)

View File

@ -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)
}
}
}

View File

@ -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: {