chars and char select

2021-03-29 18:21:23 +10:00 · 2021-03-29 18:21:23 +10:00 · 0cdebf0d0a
commit 0cdebf0d0a
--- a/src/components/Colours.vue
+++ b/src/components/Colours.vue
@ -33,15 +33,33 @@
    >
      <font-awesome-icon :icon="['fas', 'sync']" />
    </t-button>
+
+
+    <t-button
+      type="button"
+      :style="`background-color: ${this.$store.getters.mircColours[$store.getters.getBgColour]} !important;color: ${this.$store.getters.mircColours[$store.getters.getFgColour]};`"
+      class="border-gray-200 p-1"
+      id="currentChar"
+      @click="$store.commit('changeIsUpdatingChar', true)"
+      >{{ `${$store.getters.getToolbarState.selectedChar}` }}</t-button
+    >
+
+    <CharPicker
+      v-if="
+        $store.getters.getToolbarState.isChoosingChar
+      "
+    />
+
  </t-card>
 </template>

 <script>
 import ColourPicker from "./parts/ColourPicker.vue";
+import CharPicker from "./parts/CharPicker.vue";

 export default {
  name: "Colours",
-  components: { ColourPicker },
+  components: { ColourPicker, CharPicker },
  data: () => ({}),
  methods: {
    swapColours() {
--- a/src/components/DebugPanel.vue
+++ b/src/components/DebugPanel.vue
@ -11,10 +11,11 @@
      :y="350"
    >
      <div style="height: 100%; min-height: 300px; max-height: 400px">
-        <t-card header="Debug Info" style="height: 100%">
+        <t-card header="Debug Info" style="height: 100%;">
          <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="`Char: ${$store.getters.getToolbarState.selectedChar}`"></p>

          <p v-html="`canvasX: ${canvasX}`"></p>
          <p v-html="`canvasY: ${canvasY}`"></p>
--- a/src/components/Toolbar.vue
+++ b/src/components/Toolbar.vue
@ -20,7 +20,7 @@
            name="targetingFg"
            v-model="$store.getters.getToolbarState.targetingFg"
            :disabled="
-              !$store.getters.getTargetingBg && !$store.getters.getTargetingText
+              !$store.getters.getTargetingBg && !$store.getters.getTargetingChar
            "
          />
          <span class="text-sm">FG</span>
@ -30,7 +30,7 @@
            name="targetingBg"
            v-model="$store.getters.getToolbarState.targetingBg"
            :disabled="
-              !$store.getters.getTargetingFg && !$store.getters.getTargetingText
+              !$store.getters.getTargetingFg && !$store.getters.getTargetingChar
            "
            checked
          />
@ -38,8 +38,8 @@
        </label>
        <label class="flex ml-1">
          <t-checkbox
-            name="targetingText"
-            v-model="$store.getters.getToolbarState.targetingText"
+            name="targetingChar"
+            v-model="$store.getters.getToolbarState.targetingChar"
            :disabled="
              !$store.getters.getTargetingFg && !$store.getters.getTargetingBg
            "
@ -57,7 +57,7 @@
          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"
+          :class="`border-gray-200 max-h-7 max-w-5 w-7  ${($store.getters.getCurrentTool == value ? 'border-gray-900' : 'border-gray-200')}`"
          @click="$store.commit('changeTool', value.name)"
        >
          <font-awesome-icon :icon="[value.fa, value.icon]" />
@ -92,16 +92,10 @@ 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;
    },
-    makeToolbarButtonClass(tool) {
-      return "background-colour: grey !important;";
-    },
  },
 };
 </script>
