explorata/src/components/MenuCellProperties.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 { mapWritableState } from 'pinia'
  import { globalStore } from "../stores/index.js";
  import MenuRow from "./MenuRow.vue";
  export default {
    name: "MainMenu",
    components: {
      MenuRow,
    },
    computed: {
      ...mapWritableState(globalStore, ["cellProperties"])
    },
    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>