option to change drawing direction

src/components/Canvas.vue

@@ -28,7 +28,8 @@ export default {
       canvasWidth: 'getCanvasWidth',
       canvasHeight: 'getCanvasHeight',
       refreshRate: 'getRefreshRate',
-      initial1dState: 'getInitial1dState'
+      initial1dState: 'getInitial1dState',
+      drawingDirection: 'getDrawingDirection'
     }),
     boardWidth: function() {
       return Math.floor(
@@ -61,6 +62,9 @@ export default {
                 if (cell === 1) return props.liveColor
                 return props.deadColor
               })()
+            if (this.drawingDirection === "x")
+              this.ctx.fillRect(y * d, x * d, d, d)
+            else
               this.ctx.fillRect(x * d, y * d, d, d)
             return cell
           },
@@ -77,7 +81,7 @@ export default {
       const board = createBoard(
         initialState,
         this.rules,
-        this.boardHeight
+        this.boardWidth
       )
       this.drawCanvas(board)
     },

src/components/MenuElementaryCA.vue

@@ -94,7 +94,8 @@ export default {
         "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}
+        "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",

src/components/MenuGeneralOptions.vue

@@ -40,6 +40,16 @@
           @input="updateRefreshRate"
         >
       </div>
+      <div class="form-field">
+        <label>Invert Drawing Direction
+          <input
+            type="checkbox"
+            :checked="drawingDirection === 'x'"
+            :value="drawingDirection"
+            @input="updateDrawingDirection"
+          >
+        </label>
+      </div>
     </form>    
   </MenuRow>
 </template>
@@ -56,7 +66,8 @@ export default {
     ...mapGetters({
       canvasWidth: 'getCanvasWidth',
       canvasHeight: 'getCanvasHeight',
-      refreshRate: 'getRefreshRate'
+      refreshRate: 'getRefreshRate',
+      drawingDirection: 'getDrawingDirection'
     })
   },
   methods: {
@@ -71,6 +82,12 @@ export default {
     updateRefreshRate: function(event) {
       const elem = event.target
       this.$store.commit('setRefreshRate', elem.value)
+    },
+    updateDrawingDirection: function(event) {
+      const elem = event.target
+      const value = elem.checked ? "x" : "y"
+      this.$store.commit('setDrawingDirection', value)
+      console.log(this.drawingDirection)
     }
   }
 }

src/store/index.js

@@ -25,7 +25,8 @@ export default new Vuex.Store({
     canvasHeight: 720,
     refreshRate: 300,
     initial1dState: "onecell",
-    activeMenu: "Elementary Cellular Automata"
+    activeMenu: "Elementary Cellular Automata",
+    drawingDirection: "y"
   },
   mutations: {
     update1dSingleRule(state, data) {
@@ -41,13 +42,13 @@ export default new Vuex.Store({
       state.drawing = data
     },
     setCanvasWidth(state, data) {
-      state.canvasWidth = data;
+      state.canvasWidth = data
     },
     setCanvasHeight(state, data) {
-      state.canvasHeight = data;
+      state.canvasHeight = data
     },
     setRefreshRate(state, data) {
-      state.refreshRate = data;
+      state.refreshRate = data
     },
     setInitial1dState(state, data) {
       state.initial1dState = data
@@ -55,6 +56,9 @@ export default new Vuex.Store({
     setActiveMenu(state, data) {
       state.activeMenu = data
     },
+    setDrawingDirection(state, data) {
+      state.drawingDirection = data
+    },
   },
   getters: {
     getCellProperties(state) {
@@ -83,6 +87,9 @@ export default new Vuex.Store({
     },
     getActiveMenu(state) {
       return state.activeMenu
+    },
+    getDrawingDirection(state) {
+      return state.drawingDirection
     }
   },
   actions: {