preset for 1D CA initial state

src/components/Canvas.vue

@@ -9,7 +9,7 @@
   </main>
 </template>
 <script>
-import { evolve2d, initialState1d, initialState2d, conwayRules, createBoard } from '../modules/automata.js'
+import { create1dState, create1dStateOneCell, create2dState, createBoard, conwayRules, evolve2d } from '../modules/automata.js'
 import { getRandomInt, sleep } from '../modules/common.js'
 import {mapGetters} from 'vuex'
 export default {
@@ -27,8 +27,19 @@ export default {
       drawing: 'isDrawing',
       canvasWidth: 'getCanvasWidth',
       canvasHeight: 'getCanvasHeight',
-      refreshRate: 'getRefreshRate'
-    })
+      refreshRate: 'getRefreshRate',
+      initial1dState: 'getInitial1dState'
+    }),
+    boardWidth: function() {
+      return Math.floor(
+        this.canvas.width /
+          this.cellProperties.size)
+    },
+    boardHeight: function() {
+      return Math.floor(
+        this.canvas.height /
+          this.cellProperties.size)
+    }
   },
   mounted() {
     this.canvas = this.$refs['canvas']
@@ -56,24 +67,25 @@ export default {
         )
       })
     },
+    compute1dInitialState() {
+      if(this.initial1dState === "onecell")
+        return create1dStateOneCell(this.boardWidth)
+      return create1dState(this.boardWidth, getRandomInt, [0, 2])
+    },
     async draw1d() {
-      const initialState = initialState1d(
-        Math.floor(this.canvas.width / this.cellProperties.size),
-        getRandomInt,
-        [0, 2],
-      )
+      const initialState = this.compute1dInitialState()
       const board = createBoard(
         initialState,
         this.rules,
-        Math.floor(this.canvas.height / this.cellProperties.size)
+        this.boardHeight
       )
       this.drawCanvas(board)
     },
     async draw2d() {
       if (this.drawing === 0) return
-      const initialState = initialState2d(
-        Math.floor(this.canvas.width / this.cellProperties.size),
-        Math.floor(this.canvas.height / this.cellProperties.size),
+      const initialState = create2dState(
+        this.boardWidth,
+        this.boardHeight,
         getRandomInt,
         [0, 2],
       );

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')