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

Vue Pixel Art is an easy way to draw your Pixel Arts. This project is refactored from CSS Collection - DotGen
https://github.com/guastallaigor/vue-pixel-art

pixel pixel-art pixel-art-maker pixel-editor vue vue-pixel vuejs2

Last synced: about 1 month ago
JSON representation

Vue Pixel Art is an easy way to draw your Pixel Arts. This project is refactored from CSS Collection - DotGen

• Host: GitHub
• URL: https://github.com/guastallaigor/vue-pixel-art
• Owner: guastallaigor
• License: mit
• Created: 2018-12-09T14:18:58.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2023-01-04T17:36:53.000Z (over 2 years ago)
• Last Synced: 2025-03-01T16:12:14.758Z (about 2 months ago)
• Topics: pixel, pixel-art, pixel-art-maker, pixel-editor, vue, vue-pixel, vuejs2
• Language: Vue
• Homepage: https://vue-pixel-art.now.sh
• Size: 4.77 MB
• Stars: 47
• Watchers: 2
• Forks: 14
• Open Issues: 20
• Metadata Files:
  • Readme: README.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE

Awesome Lists containing this project

README

        


  

  
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



[![js-standard-style](https://img.shields.io/badge/code%20style-standard-brightgreen.svg)](http://standardjs.com/)

[![pattern](https://img.shields.io/badge/pattern-puzzle--pattern-orange.svg)](https://github.com/guastallaigor/puzzle-pattern/)

[![style](https://img.shields.io/badge/style-NES.css-red.svg)](https://nostalgic-css.github.io/NES.css/)

[![Cypress.io tests](https://img.shields.io/badge/cypress.io-tests-green.svg)](https://cypress.io)

## 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

[![contributions welcome](https://img.shields.io/badge/contributions-welcome-brightgreen.svg?style=flat)](https://github.com/dwyl/esta/issues)

This project follow the [Puzzle Pattern](https://github.com/guastallaigor/puzzle-pattern) guidelines and uses [Standard Code Style](https://github.com/standard/standard).

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.

[![ko-fi](https://ko-fi.com/img/githubbutton_sm.svg)](https://ko-fi.com/C1C63QCB8)

## License

MIT © [guastallaigor](https://github.com/guastallaigor/vue-pixel-art/blob/master/LICENSE)