129 lines
2.6 KiB
Vue
129 lines
2.6 KiB
Vue
<template>
|
|
<MenuRow row-title="Elementary Cellular Automata">
|
|
<div class="form-field">
|
|
<label>Rules</label>
|
|
</div>
|
|
<form>
|
|
<div class="form-field">
|
|
<label>111
|
|
<input
|
|
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"
|
|
>
|
|
</label>
|
|
</div>
|
|
</form>
|
|
<div class="form-field">
|
|
<input
|
|
type="button"
|
|
name="start"
|
|
value="start"
|
|
@click="draw1d"
|
|
>
|
|
<input
|
|
type="button"
|
|
name="stop"
|
|
class="stop"
|
|
value="stop"
|
|
>
|
|
<input
|
|
type="button"
|
|
name="reset"
|
|
class="reset"
|
|
value="reset"
|
|
>
|
|
</div>
|
|
</MenuRow>
|
|
</template>
|
|
|
|
<script>
|
|
import MenuRow from './MenuRow.vue'
|
|
export default {
|
|
name: 'MenuElementaryCA',
|
|
components: {
|
|
MenuRow
|
|
},
|
|
methods: {
|
|
update1dRules(event) {
|
|
const elem = event.target
|
|
const value = elem.value == 'on' ? '1' : '0'
|
|
const data = { 'rule' : elem.name, 'value' : value}
|
|
this.$store.commit('update1dRules', data)
|
|
},
|
|
draw1d() {
|
|
this.$root.$emit('draw1d')
|
|
},
|
|
mounted() {
|
|
}
|
|
}
|
|
}
|
|
</script>
|