working vue components for 1D automata

.gitignore

@@ -21,3 +21,4 @@ pnpm-debug.log*
 *.njsproj
 *.sln
 *.sw?
+*.#*

src/components/Canvas.vue

@@ -11,61 +11,63 @@
 <script>
 import { initialState1d, createBoard } from '../modules/automata.js'
 import { getRandomInt } from '../modules/common.js'
+import {mapGetters} from 'vuex'
 export default {
   name: 'Canvas',
   data() {
     return {
       canvas: null,
-      ctx: null
+      ctx: null,
     }
   },
   computed: {
-    cellProperties() {
-      return this.$store.state.cellProperties
-    },
-    rules() {
-      return this.$store.state.rules1d
-    }
+    ...mapGetters({
+      cellProperties: 'getCellProperties',
+      rules: 'getRuleSet1d',
+    })
   },
   mounted() {
     this.canvas = this.$refs['canvas']
     this.canvas.width = 1280
     this.canvas.height = 720
-    this.context = this.canvas.getContext('2d')
+    this.ctx = this.canvas.getContext('2d')
     this.$root.$on('draw1d', () => { this.draw1d() })
+    this.$root.$on('reset', () => { this.reset() })
   },
   methods: {
     drawCanvas(board) {
-      const props = this.CellProperties;
+      const props = this.cellProperties
       board.map((row, y) => {
-        const d = props.size;
+        const d = props.size
         return row.map(
           (cell, x) => {
             this.ctx.fillStyle = (
               () => {
-                if (cell === 1) return props.liveColor;
-                return props.deadColor;
-              })();
-            this.ctx.fillRect(x * d, y * d, d, d);
-            return cell;
+                if (cell === 1) return props.liveColor
+                return props.deadColor
+              })()
+            this.ctx.fillRect(x * d, y * d, d, d)
+            return cell
           },
-        );
-      });
+        )
+      })
     },
-    draw1d() {
-      const rules = this.rules;
-      const props = this.CellProperties;
-      console.log(props.size)
+    async draw1d() {
       const initialState = initialState1d(
-        Math.floor(this.canvas.width / props.size),
+        Math.floor(this.canvas.width / this.cellProperties.size),
         getRandomInt,
         [0, 2],
-      );
+      )
       const board = createBoard(
         initialState,
-        rules,
-        Math.floor(this.canvas.height / props.size));
-      this.drawCanvas(board);
+        this.rules,
+        Math.floor(this.canvas.height / this.cellProperties.size)
+      )
+      this.drawCanvas(board)
+    },
+    reset() {
+      this.$root.$store.state.drawing = 0;
+      this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height)
     }
   }
 }

src/components/FormField.vue

@@ -0,0 +1,9 @@
+<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/GeneralProperties.vue

@@ -0,0 +1,16 @@
+<template>
+  <div class="menu-row">
+    <div class="form-field">
+      <label for="live">Canvas Resolution</label>
+    </div>
+    <div class="form-field">
+      <input name="canvasWidth" type="number" id="canvasWidth" value="1280"/>
+    </div>
+    <div class="form-field">
+      <input name="canvasHeight" type="number" id="canvasHeight" value="1024"/>
+    </div>
+    <div class="form-field">
+    <input type="button" name="canvasRefresh" id="canvasRefresh" value="refresh"/>
+    </div>
+  </div>
+</template>

src/components/MenuCellProperties.vue

@@ -4,31 +4,28 @@
       <div class="form-field">
         <label for="live">Living cell color</label>
         <input
-          id="live"
-          name="live"
+          name="liveColor"
           type="color"
-          :value="liveColor"
-          @click="updateCellProperties"
+          @value="cellProperties.liveColor"
+          @input="updateCellProperties"
         >
       </div>
       <div class="form-field">
         <label for="dead">Dead cell color</label>
         <input
-          id="dead"
-          name="dead"
+          name="deadColor"
           type="color"
-          :value="deadColor"
-          @click="updateCellProperties"
+          :value="cellProperties.deadColor"
+          @input="updateCellProperties"
         >
       </div>
       <div class="form-field">
         <label>Cell size</label>
         <input
-          id="cellSize"
-          name="cellSize"
+          name="size"
           type="number"
-          :value="size"
-          @click="updateCellProperties"
+          :value="cellProperties.size"
+          @input="updateCellProperties"
         >
       </div>
     </form>
