src/components/CanvasBoard.vue

@@ -30,7 +30,7 @@
     computed: {
       ...mapState(globalStore, {
         cellProperties: "cellProperties",
-        rules: "rules1d",
+        ruleset: "ruleset1d",
         refreshRate: "refreshRate",
         initial1dState: "initial1dState",
         drawingDirection: "drawingDirection",
@@ -101,7 +101,7 @@
         const initialState = this.compute1dInitialState();
         const board = createBoard(
           initialState,
-          this.rules.rules,
+          this.ruleset.rules,
           this.boardWidth
         );
         this.lastBoard = Object.freeze(board);

src/components/MenuElementaryCA.vue

@@ -1,5 +1,5 @@
 <template>
-  <MenuRow row-title="Elementary Cellular Automata">
+  <MenuRow row-title="Elementary Automaton">
     <form>
       <div class="form-field">
         <label>
@@ -30,10 +30,10 @@
           <select
             name="ruleset-elementary"
             :value="ruleset.name"
-            @input="updateRules"
+            @input="updateRuleset"
           >
             <option
-              v-for="(ruleset, index) in presetRules"
+              v-for="(ruleset, index) in presetRuleset"
               :key="'ruleset-preset-elementary-' + index"
               :value="ruleset.name"
             >
@@ -43,10 +43,10 @@
         </label>
       </div>
       <div class="form-field">
-        <a style="cursor: pointer" @click="copyRules">copy rules</a>
+        <a style="cursor: pointer" @click="copyRuleset">copy rules</a>
       </div>
       <div
-        v-for="(rule, name, index) in rules.rules"
+        v-for="(rule, name, index) in ruleset.rules"
         :key="'rule-' + index"
         class="form-field"
       >
@@ -70,7 +70,7 @@
 
 <script>
   import { mapActions, mapWritableState } from "pinia";
-  import { presetRules, initialStates } from "./preset.js";
+  import { presetRuleset, initialStates } from "../modules/preset.js";
   import { globalStore } from "../stores/index.js";
   import MenuRow from "./MenuRow.vue";
   export default {
@@ -80,21 +80,21 @@
     },
     data() {
       return {
-        presetRules: presetRules,
+        presetRuleset: presetRuleset,
         initialStates: initialStates,
       };
     },
     computed: {
       ...mapWritableState(globalStore, {
         initialState: "initial1dState",
-        rules: "rules1d",
+        ruleset: "ruleset1d",
       }),
       rules1dFileName() {
         // TODO: broken
         return (
-          Object.keys(this.rules)
+          Object.keys(this.ruleset)
             .map((index) => {
-              return this.rules[index];
+              return this.ruleset[index];
             })
             .join("_") + ".json"
         );
@@ -102,9 +102,9 @@
     },
     methods: {
       ...mapActions(globalStore, ["toggleDraw1d"]),
-      copyRules() {
-        const rules = JSON.stringify(this.rules);
-        navigator.clipboard.writeText(rules);
+      copyRuleset() {
+        const newRuleset = JSON.stringify(this.ruleset);
+        navigator.clipboard.writeText(newRuleset);
       },
       isCurrentPreset(event) {
         const elem = event.target;
@@ -113,15 +113,15 @@
       updateSingleRule(event) {
         const elem = event.target;
         const value = elem.checked ? 1 : 0;
-        this.rules.rules[elem.name] = value;
+        this.ruleset.rules[elem.name] = value;
       },
-      updateRules(event) {
+      updateRuleset(event) {
         const elem = event.target;
         const name = elem.value;
-        const newRuleset = this.presetRules.find((ruleset) => {
+        const newRuleset = this.presetRuleset.find((ruleset) => {
           return ruleset.name === name;
         });
-        this.rules.rules = newRuleset.rules;
+        this.ruleset = newRuleset;
       },
       updateInitialState(event) {
         const elem = event.target;

src/components/preset.js

@@ -1,4 +1,4 @@
-const presetRules = [
+const presetRuleset = [
   {
     name: "rule 73",
     rules: {
@@ -92,4 +92,4 @@ const initialStates = [
   },
 ];
 
-export { presetRules, initialStates };
+export { presetRuleset, initialStates };

src/modules/preset.js

@@ -0,0 +1,95 @@
+const presetRuleset = [
+  {
+    name: "rule 73",
+    rules: {
+      100: 0,
+      101: 0,
+      110: 1,
+      111: 0,
+      "011": 1,
+      "010": 0,
+      "001": 0,
+      "000": 1,
+    },
+  },
+  {
+    name: "rule 86",
+    rules: {
+      100: 1,
+      101: 0,
+      110: 0,
+      111: 1,
+      "011": 0,
+      "010": 1,
+      "001": 0,
+      "000": 1,
+    },
+  },
+  {
+    name: "rule 90",
+    rules: {
+      100: 1,
+      101: 0,
+      110: 1,
+      111: 0,
+      "011": 0,
+      "010": 0,
+      "001": 1,
+      "000": 0,
+    },
+  },
+  {
+    name: "rule 45?",
+    rules: {
+      100: 0,
+      101: 0,
+      110: 1,
+      111: 0,
+      "011": 1,
+      "010": 0,
+      "001": 1,
+      "000": 1,
+    },
+  },
+  {
+    name: "rule 54?",
+    rules: {
+      100: 1,
+      101: 0,
+      110: 1,
+      111: 1,
+      "011": 0,
+      "010": 1,
+      "001": 1,
+      "000": 0,
+    },
+  },
+  {
+    name: "unknown rule",
+    rules: {
+      100: 0,
+      101: 0,
+      110: 0,
+      111: 1,
+      "011": 0,
+      "010": 0,
+      "001": 1,
+      "000": 1,
+    },
+  },
+];
+
+const initialStates = [
+  {
+    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",
+  },
+];
+
+export { presetRuleset, initialStates };

src/stores/index.js

@@ -3,7 +3,7 @@ import { defineStore } from "pinia";
 export const globalStore = defineStore("globalStore", {
   state: () => {
     return {
-      rules1d: {
+      ruleset1d: {
         name: "rule 73",
         rules: {
           111: 0,