--- a/src/components/parts/CharPicker.vue
+++ b/src/components/parts/CharPicker.vue
@ -0,0 +1,23 @@
+<template>
+  <t-card>
+    <t-button
+      type="button"
+      v-for="(char, keyChar) in $store.getters.charCodes"
+      :key="keyChar"
+      class="border-gray-200 p-2 min-h-0"
+      @click="onCharChange(char)"
+    >{{ char }}</t-button>
+  </t-card>
+</template>
+
+<script>
+export default {
+  name: "CharPicker",
+  async created() {},
+  methods: {
+    onCharChange(char) {
+        this.$store.commit("changeChar", char);
+    },
+  },
+};
+</script>
--- a/src/store/index.js
+++ b/src/store/index.js
@ -93,13 +93,15 @@ export default new Vuex.Store({
      currentColourBg: 1,
      isChoosingFg: false,
      isChoosingBg: false,
+      isChoosingChar: false,
      selectedFg: 0,
      selectedBg: 1,
+      selectedChar: null,
      isUpdating: false,
      currentTool: 'default',
      targetingFg: false,
      targetingBg: true,
-      targetingText: false,
+      targetingChar: false,
    },
    blockSizeMultiplier: 1,
  },
@ -117,6 +119,11 @@ export default new Vuex.Store({
      state.toolbarState.isUpdating = false
      state.toolbarState.isChoosingBg = false
    },
+    changeChar(state, payload) {
+      state.toolbarState.selectedChar = payload;
+      state.toolbarState.isUpdating = false
+      state.toolbarState.isChoosingChar = false
+    },
    changeTool(state, payload) {
      state.toolbarState.currentTool = payload;
    },
@ -126,14 +133,17 @@ export default new Vuex.Store({
    changeIsUpdatingBg(state, payload) {
      state.toolbarState.isChoosingBg = payload
    },
+    changeIsUpdatingChar(state, payload) {
+      state.toolbarState.isChoosingChar = payload
+    },
    changeTargetingFg(state, payload) {
      state.toolbarState.targetingFg = payload
    },
    changeTargetingBg(state, payload) {
      state.toolbarState.targetingBg = payload
    },
-    changeTargetingText(state, payload) {
-      state.toolbarState.targetingText = payload;
+    changeTargetingChar(state, payload) {
+      state.toolbarState.targetingChar = payload;
    },
    newAsciibirdMeta(state, payload) {
      state.asciibirdMeta.push(payload);
@ -148,9 +158,10 @@ export default new Vuex.Store({
    getCurrentTool: state => state.toolbarState.currentTool,
    getTargetingBg: state => state.toolbarState.targetingBg,
    getTargetingFg: state => state.toolbarState.targetingFg,
-    getTargetingText: state => state.toolbarState.targetingText,
+    getTargetingChar: state => state.toolbarState.targetingChar,
    getFgColour: state => state.toolbarState.currentColourFg,
    getBgColour: state => state.toolbarState.currentColourBg,
+    getSelectedChar: state => state.toolbarState.selectedChar,
    currentTab: state => state.tab,
    charCodes: state => state.charCodes,
    mircColours: state => state.mircColours,
--- a/src/views/Editor.vue
+++ b/src/views/Editor.vue
@ -228,6 +228,10 @@ export default {
              this.$store.commit("changeColourBg", curBlock.bg);
            }

+            if (this.$store.getters.getTargetingChar) {
+              this.$store.commit("changeChar", curBlock.char);
+            }
+
            this.$store.commit(
              "changeTool",
              this.$store.getters.getCurrentTool
@ -260,15 +264,15 @@ export default {
          case "brush":
            if (this.canTool) {
              if (this.$store.getters.getTargetingFg) {
-                this.$store.getters.currentAscii.blocks[this.y][
-                  this.x
-                ].fg = this.$store.getters.getFgColour;
+                this.$store.getters.currentAscii.blocks[this.y][this.x].fg = this.$store.getters.getFgColour;
              }

              if (this.$store.getters.getTargetingBg) {
-                this.$store.getters.currentAscii.blocks[this.y][
-                  this.x
-                ].bg = this.$store.getters.getBgColour;
+                this.$store.getters.currentAscii.blocks[this.y][this.x].bg = this.$store.getters.getBgColour;
+              }
+
+              if (this.$store.getters.getTargetingChar) {
+                this.$store.getters.currentAscii.blocks[this.y][this.x].char = this.$store.getters.getSelectedChar;
              }
            }
            break;
@ -287,7 +291,7 @@ export default {
                ].bg = null;
              }

-              if (this.$store.getters.getTargetingText) {
+              if (this.$store.getters.getTargetingChar) {
                this.$store.getters.currentAscii.blocks[this.y][
                  this.x
                ].char = null;