explorata/src/components/MenuCellProperties.vue

61 lines
1.5 KiB
Vue
Raw Normal View History

<template>
<MenuRow row-title="Cell Properties">
<form>
<div class="form-field">
<label for="live">Living cell color</label>
<input
2022-01-10 11:13:44 +01:00
name="liveColor"
type="color"
2022-01-10 11:13:44 +01:00
@value="cellProperties.liveColor"
@input="updateCellProperties"
/>
</div>
<div class="form-field">
<label for="dead">Dead cell color</label>
<input
2022-01-10 11:13:44 +01:00
name="deadColor"
type="color"
2022-01-10 11:13:44 +01:00
:value="cellProperties.deadColor"
@input="updateCellProperties"
/>
</div>
<div class="form-field">
<label>Cell size</label>
<input
2022-01-10 11:13:44 +01:00
name="size"
type="number"
2022-01-10 21:01:39 +01:00
min="1"
2022-01-10 11:13:44 +01:00
:value="cellProperties.size"
@input="updateCellProperties"
/>
</div>
</form>
</MenuRow>
</template>
<script>
2022-12-02 17:11:34 +01:00
import { mapWritableState } from "pinia";
2022-12-02 17:10:21 +01:00
import { globalStore } from "../stores/index.js";
import MenuRow from "./MenuRow.vue";
export default {
name: "MainMenu",
components: {
MenuRow,
2022-01-10 11:13:44 +01:00
},
2022-12-02 17:10:21 +01:00
computed: {
2022-12-02 17:11:34 +01:00
...mapWritableState(globalStore, ["cellProperties"]),
},
2022-12-02 17:10:21 +01:00
methods: {
getCellProperties(event) {
const elem = event.target;
const prop = this.cellProperties;
return prop[elem.name];
},
updateCellProperties(event) {
const elem = event.target;
this.cellProperties[elem.name] = elem.value;
},
},
};
</script>