jewbird
/
asciibird
3
3
Fork 0
Code Issues Pull Requests Releases Activity

started ascii blocks, improved ascii data structure

This commit is contained in:
Hugh Bord 2020-12-27 12:42:26 +10:00
parent b6cd7b4e7a
commit 1c65c8c180
14 changed files with 232 additions and 236 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
README.md
View File

@ -1,12 +1,11 @@
# ASCIIBIRD
.asb
ASCIIBIRD DEVELOPMENT - BORING VUEJS DEV STUFF FOR ASCII CREATION
# Doneish
* Review vuejs3 stuff and get our initial data structure which will hold our ASCII informations.
* Initial data structure which will hold our ASCII informations.
* Added vue-tailwind.com
# Roadmap

4
package.json
View File

@ -8,8 +8,10 @@
"lint": "vue-cli-service lint"
},
"dependencies": {
"@tailwindcss/forms": "^0.2.1",
"autoprefixer": "^9.8.6",
"core-js": "^3.6.5",
"postcss": "^7.0.35",
"tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.0.2",
"vue": "^2.6.11",
"vue-router": "^3.2.0",
"vue-tailwind": "^2.0.0",

1
public/index.html
View File

@ -5,6 +5,7 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>

140
src/App.vue
View File

@ -1,140 +0,0 @@
<template>
<div id="app">
<t-modal
header="Create new ASCII"
>
<!-- Main Menu -->
<input type="number" name="width" v-model="forms.createAscii.width" />
<input type="number" name="height" v-model="forms.createAscii.height" />
<input type="text" name="title" v-model="forms.createAscii.title" />
<template v-slot:footer>
<div class="flex justify-between">
<t-button type="button">
Cancel
</t-button>
<t-button type="button" @click="createNewASCII()">
Ok
</t-button>
</div>
</template>
</t-modal>
<t-button>Add new ASCII</t-button>
<h1>ASCIIBIRD</h1>
<div id="nav">
<router-link v-for="(value, key) in asciibirdMeta" v-bind:key="key" :to="value.title.replace(/([A-Z])([A-Z])/g, '$1-$2')
.replace(/([a-z])([A-Z])/g, '$1-$2')
.replace(/[\s_]+/g, '-')
.toLowerCase() "> {{ value.title }} |</router-link>
</div>
<router-view/>
</div>
</template>
<script>
export default {
created() {
console.log('Created');
this.asciibirdMeta = this.$store.state.asciibirdMeta;
},
name: 'HelloWorld',
data: () => ({
forms: {
createAscii: {
width: 80,
height: 80,
title: 'ascii',
},
},
status: {
createNew: false,
},
text: 'ASCII',
currentTab: 0,
asciibirdMeta: [],
}),
computed: {
returnAsciiMetaIndex() {
return this.$store.state.asciibirdMeta[this.currentTab];
},
},
methods: {
createClick() {
this.dialog.heading = 'Create new ASCII';
this.status.createNew = this.dialog.visible = true;
},
createNewASCII() {
const payload = {
title: this.forms.createAscii.title,
key: this.asciibirdMeta.length + 1,
ascii: {
blocks: this.create2DArray(this.forms.createAscii.height),
width: this.forms.createAscii.width,
height: this.forms.createAscii.height,
},
};
for (let i = 0; i <= payload.ascii.width - 1; i++) {
for (let j = 0; j <= payload.ascii.height - 1; j++) {
payload.ascii.blocks[i].push({
bg: null,
fg: null,
char: null,
bold: false,
blinking: false,
});
}
}
this.$store.commit('newAsciibirdMeta', payload);
console.log(this.$store.state.asciibirdMeta);
// this.reset();
},
create2DArray(rows) {
const arr = [];
for (let i = 0; i < rows; i++) {
arr[i] = [];
}
return arr;
},
// reset() {
// this.dialog.heading = "";
// this.status.createNew = this.dialog.visible = false;
// },
},
};
</script>
<style lang="scss">
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
}
#nav {
padding: 30px;
a {
font-weight: bold;
color: #2c3e50;
&.router-link-exact-active {
color: #42b983;
}
}
}
</style>

