jewbird
/
asciibird
3
3
派生 0
代码 工单 合并请求 版本发布 动态

basic code cleaning, toolbar start

这个提交包含在：
Hugh Bord 2021-02-06 11:22:16 +10:00
父节点 9ba0e0ca00
当前提交 2cb2505cb1
共有 6 个文件被更改，包括 179 次插入 和 113 次删除
显示统计 下载 Patch 文件 下载 Diff 文件 展开所有文件 折叠所有文件

4
README.md
查看文件

@ -4,8 +4,12 @@ ASCIIBIRD DEVELOPMENT - BORING VUEJS DEV STUFF FOR ASCII CREATION
# FOCUS
* REFACTOR STUFF !!!
* Maybe some patlette tool stuff
* Single or double digit color codes in mIRC imports
* maybe we can use some regex
* ASCIIBLASTER has a parser for mIRC codes
* Import / Export code
* ASCII -> JSON

65
src/Dashboard.vue
查看文件

@ -70,10 +70,9 @@
{{ value.title }} ({{ value.width }} / {{ value.height }})
</t-button>
<div class="border-gray-600">
<vue-draggable-resizable
<!-- <vue-draggable-resizable
@dragging="onDrag"
style="left: 70%; top: 10%"
style="left: 70%; top: 10%;z-index: 100;"
:resizable="false"
v-if="asciibirdMeta.length"
>
@ -90,8 +89,11 @@
<h5>Brushes and Shit</h5>
<hr />
</t-card>
</vue-draggable-resizable>
</vue-draggable-resizable> -->
<Toolbar v-if="asciibirdMeta.length" />
<div class="border-gray-600">
<router-view />
</div>
</div>
@ -99,10 +101,14 @@
</template>
<script>
import Toolbar from "./components/Toolbar.vue";
export default {
created() {
this.asciibirdMeta = this.$store.state.asciibirdMeta;
this.mircColors = this.$store.state.mircColors
this.charCodes = this.$store.state.charCodes
this.asciibirdMeta = this.$store.state.asciibirdMeta
},
components: { Toolbar },
name: 'Dashboard',
data: () => ({
forms: {
@ -119,31 +125,9 @@ export default {
text: 'ASCII',
currentTab: 1,
asciibirdMeta: [],
mircColors: [
'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)',
],
charCodes: ['*', '-', '=', '+', '^', '#'],
floating: {
width: 0,
height: 0,
x: 100,
y: 100,
},
mircColors: null,
charCodes: null,
asciiImport: '',
finalAscii: null,
asciiArray: [],
@ -178,7 +162,7 @@ export default {
for (let y = 0; y < this.asciiImport.length; y++) {
const rowX = this.asciiImport[y].split('');
console.log(rowX.length);
// console.log(rowX.length);
if (rowX.length !== 0) {
for (let x = 0; x < rowX.length; x++) {
switch (rowX[x]) {
@ -219,26 +203,15 @@ export default {
}
}
console.log('this.finalAscii', this.finalAscii);
// console.log('this.finalAscii', this.finalAscii);
this.$store.commit('newAsciibirdMeta', this.finalAscii);
}); // End function
this.asciiImportFile = files[0];
},
makeButtonClass(color) {
return `background-color: ${color} !important;width:25px;height:25px;`;
},
onResize(x, y, width, height) {
this.floating.x = x;
this.floating.y = y;
this.floating.width = width;
this.floating.height = height;
},
onDrag(x, y) {
this.floating.x = x;
this.floating.y = y;
},
createClick() {
this.forms.createAscii.title = `New ASCII ${this.asciibirdMeta.length}`;
this.$modal.show('create-ascii-modal');
@ -284,7 +257,7 @@ export default {
}
}
console.log('payload', payload);
// console.log('payload', payload);
this.$store.commit('newAsciibirdMeta', payload);
this.$modal.hide('create-ascii-modal');

90
src/components/Toolbar.vue 普通文件
查看文件

@ -0,0 +1,90 @@
<template>
<div>
<vue-draggable-resizable
@dragging="onDrag"
style="z-index:100;"
:min-width=200
:max-width=500
:min-height=300
:max-height=500
>
<div style="height:100%;">
<t-card header="Tools and Stuff" style="height:100%;">
<t-button
type="button"
v-for="(value, keyColors) in mircColors"
:key="keyColors"
:style="makeColorButtonClass(value)"
class="border-gray-300 m-1"
@click="onColorChange(value)"
></t-button>
<h5>Brushes and Shit</h5>
<t-button
type="button"
v-for="(value, keyToolbar) in toolbar"
:key="keyToolbar"
:style="makeToolbarButtonClass(value)"
class="border-gray-300 m-1"
v-html="value.icon"
@click="onToolbarChange(value)"
></t-button>
</t-card>
</div>
</vue-draggable-resizable>
</div>
</template>
<script>
export default {
created() {
this.mircColors = this.$store.state.mircColors;
this.charCodes = this.$store.state.charCodes;
this.toolbar = this.$store.state.toolbar;
this.toolbarState = this.$store.state.toolbarState;
},
name: "Toolbar",
data: () => ({
mircColors: null,
charCodes: null,
toolbar: null,
toolbarState: {
currentColor: 0,
currentTool : null,
},
floating: {
width: 0,
height: 0,
x: 100,
y: 100,
},
}),
methods: {
onResize(x, y, width, height) {
this.floating.x = x;
this.floating.y = y;
this.floating.width = width;
this.floating.height = height;
},
onDrag(x, y) {
this.floating.x = x;
this.floating.y = y;
},
onToolbarChange(item) {
this.$store.commit('changeTool', item);
},
onColorChange(item) {
this.$store.commit('changeColor', item);
},
makeColorButtonClass(color) {
return `background-color: ${color} !important;width:25px;height:25px;`;
},
makeToolbarButtonClass() {
return `background-color: grey !important;width:25px;height:25px;`;
},
},
};
</script>

1
src/main.js
查看文件

@ -24,6 +24,7 @@ import {
TDialog,
} from 'vue-tailwind/dist/components';
import Dashboard from './Dashboard.vue';
// import Toolbar from './components/Toolbar.vue';
import router from './router';
import store from './store';
// optionally import default styles

59
src/store/index.js
查看文件

@ -9,25 +9,64 @@ const vuexLocal = new VuexPersistence({
export default new Vuex.Store({
state: {
mircColors: [
'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)',
],
// White list of chars we want to accept, not at the moment
// though, we just use this for random chars on new ascii
charCodes: ['*', '-', '=', '+', '^', '#'],
// Current tab user is viewing
tab: 0,
// Object that is a single ASCII block, used to clone and store data for each individual block
defaultBlock: {
x: 0,
y: 0,
bg: '#000000',
fg: '#FFFFFF',
char: '*',
bold: false,
blinking: false,
},
// asciibirdMeta holds all of the ASCII information for all the tabs
asciibirdMeta: [],
toolbar: [
{
name: 'select',
icon: '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 9l4-4 4 4m0 6l-4 4-4-4" /></svg>'
},
{
name: 'text',
icon: '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" /></svg>'
},
{
name: 'fill',
icon: '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" /></svg>'
},
{
name: 'brush',
icon: '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z" /></svg>'
},
],
toolbarState: {
currentColor: 0,
currentTool : null,
}
},
mutations: {
changeTab(state, payload) {
this.state.asciibirdMeta.tab = payload;
},
changeColor(state, payload) {
this.state.asciibirdMeta.toolbarState = payload;
},
changeTool(state, payload) {
this.state.asciibirdMeta.toolbarState = payload;
},
newAsciibirdMeta(state, payload) {
this.state.asciibirdMeta.push(payload);
},

73
src/views/Editor.vue
查看文件

@ -113,7 +113,6 @@ export default {
// if (this.$refs[this.generateCanvasId]) {
// this.ctx = this.$refs.canvas.getContext("2d");
// this.gridCtx = this.$refs.grid.getContext("2d");
// // console.log("current ctx", this.ctx);
// this.drawGrid();
// this.redrawCanvas();
@ -124,16 +123,10 @@ export default {
// },
},
methods: {
// dataFieldClass(event) {
// this.ctx = event.currentTarget.id;
// console.log(this.ctx);
// },
onChangeTab(val) {
// Get the asciimeta index from the route URL
this.currentAsciibirdMeta = this.$store.state.asciibirdMeta[val];
// console.log("val", val);
// I dono some routs bs or some bs needs -1 to make it all work
// Some lame canvas reference bug when changing routes
@ -143,7 +136,6 @@ export default {
if (this.$refs[currentRefCanvas]) {
this.ctx = this.$refs[currentRefCanvas].getContext("2d");
this.gridCtx = this.$refs.grid.getContext("2d");
// console.log("current ctx", this.ctx);
this.canvas.width =
this.currentAsciibirdMeta.width *
@ -156,13 +148,11 @@ export default {
this.redrawCanvas();
} else {
// console.log(
// `Warning: could not find asciibird meta key ${currentRefCanvas}`
// );
}
},
redrawCanvas() {
console.log("Canvas redraw");
// console.log("Canvas redraw");
// Clears the whole canvas
if (this.ctx) {
@ -196,22 +186,22 @@ export default {
}
// if (this.currentAsciibirdMeta.blocks[y][x] !== undefined) {
console.log({
block: this.currentAsciibirdMeta.blocks[y][x],
x: x,
y: y,
theX,
blockY,
blockX,
blockWidth,
blockHeight,
});
// console.log({
// block: this.currentAsciibirdMeta.blocks[y][x],
// x: x,
// y: y,
// theX,
// blockY,
// blockX,
// blockWidth,
// blockHeight,
// });
curBlock = this.currentAsciibirdMeta.blocks[y][x];
blockX = blockWidth * theX;
// Background block
this.ctx.fillStyle = curBlock.bg;
this.ctx.fillStyle = curBlock.fg;
this.ctx.fillRect(blockX, blockY, this.currentAsciibirdMeta.blockWidth, this.currentAsciibirdMeta.blockHeight);
let tempChar = "";
@ -221,7 +211,7 @@ export default {
this.ctx.fillStyle = curBlock.fg;
this.ctx.fillText(tempChar, blockX + 3, blockY -3);
} else {
console.log("Yo char doesn't exist, bro.");
// console.log("Yo char doesn't exist, bro.");
}
// }
@ -238,7 +228,6 @@ export default {
// break;
}
} else {
// console.log(JSON.stringify(this.currentAsciibirdMeta));
}
this.currentAsciibirdMeta.width = finalWidth;
@ -247,47 +236,17 @@ export default {
}
},
processMouseDown(e) {
// console.log("Mouse down");
// this.canvasClass(e)
this.selectionMode = true;
this.startPosition.x = e.clientX;
this.startPosition.y = e.clientY;
},
processMouseMove(e) {
// console.log("Mouse move");
if (this.selectionMode) {
// console.log(this.startPosition);
this.ctx.beginPath();
this.ctx.rect(
this.startPosition.x,
this.startPosition.y,
e.clientX - this.startPosition.x,
e.clientY - this.startPosition.y
);
this.ctx.closePath();
this.ctx.fillRect(0, 0, window.innerWidth, window.innerHeight);
this.ctx.clearRect(0, 0, window.innerWidth, window.innerHeight);
this.ctx.strokeStyle = "#f00";
this.ctx.stroke();
}
},
triangleTest(e) {
// console.log("Mouse triangleTest");
// this.ctx = e.target;
this.ctx.strokeStyle = "red";
this.ctx.beginPath();
this.ctx.moveTo(100, 100);
this.ctx.lineTo(200, 100);
this.ctx.lineTo(200, 150);
this.ctx.closePath();
this.ctx.stroke();
},
processMouseUp(e) {
// console.log("Mouse up");
this.ctx.fillStyle = "#fff";
this.selectionMode = false;
this.startPosition.x = null;
this.startPosition.y = null;
@ -296,8 +255,8 @@ export default {
const width = 5000;
const height = 5000;
const s = 13;
const sW = 8;
const s = 26;
const sW = 16;
const pL = s;
const pT = s;
const pR = s;