improved colours and char pickers, display fixes

README.md

@@ -78,9 +78,8 @@ ASCIIBIRD is mostly usable. There are some bugs however to note at the moment. R
 * Drag ascii canvas then right click and it gets stuck - related to vue draggable
 ## Focusing on Now / Roadmap
 
-* Improve the char window to have a close button and border/bg
-
 * Arrow keys and space to use brush, eraser, 
+
 * More Context Menus (right click menu)
   * Brushes Canvas right click
   * ASCII right click
@@ -92,7 +91,7 @@ ASCIIBIRD is mostly usable. There are some bugs however to note at the moment. R
 
 * Ctrl + Z - Undo
 * Ctrl + Y - Redo
-
+`
 * Ctrl + Shift + C - Save to clipboard
 * Ctrl + Shift + F - Save to txt file
 

src/components/Colours.vue

@@ -5,7 +5,7 @@
       :style="`background-color: ${mircColours[currentFg]} !important;`"
       class="border-gray-200 w-12 h-12 text-2xl"
       id="currentColourFg"
-      @click="$store.commit('changeIsUpdatingFg', true)"
+      @click="$store.commit('changeIsUpdatingFg', ! toolbarState.isChoosingFg )"
     >
       FG
     </t-button>
@@ -15,7 +15,7 @@
       :style="`background-color: ${mircColours[currentBg]} !important;`"
       class="border-gray-200 w-12 h-12 text-2xl ml-2"
       id="currentColourBg"
-      @click="$store.commit('changeIsUpdatingBg', true)"
+      @click="$store.commit('changeIsUpdatingBg', ! toolbarState.isChoosingBg )"
     >
       BG
     </t-button>
@@ -35,7 +35,7 @@
       :style="`background-color: ${mircColours[currentBg]} !important;color: ${mircColours[currentFg]};`"
       class="border-gray-200 w-12 h-12 text-2xl ml-2"
       id="currentChar"
-      @click="$store.commit('changeIsUpdatingChar', true)"
+      @click="$store.commit('changeIsUpdatingChar', ! toolbarState.isChoosingChar )"
     >
       {{ toolbarState.selectedChar === " " ? "SP" : toolbarState.selectedChar }}
     </t-button>

src/components/parts/BrushPreview.vue

@@ -460,7 +460,9 @@ export default {
       }
 
       // We can eraser or fill
-      this.blocks[y][x].bg = this.currentBg;
+      if (this.canBg) this.blocks[y][x].bg = this.currentBg;
+      if (this.canFg) this.blocks[y][x].fg = this.currentFg;
+      if (this.canText) this.blocks[y][x].char = this.currentChar;
 
       // Fill in all four directions
       // Fill Prev row

src/components/parts/CharPicker.vue

@@ -1,28 +1,28 @@
 <template>
-  <vue-draggable-resizable
-    :x="100"
-    :y="100"
-    :w="1000"
-  >
-    <t-button
-      type="button"
-      v-for="(char, keyChar) in charCodes"
-      :key="keyChar"
-      class="border-gray-200 p-2 min-h-0"
-      @click="onCharChange(char)"
+  <vue-draggable-resizable :x="100" :y="100" :w="1100" :h="350">
+    <t-card
+    class="w-full h-full"
     >
-      {{ (char === " ") ? 'space' : char }}
-    </t-button>
+      <t-button
+        type="button"
+        v-for="(char, keyChar) in charCodes"
+        :key="keyChar"
+        class="border-gray-200 p-2 min-h-0"
+        @click="onCharChange(char)"
+      >
+        {{ char === " " ? "space" : char }}
+      </t-button>
+    </t-card>
   </vue-draggable-resizable>
 </template>
 
 <script>
-import { charCodes } from '../../ascii';
+import { charCodes } from "../../ascii";
 
 export default {
-  name: 'CharPicker',
+  name: "CharPicker",
   created() {},
-  props: ['canvasX', 'canvasY'],
+  props: ["canvasX", "canvasY"],
   computed: {
     charCodes() {
       return charCodes;
@@ -30,7 +30,7 @@ export default {
   },
   methods: {
     onCharChange(char) {
-      this.$store.commit('changeChar', char);
+      this.$store.commit("changeChar", char);
     },
   },
 };

src/components/parts/ColourPicker.vue

@@ -5,15 +5,7 @@
     :w="400"
     :h="278"
   >
-    <t-card>
-      <t-button
-        type="button"
-        class="border-gray-200 p-1"
-        @click="close()"
-      >
-        X
-      </t-button><br>
-
+    <t-card class="w-full h-full">
       <span
         v-for="(value, keyColours) in mircColours"
         :key="keyColours"

src/components/parts/KeyboardShortcuts.vue

@@ -48,6 +48,14 @@ export default {
         return;
       }
 
+      // Escape to leave colour or char picker
+      if (e.key === "Escape" && (this.toolbarState.isChoosingChar || this.toolbarState.isChoosingBg || this.toolbarState.isChoosingFg)) {
+          this.$store.commit('changeIsUpdatingFg', false )
+          this.$store.commit('changeIsUpdatingBg', false )
+          this.$store.commit('changeIsUpdatingChar', false )
+        return;
+      }
+
       // Change char when car picker is open
       if (
         this.toolbarState.isChoosingChar &&

src/components/parts/MainBrushCanvas.vue

@@ -119,7 +119,10 @@ export default {
     },
     canvasRef() {
       return this.$refs.brushcanvas;
-    }
+    },
+    gridView() {
+      return this.toolbarState.gridView;
+    },
   },
   watch: {
     brushBlocks() {
@@ -155,6 +158,11 @@ export default {
     blockSizeMultiplier() {
       this.delayRedrawCanvas();
     },
+    gridView(val, old) {
+      if (val !== old) {
+        this.delayRedrawCanvas();
+      }
+    },
   },
   methods: {
     getBlocksWidth(blocks) {
@@ -163,6 +171,33 @@ export default {
     filterNullBlocks(blocks) {
       return filterNullBlocks(blocks);
     },
+    drawGrid() {
+      let ctx = this.ctx;
+      let w = this.canvasRef.width;
+      let h = this.canvasRef.height;
+
+      ctx.beginPath();
+
+      for (var x = 0; x <= w; x += blockWidth) {
+        ctx.moveTo(x, 0);
+        ctx.lineTo(x, h);
+      }
+      
+      ctx.strokeStyle = "rgba(0, 0, 0, 1)";
+      ctx.lineWidth = 1;
+      ctx.setLineDash([1]);
+      
+      ctx.stroke();
+      
+      ctx.beginPath();
+      for (var y = 0; y <= h; y += blockHeight) {
+        ctx.moveTo(0, y);
+        ctx.lineTo(w, y);
+      }
+      
+      ctx.stroke();
+    },
+
     drawPreview() {
       this.ctx.clearRect(0, 0, this.canvasRef.width, this.canvasRef.height);
       this.ctx.fillStyle = this.mircColours[1];
@@ -207,6 +242,13 @@ export default {
             }
           }
         }
+
+
+        if (this.gridView) {
+          this.drawGrid();
+        }
+
+
       }
     },
     delayRedrawCanvas() {

src/store/index.js

@@ -72,10 +72,10 @@ export default new Vuex.Store({
       gridView: false,
     },
     debugPanelState: {
-      x: blockWidth * 130,
-      y: blockHeight * 2,
-      h: blockHeight * 50,
-      w: blockWidth * 25,
+      x: blockWidth * 40,
+      y: blockHeight * 20,
+      h: blockHeight * 20,
+      w: blockWidth * 40,
       visible: false,
     },
     blockSizeMultiplier: 1,