[wip] vuex, submenu templates, linting rules

src/components/MenuCellProperties.vue

@@ -0,0 +1,60 @@
+<template>
+  <MenuRow row-title="Cell Properties">
+    <form>
+      <div class="form-field">
+        <label for="live">Living cell color</label>
+        <input
+          id="live"
+          name="live"
+          type="color"
+          :value="liveColor"
+          @click="updateCellProperties"
+        >
+      </div>
+      <div class="form-field">
+        <label for="dead">Dead cell color</label>
+        <input
+          id="dead"
+          name="dead"
+          type="color"
+          :value="deadColor"
+          @click="updateCellProperties"
+        >
+      </div>
+      <div class="form-field">
+        <label>Cell size</label>
+        <input
+          id="cellSize"
+          name="cellSize"
+          type="number"
+          :value="size"
+          @click="updateCellProperties"
+        >
+      </div>
+    </form>
+  </MenuRow>
+</template>
+
+<script>
+import MenuRow from './MenuRow.vue'
+export default {
+  name: 'MainMenu',
+  components: {
+    MenuRow
+  },
+  data() {
+    return {
+      size : this.$store.state.cellProperties['size'],
+      liveColor : this.$store.state.cellProperties['liveColor'],
+      deadColor : this.$store.state.cellProperties['deadColor'],
+    }
+  },
+  methods: {
+    updateCellProperties(event) {
+      const elem = event.target
+      const prop = {'name' : elem.name, 'value' : elem.value}
+      this.$store.commit('setCellProperties', prop)
+    }
+  },
+}
+</script>