rules can be exported in json, rule presets

src/components/Canvas.vue

@@ -23,7 +23,7 @@ export default {
   computed: {
     ...mapGetters({
       cellProperties: 'getCellProperties',
-      rules: 'getRuleSet1d',
+      rules: 'get1dRules',
       drawing: 'isDrawing',
       canvasWidth: 'getCanvasWidth',
       canvasHeight: 'getCanvasHeight',

src/components/MenuElementaryCA.vue

@@ -11,7 +11,7 @@
           >
             <option
               v-for="state in initial1dStates"
-              :key="state.id"
+              :key="'preset1d' + state.id"
               :value="state.id"
             >{{ state.name }}
             </option>
@@ -21,18 +21,41 @@
       <div class="form-field">
         <label>Rules</label>
       </div>
+      <div class="form-field">
+        <label>Rules presets
+          <br>
+          <select
+            name="rules1d"
+            value="rules"
+            @input="update1dRules"
+          >
+            <option
+              v-for="(rule, name) in presetRules"
+              :key="'rule1d' + name"
+              :value="name"
+            >{{ name }}
+            </option>
+          </select>
+        </label>
+      </div>
+      <div class="form-field">
+        <a
+          style="cursor: pointer;"
+          @click="copy1dRules"
+        >copy rules</a>
+      </div>
       <div
-        v-for="rule in rules"
+        v-for="(rule, name) in rules"
-        :key="rule"
+        :key="'rule1d' + name"
         class="form-field"
       >
-        <label>{{ rule }}
+        <label>{{ name }}
           <input
-            :value="getRule(rule)"
+            :value="rule"
             type="checkbox"
-            :name="rule"
+            :name="name"
-            :checked="getRule(rule) == 1"
+            :checked="rule"
-            @input="update1dRules"
+            @input="update1dSingleRule"
           >
         </label>
       </div>
@@ -44,12 +67,6 @@
         value="start"
         @click="draw1d"
       >
-      <!-- <input -->
-      <!--   type="button" -->
-      <!--   name="stop" -->
-      <!--   class="stop" -->
-      <!--   value="stop" -->
-      <!-- > -->
       <input
         type="button"
         name="reset"
@@ -72,7 +89,13 @@ export default {
   data() {
     // TODO: Why not a getter in the store?
     return {
-      rules: ["111", "110", "101", "100", "011", "010", "001", "000"],
+      presetRules: {
+        "rule 73" : {"100":0,"101":0,"110":1,"111":0,"011":1,"010":0,"001":0,"000":1},
+        "rule 86" : {"100":1,"101":0,"110":0,"111":1,"011":0,"010":1,"001":0,"000":1},
+        "rule 90" : {"100":1,"101":0,"110":1,"111":0,"011":0,"010":0,"001":1,"000":0},
+        "rule 45?" : {"100":0,"101":0,"110":1,"111":0,"011":1,"010":0,"001":1,"000":1},
+        "rule 54?" : {"100":1,"101":0,"110":1,"111":1,"011":0,"010":1,"001":1,"000":0}
+      },
       initial1dStates: [
         { id : "onecell",
           name : "One cell at center",
@@ -88,20 +111,41 @@ export default {
   },
   computed: {
     ...mapGetters({
-      initial1dState: 'getInitial1dState'
+      initial1dState: 'getInitial1dState',
-    })
+      rules: 'get1dRules'
+    }),
+    rules1dFileName() {
+      return Object.keys(this.rules).map(
+        (index) => {
+          return this.rules[index]
+        }).join("_") + ".json"
+    },
   },
   methods: {
+    copy1dRules(){
+      const rules = JSON.stringify(this.rules)
+      navigator.clipboard.writeText(rules)
+    },
     isCurrentPreset(event) {
-      console.log(elem.value)
       const elem = event.target
       return this.initialState === elem.value
     },
-    update1dRules(event) {
+    update1dSingleRule(event) {
       const elem = event.target
       const value = elem.checked ? 1 : 0
       const data = { 'rule' : elem.name, 'value' : value}
-      this.$store.commit('update1dRules', data)
+      this.$store.commit('update1dSingleRule', data)
+    },
+    update1dRules(event) {
+      const elem = event.target
+      const name = elem.value
+      const rules = this.presetRules[name]
+      console.log(rules)
+      Object.keys(rules).map((index) => {
+        const data = { 'rule' : index, 'value' : rules[index]}
+        console.log(rules[index])
+        this.$store.commit('update1dSingleRule', data)
+      })
     },
     updateInitial1dState(event) {
       const elem = event.target
@@ -111,13 +155,17 @@ export default {
       this.$root.$store.state.drawing = 1
       this.$root.$emit('draw1d')
     },
-    getRule(id) {
-      const rules = this.$store.state.rules1d
-      return rules[id]
-    },
     reset() {
       this.$root.$emit('reset')
     },
   }
 }
 </script>
+<style>
+  .menu-row a {
+  color: white;
+  font-weight: bold;
+  text-decoration: none;
+  font-size: small;
+  }
+</style>

src/store/index.js

@@ -27,9 +27,12 @@ export default new Vuex.Store({
     initial1dState: "onecell"
   },
   mutations: {
-    update1dRules(state, data) {
+    update1dSingleRule(state, data) {
       state.rules1d[data.rule] = data.value
     },
+    update1dRules(state, data) {
+      state.rules1d = data
+    },
     setCellProperties(state, data) {
       state.cellProperties[data.name] = data.value
     },
@@ -53,7 +56,7 @@ export default new Vuex.Store({
     getCellProperties(state) {
       return state.cellProperties
     },
-    getRuleSet1d(state) {
+    get1dRules(state) {
       return state.rules1d
     },
     getRule1d(state) {