78 lines
2.0 KiB
Vue
78 lines
2.0 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">
|
|
<a name="switchColor" @click="switchColor">Switch Colors</a>
|
|
</div>
|
|
<div class="form-field">
|
|
<label>Cell size</label>
|
|
<input
|
|
name="size"
|
|
type="number"
|
|
min="1"
|
|
:value="cellProperties.size"
|
|
@click="updateCellProperties"
|
|
/>
|
|
</div>
|
|
</form>
|
|
</MenuRow>
|
|
</template>
|
|
|
|
<script>
|
|
import { mapActions, mapWritableState } from "pinia";
|
|
import { globalStore } from "../stores/index.js";
|
|
import MenuRow from "./MenuRow.vue";
|
|
export default {
|
|
name: "MenuCellProperties",
|
|
components: {
|
|
MenuRow,
|
|
},
|
|
computed: {
|
|
...mapWritableState(globalStore, ["cellProperties"]),
|
|
},
|
|
methods: {
|
|
...mapActions(globalStore, ["setBoardHeight", "setBoardWidth"]),
|
|
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;
|
|
this.setBoardWidth();
|
|
this.setBoardHeight();
|
|
},
|
|
switchColor() {
|
|
[this.cellProperties["liveColor"], this.cellProperties["deadColor"]] = [
|
|
this.cellProperties["deadColor"],
|
|
this.cellProperties["liveColor"],
|
|
];
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
<style scoped>
|
|
a:hover {
|
|
cursor: pointer;
|
|
}
|
|
</style>
|