better width detection inside Dashboard.vue mirc import
This commit is contained in:
bovenliggende
1fea25e219
commit
dfd5208ca8
|
|
@ -126,56 +126,75 @@ export default {
|
|||
this.asciiImport = fileReader.readAsText(files[0]);
|
||||
|
||||
fileReader.addEventListener("load", () => {
|
||||
// Max available colors
|
||||
const MIRC_MAX_COLORS = this.$store.getters.mircColors.length;
|
||||
|
||||
// The current state of the colors
|
||||
let curBlock = {
|
||||
fg: null,
|
||||
bg: null,
|
||||
char: null,
|
||||
};
|
||||
|
||||
// Object clone this to reset the block state
|
||||
let emptyCurBlock = {
|
||||
fg: null,
|
||||
bg: null,
|
||||
char: null,
|
||||
};
|
||||
|
||||
// set asciiImport as the entire file contents as a string
|
||||
this.asciiImport = fileReader.result;
|
||||
|
||||
// This will end up in the asciibirdMeta
|
||||
this.finalAscii = {
|
||||
width: 0, // defined later
|
||||
height: this.asciiImport.split("\n").length + 1,
|
||||
width: false, // defined in: switch (curChar) case "\n":
|
||||
height: this.asciiImport.split("\n").length,
|
||||
title: filename,
|
||||
blockWidth: 16,
|
||||
blockHeight: 26,
|
||||
blocks: this.create2DArray(this.asciiImport.length),
|
||||
key: this.$store.getters.nextTabValue,
|
||||
blockWidth: 8 * this.$store.getters.blockSizeMultiplier,
|
||||
blockHeight: 13 * this.$store.getters.blockSizeMultiplier,
|
||||
blocks: this.create2DArray(this.asciiImport.split("\n").length),
|
||||
};
|
||||
|
||||
// Turn the entire ascii string into an array
|
||||
let asciiStringArray = this.asciiImport.split("");
|
||||
|
||||
// The proper X and Y value of the block inside the ASCII
|
||||
let asciiX = 0;
|
||||
let asciiY = 0;
|
||||
|
||||
// used the calculate the width
|
||||
let colorCharWidth = 0;
|
||||
|
||||
for (
|
||||
let charPos = 0;
|
||||
charPos < this.asciiImport.length - 1;
|
||||
charPos++
|
||||
) {
|
||||
let curChar = asciiStringArray[charPos];
|
||||
|
||||
// Defining a small finite state machine
|
||||
// Detect the colour code
|
||||
|
||||
// to detect the colour code
|
||||
switch (curChar) {
|
||||
case "\n":
|
||||
// Reset the colours here on a new line
|
||||
curBlock = Object.assign(curBlock, emptyCurBlock);
|
||||
asciiY++;
|
||||
|
||||
// We can determine the width at the end of the first line
|
||||
if (!this.finalAscii.width) {
|
||||
this.finalAscii.width = asciiX - 1; // minus \n for the proper width
|
||||
}
|
||||
|
||||
colorCharWidth = 0;
|
||||
asciiX = 0;
|
||||
break;
|
||||
|
||||
case "\u0003":
|
||||
curBlock = Object.assign(curBlock, emptyCurBlock);
|
||||
let firstColor = true;
|
||||
|
||||
// Pick up the colour here, then set it
|
||||
charPos++;
|
||||
|
||||
|
|
@ -189,11 +208,13 @@ export default {
|
|||
curBlock.fg = `${asciiStringArray[k]}${
|
||||
asciiStringArray[k + 1]
|
||||
}`;
|
||||
firstColor = false
|
||||
colorCharWidth += 2;
|
||||
firstColor = false;
|
||||
} else {
|
||||
//
|
||||
curBlock.fg = `${asciiStringArray[k]}`;
|
||||
firstColor = false
|
||||
colorCharWidth++;
|
||||
firstColor = false;
|
||||
}
|
||||
|
||||
if (!firstColor && asciiStringArray[k] !== ",") {
|
||||
|
|
@ -208,9 +229,11 @@ export default {
|
|||
curBlock.bg = `${asciiStringArray[k]}${
|
||||
asciiStringArray[k + 1]
|
||||
}`;
|
||||
colorCharWidth += 2;
|
||||
} else {
|
||||
//
|
||||
curBlock.bg = `${asciiStringArray[k]}`;
|
||||
colorCharWidth++;
|
||||
}
|
||||
|
||||
curBlock.char = `${asciiStringArray[k + 1]}`;
|
||||
|
|
@ -218,7 +241,13 @@ export default {
|
|||
}
|
||||
}
|
||||
|
||||
// This gets the final color code width
|
||||
// This should add the , to the width and we already have the colors
|
||||
colorCharWidth++;
|
||||
// asciiX--;
|
||||
|
||||
// Check colours
|
||||
// Given how we have the code above we may not need this
|
||||
if (
|
||||
!isNaN(curBlock.fg) &&
|
||||
curBlock.fg >= 0 &&
|
||||
|
|
@ -229,6 +258,7 @@ export default {
|
|||
) {
|
||||
// Block is good
|
||||
// console.log(`curBlock GOOD`, curBlock);
|
||||
asciiX--;
|
||||
} else {
|
||||
console.log(`curBlock BAD`, curBlock);
|
||||
}
|
||||
|
|
@ -260,11 +290,6 @@ export default {
|
|||
this.$modal.show("create-ascii-modal");
|
||||
},
|
||||
changeTab(key, value) {
|
||||
// Update the router title
|
||||
// if (this.$router.params[0] !== key) {
|
||||
// this.$router.push({ name: "editor", params: { ascii: key } });
|
||||
// }/
|
||||
|
||||
// Update the tab index in vuex store
|
||||
this.$store.commit("changeTab", key);
|
||||
},
|
||||
|
|
|
|||
|
|
@ -55,7 +55,8 @@ export default new Vuex.Store({
|
|||
toolbarState: {
|
||||
currentColor: 0,
|
||||
currentTool : null,
|
||||
}
|
||||
},
|
||||
blockSizeMultiplier: 1,
|
||||
},
|
||||
mutations: {
|
||||
changeTab(state, payload) {
|
||||
|
|
@ -79,6 +80,8 @@ export default new Vuex.Store({
|
|||
mircColors: state => state.mircColors,
|
||||
currentAscii: state => state.asciibirdMeta[state.tab] ?? false,
|
||||
asciibirdMeta: state => state.asciibirdMeta,
|
||||
nextTabValue: state => state.asciibirdMeta.length,
|
||||
blockSizeMultiplier: state => state.blockSizeMultiplier,
|
||||
},
|
||||
actions: {},
|
||||
modules: {},
|
||||
|
|
|
|||
|
|
@ -59,7 +59,6 @@ body {
|
|||
</style>
|
||||
|
||||
<script>
|
||||
import VueDraggableResizable from "vue-draggable-resizable";
|
||||
import Block from "../components/Block.vue";
|
||||
|
||||
export default {
|
||||
|
|
@ -163,6 +162,9 @@ export default {
|
|||
} else {
|
||||
|
||||
}
|
||||
|
||||
// this.drawGrid();
|
||||
this.redrawCanvas();
|
||||
},
|
||||
redrawCanvas() {
|
||||
// console.log("Canvas redraw");
|
||||
|
|
@ -174,7 +176,6 @@ export default {
|
|||
if (this.currentAsciibirdMeta.blocks.length) {
|
||||
const blockWidth = this.currentAsciibirdMeta.blockWidth;
|
||||
const blockHeight = this.currentAsciibirdMeta.blockHeight;
|
||||
var finalWidth = 0;
|
||||
|
||||
// Position of the meta array
|
||||
let x = 0;
|
||||
|
|
@ -190,7 +191,7 @@ export default {
|
|||
|
||||
this.ctx.font = "16px Mono";
|
||||
|
||||
for (y = 0; y < this.currentAsciibirdMeta.blocks.length; y++) {
|
||||
for (y = 0; y < this.currentAsciibirdMeta.width; y++) {
|
||||
blockY = this.currentAsciibirdMeta.blockHeight * y;
|
||||
|
||||
for (x = 0; x < this.currentAsciibirdMeta.blocks[y].length; x++) {
|
||||
|
|
@ -222,29 +223,17 @@ export default {
|
|||
if (curBlock.char) {
|
||||
tempChar = curBlock.char;
|
||||
this.ctx.fillStyle = curBlock.fg;
|
||||
this.ctx.fillText(tempChar, blockX + 3, blockY -3);
|
||||
} else {
|
||||
// console.log("Yo char doesn't exist, bro.");
|
||||
}
|
||||
// }
|
||||
|
||||
this.ctx.fillText(tempChar, blockX, blockY - 3);
|
||||
}
|
||||
|
||||
theX++;
|
||||
// break;
|
||||
}
|
||||
|
||||
if (theX !== 0) {
|
||||
finalWidth = theX;
|
||||
}
|
||||
|
||||
theX = 0;
|
||||
|
||||
// break;
|
||||
}
|
||||
} else {
|
||||
}
|
||||
|
||||
this.currentAsciibirdMeta.width = finalWidth;
|
||||
|
||||
this.ctx.stroke();
|
||||
}
|
||||
},
|
||||
|
|
|
|||
Laden…
Verwijs in nieuw issue