improved ui, 99 color fix, more refactor, aspect ratio fix
This commit is contained in:
parent
c61144acf1
commit
014ad5602b
|
|
@ -78,6 +78,8 @@
|
|||
* Support for tdfiglet, toilet, figlet importing
|
||||
# References
|
||||
|
||||
* http://anti.teamidiot.de/static/nei/*/extended_mirc_color_proposal.html - Good for 99 colours info
|
||||
|
||||
* https://jp.itch.io/playscii / http://vectorpoem.com/playscii/
|
||||
* https://mircart.org/
|
||||
* https://asdf.us/asciiblaster/
|
||||
|
|
@ -89,6 +91,7 @@
|
|||
|
||||
* https://gist.github.com/xon52/fb895e33d64a8d322da165d158fa11b2 / https://xon5.medium.com/flexible-canvas-grid-without-blurred-lines-907fcadf5bfc - Grid canvas draw stuff
|
||||
* http://wepump.in/ascii/
|
||||
* https://irc.watch/ascii/
|
||||
|
||||
* https://modern.ircdocs.horse/formatting.html#color
|
||||
* https://www.mirc.com/colors.html
|
||||
|
|
|
|||
183
src/ascii.js
183
src/ascii.js
|
|
@ -34,88 +34,90 @@ export const mircColours99 = [
|
|||
'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)',
|
||||
|
||||
"#470000",
|
||||
"#472100",
|
||||
"#474700",
|
||||
"#324700",
|
||||
"#004700",
|
||||
"#00472c",
|
||||
"#004747",
|
||||
"#002747",
|
||||
"#000047",
|
||||
"#2e0047",
|
||||
"#470047",
|
||||
"#47002a",
|
||||
"#740000",
|
||||
"#743a00",
|
||||
"#747400",
|
||||
"#517400",
|
||||
"#007400",
|
||||
"#007449",
|
||||
"#007474",
|
||||
"#004074",
|
||||
"#000074",
|
||||
"#4b0074",
|
||||
"#740074",
|
||||
"#740045",
|
||||
"#b50000",
|
||||
"#b56300",
|
||||
"#b5b500",
|
||||
"#7db500",
|
||||
"#00b500",
|
||||
"#00b571",
|
||||
"#00b5b5",
|
||||
"#0063b5",
|
||||
"#0000b5",
|
||||
"#7500b5",
|
||||
"#b500b5",
|
||||
"#b5006b",
|
||||
"#ff0000",
|
||||
"#ff8c00",
|
||||
"#ffff00",
|
||||
"#b2ff00",
|
||||
"#00ff00",
|
||||
"#00ffa0",
|
||||
"#00ffff",
|
||||
"#008cff",
|
||||
"#0000ff",
|
||||
"#a500ff",
|
||||
"#ff00ff",
|
||||
"#ff0098",
|
||||
"#ff5959",
|
||||
"#ffb459",
|
||||
"#ffff71",
|
||||
"#cfff60",
|
||||
"#6fff6f",
|
||||
"#65ffc9",
|
||||
"#6dffff",
|
||||
"#59b4ff",
|
||||
"#5959ff",
|
||||
"#c459ff",
|
||||
"#ff66ff",
|
||||
"#ff59bc",
|
||||
"#ff9c9c",
|
||||
"#ffd39c",
|
||||
"#ffff9c",
|
||||
"#e2ff9c",
|
||||
"#9cff9c",
|
||||
"#9cffdb",
|
||||
"#9cffff",
|
||||
"#9cd3ff",
|
||||
"#9c9cff",
|
||||
"#dc9cff",
|
||||
"#ff9cff",
|
||||
"#ff94d3",
|
||||
"#000000",
|
||||
"#131313",
|
||||
"#282828",
|
||||
"#363636",
|
||||
"#4d4d4d",
|
||||
"#656565",
|
||||
"#818181",
|
||||
"#9f9f9f",
|
||||
"#bcbcbc",
|
||||
"#e2e2e2",
|
||||
"#ffffff",
|
||||
];
|
||||
|
||||
export const emptyBlock = {
|
||||
|
|
@ -134,6 +136,11 @@ export const create2DArray = (rows) => {
|
|||
return arr;
|
||||
};
|
||||
|
||||
// Width and height of the ASCII blocks
|
||||
// they seem to be 8x15 in asciiblaster
|
||||
export const blockWidth = 8;
|
||||
export const blockHeight = 15;
|
||||
|
||||
export const parseMircAscii = (content, title) => {
|
||||
const MIRC_MAX_COLOURS = mircColours99.length;
|
||||
|
||||
|
|
@ -161,13 +168,13 @@ export const parseMircAscii = (content, title) => {
|
|||
height: asciiImport.split('\n').length,
|
||||
title: filename,
|
||||
key: store.getters.nextTabValue,
|
||||
blockWidth: 8 * store.getters.blockSizeMultiplier,
|
||||
blockHeight: 13 * store.getters.blockSizeMultiplier,
|
||||
blockWidth: blockWidth * store.getters.blockSizeMultiplier,
|
||||
blockHeight: blockHeight * store.getters.blockSizeMultiplier,
|
||||
blocks: create2DArray(asciiImport.split('\n').length),
|
||||
history: [],
|
||||
redo: [],
|
||||
x: 8 * 35, // the dragable ascii canvas x
|
||||
y: 13 * 2, // the dragable ascii canvas y
|
||||
x: blockWidth * 35, // the dragable ascii canvas x
|
||||
y: blockHeight * 2, // the dragable ascii canvas y
|
||||
};
|
||||
|
||||
// Turn the entire ascii string into an array
|
||||
|
|
@ -356,8 +363,8 @@ export const createNewAscii = (forms) => {
|
|||
key: store.getters.asciibirdMeta.length,
|
||||
width: forms.createAscii.width,
|
||||
height: forms.createAscii.height,
|
||||
blockWidth: 8 * store.getters.blockSizeMultiplier,
|
||||
blockHeight: 13 * store.getters.blockSizeMultiplier,
|
||||
blockWidth: blockWidth * store.getters.blockSizeMultiplier,
|
||||
blockHeight: blockHeight * store.getters.blockSizeMultiplier,
|
||||
history: [],
|
||||
redo: [],
|
||||
x: 247, // the dragable ascii canvas x
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
<t-button
|
||||
type="button"
|
||||
:style="`background-color: ${mircColours[currentFg]} !important;`"
|
||||
class="border-gray-200 p-3 w-14 h-14 text-2xl"
|
||||
class="border-gray-200 w-12 h-12 text-2xl"
|
||||
id="currentColourFg"
|
||||
@click="$store.commit('changeIsUpdatingFg', true)"
|
||||
>
|
||||
|
|
@ -13,7 +13,7 @@
|
|||
<t-button
|
||||
type="button"
|
||||
:style="`background-color: ${mircColours[currentBg]} !important;`"
|
||||
class="border-gray-200 p-3 w-14 h-14 text-2xl"
|
||||
class="border-gray-200 w-12 h-12 text-2xl ml-2"
|
||||
id="currentColourBg"
|
||||
@click="$store.commit('changeIsUpdatingBg', true)"
|
||||
>
|
||||
|
|
@ -22,18 +22,18 @@
|
|||
|
||||
<t-button
|
||||
type="button"
|
||||
class="bg-white absolute rounded-full"
|
||||
style="margin-left: -67px; margin-top: 15px"
|
||||
class="bg-white absolute rounded-3xl"
|
||||
style="margin-left: -62px; margin-top: 12px"
|
||||
id="swapColour"
|
||||
@click="swapColours()"
|
||||
>
|
||||
<font-awesome-icon :icon="['fas', 'sync']" size="lg"/>
|
||||
<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-3 w-14 h-14 text-2xl"
|
||||
class="border-gray-200 w-12 h-12 text-2xl ml-2"
|
||||
id="currentChar"
|
||||
@click="$store.commit('changeIsUpdatingChar', true)"
|
||||
>
|
||||
|
|
|
|||
|
|
@ -3,10 +3,10 @@
|
|||
<vue-draggable-resizable
|
||||
@dragstop="onDragStop"
|
||||
:grid="[currentAscii.blockWidth, currentAscii.blockHeight]"
|
||||
:min-width="8 * 40"
|
||||
:max-width="8 * 40"
|
||||
:min-height="13 * 20"
|
||||
:max-height="13 * 20"
|
||||
:min-width="blockWidth * 40"
|
||||
:max-width="blockWidth * 40"
|
||||
:min-height="blockHeight * 20"
|
||||
:max-height="blockHeight * 20"
|
||||
style="z-index: 5;"
|
||||
:w="debugPanelState.w"
|
||||
:h="debugPanelState.h"
|
||||
|
|
@ -57,7 +57,7 @@
|
|||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { toolbarIcons, mircColours99 } from '../ascii';
|
||||
import { toolbarIcons, mircColours99, blockWidth, blockHeight } from '../ascii';
|
||||
|
||||
export default {
|
||||
created() {
|
||||
|
|
@ -79,6 +79,12 @@ export default {
|
|||
throttle: true,
|
||||
}),
|
||||
computed: {
|
||||
blockWidth() {
|
||||
return blockWidth;
|
||||
},
|
||||
blockHeight() {
|
||||
return blockHeight;
|
||||
},
|
||||
getToolName() {
|
||||
return toolbarIcons[this.$store.getters.currentTool] ? toolbarIcons[this.$store.getters.currentTool].name : 'none';
|
||||
},
|
||||
|
|
|
|||
|
|
@ -4,19 +4,17 @@
|
|||
@dragstop="onDragStop"
|
||||
:grid="[currentAscii.blockWidth, currentAscii.blockHeight]"
|
||||
style="z-index: 5"
|
||||
:min-width="8 * 25"
|
||||
:max-width="8 * 30"
|
||||
:max-height="13 * 39"
|
||||
:min-height="13 * 38"
|
||||
:min-width="blockWidth * 25"
|
||||
:max-width="blockWidth * 30"
|
||||
:max-height="blockHeight * 39"
|
||||
:min-height="blockHeight * 38"
|
||||
:w="toolbarState.w"
|
||||
:h="toolbarState.h"
|
||||
:x="toolbarState.x"
|
||||
:y="toolbarState.y"
|
||||
>
|
||||
<t-card style="height: 100%">
|
||||
<Colours />
|
||||
|
||||
|
||||
<t-card class="h-full">
|
||||
<Colours />
|
||||
|
||||
<div class="flex">
|
||||
<label class="ml-1 w-1/3">
|
||||
|
|
@ -49,7 +47,7 @@
|
|||
</div>
|
||||
|
||||
<hr class="m-3" />
|
||||
|
||||
|
||||
<t-button
|
||||
type="button"
|
||||
v-for="(value, keyToolbar) in toolbarIcons"
|
||||
|
|
@ -61,12 +59,11 @@
|
|||
}`"
|
||||
@click="$store.commit('changeTool', keyToolbar)"
|
||||
>
|
||||
<font-awesome-icon :icon="[value.fa, value.icon]" />
|
||||
<font-awesome-icon :icon="[value.fa, value.icon]" size="lg" />
|
||||
</t-button>
|
||||
|
||||
<hr class="m-3" />
|
||||
|
||||
|
||||
<div class="flex">
|
||||
<label class="ml-1 w-1/2">
|
||||
<t-checkbox
|
||||
|
|
@ -86,9 +83,7 @@
|
|||
</label>
|
||||
</div>
|
||||
|
||||
<hr class="m-2" />
|
||||
|
||||
|
||||
<hr class="m-2" />
|
||||
|
||||
<BrushPreview />
|
||||
</t-card>
|
||||
|
|
@ -99,7 +94,7 @@
|
|||
<script>
|
||||
import Colours from "./Colours.vue";
|
||||
import BrushPreview from "./parts/BrushPreview.vue";
|
||||
import { toolbarIcons } from "../ascii";
|
||||
import { toolbarIcons, blockWidth, blockHeight } from "../ascii";
|
||||
|
||||
export default {
|
||||
created() {
|
||||
|
|
@ -130,6 +125,12 @@ export default {
|
|||
toolbarIcons() {
|
||||
return toolbarIcons;
|
||||
},
|
||||
blockWidth() {
|
||||
return blockWidth;
|
||||
},
|
||||
blockHeight() {
|
||||
return blockHeight;
|
||||
},
|
||||
toolbarState() {
|
||||
return this.$store.getters.toolbarState;
|
||||
},
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@ import Vue from 'vue';
|
|||
import Vuex from 'vuex';
|
||||
import VuexPersistence from 'vuex-persist';
|
||||
import LZString from 'lz-string';
|
||||
import { blockWidth, blockHeight } from "../ascii";
|
||||
|
||||
Vue.use(Vuex);
|
||||
const vuexLocal = new VuexPersistence({
|
||||
|
|
@ -47,10 +48,10 @@ export default new Vuex.Store({
|
|||
targetingChar: true,
|
||||
mirrorX: false,
|
||||
mirrorY: false,
|
||||
x: 8 * 2,
|
||||
y: 13 * 2,
|
||||
h: 13 * 39,
|
||||
w: 8 * 25,
|
||||
x: blockWidth * 2,
|
||||
y: blockHeight * 2,
|
||||
h: blockHeight * 39,
|
||||
w: blockWidth * 25,
|
||||
},
|
||||
debugPanelState: {
|
||||
x: 936,
|
||||
|
|
|
|||
|
|
@ -502,9 +502,9 @@ export default {
|
|||
break;
|
||||
|
||||
case 'fill':
|
||||
this.canTool = false;
|
||||
// this.canTool = false;
|
||||
|
||||
this.$store.commit('updateAsciiBlocks', this.currentAsciiBlocks);
|
||||
// this.$store.commit('updateAsciiBlocks', this.currentAsciiBlocks);
|
||||
break;
|
||||
|
||||
case 'select':
|
||||
|
|
@ -546,6 +546,8 @@ export default {
|
|||
|
||||
case 'fill':
|
||||
this.fill();
|
||||
this.canTool = false;
|
||||
this.$store.commit('updateAsciiBlocks', this.currentAsciiBlocks);
|
||||
break;
|
||||
|
||||
case 'brush':
|
||||
|
|
|
|||
Loading…
Reference in New Issue