more refactor, code format, better char picker with space
This commit is contained in:
parent
51489aa604
commit
d751a60ce5
|
|
@ -1,99 +0,0 @@
|
|||
'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(71,0,0)',
|
||||
'rgb(71,33,0)',
|
||||
'rgb(71,71,0)',
|
||||
'rgb(50,71,0)',
|
||||
'rgb(0,71,0)',
|
||||
'rgb(0,71,44)',
|
||||
'rgb(0,71,71)',
|
||||
'rgb(0,39,71)',
|
||||
'rgb(0,0,71)',
|
||||
'rgb(46,0,71)',
|
||||
'rgb(71,0,71)',
|
||||
'rgb(71,0,42)',
|
||||
'rgb(116,0,0)',
|
||||
'rgb(116,58,0)',
|
||||
'rgb(116,116,0)',
|
||||
'rgb(81,116,0)',
|
||||
'rgb(0,116,0)',
|
||||
'rgb(0,116,73)',
|
||||
'rgb(0,116,116)',
|
||||
'rgb(0,64,116)',
|
||||
'rgb(0,0,116)',
|
||||
'rgb(75,0,116)',
|
||||
'rgb(116,0,116)',
|
||||
'rgb(116,0,69)',
|
||||
'rgb(181,0,0)',
|
||||
'rgb(181,99,0)',
|
||||
'rgb(181,181,0)',
|
||||
'rgb(125,181,0)',
|
||||
'rgb(0,181,0)',
|
||||
'rgb(0,181,113)',
|
||||
'rgb(0,181,181)',
|
||||
'rgb(0,99,181)',
|
||||
'rgb(0,0,181)',
|
||||
'rgb(117,0,181)',
|
||||
'rgb(181,0,181)',
|
||||
'rgb(181,0,107)',
|
||||
'rgb(255,0,0)',
|
||||
'rgb(255,140,0)',
|
||||
'rgb(255,255,0)',
|
||||
'rgb(178,255,0)',
|
||||
'rgb(0,255,0)',
|
||||
'rgb(0,255,160)',
|
||||
'rgb(0,255,255)',
|
||||
'rgb(0,140,255)',
|
||||
'rgb(0,0,255)',
|
||||
'rgb(165,0,255)',
|
||||
'rgb(255,0,255)',
|
||||
'rgb(255,0,152)',
|
||||
'rgb(255,89,89)',
|
||||
'rgb(255,180,89)',
|
||||
'rgb(255,255,113)',
|
||||
'rgb(207,255,96)',
|
||||
'rgb(111,255,111)',
|
||||
'rgb(101,255,201)',
|
||||
'rgb(109,255,255)',
|
||||
'rgb(89,180,255)',
|
||||
'rgb(89,89,255)',
|
||||
'rgb(196,89,255)',
|
||||
'rgb(255,102,255)',
|
||||
'rgb(255,89,188)',
|
||||
'rgb(255,156,156)',
|
||||
'rgb(255,211,156)',
|
||||
'rgb(255,255,156)',
|
||||
'rgb(226,255,156)',
|
||||
'rgb(156,255,156)',
|
||||
'rgb(156,255,219)',
|
||||
'rgb(156,255,255)',
|
||||
'rgb(156,211,255)',
|
||||
'rgb(156,156,255)',
|
||||
'rgb(220,156,255)',
|
||||
'rgb(255,156,255)',
|
||||
'rgb(255,148,211)',
|
||||
'rgb(0,0,0)',
|
||||
'rgb(19,19,19)',
|
||||
'rgb(40,40,40)',
|
||||
'rgb(54,54,54)',
|
||||
'rgb(77,77,77)',
|
||||
'rgb(101,101,101)',
|
||||
'rgb(129,129,129)',
|
||||
'rgb(159,159,159)',
|
||||
'rgb(188,188,188)',
|
||||
'rgb(226,226,226)',
|
||||
'rgb(255,255,255))',
|
||||
|
|
@ -22,10 +22,7 @@
|
|||
>
|
||||
Export mIRC to File
|
||||
</li>
|
||||
<li
|
||||
class="ml-1"
|
||||
@click="$store.commit('openModal', 'paste-modal')"
|
||||
>
|
||||
<li class="ml-1" @click="$store.commit('openModal', 'paste-modal')">
|
||||
Import mIRC from Clipboard
|
||||
</li>
|
||||
<li
|
||||
|
|
@ -43,7 +40,13 @@
|
|||
Save Asciibird State
|
||||
</li>
|
||||
<li @click="startImport('asb')" class="ml-1">Load Asciibird State</li>
|
||||
<li @click="$store.commit('openModal', 'edit-ascii')" class="ml-1" v-if="asciibirdMeta.length">Edit Current Ascii</li>
|
||||
<li
|
||||
@click="$store.commit('openModal', 'edit-ascii')"
|
||||
class="ml-1"
|
||||
v-if="asciibirdMeta.length"
|
||||
>
|
||||
Edit Current Ascii
|
||||
</li>
|
||||
</ul>
|
||||
</context-menu>
|
||||
|
||||
|
|
@ -72,15 +75,16 @@
|
|||
</t-button>
|
||||
|
||||
<Toolbar :canvas-x="canvasX" :canvas-y="canvasY" />
|
||||
<DebugPanel :canvas-x="canvasX" :canvas-y="canvasY" v-if="debugPanelState.visible" />
|
||||
<DebugPanel
|
||||
:canvas-x="canvasX"
|
||||
:canvas-y="canvasY"
|
||||
v-if="debugPanelState.visible"
|
||||
/>
|
||||
<Editor @coordsupdate="updateCoords" />
|
||||
|
||||
<CharPicker v-if="toolbarState.isChoosingChar" />
|
||||
<ColourPicker
|
||||
v-if="
|
||||
toolbarState.isChoosingFg ||
|
||||
toolbarState.isChoosingBg
|
||||
"
|
||||
v-if="toolbarState.isChoosingFg || toolbarState.isChoosingBg"
|
||||
/>
|
||||
</template>
|
||||
<template v-else>
|
||||
|
|
@ -108,7 +112,7 @@ import EditAscii from "./components/modals/EditAscii.vue";
|
|||
import PasteAscii from "./components/modals/PasteAscii.vue";
|
||||
import LZString from "lz-string";
|
||||
|
||||
import { parseMircAscii } from "./ascii.js"
|
||||
import { parseMircAscii, toolbarIcons } from "./ascii.js";
|
||||
|
||||
export default {
|
||||
async created() {
|
||||
|
|
@ -149,7 +153,7 @@ export default {
|
|||
});
|
||||
|
||||
// Considers paths
|
||||
const asciiName = haxAscii.split('/').pop();
|
||||
const asciiName = haxAscii.split("/").pop();
|
||||
const asciiData = await res.text();
|
||||
this.mircAsciiImport(asciiData, asciiName);
|
||||
}
|
||||
|
|
@ -163,7 +167,7 @@ export default {
|
|||
ContextMenu,
|
||||
NewAscii,
|
||||
EditAscii,
|
||||
PasteAscii
|
||||
PasteAscii,
|
||||
},
|
||||
name: "Dashboard",
|
||||
data: () => ({
|
||||
|
|
@ -178,11 +182,7 @@ export default {
|
|||
}),
|
||||
computed: {
|
||||
currentTool() {
|
||||
return (
|
||||
this.$store.getters.toolbarIcons[
|
||||
this.$store.getters.currentTool
|
||||
] ?? null
|
||||
);
|
||||
return toolbarIcons[this.$store.getters.currentTool] ?? null;
|
||||
},
|
||||
icon() {
|
||||
return [
|
||||
|
|
@ -218,7 +218,7 @@ export default {
|
|||
return this.$store.getters.asciibirdMeta;
|
||||
},
|
||||
debugPanelState() {
|
||||
return this.$store.getters.debugPanel
|
||||
return this.$store.getters.debugPanel;
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
|
|
@ -259,7 +259,7 @@ export default {
|
|||
this.$refs.asciiInput.click();
|
||||
},
|
||||
mircAsciiImport(contents, filename) {
|
||||
parseMircAscii(contents, filename)
|
||||
parseMircAscii(contents, filename);
|
||||
},
|
||||
importAsciibirdState(fileContents) {
|
||||
let contents = JSON.parse(
|
||||
|
|
@ -299,15 +299,13 @@ export default {
|
|||
const output = [];
|
||||
let curBlock = null;
|
||||
let prevBlock = { bg: -1, fg: -1 };
|
||||
|
||||
|
||||
for (let y = 0; y <= blocks.length - 1; y++) {
|
||||
|
||||
if (y >= currentAscii.height) {
|
||||
continue;
|
||||
}
|
||||
|
||||
for (let x = 0; x <= blocks[y].length - 1; x++) {
|
||||
|
||||
if (x >= currentAscii.width) {
|
||||
continue;
|
||||
}
|
||||
|
|
@ -317,16 +315,13 @@ export default {
|
|||
// 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) {
|
||||
curBlock = { ... blocks[y][x]};
|
||||
curBlock = { ...blocks[y][x] };
|
||||
const zeroPad = (num, places) => String(num).padStart(places, "0");
|
||||
output.push(
|
||||
`\u0003${zeroPad(
|
||||
curBlock.fg ?? this.options.defaultFg,
|
||||
2
|
||||
)},${zeroPad(
|
||||
curBlock.bg ?? this.options.defaultBg,
|
||||
2
|
||||
)}`
|
||||
)},${zeroPad(curBlock.bg ?? this.options.defaultBg, 2)}`
|
||||
);
|
||||
}
|
||||
|
||||
|
|
|
|||
182
src/ascii.js
182
src/ascii.js
|
|
@ -2,7 +2,7 @@ import LZString from "lz-string";
|
|||
import store from "./store";
|
||||
|
||||
export const parseMircAscii = (content, title) => {
|
||||
const MIRC_MAX_COLOURS = store.getters.mircColours.length;
|
||||
const MIRC_MAX_COLOURS = mircColours99.length;
|
||||
|
||||
// The current state of the Colours
|
||||
let curBlock = {
|
||||
|
|
@ -271,4 +271,184 @@ export const parseMircAscii = (content, title) => {
|
|||
return true;
|
||||
}
|
||||
|
||||
// 0 => 'white',
|
||||
// 1 => 'black',
|
||||
// 2 => 'navy',
|
||||
// 3 => 'green',
|
||||
// 4 => 'red',
|
||||
// 5 => 'brown',
|
||||
// 6 => 'purple',
|
||||
// 7 => 'olive',
|
||||
// 8 => 'yellow', # dark yellow
|
||||
// 9 => 'lime', # ltgreen
|
||||
// 10 => 'teal',
|
||||
// 11 => 'cyan',
|
||||
// 12 => 'blue', # ltblue,
|
||||
// 13 => 'fuchsia', # pink
|
||||
// 14 => 'grey',
|
||||
// 15 => 'lightgrey',
|
||||
export const mircColours99 = [
|
||||
'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(71,0,0)',
|
||||
'rgb(71,33,0)',
|
||||
'rgb(71,71,0)',
|
||||
'rgb(50,71,0)',
|
||||
'rgb(0,71,0)',
|
||||
'rgb(0,71,44)',
|
||||
'rgb(0,71,71)',
|
||||
'rgb(0,39,71)',
|
||||
'rgb(0,0,71)',
|
||||
'rgb(46,0,71)',
|
||||
'rgb(71,0,71)',
|
||||
'rgb(71,0,42)',
|
||||
'rgb(116,0,0)',
|
||||
'rgb(116,58,0)',
|
||||
'rgb(116,116,0)',
|
||||
'rgb(81,116,0)',
|
||||
'rgb(0,116,0)',
|
||||
'rgb(0,116,73)',
|
||||
'rgb(0,116,116)',
|
||||
'rgb(0,64,116)',
|
||||
'rgb(0,0,116)',
|
||||
'rgb(75,0,116)',
|
||||
'rgb(116,0,116)',
|
||||
'rgb(116,0,69)',
|
||||
'rgb(181,0,0)',
|
||||
'rgb(181,99,0)',
|
||||
'rgb(181,181,0)',
|
||||
'rgb(125,181,0)',
|
||||
'rgb(0,181,0)',
|
||||
'rgb(0,181,113)',
|
||||
'rgb(0,181,181)',
|
||||
'rgb(0,99,181)',
|
||||
'rgb(0,0,181)',
|
||||
'rgb(117,0,181)',
|
||||
'rgb(181,0,181)',
|
||||
'rgb(181,0,107)',
|
||||
'rgb(255,0,0)',
|
||||
'rgb(255,140,0)',
|
||||
'rgb(255,255,0)',
|
||||
'rgb(178,255,0)',
|
||||
'rgb(0,255,0)',
|
||||
'rgb(0,255,160)',
|
||||
'rgb(0,255,255)',
|
||||
'rgb(0,140,255)',
|
||||
'rgb(0,0,255)',
|
||||
'rgb(165,0,255)',
|
||||
'rgb(255,0,255)',
|
||||
'rgb(255,0,152)',
|
||||
'rgb(255,89,89)',
|
||||
'rgb(255,180,89)',
|
||||
'rgb(255,255,113)',
|
||||
'rgb(207,255,96)',
|
||||
'rgb(111,255,111)',
|
||||
'rgb(101,255,201)',
|
||||
'rgb(109,255,255)',
|
||||
'rgb(89,180,255)',
|
||||
'rgb(89,89,255)',
|
||||
'rgb(196,89,255)',
|
||||
'rgb(255,102,255)',
|
||||
'rgb(255,89,188)',
|
||||
'rgb(255,156,156)',
|
||||
'rgb(255,211,156)',
|
||||
'rgb(255,255,156)',
|
||||
'rgb(226,255,156)',
|
||||
'rgb(156,255,156)',
|
||||
'rgb(156,255,219)',
|
||||
'rgb(156,255,255)',
|
||||
'rgb(156,211,255)',
|
||||
'rgb(156,156,255)',
|
||||
'rgb(220,156,255)',
|
||||
'rgb(255,156,255)',
|
||||
'rgb(255,148,211)',
|
||||
'rgb(0,0,0)',
|
||||
'rgb(19,19,19)',
|
||||
'rgb(40,40,40)',
|
||||
'rgb(54,54,54)',
|
||||
'rgb(77,77,77)',
|
||||
'rgb(101,101,101)',
|
||||
'rgb(129,129,129)',
|
||||
'rgb(159,159,159)',
|
||||
'rgb(188,188,188)',
|
||||
'rgb(226,226,226)',
|
||||
'rgb(255,255,255))'
|
||||
];
|
||||
|
||||
// White list of chars we want to accept, not at the moment
|
||||
// though, we just use this for random chars on new ascii
|
||||
export const charCodes = [' ', '!', '"', '#', '$', '%', '&', '\'', '(', ')', '*', '+', ',', '-', '.', '/',
|
||||
'0', '1', '2', '3', '4', '5', '6', '7', '8', '9', ':', ';', '<', '=', '>', '?', '@', 'A',
|
||||
'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S',
|
||||
'T', 'U', 'V', 'W', 'X', 'Y', 'Z', '[', '\\', ']', '^', '_', '`', 'a', 'b', 'c', 'd', 'e',
|
||||
'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w',
|
||||
'x', 'y', 'z', '{', '|', '}', '~', 'Ç', 'ü', 'é', 'â', 'ä', 'à', 'å', 'ç', 'ê', 'ë', 'è',
|
||||
'ï', 'î', 'ì', 'Ä', 'Å', 'É', 'æ', 'Æ', 'ô', 'ö', 'ò', 'û', 'ù', 'ÿ', 'Ö', 'Ü', 'ø', '£',
|
||||
'Ø', '×', 'ƒ', 'á', 'í', 'ó', 'ú', 'ñ', 'Ñ', 'ª', 'º', '¿', '®', '¬', '½', '¼', '¡', '«',
|
||||
'»', '░', '▒', '▓', '│', '┤', 'Á', 'Â', 'À', '©', '╣', '║', '╗', '╝', '¢', '¥', '┐', '└',
|
||||
'┴', '┬', '├', '─', '┼', 'ã', 'Ã', '╚', '╔', '╩', '╦', '╠', '═', '╬', '¤', 'ð', 'Ð', 'Ê',
|
||||
'Ë', 'È', 'ı', 'Í', 'Î', 'Ï', '┘', '┌', '█', '▄', '¦', 'Ì', '▀', 'Ó', 'ß', 'Ô', 'Ò', 'õ',
|
||||
'Õ', 'µ', 'þ', 'Þ', 'Ú', 'Û', 'Ù', 'ý', 'Ý', '¯', '´', '≡', '±', '‗', '¾', '¶', '§', '÷',
|
||||
'¸', '°', '¨', '·', '¹', '³', '²'
|
||||
];
|
||||
|
||||
|
||||
export const toolbarIcons = [{
|
||||
name: 'default',
|
||||
icon: 'mouse-pointer',
|
||||
fa: 'fas',
|
||||
svgPath: 'assets/mouse-pointer-solid.svg',
|
||||
},
|
||||
{
|
||||
name: 'select',
|
||||
icon: 'square',
|
||||
fa: 'far',
|
||||
svgPath: 'assets/square-regular.svg',
|
||||
},
|
||||
{
|
||||
name: 'text',
|
||||
icon: 'font',
|
||||
fa: 'fas',
|
||||
svgPath: 'assets/font-solid.svg',
|
||||
},
|
||||
{
|
||||
name: 'fill',
|
||||
icon: 'fill-drip',
|
||||
fa: 'fas',
|
||||
svgPath: 'assets/fill-drip-solid.svg',
|
||||
},
|
||||
{
|
||||
name: 'brush',
|
||||
icon: 'paint-brush',
|
||||
fa: 'fas',
|
||||
svgPath: 'assets/paint-brush-solid.svg',
|
||||
},
|
||||
{
|
||||
name: 'dropper',
|
||||
icon: 'eye-dropper',
|
||||
fa: 'fas',
|
||||
svgPath: 'assets/eye-dropper-solid.svg',
|
||||
},
|
||||
{
|
||||
name: 'eraser',
|
||||
icon: 'eraser',
|
||||
fa: 'fas',
|
||||
svgPath: 'assets/eraser-solid.svg',
|
||||
},
|
||||
];
|
||||
|
||||
export default createNewAscii
|
||||
|
|
@ -1,7 +1,5 @@
|
|||
<template>
|
||||
<t-card>
|
||||
|
||||
|
||||
<t-button
|
||||
type="button"
|
||||
:style="`background-color: ${mircColours[currentFg]} !important;`"
|
||||
|
|
@ -29,26 +27,26 @@
|
|||
<font-awesome-icon :icon="['fas', 'sync']" />
|
||||
</t-button>
|
||||
|
||||
|
||||
<t-button
|
||||
type="button"
|
||||
:style="`background-color: ${mircColours[currentBg]} !important;color: ${mircColours[currentFg]};`"
|
||||
class="border-gray-200 p-1"
|
||||
class="border-gray-200 p-1 w-8 h-8"
|
||||
id="currentChar"
|
||||
@click="$store.commit('changeIsUpdatingChar', true)"
|
||||
>{{ `${toolbarState.selectedChar}` }}</t-button
|
||||
>{{ toolbarState.selectedChar }}</t-button
|
||||
>
|
||||
|
||||
</t-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mircColours99 } from "../ascii.js";
|
||||
|
||||
export default {
|
||||
name: "Colours",
|
||||
data: () => ({}),
|
||||
computed: {
|
||||
mircColours() {
|
||||
return this.$store.getters.mircColours;
|
||||
return mircColours99;
|
||||
},
|
||||
toolbarState() {
|
||||
return this.$store.getters.toolbarState;
|
||||
|
|
|
|||
|
|
@ -35,6 +35,7 @@
|
|||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { toolbarIcons, mircColours99 } from "../ascii.js"
|
||||
|
||||
export default {
|
||||
created() {
|
||||
|
|
@ -57,7 +58,7 @@ export default {
|
|||
}),
|
||||
computed: {
|
||||
getToolName() {
|
||||
return this.$store.getters.toolbarIcons[this.$store.getters.currentTool] ? this.$store.getters.toolbarIcons[this.$store.getters.currentTool].name : 'none'
|
||||
return toolbarIcons[this.$store.getters.currentTool] ? toolbarIcons[this.$store.getters.currentTool].name : 'none'
|
||||
},
|
||||
debugPanelState() {
|
||||
return this.$store.getters.debugPanel
|
||||
|
|
@ -81,12 +82,12 @@ export default {
|
|||
}
|
||||
},
|
||||
currentTool() {
|
||||
return this.$store.getters.toolbarIcons[
|
||||
return toolbarIcons[
|
||||
this.$store.getters.currentTool
|
||||
];
|
||||
},
|
||||
mircColours() {
|
||||
return this.$store.getters.mircColours;
|
||||
return mircColours99;
|
||||
},
|
||||
canFg() {
|
||||
return this.$store.getters.isTargettingFg;
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
<vue-draggable-resizable
|
||||
@dragstop="onDragStop"
|
||||
:grid="[currentAscii.blockWidth, currentAscii.blockHeight]"
|
||||
style="z-index: 5;"
|
||||
style="z-index: 5"
|
||||
:min-width="8 * 25"
|
||||
:max-width="8 * 30"
|
||||
:max-height="13 * 39"
|
||||
|
|
@ -40,7 +40,6 @@
|
|||
<span class="text-sm">Text</span>
|
||||
</label>
|
||||
|
||||
|
||||
<hr />
|
||||
|
||||
<label class="flex ml-1">
|
||||
|
|
@ -60,7 +59,6 @@
|
|||
<span class="text-sm">Mirror Y</span>
|
||||
</label>
|
||||
|
||||
|
||||
<hr />
|
||||
|
||||
<Colours />
|
||||
|
|
@ -69,7 +67,11 @@
|
|||
type="button"
|
||||
v-for="(value, keyToolbar) in toolbarIcons"
|
||||
:key="keyToolbar + 50"
|
||||
:class="`max-h-7 max-w-5 w-7 ${(currentTool.name === value.name ? 'border-gray-900' : 'border-gray-200')}`"
|
||||
:class="`max-h-7 max-w-5 w-7 ${
|
||||
currentTool.name === value.name
|
||||
? 'border-gray-900'
|
||||
: 'border-gray-200'
|
||||
}`"
|
||||
@click="$store.commit('changeTool', keyToolbar)"
|
||||
>
|
||||
<font-awesome-icon :icon="[value.fa, value.icon]" />
|
||||
|
|
@ -78,7 +80,6 @@
|
|||
<hr />
|
||||
|
||||
<BrushPreview />
|
||||
|
||||
</t-card>
|
||||
</vue-draggable-resizable>
|
||||
</div>
|
||||
|
|
@ -87,16 +88,17 @@
|
|||
<script>
|
||||
import Colours from "./Colours.vue";
|
||||
import BrushPreview from "./parts/BrushPreview.vue";
|
||||
import { toolbarIcons } from "../ascii.js";
|
||||
|
||||
export default {
|
||||
created() {
|
||||
this.toolbar.x = this.toolbarState.x
|
||||
this.toolbar.y = this.toolbarState.y
|
||||
this.toolbar.w = this.toolbarState.w
|
||||
this.toolbar.h = this.toolbarState.h
|
||||
this.toolbar.x = this.toolbarState.x;
|
||||
this.toolbar.y = this.toolbarState.y;
|
||||
this.toolbar.w = this.toolbarState.w;
|
||||
this.toolbar.h = this.toolbarState.h;
|
||||
|
||||
this.mirror.x = this.toolbarState.mirrorX
|
||||
this.mirror.y = this.toolbarState.mirrorY
|
||||
this.mirror.x = this.toolbarState.mirrorX;
|
||||
this.mirror.y = this.toolbarState.mirrorY;
|
||||
},
|
||||
name: "Toolbar",
|
||||
components: { Colours, BrushPreview },
|
||||
|
|
@ -111,22 +113,20 @@ export default {
|
|||
mirror: {
|
||||
x: false,
|
||||
y: false,
|
||||
}
|
||||
},
|
||||
}),
|
||||
computed: {
|
||||
toolbarIcons() {
|
||||
return this.$store.getters.toolbarIcons
|
||||
return toolbarIcons;
|
||||
},
|
||||
toolbarState() {
|
||||
return this.$store.getters.toolbarState
|
||||
return this.$store.getters.toolbarState;
|
||||
},
|
||||
currentAscii() {
|
||||
return this.$store.getters.currentAscii;
|
||||
},
|
||||
currentTool() {
|
||||
return this.$store.getters.toolbarIcons[
|
||||
this.$store.getters.currentTool
|
||||
];
|
||||
return toolbarIcons[this.$store.getters.currentTool];
|
||||
},
|
||||
canFg() {
|
||||
return this.$store.getters.isTargettingFg;
|
||||
|
|
@ -150,7 +150,7 @@ export default {
|
|||
watch: {},
|
||||
methods: {
|
||||
updateMirror() {
|
||||
this.$store.commit("updateMirror", this.mirror)
|
||||
this.$store.commit("updateMirror", this.mirror);
|
||||
},
|
||||
onResize(x, y, w, h) {
|
||||
this.toolbar.x = x;
|
||||
|
|
@ -158,13 +158,23 @@ export default {
|
|||
this.toolbar.w = w;
|
||||
this.toolbar.h = h;
|
||||
|
||||
this.$store.commit("changeToolBarState", {x: x, y: y, w: this.toolbar.w, h: this.toolbar.h})
|
||||
this.$store.commit("changeToolBarState", {
|
||||
x: x,
|
||||
y: y,
|
||||
w: this.toolbar.w,
|
||||
h: this.toolbar.h,
|
||||
});
|
||||
},
|
||||
onDragStop(x, y) {
|
||||
this.toolbar.x = x;
|
||||
this.toolbar.y = y;
|
||||
|
||||
this.$store.commit("changeToolBarState", {x: x, y: y, w: this.toolbar.w, h: this.toolbar.h})
|
||||
this.$store.commit("changeToolBarState", {
|
||||
x: x,
|
||||
y: y,
|
||||
w: this.toolbar.w,
|
||||
h: this.toolbar.h,
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
|
|
|
|||
|
|
@ -6,12 +6,7 @@
|
|||
:escToClose="true"
|
||||
>
|
||||
Title
|
||||
<t-input
|
||||
type="text"
|
||||
name="title"
|
||||
v-model="title"
|
||||
max="128"
|
||||
/>
|
||||
<t-input type="text" name="title" v-model="title" max="128" />
|
||||
|
||||
<t-textarea v-model="pasteContent" name="paste-ascii" rows="10" />
|
||||
|
||||
|
|
@ -21,23 +16,27 @@
|
|||
@click="$modal.hide('paste-ascii-modal')"
|
||||
>
|
||||
<t-button type="button"> Cancel </t-button>
|
||||
<t-button type="button" @click="importPasteAscii()" :disabled="checkPasteContent">Import Clipboard</t-button>
|
||||
<t-button
|
||||
type="button"
|
||||
@click="importPasteAscii()"
|
||||
:disabled="checkPasteContent"
|
||||
>Import Clipboard</t-button
|
||||
>
|
||||
</div>
|
||||
</template>
|
||||
</t-modal>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
//
|
||||
import { parseMircAscii } from "../../ascii.js"
|
||||
//
|
||||
import { parseMircAscii } from "../../ascii.js";
|
||||
|
||||
export default {
|
||||
name: "PasteAsciiModal",
|
||||
created() {
|
||||
},
|
||||
created() {},
|
||||
data: () => ({
|
||||
pasteContent: "",
|
||||
title: "clipboard.txt"
|
||||
title: "clipboard.txt",
|
||||
}),
|
||||
computed: {
|
||||
showPasteModal() {
|
||||
|
|
@ -45,13 +44,13 @@ export default {
|
|||
},
|
||||
checkPasteContent() {
|
||||
return !this.pasteContent.length ? true : false;
|
||||
}
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
showPasteModal(val, old) {
|
||||
if (val !== old) {
|
||||
this.pasteModal();
|
||||
}
|
||||
if (val !== old) {
|
||||
this.pasteModal();
|
||||
}
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
|
|
@ -59,12 +58,11 @@ export default {
|
|||
this.$modal.show("paste-ascii-modal");
|
||||
},
|
||||
importPasteAscii() {
|
||||
parseMircAscii(this.pasteContent, this.title);
|
||||
|
||||
parseMircAscii(this.pasteContent, this.title)
|
||||
|
||||
this.$modal.hide("paste-ascii-modal");
|
||||
this.pasteContent = null;
|
||||
this.title = 'clipboard.txt';
|
||||
this.$modal.hide("paste-ascii-modal");
|
||||
this.pasteContent = null;
|
||||
this.title = "clipboard.txt";
|
||||
},
|
||||
},
|
||||
};
|
||||
|
|
|
|||
|
|
@ -62,7 +62,7 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import { emptyBlock } from "./../../ascii.js"
|
||||
import { emptyBlock, mircColours99 } from "./../../ascii.js";
|
||||
|
||||
export default {
|
||||
name: "BrushPreview",
|
||||
|
|
@ -116,7 +116,7 @@ export default {
|
|||
return this.$store.getters.brushSizeType;
|
||||
},
|
||||
mircColours() {
|
||||
return this.$store.getters.mircColours;
|
||||
return mircColours99;
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
|
|
@ -157,8 +157,8 @@ export default {
|
|||
this.delayRedrawCanvas();
|
||||
},
|
||||
drawPreview() {
|
||||
this.ctx.clearRect(0, 0, 10000, 10000)
|
||||
|
||||
this.ctx.clearRect(0, 0, 10000, 10000);
|
||||
|
||||
let brushHeight = this.brushSizeHeightPreview;
|
||||
let brushWidth = this.brushSizeWidthPreview;
|
||||
|
||||
|
|
@ -196,27 +196,27 @@ export default {
|
|||
case "cross":
|
||||
// If we are 1x1 force fill 1 block, to avoid an empty 1x1
|
||||
if (x === 0 && y === 0) {
|
||||
this.blocks[y][x] = { ... block};
|
||||
this.blocks[y][x] = { ...block };
|
||||
continue;
|
||||
}
|
||||
|
||||
if (x === brushWidth) {
|
||||
this.blocks[y][x] = { ... emptyBlock};
|
||||
this.blocks[y][x] = { ...emptyBlock };
|
||||
} else {
|
||||
this.blocks[y][x] = { ... block};
|
||||
this.blocks[y][x] = { ...block };
|
||||
}
|
||||
|
||||
targetX = x;
|
||||
|
||||
if (y % 2 === 0) {
|
||||
targetX = targetX -1;
|
||||
}
|
||||
targetX = targetX - 1;
|
||||
}
|
||||
|
||||
if (this.blocks[y] && this.blocks[y][targetX]) {
|
||||
if (x % 2 === 0) {
|
||||
this.blocks[y][targetX] = { ... emptyBlock};
|
||||
this.blocks[y][targetX] = { ...emptyBlock };
|
||||
} else {
|
||||
this.blocks[y][targetX] = { ... block};
|
||||
this.blocks[y][targetX] = { ...block };
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -224,7 +224,7 @@ export default {
|
|||
|
||||
// default:
|
||||
case "square":
|
||||
this.blocks[y][x] = { ... block};
|
||||
this.blocks[y][x] = { ...block };
|
||||
break;
|
||||
|
||||
case "circle":
|
||||
|
|
@ -233,18 +233,18 @@ export default {
|
|||
yModifier = y;
|
||||
|
||||
if (x <= middleX + yModifier && x >= middleX - yModifier) {
|
||||
this.blocks[y][x] = { ... block};
|
||||
this.blocks[y][x] = { ...block };
|
||||
} else {
|
||||
this.blocks[y][x] = { ... emptyBlock};
|
||||
this.blocks[y][x] = { ...emptyBlock };
|
||||
}
|
||||
} else {
|
||||
// Bottom half
|
||||
yModifier = middleY - (y - middleY);
|
||||
|
||||
if (x <= middleX + yModifier && x >= middleX - yModifier) {
|
||||
this.blocks[y][x] = { ... block};
|
||||
this.blocks[y][x] = { ...block };
|
||||
} else {
|
||||
this.blocks[y][x] = { ... emptyBlock};
|
||||
this.blocks[y][x] = { ...emptyBlock };
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -7,19 +7,26 @@
|
|||
>
|
||||
<t-button
|
||||
type="button"
|
||||
v-for="(char, keyChar) in $store.getters.charCodes"
|
||||
v-for="(char, keyChar) in charCodes"
|
||||
:key="keyChar"
|
||||
class="border-gray-200 p-2 min-h-0"
|
||||
@click="onCharChange(char)"
|
||||
>{{ char }}</t-button>
|
||||
>{{ (char === " ") ? 'space' : char }}</t-button>
|
||||
</vue-draggable-resizable>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { charCodes } from "../../ascii.js"
|
||||
|
||||
export default {
|
||||
name: "CharPicker",
|
||||
async created() {},
|
||||
props: ["canvasX", "canvasY"],
|
||||
computed: {
|
||||
charCodes() {
|
||||
return charCodes;
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
onCharChange(char) {
|
||||
this.$store.commit("changeChar", char);
|
||||
|
|
|
|||
|
|
@ -1,42 +1,39 @@
|
|||
<template>
|
||||
<vue-draggable-resizable
|
||||
style="z-index: 5;"
|
||||
:x="100"
|
||||
:y="100"
|
||||
:w="400"
|
||||
:h="278"
|
||||
>
|
||||
<vue-draggable-resizable
|
||||
style="z-index: 5"
|
||||
:x="100"
|
||||
:y="100"
|
||||
:w="400"
|
||||
:h="278"
|
||||
>
|
||||
<t-card>
|
||||
|
||||
<t-button
|
||||
type="button"
|
||||
class="border-gray-200 p-1"
|
||||
@click="close()"
|
||||
>X</t-button><br>
|
||||
<t-button type="button" class="border-gray-200 p-1" @click="close()"
|
||||
>X</t-button
|
||||
><br />
|
||||
|
||||
<span v-for="(value, keyColours) in mircColours" :key="keyColours">
|
||||
|
||||
<hr v-if="keyColours === 16">
|
||||
|
||||
<t-button
|
||||
type="button"
|
||||
:style="`background-color: ${mircColours[keyColours]} !important;`"
|
||||
class="border-gray-200 p-3"
|
||||
@click="onColourChange(keyColours)"
|
||||
></t-button>
|
||||
<hr v-if="keyColours === 16" />
|
||||
|
||||
<t-button
|
||||
type="button"
|
||||
:style="`background-color: ${mircColours[keyColours]} !important;`"
|
||||
class="border-gray-200 p-3"
|
||||
@click="onColourChange(keyColours)"
|
||||
></t-button>
|
||||
</span>
|
||||
</t-card>
|
||||
</vue-draggable-resizable>
|
||||
|
||||
</vue-draggable-resizable>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mircColours99 } from "./../../ascii.js";
|
||||
|
||||
export default {
|
||||
name: "ColourPicker",
|
||||
created() {},
|
||||
computed: {
|
||||
mircColours() {
|
||||
return this.$store.getters.mircColours;
|
||||
return mircColours99;
|
||||
},
|
||||
toolbarState() {
|
||||
return this.$store.getters.toolbarState;
|
||||
|
|
@ -44,8 +41,8 @@ export default {
|
|||
},
|
||||
methods: {
|
||||
close() {
|
||||
this.$store.commit("changeIsUpdatingFg", false)
|
||||
this.$store.commit("changeIsUpdatingBg", false)
|
||||
this.$store.commit("changeIsUpdatingFg", false);
|
||||
this.$store.commit("changeIsUpdatingBg", false);
|
||||
},
|
||||
onColourChange(colour) {
|
||||
if (this.toolbarState.isChoosingFg) {
|
||||
|
|
|
|||
|
|
@ -1,58 +1,66 @@
|
|||
<template @contextmenu.prevent>
|
||||
<div class="context-menu" v-show="show" :style="style" ref="context" tabindex="0" @blur="close" @contextmenu.prevent>
|
||||
<slot></slot>
|
||||
</div>
|
||||
<div
|
||||
class="context-menu"
|
||||
v-show="show"
|
||||
:style="style"
|
||||
ref="context"
|
||||
tabindex="0"
|
||||
@blur="close"
|
||||
@contextmenu.prevent
|
||||
>
|
||||
<slot></slot>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import Vue from 'vue';
|
||||
import Vue from "vue";
|
||||
|
||||
export default {
|
||||
name: 'ContextMenu',
|
||||
props: {
|
||||
display: Boolean, // prop detect if we should show context menu
|
||||
name: "ContextMenu",
|
||||
props: {
|
||||
display: Boolean, // prop detect if we should show context menu
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
left: 0, // left position
|
||||
top: 0, // top position
|
||||
show: false, // affect display of context menu
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
// get position of context menu
|
||||
style() {
|
||||
return {
|
||||
top: this.top + "px",
|
||||
left: this.left + "px",
|
||||
};
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
left: 0, // left position
|
||||
top: 0, // top position
|
||||
show: false, // affect display of context menu
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
// closes context menu
|
||||
close() {
|
||||
this.show = false;
|
||||
this.left = 0;
|
||||
this.top = 0;
|
||||
},
|
||||
computed: {
|
||||
// get position of context menu
|
||||
style() {
|
||||
return {
|
||||
top: this.top + 'px',
|
||||
left: this.left + 'px',
|
||||
};
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
// closes context menu
|
||||
close() {
|
||||
this.show = false;
|
||||
this.left = 0;
|
||||
this.top = 0;
|
||||
},
|
||||
open(evt) {
|
||||
// updates position of context menu
|
||||
this.left = evt.pageX || evt.clientX;
|
||||
this.top = (evt.pageY || evt.clientY) - window.pageYOffset;
|
||||
// make element focused
|
||||
// @ts-ignore
|
||||
Vue.nextTick(() => this.$el.focus());
|
||||
this.show = true;
|
||||
},
|
||||
open(evt) {
|
||||
// updates position of context menu
|
||||
this.left = evt.pageX || evt.clientX;
|
||||
this.top = (evt.pageY || evt.clientY) - window.pageYOffset;
|
||||
// make element focused
|
||||
// @ts-ignore
|
||||
Vue.nextTick(() => this.$el.focus());
|
||||
this.show = true;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style>
|
||||
.context-menu {
|
||||
position: fixed;
|
||||
background: white;
|
||||
z-index: 999;
|
||||
outline: none;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
|
||||
cursor: pointer;
|
||||
position: fixed;
|
||||
background: white;
|
||||
z-index: 999;
|
||||
outline: none;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,5 +1,7 @@
|
|||
import Vue from 'vue';
|
||||
import Vuex, { Store } from 'vuex';
|
||||
import Vuex, {
|
||||
Store
|
||||
} from 'vuex';
|
||||
import VuexPersistence from 'vuex-persist';
|
||||
import LZString from 'lz-string';
|
||||
|
||||
|
|
@ -14,8 +16,7 @@ export default new Vuex.Store({
|
|||
modalState: {
|
||||
newAscii: false,
|
||||
editAscii: false,
|
||||
pasteModal: false,
|
||||
|
||||
pasteModal: false
|
||||
},
|
||||
// The various options of ASCIIBIRD will eventually
|
||||
// end up in its own modal I guess
|
||||
|
|
@ -24,175 +25,10 @@ export default new Vuex.Store({
|
|||
defaultBg: 1,
|
||||
defaultFg: 0,
|
||||
},
|
||||
|
||||
// 0 => 'white',
|
||||
// 1 => 'black',
|
||||
// 2 => 'navy',
|
||||
// 3 => 'green',
|
||||
// 4 => 'red',
|
||||
// 5 => 'brown',
|
||||
// 6 => 'purple',
|
||||
// 7 => 'olive',
|
||||
// 8 => 'yellow', # dark yellow
|
||||
// 9 => 'lime', # ltgreen
|
||||
// 10 => 'teal',
|
||||
// 11 => 'cyan',
|
||||
// 12 => 'blue', # ltblue,
|
||||
// 13 => 'fuchsia', # pink
|
||||
// 14 => 'grey',
|
||||
// 15 => 'lightgrey',
|
||||
|
||||
mircColours: [
|
||||
'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(71,0,0)',
|
||||
'rgb(71,33,0)',
|
||||
'rgb(71,71,0)',
|
||||
'rgb(50,71,0)',
|
||||
'rgb(0,71,0)',
|
||||
'rgb(0,71,44)',
|
||||
'rgb(0,71,71)',
|
||||
'rgb(0,39,71)',
|
||||
'rgb(0,0,71)',
|
||||
'rgb(46,0,71)',
|
||||
'rgb(71,0,71)',
|
||||
'rgb(71,0,42)',
|
||||
'rgb(116,0,0)',
|
||||
'rgb(116,58,0)',
|
||||
'rgb(116,116,0)',
|
||||
'rgb(81,116,0)',
|
||||
'rgb(0,116,0)',
|
||||
'rgb(0,116,73)',
|
||||
'rgb(0,116,116)',
|
||||
'rgb(0,64,116)',
|
||||
'rgb(0,0,116)',
|
||||
'rgb(75,0,116)',
|
||||
'rgb(116,0,116)',
|
||||
'rgb(116,0,69)',
|
||||
'rgb(181,0,0)',
|
||||
'rgb(181,99,0)',
|
||||
'rgb(181,181,0)',
|
||||
'rgb(125,181,0)',
|
||||
'rgb(0,181,0)',
|
||||
'rgb(0,181,113)',
|
||||
'rgb(0,181,181)',
|
||||
'rgb(0,99,181)',
|
||||
'rgb(0,0,181)',
|
||||
'rgb(117,0,181)',
|
||||
'rgb(181,0,181)',
|
||||
'rgb(181,0,107)',
|
||||
'rgb(255,0,0)',
|
||||
'rgb(255,140,0)',
|
||||
'rgb(255,255,0)',
|
||||
'rgb(178,255,0)',
|
||||
'rgb(0,255,0)',
|
||||
'rgb(0,255,160)',
|
||||
'rgb(0,255,255)',
|
||||
'rgb(0,140,255)',
|
||||
'rgb(0,0,255)',
|
||||
'rgb(165,0,255)',
|
||||
'rgb(255,0,255)',
|
||||
'rgb(255,0,152)',
|
||||
'rgb(255,89,89)',
|
||||
'rgb(255,180,89)',
|
||||
'rgb(255,255,113)',
|
||||
'rgb(207,255,96)',
|
||||
'rgb(111,255,111)',
|
||||
'rgb(101,255,201)',
|
||||
'rgb(109,255,255)',
|
||||
'rgb(89,180,255)',
|
||||
'rgb(89,89,255)',
|
||||
'rgb(196,89,255)',
|
||||
'rgb(255,102,255)',
|
||||
'rgb(255,89,188)',
|
||||
'rgb(255,156,156)',
|
||||
'rgb(255,211,156)',
|
||||
'rgb(255,255,156)',
|
||||
'rgb(226,255,156)',
|
||||
'rgb(156,255,156)',
|
||||
'rgb(156,255,219)',
|
||||
'rgb(156,255,255)',
|
||||
'rgb(156,211,255)',
|
||||
'rgb(156,156,255)',
|
||||
'rgb(220,156,255)',
|
||||
'rgb(255,156,255)',
|
||||
'rgb(255,148,211)',
|
||||
'rgb(0,0,0)',
|
||||
'rgb(19,19,19)',
|
||||
'rgb(40,40,40)',
|
||||
'rgb(54,54,54)',
|
||||
'rgb(77,77,77)',
|
||||
'rgb(101,101,101)',
|
||||
'rgb(129,129,129)',
|
||||
'rgb(159,159,159)',
|
||||
'rgb(188,188,188)',
|
||||
'rgb(226,226,226)',
|
||||
'rgb(255,255,255))'
|
||||
],
|
||||
// White list of chars we want to accept, not at the moment
|
||||
// though, we just use this for random chars on new ascii
|
||||
charCodes: [' ', '!', '"', '#', '$', '%', '&', '\'', '(', ')', '*', '+', ',', '-', '.', '/', '0', '1', '2', '3', '4', '5', '6', '7', '8', '9', ':', ';', '<', '=', '>', '?', '@', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z', '[', '\\', ']', '^', '_', '`', 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z', '{', '|', '}', '~', 'Ç', 'ü', 'é', 'â', 'ä', 'à', 'å', 'ç', 'ê', 'ë', 'è', 'ï', 'î', 'ì', 'Ä', 'Å', 'É', 'æ', 'Æ', 'ô', 'ö', 'ò', 'û', 'ù', 'ÿ', 'Ö', 'Ü', 'ø', '£', 'Ø', '×', 'ƒ', 'á', 'í', 'ó', 'ú', 'ñ', 'Ñ', 'ª', 'º', '¿', '®', '¬', '½', '¼', '¡', '«', '»', '░', '▒', '▓', '│', '┤', 'Á', 'Â', 'À', '©', '╣', '║', '╗', '╝', '¢', '¥', '┐', '└', '┴', '┬', '├', '─', '┼', 'ã', 'Ã', '╚', '╔', '╩', '╦', '╠', '═', '╬', '¤', 'ð', 'Ð', 'Ê', 'Ë', 'È', 'ı', 'Í', 'Î', 'Ï', '┘', '┌', '█', '▄', '¦', 'Ì', '▀', 'Ó', 'ß', 'Ô', 'Ò', 'õ', 'Õ', 'µ', 'þ', 'Þ', 'Ú', 'Û', 'Ù', 'ý', 'Ý', '¯', '´', '≡', '±', '‗', '¾', '¶', '§', '÷', '¸', '°', '¨', '·', '¹', '³', '²'],
|
||||
// Current tab user is viewing
|
||||
tab: 0,
|
||||
// asciibirdMeta holds all of the ASCII information for all the tabs
|
||||
asciibirdMeta: [],
|
||||
toolbarIcons: [{
|
||||
name: 'default',
|
||||
icon: 'mouse-pointer',
|
||||
fa: 'fas',
|
||||
svgPath: 'assets/mouse-pointer-solid.svg',
|
||||
},
|
||||
{
|
||||
name: 'select',
|
||||
icon: 'square',
|
||||
fa: 'far',
|
||||
svgPath: 'assets/square-regular.svg',
|
||||
},
|
||||
{
|
||||
name: 'text',
|
||||
icon: 'font',
|
||||
fa: 'fas',
|
||||
svgPath: 'assets/font-solid.svg',
|
||||
},
|
||||
{
|
||||
name: 'fill',
|
||||
icon: 'fill-drip',
|
||||
fa: 'fas',
|
||||
svgPath: 'assets/fill-drip-solid.svg',
|
||||
},
|
||||
{
|
||||
name: 'brush',
|
||||
icon: 'paint-brush',
|
||||
fa: 'fas',
|
||||
svgPath: 'assets/paint-brush-solid.svg',
|
||||
},
|
||||
{
|
||||
name: 'dropper',
|
||||
icon: 'eye-dropper',
|
||||
fa: 'fas',
|
||||
svgPath: 'assets/eye-dropper-solid.svg',
|
||||
},
|
||||
{
|
||||
name: 'eraser',
|
||||
icon: 'eraser',
|
||||
fa: 'fas',
|
||||
svgPath: 'assets/eraser-solid.svg',
|
||||
},
|
||||
],
|
||||
toolbarState: {
|
||||
currentColourFg: 0,
|
||||
currentColourBg: 1,
|
||||
|
|
@ -205,7 +41,7 @@ export default new Vuex.Store({
|
|||
brushSizeType: 'square',
|
||||
selectedFg: 0,
|
||||
selectedBg: 1,
|
||||
selectedChar: 'A',
|
||||
selectedChar: ' ',
|
||||
isUpdating: false,
|
||||
currentTool: 0,
|
||||
targetingFg: true,
|
||||
|
|
@ -219,10 +55,10 @@ export default new Vuex.Store({
|
|||
w: 8 * 25,
|
||||
},
|
||||
debugPanelState: {
|
||||
x: 8 * 2,
|
||||
y: 13 * 60,
|
||||
h: 13 * 20,
|
||||
w: 8 * 40,
|
||||
x: 936,
|
||||
y: 39,
|
||||
h: 260,
|
||||
w: 320,
|
||||
visible: false,
|
||||
},
|
||||
blockSizeMultiplier: 1,
|
||||
|
|
@ -295,7 +131,7 @@ export default new Vuex.Store({
|
|||
},
|
||||
newAsciibirdMeta(state, payload) {
|
||||
state.asciibirdMeta.push(payload);
|
||||
state.tab = state.asciibirdMeta.length-1
|
||||
state.tab = state.asciibirdMeta.length - 1
|
||||
},
|
||||
updateToolBarState(state, payload) {
|
||||
state.toolbarState = payload;
|
||||
|
|
@ -343,15 +179,15 @@ export default new Vuex.Store({
|
|||
switch (type) {
|
||||
case 'new-ascii':
|
||||
state.modalState.newAscii = !state.modalState.newAscii
|
||||
break;
|
||||
break;
|
||||
|
||||
case 'edit-ascii':
|
||||
state.modalState.editAscii = !state.modalState.editAscii
|
||||
break;
|
||||
break;
|
||||
|
||||
case 'paste-modal':
|
||||
state.modalState.pasteModal = !state.modalState.pasteModal
|
||||
break;
|
||||
break;
|
||||
|
||||
}
|
||||
}
|
||||
|
|
@ -360,7 +196,6 @@ export default new Vuex.Store({
|
|||
state: (state) => state,
|
||||
modalState: (state) => state.modalState,
|
||||
options: (state) => state.options,
|
||||
toolbarIcons: (state) => state.toolbarIcons,
|
||||
toolbarState: (state) => state.toolbarState,
|
||||
debugPanel: (state) => state.debugPanelState,
|
||||
currentTool: (state) => state.toolbarState.currentTool,
|
||||
|
|
@ -371,11 +206,10 @@ export default new Vuex.Store({
|
|||
currentBg: (state) => state.toolbarState.currentColourBg,
|
||||
getChar: (state) => state.toolbarState.selectedChar,
|
||||
currentTab: (state) => state.tab,
|
||||
charCodes: (state) => state.charCodes,
|
||||
mircColours: (state) => state.mircColours,
|
||||
currentAscii: state => state.asciibirdMeta[state.tab] ?? false,
|
||||
currentAsciiBlocks: state => {
|
||||
return JSON.parse(LZString.decompressFromUTF16(state.asciibirdMeta[state.tab].blocks)) || []
|
||||
return JSON.parse(LZString.decompressFromUTF16(state.asciibirdMeta[state.tab]
|
||||
.blocks)) || []
|
||||
},
|
||||
asciibirdMeta: (state) => state.asciibirdMeta,
|
||||
nextTabValue: (state) => state.asciibirdMeta.length,
|
||||
|
|
|
|||
|
|
@ -1,6 +0,0 @@
|
|||
<template>
|
||||
<div class="about">
|
||||
<h1>About ASCIIBIRD</h1>
|
||||
<h2>it is pretty good</h2>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -63,7 +63,7 @@ body {
|
|||
</style>
|
||||
|
||||
<script>
|
||||
import { emptyBlock } from "./../ascii.js";
|
||||
import { emptyBlock, toolbarIcons, mircColours99 } from "./../ascii.js";
|
||||
|
||||
export default {
|
||||
name: "Editor",
|
||||
|
|
@ -161,7 +161,7 @@ export default {
|
|||
return this.$store.getters.currentAsciiBlocks;
|
||||
},
|
||||
currentTool() {
|
||||
return this.$store.getters.toolbarIcons[this.$store.getters.currentTool];
|
||||
return toolbarIcons[this.$store.getters.currentTool];
|
||||
},
|
||||
mircColours() {
|
||||
return this.$store.getters.mircColours;
|
||||
|
|
@ -230,6 +230,9 @@ export default {
|
|||
},
|
||||
haveSelectBlocks() {
|
||||
return this.selectBlocks.length ? true : false;
|
||||
},
|
||||
mircColours() {
|
||||
return mircColours99;
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
|
|
@ -637,7 +640,7 @@ export default {
|
|||
break;
|
||||
|
||||
case "select":
|
||||
this.drawIndicator();
|
||||
// this.drawIndicator();
|
||||
|
||||
if (this.selecting.canSelect) {
|
||||
this.selecting.endX = this.canvasX;
|
||||
|
|
|
|||
Loading…
Reference in New Issue