vue 2 to 3 #1
@ -29,7 +29,8 @@ export default {
|
||||
canvasHeight: 'getCanvasHeight',
|
||||
refreshRate: 'getRefreshRate',
|
||||
initial1dState: 'getInitial1dState',
|
||||
drawingDirection: 'getDrawingDirection'
|
||||
drawingDirection: 'getDrawingDirection',
|
||||
lastBoard: 'getLastBoard'
|
||||
}),
|
||||
boardWidth: function() {
|
||||
return Math.floor(
|
||||
@ -46,7 +47,8 @@ export default {
|
||||
this.canvas = this.$refs['canvas']
|
||||
this.ctx = this.canvas.getContext('2d')
|
||||
this.$root.$on('draw1d', () => { this.draw1d() })
|
||||
this.$root.$on('draw2d', () => { this.draw2d() })
|
||||
this.$root.$on('draw2dNew', () => { this.draw2dNew() })
|
||||
this.$root.$on('draw2dLast', () => { this.draw2dLast() })
|
||||
this.$root.$on('reset', () => { this.reset() })
|
||||
this.$root.$on('stop', () => { this.stop() })
|
||||
},
|
||||
@ -83,17 +85,11 @@ export default {
|
||||
this.rules,
|
||||
this.boardWidth
|
||||
)
|
||||
this.$store.commit('setLastBoard', board)
|
||||
this.drawCanvas(board)
|
||||
},
|
||||
async draw2d() {
|
||||
async draw2d(board) {
|
||||
if (this.drawing === 0) return
|
||||
const initialState = create2dState(
|
||||
this.boardWidth,
|
||||
this.boardHeight,
|
||||
getRandomInt,
|
||||
[0, 2],
|
||||
);
|
||||
const board = evolve2d(initialState, conwayRules);
|
||||
|
||||
const draw2dNext = async (b) => {
|
||||
if (this.drawing === 0) return
|
||||
@ -104,6 +100,21 @@ export default {
|
||||
}
|
||||
return draw2dNext(board)
|
||||
},
|
||||
async draw2dNew() {
|
||||
const initialState = create2dState(
|
||||
this.boardWidth,
|
||||
this.boardHeight,
|
||||
getRandomInt,
|
||||
[0, 2],
|
||||
);
|
||||
const board = evolve2d(initialState, conwayRules);
|
||||
this.$store.commit('setLastBoard', board)
|
||||
this.draw2d(board)
|
||||
},
|
||||
async draw2dLast() {
|
||||
console.log(this.lastBoard)
|
||||
this.draw2d(this.lastBoard)
|
||||
},
|
||||
stop() {
|
||||
this.$store.commit('setDrawingStatus', 0)
|
||||
},
|
||||
|
@ -1,5 +1,13 @@
|
||||
<template>
|
||||
<MenuRow row-title="2D Cellular Automata">
|
||||
<div class="form-field">
|
||||
<label>Start from last result</label>
|
||||
<input
|
||||
type="button"
|
||||
value="start"
|
||||
@click="startFromLast"
|
||||
>
|
||||
</div>
|
||||
<div class="form-field">
|
||||
<input
|
||||
type="button"
|
||||
@ -27,15 +35,22 @@
|
||||
|
||||
<script>
|
||||
import MenuRow from './MenuRow.vue'
|
||||
import {mapGetters} from 'vuex'
|
||||
|
||||
export default {
|
||||
name: 'Menu2dCA',
|
||||
components: {
|
||||
MenuRow
|
||||
},
|
||||
computed: {
|
||||
...mapGetters({
|
||||
lastBoard: 'getLastBoard',
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
draw2d() {
|
||||
this.$root.$store.state.drawing = 1
|
||||
this.$root.$emit('draw2d')
|
||||
this.$root.$emit('draw2dNew')
|
||||
},
|
||||
reset() {
|
||||
this.$root.$emit('reset')
|
||||
@ -43,6 +58,9 @@ export default {
|
||||
stop() {
|
||||
this.$root.$emit('stop')
|
||||
},
|
||||
startFromLast() {
|
||||
this.$root.$emit('draw2dLast')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
@ -26,7 +26,8 @@ export default new Vuex.Store({
|
||||
refreshRate: 300,
|
||||
initial1dState: "onecell",
|
||||
activeMenu: "Elementary Cellular Automata",
|
||||
drawingDirection: "y"
|
||||
drawingDirection: "y",
|
||||
lastBoard: {}
|
||||
},
|
||||
mutations: {
|
||||
update1dSingleRule(state, data) {
|
||||
@ -59,6 +60,9 @@ export default new Vuex.Store({
|
||||
setDrawingDirection(state, data) {
|
||||
state.drawingDirection = data
|
||||
},
|
||||
setLastBoard(state, data) {
|
||||
state.lastBoard = data
|
||||
},
|
||||
},
|
||||
getters: {
|
||||
getCellProperties(state) {
|
||||
@ -90,6 +94,9 @@ export default new Vuex.Store({
|
||||
},
|
||||
getDrawingDirection(state) {
|
||||
return state.drawingDirection
|
||||
},
|
||||
getLastBoard(state) {
|
||||
return state.lastBoard
|
||||
}
|
||||
},
|
||||
actions: {
|
||||
|
Loading…
Reference in New Issue
Block a user