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="'preset1d' + state.id"
              :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="rules1d"
            value="rules"
            @input="update1dRules"
          >
            <option
              v-for="(rule, name) in presetRules"
              :key="'rule1d' + name"
              :value="name"
            >{{ name }}
            </option>
          </select>
        </label>
      </div>
      <div class="form-field">
        <a
          style="cursor: pointer;"
          @click="copy1dRules"
        >copy rules</a>
      </div>
      <div
        v-for="(rule, name) in rules"
        :key="'rule1d' + name"
        class="form-field"
      >
        <label>{{ name }}
          <input
            :value="rule"
            type="checkbox"
            :name="name"
            :checked="rule"
            @input="update1dSingleRule"
          >
        </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: {
        "rule 73" : {"100":0,"101":0,"110":1,"111":0,"011":1,"010":0,"001":0,"000":1},
        "rule 86" : {"100":1,"101":0,"110":0,"111":1,"011":0,"010":1,"001":0,"000":1},
        "rule 90" : {"100":1,"101":0,"110":1,"111":0,"011":0,"010":0,"001":1,"000":0},
        "rule 45?" : {"100":0,"101":0,"110":1,"111":0,"011":1,"010":0,"001":1,"000":1},
        "rule 54?" : {"100":1,"101":0,"110":1,"111":1,"011":0,"010":1,"001":1,"000":0},
        "unknown rule" : {"100":0,"101":0,"110":0,"111":1,"011":0,"010":0,"001":1,"000":1}
      },
      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',
      rules: 'get1dRules'
    }),
    rules1dFileName() {
      return Object.keys(this.rules).map(
        (index) => {
          return this.rules[index]
        }).join("_") + ".json"
    },
  },
  methods: {
    copy1dRules(){
      const rules = JSON.stringify(this.rules)
      navigator.clipboard.writeText(rules)
    },
    isCurrentPreset(event) {
      const elem = event.target
      return this.initialState === elem.value
    },
    update1dSingleRule(event) {
      const elem = event.target
      const value = elem.checked ? 1 : 0
      const data = { 'rule' : elem.name, 'value' : value}
      this.$store.commit('update1dSingleRule', data)
    },
    update1dRules(event) {
      const elem = event.target
      const name = elem.value
      const rules = this.presetRules[name]
      Object.keys(rules).map((index) => {
        const data = { 'rule' : index, 'value' : rules[index]}
        this.$store.commit('update1dSingleRule', data)
      })
    },
    updateInitial1dState(event) {
      const elem = event.target
      this.$store.commit('setInitial1dState', elem.value)
    },
    draw1d() {
      this.$root.$store.state.drawing = 1
      this.$root.$emit('draw1d')
    },
    reset() {
      this.$root.$emit('reset')
    },
  }
}
</script>
<style>
  .menu-row a {
  color: white;
  font-weight: bold;
  text-decoration: none;
  font-size: small;
  }
</style>