<template>
  <MenuRow row-title="Elementary Cellular Automata">
    <div class="form-field">
      <label>Rules</label>
    </div>
    <form>
      <div class="form-field">
        <label>111
          <input
            type="checkbox"
            name="111"
            checked
            @change="update1dRules"
          >
        </label>
      </div>
      <div class="form-field">
        <label>110
          <input
            type="checkbox"
            name="110"
            @click="update1dRules"
          >
        </label>
      </div>
      <div class="form-field">
        <label>101
          <input
            type="checkbox"
            name="101"
            checked
            @click="update1dRules"
          >
        </label>
      </div>
      <div class="form-field">
        <label>100
          <input
            type="checkbox"
            name="100"
            @click="update1dRules"
          >
        </label>
      </div>
      <div class="form-field">
        <label>011
          <input
            type="checkbox"
            name="011"
            checked
            @click="update1dRules"
          >
        </label>
      </div>
      <div class="form-field">
        <label>010
          <input
            type="checkbox"
            name="010"
            @click="update1dRules"
          >
        </label>
      </div>
      <div class="form-field">
        <label>001
          <input
            type="checkbox"
            name="001"
            @click="update1dRules"
          >
        </label>
      </div>
      <div class="form-field">
        <label>000
          <input
            type="checkbox"
            name="000"
            checked
            @click="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"
      >
    </div>
  </MenuRow>
</template>

<script>
import MenuRow from './MenuRow.vue'
export default {
  name: 'MenuElementaryCA',
  components: {
    MenuRow
  },
  methods: {
    update1dRules(event) {
      const elem = event.target
      const value = elem.value == 'on' ? '1' : '0'
      const data = { 'rule' : elem.name, 'value' : value}
      this.$store.commit('update1dRules', data)
    },
    draw1d() {
      this.$root.$emit('draw1d')
    },
    mounted() {
    }
  }
}
</script>
