explorata/src/components/MenuElementaryCA.vue

<template>
  <MenuRow row-title="Elementary Cellular Automata">
    <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="rules.name"
            @input="updateRules"
          >
            <option
              v-for="(ruleset, index) in presetRules"
              :key="'ruleset-preset-elementary-' + index"
              :value="ruleset.name"
            >
              {{ ruleset.name }}
            </option>
          </select>
        </label>
      </div>
      <div class="form-field">
        <a style="cursor: pointer" @click="copyRules">copy rules</a>
      </div>
      <div
        v-for="(rule, name, index) in rules.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="draw1d" />
      <input
        type="button"
        name="reset"
        class="reset"
        value="reset"
        @click="reset()"
      />
    </div>
  </MenuRow>
</template>

<script>
import { mapGetters } from "vuex";
import MenuRow from "./MenuRow.vue";
export default {
  name: "MenuElementaryCA",
  components: {
    MenuRow,
  },
  data() {
    // TODO: Why not a getter in the store?
    return {
      presetRules: [
        {
          name: "rule 73",
          rules: {
            100: 0,
            101: 0,
            110: 1,
            111: 0,
            "011": 1,
            "010": 0,
            "001": 0,
            "000": 1,
          },
        },
        {
          name: "rule 86",
          rules: {
            100: 1,
            101: 0,
            110: 0,
            111: 1,
            "011": 0,
            "010": 1,
            "001": 0,
            "000": 1,
          },
        },
        {
          name: "rule 90",
          rules: {
            100: 1,
            101: 0,
            110: 1,
            111: 0,
            "011": 0,
            "010": 0,
            "001": 1,
            "000": 0,
          },
        },
        {
          name: "rule 45?",
          rules: {
            100: 0,
            101: 0,
            110: 1,
            111: 0,
            "011": 1,
            "010": 0,
            "001": 1,
            "000": 1,
          },
        },
        {
          name: "rule 54?",
          rules: {
            100: 1,
            101: 0,
            110: 1,
            111: 1,
            "011": 0,
            "010": 1,
            "001": 1,
            "000": 0,
          },
        },
        {
          name: "unknown rule",
          rules: {
            100: 0,
            101: 0,
            110: 0,
            111: 1,
            "011": 0,
            "010": 0,
            "001": 1,
            "000": 1,
          },
        },
      ],
      initialStates: [
        {
          id: "onecell",
          name: "One cell at center",
          description: "State with a single cell in the middle",
        },
        {
          id: "random",
          name: "Random cell",
          description: "State populated with random cells",
        },
      ],
    };
  },
  computed: {
    ...mapGetters({
      initialState: "getInitial1dState",
      rules: "get1dRules",
    }),
    rules1dFileName() {
      return (
        Object.keys(this.rules)
          .map((index) => {
            return this.rules[index];
          })
          .join("_") + ".json"
      );
    },
  },
  methods: {
    copyRules() {
      const rules = JSON.stringify(this.rules);
      navigator.clipboard.writeText(rules);
    },
    isCurrentPreset(event) {
      const elem = event.target;
      return this.initialState === elem.value;
    },
    updateSingleRule(event) {
      const elem = event.target;
      const value = elem.checked ? 1 : 0;
      const data = { rule: elem.name, value: value };
      this.$store.commit("update1dSingleRule", data);
    },
    updateRules(event) {
      // TODO : change this, awfully confusing
      const elem = event.target;
      const name = elem.value;
      const rules = this.presetRules.find((ruleset) => {
        return ruleset.name === name;
      });
      Object.keys(rules.rules).map((value) => {
        const data = { name: name, rule: value, value: rules.rules[value] };
        this.$store.commit("update1dSingleRule", data);
      });
    },
    updateInitialState(event) {
      const elem = event.target;
      this.$store.commit("setInitial1dState", elem.value);
    },
    draw1d() {
      /* this.$store.commit("setDrawingStatus", 1); */
      this.$store.dispatch("draw1d");
    },
    reset() {
      this.$store.dispatch("reset");
    },
  },
};
</script>
<style>
.menu-row a {
  color: white;
  font-weight: bold;
  text-decoration: none;
  font-size: small;
}
</style>