vue 2 to 3 #1

Merged
gator merged 25 commits from dev into master 2022-12-02 11:23:43 +01:00
4 changed files with 38 additions and 9 deletions
Showing only changes of commit 980cdc35a2 - Show all commits

View File

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

View File

@ -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",

View File

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

View File

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