2020-12-19 00:14:06 +00:00
|
|
|
# ASCIIBIRD
|
|
|
|
|
|
|
|
|
|
ASCIIBIRD DEVELOPMENT - BORING VUEJS DEV STUFF FOR ASCII CREATION
|
|
|
|
|
|
2021-01-09 01:57:48 +00:00
|
|
|
# FOCUS
|
2021-01-02 01:52:44 +00:00
|
|
|
|
2021-01-23 02:50:32 +00:00
|
|
|
* Single or double digit color codes in mIRC imports
|
|
|
|
|
* maybe we can use some regex
|
|
|
|
|
|
2021-01-16 03:03:14 +00:00
|
|
|
* Import / Export code
|
|
|
|
|
* ASCII -> JSON
|
|
|
|
|
* JSON -> ASCII
|
|
|
|
|
|
2021-01-09 01:57:48 +00:00
|
|
|
* Have multiple canvas elements, they can different z-index for the layers.
|
|
|
|
|
|
|
|
|
|
* Fix up the store, put in code and more shit in there
|
|
|
|
|
* Store colours, tools and any other shit in here
|
2021-01-02 01:52:44 +00:00
|
|
|
|
2021-01-10 03:06:46 +00:00
|
|
|
* I added some grid but it is FUCKED
|
|
|
|
|
|
2021-01-02 01:52:44 +00:00
|
|
|
## HOW TO DRAW BLOCKS
|
|
|
|
|
|
2021-01-09 01:57:48 +00:00
|
|
|
* **Plain vanilla Canvas**
|
|
|
|
|
* Webgl rendering direct to canvas, three.js webgl
|
|
|
|
|
* Render as SVG
|
2021-01-02 01:52:44 +00:00
|
|
|
|
2021-01-09 01:57:48 +00:00
|
|
|
# Things To Do Later
|
2021-01-02 01:52:44 +00:00
|
|
|
|
2021-01-16 03:03:14 +00:00
|
|
|
* Sort out the vuex store shit, make it lighter, integrate the methods from Dashboard to there.
|
|
|
|
|
* Keyboard shortcuts
|
2020-12-19 00:14:06 +00:00
|
|
|
|
2021-01-02 01:52:44 +00:00
|
|
|
* Integrate front end library - DONE
|
2021-01-09 01:57:48 +00:00
|
|
|
* Tie the ascii Meta Data into tabs / interface - DONE
|
|
|
|
|
|
2020-12-19 00:14:06 +00:00
|
|
|
* Take a quick look at ASCIIBLASTER, compare code
|
|
|
|
|
* Render the individual blocks
|
2021-01-09 01:57:48 +00:00
|
|
|
|
2020-12-19 00:14:06 +00:00
|
|
|
* To import ASCIIs we are going to have to write an ASCII/ANSI -> JSON
|
|
|
|
|
* Then we can reverse it JSON -> ANSI to export
|
|
|
|
|
* Technically we could have our own file format and share the ASCII data in JSON, but also extra information in the JSON.
|
|
|
|
|
* .ASB, all this is gzipped JSON of the internal data structure.
|
|
|
|
|
* While exporting the ascii wont obviously support 'extra fields', we can have a name and description for the ASCIIs.
|
|
|
|
|
* To share the ASCII to another person you can export the JSON and they can load it, along with any extra info outside the original ASCII data.
|
|
|
|
|
|
2021-01-16 03:03:14 +00:00
|
|
|
* Properly get CSS into the JS stuff ya lazy bird
|
|
|
|
|
|
2020-12-19 00:14:06 +00:00
|
|
|
# Ideas and stuff
|
|
|
|
|
|
|
|
|
|
In 2018 I had started some ASCII creation program in vuejs but really darkmage'd it and never finished it after a few hours of development time.
|
|
|
|
|
|
|
|
|
|
* Tabbed editing for asciis
|
|
|
|
|
* Layers
|
|
|
|
|
* Update text colours without deleting the block
|
|
|
|
|
* Floating pattlets (or option to fix or non fix them)
|
|
|
|
|
* Undo feature
|
|
|
|
|
* Undo for brush settings and shit changes
|
|
|
|
|
* Insert ASCII as layer
|
|
|
|
|
* Overlay image for nance tracing mode
|
|
|
|
|
* Insert image to convert to ASCII into a layer
|
|
|
|
|
* Support for tdfiglet, toilet, figlet importing
|
|
|
|
|
|
|
|
|
|
* Animated ASCII (key frames like in flash with sound) (Possible with JSON but it will be FKN memory hog maybe)
|
|
|
|
|
* We could do this, but these custom ASCIIs could only be played in our player
|
|
|
|
|
|
|
|
|
|
## How to do it
|
|
|
|
|
|
|
|
|
|
* Two dimensional array of objects,
|
|
|
|
|
* Each object holds the block info
|
|
|
|
|
|
|
|
|
|
If we can import an ASCII -> two dimensional array -> Export
|
|
|
|
|
|
|
|
|
|
* TailwindCSS
|
|
|
|
|
* Allows us to use different themes/skins or maybe layouts
|
|
|
|
|
|
|
|
|
|
## Development Approach
|
|
|
|
|
|
|
|
|
|
* Start basic project with README.md
|
|
|
|
|
* Put in the tailwindCSS shit
|
|
|
|
|
* Data structures for the ASCII, two dimensional array shit
|
|
|
|
|
|
|
|
|
|
# References
|
|
|
|
|
|
|
|
|
|
* https://jp.itch.io/playscii / http://vectorpoem.com/playscii/
|
|
|
|
|
* https://mircart.org/
|
|
|
|
|
* https://asdf.us/asciiblaster/
|
2021-01-02 01:52:44 +00:00
|
|
|
* https://acid.vegas/asciimaker
|
|
|
|
|
* https://stackoverflow.com/questions/60263401/draw-on-canvas-with-vue
|
|
|
|
|
* https://www.digitalocean.com/community/tutorials/vuejs-vue-html5-canvas
|
2021-01-09 01:57:48 +00:00
|
|
|
* https://codereview.stackexchange.com/questions/114702/drawing-a-grid-on-canvas
|
2021-01-10 03:06:46 +00:00
|
|
|
* https://github.com/ircart/resources
|
2021-01-23 02:50:32 +00:00
|
|
|
|
|
|
|
|
|
2021-01-10 03:06:46 +00:00
|
|
|
* https://gist.github.com/xon52/fb895e33d64a8d322da165d158fa11b2 / https://xon5.medium.com/flexible-canvas-grid-without-blurred-lines-907fcadf5bfc - Grid canvas draw stuff
|
2021-01-16 03:03:14 +00:00
|
|
|
* http://wepump.in/ascii/
|
2020-12-19 00:14:06 +00:00
|
|
|
|
2021-01-23 02:50:32 +00:00
|
|
|
|
|
|
|
|
* https://modern.ircdocs.horse/formatting.html#color
|
|
|
|
|
* https://www.mirc.com/colors.html
|
|
|
|
|
|
2020-12-19 00:14:06 +00:00
|
|
|
## Project setup
|
|
|
|
|
```
|
|
|
|
|
yarn
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
### Compiles and hot-reloads for development
|
|
|
|
|
```
|
|
|
|
|
yarn serve
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
### Compiles and minifies for production
|
|
|
|
|
```
|
|
|
|
|
yarn build
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
### Lints and fixes files
|
|
|
|
|
```
|
|
|
|
|
yarn lint
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
### Customize configuration
|
|
|
|
|
See [Configuration Reference](https://cli.vuejs.org/config/).
|
