more better toolbar

2021-03-29 15:10:31 +10:00 · 2021-03-29 15:10:31 +10:00 · f97302acbc
parent 698b1f010e
commit f97302acbc
8 changed files with 211 additions and 198 deletions
--- a/src/Dashboard.vue
+++ b/src/Dashboard.vue
@ -65,12 +65,9 @@
        {{ value.title }}
      </t-button>

-      <Toolbar v-if="asciibirdMeta.length" />
-      <DebugPanel v-if="asciibirdMeta.length" />
-
-      <div class="border-gray-600">
-        <Editor v-if="asciibirdMeta.length" />
-      </div>
+      <Toolbar :canvas-x="canvasX" :canvas-y="canvasY" v-if="asciibirdMeta.length" />
+      <DebugPanel :canvas-x="canvasX" :canvas-y="canvasY" v-if="asciibirdMeta.length" />
+      <Editor @coordsupdate="updateCoords" v-if="asciibirdMeta.length" />
    </div>
  </div>
 </template>
@ -83,7 +80,7 @@ import Editor from "./views/Editor.vue";

 export default {
  async created() {
-    this.mircColors = this.$store.getters.mircColors;
+    this.mircColours = this.$store.getters.mircColours;
    this.charCodes = this.$store.getters.charCodes;
    this.asciibirdMeta = this.$store.getters.asciibirdMeta;

@ -113,19 +110,25 @@ export default {
    text: "ASCII",
    currentTab: 1,
    asciibirdMeta: [],
-    mircColors: null,
+    mircColours: null,
    charCodes: null,
    refresh: false,
    asciiImport: "",
    finalAscii: null,
    asciiArray: [],
    imageUrl: null,
-    parseColor: false,
-    colorCode: false,
+    parseColour: false,
+    ColourCode: false,
    importBlocks: null,
    importFormat: null,
+    canvasX: null,
+    canvasY: null,
  }),
  methods: {
+    updateCoords(value) {
+      this.canvasX = value.x
+      this.canvasY = value.y
+    },
    onImport() {
      const { files } = this.$refs.asciiInput;
      const filename = files[0].name;
@ -182,8 +185,8 @@ export default {
    //         var contentArray = ansiParse[l].content.split("");

    //         var curBlock = {
-    //           fg: this.mircColors.indexOf(`rgb(${ansiParse[l].fg})`),
-    //           bg: this.mircColors.indexOf(`rgb(${ansiParse[l].bg})`),
+    //           fg: this.mircColours.indexOf(`rgb(${ansiParse[l].fg})`),
+    //           bg: this.mircColours.indexOf(`rgb(${ansiParse[l].bg})`),
    //           char: null,
    //         };

@ -219,7 +222,7 @@ export default {
    //             continue;
    //           }

-    //           this.mircColors.indexOf(`rgb(${ansiParse[l].fg})`);
+    //           this.mircColours.indexOf(`rgb(${ansiParse[l].fg})`);

    //           curBlock.char = contentArray[k];

@ -236,9 +239,9 @@ export default {
    //   this.$store.commit("newAsciibirdMeta", this.finalAscii);
    // },
    mircAsciiImport(contents, filename) {
-      const MIRC_MAX_COLORS = this.mircColors.length;
+      const MIRC_MAX_ColourS = this.mircColours.length;

-      // The current state of the colors
+      // The current state of the Colours
      let curBlock = {
        fg: null,
        bg: null,
@ -266,9 +269,9 @@ export default {
      let asciiX = 0;
      let asciiY = 0;

-      let colorChar1 = null;
-      let colorChar2 = null;
-      var parsedColor = null;
+      let ColourChar1 = null;
+      let ColourChar2 = null;
+      var parsedColour = null;

      var theWidth = 0;

@ -306,27 +309,27 @@ export default {
            asciiStringArray.shift();
            theWidth++;

-            colorChar1 = `${asciiStringArray[0]}`;
-            colorChar2 = `${asciiStringArray[1]}`;
-            parsedColor = parseInt(`${colorChar1}${colorChar2}`);
+            ColourChar1 = `${asciiStringArray[0]}`;
+            ColourChar2 = `${asciiStringArray[1]}`;
+            parsedColour = parseInt(`${ColourChar1}${ColourChar2}`);

-            if (isNaN(parsedColor)) {
-              curBlock.bg = parseInt(colorChar1);
+            if (isNaN(parsedColour)) {
+              curBlock.bg = parseInt(ColourChar1);
              theWidth += 1;
              asciiStringArray.shift();
-            } else if (parsedColor <= MIRC_MAX_COLORS && parsedColor >= 0) {
-              curBlock.fg = parseInt(parsedColor);
-              theWidth += parsedColor.toString().length;
+            } else if (parsedColour <= MIRC_MAX_ColourS && parsedColour >= 0) {
+              curBlock.fg = parseInt(parsedColour);
+              theWidth += parsedColour.toString().length;

              asciiStringArray = asciiStringArray.slice(
-                parsedColor.toString().length,
+                parsedColour.toString().length,
                asciiStringArray.length
              );
            }

-            colorChar1 = null;
-            colorChar2 = null;
-            parsedColor = null;
+            ColourChar1 = null;
+            ColourChar2 = null;
+            parsedColour = null;

            // No background colour
            if (asciiStringArray[0] !== ",") {
@ -336,32 +339,32 @@ export default {
              asciiStringArray.shift();
            }

-            colorChar1 = `${asciiStringArray[0]}`;
-            colorChar2 = `${asciiStringArray[1]}`;
-            parsedColor = parseInt(`${colorChar1}${colorChar2}`);
+            ColourChar1 = `${asciiStringArray[0]}`;
+            ColourChar2 = `${asciiStringArray[1]}`;
+            parsedColour = parseInt(`${ColourChar1}${ColourChar2}`);

            // Work out the 01, 02
            if (
-              !isNaN(colorChar1) &&
-              !isNaN(colorChar2) &&
-              parseInt(colorChar2) > parseInt(colorChar1) &&
-              !isNaN(parsedColor) &&
-              parseInt(parsedColor) <= 10
+              !isNaN(ColourChar1) &&
+              !isNaN(ColourChar2) &&
+              parseInt(ColourChar2) > parseInt(ColourChar1) &&
+              !isNaN(parsedColour) &&
+              parseInt(parsedColour) <= 10
            ) {
-              parsedColor = parseInt(colorChar2);
+              parsedColour = parseInt(ColourChar2);
              asciiStringArray.shift();
            }

-            if (isNaN(parsedColor)) {
-              curBlock.bg = parseInt(colorChar1);
+            if (isNaN(parsedColour)) {
+              curBlock.bg = parseInt(ColourChar1);
              theWidth += 1;
              asciiStringArray.shift();
-            } else if (parsedColor <= MIRC_MAX_COLORS && parsedColor >= 0) {
-              curBlock.bg = parseInt(parsedColor);
-              theWidth += parsedColor.toString().length;
+            } else if (parsedColour <= MIRC_MAX_ColourS && parsedColour >= 0) {
+              curBlock.bg = parseInt(parsedColour);
+              theWidth += parsedColour.toString().length;

              asciiStringArray = asciiStringArray.slice(
-                parsedColor.toString().length,
+                parsedColour.toString().length,
                asciiStringArray.length
              );

@ -433,8 +436,6 @@ export default {
        }
      }

-      // console.log('payload', payload);
-
      this.$store.commit("newAsciibirdMeta", payload);
      this.$modal.hide("create-ascii-modal");
      this.refresh = !this.refresh;
--- a/src/components/Block.vue
+++ b/src/components/Block.vue
@ -22,7 +22,7 @@ export default {
      return `block-${this.data.x}-${this.data.y}`;
    },
    blockClass() {
-      return `max-width: ${this.blockWidth}px; min-width: ${this.blockWidth}px; max-height: ${this.blockHeight}px; min-height: ${this.blockHeight}px; color: '${this.data.fg}'; background-color: '${this.data.bg}';`;
+      return `max-width: ${this.blockWidth}px; min-width: ${this.blockWidth}px; max-height: ${this.blockHeight}px; min-height: ${this.blockHeight}px; Colour: '${this.data.fg}'; background-Colour: '${this.data.bg}';`;
    },
  },
 };
--- a/src/components/Colours.vue
+++ b/src/components/Colours.vue
@ -0,0 +1,56 @@
+<template>
+  <t-card>
+    <ColourPicker
+      v-if="
+        $store.getters.getToolbarState.isChoosingFg ||
+        $store.getters.getToolbarState.isChoosingBg
+      "
+    />
+
+    <t-button
+      type="button"
+      :style="`background-color: ${this.$store.getters.mircColours[$store.getters.getFgColour]} !important;`"
+      class="border-gray-200 p-1"
+      id="currentColourFg"
+      @click="$store.commit('changeIsUpdatingFg', true)"
+      >FG</t-button
+    >
+
+    <t-button
+      type="button"
+      :style="`background-color: ${this.$store.getters.mircColours[$store.getters.getBgColour]} !important;`"
+      class="border-gray-200 p-1"
+      id="currentColourBg"
+      @click="$store.commit('changeIsUpdatingBg', true)"
+      >BG</t-button
+    >
+
+    <t-button
+      type="button"
+      class="p-1 bg-white"
+      id="swapColour"
+      @click="swapColours()"
+    >
+      <font-awesome-icon :icon="['fas', 'sync']" />
+    </t-button>
+  </t-card>
+</template>
+
+<script>
+import ColourPicker from "./parts/ColourPicker.vue";
+
+export default {
+  name: "Colours",
+  components: { ColourPicker },
+  data: () => ({}),
+  methods: {
+    swapColours() {
+      let bg = this.$store.getters.getToolbarState.currentColourBg;
+      let fg = this.$store.getters.getToolbarState.currentColourFg;
+
+      this.$store.commit("changeColourFg", bg);
+      this.$store.commit("changeColourBg", fg);
+    },
+  },
+};
+</script>
--- a/src/components/DebugPanel.vue
+++ b/src/components/DebugPanel.vue
@ -12,9 +12,12 @@
    >
      <div style="height: 100%; min-height: 300px; max-height: 400px">
        <t-card header="Debug Info" style="height: 100%">
-          <p v-html="$store.getters.getCurrentTool"></p>
-          <p v-html="$store.getters.getFgColor"></p>
-          <p v-html="$store.getters.getBgColor"></p>
+          <p v-html="`Tool: ${$store.getters.getCurrentTool}`"></p>
+          <p v-html="`FgColour: ${$store.getters.getFgColour}`"></p>
+          <p v-html="`BgColor: ${$store.getters.getBgColour}`"></p>
+
+          <p v-html="`canvasX: ${canvasX}`"></p>
+          <p v-html="`canvasY: ${canvasY}`"></p>
        </t-card>
      </div>
    </vue-draggable-resizable>
@ -24,6 +27,7 @@
 export default {
  created() {},
  name: "DebugPanel",
+  props: ["canvasX", "canvasY"],
  data: () => ({
    floating: {
      width: 0,
--- a/src/components/Toolbar.vue
+++ b/src/components/Toolbar.vue
@ -14,122 +14,66 @@
      :x="0"
      :y="50"
    >
-      <div style="height: 100%; min-height: 500px; max-height: 700px">
-        <t-card header="Tools and Stuff" style="height: 100%">
-          <label class="flex ml-1">
-            <t-checkbox
-              name="targetingFg"
-              v-model="$store.getters.getToolbarState.targetingFg"
-              :disabled="
-                !$store.getters.getTargetingBg &&
-                !$store.getters.getTargetingText
-              "
-            />
-            <span class="text-sm">FG</span>
-          </label>
-          <label class="flex ml-1">
-            <t-checkbox
-              name="targetingBg"
-              v-model="$store.getters.getToolbarState.targetingBg"
-              :disabled="
-                !$store.getters.getTargetingFg &&
-                !$store.getters.getTargetingText
-              "
-              checked
-            />
-            <span class="text-sm">BG</span>
-          </label>
-          <label class="flex ml-1">
-            <t-checkbox
-              name="targetingText"
-              v-model="$store.getters.getToolbarState.targetingText"
-              :disabled="
-                !$store.getters.getTargetingFg && !$store.getters.getTargetingBg
-              "
-            />
-            <span class="text-sm">Text</span>
-          </label>
-
-          <t-card
-            v-if="
-              $store.getters.getToolbarState.isChoosingFg ||
-              $store.getters.getToolbarState.isChoosingBg
+      <t-card header="Tools and Stuff" style="height: 100%">
+        <label class="flex ml-1">
+          <t-checkbox
+            name="targetingFg"
+            v-model="$store.getters.getToolbarState.targetingFg"
+            :disabled="
+              !$store.getters.getTargetingBg && !$store.getters.getTargetingText
            "
-          >
-            <t-button
-              type="button"
-              v-for="(value, keyColors) in $store.getters.mircColors"
-              :key="keyColors"
-              :style="makeColorButtonClass(value)"
-              class="border-gray-200 p-2"
-              @click="onColorChange(keyColors)"
-            ></t-button>
-          </t-card>
-
-          <hr />
-
-          <t-button
-            type="button"
-            :style="
-              makeColorButtonClass(
-                $store.getters.mircColors[
-                  $store.getters.getToolbarState.currentColorFg
-                ]
-              )
+          />
+          <span class="text-sm">FG</span>
+        </label>
+        <label class="flex ml-1">
+          <t-checkbox
+            name="targetingBg"
+            v-model="$store.getters.getToolbarState.targetingBg"
+            :disabled="
+              !$store.getters.getTargetingFg && !$store.getters.getTargetingText
            "
-            class="border-gray-200 p-1"
-            id="currentColorFg"
-            @click="startColorChange(0)"
-            >FG</t-button
-          >
-
-          <t-button
-            type="button"
-            :style="
-              makeColorButtonClass(
-                $store.getters.mircColors[
-                  $store.getters.getToolbarState.currentColorBg
-                ]
-              )
+            checked
+          />
+          <span class="text-sm">BG</span>
+        </label>
+        <label class="flex ml-1">
+          <t-checkbox
+            name="targetingText"
+            v-model="$store.getters.getToolbarState.targetingText"
+            :disabled="
+              !$store.getters.getTargetingFg && !$store.getters.getTargetingBg
            "
-            class="border-gray-200 p-1"
-            id="currentColorBg"
-            @click="startColorChange(1)"
-            >BG</t-button
-          >
+          />
+          <span class="text-sm">Text</span>
+        </label>

-          <t-button
-            type="button"
-            class="p-1 bg-white"
-            id="swapColor"
-            @click="swapColors()"
-          >
-            <font-awesome-icon :icon="['fas', 'sync']" />
-          </t-button>
+        <hr />

-          <h5>Brushes and Shit</h5>
+        <Colours />

-          <t-button
-            type="button"
-            v-for="(value, keyToolbar) in $store.getters.getToolbarIcons"
-            :key="keyToolbar + 50"
-            class="border-gray-200 max-h-7 max-w-5 w-7"
-            @click="$store.commit('changeTool', value.name)"
-          >
-            <font-awesome-icon :icon="[value.fa, value.icon]" />
-          </t-button>
-        </t-card>
-      </div>
+        <h5>Brushes and Shit</h5>
+
+        <t-button
+          type="button"
+          v-for="(value, keyToolbar) in $store.getters.getToolbarIcons"
+          :key="keyToolbar + 50"
+          class="border-gray-200 max-h-7 max-w-5 w-7"
+          @click="$store.commit('changeTool', value.name)"
+        >
+          <font-awesome-icon :icon="[value.fa, value.icon]" />
+        </t-button>
+      </t-card>
    </vue-draggable-resizable>
  </div>
 </template>

-
-
 <script>
+import Colours from "./Colours.vue";
+
 export default {
  created() {},
  name: "Toolbar",
+  components: { Colours },

  data: () => ({
    floating: {
@ -148,38 +92,15 @@ export default {
      this.floating.width = width;
      this.floating.height = height;
    },
+    makeColourButtonClass(colour) {
+      return `background-colour: ${colour} !important;`;
+    },
    onDrag(x, y) {
      this.floating.x = x;
      this.floating.y = y;
    },
-    makeColorButtonClass(color) {
-      return `background-color: ${color} !important;`;
-    },
    makeToolbarButtonClass(tool) {
-      return "background-color: grey !important;";
-    },
-    swapColors() {
-      let bg = this.$store.getters.getToolbarState.currentColorBg;
-      let fg = this.$store.getters.getToolbarState.currentColorFg;
-
-      this.$store.commit("changeColorFg", bg);
-      this.$store.commit("changeColorBg", fg);
-    },
-    startColorChange(type) {
-      if (type === 0) {
-        this.$store.commit("changeIsUpdatingFg", true);
-      } else {
-        this.$store.commit("changeIsUpdatingBg", true);
-      }
-    },
-    onColorChange(color) {
-      if (this.$store.getters.getToolbarState.isChoosingFg) {
-        this.$store.commit("changeColorFg", color);
-      }
-
-      if (this.$store.getters.getToolbarState.isChoosingBg) {
-        this.$store.commit("changeColorBg", color);
-      }
+      return "background-colour: grey !important;";
    },
  },
 };
--- a/src/components/parts/ColourPicker.vue
+++ b/src/components/parts/ColourPicker.vue
@ -0,0 +1,30 @@
+<template>
+  <t-card>
+    <t-button
+      type="button"
+      v-for="(value, keyColours) in $store.getters.mircColours"
+      :key="keyColours"
+      :style="`background-color: ${$store.getters.mircColours[keyColours]} !important;`"
+      class="border-gray-200 p-2"
+      @click="onColourChange(keyColours)"
+    ></t-button>
+  </t-card>
+</template>
+
+<script>
+export default {
+  name: "ColourPicker",
+  async created() {},
+  methods: {
+    onColourChange(colour) {
+      if (this.$store.getters.getToolbarState.isChoosingFg) {
+        this.$store.commit("changeColourFg", colour);
+      }
+
+      if (this.$store.getters.getToolbarState.isChoosingBg) {
+        this.$store.commit("changeColourBg", colour);
+      }
+    },
+  },
+};
+</script>
--- a/src/store/index.js
+++ b/src/store/index.js
@ -27,7 +27,7 @@ export default new Vuex.Store({
    // 14 => 'grey',
    // 15 => 'lightgrey',

-    mircColors: [
+    mircColours: [
      'rgb(255,255,255)',
      'rgb(0,0,0)',
      'rgb(0,0,127)',
@ -47,7 +47,7 @@ export default new Vuex.Store({
    ],
    // White list of chars we want to accept, not at the moment
    // though, we just use this for random chars on new ascii
-    charCodes: ['*', '-', '=', '+', '^', '#'],
+    charCodes: [' ', '!', '"', '#', '$', '%', '&', '\'', '(', ')', '*', '+', ',', '-', '.', '/', '0', '1', '2', '3', '4', '5', '6', '7', '8', '9', ':', ';', '<', '=', '>', '?', '@', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z', '[', '\\', ']', '^', '_', '`', 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z', '{', '|', '}', '~', 'Ç', 'ü', 'é', 'â', 'ä', 'à', 'å', 'ç', 'ê', 'ë', 'è', 'ï', 'î', 'ì', 'Ä', 'Å', 'É', 'æ', 'Æ', 'ô', 'ö', 'ò', 'û', 'ù', 'ÿ', 'Ö', 'Ü', 'ø', '£', 'Ø', '×', 'ƒ', 'á', 'í', 'ó', 'ú', 'ñ', 'Ñ', 'ª', 'º', '¿', '®', '¬', '½', '¼', '¡', '«', '»', '░', '▒', '▓', '│', '┤', 'Á', 'Â', 'À', '©', '╣', '║', '╗', '╝', '¢', '¥', '┐', '└', '┴', '┬', '├', '─', '┼', 'ã', 'Ã', '╚', '╔', '╩', '╦', '╠', '═', '╬', '¤', 'ð', 'Ð', 'Ê', 'Ë', 'È', 'ı', 'Í', 'Î', 'Ï', '┘', '┌', '█', '▄', '¦', 'Ì', '▀', 'Ó', 'ß', 'Ô', 'Ò', 'õ', 'Õ', 'µ', 'þ', 'Þ', 'Ú', 'Û', 'Ù', 'ý', 'Ý', '¯', '´', '≡', '±', '‗', '¾', '¶', '§', '÷', '¸', '°', '¨', '·', '¹', '³', '²'],
    // Current tab user is viewing
    tab: 0,
    // asciibirdMeta holds all of the ASCII information for all the tabs
@ -89,8 +89,8 @@ export default new Vuex.Store({
      },
    ],
    toolbarState: {
-      currentColorFg: 0,
-      currentColorBg: 1,
+      currentColourFg: 0,
+      currentColourBg: 1,
      isChoosingFg: false,
      isChoosingBg: false,
      selectedFg: 0,
@ -107,13 +107,13 @@ export default new Vuex.Store({
    changeTab(state, payload) {
      state.tab = payload;
    },
-    changeColorFg(state, payload) {
-      state.toolbarState.currentColorFg = payload;
+    changeColourFg(state, payload) {
+      state.toolbarState.currentColourFg = payload;
      state.toolbarState.isUpdating = false
      state.toolbarState.isChoosingFg = false
    },
-    changeColorBg(state, payload) {
-      state.toolbarState.currentColorBg = payload;
+    changeColourBg(state, payload) {
+      state.toolbarState.currentColourBg = payload;
      state.toolbarState.isUpdating = false
      state.toolbarState.isChoosingBg = false
    },
@ -149,11 +149,11 @@ export default new Vuex.Store({
    getTargetingBg: state => state.toolbarState.targetingBg,
    getTargetingFg: state => state.toolbarState.targetingFg,
    getTargetingText: state => state.toolbarState.targetingText,
-    getFgColor: state => state.toolbarState.currentColorFg,
-    getBgColor: state => state.toolbarState.currentColorBg,
+    getFgColour: state => state.toolbarState.currentColourFg,
+    getBgColour: state => state.toolbarState.currentColourBg,
    currentTab: state => state.tab,
    charCodes: state => state.charCodes,
-    mircColors: state => state.mircColors,
+    mircColours: state => state.mircColours,
    currentAscii: state => state.asciibirdMeta[state.tab] ?? false,
    asciibirdMeta: state => state.asciibirdMeta,
    nextTabValue: state => state.asciibirdMeta.length,
--- a/src/views/Editor.vue
+++ b/src/views/Editor.vue
@ -46,7 +46,6 @@ import Block from "../components/Block.vue";

 export default {
  name: "Editor",
-  props: ["tab", "refresh"],
  components: { Block },
  mounted() {
    if (this.$store.getters.currentAscii.blocks) {
@ -137,7 +136,7 @@ export default {

              // Background block
              if (curBlock.bg !== null) {
-                this.ctx.fillStyle = this.$store.getters.mircColors[
+                this.ctx.fillStyle = this.$store.getters.mircColours[
                  curBlock.bg
                ];
                this.ctx.fillRect(canvasX, canvasY, BLOCK_WIDTH, BLOCK_HEIGHT);
@ -147,7 +146,7 @@ export default {

              if (curBlock.char) {
                if (curBlock.fg !== null) {
-                  this.ctx.fillStyle = this.$store.getters.mircColors[
+                  this.ctx.fillStyle = this.$store.getters.mircColours[
                    curBlock.fg
                  ];
                } else {
@ -222,11 +221,11 @@ export default {
            ];

            if (this.$store.getters.getTargetingFg) {
-              this.$store.commit("changeColorFg", curBlock.fg);
+              this.$store.commit("changeColourFg", curBlock.fg);
            }

            if (this.$store.getters.getTargetingBg) {
-              this.$store.commit("changeColorBg", curBlock.bg);
+              this.$store.commit("changeColourBg", curBlock.bg);
            }

            this.$store.commit(
@ -251,6 +250,8 @@ export default {
        this.y / this.$store.getters.currentAscii.blockHeight
      );

+      this.$emit('coordsupdate', {x: this.x, y: this.y})
+
      if (
        this.$store.getters.currentAscii.blocks[this.y] &&
        this.$store.getters.currentAscii.blocks[this.y][this.x]
@ -261,13 +262,13 @@ export default {
              if (this.$store.getters.getTargetingFg) {
                this.$store.getters.currentAscii.blocks[this.y][
                  this.x
-                ].fg = this.$store.getters.getFgColor;
+                ].fg = this.$store.getters.getFgColour;
              }

              if (this.$store.getters.getTargetingBg) {
                this.$store.getters.currentAscii.blocks[this.y][
                  this.x
-                ].bg = this.$store.getters.getBgColor;
+                ].bg = this.$store.getters.getBgColour;
              }
            }
            break;