128
src/Dashboard.vue Normal file
View File

@ -0,0 +1,128 @@
<template>
<div id="app">
<t-modal
name="create-ascii-modal"
header="Create new ASCII"
:clickToClose=false
:escToClose=false
@before-closed="closeNewASCII"
>
<!-- Main Menu -->
<t-input type="number" name="width" v-model="forms.createAscii.width" max="3" />
<t-input type="number" name="height" v-model="forms.createAscii.height" max="4" />
<t-input type="text" name="title" v-model="forms.createAscii.title" max="128" />
<template v-slot:footer>
<div class="flex justify-between" @click="$modal.hide('create-ascii-modal')">
<t-button type="button">
Cancel
</t-button>
<t-button type="button" @click="createNewASCII()">
Ok
</t-button>
</div>
</template>
</t-modal>
<h1 class="m-4 p-2">ASCIIBIRD</h1>
<t-button @click="createClick()" class="ml-2">Add new ASCII</t-button>
<t-button v-for="(value, key) in asciibirdMeta" v-bind:key="key" class="ml-2" @click="changeTab(key, value)">
{{ value.title }} ({{ value.width }} / {{ value.height }})
</t-button>
<router-view/>
</div>
</template>
<script>
export default {
created() {
this.asciibirdMeta = this.$store.state.asciibirdMeta;
},
name: 'Dashboard',
data: () => ({
forms: {
createAscii: {
width: 5,
height: 5,
title: 'ascii',
},
},
formsDefault: null,
status: {
createNew: false,
},
text: 'ASCII',
currentTab: 1,
asciibirdMeta: [],
}),
// computed: {
// returnAsciiMetaIndex() {
// return this.$store.state.asciibirdMeta[this.currentTab];
// },
// },
methods: {
createClick() {
this.forms.createAscii.title = 'New ASCII';
this.$modal.show('create-ascii-modal');
},
changeTab(key, value) {
// Update the router title
// if (this.$router.params.ascii !== key) {
this.$router.replace({ name: 'editor', params: { ascii: `/${key}` } });
// }
// Update the tab index in vuex store
this.$store.commit('changeTab', key);
},
createNewASCII() {
const payload = {
title: this.forms.createAscii.title,
key: this.asciibirdMeta.length + 1,
width: this.forms.createAscii.width,
height: this.forms.createAscii.height,
blockWidth: 8,
blockHeight: 13,
blocks: this.create2DArray(this.forms.createAscii.height),
};
// Push all the default ASCII blocks
for (let i = 0; i <= payload.width - 1; i++) {
for (let j = 0; j <= payload.height - 1; j++) {
payload.blocks[i].push({
x: j,
y: i,
bg: '#000000',
fg: '#FFFFFF',
char: '*',
bold: false,
blinking: false,
});
}
}
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';
},
create2DArray(rows) {
const arr = [];
for (let i = 0; i < rows; i++) {
arr[i] = [];
}
return arr;
},
},
};
</script>

5
src/assets/styles/index.css Normal file
View File

