reviewed dashboard code
This commit is contained in:
parent
7b1e04767b
commit
b8a7c54601
|
|
@ -21,3 +21,4 @@ pnpm-debug.log*
|
|||
*.njsproj
|
||||
*.sln
|
||||
*.sw?
|
||||
deploy.sh
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@
|
|||
:escToClose="false"
|
||||
@before-closed="closeNewASCII"
|
||||
>
|
||||
<!-- Main Menu -->
|
||||
|
||||
Width
|
||||
<t-input
|
||||
type="number"
|
||||
|
|
@ -45,11 +45,11 @@
|
|||
|
||||
<div>
|
||||
<t-button @click="createClick()" class="ml-1">New ASCII</t-button>
|
||||
<t-button @click="clearCache()" v-if="asciibirdMeta.length" class="ml-1"
|
||||
<t-button @click="clearCache()" v-if="this.$store.getters.asciibirdMeta.length" class="ml-1"
|
||||
>Clear and Refresh</t-button
|
||||
>
|
||||
<t-button @click="startImport('mirc')" class="ml-1">Import mIRC</t-button>
|
||||
<t-button @click="exportMirc()" class="ml-1" v-if="asciibirdMeta.length"
|
||||
<t-button @click="exportMirc()" class="ml-1" v-if="this.$store.getters.asciibirdMeta.length"
|
||||
>Export ASCII to mIRC</t-button
|
||||
>
|
||||
<!-- <t-button @click="startImport('ansi')" class="ml-1">Import ANSI</t-button> -->
|
||||
|
|
@ -61,7 +61,7 @@
|
|||
/>
|
||||
|
||||
<t-button
|
||||
v-for="(value, key) in asciibirdMeta"
|
||||
v-for="(value, key) in this.$store.getters.asciibirdMeta"
|
||||
v-bind:key="key"
|
||||
class="ml-1"
|
||||
@click="changeTab(key, value)"
|
||||
|
|
@ -73,14 +73,14 @@
|
|||
<Toolbar
|
||||
:canvas-x="canvasX"
|
||||
:canvas-y="canvasY"
|
||||
v-if="asciibirdMeta.length"
|
||||
v-if="this.$store.getters.asciibirdMeta.length"
|
||||
/>
|
||||
<DebugPanel
|
||||
:canvas-x="canvasX"
|
||||
:canvas-y="canvasY"
|
||||
v-if="asciibirdMeta.length"
|
||||
v-if="this.$store.getters.asciibirdMeta.length"
|
||||
/>
|
||||
<Editor @coordsupdate="updateCoords" v-if="asciibirdMeta.length" />
|
||||
<Editor @coordsupdate="updateCoords" v-if="this.$store.getters.asciibirdMeta.length" />
|
||||
|
||||
<CharPicker v-if="$store.getters.getToolbarState.isChoosingChar" />
|
||||
<ColourPicker
|
||||
|
|
@ -94,55 +94,37 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import Toolbar from "./components/Toolbar.vue";
|
||||
import DebugPanel from "./components/DebugPanel.vue";
|
||||
import Editor from "./views/Editor.vue";
|
||||
import Toolbar from './components/Toolbar.vue';
|
||||
import DebugPanel from './components/DebugPanel.vue';
|
||||
import Editor from './views/Editor.vue';
|
||||
// import * as Anser from "anser";
|
||||
import CharPicker from "./components/parts/CharPicker.vue";
|
||||
import ColourPicker from "./components/parts/ColourPicker.vue";
|
||||
import CharPicker from './components/parts/CharPicker.vue';
|
||||
import ColourPicker from './components/parts/ColourPicker.vue';
|
||||
|
||||
export default {
|
||||
async created() {
|
||||
this.mircColours = this.$store.getters.mircColours;
|
||||
this.charCodes = this.$store.getters.charCodes;
|
||||
this.asciibirdMeta = this.$store.getters.asciibirdMeta;
|
||||
|
||||
let asciiUrl = new URL(location.href).searchParams.get("ircwatch");
|
||||
// Load from irc watch if present in the URL bar
|
||||
const asciiUrl = new URL(location.href).searchParams.get('ircwatch');
|
||||
if (asciiUrl) {
|
||||
let res = await fetch(`https://irc.watch/ascii/txt/${asciiUrl}`);
|
||||
let asciiData = await res.text();
|
||||
const res = await fetch(`https://irc.watch/ascii/txt/${asciiUrl}`);
|
||||
const asciiData = await res.text();
|
||||
this.mircAsciiImport(asciiData, asciiUrl);
|
||||
window.location.href = "/";
|
||||
window.location.href = '/';
|
||||
}
|
||||
},
|
||||
components: { Toolbar, DebugPanel, Editor, CharPicker, ColourPicker },
|
||||
name: "Dashboard",
|
||||
components: {
|
||||
Toolbar, DebugPanel, Editor, CharPicker, ColourPicker,
|
||||
},
|
||||
name: 'Dashboard',
|
||||
data: () => ({
|
||||
forms: {
|
||||
createAscii: {
|
||||
width: 5,
|
||||
height: 5,
|
||||
title: "ascii",
|
||||
title: 'ascii',
|
||||
},
|
||||
},
|
||||
formsDefault: null,
|
||||
status: {
|
||||
createNew: false,
|
||||
},
|
||||
text: "ASCII",
|
||||
currentTab: 1,
|
||||
asciibirdMeta: [],
|
||||
mircColours: null,
|
||||
charCodes: null,
|
||||
refresh: false,
|
||||
asciiImport: "",
|
||||
finalAscii: null,
|
||||
asciiArray: [],
|
||||
imageUrl: null,
|
||||
parseColour: false,
|
||||
ColourCode: false,
|
||||
importBlocks: null,
|
||||
importFormat: null,
|
||||
canvasX: null,
|
||||
canvasY: null,
|
||||
dashboardX: null,
|
||||
|
|
@ -157,26 +139,19 @@ export default {
|
|||
const { files } = this.$refs.asciiInput;
|
||||
const filename = files[0].name;
|
||||
const fileReader = new FileReader();
|
||||
this.asciiImport = fileReader.readAsText(files[0]);
|
||||
|
||||
fileReader.addEventListener("load", () => {
|
||||
switch (this.importFormat) {
|
||||
// case "ansi":
|
||||
// this.asniImport(fileReader.result, filename);
|
||||
// break;
|
||||
// This will fire the file reader 'load' event
|
||||
const asciiImport = fileReader.readAsText(files[0]);
|
||||
|
||||
case "mirc":
|
||||
this.mircAsciiImport(fileReader.result, filename);
|
||||
break;
|
||||
}
|
||||
|
||||
this.importFormat = null;
|
||||
fileReader.addEventListener('load', () => {
|
||||
// We'll have to add a switch statement
|
||||
// here to handle different file types
|
||||
this.mircAsciiImport(fileReader.result, filename);
|
||||
});
|
||||
|
||||
this.asciiImportFile = files[0];
|
||||
},
|
||||
startImport(type) {
|
||||
this.importFormat = type;
|
||||
startImport() {
|
||||
// For ANSI we'll need to add back in the
|
||||
// type cariable here
|
||||
this.$refs.asciiInput.click();
|
||||
},
|
||||
// We can maybe try something different to import ANSI
|
||||
|
|
@ -263,7 +238,7 @@ export default {
|
|||
// this.$store.commit("newAsciibirdMeta", this.finalAscii);
|
||||
// },
|
||||
mircAsciiImport(contents, filename) {
|
||||
const MIRC_MAX_ColourS = this.mircColours.length;
|
||||
const MIRC_MAX_COLOURS = this.$store.getters.mircColours.length;
|
||||
|
||||
// The current state of the Colours
|
||||
let curBlock = {
|
||||
|
|
@ -273,21 +248,21 @@ export default {
|
|||
};
|
||||
|
||||
// set asciiImport as the entire file contents as a string
|
||||
this.asciiImport = contents.split("\u0003\u0003").join("\u0003");
|
||||
const asciiImport = contents.split('\u0003\u0003').join('\u0003');
|
||||
|
||||
// This will end up in the asciibirdMeta
|
||||
this.finalAscii = {
|
||||
const finalAscii = {
|
||||
width: false, // defined in: switch (curChar) case "\n":
|
||||
height: this.asciiImport.split("\n").length,
|
||||
height: 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),
|
||||
blocks: this.create2DArray(asciiImport.split('\n').length),
|
||||
};
|
||||
|
||||
// Turn the entire ascii string into an array
|
||||
let asciiStringArray = this.asciiImport.split("");
|
||||
let asciiStringArray = asciiImport.split('');
|
||||
|
||||
// The proper X and Y value of the block inside the ASCII
|
||||
let asciiX = 0;
|
||||
|
|
@ -296,20 +271,19 @@ export default {
|
|||
// used to determine colours
|
||||
let colourChar1 = null;
|
||||
let colourChar2 = null;
|
||||
var parsedColour = null;
|
||||
let parsedColour = null;
|
||||
|
||||
// This variable just counts the amount of colour and char codes to minus
|
||||
// to get the real width
|
||||
var theWidth = 0;
|
||||
let widthOfColCodes = 0;
|
||||
|
||||
// for (let charPos = 0; charPos <= this.asciiImport.length - 1; charPos++) {
|
||||
while (asciiStringArray.length) {
|
||||
let curChar = asciiStringArray[0];
|
||||
const curChar = asciiStringArray[0];
|
||||
|
||||
// Defining a small finite state machine
|
||||
// to detect the colour code
|
||||
switch (curChar) {
|
||||
case "\n":
|
||||
case '\n':
|
||||
// Reset the colours here on a new line
|
||||
curBlock = {
|
||||
fg: null,
|
||||
|
|
@ -317,13 +291,14 @@ export default {
|
|||
char: null,
|
||||
};
|
||||
|
||||
//
|
||||
// the Y value of the ascii
|
||||
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
|
||||
// If for some reason like in aphex.txt the first line is
|
||||
// trimmed it will trim the entire ascii!
|
||||
if (!finalAscii.width) {
|
||||
finalAscii.width = asciiImport.split('\n')[0].length - 1 - widthOfColCodes; // minus \n for the proper width
|
||||
}
|
||||
|
||||
// Resets the X value
|
||||
|
|
@ -332,56 +307,55 @@ export default {
|
|||
asciiStringArray.shift();
|
||||
break;
|
||||
|
||||
case "\u0003":
|
||||
case '\u0003':
|
||||
// Remove the colour char
|
||||
asciiStringArray.shift();
|
||||
theWidth++;
|
||||
widthOfColCodes++;
|
||||
|
||||
// Attempt to work out bg
|
||||
colourChar1 = `${asciiStringArray[0]}`;
|
||||
colourChar2 = `${asciiStringArray[1]}`;
|
||||
parsedColour = parseInt(`${colourChar1}${colourChar2}`);
|
||||
|
||||
// Work out the 01, 02 double digit codes
|
||||
if (parseInt(colourChar1) === 0 && parseInt(colourChar2) >= 0) {
|
||||
asciiStringArray.shift();
|
||||
theWidth += 1;
|
||||
widthOfColCodes += 1;
|
||||
}
|
||||
|
||||
if (isNaN(parsedColour)) {
|
||||
curBlock.bg = parseInt(colourChar1);
|
||||
theWidth += 1;
|
||||
widthOfColCodes += 1;
|
||||
asciiStringArray.shift();
|
||||
} else if (parsedColour <= MIRC_MAX_ColourS && parsedColour >= 0) {
|
||||
} else if (parsedColour <= MIRC_MAX_COLOURS && parsedColour >= 0) {
|
||||
curBlock.fg = parseInt(parsedColour);
|
||||
theWidth += parsedColour.toString().length;
|
||||
widthOfColCodes += parsedColour.toString().length;
|
||||
|
||||
asciiStringArray = asciiStringArray.slice(
|
||||
parsedColour.toString().length,
|
||||
asciiStringArray.length
|
||||
asciiStringArray.length,
|
||||
);
|
||||
}
|
||||
|
||||
colourChar1 = null;
|
||||
colourChar2 = null;
|
||||
parsedColour = null;
|
||||
|
||||
// No background colour
|
||||
if (asciiStringArray[0] !== ",") {
|
||||
if (asciiStringArray[0] !== ',') {
|
||||
break;
|
||||
} else {
|
||||
// Remove , from array
|
||||
asciiStringArray.shift();
|
||||
}
|
||||
|
||||
// Attempt to work out bg
|
||||
colourChar1 = `${asciiStringArray[0]}`;
|
||||
colourChar2 = `${asciiStringArray[1]}`;
|
||||
parsedColour = parseInt(`${colourChar1}${colourChar2}`);
|
||||
|
||||
// Work out the 01, 02
|
||||
if (
|
||||
!isNaN(colourChar1) &&
|
||||
!isNaN(colourChar2) &&
|
||||
parseInt(colourChar2) > parseInt(colourChar1) &&
|
||||
!isNaN(parsedColour) &&
|
||||
parseInt(parsedColour) < 10
|
||||
!isNaN(colourChar1)
|
||||
&& !isNaN(colourChar2)
|
||||
&& parseInt(colourChar2) > parseInt(colourChar1)
|
||||
&& !isNaN(parsedColour)
|
||||
&& parseInt(parsedColour) < 10
|
||||
) {
|
||||
parsedColour = parseInt(colourChar2);
|
||||
asciiStringArray.shift();
|
||||
|
|
@ -389,15 +363,15 @@ export default {
|
|||
|
||||
if (isNaN(parsedColour)) {
|
||||
curBlock.bg = parseInt(colourChar1);
|
||||
theWidth += 1;
|
||||
widthOfColCodes += 1;
|
||||
asciiStringArray.shift();
|
||||
} else if (parsedColour <= MIRC_MAX_ColourS && parsedColour >= 0) {
|
||||
} else if (parsedColour <= MIRC_MAX_COLOURS && parsedColour >= 0) {
|
||||
curBlock.bg = parseInt(parsedColour);
|
||||
theWidth += parsedColour.toString().length;
|
||||
widthOfColCodes += parsedColour.toString().length;
|
||||
|
||||
asciiStringArray = asciiStringArray.slice(
|
||||
parsedColour.toString().length,
|
||||
asciiStringArray.length
|
||||
asciiStringArray.length,
|
||||
);
|
||||
|
||||
break;
|
||||
|
|
@ -409,64 +383,64 @@ export 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)
|
||||
);
|
||||
|
||||
finalAscii.blocks[asciiY][asciiX - 1] = { ...curBlock };
|
||||
break;
|
||||
} // End Switch
|
||||
|
||||
// break;
|
||||
} // End loop charPos
|
||||
|
||||
this.$store.commit("newAsciibirdMeta", this.finalAscii);
|
||||
this.asciibirdMeta = this.$store.getters.asciibirdMeta;
|
||||
// Store the ASCII
|
||||
this.$store.commit('newAsciibirdMeta', finalAscii);
|
||||
|
||||
let keys = this.asciibirdMeta
|
||||
// To show the ASCII after importing we get the last key
|
||||
// from the asciiBirdMeta array
|
||||
const keys = this.$store.getters.asciibirdMeta
|
||||
.map((v, k) => k)
|
||||
.filter((i) => i !== undefined);
|
||||
|
||||
// Set the current tab and pop the array for the last value
|
||||
this.currentTab = keys.pop();
|
||||
this.$store.commit("changeTab", this.currentTab);
|
||||
this.$store.commit('changeTab', this.currentTab);
|
||||
|
||||
// Update the browsers title to the ASCII filename
|
||||
document.title = `asciibird - ${this.$store.getters.currentAscii.title}`;
|
||||
},
|
||||
exportMirc() {
|
||||
let currentAscii = this.$store.getters.currentAscii;
|
||||
let output = [];
|
||||
var curBlock = null;
|
||||
var prevBlock = { bg: -1, fg: -1 };
|
||||
const { currentAscii } = this.$store.getters;
|
||||
const output = [];
|
||||
let curBlock = null;
|
||||
let prevBlock = { bg: -1, fg: -1 };
|
||||
|
||||
for (let y = 0; y <= currentAscii.blocks.length - 1; y++) {
|
||||
for (let x = 0; x <= currentAscii.blocks[y].length - 1; x++) {
|
||||
curBlock = currentAscii.blocks[y][x];
|
||||
|
||||
// If we have a difference between our previous block
|
||||
// we'll put a colour codes and continue as normal
|
||||
if (curBlock.bg !== prevBlock.bg || curBlock.fg !== prevBlock.fg) {
|
||||
Object.assign(curBlock, currentAscii.blocks[y][x]);
|
||||
const zeroPad = (num, places) => String(num).padStart(places, "0");
|
||||
output.push(
|
||||
`\u0003${zeroPad(curBlock.fg ?? 0, 2)},${zeroPad(
|
||||
curBlock.bg ?? 1,
|
||||
2
|
||||
)}`
|
||||
);
|
||||
const zeroPad = (num, places) => String(num).padStart(places, '0');
|
||||
output.push(`\u0003${zeroPad(curBlock.fg ?? 0, 2)},${zeroPad(curBlock.bg ?? 1, 2)}`);
|
||||
}
|
||||
|
||||
output.push(curBlock.char ?? " ");
|
||||
// null .chars will end up as space
|
||||
output.push(curBlock.char ?? ' ');
|
||||
prevBlock = currentAscii.blocks[y][x];
|
||||
}
|
||||
|
||||
// We can never have a -1 colour code so we'll always
|
||||
// write one at the start of each line
|
||||
prevBlock = { bg: -1, fg: -1 };
|
||||
// New line except for last line
|
||||
|
||||
// New line except for the very last line
|
||||
if (y < currentAscii.blocks.length - 1) {
|
||||
output.push("\n");
|
||||
output.push('\n');
|
||||
}
|
||||
}
|
||||
|
||||
// Download to a txt file
|
||||
const downloadToFile = (content, filename, contentType) => {
|
||||
const a = document.createElement("a");
|
||||
const a = document.createElement('a');
|
||||
const file = new Blob([content], { type: contentType });
|
||||
|
||||
a.href = URL.createObjectURL(file);
|
||||
|
|
@ -477,30 +451,26 @@ export default {
|
|||
};
|
||||
|
||||
// Check if txt already exists and append it
|
||||
var filename =
|
||||
currentAscii.title.slice(currentAscii.title.length - 3) === "txt"
|
||||
? currentAscii.title
|
||||
: `${currentAscii.title}.txt`;
|
||||
downloadToFile(output.join(""), filename, "text/plain");
|
||||
const filename = currentAscii.title.slice(currentAscii.title.length - 3) === 'txt' ? currentAscii.title : `${currentAscii.title}.txt`;
|
||||
downloadToFile(output.join(''), filename, 'text/plain');
|
||||
},
|
||||
createClick() {
|
||||
this.forms.createAscii.title = `New ASCII ${this.asciibirdMeta.length}`;
|
||||
this.$modal.show("create-ascii-modal");
|
||||
this.forms.createAscii.title = `New ASCII ${this.$store.getters.asciibirdMeta.length}`;
|
||||
this.$modal.show('create-ascii-modal');
|
||||
},
|
||||
changeTab(key, value) {
|
||||
// Update the tab index in vuex store
|
||||
this.currentTab = key;
|
||||
this.refresh = !this.refresh;
|
||||
this.$store.commit("changeTab", key);
|
||||
this.$store.commit('changeTab', key);
|
||||
},
|
||||
clearCache() {
|
||||
localStorage.clear();
|
||||
window.location.href = "/";
|
||||
window.location.href = '/';
|
||||
},
|
||||
createNewASCII() {
|
||||
const payload = {
|
||||
title: this.forms.createAscii.title,
|
||||
key: this.asciibirdMeta.length,
|
||||
key: this.$store.getters.asciibirdMeta.length,
|
||||
width: this.forms.createAscii.width,
|
||||
height: this.forms.createAscii.height,
|
||||
blockWidth: 8,
|
||||
|
|
@ -519,14 +489,13 @@ export default {
|
|||
}
|
||||
}
|
||||
|
||||
this.$store.commit("newAsciibirdMeta", payload);
|
||||
this.$modal.hide("create-ascii-modal");
|
||||
this.refresh = !this.refresh;
|
||||
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 = [];
|
||||
|
|
|
|||
|
|
@ -8,7 +8,13 @@ const vuexLocal = new VuexPersistence({
|
|||
});
|
||||
|
||||
export default new Vuex.Store({
|
||||
|
||||
state: {
|
||||
// The various options of ASCIIBIRD will eventually
|
||||
// end up in its own modal I guess
|
||||
options: {
|
||||
canvasRedrawSpeed: 2,
|
||||
},
|
||||
|
||||
// 0 => 'white',
|
||||
// 1 => 'black',
|
||||
|
|
@ -53,40 +59,40 @@ export default new Vuex.Store({
|
|||
// asciibirdMeta holds all of the ASCII information for all the tabs
|
||||
asciibirdMeta: [],
|
||||
toolbarIcons: [{
|
||||
name: 'default',
|
||||
icon: 'mouse-pointer',
|
||||
fa: 'fas',
|
||||
},
|
||||
{
|
||||
name: 'select',
|
||||
icon: 'square',
|
||||
fa: 'far',
|
||||
},
|
||||
{
|
||||
name: 'text',
|
||||
icon: 'font',
|
||||
fa: 'fas',
|
||||
},
|
||||
{
|
||||
name: 'fill',
|
||||
icon: 'fill-drip',
|
||||
fa: 'fas',
|
||||
},
|
||||
{
|
||||
name: 'brush',
|
||||
icon: 'paint-brush',
|
||||
fa: 'fas',
|
||||
},
|
||||
{
|
||||
name: 'dropper',
|
||||
icon: 'eye-dropper',
|
||||
fa: 'fas',
|
||||
},
|
||||
{
|
||||
name: 'eraser',
|
||||
icon: 'eraser',
|
||||
fa: 'fas',
|
||||
},
|
||||
name: 'default',
|
||||
icon: 'mouse-pointer',
|
||||
fa: 'fas',
|
||||
},
|
||||
{
|
||||
name: 'select',
|
||||
icon: 'square',
|
||||
fa: 'far',
|
||||
},
|
||||
{
|
||||
name: 'text',
|
||||
icon: 'font',
|
||||
fa: 'fas',
|
||||
},
|
||||
{
|
||||
name: 'fill',
|
||||
icon: 'fill-drip',
|
||||
fa: 'fas',
|
||||
},
|
||||
{
|
||||
name: 'brush',
|
||||
icon: 'paint-brush',
|
||||
fa: 'fas',
|
||||
},
|
||||
{
|
||||
name: 'dropper',
|
||||
icon: 'eye-dropper',
|
||||
fa: 'fas',
|
||||
},
|
||||
{
|
||||
name: 'eraser',
|
||||
icon: 'eraser',
|
||||
fa: 'fas',
|
||||
},
|
||||
],
|
||||
toolbarState: {
|
||||
currentColourFg: 0,
|
||||
|
|
@ -111,36 +117,36 @@ export default new Vuex.Store({
|
|||
},
|
||||
changeColourFg(state, payload) {
|
||||
state.toolbarState.currentColourFg = payload;
|
||||
state.toolbarState.isUpdating = false
|
||||
state.toolbarState.isChoosingFg = false
|
||||
state.toolbarState.isUpdating = false;
|
||||
state.toolbarState.isChoosingFg = false;
|
||||
},
|
||||
changeColourBg(state, payload) {
|
||||
state.toolbarState.currentColourBg = payload;
|
||||
state.toolbarState.isUpdating = false
|
||||
state.toolbarState.isChoosingBg = false
|
||||
state.toolbarState.isUpdating = false;
|
||||
state.toolbarState.isChoosingBg = false;
|
||||
},
|
||||
changeChar(state, payload) {
|
||||
state.toolbarState.selectedChar = payload;
|
||||
state.toolbarState.isUpdating = false
|
||||
state.toolbarState.isChoosingChar = false
|
||||
state.toolbarState.isUpdating = false;
|
||||
state.toolbarState.isChoosingChar = false;
|
||||
},
|
||||
changeTool(state, payload) {
|
||||
state.toolbarState.currentTool = payload;
|
||||
},
|
||||
changeIsUpdatingFg(state, payload) {
|
||||
state.toolbarState.isChoosingFg = payload
|
||||
state.toolbarState.isChoosingFg = payload;
|
||||
},
|
||||
changeIsUpdatingBg(state, payload) {
|
||||
state.toolbarState.isChoosingBg = payload
|
||||
state.toolbarState.isChoosingBg = payload;
|
||||
},
|
||||
changeIsUpdatingChar(state, payload) {
|
||||
state.toolbarState.isChoosingChar = payload
|
||||
state.toolbarState.isChoosingChar = payload;
|
||||
},
|
||||
changeTargetingFg(state, payload) {
|
||||
state.toolbarState.targetingFg = payload
|
||||
state.toolbarState.targetingFg = payload;
|
||||
},
|
||||
changeTargetingBg(state, payload) {
|
||||
state.toolbarState.targetingBg = payload
|
||||
state.toolbarState.targetingBg = payload;
|
||||
},
|
||||
changeTargetingChar(state, payload) {
|
||||
state.toolbarState.targetingChar = payload;
|
||||
|
|
@ -149,26 +155,26 @@ export default new Vuex.Store({
|
|||
state.asciibirdMeta.push(payload);
|
||||
},
|
||||
updateToolBarState(state, payload) {
|
||||
state.toolbarState = payload
|
||||
}
|
||||
state.toolbarState = payload;
|
||||
},
|
||||
},
|
||||
getters: {
|
||||
getToolbarIcons: state => state.toolbarIcons,
|
||||
getToolbarState: state => state.toolbarState,
|
||||
getCurrentTool: state => state.toolbarState.currentTool,
|
||||
getTargetingBg: state => state.toolbarState.targetingBg,
|
||||
getTargetingFg: state => state.toolbarState.targetingFg,
|
||||
getTargetingChar: state => state.toolbarState.targetingChar,
|
||||
getFgColour: state => state.toolbarState.currentColourFg,
|
||||
getBgColour: state => state.toolbarState.currentColourBg,
|
||||
getSelectedChar: state => state.toolbarState.selectedChar,
|
||||
currentTab: state => state.tab,
|
||||
charCodes: state => state.charCodes,
|
||||
mircColours: state => state.mircColours,
|
||||
currentAscii: state => state.asciibirdMeta[state.tab] ?? false,
|
||||
asciibirdMeta: state => state.asciibirdMeta,
|
||||
nextTabValue: state => state.asciibirdMeta.length,
|
||||
blockSizeMultiplier: state => state.blockSizeMultiplier,
|
||||
getToolbarIcons: (state) => state.toolbarIcons,
|
||||
getToolbarState: (state) => state.toolbarState,
|
||||
getCurrentTool: (state) => state.toolbarState.currentTool,
|
||||
getTargetingBg: (state) => state.toolbarState.targetingBg,
|
||||
getTargetingFg: (state) => state.toolbarState.targetingFg,
|
||||
getTargetingChar: (state) => state.toolbarState.targetingChar,
|
||||
getFgColour: (state) => state.toolbarState.currentColourFg,
|
||||
getBgColour: (state) => state.toolbarState.currentColourBg,
|
||||
getSelectedChar: (state) => state.toolbarState.selectedChar,
|
||||
currentTab: (state) => state.tab,
|
||||
charCodes: (state) => state.charCodes,
|
||||
mircColours: (state) => state.mircColours,
|
||||
currentAscii: (state) => state.asciibirdMeta[state.tab] ?? false,
|
||||
asciibirdMeta: (state) => state.asciibirdMeta,
|
||||
nextTabValue: (state) => state.asciibirdMeta.length,
|
||||
blockSizeMultiplier: (state) => state.blockSizeMultiplier,
|
||||
},
|
||||
actions: {},
|
||||
modules: {},
|
||||
|
|
|
|||
|
|
@ -13,6 +13,17 @@
|
|||
@resizing="onCanvasResize"
|
||||
@dragging="onCanvasDrag"
|
||||
>
|
||||
<canvas
|
||||
ref="canvastools"
|
||||
id="canvastools"
|
||||
class="canvas"
|
||||
:width="canvas.width"
|
||||
:height="canvas.height"
|
||||
@mousemove="canvasMouseMove"
|
||||
@mousedown="canvasMouseDown"
|
||||
@mouseup="canvasMouseUp"
|
||||
></canvas>
|
||||
|
||||
<canvas
|
||||
ref="canvas"
|
||||
id="canvas"
|
||||
|
|
@ -42,22 +53,20 @@ body {
|
|||
</style>
|
||||
|
||||
<script>
|
||||
import Block from "../components/Block.vue";
|
||||
import Block from '../components/Block.vue';
|
||||
|
||||
export default {
|
||||
name: "Editor",
|
||||
name: 'Editor',
|
||||
components: { Block },
|
||||
mounted() {
|
||||
if (this.$store.getters.currentAscii.blocks) {
|
||||
this.ctx = this.$refs.canvas.getContext("2d");
|
||||
this.canvas.width =
|
||||
this.$store.getters.currentAscii.width *
|
||||
this.$store.getters.currentAscii.blockWidth;
|
||||
this.canvas.height =
|
||||
this.$store.getters.currentAscii.height *
|
||||
this.$store.getters.currentAscii.blockHeight;
|
||||
this.ctx = this.$refs.canvas.getContext('2d');
|
||||
this.canvas.width = this.$store.getters.currentAscii.width
|
||||
* this.$store.getters.currentAscii.blockWidth;
|
||||
this.canvas.height = this.$store.getters.currentAscii.height
|
||||
* this.$store.getters.currentAscii.blockHeight;
|
||||
this.delayRedrawCanvas();
|
||||
this.$store.commit("changeTool", "default");
|
||||
this.$store.commit('changeTool', 'default');
|
||||
}
|
||||
},
|
||||
created() {},
|
||||
|
|
@ -77,7 +86,7 @@ export default {
|
|||
return `width:${this.canvas.width};height:${this.canvas.height};`;
|
||||
},
|
||||
generateTitle() {
|
||||
return this.$store.getters.currentAscii.title ?? "";
|
||||
return this.$store.getters.currentAscii.title ?? '';
|
||||
},
|
||||
watchAsciiChange() {
|
||||
return this.$store.getters.currentAscii;
|
||||
|
|
@ -85,12 +94,10 @@ export default {
|
|||
},
|
||||
watch: {
|
||||
watchAsciiChange(val, old) {
|
||||
this.canvas.width =
|
||||
this.$store.getters.currentAscii.width *
|
||||
this.$store.getters.currentAscii.blockWidth;
|
||||
this.canvas.height =
|
||||
this.$store.getters.currentAscii.height *
|
||||
this.$store.getters.currentAscii.blockHeight;
|
||||
this.canvas.width = this.$store.getters.currentAscii.width
|
||||
* this.$store.getters.currentAscii.blockWidth;
|
||||
this.canvas.height = this.$store.getters.currentAscii.height
|
||||
* this.$store.getters.currentAscii.blockHeight;
|
||||
|
||||
this.delayRedrawCanvas();
|
||||
|
||||
|
|
@ -117,19 +124,19 @@ export default {
|
|||
let curBlock = {};
|
||||
|
||||
// hack font for ascii shout outs 2 beenz
|
||||
this.ctx.font = "12.5px Hack";
|
||||
this.ctx.font = '12.5px Hack';
|
||||
|
||||
for (y = 0; y < this.$store.getters.currentAscii.height + 1; y++) {
|
||||
canvasY = BLOCK_HEIGHT * y;
|
||||
|
||||
for (x = 0; x < this.$store.getters.currentAscii.width + 1; x++) {
|
||||
if (
|
||||
this.$store.getters.currentAscii.blocks[y] &&
|
||||
this.$store.getters.currentAscii.blocks[y][x]
|
||||
this.$store.getters.currentAscii.blocks[y]
|
||||
&& this.$store.getters.currentAscii.blocks[y][x]
|
||||
) {
|
||||
curBlock = Object.assign(
|
||||
curBlock,
|
||||
this.$store.getters.currentAscii.blocks[y][x]
|
||||
this.$store.getters.currentAscii.blocks[y][x],
|
||||
);
|
||||
|
||||
canvasX = BLOCK_WIDTH * x;
|
||||
|
|
@ -141,7 +148,7 @@ export default {
|
|||
];
|
||||
this.ctx.fillRect(canvasX, canvasY, BLOCK_WIDTH, BLOCK_HEIGHT);
|
||||
} else {
|
||||
this.ctx.fillStyle = "rgba(0, 0, 200, 0)";
|
||||
this.ctx.fillStyle = 'rgba(0, 0, 200, 0)';
|
||||
}
|
||||
|
||||
if (curBlock.char) {
|
||||
|
|
@ -150,13 +157,13 @@ export default {
|
|||
curBlock.fg
|
||||
];
|
||||
} else {
|
||||
this.ctx.fillStyle = "#000000";
|
||||
this.ctx.fillStyle = '#000000';
|
||||
}
|
||||
|
||||
this.ctx.fillText(
|
||||
curBlock.char,
|
||||
canvasX - 1,
|
||||
canvasY + BLOCK_HEIGHT - 3
|
||||
canvasY + BLOCK_HEIGHT - 3,
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
@ -177,65 +184,59 @@ export default {
|
|||
|
||||
// Mouse Up, Down and Move
|
||||
canvasMouseUp() {
|
||||
this.delayRedrawCanvas();
|
||||
|
||||
switch (this.$store.getters.getCurrentTool) {
|
||||
case "brush":
|
||||
case 'brush':
|
||||
this.canTool = false;
|
||||
break;
|
||||
|
||||
case "eraser":
|
||||
case 'eraser':
|
||||
this.canTool = false;
|
||||
break;
|
||||
|
||||
case "fill":
|
||||
case 'fill':
|
||||
this.canTool = false;
|
||||
|
||||
break;
|
||||
}
|
||||
|
||||
this.delayRedrawCanvas();
|
||||
},
|
||||
canvasMouseDown() {
|
||||
if (
|
||||
this.$store.getters.currentAscii.blocks[this.y] &&
|
||||
this.$store.getters.currentAscii.blocks[this.y][this.x]
|
||||
) {
|
||||
if (this.$store.getters.currentAscii.blocks[this.y] && this.$store.getters.currentAscii.blocks[this.y][this.x]) {
|
||||
const targetBlock = this.$store.getters.currentAscii.blocks[this.y][this.x];
|
||||
|
||||
switch (this.$store.getters.getCurrentTool) {
|
||||
case "default":
|
||||
case 'default':
|
||||
break;
|
||||
|
||||
case "fill":
|
||||
this.fillTool();
|
||||
case 'fill':
|
||||
this.fillTool(targetBlock);
|
||||
break;
|
||||
|
||||
case "brush":
|
||||
case 'brush':
|
||||
this.canTool = true;
|
||||
break;
|
||||
|
||||
case "eraser":
|
||||
case 'eraser':
|
||||
this.canTool = true;
|
||||
break;
|
||||
|
||||
case "dropper":
|
||||
let curBlock = this.$store.getters.currentAscii.blocks[this.y][
|
||||
this.x
|
||||
];
|
||||
case 'dropper':
|
||||
const curBlock = this.$store.getters.currentAscii.blocks[this.y][this.x];
|
||||
|
||||
if (this.$store.getters.getTargetingFg) {
|
||||
this.$store.commit("changeColourFg", curBlock.fg);
|
||||
this.$store.commit('changeColourFg', curBlock.fg);
|
||||
}
|
||||
|
||||
if (this.$store.getters.getTargetingBg) {
|
||||
this.$store.commit("changeColourBg", curBlock.bg);
|
||||
this.$store.commit('changeColourBg', curBlock.bg);
|
||||
}
|
||||
|
||||
if (this.$store.getters.getTargetingChar) {
|
||||
this.$store.commit("changeChar", curBlock.char);
|
||||
this.$store.commit('changeChar', curBlock.char);
|
||||
}
|
||||
|
||||
this.$store.commit(
|
||||
"changeTool",
|
||||
this.$store.getters.getCurrentTool
|
||||
);
|
||||
this.$store.commit('changeTool', this.$store.getters.getCurrentTool);
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
|
@ -251,17 +252,17 @@ export default {
|
|||
|
||||
this.x = Math.floor(this.x / this.$store.getters.currentAscii.blockWidth);
|
||||
this.y = Math.floor(
|
||||
this.y / this.$store.getters.currentAscii.blockHeight
|
||||
this.y / this.$store.getters.currentAscii.blockHeight,
|
||||
);
|
||||
|
||||
this.$emit('coordsupdate', {x: this.x, y: this.y})
|
||||
this.$emit('coordsupdate', { x: this.x, y: this.y });
|
||||
|
||||
if (
|
||||
this.$store.getters.currentAscii.blocks[this.y] &&
|
||||
this.$store.getters.currentAscii.blocks[this.y][this.x]
|
||||
this.$store.getters.currentAscii.blocks[this.y]
|
||||
&& this.$store.getters.currentAscii.blocks[this.y][this.x]
|
||||
) {
|
||||
switch (this.$store.getters.getCurrentTool) {
|
||||
case "brush":
|
||||
case 'brush':
|
||||
if (this.canTool) {
|
||||
if (this.$store.getters.getTargetingFg) {
|
||||
this.$store.getters.currentAscii.blocks[this.y][this.x].fg = this.$store.getters.getFgColour;
|
||||
|
|
@ -277,7 +278,7 @@ export default {
|
|||
}
|
||||
break;
|
||||
|
||||
case "eraser":
|
||||
case 'eraser':
|
||||
if (this.canTool) {
|
||||
if (this.$store.getters.getTargetingFg) {
|
||||
this.$store.getters.currentAscii.blocks[this.y][
|
||||
|
|
@ -310,21 +311,17 @@ export default {
|
|||
setTimeout(() => {
|
||||
this.redraw = true;
|
||||
this.redrawCanvas();
|
||||
}, 8);
|
||||
}, this.$store.state.options.canvasRedrawSpeed);
|
||||
}
|
||||
},
|
||||
|
||||
// TOOLS
|
||||
fillTool() {
|
||||
let fillStartBlock = this.$store.getters.currentAscii.blocks[this.y][
|
||||
this.x
|
||||
];
|
||||
|
||||
fillTool(block) {
|
||||
if (this.$store.getters.getTargetingBg) {
|
||||
let fillSameBg = fillStartBlock.bg;
|
||||
const fillSameBg = block.bg;
|
||||
}
|
||||
|
||||
// console.log(fillStartBlock);
|
||||
console.log(block);
|
||||
},
|
||||
},
|
||||
};
|
||||
|
|
|
|||
Loading…
Reference in New Issue