edit modals, import mirc from clipboard

src/Dashboard.vue

@@ -1,6 +1,8 @@
 <template>
   <div id="app">
     <NewAscii />
+    <EditAscii />
+    <PasteAscii />
 
     <context-menu :display="showContextMenu" ref="menu">
       <ul>
@@ -20,6 +22,13 @@
         >
           Export mIRC to File
         </li>
+        <li
+          class="ml-1"
+          @click="$store.commit('openModal', 'paste-modal')"
+          v-if="this.$store.getters.asciibirdMeta.length"
+        >
+          Import mIRC from Clipboard
+        </li>
         <li
           class="ml-1"
           @click="exportMirc('clipboard')"
@@ -35,6 +44,7 @@
           Save Asciibird State
         </li>
         <li @click="startImport('asb')" class="ml-1">Load Asciibird State</li>
+        <li @click="$store.commit('openModal', 'edit-ascii')" class="ml-1">Edit Current Ascii</li>
       </ul>
     </context-menu>
 
@@ -101,6 +111,8 @@ import ColourPicker from "./components/parts/ColourPicker.vue";
 import ContextMenu from "./components/parts/ContextMenu.vue";
 
 import NewAscii from "./components/modals/NewAscii.vue";
+import EditAscii from "./components/modals/EditAscii.vue";
+import PasteAscii from "./components/modals/PasteAscii.vue";
 import LZString from "lz-string";
 
 export default {
@@ -144,6 +156,8 @@ export default {
     ColourPicker,
     ContextMenu,
     NewAscii,
+    EditAscii,
+    PasteAscii
   },
   name: "Dashboard",
   data: () => ({
@@ -205,7 +219,7 @@ export default {
       // For ANSI we'll need to add back in the
       // type cariable here
       this.importType = type;
-      console.log(this.importType);
+      // console.log(this.importType);
       this.$refs.asciiInput.click();
     },
     // We can maybe try something different to import ANSI

src/components/modals/EditAscii.vue

@@ -0,0 +1,116 @@
+<template>
+  <t-modal
+    name="edit-ascii-modal"
+    :header="currentAsciiEditingTitle"
+    :clickToClose="false"
+    :escToClose="true"
+  >
+    Width
+    <t-input
+      type="number"
+      name="width"
+      v-model="forms.editAscii.width"
+      min="1"
+    />
+
+    Height
+    <t-input
+      type="number"
+      name="height"
+      v-model="forms.editAscii.height"
+      min="1"
+    />
+
+    Title
+    <t-input
+      type="text"
+      name="title"
+      v-model="forms.editAscii.title"
+      max="128"
+    />
+
+    <hr class="mt-5 mb-5">
+
+    <p>Block Size Compressed: {{ asciiStats.sizeCompressed }} </p>
+    <p>Block Size Uncompressed: {{ asciiStats.sizeUncompressed }} </p>
+    <p>Percent Compressed: {{ asciiStats.sizePercentage }}% </p>
+
+    <p>Undo: {{ asciiStats.redo }} </p>
+    <p>Redo: {{ asciiStats.undo }} </p>
+
+    <template v-slot:footer>
+      <div
+        class="flex justify-between"
+        @click="$modal.hide('edit-ascii-modal')"
+      >
+        <t-button type="button"> Cancel </t-button>
+        <t-button type="button" @click="updateAscii()">Update</t-button>
+      </div>
+    </template>
+  </t-modal>
+</template>
+
+<script>
+export default {
+  name: "EditAsciiModal",
+  created() {
+      this.forms.editAscii = this.currentAscii 
+  },
+  data: () => ({
+    forms: {
+      editAscii: {
+        width: 80,
+        height: 30,
+        title: "ascii",
+      },
+    },
+  }),
+  computed: {
+    showEditAsciiModal() {
+      return this.$store.getters.modalState.editAscii;
+    },
+    currentAscii() {
+      return this.$store.getters.currentAscii;
+    },
+    currentAsciiEditingTitle() {
+        return `Editing ASCII ${this.currentAscii.title}`;
+    },
+    currentAsciiBlocks() {
+        return this.$store.getters.currentAsciiBlocks
+    },
+    asciiStats() {
+        let compressed = (this.currentAscii.blocks.length / 1024).toFixed(2);
+        let uncompressed = ( JSON.stringify(this.currentAsciiBlocks).length / 1024).toFixed(2)
+        return {
+            sizeCompressed: compressed + 'kb',
+            sizeUncompressed: uncompressed + 'kb',
+            sizePercentage: (100 - (uncompressed / compressed)).toFixed(2),
+            redo: this.currentAscii.redo.length,
+            history: this.currentAscii.history.length
+        }
+    }
+  },
+  watch: {
+    showEditAsciiModal(val, old) {
+        if (val !== old) {
+            this.showEditModal();
+        }
+
+        // this.showEditModal();
+    },
+  },
+  methods: {
+    showEditModal() {
+    //   this.forms.editAscii.title = `Editing ASCII ${this.currentAscii.title}`;
+        this.forms.editAscii = this.currentAscii 
+      this.$modal.show("edit-ascii-modal");
+    },
+    updateAscii() {
+
+        this.$store.commit("updateAscii", this.forms.editAscii);
+        this.$modal.hide("edit-ascii-modal");
+        return
+    },
+  },
+};
+</script>

src/components/modals/PasteAscii.vue

@@ -0,0 +1,300 @@
+<template>
+  <t-modal
+    name="paste-ascii-modal"
+    header="Import from Clipboard"
+    :clickToClose="false"
+    :escToClose="true"
+  >
+    Title
+    <t-input
+      type="text"
+      name="title"
+      v-model="title"
+      max="128"
+    />
+
+    <t-textarea v-model="pasteContent" name="paste-ascii" rows="10" />
+
+    <template v-slot:footer>
+      <div
+        class="flex justify-between"
+        @click="$modal.hide('paste-ascii-modal')"
+      >
+        <t-button type="button"> Cancel </t-button>
+        <t-button type="button" @click="importPasteAscii()">Import Clipboard</t-button>
+      </div>
+    </template>
+  </t-modal>
+</template>
+
+<script>
+import LZString from "lz-string";
+
+export default {
+  name: "PasteAsciiModal",
+  created() {
+  },
+  data: () => ({
+    pasteContent: null,
+    title: "clipboard.txt"
+  }),
+  computed: {
+    showPasteModal() {
+      return this.$store.getters.modalState.pasteModal;
+    },
+  },
+  watch: {
+    showPasteModal(val, old) {
+        if (val !== old) {
+            this.pasteModal();
+        }
+
+        // this.showPasteModal();
+    },
+  },
+  methods: {
+    pasteModal() {
+
+
+      this.$modal.show("paste-ascii-modal");
+    },
+    create2DArray(rows) {
+      const arr = [];
+
+      for (let i = 0; i < rows; i++) {
+        arr[i] = [];
+      }
+
+      return arr;
+    },
+    importPasteAscii() {
+    const MIRC_MAX_COLOURS = this.$store.getters.mircColours.length;
+
+      // The current state of the Colours
+      let curBlock = {
+        fg: null,
+        bg: null,
+        char: null,
+      };
+
+      let contents = this.pasteContent
+      let filename = this.title
+
+      // set asciiImport as the entire file contents as a string
+      const asciiImport = contents
+        .split("\u0003\u0003")
+        .join("\u0003")
+        .split("\u000F").join("")
+        .split("\u0003\n").join("\n")
+        .split("\u0002\u0003").join("\u0003");
+
+      // This will end up in the asciibirdMeta
+      const finalAscii = {
+        width: false, // defined in: switch (curChar) case "\n":
+        height: asciiImport.split("\n").length,
+        title: filename,
+        key: this.$store.getters.nextTabValue,
+        blockWidth: 8 * this.$store.getters.blockSizeMultiplier,
+        blockHeight: 13 * this.$store.getters.blockSizeMultiplier,
+        blocks: this.create2DArray(asciiImport.split("\n").length),
+        history: [],
+        redo: [],
+        x: 8 * 35, // the dragable ascii canvas x
+        y: 13 * 2, // the dragable ascii canvas y
+      };
+
+      // Turn the entire ascii string into an array
+      let asciiStringArray = asciiImport.split("");
+      let linesArray = asciiImport.split("\n");
+
+      // The proper X and Y value of the block inside the ASCII
+      let asciiX = 0;
+      let asciiY = 0;
+
+      // used to determine colours
+      let colourChar1 = null;
+      let colourChar2 = null;
+      let parsedColour = null;
+
+      // This variable just counts the amount of colour and char codes to minus
+      // to get the real width
+      let widthOfColCodes = 0;
+
+      // Better for colourful asciis
+      let maxWidthLoop = 0;
+
+      // Used before the loop, better for plain text
+      let maxWidthFound = 0;
+
+      for(let i = 0; i < linesArray.length; i++) {
+        if (linesArray[i].length > maxWidthFound) {
+          maxWidthFound = linesArray[i].length;
+        }
+      }
+
+      while (asciiStringArray.length) {
+        const curChar = asciiStringArray[0];
+
+        // Defining a small finite state machine
+        // to detect the colour code
+        switch (curChar) {
+          case "\n":
+            // Reset the colours here on a new line
+            curBlock = { 
+              fg: null,
+              bg: null,
+              char: null,
+            };
+
+            if (linesArray[asciiY] && linesArray[asciiY].length > maxWidthLoop) {
+              maxWidthLoop = linesArray[asciiY].length;
+            }
+
+            // the Y value of the ascii
+            asciiY++;
+
+            // Calculate widths mirc asciis vs plain text
+            if (!finalAscii.width && widthOfColCodes > 0) {
+              finalAscii.width =
+                maxWidthLoop - widthOfColCodes; // minus \n for the proper width
+            } 
+            
+            
+            if (!finalAscii.width && widthOfColCodes === 0) {
+              // Plain text
+              finalAscii.width =
+                maxWidthFound; // minus \n for the proper width
+            }
+
+            // Resets the X value
+            asciiX = 0;
+
+            asciiStringArray.shift();
+            widthOfColCodes = 0;
+            break;
+
+          case "\u0003":
+            // Remove the colour char
+            asciiStringArray.shift();
+            widthOfColCodes++;
+
+            // Attempt to work out bg
+            colourChar1 = `${asciiStringArray[0]}`;
+            colourChar2 = `${asciiStringArray[1]}`;
+            parsedColour = parseInt(`${colourChar1}${colourChar2}`);
+
+            // Work out the 01, 02 double digit codes
+            if (parseInt(colourChar1) === 0 && parseInt(colourChar2) >= 0) {
+              asciiStringArray.shift();
+            }
+
+            if (isNaN(parsedColour)) {
+              curBlock.bg = parseInt(colourChar1);
+              widthOfColCodes += 1;
+              asciiStringArray.shift();
+            } else if (parsedColour <= MIRC_MAX_COLOURS && parsedColour >= 0) {
+              curBlock.fg = parseInt(parsedColour);
+              widthOfColCodes += parsedColour.toString().length;
+
+              asciiStringArray = asciiStringArray.slice(
+                parsedColour.toString().length,
+                asciiStringArray.length
+              );
+            }
+
+            // No background colour
+            if (asciiStringArray[0] !== ",") {
+              break;
+            } else {
+              // Remove , from array
+              widthOfColCodes += 1;
+              asciiStringArray.shift();
+            }
+
+            // Attempt to work out bg
+            colourChar1 = `${asciiStringArray[0]}`;
+            colourChar2 = `${asciiStringArray[1]}`;
+            parsedColour = parseInt(`${colourChar1}${colourChar2}`);
+
+            if (
+              !isNaN(colourChar1) &&
+              !isNaN(colourChar2) &&
+              parseInt(colourChar2) > parseInt(colourChar1) &&
+              !isNaN(parsedColour) &&
+              parseInt(parsedColour) < 10
+            ) {
+              parsedColour = parseInt(colourChar2);
+              widthOfColCodes += 1;
+              asciiStringArray.shift();
+            }
+
+            if (
+              parseInt(colourChar2) === parseInt(colourChar1) &&
+              parseInt(parsedColour) < 10
+            ) {
+              parsedColour = parseInt(colourChar1);
+              asciiStringArray.shift();
+              asciiStringArray.shift();
+              widthOfColCodes += 2;
+
+              curBlock.bg = parseInt(colourChar1);
+
+              break;
+            }
+
+            if (isNaN(parsedColour)) {
+              curBlock.bg = parseInt(colourChar1);
+              widthOfColCodes += 1;
+              asciiStringArray.shift();
+            } else if (parsedColour <= MIRC_MAX_COLOURS && parsedColour >= 0) {
+              curBlock.bg = parseInt(parsedColour);
+              widthOfColCodes += parsedColour.toString().length;
+
+              asciiStringArray = asciiStringArray.slice(
+                parsedColour.toString().length,
+                asciiStringArray.length
+              );
+
+              break;
+            }
+
+            break;
+
+          default:
+            curBlock.char = curChar;
+            asciiStringArray.shift();
+            asciiX++;
+
+            finalAscii.blocks[asciiY][asciiX - 1] = { ...curBlock };
+            break;
+        } // End Switch
+      } // End loop charPos
+
+      // Store the ASCII
+      finalAscii.blocks = LZString.compressToUTF16(
+        JSON.stringify(finalAscii.blocks)
+      );
+      finalAscii.history.push(finalAscii.blocks);
+      this.$store.commit("newAsciibirdMeta", finalAscii);
+
+      // To show the ASCII after importing we get the last key
+      // from the asciiBirdMeta array
+      const keys = this.$store.getters.asciibirdMeta
+        .map((v, k) => k)
+        .filter((i) => i !== undefined);
+
+      // Set the current tab and pop the array for the last value
+      this.currentTab = keys.pop();
+      this.$store.commit("changeTab", this.currentTab);
+
+      // Update the browsers title to the ASCII filename
+      document.title = `asciibird - ${this.$store.getters.currentAscii.title}`;
+
+        this.$modal.hide("paste-ascii-modal");
+        
+        this.pasteContent = null;
+        this.title = 'clipboard.txt';
+    },
+  },
+};
+</script>

src/components/parts/BrushPreview.vue

@@ -152,6 +152,8 @@ export default {
       this.delayRedrawCanvas();
     },
     drawPreview() {
+      this.ctx.clearRect(0, 0, 10000, 10000)
+      
       let brushHeight = this.brushSizeHeightPreview;
       let brushWidth = this.brushSizeWidthPreview;
 
@@ -187,6 +189,7 @@ export default {
       let middleX = Math.floor(brushWidth / 2);
       let yModifier = 0;
 
+
       // Recreate 2d array for preview
       for (y = 0; y < brushHeight; y++) {
         this.blocks[y] = [];

src/store/index.js

@@ -13,6 +13,9 @@ export default new Vuex.Store({
   state: {
     modalState: {
       newAscii: false,
+      editAscii: false,
+      pasteModal: false,
+      
     },
     // The various options of ASCIIBIRD will eventually
     // end up in its own modal I guess
@@ -217,8 +220,11 @@ export default new Vuex.Store({
       state.asciibirdMeta[state.tab].blocks = LZString.compressToUTF16(JSON.stringify(payload));
       state.asciibirdMeta[state.tab].redo = [];
     },
+    updateAscii(state, payload) {
+      state.asciibirdMeta[state.tab] = payload
+    },
     undoBlocks(state) {
-      if (state.asciibirdMeta[state.tab].history.length > 0) {
+      if (state.asciibirdMeta[state.tab].history.length > 1) {
         let previous = state.asciibirdMeta[state.tab].history.pop();
         state.asciibirdMeta[state.tab].blocks = previous
         state.asciibirdMeta[state.tab].redo.push(previous)
@@ -252,8 +258,13 @@ export default new Vuex.Store({
           state.modalState.newAscii = !state.modalState.newAscii
         break;
 
+        case 'edit-ascii':
+          state.modalState.editAscii = !state.modalState.editAscii
+        break;
 
-
+        case 'paste-modal':
+          state.modalState.pasteModal = !state.modalState.pasteModal
+        break;
 
       }
     }

src/views/Editor.vue

@@ -102,7 +102,8 @@ export default {
           console.log("ctrl y");
           e.preventDefault();
           // Fk it works :\
-          this.redo();this.redo();
+          this.redo();
+          this.redo();
         }
 
         // Ctrl C - copy blocks
@@ -117,40 +118,42 @@ export default {
             // this.drawBrush();
 
             console.log("ctrl c", this.selectBlocks);
-          }          
+          }
         }
 
-
         // Ctrl V - paste blocks
         // Not working
         if (e.key === "v" && (e.ctrlKey || e.metaKey)) {
           e.preventDefault();
 
           if (this.isSelecting && this.isSelected && this.selectBlocks.length) {
-                const BLOCK_WIDTH = this.currentAscii.blockWidth;
-                const BLOCK_HEIGHT = this.currentAscii.blockHeight;
-                let x = 0;
-                let y = 0;
+            const BLOCK_WIDTH = this.currentAscii.blockWidth;
+            const BLOCK_HEIGHT = this.currentAscii.blockHeight;
+            let x = 0;
+            let y = 0;
 
-                for (y = 0; y <= this.selectBlocks.height; y++) {
-                  canvasY = BLOCK_HEIGHT * y;
+            for (y = 0; y <= this.selectBlocks.height; y++) {
+              canvasY = BLOCK_HEIGHT * y;
 
-                  for (x = 0; x <= this.selectBlocks.width; x++) {
-                    if (this.currentAsciiBlocks[y] && this.currentAsciiBlocks[y][x]) {
-
-                      if (this.selectBlocks[y] && this.selectBlocks[y][x]) {
-                          this.currentAsciiBlocks[y][x] = { ... this.selectBlocks[y][x]}
-                      }
- 
-                    }
+              for (x = 0; x <= this.selectBlocks.width; x++) {
+                if (
+                  this.currentAsciiBlocks[y] &&
+                  this.currentAsciiBlocks[y][x]
+                ) {
+                  if (this.selectBlocks[y] && this.selectBlocks[y][x]) {
+                    this.currentAsciiBlocks[y][x] = {
+                      ...this.selectBlocks[y][x],
+                    };
                   }
                 }
+              }
+            }
 
             console.log("ctrl v", this.selectBlocks);
 
             this.$store.commit("updateAsciiBlocks", this.currentAsciiBlocks);
             this.delayRedrawCanvas();
-          }          
+          }
         }
       };
 
@@ -184,15 +187,6 @@ export default {
     selectBlocks: [],
   }),
   computed: {
-    canvasStyle() {
-      return `width:${this.canvas.width};height:${this.canvas.height};`;
-    },
-    undoIndex() {
-      return this.$store.getters.undoIndex ?? -1;
-    },
-    generateTitle() {
-      return this.$store.getters.currentAscii.title ?? "";
-    },
     currentAscii() {
       return this.$store.getters.currentAscii;
     },
@@ -246,20 +240,26 @@ export default {
     },
     brushBlocks() {
       return this.$store.getters.brushBlocks;
-    }
+    },
   },
   watch: {
     currentAscii(val, old) {
-      this.canvas.width =
-        this.$store.getters.currentAscii.width *
-        this.$store.getters.currentAscii.blockWidth;
-      this.canvas.height =
-        this.$store.getters.currentAscii.height *
-        this.$store.getters.currentAscii.blockHeight;
+      console.log("changed");
+      if (val !== old) {
+        this.onCanvasResize(100,100,
+          this.currentAscii.width * this.currentAscii.blockWidth,
+          this.currentAscii.height * this.currentAscii.blockHeight
+        );
 
-      this.delayRedrawCanvas();
+        this.canvas.width =
+          this.currentAscii.width * this.currentAscii.blockWidth;
+        this.canvas.height =
+          this.currentAscii.height * this.currentAscii.blockHeight;
 
-      document.title = `asciibird - ${this.currentAscii.title}`;
+        this.delayRedrawCanvas();
+
+        document.title = `asciibird - ${this.currentAscii.title}`;
+      }
     },
     currentTool() {
       switch (
@@ -346,9 +346,8 @@ export default {
 
               // Background block
               if (curBlock.bg !== null) {
-                this.ctx.fillStyle = this.$store.getters.mircColours[
-                  curBlock.bg
-                ];
+                this.ctx.fillStyle =
+                  this.$store.getters.mircColours[curBlock.bg];
                 this.ctx.fillRect(canvasX, canvasY, BLOCK_WIDTH, BLOCK_HEIGHT);
               } else {
                 this.ctx.fillStyle = "rgba(0, 0, 200, 0)";
@@ -356,16 +355,15 @@ export default {
 
               if (curBlock.char) {
                 if (curBlock.fg !== null) {
-                  this.ctx.fillStyle = this.$store.getters.mircColours[
-                    curBlock.fg
-                  ];
+                  this.ctx.fillStyle =
+                    this.$store.getters.mircColours[curBlock.fg];
                 } else {
                   this.ctx.fillStyle = "#000000";
                 }
 
                 this.ctx.fillText(
                   curBlock.char,
-                  canvasX - 1,
+                  canvasX + 0.5,
                   canvasY + BLOCK_HEIGHT - 3
                 );
               }
@@ -394,7 +392,7 @@ export default {
       const canvasBlockWidth = Math.floor(width / this.currentAscii.blockWidth);
 
       if (canvasBlockHeight > oldHeight || canvasBlockWidth > oldWidth) {
-        console.log({ canvasBlockHeight, oldHeight });
+        // console.log({ canvasBlockHeight, oldHeight });
 
         for (let y = 0; y < canvasBlockHeight; y++) {
           // New row
@@ -416,7 +414,7 @@ export default {
       }
 
       if (canvasBlockWidth > oldWidth) {
-        console.log({ canvasBlockWidth, oldWidth });
+        // console.log({ canvasBlockWidth, oldWidth });
       }
 
       this.canvas.width = width;
@@ -443,9 +441,10 @@ export default {
             this.textEditing.startX
           ]
         ) {
-          const targetBlock = this.currentAsciiBlocks[this.textEditing.startY][
-            this.textEditing.startX
-          ];
+          const targetBlock =
+            this.currentAsciiBlocks[this.textEditing.startY][
+              this.textEditing.startX
+            ];
 
           switch (char) {
             case "Backspace":
@@ -680,11 +679,11 @@ export default {
               this.selecting.endY = this.y;
 
               this.redrawSelect();
-            } 
+            }
 
             if (!this.isSelected) {
               this.redrawSelect();
-            }            
+            }
 
             break;
 
@@ -750,9 +749,10 @@ export default {
     drawTextIndicator() {
       this.clearToolCanvas();
 
-      let targetBlock = this.currentAsciiBlocks[this.textEditing.startY][
-        this.textEditing.startX
-      ];
+      let targetBlock =
+        this.currentAsciiBlocks[this.textEditing.startY][
+          this.textEditing.startX
+        ];
 
       let indicatorColour = targetBlock.bg === 0 ? 1 : 0;
 
@@ -779,10 +779,8 @@ export default {
 
       let targetBlock = this.currentAsciiBlocks[this.y][this.x];
 
-      let brushDiffX =
-        Math.floor(this.brushBlocks[0].length / 2) * BLOCK_WIDTH;
-      let brushDiffY =
-        Math.floor(this.brushBlocks.length / 2) * BLOCK_HEIGHT;
+      let brushDiffX = Math.floor(this.brushBlocks[0].length / 2) * BLOCK_WIDTH;
+      let brushDiffY = Math.floor(this.brushBlocks.length / 2) * BLOCK_HEIGHT;
 
       for (let y = 0; y < this.brushBlocks.length; y++) {
         for (let x = 0; x < this.brushBlocks[0].length; x++) {
@@ -803,9 +801,8 @@ export default {
             if (!plain) {
               if (this.canBg) {
                 if (brushBlock.bg !== null) {
-                  this.toolCtx.fillStyle = this.$store.getters.mircColours[
-                    brushBlock.bg
-                  ];
+                  this.toolCtx.fillStyle =
+                    this.$store.getters.mircColours[brushBlock.bg];
                 } else {
                   this.toolCtx.fillStyle = "#FFFFFF";
                 }
@@ -824,9 +821,8 @@ export default {
 
               if (this.canFg) {
                 if (brushBlock.fg !== null) {
-                  this.toolCtx.fillStyle = this.$store.getters.mircColours[
-                    brushBlock.fg
-                  ];
+                  this.toolCtx.fillStyle =
+                    this.$store.getters.mircColours[brushBlock.fg];
                 } else {
                   this.toolCtx.fillStyle = "#000000";
                 }
@@ -837,9 +833,8 @@ export default {
               }
 
               if (this.canText && brushBlock.char !== null) {
-                this.toolCtx.fillStyle = this.$store.getters.mircColours[
-                  brushBlock.fg
-                ];
+                this.toolCtx.fillStyle =
+                  this.$store.getters.mircColours[brushBlock.fg];
 
                 this.toolCtx.fillText(
                   brushBlock.char,
@@ -886,9 +881,10 @@ export default {
                 brushX / BLOCK_WIDTH
               ]
             ) {
-              targetBlock = this.currentAsciiBlocks[brushY / BLOCK_HEIGHT][
-                brushX / BLOCK_WIDTH
-              ];
+              targetBlock =
+                this.currentAsciiBlocks[brushY / BLOCK_HEIGHT][
+                  brushX / BLOCK_WIDTH
+                ];
 
               if (this.$store.getters.getTargetingFg) {
                 targetBlock.fg = null;