@@ -44,15 +41,19 @@ export default {
   },
   data() {
     return {
-      size : this.$store.state.cellProperties['size'],
-      liveColor : this.$store.state.cellProperties['liveColor'],
-      deadColor : this.$store.state.cellProperties['deadColor'],
+      cellProperties: this.$store.state.cellProperties
     }
   },
   methods: {
+    getCellProperties(event) {
+      const elem = event.target
+      const prop = this.$store.state.cellProperties
+      return prop[elem.name]
+    },
     updateCellProperties(event) {
       const elem = event.target
       const prop = {'name' : elem.name, 'value' : elem.value}
+      //console.log(prop)
       this.$store.commit('setCellProperties', prop)
     }
   },

src/components/MenuElementaryCA.vue

@@ -4,79 +4,18 @@
       <label>Rules</label>
     </div>
     <form>
-      <div class="form-field">
-        <label>111
+      <div
+        v-for="rule in rules"
+        :key="rule"
+        class="form-field"
+      >
+        <label>{{ rule }}
           <input
+            :value="getRule(rule)"
             type="checkbox"
-            name="111"
-            checked
-            @change="update1dRules"
-          >
-        </label>
-      </div>
-      <div class="form-field">
-        <label>110
-          <input
-            type="checkbox"
-            name="110"
-            @click="update1dRules"
-          >
-        </label>
-      </div>
-      <div class="form-field">
-        <label>101
-          <input
-            type="checkbox"
-            name="101"
-            checked
-            @click="update1dRules"
-          >
-        </label>
-      </div>
-      <div class="form-field">
-        <label>100
-          <input
-            type="checkbox"
-            name="100"
-            @click="update1dRules"
-          >
-        </label>
-      </div>
-      <div class="form-field">
-        <label>011
-          <input
-            type="checkbox"
-            name="011"
-            checked
-            @click="update1dRules"
-          >
-        </label>
-      </div>
-      <div class="form-field">
-        <label>010
-          <input
-            type="checkbox"
-            name="010"
-            @click="update1dRules"
-          >
-        </label>
-      </div>
-      <div class="form-field">
-        <label>001
-          <input
-            type="checkbox"
-            name="001"
-            @click="update1dRules"
-          >
-        </label>
-      </div>
-      <div class="form-field">
-        <label>000
-          <input
-            type="checkbox"
-            name="000"
-            checked
-            @click="update1dRules"
+            :name="rule"
+            :checked="getRule(rule) == 1"
+            @input="update1dRules"
           >
         </label>
       </div>
@@ -88,17 +27,18 @@
         value="start"
         @click="draw1d"
       >
-      <input
-        type="button"
-        name="stop"
-        class="stop"
-        value="stop"
-      >
+      <!-- <input -->
+      <!--   type="button" -->
+      <!--   name="stop" -->
+      <!--   class="stop" -->
+      <!--   value="stop" -->
+      <!-- > -->
       <input
         type="button"
         name="reset"
         class="reset"
         value="reset"
+        @click="reset()"
       >
     </div>
   </MenuRow>
@@ -111,18 +51,28 @@ export default {
   components: {
     MenuRow
   },
+  data() {
+    return {
+      rules: ["111", "110", "101", "100", "011", "010", "001", "000"]
+    }
+  },
   methods: {
     update1dRules(event) {
       const elem = event.target
-      const value = elem.value == 'on' ? '1' : '0'
+      const value = elem.checked ? 1 : 0
       const data = { 'rule' : elem.name, 'value' : value}
       this.$store.commit('update1dRules', data)
     },
     draw1d() {
       this.$root.$emit('draw1d')
     },
-    mounted() {
-    }
+    getRule(id) {
+      const rules = this.$store.state.rules1d
+      return rules[id]
+    },
+    reset() {
+      this.$root.$emit('reset')
+    },
   }
 }
 </script>

src/store/index.js

@@ -5,9 +5,19 @@ Vue.use(Vuex)
 
 export default new Vuex.Store({
   state: {
-    rules1d : {},
+    drawing: 0,
+    rules1d : {
+      "111" : 0,
+      "110" : 1,
+      "101" : 0,
+      "100" : 0,
+      "011" : 1,
+      "010" : 0,
+      "001" : 0,
+      "000" : 1
+    },
     cellProperties: {
-      size: 5,
+      size: 3,
       liveColor: '#000000',
       deadColor: '#AA78E8',
     },
@@ -20,6 +30,17 @@ export default new Vuex.Store({
       state.cellProperties[data.name] = data.value
     },
   },
+  getters: {
+    getCellProperties(state) {
+      return state.cellProperties
+    },
+    getRuleSet1d(state) {
+      return state.rules1d
+    },
+    getRule1d(state) {
+      return (rule) => state.rules1d[rule]
+    }
+  },
   actions: {
   },
   modules: {