@ -0,0 +1,5 @@
/* src/assets/styles/index.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

29
src/components/Block.vue Normal file
View File

@ -0,0 +1,29 @@
<template>
<div :id=blockId :class=blockClass>
{{ this.data.char }}
</div>
</template>
<script>
export default {
name: 'Block',
props: ['data',
'blockWidth',
'blockHeight'],
created() {
console.log(this.data);
},
data: () => ({
}),
computed: {
blockId() {
return `block-${this.data.x}-${this.data.y}`;
},
blockClass() {
return `max-width: ${this.blockWidth}px; min-width: ${this.blockWidth}px; max-height: ${this.blockHeight}px; min-height: ${this.blockHeight}px; color: '${this.data.fg}'; background-color: '${this.data.bg}';`;
},
},
};
</script>

60
src/components/HelloWorld.vue
View File

@ -1,60 +0,0 @@
<template>
<div class="hello">
<h1>{{ msg }}</h1>
<p>
For a guide and recipes on how to configure / customize this project,<br>
check out the
<a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
</p>
<h3>Installed CLI Plugins</h3>
<ul>
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-router" target="_blank" rel="noopener">router</a></li>
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-vuex" target="_blank" rel="noopener">vuex</a></li>
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
</ul>
<h3>Essential Links</h3>
<ul>
<li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
<li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
<li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
<li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
<li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
</ul>
<h3>Ecosystem</h3>
<ul>
<li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
<li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
<li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
<li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
<li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
</ul>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
props: {
msg: String,
},
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
h3 {
margin: 40px 0 0;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>

6
src/main.js
View File

@ -22,11 +22,11 @@ import {
TToggle,
TDialog,
} from 'vue-tailwind/dist/components';
import App from './App.vue';
import Dashboard from './Dashboard.vue';
import router from './router';
import store from './store';
import "tailwind.min.css"
import './assets/styles/index.css';
Vue.config.productionTip = false;
@ -109,5 +109,5 @@ Vue.use(VueTailwind, settings);
new Vue({
router,
store,
render: (h) => h(App),
render: (h) => h(Dashboard),
}).$mount('#app');

2
src/router/index.js
View File

@ -7,7 +7,7 @@ Vue.use(VueRouter);
const routes = [
{
path: '/:ascii',
name: 'Editor',
name: 'editor',
component: Editor,
},
{

22
src/store/index.js
View File

@ -5,27 +5,33 @@ Vue.use(Vuex);
export default new Vuex.Store({
state: {
// Object that is a single ASCII block
// Current tab user is viewing
tab: 1,
// Object that is a single ASCII block, used to clone and store data for each individual block
defaultBlock: {
x: 0,
y: 0,
bg: '#FFFFF',
fg: '#00000',
bg: '#000000',
fg: '#FFFFFF',
char: '*',
bold: false,
blinking: false,
},
// asciibirdMeta holds all of the ASCII information for all the tabs
asciibirdMeta: [{
title: 'New ASCII',
key: 1,
ascii: {
blocks: {},
width: 80,
height: 80,
},
width: 5,
height: 5,
blockWidth: 8,
blockHeight: 13,
blocks: {},
}],
},
mutations: {
changeTab(state, payload) {
this.state.asciibirdMeta.tab = payload;
},
newAsciibirdMeta(state, payload) {
this.state.asciibirdMeta.push(payload);
},

44
src/views/Editor.vue
View File

@ -1,12 +1,50 @@
<template>
<div class="home">
Main ascii page editor things for individual ascii
<div>
<h1>{{ currentAsciibirdMeta.title }} ({{ currentAsciibirdMeta.width }} / {{ currentAsciibirdMeta.height }})</h1>
<pre><small>{{ JSON.stringify(currentAsciibirdMeta) }}</small></pre>
<div id="canvas">
<span v-for="(yValue, y) in currentAsciibirdMeta.blocks" :key="y">
<span v-for="(xValue, x) in currentAsciibirdMeta.blocks" :key="x">
<Block :data="currentAsciibirdMeta.blocks[y][x]" v-if="currentAsciibirdMeta.blocks.length" />
</span>
</span>
</div>
</div>
</template>
<script>
import Block from '../components/Block.vue';
export default {
name: 'Editor',
components: { Block },
created() {
this.currentAsciibirdMeta = this.$store.state.asciibirdMeta[0];
},
data: () => ({
text: 'ASCII',
currentAsciibirdMeta: null,
}),
computed: {
getFullPath() {
return this.$route.path;
},
},
watch: {
getFullPath() {
console.log(this);
this.getData();
},
},
methods: {
getData() {
// Call my lovely API
this.currentAsciibirdMeta = this.$store.state.asciibirdMeta[this.$route.params.ascii.split('/').join('')];
},
},
};
</script>

6
tailwind.config.js
View File

@ -2,8 +2,8 @@ const tailwindcss = require('tailwindcss');
module.exports = {
purge: [
'./public/**/*.html',
'./src/**/*.vue',
'./MySettings.js',
'node_modules/vue-tailwind/dist/*.js',
],
darkMode: false, // or 'media' or 'class'
theme: {
@ -15,4 +15,4 @@ module.exports = {
plugins: [
tailwindcss,
],
}
};

