vue 2 to 3 #1
@ -28,7 +28,8 @@ export default {
|
||||
canvasWidth: 'getCanvasWidth',
|
||||
canvasHeight: 'getCanvasHeight',
|
||||
refreshRate: 'getRefreshRate',
|
||||
initial1dState: 'getInitial1dState'
|
||||
initial1dState: 'getInitial1dState',
|
||||
drawingDirection: 'getDrawingDirection'
|
||||
}),
|
||||
boardWidth: function() {
|
||||
return Math.floor(
|
||||
@ -61,7 +62,10 @@ export default {
|
||||
if (cell === 1) return props.liveColor
|
||||
return props.deadColor
|
||||
})()
|
||||
this.ctx.fillRect(x * d, y * d, d, d)
|
||||
if (this.drawingDirection === "x")
|
||||
this.ctx.fillRect(y * d, x * d, d, d)
|
||||
else
|
||||
this.ctx.fillRect(x * d, y * d, d, d)
|
||||
return cell
|
||||
},
|
||||
)
|
||||
@ -77,7 +81,7 @@ export default {
|
||||
const board = createBoard(
|
||||
initialState,
|
||||
this.rules,
|
||||
this.boardHeight
|
||||
this.boardWidth
|
||||
)
|
||||
this.drawCanvas(board)
|
||||
},
|
||||
|
@ -94,7 +94,8 @@ export default {
|
||||
"rule 86" : {"100":1,"101":0,"110":0,"111":1,"011":0,"010":1,"001":0,"000":1},
|
||||
"rule 90" : {"100":1,"101":0,"110":1,"111":0,"011":0,"010":0,"001":1,"000":0},
|
||||
"rule 45?" : {"100":0,"101":0,"110":1,"111":0,"011":1,"010":0,"001":1,"000":1},
|
||||
"rule 54?" : {"100":1,"101":0,"110":1,"111":1,"011":0,"010":1,"001":1,"000":0}
|
||||
"rule 54?" : {"100":1,"101":0,"110":1,"111":1,"011":0,"010":1,"001":1,"000":0},
|
||||
"unknown rule" : {"100":0,"101":0,"110":0,"111":1,"011":0,"010":0,"001":1,"000":1}
|
||||
},
|
||||
initial1dStates: [
|
||||
{ id : "onecell",
|
||||
|
@ -40,6 +40,16 @@
|
||||
@input="updateRefreshRate"
|
||||
>
|
||||
</div>
|
||||
<div class="form-field">
|
||||
<label>Invert Drawing Direction
|
||||
<input
|
||||
type="checkbox"
|
||||
:checked="drawingDirection === 'x'"
|
||||
:value="drawingDirection"
|
||||
@input="updateDrawingDirection"
|
||||
>
|
||||
</label>
|
||||
</div>
|
||||
</form>
|
||||
</MenuRow>
|
||||
</template>
|
||||
@ -56,7 +66,8 @@ export default {
|
||||
...mapGetters({
|
||||
canvasWidth: 'getCanvasWidth',
|
||||
canvasHeight: 'getCanvasHeight',
|
||||
refreshRate: 'getRefreshRate'
|
||||
refreshRate: 'getRefreshRate',
|
||||
drawingDirection: 'getDrawingDirection'
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
@ -71,6 +82,12 @@ export default {
|
||||
updateRefreshRate: function(event) {
|
||||
const elem = event.target
|
||||
this.$store.commit('setRefreshRate', elem.value)
|
||||
},
|
||||
updateDrawingDirection: function(event) {
|
||||
const elem = event.target
|
||||
const value = elem.checked ? "x" : "y"
|
||||
this.$store.commit('setDrawingDirection', value)
|
||||
console.log(this.drawingDirection)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -25,7 +25,8 @@ export default new Vuex.Store({
|
||||
canvasHeight: 720,
|
||||
refreshRate: 300,
|
||||
initial1dState: "onecell",
|
||||
activeMenu: "Elementary Cellular Automata"
|
||||
activeMenu: "Elementary Cellular Automata",
|
||||
drawingDirection: "y"
|
||||
},
|
||||
mutations: {
|
||||
update1dSingleRule(state, data) {
|
||||
@ -41,13 +42,13 @@ export default new Vuex.Store({
|
||||
state.drawing = data
|
||||
},
|
||||
setCanvasWidth(state, data) {
|
||||
state.canvasWidth = data;
|
||||
state.canvasWidth = data
|
||||
},
|
||||
setCanvasHeight(state, data) {
|
||||
state.canvasHeight = data;
|
||||
state.canvasHeight = data
|
||||
},
|
||||
setRefreshRate(state, data) {
|
||||
state.refreshRate = data;
|
||||
state.refreshRate = data
|
||||
},
|
||||
setInitial1dState(state, data) {
|
||||
state.initial1dState = data
|
||||
@ -55,6 +56,9 @@ export default new Vuex.Store({
|
||||
setActiveMenu(state, data) {
|
||||
state.activeMenu = data
|
||||
},
|
||||
setDrawingDirection(state, data) {
|
||||
state.drawingDirection = data
|
||||
},
|
||||
},
|
||||
getters: {
|
||||
getCellProperties(state) {
|
||||
@ -83,6 +87,9 @@ export default new Vuex.Store({
|
||||
},
|
||||
getActiveMenu(state) {
|
||||
return state.activeMenu
|
||||
},
|
||||
getDrawingDirection(state) {
|
||||
return state.drawingDirection
|
||||
}
|
||||
},
|
||||
actions: {
|
||||
|
Loading…
Reference in New Issue
Block a user