jewbird
/
asciibird
3
3
Vork 0
Code Kwesties Pull-aanvragen Publicaties Activiteit

mIRC art import (98% done\!)

This commit is contained in:
Hugh Bord 2021-01-23 12:50:32 +10:00
bovenliggende 42a35e5754
commit 01f89e4480
5 gewijzigde bestanden met toevoegingen van 227 en 177 verwijderingen
Statistieken weergeven Download Patch-bestand Download Diff-bestand Expand all files Collapse all files

11
README.md
Bestand weergeven

@ -4,6 +4,11 @@ ASCIIBIRD DEVELOPMENT - BORING VUEJS DEV STUFF FOR ASCII CREATION
# FOCUS
* Single or double digit color codes in mIRC imports
* maybe we can use some regex
* Import / Export code
* ASCII -> JSON
* JSON -> ASCII
@ -85,9 +90,15 @@ If we can import an ASCII -> two dimensional array -> Export
* https://www.digitalocean.com/community/tutorials/vuejs-vue-html5-canvas
* https://codereview.stackexchange.com/questions/114702/drawing-a-grid-on-canvas
* https://github.com/ircart/resources
* https://gist.github.com/xon52/fb895e33d64a8d322da165d158fa11b2 / https://xon5.medium.com/flexible-canvas-grid-without-blurred-lines-907fcadf5bfc - Grid canvas draw stuff
* http://wepump.in/ascii/
* https://modern.ircdocs.horse/formatting.html#color
* https://www.mirc.com/colors.html
## Project setup
```
yarn

173
src/Dashboard.vue
Bestand weergeven

@ -58,6 +58,7 @@
v-bind:key="key"
class="ml-1"
@click="changeTab(key, value)"
:disabled=false
>
{{ value.title }} ({{ value.width }} / {{ value.height }})
</t-button>
@ -95,152 +96,120 @@ export default {
created() {
this.asciibirdMeta = this.$store.state.asciibirdMeta;
},
name: "Dashboard",
name: 'Dashboard',
data: () => ({
forms: {
createAscii: {
width: 5,
height: 5,
title: "ascii",
title: 'ascii',
},
},
formsDefault: null,
status: {
createNew: false,
},
text: "ASCII",
text: 'ASCII',
currentTab: 1,
asciibirdMeta: [],
mircColors: [
"rgb(255,255,255)",
"rgb(0,0,0)",
"rgb(0,0,127)",
"rgb(0,147,0)",
"rgb(255,0,0)",
"rgb(127,0,0)",
"rgb(156,0,156)",
"rgb(252,127,0)",
"rgb(255,255,0)",
"rgb(0,252,0)",
"rgb(0,147,147)",
"rgb(0,255,255)",
"rgb(0,0,252)",
"rgb(255,0,255)",
"rgb(127,127,127)",
"rgb(210,210,210)",
'rgb(255,255,255)',
'rgb(0,0,0)',
'rgb(0,0,127)',
'rgb(0,147,0)',
'rgb(255,0,0)',
'rgb(127,0,0)',
'rgb(156,0,156)',
'rgb(252,127,0)',
'rgb(255,255,0)',
'rgb(0,252,0)',
'rgb(0,147,147)',
'rgb(0,255,255)',
'rgb(0,0,252)',
'rgb(255,0,255)',
'rgb(127,127,127)',
'rgb(210,210,210)',
],
charCodes: ["*", "-", "=", "+", "^", "#"],
charCodes: ['*', '-', '=', '+', '^', '#'],
floating: {
width: 0,
height: 0,
x: 100,
y: 100,
},
asciiImport: "",
asciiImport: '',
finalAscii: null,
asciiArray: [],
imageUrl: null,
drawingColor: false,
parseColor: false,
colorCode: false,
importBlocks: null,
}),
methods: {
onAsciiImport() {
const files = this.$refs.asciiInput.files;
let filename = files[0].name;
const { files } = this.$refs.asciiInput;
const filename = files[0].name;
const fileReader = new FileReader();
this.asciiImport = fileReader.readAsText(files[0]);
this.asciiArray = [];
let tempBlocks = [];
let lastX = 0;
const tempBlocks = [];
fileReader.addEventListener("load", () => {
fileReader.addEventListener('load', () => {
this.asciiImport = fileReader.result;
this.asciiImport = this.asciiImport.split("\n");
this.asciiImport = this.asciiImport.split('\n');
let drawingColorCount = 0;
let payload = {
width: this.asciiImport[0].split("").length,
this.finalAscii = {
width: this.asciiImport[0].split('').length,
height: this.asciiImport.length,
title: filename,
blockWidth: 8 + 0.5,
blockHeight: 13 + 0.5,
blocks: this.create2DArray(this.asciiImport.height),
blockWidth: 8,
blockHeight: 13,
blocks: this.create2DArray(this.asciiImport.length),
};
for (let y = 0; y < this.asciiImport.length; y++) {
var rowText = this.asciiImport[y].split("");
console.log( this.asciiImport[y])
var colorBlocks = 0;
const rowText = this.asciiImport[y].split('');
for (let x = 0; x < rowText.length; x++) {
// x - row 1
// y - col 1
// We detect what escape codes and set the appropiate flags
switch (rowText[y]) {
case "\u0003":
this.drawingColor = true;
colorBlocks++;
switch (rowText[x]) {
case '\u0003':
this.parseColor = true;
break;
// case "\u0003" :
// this.drawingColor = true
// break;
default:
this.drawingColor = false;
this.parseColor = false;
break;
}
if (this.drawingColor) {
this.colorCode = rowText[x + 1] + rowText[x + 2] + rowText[x + 3];
if (this.parseColor) {
this.colorCode = (
rowText[x + 1]
+ rowText[x + 2]
+ rowText[x + 3]
).split(',');
switch (this.colorCode) {
case "0,0": // white
this.colorCode = this.mircColors[0];
break;
case "2,2": // blue
this.colorCode = this.mircColors[9];
break;
}
this.drawingColor = false;
x++;
x++;
x++;
continue;
lastX = x
} 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],
};
}
tempBlocks.push({
x: x,
y: y,
bg: this.colorCode,
fg: this.colorCode,
char: null, // Skip for colors?
});
}
console.log(`colorBlocks ${y}`,colorBlocks)
colorBlocks = 0
tempBlocks = []
// tempblocks Array of asciibird chars
// payload.blocks.push(tempBlocks);
this.colorCode = null;
}
console.log(JSON.stringify(payload.blocks));
this.$store.commit("newAsciibirdMeta", payload);
this.$store.commit('newAsciibirdMeta', this.finalAscii);
}); // End function
this.asciiImportFile = files[0];
@ -248,28 +217,28 @@ export default {
makeButtonClass(color) {
return `background-color: ${color} !important;width:25px;height:25px;`;
},
onResize: function (x, y, width, height) {
onResize(x, y, width, height) {
this.floating.x = x;
this.floating.y = y;
this.floating.width = width;
this.floating.height = height;
},
onDrag: function (x, y) {
onDrag(x, y) {
this.floating.x = x;
this.floating.y = y;
},
createClick() {
this.forms.createAscii.title = `New ASCII ${this.asciibirdMeta.length}`;
this.$modal.show("create-ascii-modal");
this.$modal.show('create-ascii-modal');
},
changeTab(key, value) {
// Update the router title
// if (this.$router.params.ascii !== key) {
this.$router.push({ name: "editor", params: { ascii: key } });
// }
// 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);
this.$store.commit('changeTab', key);
},
createNewASCII() {
const payload = {
@ -277,17 +246,17 @@ export default {
key: this.asciibirdMeta.length,
width: this.forms.createAscii.width,
height: this.forms.createAscii.height,
blockWidth: 8 + 0.5,
blockHeight: 13 + 0.5,
blockWidth: 8,
blockHeight: 13,
blocks: this.create2DArray(this.forms.createAscii.height),
};
// Push all the default ASCII blocks
for (let i = 0; i <= payload.width - 1; i++) {
for (let j = 0; j <= payload.height - 1; j++) {
for (let i = 0; i < payload.width; i++) {
for (let j = 0; j < payload.height; j++) {
payload.blocks[i].push({
x: j,
y: i,
// x: j,
// y: i,
bg: this.mircColors[
Math.floor(Math.random() * this.mircColors.length)
],
@ -301,13 +270,13 @@ export default {
}
}
this.$store.commit("newAsciibirdMeta", payload);
this.$modal.hide("create-ascii-modal");
this.$store.commit('newAsciibirdMeta', payload);
this.$modal.hide('create-ascii-modal');
},
closeNewASCII({ params, cancel }) {
this.forms.createAscii.width = 5;
this.forms.createAscii.height = 5;
this.forms.createAscii.title = "New ASCII";
this.forms.createAscii.title = 'New ASCII';
},
create2DArray(rows) {
const arr = [];

18
src/main.js
Bestand weergeven

@ -1,6 +1,6 @@
import Vue from 'vue';
import VueTailwind from 'vue-tailwind';
import VueDraggableResizable from 'vue-draggable-resizable'
import VueDraggableResizable from 'vue-draggable-resizable';
import {
TInput,
TTextarea,
@ -27,7 +27,7 @@ import Dashboard from './Dashboard.vue';
import router from './router';
import store from './store';
// optionally import default styles
import 'vue-draggable-resizable/dist/VueDraggableResizable.css'
import 'vue-draggable-resizable/dist/VueDraggableResizable.css';
Vue.config.productionTip = false;
@ -47,22 +47,22 @@ const settings = {
wrapper: 'border rounded shadow-sm ',
body: 'p-3',
header: 'border-b p-3 rounded-t',
footer: 'border-t p-3 rounded-b'
footer: 'border-t p-3 rounded-b',
},
classes: {
wrapper: 'bg-white border-gray-100',
body: '',
header: 'border-gray-100',
footer: 'border-gray-100'
footer: 'border-gray-100',
},
variants: {
danger: {
wrapper: 'bg-red-50 text-red-700 border-red-200',
header: 'border-red-200 text-red-700',
footer: 'border-red-200 text-red-700'
}
}
}
footer: 'border-red-200 text-red-700',
},
},
},
},
't-input': {
component: TInput,
@ -130,7 +130,7 @@ const settings = {
};
Vue.use(VueTailwind, settings);
Vue.component('vue-draggable-resizable', VueDraggableResizable)
Vue.component('vue-draggable-resizable', VueDraggableResizable);
new Vue({
router,

8
src/store/index.js
Bestand weergeven

@ -1,11 +1,11 @@
import Vue from 'vue';
import Vuex from 'vuex';
import VuexPersistence from 'vuex-persist'
import VuexPersistence from 'vuex-persist';
Vue.use(Vuex);
const vuexLocal = new VuexPersistence({
storage: window.localStorage
})
storage: window.localStorage,
});
export default new Vuex.Store({
state: {
@ -34,5 +34,5 @@ export default new Vuex.Store({
},
actions: {},
modules: {},
plugins: [vuexLocal.plugin]
plugins: [vuexLocal.plugin],
});

194
src/views/Editor.vue
Bestand weergeven

@ -10,9 +10,6 @@
@mousemove="processMouseMove"
@mouseup="processMouseUp" -->
<div id="canvas-area" style="position: relative">
<canvas
ref="grid"
@ -30,12 +27,6 @@
class="canvas"
></canvas>
</div>
</div>
</template>
@ -67,8 +58,8 @@ body {
</style>
<script>
import VueDraggableResizable from "vue-draggable-resizable";
import Block from "../components/Block.vue";
import VueDraggableResizable from 'vue-draggable-resizable'
export default {
name: "Editor",
@ -79,7 +70,11 @@ export default {
created() {},
data: () => ({
text: "ASCII",
currentAsciibirdMeta: null,
currentAsciibirdMeta: {
title: "Loading...",
width: 0,
height: 0,
},
data: {
message: "Hello Vue!",
vueCanvas: null,
@ -95,7 +90,6 @@ export default {
height: 2048,
},
gridCtx: null,
}),
computed: {
getFullPath() {
@ -104,42 +98,70 @@ export default {
generateCanvasId() {
return `canvas`;
},
watchBlocksChange() {
return this.currentAsciibirdMeta
},
generateTitle() {
return this.currentAsciibirdMeta.title ?? ''
}
},
watch: {
getFullPath(val, old) {
this.onChangeTab(val.split('/').join(''));
this.onChangeTab(val.split("/").join(""));
},
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);
this.drawGrid();
this.redrawCanvas();
this.canvas.width =
val.width *
val.blockWidth;
this.canvas.height =
val.height *
val.blockHeight;
}
}
},
methods: {
// dataFieldClass(event) {
// this.ctx = event.currentTarget.id;
// console.log(this.ctx);
// console.log(this.ctx);
// },
onChangeTab(val) {
// Get the asciimeta index from the route URL
this.currentAsciibirdMeta = this.$store.state.asciibirdMeta[val];
console.log("val",val);
// console.log("val", val);
// I dono some routs bs or some bs needs -1 to make it all work
// Some lame canvas reference bug when changing routes
// The newest canvas is not yet available for some reason at this stage, however we can still reference the previous one
let currentRefCanvas = `canvas`;
const currentRefCanvas = "canvas";
this.canvas.width = this.currentAsciibirdMeta.blocks.length * this.currentAsciibirdMeta.blockWidth
this.canvas.height = this.currentAsciibirdMeta.blocks.length * this.currentAsciibirdMeta.blockHeight
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],
});
// 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.gridCtx = this.$refs.grid.getContext("2d");
// console.log("current ctx", this.ctx);
this.drawGrid();
this.redrawCanvas();
@ -151,63 +173,111 @@ export default {
this.currentAsciibirdMeta.height *
this.currentAsciibirdMeta.blockHeight;
} else {
console.log(
"Warning: could not find asciibird meta key " + currentRefCanvas
);
// console.log(
// `Warning: could not find asciibird meta key ${currentRefCanvas}`
// );
}
},
redrawCanvas() {
console.log("Canvas redraw");
// Clears the whole canvas
if (this.ctx) {
this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
if (this.currentAsciibirdMeta.blocks.length) {
let blockWidth = this.currentAsciibirdMeta.blockWidth;
let blockHeight = this.currentAsciibirdMeta.blockHeight;
var blockWidth = this.currentAsciibirdMeta.blockWidth;
var blockHeight = this.currentAsciibirdMeta.blockHeight;
let h = 0;
let w = 0;
let x = 0;
let y = 0;
let blockX = 0;
let blockY = 0;
let curBlock = undefined;
// var h = 0;
// var w = 0;
var finalWidth = 0;
// Position of the meta array
var x = 0;
var y = 0;
// Try get better loop
var theX = 0;
// Draws the actual rectangle
var blockX = 0;
var blockY = 0;
var curBlock = {};
this.ctx.font = "8px Mono";
for (y = 0; y < this.currentAsciibirdMeta.blocks.length; y++) {
blockY = y * blockHeight;
w = blockWidth;
for (x = 0; x < this.currentAsciibirdMeta.blocks[y].length; x++) {
// console.log({ x, y, meta: JSON.stringify(this.currentAsciibirdMeta.blocks[y][x]) });
if (!this.currentAsciibirdMeta.blocks[y][x]) {
continue;
}
curBlock = this.currentAsciibirdMeta.blocks[y][x];
if (this.currentAsciibirdMeta.blocks[y][x] !== undefined) {
// console.log({
// block: this.currentAsciibirdMeta.blocks[y][x],
// x: x,
// y: y,
// theX,
// blockY,
// blockX,
// blockWidth,
// blockHeight,
// });
blockX = x * blockWidth;
h = blockHeight;
curBlock = this.currentAsciibirdMeta.blocks[y][x];
blockX = theX * blockWidth;
this.ctx.fillStyle = curBlock.bg;
this.ctx.fillRect(blockX, blockY, blockWidth, blockHeight);
this.ctx.fillStyle = curBlock.fg;
this.ctx.fillText(curBlock.char, blockX + 2, blockY - 3);
// 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
}
// this.ctx.fillText(tempChar, blockX + 2, blockY - 3);
}
theX++;
// break;
}
if (theX !== 0) {
finalWidth = theX;
}
theX = 0;
// break;
}
} else {
console.log(JSON.stringify(this.currentAsciibirdMeta));
// console.log(JSON.stringify(this.currentAsciibirdMeta));
}
this.currentAsciibirdMeta.width = finalWidth;
this.ctx.stroke();
}
},
processMouseDown(e) {
console.log("Mouse down");
// console.log("Mouse down");
// this.canvasClass(e)
this.selectionMode = true;
this.startPosition.x = e.clientX;
this.startPosition.y = e.clientY;
},
processMouseMove(e) {
console.log("Mouse move");
// console.log("Mouse move");
if (this.selectionMode) {
// console.log(this.startPosition);
@ -226,7 +296,7 @@ export default {
}
},
triangleTest(e) {
console.log("Mouse triangleTest");
// console.log("Mouse triangleTest");
// this.ctx = e.target;
this.ctx.strokeStyle = "red";
@ -238,7 +308,7 @@ export default {
this.ctx.stroke();
},
processMouseUp(e) {
console.log("Mouse up");
// console.log("Mouse up");
this.ctx.fillStyle = "#fff";
this.selectionMode = false;
@ -246,26 +316,26 @@ export default {
this.startPosition.y = null;
},
drawGrid() {
let width = 5000;
let height = 5000;
const width = 5000;
const height = 5000;
let s = 13;
let sW = 8;
let pL = s;
let pT = s;
let pR = s;
let pB = s;
const s = 13;
const sW = 8;
const pL = s;
const pT = s;
const pR = s;
const pB = s;
this.gridCtx.clearRect(0, 0, width, height);
this.gridCtx.strokeStyle = "lightgrey";
this.gridCtx.lineWidth = 0.333;
this.gridCtx.beginPath();
for (var x = pL; x <= width - pR; x += sW) {
for (let x = pL; x <= width - pR; x += sW) {
this.gridCtx.moveTo(x, pT);
this.gridCtx.lineTo(x, height - pB);
}
for (var y = pT; y <= height - pB; y += s) {
for (let y = pT; y <= height - pB; y += s) {
this.gridCtx.moveTo(pL, y);
this.gridCtx.lineTo(width - pR, y);
}