jewbird
/
asciibird
3
3
Vork 0
Code Kwesties Pull-aanvragen Publicaties Activiteit

better icons, swap color

This commit is contained in:
Hugh Bord 2021-03-27 14:16:15 +10:00
bovenliggende fb63ae3640
commit 848b606b38
5 gewijzigde bestanden met toevoegingen van 144 en 124 verwijderingen
Statistieken weergeven Download Patch-bestand Download Diff-bestand Expand all files Collapse all files

1
src/Dashboard.vue
Bestand weergeven

@ -95,6 +95,7 @@ export default {
this.mircAsciiImport(asciiData, asciiUrl);
window.location.href = "/";
}
},
components: { Toolbar, DebugPanel, Editor },
name: "Dashboard",

55
src/components/Toolbar.vue
Bestand weergeven

@ -2,6 +2,7 @@
<div>
<vue-draggable-resizable
@dragging="onDrag"
:grid="[$store.getters.currentAscii.blockHeight, $store.getters.currentAscii.blockWidth]"
style="z-index: 5; min-height: 500px"
:min-width="200"
:max-width="500"
@ -13,25 +14,25 @@
<div style="height: 100%; min-height: 500px; max-height: 700px">
<t-card header="Tools and Stuff" style="height: 100%">
<label class="flex ml-1">
<t-checkbox name="targetingFg" v-model="toolbarState.targetingFg" />
<t-checkbox name="targetingFg" v-model="toolbarState.targetingFg" :disabled="!watchTargetingBg && !watchTargetingText" />
<span class="text-sm">FG</span>
</label>
<label class="flex ml-1">
<t-checkbox name="targetingBg" v-model="toolbarState.targetingBg" checked />
<t-checkbox name="targetingBg" v-model="toolbarState.targetingBg" :disabled="!watchTargetingFg && !watchTargetingText" checked />
<span class="text-sm">BG</span>
</label>
<label class="flex ml-1">
<t-checkbox name="targetingText" v-model="toolbarState.targetingText" />
<t-checkbox name="targetingText" v-model="toolbarState.targetingText" :disabled="!watchTargetingFg && !watchTargetingBg" />
<span class="text-sm">Text</span>
</label>
<t-card v-if="toolbarState.isChoosingFg || toolbarState.isChoosingBg">
<t-card v-if="toolbarState.isChoosingFg || toolbarState.isChoosingBg" >
<t-button
type="button"
v-for="(value, keyColors) in mircColors"
:key="keyColors"
:style="makeColorButtonClass(value)"
class="border-gray-300 m-1"
class="border-gray-200 p-2"
@click="onColorChange(keyColors)"
></t-button>
</t-card>
@ -43,20 +44,29 @@
:style="
makeColorButtonClass(mircColors[toolbarState.currentColorFg])
"
class="border-gray-300 m-1"
class="border-gray-200 p-1"
id="currentColorFg"
@click="startColorChange(0)"
></t-button>
>FG</t-button>
<t-button
type="button"
:style="
makeColorButtonClass(mircColors[toolbarState.currentColorBg])
"
class="border-gray-300 m-1"
class="border-gray-200 p-1"
id="currentColorBg"
@click="startColorChange(1)"
></t-button>
>BG</t-button>
<t-button
type="button"
class="p-1 bg-white"
id="swapColor"
@click="swapColors()"
>
<font-awesome-icon :icon="['fas', 'sync']" />
</t-button>
<h5>Brushes and Shit</h5>
@ -64,8 +74,7 @@
type="button"
v-for="(value, keyToolbar) in toolbar"
:key="keyToolbar + 50"
:style="makeToolbarButtonClass(value)"
class="border-gray-300 m-1"
class="border-gray-200 max-h-7 max-w-5 w-7"
@click="onToolbarChange(value)"
>
<font-awesome-icon :icon="[value.fa, value.icon]" />
@ -84,7 +93,7 @@ export default {
this.mircColors = this.$store.state.mircColors;
this.charCodes = this.$store.state.charCodes;
this.toolbar = this.$store.state.toolbar;
// this.toolbarState = this.$store.getters.getToolbarState;
this.toolbarState = this.$store.getters.getToolbarState;
this.onToolbarChange("default");
},
name: "Toolbar",
@ -107,7 +116,7 @@ export default {
isUpdating: false,
currentTool: "default",
targetingFg: false,
targetingBg: false,
targetingBg: true,
targetingText: false,
},
}),
@ -127,6 +136,9 @@ export default {
watchTargetingText() {
return this.toolbarState.targetingText
},
// watchToolbarState() {
// return this.$store.getters.getToolbarState
// },
},
watch: {
watchFgChange(val, old) {
@ -135,6 +147,9 @@ export default {
watchBgChange(val, old) {
this.toolbarState.currentColorBg = val;
},
// watchToolbarState(val, old) {
// this.toolbarState = val;
// },
watchTargetingFg(val, old) {
this.$store.commit("changeTargetingFg", val);
this.toolbarState.targetingFg = val
@ -163,10 +178,20 @@ export default {
this.$store.commit("changeTool", item.name);
},
makeColorButtonClass(color) {
return `background-color: ${color} !important;width:25px;height:25px;`;
return `background-color: ${color} !important;`;
},
makeToolbarButtonClass(tool) {
return "background-color: grey !important;width:25px;height:25px;";
return "background-color: grey !important;";
},
swapColors() {
let bg = this.toolbarState.currentColorBg
let fg = this.toolbarState.currentColorFg
this.$store.commit("changeColorFg", bg);
this.$store.commit("changeColorBg", fg);
this.toolbarState.currentColorFg = bg
this.toolbarState.currentColorBg = fg
},
startColorChange(type) {
// this.toolbarState.isChoosingColor = true

4
src/main.js
Bestand weergeven

@ -30,11 +30,11 @@ import store from './store';
// optionally import default styles
import 'vue-draggable-resizable/dist/VueDraggableResizable.css';
import { library } from '@fortawesome/fontawesome-svg-core'
import { faMousePointer, faFont, faFillDrip, faPaintBrush, faEyeDropper, faEraser } from '@fortawesome/free-solid-svg-icons'
import { faMousePointer, faFont, faFillDrip, faPaintBrush, faEyeDropper, faEraser, faSync } from '@fortawesome/free-solid-svg-icons'
import { faSquare } from '@fortawesome/free-regular-svg-icons'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
library.add(faMousePointer, faSquare, faFont, faFillDrip, faPaintBrush, faEyeDropper, faEraser)
library.add(faMousePointer, faSquare, faFont, faFillDrip, faPaintBrush, faEyeDropper, faEraser, faSync)
Vue.config.productionTip = false;

2
src/store/index.js
Bestand weergeven

@ -98,7 +98,7 @@ export default new Vuex.Store({
isUpdating: false,
currentTool: 'default',
targetingFg: false,
targetingBg: false,
targetingBg: true,
targetingText: false,
},
blockSizeMultiplier: 1,

206
src/views/Editor.vue
Bestand weergeven

@ -1,18 +1,11 @@
<template>
<div>
<h1>
{{ currentAsciibirdMeta.title }} ({{ currentAsciibirdMeta.width }} /
{{ currentAsciibirdMeta.height }})
</h1>
<div id="canvas-area" style="position: relative">
<span>{{ x }}, {{ y }}</span>
<div id="canvas-area">
<vue-draggable-resizable
style="z-index: 5; left: 220px"
:grid="[13, 8]"
:w="canvas.width"
:h="canvas.height"
:grid="[currentAsciibirdMeta.blockHeight, currentAsciibirdMeta.blockWidth]"
:w="canvas.width + (currentAsciibirdMeta.blockWidth/2)"
:h="canvas.height + (currentAsciibirdMeta.blockHeight/2)"
:draggable="currentTool === 'default'"
@resizing="onCanvasResize"
@dragging="onCanvasDrag"
@ -66,6 +59,8 @@ export default {
this.currentAsciibirdMeta.height *
this.currentAsciibirdMeta.blockHeight;
this.delayRedrawCanvas();
this.$store.commit("changeTool", "default");
this.currentTool = "default";
}
},
created() {},
@ -76,22 +71,12 @@ export default {
width: 0,
height: 0,
},
data: {
message: "Hello Vue!",
vueCanvas: null,
},
mircColors: null,
ctx: null,
selectionMode: false,
startPosition: {
x: null,
y: null,
},
canvas: {
width: 512,
height: 512,
},
gridCtx: null,
x: 0,
y: 0,
refreshCanvas: 0,
@ -104,7 +89,7 @@ export default {
targetingText: false,
},
canDrawOnMouseDown: false,
canTool: false,
}),
computed: {
canvasStyle() {
@ -138,6 +123,8 @@ export default {
this.currentAsciibirdMeta.height *
this.currentAsciibirdMeta.blockHeight;
this.delayRedrawCanvas();
window.title = this.currentAsciibirdMeta.name
},
watchToolChange(val) {
this.currentTool = val;
@ -218,6 +205,88 @@ export default {
}
this.ctx.stroke();
},
onCanvasResize(left, top, width, height) {
this.canvas.width = width;
this.canvas.height = height;
this.delayRedrawCanvas();
},
onCanvasDrag(left, top) {
// Update left and top in panel
},
// Mouse Up, Down and Move
canvasMouseUp() {
this.delayRedrawCanvas();
switch (this.currentTool) {
case "brush":
this.canTool = false;
break;
case "eraser":
this.canTool = false;
break;
case "fill":
this.canTool = false;
break;
}
},
canvasMouseDown() {
switch (this.currentTool) {
case "default":
break;
case "fill":
// this.canTool = true;
if (
this.currentAsciibirdMeta.blocks[this.y] &&
this.currentAsciibirdMeta.blocks[this.y][this.x]
) {
this.fillTool()
}
break;
case "brush":
this.canTool = true;
break;
case "eraser":
this.canTool = true;
break;
case "dropper":
if (
this.currentAsciibirdMeta.blocks[this.y] &&
this.currentAsciibirdMeta.blocks[this.y][this.x]
) {
let curBlock = this.currentAsciibirdMeta.blocks[this.y][this.x];
if (this.toolbarState.targetingFg) {
this.$store.commit("changeColorFg", curBlock.fg);
}
if (this.toolbarState.targetingBg) {
this.$store.commit("changeColorBg", curBlock.bg);
}
// if (this.toolbarState.targetingText) {
// }
}
this.currentTool = "default";
this.$store.commit("changeTool", this.currentTool);
break;
}
},
canvasMouseMove(e) {
@ -234,7 +303,7 @@ export default {
switch (this.currentTool) {
case "brush":
if (this.canDrawOnMouseDown) {
if (this.canTool) {
if (
this.currentAsciibirdMeta.blocks[this.y] &&
this.currentAsciibirdMeta.blocks[this.y][this.x]
@ -263,7 +332,7 @@ export default {
break;
case "eraser":
if (this.canDrawOnMouseDown) {
if (this.canTool) {
if (
this.currentAsciibirdMeta.blocks[this.y] &&
this.currentAsciibirdMeta.blocks[this.y][this.x]
@ -296,97 +365,22 @@ export default {
setTimeout(() => {
this.redraw = true
this.redrawCanvas();
}, 25);
}, 8);
}
},
// fillTool(block) {
// this.fillTool(block);
// },
canvasMouseDown() {
switch (this.currentTool) {
case "default":
break;
case "fill":
// this.canDrawOnMouseDown = true;
if (
this.currentAsciibirdMeta.blocks[this.y] &&
this.currentAsciibirdMeta.blocks[this.y][this.x]
) {
// First set of colours
}
break;
case "brush":
this.canDrawOnMouseDown = true;
break;
case "eraser":
this.canDrawOnMouseDown = true;
break;
case "dropper":
if (
this.currentAsciibirdMeta.blocks[this.y] &&
this.currentAsciibirdMeta.blocks[this.y][this.x]
) {
let curBlock = this.currentAsciibirdMeta.blocks[this.y][this.x];
if (this.toolbarState.targetingFg) {
this.$store.commit("changeColorFg", curBlock.fg);
}
if (this.toolbarState.targetingBg) {
this.$store.commit("changeColorBg", curBlock.bg);
}
// if (this.toolbarState.targetingText) {
// }
}
this.currentTool = "default";
this.$store.commit("changeTool", this.currentTool);
break;
fillTool() {
let fillStartBlock = this.currentAsciibirdMeta.blocks[this.y][this.x];
if (this.toolbarState.targetingBg) {
let fillSameBg = fillStartBlock.bg
}
console.log(fillStartBlock)
},
onCanvasResize(left, top, width, height) {
this.canvas.width = width;
this.canvas.height = height;
this.delayRedrawCanvas();
},
onCanvasDrag(left, top) {
// console.log(left, top)
},
canvasMouseUp() {
this.delayRedrawCanvas();
switch (this.currentTool) {
case "brush":
this.canDrawOnMouseDown = false;
break;
case "eraser":
this.canDrawOnMouseDown = false;
break;
case "fill":
// this.canDrawOnMouseDown = true;
break;
}
},
},
};
</script>