configurable refresh rate for 2d CA

src/components/Canvas.vue

@@ -26,7 +26,8 @@ export default {
       rules: 'getRuleSet1d',
       drawing: 'isDrawing',
       canvasWidth: 'getCanvasWidth',
-      canvasHeight: 'getCanvasHeight'
+      canvasHeight: 'getCanvasHeight',
+      refreshRate: 'getRefreshRate'
     })
   },
   mounted() {
@@ -82,7 +83,7 @@ export default {
         if (this.drawing === 0) return
         const newBoard = evolve2d(b, conwayRules)
         this.drawCanvas(b, this.cellProperties)
-        await sleep(300)
+        await sleep(this.refreshRate)
         draw2dNext(newBoard)
       }
       return draw2dNext(board)

src/components/MenuGeneralOptions.vue

@@ -22,6 +22,20 @@
           @input="updateCanvasHeight"
         >
       </div>
+      <div class="form-field">
+        <label for="live">Refresh Rate (ms)</label>
+      </div>
+      <div class="form-field">
+        <input
+          id="refreshRate"
+          name="refreshRate"
+          type="number"
+          min="100"
+          step="100"
+          :value="refreshRate"
+          @input="updateRefreshRate"
+        >
+      </div>
     </form>    
   </MenuRow>
 </template>
@@ -37,7 +51,8 @@ export default {
   computed: {
     ...mapGetters({
       canvasWidth: 'getCanvasWidth',
-      canvasHeight: 'getCanvasHeight'
+      canvasHeight: 'getCanvasHeight',
+      refreshRate: 'getRefreshRate'
     })
   },
   methods: {
@@ -48,6 +63,10 @@ export default {
     updateCanvasWidth: function(event) {
       const elem = event.target
       this.$store.commit('setCanvasWidth', elem.value)
+    },
+    updateRefreshRate: function(event) {
+      const elem = event.target
+      this.$store.commit('setRefreshRate', elem.value)
     }
   }
 }

src/store/index.js

@@ -23,6 +23,7 @@ export default new Vuex.Store({
     },
     canvasWidth: 1280,
     canvasHeight: 720,
+    refreshRate: 300
   },
   mutations: {
     update1dRules(state, data) {
@@ -39,6 +40,9 @@ export default new Vuex.Store({
     },
     setCanvasHeight(state, data) {
       state.canvasHeight = data;
+    },
+    setRefreshRate(state, data) {
+      state.refreshRate = data;
     }
   },
   getters: {
@@ -59,6 +63,9 @@ export default new Vuex.Store({
     },
     getCanvasHeight(state) {
       return state.canvasHeight
+    },
+    getRefreshRate(state) {
+      return state.refreshRate
     }
   },
   actions: {