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 78 additions and 27 deletions
Showing only changes of commit 441238bfbc - Show all commits

View File

@ -23,7 +23,7 @@ export default {
computed: {
...mapGetters({
cellProperties: 'getCellProperties',
rules: 'getRuleSet1d',
rules: 'get1dRules',
drawing: 'isDrawing',
canvasWidth: 'getCanvasWidth',
canvasHeight: 'getCanvasHeight',

View File

@ -11,7 +11,7 @@
>
<option
v-for="state in initial1dStates"
:key="state.id"
:key="'preset1d' + state.id"
:value="state.id"
>{{ state.name }}
</option>
@ -21,18 +21,41 @@
<div class="form-field">
<label>Rules</label>
</div>
<div class="form-field">
<label>Rules presets
<br>
<select
name="rules1d"
value="rules"
@input="update1dRules"
>
<option
v-for="(rule, name) in presetRules"
:key="'rule1d' + name"
:value="name"
>{{ name }}
</option>
</select>
</label>
</div>
<div class="form-field">
<a
style="cursor: pointer;"
@click="copy1dRules"
>copy rules</a>
</div>
<div
v-for="rule in rules"
:key="rule"
v-for="(rule, name) in rules"
:key="'rule1d' + name"
class="form-field"
>
<label>{{ rule }}
<label>{{ name }}
<input
:value="getRule(rule)"
:value="rule"
type="checkbox"
:name="rule"
:checked="getRule(rule) == 1"
@input="update1dRules"
:name="name"
:checked="rule"
@input="update1dSingleRule"
>
</label>
</div>
@ -44,12 +67,6 @@
value="start"
@click="draw1d"
>
<!-- <input -->
<!-- type="button" -->
<!-- name="stop" -->
<!-- class="stop" -->
<!-- value="stop" -->
<!-- > -->
<input
type="button"
name="reset"
@ -72,7 +89,13 @@ export default {
data() {
// TODO: Why not a getter in the store?
return {
rules: ["111", "110", "101", "100", "011", "010", "001", "000"],
presetRules: {
"rule 73" : {"100":0,"101":0,"110":1,"111":0,"011":1,"010":0,"001":0,"000":1},
"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}
},
initial1dStates: [
{ id : "onecell",
name : "One cell at center",
@ -88,20 +111,41 @@ export default {
},
computed: {
...mapGetters({
initial1dState: 'getInitial1dState'
})
initial1dState: 'getInitial1dState',
rules: 'get1dRules'
}),
rules1dFileName() {
return Object.keys(this.rules).map(
(index) => {
return this.rules[index]
}).join("_") + ".json"
},
},
methods: {
copy1dRules(){
const rules = JSON.stringify(this.rules)
navigator.clipboard.writeText(rules)
},
isCurrentPreset(event) {
console.log(elem.value)
const elem = event.target
return this.initialState === elem.value
},
update1dRules(event) {
update1dSingleRule(event) {
const elem = event.target
const value = elem.checked ? 1 : 0
const data = { 'rule' : elem.name, 'value' : value}
this.$store.commit('update1dRules', data)
this.$store.commit('update1dSingleRule', data)
},
update1dRules(event) {
const elem = event.target
const name = elem.value
const rules = this.presetRules[name]
console.log(rules)
Object.keys(rules).map((index) => {
const data = { 'rule' : index, 'value' : rules[index]}
console.log(rules[index])
this.$store.commit('update1dSingleRule', data)
})
},
updateInitial1dState(event) {
const elem = event.target
@ -111,13 +155,17 @@ export default {
this.$root.$store.state.drawing = 1
this.$root.$emit('draw1d')
},
getRule(id) {
const rules = this.$store.state.rules1d
return rules[id]
},
reset() {
this.$root.$emit('reset')
},
}
}
</script>
<style>
.menu-row a {
color: white;
font-weight: bold;
text-decoration: none;
font-size: small;
}
</style>

View File

@ -27,9 +27,12 @@ export default new Vuex.Store({
initial1dState: "onecell"
},
mutations: {
update1dRules(state, data) {
update1dSingleRule(state, data) {
state.rules1d[data.rule] = data.value
},
update1dRules(state, data) {
state.rules1d = data
},
setCellProperties(state, data) {
state.cellProperties[data.name] = data.value
},
@ -53,7 +56,7 @@ export default new Vuex.Store({
getCellProperties(state) {
return state.cellProperties
},
getRuleSet1d(state) {
get1dRules(state) {
return state.rules1d
},
getRule1d(state) {