2020-12-27 02:42:26 +00:00
|
|
|
<template>
|
|
|
|
<div id="app">
|
|
|
|
<t-modal
|
|
|
|
name="create-ascii-modal"
|
|
|
|
header="Create new ASCII"
|
2021-01-16 03:03:14 +00:00
|
|
|
:clickToClose="false"
|
|
|
|
:escToClose="false"
|
2020-12-27 02:42:26 +00:00
|
|
|
@before-closed="closeNewASCII"
|
|
|
|
>
|
2021-01-16 03:03:14 +00:00
|
|
|
<!-- Main Menu -->
|
2021-01-30 02:33:11 +00:00
|
|
|
Width
|
2021-01-16 03:03:14 +00:00
|
|
|
<t-input
|
|
|
|
type="number"
|
|
|
|
name="width"
|
|
|
|
v-model="forms.createAscii.width"
|
|
|
|
max="3"
|
|
|
|
/>
|
2021-01-30 02:33:11 +00:00
|
|
|
|
|
|
|
Height
|
2021-01-16 03:03:14 +00:00
|
|
|
<t-input
|
|
|
|
type="number"
|
|
|
|
name="height"
|
|
|
|
v-model="forms.createAscii.height"
|
|
|
|
max="4"
|
|
|
|
/>
|
2021-01-30 02:33:11 +00:00
|
|
|
|
|
|
|
Title
|
2021-01-16 03:03:14 +00:00
|
|
|
<t-input
|
|
|
|
type="text"
|
|
|
|
name="title"
|
|
|
|
v-model="forms.createAscii.title"
|
|
|
|
max="128"
|
|
|
|
/>
|
2020-12-27 02:42:26 +00:00
|
|
|
|
|
|
|
<template v-slot:footer>
|
2021-01-16 03:03:14 +00:00
|
|
|
<div
|
|
|
|
class="flex justify-between"
|
|
|
|
@click="$modal.hide('create-ascii-modal')"
|
|
|
|
>
|
|
|
|
<t-button type="button"> Cancel </t-button>
|
|
|
|
<t-button type="button" @click="createNewASCII()"> Ok </t-button>
|
2020-12-27 02:42:26 +00:00
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
</t-modal>
|
|
|
|
|
2021-01-09 01:57:48 +00:00
|
|
|
<div>
|
|
|
|
<t-button @click="createClick()" class="ml-1">Add new ASCII</t-button>
|
2020-12-27 02:42:26 +00:00
|
|
|
|
2021-01-30 02:33:11 +00:00
|
|
|
<t-button @click="clearCache()" class="ml-1">Clear and Refresh</t-button>
|
|
|
|
|
2021-01-16 03:03:14 +00:00
|
|
|
<t-button @click="$refs.asciiInput.click()" class="ml-1"
|
|
|
|
>Import ASCII</t-button
|
|
|
|
>
|
|
|
|
<input
|
|
|
|
type="file"
|
|
|
|
style="display: none"
|
|
|
|
ref="asciiInput"
|
|
|
|
@change="onAsciiImport()"
|
|
|
|
/>
|
|
|
|
<h3>Content:</h3>
|
|
|
|
<pre id="msg"></pre>
|
|
|
|
|
|
|
|
<t-button
|
|
|
|
v-for="(value, key) in asciibirdMeta"
|
|
|
|
v-bind:key="key"
|
|
|
|
class="ml-1"
|
|
|
|
@click="changeTab(key, value)"
|
2021-01-30 02:33:11 +00:00
|
|
|
:disabled="false"
|
2021-01-16 03:03:14 +00:00
|
|
|
>
|
2021-01-09 01:57:48 +00:00
|
|
|
{{ value.title }} ({{ value.width }} / {{ value.height }})
|
|
|
|
</t-button>
|
|
|
|
|
|
|
|
<div class="border-gray-600">
|
2021-01-16 03:03:14 +00:00
|
|
|
<vue-draggable-resizable
|
|
|
|
@dragging="onDrag"
|
|
|
|
style="left: 70%; top: 10%"
|
|
|
|
:resizable="false"
|
|
|
|
v-if="asciibirdMeta.length"
|
|
|
|
>
|
|
|
|
<t-card header="Tools and Stuff" style="height: 500px">
|
|
|
|
<t-button
|
|
|
|
type="button"
|
|
|
|
v-for="(value, key) in mircColors"
|
|
|
|
:key="key"
|
|
|
|
:style="makeButtonClass(value)"
|
|
|
|
class="border-gray-300 m-1"
|
|
|
|
></t-button>
|
2021-01-10 08:29:38 +00:00
|
|
|
|
2021-01-16 03:03:14 +00:00
|
|
|
<hr />
|
|
|
|
<h5>Brushes and Shit</h5>
|
|
|
|
<hr />
|
|
|
|
</t-card>
|
|
|
|
</vue-draggable-resizable>
|
2021-01-10 08:29:38 +00:00
|
|
|
|
2021-01-16 03:03:14 +00:00
|
|
|
<router-view />
|
2021-01-09 01:57:48 +00:00
|
|
|
</div>
|
|
|
|
</div>
|
2020-12-27 02:42:26 +00:00
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
|
|
|
|
<script>
|
|
|
|
export default {
|
|
|
|
created() {
|
|
|
|
this.asciibirdMeta = this.$store.state.asciibirdMeta;
|
|
|
|
},
|
2021-01-23 02:50:32 +00:00
|
|
|
name: 'Dashboard',
|
2020-12-27 02:42:26 +00:00
|
|
|
data: () => ({
|
|
|
|
forms: {
|
|
|
|
createAscii: {
|
|
|
|
width: 5,
|
|
|
|
height: 5,
|
2021-01-23 02:50:32 +00:00
|
|
|
title: 'ascii',
|
2020-12-27 02:42:26 +00:00
|
|
|
},
|
|
|
|
},
|
|
|
|
formsDefault: null,
|
|
|
|
status: {
|
|
|
|
createNew: false,
|
|
|
|
},
|
2021-01-23 02:50:32 +00:00
|
|
|
text: 'ASCII',
|
2020-12-27 02:42:26 +00:00
|
|
|
currentTab: 1,
|
|
|
|
asciibirdMeta: [],
|
2021-01-09 01:57:48 +00:00
|
|
|
mircColors: [
|
2021-01-23 02:50:32 +00:00
|
|
|
'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)',
|
2021-01-10 08:29:38 +00:00
|
|
|
],
|
2021-01-23 02:50:32 +00:00
|
|
|
charCodes: ['*', '-', '=', '+', '^', '#'],
|
2021-01-10 08:29:38 +00:00
|
|
|
floating: {
|
|
|
|
width: 0,
|
|
|
|
height: 0,
|
|
|
|
x: 100,
|
2021-01-16 03:03:14 +00:00
|
|
|
y: 100,
|
|
|
|
},
|
2021-01-23 02:50:32 +00:00
|
|
|
asciiImport: '',
|
2021-01-16 03:03:14 +00:00
|
|
|
finalAscii: null,
|
|
|
|
asciiArray: [],
|
|
|
|
imageUrl: null,
|
2021-01-23 02:50:32 +00:00
|
|
|
parseColor: false,
|
2021-01-16 03:03:14 +00:00
|
|
|
colorCode: false,
|
|
|
|
importBlocks: null,
|
2020-12-27 02:42:26 +00:00
|
|
|
}),
|
|
|
|
methods: {
|
2021-01-16 03:03:14 +00:00
|
|
|
onAsciiImport() {
|
2021-01-23 02:50:32 +00:00
|
|
|
const { files } = this.$refs.asciiInput;
|
|
|
|
const filename = files[0].name;
|
2021-01-16 03:03:14 +00:00
|
|
|
const fileReader = new FileReader();
|
|
|
|
this.asciiImport = fileReader.readAsText(files[0]);
|
|
|
|
|
|
|
|
this.asciiArray = [];
|
2021-01-23 02:50:32 +00:00
|
|
|
const tempBlocks = [];
|
2021-01-16 03:03:14 +00:00
|
|
|
|
2021-01-23 02:50:32 +00:00
|
|
|
fileReader.addEventListener('load', () => {
|
2021-01-16 03:03:14 +00:00
|
|
|
this.asciiImport = fileReader.result;
|
2021-01-23 02:50:32 +00:00
|
|
|
this.asciiImport = this.asciiImport.split('\n');
|
2021-01-16 03:03:14 +00:00
|
|
|
|
2021-01-23 02:50:32 +00:00
|
|
|
this.finalAscii = {
|
|
|
|
width: this.asciiImport[0].split('').length,
|
2021-01-16 03:03:14 +00:00
|
|
|
height: this.asciiImport.length,
|
|
|
|
title: filename,
|
2021-01-30 02:33:11 +00:00
|
|
|
blockWidth: 16,
|
|
|
|
blockHeight: 26,
|
2021-01-23 02:50:32 +00:00
|
|
|
blocks: this.create2DArray(this.asciiImport.length),
|
2021-01-16 03:03:14 +00:00
|
|
|
};
|
|
|
|
|
|
|
|
for (let y = 0; y < this.asciiImport.length; y++) {
|
2021-01-30 02:33:11 +00:00
|
|
|
const rowX = this.asciiImport[y].split('');
|
2021-01-16 03:03:14 +00:00
|
|
|
|
2021-01-30 02:33:11 +00:00
|
|
|
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;
|
2021-01-16 03:03:14 +00:00
|
|
|
|
2021-01-30 02:33:11 +00:00
|
|
|
default:
|
|
|
|
this.parseColor = false;
|
|
|
|
break;
|
|
|
|
}
|
2021-01-16 03:03:14 +00:00
|
|
|
|
2021-01-30 02:33:11 +00:00
|
|
|
if (this.parseColor) {
|
|
|
|
this.colorCode = (
|
|
|
|
rowX[x + 1]
|
|
|
|
+ rowX[x + 2]
|
|
|
|
+ rowX[x + 3]
|
|
|
|
).split(',');
|
2021-01-23 02:50:32 +00:00
|
|
|
|
2021-01-30 02:33:11 +00:00
|
|
|
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],
|
|
|
|
};
|
|
|
|
}
|
2021-01-16 03:03:14 +00:00
|
|
|
}
|
|
|
|
|
2021-01-30 02:33:11 +00:00
|
|
|
this.colorCode = null;
|
|
|
|
} else {
|
|
|
|
this.finalAscii.height--;
|
|
|
|
}
|
2021-01-16 03:03:14 +00:00
|
|
|
}
|
|
|
|
|
2021-01-30 02:33:11 +00:00
|
|
|
console.log('this.finalAscii', this.finalAscii);
|
|
|
|
|
2021-01-23 02:50:32 +00:00
|
|
|
this.$store.commit('newAsciibirdMeta', this.finalAscii);
|
2021-01-16 03:03:14 +00:00
|
|
|
}); // End function
|
|
|
|
|
|
|
|
this.asciiImportFile = files[0];
|
|
|
|
},
|
2021-01-10 08:29:38 +00:00
|
|
|
makeButtonClass(color) {
|
2021-01-16 03:03:14 +00:00
|
|
|
return `background-color: ${color} !important;width:25px;height:25px;`;
|
2021-01-10 08:29:38 +00:00
|
|
|
},
|
2021-01-23 02:50:32 +00:00
|
|
|
onResize(x, y, width, height) {
|
2021-01-16 03:03:14 +00:00
|
|
|
this.floating.x = x;
|
|
|
|
this.floating.y = y;
|
|
|
|
this.floating.width = width;
|
|
|
|
this.floating.height = height;
|
2021-01-10 08:29:38 +00:00
|
|
|
},
|
2021-01-23 02:50:32 +00:00
|
|
|
onDrag(x, y) {
|
2021-01-16 03:03:14 +00:00
|
|
|
this.floating.x = x;
|
|
|
|
this.floating.y = y;
|
|
|
|
},
|
2020-12-27 02:42:26 +00:00
|
|
|
createClick() {
|
2021-01-08 00:51:41 +00:00
|
|
|
this.forms.createAscii.title = `New ASCII ${this.asciibirdMeta.length}`;
|
2021-01-23 02:50:32 +00:00
|
|
|
this.$modal.show('create-ascii-modal');
|
2020-12-27 02:42:26 +00:00
|
|
|
},
|
|
|
|
changeTab(key, value) {
|
|
|
|
// Update the router title
|
2021-01-23 02:50:32 +00:00
|
|
|
// if (this.$router.params[0] !== key) {
|
|
|
|
this.$router.push({ name: 'editor', params: { ascii: key } });
|
|
|
|
// }/
|
2020-12-27 02:42:26 +00:00
|
|
|
|
|
|
|
// Update the tab index in vuex store
|
2021-01-23 02:50:32 +00:00
|
|
|
this.$store.commit('changeTab', key);
|
2020-12-27 02:42:26 +00:00
|
|
|
},
|
2021-01-30 02:33:11 +00:00
|
|
|
clearCache() {
|
|
|
|
localStorage.clear();
|
|
|
|
window.location.href = '/';
|
|
|
|
},
|
2020-12-27 02:42:26 +00:00
|
|
|
createNewASCII() {
|
|
|
|
const payload = {
|
|
|
|
title: this.forms.createAscii.title,
|
2021-01-08 00:47:08 +00:00
|
|
|
key: this.asciibirdMeta.length,
|
2020-12-27 02:42:26 +00:00
|
|
|
width: this.forms.createAscii.width,
|
|
|
|
height: this.forms.createAscii.height,
|
2021-01-30 02:33:11 +00:00
|
|
|
blockWidth: 16,
|
|
|
|
blockHeight: 26,
|
2020-12-27 02:42:26 +00:00
|
|
|
blocks: this.create2DArray(this.forms.createAscii.height),
|
|
|
|
};
|
|
|
|
|
|
|
|
// Push all the default ASCII blocks
|
2021-01-30 02:33:11 +00:00
|
|
|
for (let x = 0; x < payload.width; x++) {
|
|
|
|
for (let y = 0; y < payload.height; y++) {
|
|
|
|
payload.blocks[y].push({
|
2021-01-16 03:03:14 +00:00
|
|
|
bg: this.mircColors[
|
|
|
|
Math.floor(Math.random() * this.mircColors.length)
|
|
|
|
],
|
|
|
|
fg: this.mircColors[
|
|
|
|
Math.floor(Math.random() * this.mircColors.length)
|
|
|
|
],
|
|
|
|
char: this.charCodes[
|
|
|
|
Math.floor(Math.random() * this.charCodes.length)
|
|
|
|
],
|
2020-12-27 02:42:26 +00:00
|
|
|
});
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2021-01-30 02:33:11 +00:00
|
|
|
console.log('payload', payload);
|
|
|
|
|
2021-01-23 02:50:32 +00:00
|
|
|
this.$store.commit('newAsciibirdMeta', payload);
|
|
|
|
this.$modal.hide('create-ascii-modal');
|
2020-12-27 02:42:26 +00:00
|
|
|
},
|
|
|
|
closeNewASCII({ params, cancel }) {
|
|
|
|
this.forms.createAscii.width = 5;
|
|
|
|
this.forms.createAscii.height = 5;
|
2021-01-23 02:50:32 +00:00
|
|
|
this.forms.createAscii.title = 'New ASCII';
|
2020-12-27 02:42:26 +00:00
|
|
|
},
|
|
|
|
create2DArray(rows) {
|
|
|
|
const arr = [];
|
|
|
|
|
|
|
|
for (let i = 0; i < rows; i++) {
|
|
|
|
arr[i] = [];
|
|
|
|
}
|
|
|
|
|
|
|
|
return arr;
|
|
|
|
},
|
|
|
|
},
|
|
|
|
};
|
|
|
|
</script>
|