useless component, css fluff, comments

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/FormField.vue

@@ -1,9 +0,0 @@
-<template>
-  <div class="form-field" v-if="type === 'checkbox'">
-    <label>{{ name }}
-      <input type="checkbox" name="{{ name }}">
-    </label>
-  </div>
-  <div class="form-field" v-else-if="type === ''">
-  </div>
-</template>

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

src/components/MenuRow.vue

@@ -38,7 +38,12 @@ export default {
     cursor: pointer;
     border: 2px solid darkgrey;
     margin: 0 0 10px 0;
-  }
+}
+
+select {
+    margin-top: 10px;
+    padding: 5px;
+}
   
 input[type="button"] {
     min-width: 60px;

src/modules/automata.js

@@ -73,6 +73,7 @@ function conwayRules(cell, neighbors) {
 }
 
 // get the next evolution of a 2D CA initial state
+// Rules : Moore neighborhood
 function evolve2d(board, rulesFn) {
   return board.map((row, x) => row.map((cell, y) => {
     const neighbors = getCellNeighbors(board, [x, y]);
@@ -99,17 +100,26 @@ function getDrawingValues(state, acc, cell) {
   );
 }
 
+// Populates the first state with a single living cell in the center
+function create1dStateOneCell(width) {
+  return [...Array(width)].map(
+    (cell, index) => {
+      if (index === width / 2 || index === width + 1 / 2) return 1
+      return 0
+    })
+}
+
 // Populates the first state of a 1D CA with cells returned
 // by initFn
-function initialState1d(width, initFn, args) {
+function create1dState(width, initFn, args) {
   return [...Array(width)].map(
-    () => initFn(...args),
+    () => initFn(...args)
   );
 }
 
 // Populates the first state of a 2D CA with cells returned
 // by initFn
-function initialState2d(width, height, initFn, args) {
+function create2dState(width, height, initFn, args) {
   return [...Array(height)].map(
     () => [...Array(width)].map(
       () => initFn(...args),
@@ -118,5 +128,5 @@ function initialState2d(width, height, initFn, args) {
 }
 
 export {
-  getDrawingValues, initialState1d, initialState2d, evolve1d, evolve2d, conwayRules, createBoard,
+  getDrawingValues, create1dState, create2dState, createBoard, create1dStateOneCell, conwayRules, evolve1d, evolve2d
 };

src/store/index.js

@@ -23,7 +23,8 @@ export default new Vuex.Store({
     },
     canvasWidth: 1280,
     canvasHeight: 720,
-    refreshRate: 300
+    refreshRate: 300,
+    initial1dState: "onecell"
   },
   mutations: {
     update1dRules(state, data) {
@@ -43,6 +44,9 @@ export default new Vuex.Store({
     },
     setRefreshRate(state, data) {
       state.refreshRate = data;
+    },
+    setInitial1dState(state, data) {
+      state.initial1dState = data
     }
   },
   getters: {
@@ -66,6 +70,9 @@ export default new Vuex.Store({
     },
     getRefreshRate(state) {
       return state.refreshRate
+    },
+    getInitial1dState(state) {
+      return state.initial1dState
     }
   },
   actions: {