linting and formating. renamed canvas component

src/components/MenuElementaryCA.vue

@@ -2,8 +2,9 @@
   <MenuRow row-title="Elementary Cellular Automata">
     <form>
       <div class="form-field">
-        <label>Initial state presets
-          <br>
+        <label
+          >Initial state presets
+          <br />
           <select
             name="initial1dStates"
             value="initial1dStates"
@@ -13,7 +14,8 @@
               v-for="state in initial1dStates"
               :key="'preset1d' + state.id"
               :value="state.id"
-            >{{ state.name }}
+            >
+              {{ state.name }}
             </option>
           </select>
         </label>
@@ -22,149 +24,198 @@
         <label>Rules</label>
       </div>
       <div class="form-field">
-        <label>Rules presets
-          <br>
-          <select
-            name="rules1d"
-            value="rules"
-            @input="update1dRules"
-          >
+        <label
+          >Rules presets
+          <br />
+          <select name="rules1d" value="rules" @input="update1dRules">
             <option
               v-for="(rule, name) in presetRules"
               :key="'rule1d' + name"
               :value="name"
-            >{{ name }}
+            >
+              {{ name }}
             </option>
           </select>
         </label>
       </div>
       <div class="form-field">
-        <a
-          style="cursor: pointer;"
-          @click="copy1dRules"
-        >copy rules</a>
+        <a style="cursor: pointer" @click="copy1dRules">copy rules</a>
       </div>
       <div
         v-for="(rule, name) in rules"
         :key="'rule1d' + name"
         class="form-field"
       >
-        <label>{{ name }}
+        <label
+          >{{ name }}
           <input
             :value="rule"
             type="checkbox"
             :name="name"
             :checked="rule"
             @input="update1dSingleRule"
-          >
+          />
         </label>
       </div>
     </form>
     <div class="form-field">
-      <input
-        type="button"
-        name="start"
-        value="start"
-        @click="draw1d"
-      >
+      <input type="button" name="start" value="start" @click="draw1d" />
       <input
         type="button"
         name="reset"
         class="reset"
         value="reset"
         @click="reset()"
-      >
+      />
     </div>
   </MenuRow>
 </template>
 
 <script>
-import {mapGetters} from 'vuex'
-import MenuRow from './MenuRow.vue'
+import { mapGetters } from "vuex";
+import MenuRow from "./MenuRow.vue";
 export default {
-  name: 'MenuElementaryCA',
+  name: "MenuElementaryCA",
   components: {
-    MenuRow
+    MenuRow,
   },
   data() {
     // TODO: Why not a getter in the store?
     return {
       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},
-        "unknown rule" : {"100":0,"101":0,"110":0,"111":1,"011":0,"010":0,"001":1,"000":1}
+        "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,
+        },
+        "unknown rule": {
+          100: 0,
+          101: 0,
+          110: 0,
+          111: 1,
+          "011": 0,
+          "010": 0,
+          "001": 1,
+          "000": 1,
+        },
       },
       initial1dStates: [
-        { id : "onecell",
-          name : "One cell at center",
-          description : "State with a single cell in the middle",
+        {
+          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",
-        }
-      ]
-    }
+          id: "random",
+          name: "Random cell",
+          description: "State populated with random cells",
+        },
+      ],
+    };
   },
   computed: {
     ...mapGetters({
-      initial1dState: 'getInitial1dState',
-      rules: 'get1dRules'
+      initial1dState: "getInitial1dState",
+      rules: "get1dRules",
     }),
     rules1dFileName() {
-      return Object.keys(this.rules).map(
-        (index) => {
-          return this.rules[index]
-        }).join("_") + ".json"
+      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)
+    copy1dRules() {
+      const rules = JSON.stringify(this.rules);
+      navigator.clipboard.writeText(rules);
     },
     isCurrentPreset(event) {
-      const elem = event.target
-      return this.initialState === elem.value
+      const elem = event.target;
+      return this.initialState === elem.value;
     },
     update1dSingleRule(event) {
-      const elem = event.target
-      const value = elem.checked ? 1 : 0
-      const data = { 'rule' : elem.name, 'value' : value}
-      this.$store.commit('update1dSingleRule', data)
+      const elem = event.target;
+      const value = elem.checked ? 1 : 0;
+      const data = { rule: elem.name, value: value };
+      this.$store.commit("update1dSingleRule", data);
     },
     update1dRules(event) {
-      const elem = event.target
-      const name = elem.value
-      const rules = this.presetRules[name]
+      const elem = event.target;
+      const name = elem.value;
+      const rules = this.presetRules[name];
       Object.keys(rules).map((index) => {
-        const data = { 'rule' : index, 'value' : rules[index]}
-        this.$store.commit('update1dSingleRule', data)
-      })
+        const data = { rule: index, value: rules[index] };
+        this.$store.commit("update1dSingleRule", data);
+      });
     },
     updateInitial1dState(event) {
-      const elem = event.target
-      this.$store.commit('setInitial1dState', elem.value)
+      const elem = event.target;
+      this.$store.commit("setInitial1dState", elem.value);
     },
     draw1d() {
-      this.$root.$store.state.drawing = 1
-      this.$root.$emit('draw1d')
+      this.$root.$store.state.drawing = 1;
+      this.$root.$emit("draw1d");
     },
     reset() {
-      this.$root.$emit('reset')
+      this.$root.$emit("reset");
     },
-  }
-}
+  },
+};
 </script>
 <style>
-  .menu-row a {
+.menu-row a {
   color: white;
   font-weight: bold;
   text-decoration: none;
   font-size: small;
-  }
+}
 </style>