working vue components for 1D automata
This commit is contained in:
@ -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>
|
||||
|
||||
Reference in New Issue
Block a user