working vue components for 1D automata

This commit is contained in:
2022-01-10 11:13:44 +01:00
parent 890018c0dc
commit 4f26becf9f
7 changed files with 123 additions and 123 deletions

View File

@ -4,79 +4,18 @@
<label>Rules</label>
</div>
<form>
<div class="form-field">
<label>111
<div
v-for="rule in rules"
:key="rule"
class="form-field"
>
<label>{{ rule }}
<input
:value="getRule(rule)"
type="checkbox"
name="111"
checked
@change="update1dRules"
>
</label>
</div>
<div class="form-field">
<label>110
<input
type="checkbox"
name="110"
@click="update1dRules"
>
</label>
</div>
<div class="form-field">
<label>101
<input
type="checkbox"
name="101"
checked
@click="update1dRules"
>
</label>
</div>
<div class="form-field">
<label>100
<input
type="checkbox"
name="100"
@click="update1dRules"
>
</label>
</div>
<div class="form-field">
<label>011
<input
type="checkbox"
name="011"
checked
@click="update1dRules"
>
</label>
</div>
<div class="form-field">
<label>010
<input
type="checkbox"
name="010"
@click="update1dRules"
>
</label>
</div>
<div class="form-field">
<label>001
<input
type="checkbox"
name="001"
@click="update1dRules"
>
</label>
</div>
<div class="form-field">
<label>000
<input
type="checkbox"
name="000"
checked
@click="update1dRules"
:name="rule"
:checked="getRule(rule) == 1"
@input="update1dRules"
>
</label>
</div>
@ -88,17 +27,18 @@
value="start"
@click="draw1d"
>
<input
type="button"
name="stop"
class="stop"
value="stop"
>
<!-- <input -->
<!-- type="button" -->
<!-- name="stop" -->
<!-- class="stop" -->
<!-- value="stop" -->
<!-- > -->
<input
type="button"
name="reset"
class="reset"
value="reset"
@click="reset()"
>
</div>
</MenuRow>
@ -111,18 +51,28 @@ export default {
components: {
MenuRow
},
data() {
return {
rules: ["111", "110", "101", "100", "011", "010", "001", "000"]
}
},
methods: {
update1dRules(event) {
const elem = event.target
const value = elem.value == 'on' ? '1' : '0'
const value = elem.checked ? 1 : 0
const data = { 'rule' : elem.name, 'value' : value}
this.$store.commit('update1dRules', data)
},
draw1d() {
this.$root.$emit('draw1d')
},
mounted() {
}
getRule(id) {
const rules = this.$store.state.rules1d
return rules[id]
},
reset() {
this.$root.$emit('reset')
},
}
}
</script>