explorata/src/components/MenuCellProperties.vue
2022-01-10 21:01:39 +01:00

63 lines
1.4 KiB
Vue

<template>
<MenuRow row-title="Cell Properties">
<form>
<div class="form-field">
<label for="live">Living cell color</label>
<input
name="liveColor"
type="color"
@value="cellProperties.liveColor"
@input="updateCellProperties"
>
</div>
<div class="form-field">
<label for="dead">Dead cell color</label>
<input
name="deadColor"
type="color"
:value="cellProperties.deadColor"
@input="updateCellProperties"
>
</div>
<div class="form-field">
<label>Cell size</label>
<input
name="size"
type="number"
min="1"
:value="cellProperties.size"
@input="updateCellProperties"
>
</div>
</form>
</MenuRow>
</template>
<script>
import MenuRow from './MenuRow.vue'
export default {
name: 'MainMenu',
components: {
MenuRow
},
data() {
return {
cellProperties: this.$store.state.cellProperties
}
},
methods: {
getCellProperties(event) {
const elem = event.target
const prop = this.$store.state.cellProperties
return prop[elem.name]
},
updateCellProperties(event) {
const elem = event.target
const prop = {'name' : elem.name, 'value' : elem.value}
//console.log(prop)
this.$store.commit('setCellProperties', prop)
}
},
}
</script>