preset for 1D CA initial state

src/components/MenuElementaryCA.vue

@@ -1,9 +1,26 @@
 <template>
   <MenuRow row-title="Elementary Cellular Automata">
-    <div class="form-field">
-      <label>Rules</label>
-    </div>
     <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"
@@ -45,6 +62,7 @@
 </template>
 
 <script>
+import {mapGetters} from 'vuex'
 import MenuRow from './MenuRow.vue'
 export default {
   name: 'MenuElementaryCA',
@@ -52,17 +70,43 @@ export default {
     MenuRow
   },
   data() {
+    // TODO: Why not a getter in the store?
     return {
-      rules: ["111", "110", "101", "100", "011", "010", "001", "000"]
+      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')