irc watch integration, ansi import start

This commit is contained in:
Hugh Bord 2021-03-14 17:36:14 +10:00
parent 01ef889bf1
commit 5fad917fa8
10 changed files with 274 additions and 159 deletions

View File

@ -8,6 +8,7 @@
"lint": "vue-cli-service lint"
},
"dependencies": {
"anser": "IonicaBizau/anser",
"autoprefixer": "^9.8.6",
"core-js": "^3.6.5",
"postcss": "^7.0.35",

32
public/2joints.txt Normal file
View File

@ -0,0 +1,32 @@
3,3xxxxxx1,1xxxxxxxxxxxxxxxxxxxxxx3,3xx1,1xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
3,3xx1,1xxxxxx3,3xx1,1xxxxxxxxxxxxxxxxxx3,3xx1,1xxxxxxxx3,3xxxxxx1,1xxxxxxxxxxxxxxxxxxxx
3,3xxxxxx1,1xx3,3xxxxxxxxxx1,1xx3,3xxxxxx1,1xx3,3xx1,1xx3,3xx1,1xxxx3,3xxxxxx1,1xxxxxxxxxxxxxxxxxxxx
1,1xxxx3,3xx1,1xx3,3xx1,1xx3,3xx1,1xx3,3xx1,1xx3,3xx1,1xx3,3xx1,1xx3,3xxxx1,1xxxxxx3,3xx1,1xxxxxxxxxxxxxxxxxxxxxxxx
3,3xxxxxx1,1xx3,3xx1,1xx3,3xx1,1xx3,3xx1,1xx3,3xxxxxx1,1xx3,3xx1,1xx3,3xx1,1xxxx3,3xxxxxx1,1xx15,15xxxx1,1xxxxxxxxxxxxxx
1,1xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx15,15xxxx1,1xxxxxxxxxxxxxxxx
1,1xx3,3xx1,1xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx15,15xxxx1,1xxxxxxxxxxxx15,15xx1,1xxxx
1,1xx3,3xx1,1xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx15,15xx1,1xxxxxxxxxxxxxxxxxx15,15xx1,1xx
3,3xxxxxx1,1xx3,3xx1,1xxxxxx3,3xx1,1xxxx3,3xxxxxx1,1xxxxxxxxxx15,15xx1,1xxxxxx15,15xx1,1xxxxxx15,15xx1,1xxxx15,15xx1,1xx
1,1xx3,3xx1,1xxxx3,3xx1,1xx3,3xx1,1xx3,3xx1,1xxxx3,3xx1,1xx3,3xx1,1xxxxxxxxxx15,15xx1,1xxxxxx15,15xx1,1xxxxxx15,15xx1,1xxxx15,15xx1,1xx
1,1xx3,3xx1,1xxxx3,3xxxxxxxxxx1,1xxxx3,3xxxxxx1,1xxxxxxxxxx15,15xx1,1xxxxxx15,15xx1,1xxxxxx15,15xx1,1xx15,15xxxx1,1xx
1,1xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx15,15xxxx1,1xx15,15xx1,1xxxx15,15xxxxxxxx1,1xxxx
1,1xx3,3xx1,1xxxxxxxxxx3,3xx1,1xxxxxxxxxxxx3,3xx1,1xxxx3,3xxxxxx1,1xx15,15xx1,1xx15,15xx1,1xxxx15,15xx1,1xx15,15xxxx1,1xxxx
1,1xxxxxxxxxxxxxxxxxx3,3xx1,1xxxxxxxx3,3xx1,1xxxx3,3xx1,1xxxxxx15,15xx1,1xx15,15xx1,1xxxx15,15xx1,1xxxx15,15xxxx1,1xx
1,1xx3,3xx1,1xx3,3xxxxxx1,1xx3,3xx1,1xx3,3xxxxxx1,1xx3,3xxxxxx1,1xx3,3xxxxxx1,1xxxxxx15,15xx1,1xxxx15,15xx1,1xxxxxx15,15xxxx
1,1xx3,3xx1,1xx3,3xx1,1xx3,3xx1,1xx3,3xx1,1xx3,3xx1,1xx3,3xx1,1xxxx3,3xx1,1xxxxxxxx3,3xx1,1xxxx15,15xxxx1,1xxxx15,15xx1,1xxxxxxxx15,15xx
1,1xx3,3xx1,1xx3,3xxxxxx1,1xx3,3xx1,1xx3,3xx1,1xx3,3xx1,1xxxx3,3xx1,1xxxx3,3xxxxxx1,1xx15,15xxxx1,1xxxxxx15,15xx1,1xxxxxx15,15xxxx
3,3xxxx1,1xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx15,15xx1,1xxxxxxxx15,15xxxx1,1xx15,15xxxx1,1xx
1,1xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx15,15xx1,1xxxxxxxx15,15xx1,1xxxx15,15xx1,1xxxx
1,1xxxxxxxx0,0xxxxxxxxxxxxxxxxxxxxxxxxxxxx1,1xxxxxxxxxxxxxxxx15,15xx1,1xxxx15,15xx1,1xxxx
1,1xx0,0xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx4,4xxxx1,1xxxxxxxx15,15xxxx1,1xxxx15,15xx1,1xxxx
0,0xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx4,4xxxx1,1xxxxxx15,15xxxx1,1xxxx15,15xxxx1,1xxxx
0,0xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx4,4xxxx1,1xxxxxx15,15xx1,1xxxxxx15,15xx1,1xxxxxx
1,1xxxxxxxx0,0xxxxxxxxxxxxxxxxxxxxxxxxxxxx1,1xxxxxxxxxxxx15,15xx1,1xxxxxx15,15xx1,1xxxxxx
1,1xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx15,15xx1,1xxxxxx15,15xx1,1xxxxxx
1,1xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx15,15xx1,1xxxxxx
1,1xxxxxxxxxxxxxxxx0,0xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx1,1xxxxxxxxxx15,15xx1,1xxxxxx
1,1xxxxxx0,0xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx4,4xxxx1,1xx15,15xxxx1,1xxxxxxxx
1,1xx0,0xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx4,4xxxx1,1xxxxxxxxxxxxxx
0,0xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx4,4xxxx1,1xxxxxxxxxxxxxx
0,0xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx1,1xxxxxxxxxxxxxxxxxxxx
1,1xxxxxxxx0,0xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx1,1xxxxxxxxxxxxxxxxxxxxxxxx

View File

@ -44,20 +44,16 @@
</t-modal>
<div>
<t-button @click="createClick()" class="ml-1">Add new ASCII</t-button>
<t-button @click="createClick()" class="ml-1">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
>
<t-button @click="startImport('mirc')" class="ml-1">Import mIRC</t-button>
<t-button @click="startImport('ansi')" class="ml-1">Import ANSI</t-button>
<input
type="file"
style="display: none"
ref="asciiInput"
@change="onAsciiImport()"
@change="onImport()"
/>
<h3>Content:</h3>
<pre id="msg"></pre>
<t-button
v-for="(value, key) in asciibirdMeta"
@ -74,10 +70,7 @@
<div class="border-gray-600">
<!-- <router-view /> -->
<Editor
v-if="asciibirdMeta.length"
/>
<Editor v-if="asciibirdMeta.length" />
</div>
</div>
</div>
@ -87,11 +80,22 @@
import Toolbar from "./components/Toolbar.vue";
import DebugPanel from "./components/DebugPanel.vue";
import Editor from "./views/Editor.vue";
import * as Anser from "anser";
export default {
created() {
async created() {
this.mircColors = this.$store.getters.mircColors;
this.charCodes = this.$store.getters.charCodes;
this.asciibirdMeta = this.$store.getters.asciibirdMeta;
let asciiUrl = new URL(location.href).searchParams.get("ircwatch");
if (asciiUrl) {
let res = await fetch(`https://irc.watch/ascii/txt/${asciiUrl}`);
console.log({ asciiData, asciiUrl });
let asciiData = await res.text();
this.mircAsciiImport(asciiData, asciiUrl);
window.location.href = "/";
}
},
components: { Toolbar, DebugPanel, Editor },
name: "Dashboard",
@ -120,189 +124,252 @@ export default {
parseColor: false,
colorCode: false,
importBlocks: null,
importFormat: null,
}),
methods: {
onAsciiImport() {
onImport() {
const { files } = this.$refs.asciiInput;
const filename = files[0].name;
const fileReader = new FileReader();
this.asciiImport = fileReader.readAsText(files[0]);
fileReader.addEventListener("load", () => {
// Max available colors
const MIRC_MAX_COLORS = this.mircColors.length;
switch (this.importFormat) {
case "ansi":
this.asniImport(fileReader.result, filename);
break;
// The current state of the colors
let curBlock = {
fg: null,
bg: null,
char: null,
};
case "mirc":
this.mircAsciiImport(fileReader.result, filename);
break;
}
// Object clone this to reset the block state
let emptyCurBlock = {
fg: null,
bg: null,
char: null,
};
this.importFormat = null;
});
// set asciiImport as the entire file contents as a string
this.asciiImport = fileReader.result;
this.asciiImportFile = files[0];
},
startImport(type) {
this.importFormat = type;
this.$refs.asciiInput.click();
},
asniImport(contents, filename) {
let ansiArray = contents.split("\n");
// This will end up in the asciibirdMeta
this.finalAscii = {
width: false, // defined in: switch (curChar) case "\n":
height: this.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(this.asciiImport.split("\n").length),
};
let ansiWidth = 0;
// Turn the entire ascii string into an array
let asciiStringArray = this.asciiImport.split("");
this.finalAscii = {
width: false, // defined in: switch (curChar) case "\n":
height: contents.split("\r\n").length,
title: filename,
key: this.$store.getters.nextTabValue,
blockWidth: 8 * this.$store.getters.blockSizeMultiplier,
blockHeight: 13 * this.$store.getters.blockSizeMultiplier,
blocks: this.create2DArray(contents.split("\r\n").length),
};
// The proper X and Y value of the block inside the ASCII
let asciiX = 0;
let asciiY = 0;
let firstColor = false;
let secondColor = false;
for (let i = 0; i <= ansiArray.length - 1; i++) {
if (ansiWidth > 0 && this.finalAscii.width === false) {
this.finalAscii.width = ansiWidth;
}
let colorChar1 = null;
let colorChar2 = null;
var parsedColor = null;
ansiWidth = 0;
var theWidth = 0;
for (let j = 0; j <= ansiArray[i].length-1; j++) {
let ansiParse = Anser.ansiToJson(ansiArray[i]);
for (
let charPos = 0;
charPos <= this.asciiImport.length - 1;
charPos++
) {
let curChar = asciiStringArray[0];
for (let l = 0; l <= ansiParse.length-1; l++) {
var contentArray = ansiParse[l].content.split("");
// Defining a small finite state machine
// to detect the colour code
switch (curChar) {
case "\n":
// Reset the colours here on a new line
var curBlock = {
fg: ansiParse[l].fg,
bg: ansiParse[l].bg,
char: null,
};
for (let k = 0; k <= contentArray.length-1; k++) {
if (contentArray[k] === "\r") {
continue
}
curBlock.char = contentArray[k];
this.finalAscii.blocks[i][ansiWidth] = JSON.parse(
JSON.stringify(curBlock)
);
ansiWidth++;
}
}
}
}
this.$store.commit("newAsciibirdMeta", this.finalAscii);
},
mircAsciiImport(contents, filename) {
const MIRC_MAX_COLORS = this.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 = contents;
// This will end up in the asciibirdMeta
this.finalAscii = {
width: false, // defined in: switch (curChar) case "\n":
height: this.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(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;
let firstColor = false;
let secondColor = false;
let colorChar1 = null;
let colorChar2 = null;
var parsedColor = null;
var theWidth = 0;
for (let charPos = 0; charPos <= this.asciiImport.length - 1; charPos++) {
let 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,
};
//
asciiY++;
// We can determine the width at the end of the first line
if (!this.finalAscii.width) {
this.finalAscii.width =
this.asciiImport.split("\n")[0].length - 1 - theWidth; // minus \n for the proper width
}
// Resets the X value
asciiX = 0;
asciiStringArray.shift();
break;
case "\u0003":
firstColor = false;
secondColor = false;
// CC
if (
asciiStringArray[0] === "\u0003" &&
asciiStringArray[1] === "\u0003"
) {
curBlock = {
fg: null,
bg: null,
char: null,
};
//
asciiY++;
console.log("Got CC");
continue;
}
// We can determine the width at the end of the first line
if (!this.finalAscii.width) {
this.finalAscii.width =
this.asciiImport.split("\n")[0].length - 1 - theWidth; // minus \n for the proper width
asciiStringArray.shift();
theWidth++;
if (!firstColor) {
colorChar1 = `${asciiStringArray[0]}`;
colorChar2 = `${asciiStringArray[1]}`;
parsedColor = parseInt(`${colorChar1}${colorChar2}`);
if (parsedColor <= MIRC_MAX_COLORS && parsedColor >= 0) {
curBlock.fg = parseInt(parsedColor);
firstColor = true;
theWidth += parsedColor.toString().length;
asciiStringArray = asciiStringArray.slice(
parsedColor.toString().length,
asciiStringArray.length
);
}
}
// Resets the X value
asciiX = 0;
colorChar1 = null;
colorChar2 = null;
parsedColor = null;
asciiStringArray.shift();
// No background colour
if (asciiStringArray[0] !== ",") {
secondColor = true;
break;
case "\u0003":
firstColor = false;
secondColor = false;
// CC
if (
asciiStringArray[0] === "\u0003" &&
asciiStringArray[1] === "\u0003"
) {
curBlock = {
fg: null,
bg: null,
char: null,
};
console.log("Got CC");
continue;
}
} else {
asciiStringArray.shift();
theWidth++;
}
if (!firstColor) {
colorChar1 = `${asciiStringArray[0]}`;
colorChar2 = `${asciiStringArray[1]}`;
parsedColor = parseInt(`${colorChar1}${colorChar2}`);
if (!secondColor) {
colorChar1 = `${asciiStringArray[0]}`;
colorChar2 = `${asciiStringArray[1]}`;
parsedColor = parseInt(`${colorChar1}${colorChar2}`);
if (parsedColor <= MIRC_MAX_COLORS && parsedColor >= 0) {
curBlock.fg = parseInt(parsedColor);
firstColor = true;
theWidth += parsedColor.toString().length;
if (parsedColor <= MIRC_MAX_COLORS && parsedColor >= 0) {
curBlock.bg = parseInt(parsedColor);
theWidth += parsedColor.toString().length;
asciiStringArray = asciiStringArray.slice(
parsedColor.toString().length,
asciiStringArray.length
);
}
}
asciiStringArray = asciiStringArray.slice(
parsedColor.toString().length,
asciiStringArray.length
);
colorChar1 = null;
colorChar2 = null;
parsedColor = null;
// No background colour
if (asciiStringArray[0] !== ",") {
secondColor = true;
break;
} else {
asciiStringArray.shift();
}
}
if (!secondColor) {
colorChar1 = `${asciiStringArray[0]}`;
colorChar2 = `${asciiStringArray[1]}`;
parsedColor = parseInt(`${colorChar1}${colorChar2}`);
break;
if (parsedColor <= MIRC_MAX_COLORS && parsedColor >= 0) {
curBlock.bg = parseInt(parsedColor);
theWidth += parsedColor.toString().length;
default:
curBlock.char = curChar;
asciiStringArray.shift();
asciiX++;
// Fk this js shit, serialising the curBlock works much better. Lost hours on this bs, fk.
asciiStringArray = asciiStringArray.slice(
parsedColor.toString().length,
asciiStringArray.length
);
this.finalAscii.blocks[asciiY][asciiX - 1] = JSON.parse(
JSON.stringify(curBlock)
);
break;
}
}
break;
} // End Switch
break;
// break;
} // End loop charPos
default:
curBlock.char = curChar;
asciiStringArray.shift();
asciiX++;
// Fk this js shit, serialising the curBlock works much better. Lost hours on this bs, fk.
this.finalAscii.blocks[asciiY][asciiX - 1] = JSON.parse(
JSON.stringify(curBlock)
);
break;
} // End Switch
// break;
} // End loop charPos
console.log(JSON.stringify(this.finalAscii.blocks));
this.$store.commit("newAsciibirdMeta", this.finalAscii);
// End file upload
});
this.asciiImportFile = files[0];
this.$store.commit("newAsciibirdMeta", this.finalAscii);
},
createClick() {
this.forms.createAscii.title = `New ASCII ${this.asciibirdMeta.length}`;

Binary file not shown.

BIN
src/assets/FILE_ID_1.ANS Normal file

Binary file not shown.

View File

@ -5,10 +5,10 @@
style="z-index:5;min-height:300px;"
:min-width=200
:max-width=500
:min-height=300
:max-height=700
:x=800
:y=300
:min-height=100
:max-height=200
:x=0
:y=350
>
<div style="height:100%;min-height:300px;max-height:400px;">
<t-card header="Debug Info" style="height:100%;">

View File

@ -7,7 +7,8 @@
:max-width="500"
:min-height="500"
:max-height="700"
:x="800"
:x="0"
:y="50"
>
<div style="height: 100%; min-height: 500px; max-height: 700px">
<t-card header="Tools and Stuff" style="height: 100%">

View File

@ -1,6 +1,7 @@
import Vue from 'vue';
import VueTailwind from 'vue-tailwind';
import VueDraggableResizable from 'vue-draggable-resizable';
import {
TInput,
TTextarea,

View File

@ -15,6 +15,13 @@
class="gridCanvas"
></canvas>
<vue-draggable-resizable
style="z-index: 5;left:220px;"
:min-width="1000"
:max-width="1000"
:min-height="1000"
:max-height="1000"
>
<canvas
ref="canvas"
id="canvas"
@ -26,6 +33,8 @@
@mousedown="cavnasMouseDown"
@mouseup="cavnasMouseUp"
></canvas>
</vue-draggable-resizable>
</div>
</div>
</template>

View File

@ -1639,6 +1639,10 @@ alphanum-sort@^1.0.0:
resolved "https://registry.yarnpkg.com/alphanum-sort/-/alphanum-sort-1.0.2.tgz#97a1119649b211ad33691d9f9f486a8ec9fbe0a3"
integrity sha1-l6ERlkmyEa0zaR2fn0hqjsn74KM=
anser@IonicaBizau/anser:
version "2.0.1"
resolved "https://codeload.github.com/IonicaBizau/anser/tar.gz/fb58237c4c6f9c24e1fc5e985b7d50903cacd820"
ansi-colors@^3.0.0:
version "3.2.4"
resolved "https://registry.yarnpkg.com/ansi-colors/-/ansi-colors-3.2.4.tgz#e3a3da4bfbae6c86a9c285625de124a234026fbf"