jewbird
/
asciibird
3
3
Fork 0
Code Issues Pull Requests Releases Activity

updates

This commit is contained in:
Hugh Bord 2021-01-30 12:33:11 +10:00
parent 01f89e4480
commit 9ba0e0ca00
4 changed files with 142 additions and 151 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
README.md
View File

@ -7,8 +7,6 @@ ASCIIBIRD DEVELOPMENT - BORING VUEJS DEV STUFF FOR ASCII CREATION
* Single or double digit color codes in mIRC imports
* maybe we can use some regex
* Import / Export code
* ASCII -> JSON
* JSON -> ASCII

102
src/Dashboard.vue
View File

@ -8,18 +8,23 @@
@before-closed="closeNewASCII"
>
<!-- Main Menu -->
Width
<t-input
type="number"
name="width"
v-model="forms.createAscii.width"
max="3"
/>
Height
<t-input
type="number"
name="height"
v-model="forms.createAscii.height"
max="4"
/>
Title
<t-input
type="text"
name="title"
@ -41,6 +46,8 @@
<div>
<t-button @click="createClick()" class="ml-1">Add new ASCII</t-button>
<t-button @click="clearCache()" class="ml-1">Clear and Refresh</t-button>
<t-button @click="$refs.asciiInput.click()" class="ml-1"
>Import ASCII</t-button
>
@ -58,7 +65,7 @@
v-bind:key="key"
class="ml-1"
@click="changeTab(key, value)"
:disabled=false
:disabled="false"
>
{{ value.title }} ({{ value.width }} / {{ value.height }})
</t-button>
@ -159,56 +166,61 @@ export default {
this.asciiImport = fileReader.result;
this.asciiImport = this.asciiImport.split('\n');
this.finalAscii = {
width: this.asciiImport[0].split('').length,
height: this.asciiImport.length,
title: filename,
blockWidth: 8,
blockHeight: 13,
blockWidth: 16,
blockHeight: 26,
blocks: this.create2DArray(this.asciiImport.length),
};
for (let y = 0; y < this.asciiImport.length; y++) {
const rowText = this.asciiImport[y].split('');
const rowX = this.asciiImport[y].split('');
for (let x = 0; x < rowText.length; x++) {
switch (rowText[x]) {
case '\u0003':
this.parseColor = true;
break;
console.log(rowX.length);
if (rowX.length !== 0) {
for (let x = 0; x < rowX.length; x++) {
switch (rowX[x]) {
case '\u0003':
this.parseColor = true;
break;
default:
this.parseColor = false;
break;
default:
this.parseColor = false;
break;
}
if (this.parseColor) {
this.colorCode = (
rowX[x + 1]
+ rowX[x + 2]
+ rowX[x + 3]
).split(',');
x++;
x++;
x++;
continue;
} else if (!this.parseColor) {
this.finalAscii.blocks[y][x] = {
// x,
// y,
bg: this.mircColors[this.colorCode[0]],
fg: this.mircColors[this.colorCode[1]],
char: rowX[x],
};
}
}
if (this.parseColor) {
this.colorCode = (
rowText[x + 1]
+ rowText[x + 2]
+ rowText[x + 3]
).split(',');
x++;
x++;
x++;
continue;
} else if (!this.parseColor) {
this.finalAscii.blocks[y][x] = {
// x,
// y,
bg: this.mircColors[this.colorCode[0]],
fg: this.mircColors[this.colorCode[1]],
char: rowText[x],
};
}
this.colorCode = null;
} else {
this.finalAscii.height--;
}
this.colorCode = null;
}
console.log('this.finalAscii', this.finalAscii);
this.$store.commit('newAsciibirdMeta', this.finalAscii);
}); // End function
@ -240,23 +252,25 @@ export default {
// Update the tab index in vuex store
this.$store.commit('changeTab', key);
},
clearCache() {
localStorage.clear();
window.location.href = '/';
},
createNewASCII() {
const payload = {
title: this.forms.createAscii.title,
key: this.asciibirdMeta.length,
width: this.forms.createAscii.width,
height: this.forms.createAscii.height,
blockWidth: 8,
blockHeight: 13,
blockWidth: 16,
blockHeight: 26,
blocks: this.create2DArray(this.forms.createAscii.height),
};
// Push all the default ASCII blocks
for (let i = 0; i < payload.width; i++) {
for (let j = 0; j < payload.height; j++) {
payload.blocks[i].push({
// x: j,
// y: i,
for (let x = 0; x < payload.width; x++) {
for (let y = 0; y < payload.height; y++) {
payload.blocks[y].push({
bg: this.mircColors[
Math.floor(Math.random() * this.mircColors.length)
],
@ -270,6 +284,8 @@ export default {
}
}
console.log('payload', payload);
this.$store.commit('newAsciibirdMeta', payload);
this.$modal.hide('create-ascii-modal');
},

2
src/assets/gnaa.txt
View File

@ -21,4 +21,4 @@
2,2###############0,0#2,2###############0,0#2,2###############0,0#2,2#a#########a###0,0###########
2,2###############0,0#2,2###############0,0#2,2###############0,0#2,2###############0,0#####a#####
2,2#######a#####a#0,0#2,2###############0,0#2,2###############0,0#2,2###############0,0###########
2,2###########a###0,0#2,2###############0,0#2,2###############0,0#2,2###############0,0###########
2,2###########a###0,0#2,2###############0,0#2,2###############0,0#2,2###############0,0###########

187
src/views/Editor.vue
View File

@ -99,34 +99,29 @@ export default {
return `canvas`;
},
watchBlocksChange() {
return this.currentAsciibirdMeta
return this.currentAsciibirdMeta;
},
generateTitle() {
return this.currentAsciibirdMeta.title ?? ''
}
return this.currentAsciibirdMeta.title ?? "";
},
},
watch: {
getFullPath(val, old) {
this.onChangeTab(val.split("/").join(""));
},
watchBlocksChange(val, old) {
// watchBlocksChange(val, old) {
// if (this.$refs[this.generateCanvasId]) {
// this.ctx = this.$refs.canvas.getContext("2d");
// this.gridCtx = this.$refs.grid.getContext("2d");
// // console.log("current ctx", this.ctx);
if (this.$refs[this.generateCanvasId]) {
this.ctx = this.$refs["canvas"].getContext("2d");
this.gridCtx = this.$refs.grid.getContext("2d");
// console.log("current ctx", this.ctx);
// this.drawGrid();
// this.redrawCanvas();
this.drawGrid();
this.redrawCanvas();
this.canvas.width =
val.width *
val.blockWidth;
this.canvas.height =
val.height *
val.blockHeight;
}
}
// this.canvas.width = val.width * val.blockWidth;
// this.canvas.height = val.height * val.blockHeight;
// }
// },
},
methods: {
// dataFieldClass(event) {
@ -145,33 +140,21 @@ export default {
// The newest canvas is not yet available for some reason at this stage, however we can still reference the previous one
const currentRefCanvas = "canvas";
this.canvas.width =
this.currentAsciibirdMeta.blocks.length *
this.currentAsciibirdMeta.blockWidth;
this.canvas.height =
this.currentAsciibirdMeta.blocks.length *
this.currentAsciibirdMeta.blockHeight;
// console.log({
// generateCanvasId: this.generateCanvasId,
// all_refs: this.$refs,
// current_canvas_ref: this.$refs[currentRefCanvas],
// });
if (this.$refs[currentRefCanvas]) {
this.ctx = this.$refs[currentRefCanvas].getContext("2d");
this.gridCtx = this.$refs.grid.getContext("2d");
// console.log("current ctx", this.ctx);
this.drawGrid();
this.redrawCanvas();
this.canvas.width =
this.currentAsciibirdMeta.width *
this.currentAsciibirdMeta.blockWidth;
this.canvas.height =
this.currentAsciibirdMeta.height *
this.currentAsciibirdMeta.blockHeight;
this.drawGrid();
this.redrawCanvas();
} else {
// console.log(
// `Warning: could not find asciibird meta key ${currentRefCanvas}`
@ -183,91 +166,85 @@ export default {
// Clears the whole canvas
if (this.ctx) {
this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
if (this.currentAsciibirdMeta.blocks.length) {
var blockWidth = this.currentAsciibirdMeta.blockWidth;
var blockHeight = this.currentAsciibirdMeta.blockHeight;
if (this.currentAsciibirdMeta.blocks.length) {
const blockWidth = this.currentAsciibirdMeta.blockWidth;
const blockHeight = this.currentAsciibirdMeta.blockHeight;
var finalWidth = 0;
// var h = 0;
// var w = 0;
// Position of the meta array
let x = 0;
let y = 0;
var finalWidth = 0;
// Try get better loop
let theX = 0;
// Position of the meta array
var x = 0;
var y = 0;
// Draws the actual rectangle
let blockX = 0;
let blockY = 0;
let curBlock = {};
// Try get better loop
var theX = 0;
this.ctx.font = "16px Mono";
// Draws the actual rectangle
var blockX = 0;
var blockY = 0;
var curBlock = {};
for (y = 0; y < this.currentAsciibirdMeta.blocks.length; y++) {
blockY = this.currentAsciibirdMeta.blockHeight * y;
this.ctx.font = "8px Mono";
for (y = 0; y < this.currentAsciibirdMeta.blocks.length; y++) {
blockY = y * blockHeight;
for (x = 0; x < this.currentAsciibirdMeta.blocks[y].length; x++) {
if (!this.currentAsciibirdMeta.blocks[y][x]) {
continue;
}
if (this.currentAsciibirdMeta.blocks[y][x] !== undefined) {
// console.log({
// block: this.currentAsciibirdMeta.blocks[y][x],
// x: x,
// y: y,
// theX,
// blockY,
// blockX,
// blockWidth,
// blockHeight,
// });
curBlock = this.currentAsciibirdMeta.blocks[y][x];
blockX = theX * blockWidth;
// this.currentAsciibirdMeta.blocks[y][x].x = theX;
// this.currentAsciibirdMeta.blocks[y][x].y = y;
this.ctx.fillStyle = curBlock.bg;
this.ctx.fillRect(blockX, blockY, blockWidth, blockHeight);
this.ctx.fillStyle = curBlock.fg;
let tempChar = '';
if (this.currentAsciibirdMeta.blocks[y][x].char) {
tempChar = this.currentAsciibirdMeta.blocks[y][x].char
for (x = 0; x < this.currentAsciibirdMeta.blocks[y].length; x++) {
if (!this.currentAsciibirdMeta.blocks[y][x]) {
continue;
}
// this.ctx.fillText(tempChar, blockX + 2, blockY - 3);
// if (this.currentAsciibirdMeta.blocks[y][x] !== undefined) {
console.log({
block: this.currentAsciibirdMeta.blocks[y][x],
x: x,
y: y,
theX,
blockY,
blockX,
blockWidth,
blockHeight,
});
curBlock = this.currentAsciibirdMeta.blocks[y][x];
blockX = blockWidth * theX;
// Background block
this.ctx.fillStyle = curBlock.bg;
this.ctx.fillRect(blockX, blockY, this.currentAsciibirdMeta.blockWidth, this.currentAsciibirdMeta.blockHeight);
let tempChar = "";
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.");
}
// }
theX++;
// break;
}
theX++;
if (theX !== 0) {
finalWidth = theX;
}
theX = 0;
// break;
}
if (theX !== 0) {
finalWidth = theX;
}
theX = 0;
// break;
} else {
// console.log(JSON.stringify(this.currentAsciibirdMeta));
}
} else {
// console.log(JSON.stringify(this.currentAsciibirdMeta));
this.currentAsciibirdMeta.width = finalWidth;
this.ctx.stroke();
}
this.currentAsciibirdMeta.width = finalWidth;
this.ctx.stroke();
}
},
processMouseDown(e) {
// console.log("Mouse down");