explorata/src/components/MenuElementaryCA.vue

<template>
  <MenuRow row-title="Elementary Automaton">
    <form>
      <div class="form-field">
        <label>
          Initial state presets
          <br />
          <select
            name="initialStates"
            :value="initialState"
            @input="updateInitialState"
          >
            <option
              v-for="(state, index) in initialStates"
              :key="'initial-state-elementary' + index"
              :value="state.id"
            >
              {{ state.name }}
            </option>
          </select>
        </label>
      </div>
      <div class="form-field">
        <label>Rules</label>
      </div>
      <div class="form-field">
        <label
          >Rules presets
          <br />
          <select
            name="ruleset-elementary"
            :value="ruleset.name"
            @input="updateRuleset"
          >
            <option
              v-for="(ruleset, index) in presetRuleset"
              :key="'ruleset-preset-elementary-' + index"
              :value="ruleset.name"
            >
              {{ ruleset.name }}
            </option>
          </select>
        </label>
      </div>
      <div class="form-field">
        <a style="cursor: pointer" @click="copyRuleset">copy rules</a>
      </div>
      <div
        v-for="(rule, name, index) in ruleset.rules"
        :key="'rule-' + index"
        class="form-field"
      >
        <label
          >{{ name }}
          <input
            :value="rule"
            type="checkbox"
            :name="name"
            :checked="rule"
            @input="updateSingleRule"
          />
        </label>
      </div>
    </form>
    <div class="form-field">
      <input type="button" name="start" value="start" @click="toggleDraw1d()" />
    </div>
  </MenuRow>
</template>

<script>
  import { mapActions, mapWritableState } from "pinia";
  import { presetRuleset, initialStates } from "../modules/preset.js";
  import { globalStore } from "../stores/index.js";
  import MenuRow from "./MenuRow.vue";
  export default {
    name: "MenuElementaryCA",
    components: {
      MenuRow,
    },
    data() {
      return {
        presetRuleset: presetRuleset,
        initialStates: initialStates,
      };
    },
    computed: {
      ...mapWritableState(globalStore, {
        initialState: "initial1dState",
        ruleset: "ruleset1d",
      }),
      rules1dFileName() {
        // TODO: broken
        return (
          Object.keys(this.ruleset)
            .map((index) => {
              return this.ruleset[index];
            })
            .join("_") + ".json"
        );
      },
    },
    methods: {
      ...mapActions(globalStore, ["toggleDraw1d"]),
      copyRuleset() {
        const newRuleset = JSON.stringify(this.ruleset);
        navigator.clipboard.writeText(newRuleset);
      },
      isCurrentPreset(event) {
        const elem = event.target;
        return this.initialState === elem.value;
      },
      updateSingleRule(event) {
        const elem = event.target;
        const value = elem.checked ? 1 : 0;
        this.ruleset.rules[elem.name] = value;
      },
      updateRuleset(event) {
        const elem = event.target;
        const name = elem.value;
        const newRuleset = this.presetRuleset.find((ruleset) => {
          return ruleset.name === name;
        });
        this.ruleset = newRuleset;
      },
      updateInitialState(event) {
        const elem = event.target;
        this.initialState = elem.value;
      },
    },
  };
</script>
<style>
  .menu-row a {
    color: white;
    font-weight: bold;
    text-decoration: none;
    font-size: small;
  }
</style>