Vue Pixel Art is an easy way to draw your Pixel Arts

Vue Pixel Art

Vue Pixel Art is an easy way to draw your Pixel Arts and get the CSS code generated from it.

This project is refactored from CSS Collection - DotGen

Credits: @bc_rikko

Instructions

• Click on a square to paint. If it is already painted, that square will be transparent again.
• Hold mouse down and drag your mouse everywhere in the grid to paint.
• The button “Paint/Erase activated” only works when you use mouse down and drag.
• Size can’t be greater than 100.

Usage

Recommended resolution: >= 925 x 768.

Go to https://vue-pixel-art.now.sh and have fun!

Development

This project follow the Puzzle Pattern guidelines and uses Standard Code Style.

Fork the project and enter this commands in your terminal:

git clone https://github.com/YOUR_GITHUB_USERNAME/vue-pixel-art.git
cd vue-pixel-art
npm install
npm run serve

The default port is 8080.

TODO

• [ ] Add Unit tests with Jest.
• [ ] Add Redo/Undo.
• [x] Add E2E tests with Cypress.
• [x] Add mouse drag and paint.
• [x] Add Vuejs pixel logo on README and favicon.ico.
• [x] Deploy.

Download Details:

Author: guastallaigor

Live Demo: https://vue-pixel-art.now.sh/

GitHub: https://github.com/guastallaigor/vue-pixel-art

#vuejs #javascript #vue #vue-js