explorata/src/components/MenuElementaryCA.vue

<template>
  <MenuRow row-title="Elementary Cellular Automata">
    <form>
      <div class="form-field">
        <label>Initial state presets
          <br>
          <select
            name="initial1dStates"
            value="initial1dStates"
            @input="updateInitial1dState"
          >
            <option
              v-for="state in initial1dStates"
              :key="state.id"
              :value="state.id"
            >{{ state.name }}
            </option>
          </select>
        </label>
      </div>
      <div class="form-field">
        <label>Rules</label>
      </div>
      <div
        v-for="rule in rules"
        :key="rule"
        class="form-field"
      >
        <label>{{ rule }}
          <input
            :value="getRule(rule)"
            type="checkbox"
            :name="rule"
            :checked="getRule(rule) == 1"
            @input="update1dRules"
          >
        </label>
      </div>
    </form>
    <div class="form-field">
      <input
        type="button"
        name="start"
        value="start"
        @click="draw1d"
      >
      <!-- <input -->
      <!--   type="button" -->
      <!--   name="stop" -->
      <!--   class="stop" -->
      <!--   value="stop" -->
      <!-- > -->
      <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 {
      rules: ["111", "110", "101", "100", "011", "010", "001", "000"],
      initial1dStates: [
        { 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({
      initial1dState: 'getInitial1dState'
    })
  },
  methods: {
    isCurrentPreset(event) {
      console.log(elem.value)
      const elem = event.target
      return this.initialState === elem.value
    },
    update1dRules(event) {
      const elem = event.target
      const value = elem.checked ? 1 : 0
      const data = { 'rule' : elem.name, 'value' : value}
      this.$store.commit('update1dRules', data)
    },
    updateInitial1dState(event) {
      const elem = event.target
      this.$store.commit('setInitial1dState', elem.value)
    },
    draw1d() {
      this.$root.$store.state.drawing = 1
      this.$root.$emit('draw1d')
    },
    getRule(id) {
      const rules = this.$store.state.rules1d
      return rules[id]
    },
    reset() {
      this.$root.$emit('reset')
    },
  }
}
</script>