baked in splash ascii, close tabs with confirmation dialog

README.md

@@ -24,8 +24,6 @@
 * Cut / copy then paste with ctrl v
 * drawBrush preview flip / rotate
 * Type letter when choosing char, leave char panel open after
-* close tabs
-* Enhance how the select tool looks and and make selected blocks more obvious
  
 * Modals
  * Edit current ascii
@@ -48,11 +46,14 @@
 * Ctrl + M - New ASCII (lol @ cannot override ctrl n ?!)
 * Ctrl + E - Edit ASCII
 * Ctrl + P - Paste ASCII from Clipboard
+* Ctrl + G - Toggle grid mode
 
 * Ctrl + Shift + C - Save to clipboard
 * Ctrl + Shift + F - Save to txt file
+
 ## Brush and Toolbar
 
+* Ctrl + B - Show / hide brushes library
 * Ctrl + ] - Increase brush size
 * Ctrl + [ - Decrease brush size
 

src/Dashboard.vue

@@ -64,15 +64,21 @@
     />
 
     <template v-if="asciibirdMeta.length">
-      <t-button
-        v-for="(value, key) in asciibirdMeta"
-        :key="key"
-        class="ml-1"
-        @click="changeTab(key, value)"
-        :disabled="false"
-      >
-        {{ value.title }}
-      </t-button>
+      <span v-for="(value, key) in asciibirdMeta" :key="key" class="mr-2">
+        
+          <t-button class="p-1" @click="changeTab(key, value)">
+            {{ value.title }}
+
+              <t-button
+                class="text-sm pl-1 p-1 h-8 rounded-xl text-white border border-transparent shadow-sm hover:bg-blue-500 bg-gray-600"
+                @click="closeTab(key)"
+              >
+                X
+              </t-button>
+          </t-button>
+
+        
+      </span>
 
       <Toolbar :canvas-x="canvasX" :canvas-y="canvasY" />
       <DebugPanel
@@ -90,11 +96,22 @@
       <BrushLibrary v-if="brushLibraryState.visible" />
     </template>
     <template v-else>
-      <div style="left: 35%; top: 15%; position: absolute; z-index: -2">
-        <h1 style="font-size: 72px; text-align: center">ASCIIBIRD</h1>
-        <h1 style="font-size: 13px; text-align: center">
-          Right click to start
-        </h1>
+      <div
+        class="
+          absolute
+          top-1/2
+          left-1/2
+          transform
+          -translate-x-1/2 -translate-y-1/2
+          text-center
+        "
+        @mouseup.right="openContextMenu"
+        @contextmenu.prevent
+      >
+        <h1 class="text-4xl">ASCIIBIRD</h1>
+        <h3>Right click to start</h3>
+
+        <BrushCanvas :blocks="splashAscii" />
       </div>
     </template>
   </div>
@@ -115,12 +132,15 @@ import NewAscii from "./components/modals/NewAscii.vue";
 import EditAscii from "./components/modals/EditAscii.vue";
 import PasteAscii from "./components/modals/PasteAscii.vue";
 
+import BrushCanvas from "./components/parts/BrushCanvas.vue";
+
 import {
   parseMircAscii,
   toolbarIcons,
   exportMirc,
   downloadFile,
   checkForGetRequest,
+  splashAscii,
 } from "./ascii";
 
 export default {
@@ -139,6 +159,7 @@ export default {
     EditAscii,
     PasteAscii,
     BrushLibrary,
+    BrushCanvas,
   },
   name: "Dashboard",
   data: () => ({
@@ -151,6 +172,9 @@ export default {
     showContextMenu: false,
   }),
   computed: {
+    splashAscii() {
+      return splashAscii;
+    },
     currentTool() {
       return toolbarIcons[this.$store.getters.currentTool] ?? null;
     },
@@ -193,6 +217,9 @@ export default {
     brushLibraryState() {
       return this.$store.getters.brushLibraryState;
     },
+    currentAscii() {
+      return this.$store.getters.currentAscii;
+    },
   },
   methods: {
     openContextMenu(e) {
@@ -290,6 +317,19 @@ export default {
       this.currentTab = key;
       this.$store.commit("changeTab", key);
     },
+    closeTab(key) {
+      this.$dialog
+        .confirm({
+          title: `Close ${this.currentAscii.name}?`,
+          text: "This action cannot be undone and the ASCII will be gone.",
+          icon: "info",
+        })
+        .then((result) => {
+          if (result.isOk) {
+            this.$store.commit("closeTab", key);
+          }
+        });
+    },
     clearCache() {
       localStorage.clear();
       window.location.href = "/";

src/components/BrushLibrary.vue

@@ -57,6 +57,15 @@
                     size="lg"
                     class="p-1 mx-1"
                 /></t-button>
+
+                <t-button
+                  type="button"
+                  @click="removeFromHistory(decompressBlock(brush.blocks))"
+                  ><font-awesome-icon
+                    :icon="['fas', 'trash']"
+                    size="lg"
+                    class="p-1 mx-1 right-auto"
+                /></t-button>
               </t-card>
             </div>
           </div>
@@ -165,6 +174,9 @@ export default {
     removeFromLibrary(value) {
       this.$store.commit("removeBrushLibrary", value);
     },
+    removeFromHistory(value) {
+      this.$store.commit("removeBrushHistory", value);
+    },
     onResize(x, y, w, h) {
       this.panel.x = x;
       this.panel.y = y;

src/components/parts/BrushCanvas.vue

@@ -150,9 +150,6 @@ export default {
       this.ctx.clearRect(0, 0, this.canvasRef.width, this.canvasRef.height);
       this.ctx.fillStyle = this.mircColours[1];
 
-      const BLOCK_WIDTH = this.currentAscii.blockWidth;
-      const BLOCK_HEIGHT = this.currentAscii.blockHeight;
-
       // hack font for ascii shout outs 2 beenz
       this.ctx.font = "13px Hack";
 
@@ -171,10 +168,10 @@ export default {
                 this.ctx.fillStyle = this.mircColours[curBlock.bg];
 
                 this.ctx.fillRect(
-                  x * BLOCK_WIDTH,
-                  y * BLOCK_HEIGHT,
-                  BLOCK_WIDTH,
-                  BLOCK_HEIGHT
+                  x * blockWidth,
+                  y * blockHeight,
+                  blockWidth,
+                  blockHeight
                 );
               }
 
@@ -186,8 +183,8 @@ export default {
                 this.ctx.fillStyle = this.mircColours[curBlock.fg];
                 this.ctx.fillText(
                   curBlock.char,
-                  x * BLOCK_WIDTH - 1,
-                  y * BLOCK_HEIGHT + BLOCK_HEIGHT - 3
+                  x * blockWidth - 1,
+                  y * blockHeight + blockHeight - 3
                 );
               }
             }

src/store/index.js

@@ -228,6 +228,13 @@ export default new Vuex.Store({
         return item.hash !== hashValue
       });
     },
+    removeBrushHistory(state, payload) {
+      let hashValue = cyrb53(JSON.stringify(payload))
+
+      state.brushHistory = state.brushHistory.filter(function (item) {
+        return item.hash !== hashValue
+      });
+    },
     openModal(state, type) {
       switch (type) {
         case 'new-ascii':
@@ -258,6 +265,14 @@ export default new Vuex.Store({
           break;
       }
     },
+    closeTab(state, tab) {
+      state.asciibirdMeta.splice(tab, 1);
+
+      // If we closed the tab we are viewing jump to the end tab
+      if (tab === state.tab) {
+        state.tab = state.asciibirdMeta.length - 1
+      }
+    },
   },
   getters: {
     state: (state) => state,

src/views/Editor.vue

@@ -465,6 +465,7 @@ export default {
                 this.ctx.fillRect(canvasX, canvasY, BLOCK_WIDTH, BLOCK_HEIGHT);
 
                 if (this.gridView) {
+                  
                   this.ctx.setLineDash([1]);
                   this.ctx.strokeStyle = "rgba(0, 0, 0, 0.2)"
                   this.ctx.strokeRect(