16
yarn.lock
View File

@ -950,13 +950,6 @@
resolved "https://registry.yarnpkg.com/@soda/get-current-script/-/get-current-script-1.0.2.tgz#a53515db25d8038374381b73af20bb4f2e508d87"
integrity sha512-T7VNNlYVM1SgQ+VsMYhnDkcGmWhQdL0bDyGm5TlQ3GBXnJscEClUUOKduWTmm2zCnvNLC1hc3JpuXjs/nFOc5w==
"@tailwindcss/forms@^0.2.1":
version "0.2.1"
resolved "https://registry.yarnpkg.com/@tailwindcss/forms/-/forms-0.2.1.tgz#3244b185854fae1a7cbe8d2456314d8b2d98cf43"
integrity sha512-czfvEdY+J2Ogfd6RUSr/ZSUmDxTujr34M++YLnp2cCPC3oJ4kFvFMaRXA6cEXKw7F1hJuapdjXRjsXIEXGgORg==
dependencies:
mini-svg-data-uri "^1.2.3"
"@types/anymatch@*":
version "1.3.1"
resolved "https://registry.yarnpkg.com/@types/anymatch/-/anymatch-1.3.1.tgz#336badc1beecb9dacc38bea2cf32adf627a8421a"
@ -5985,11 +5978,6 @@ mini-css-extract-plugin@^0.9.0:
schema-utils "^1.0.0"
webpack-sources "^1.1.0"
mini-svg-data-uri@^1.2.3:
version "1.2.3"
resolved "https://registry.yarnpkg.com/mini-svg-data-uri/-/mini-svg-data-uri-1.2.3.tgz#e16baa92ad55ddaa1c2c135759129f41910bc39f"
integrity sha512-zd6KCAyXgmq6FV1mR10oKXYtvmA9vRoB6xPSTUJTbFApCtkefDnYueVR1gkof3KcdLZo1Y8mjF2DFmQMIxsHNQ==
minimalistic-assert@^1.0.0, minimalistic-assert@^1.0.1:
version "1.0.1"
resolved "https://registry.yarnpkg.com/minimalistic-assert/-/minimalistic-assert-1.0.1.tgz#2e194de044626d4a10e7f7fbc00ce73e83e4d5c7"
@ -7234,7 +7222,7 @@ postcss@^6.0.9:
source-map "^0.6.1"
supports-color "^5.4.0"
postcss@^7, postcss@^7.0.0, postcss@^7.0.1, postcss@^7.0.14, postcss@^7.0.18, postcss@^7.0.27, postcss@^7.0.32, postcss@^7.0.5, postcss@^7.0.6:
postcss@^7, postcss@^7.0.0, postcss@^7.0.1, postcss@^7.0.14, postcss@^7.0.18, postcss@^7.0.27, postcss@^7.0.32, postcss@^7.0.35, postcss@^7.0.5, postcss@^7.0.6:
version "7.0.35"
resolved "https://registry.yarnpkg.com/postcss/-/postcss-7.0.35.tgz#d2be00b998f7f211d8a276974079f2e92b970e24"
integrity sha512-3QT8bBJeX/S5zKTTjTCIjRF3If4avAT6kqxcASlTWEtAFCb9NH0OUxNDfgZSWdP5fJnBYCMEWkIFfWeugjzYMg==
@ -8509,7 +8497,7 @@ table@^5.2.3:
slice-ansi "^2.1.0"
string-width "^3.0.0"
"tailwindcss@npm:@tailwindcss/postcss7-compat":
"tailwindcss@npm:@tailwindcss/postcss7-compat", "tailwindcss@npm:@tailwindcss/postcss7-compat@^2.0.2":
version "2.0.2"
resolved "https://registry.yarnpkg.com/@tailwindcss/postcss7-compat/-/postcss7-compat-2.0.2.tgz#49cb21703dfb4447620fceab5cef3285cff8c69d"
integrity sha512-KM8kjG5dd8qoXBX2a6r3r1TOqhFh8NtFBheG9qpVPwSjrD8wRdoM7s+Xz56HEA1XmeN64gEKqjmY6vm55DiS3Q==