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