├── .gitignore
├── README.md
├── gallery.js
├── index.html
├── main.js
├── screenshots
    └── 1.png
├── style.css
└── util.js


/.gitignore:
--------------------------------------------------------------------------------
  1 | # Logs
  2 | logs
  3 | *.log
  4 | npm-debug.log*
  5 | yarn-debug.log*
  6 | yarn-error.log*
  7 | lerna-debug.log*
  8 | 
  9 | # Diagnostic reports (https://nodejs.org/api/report.html)
 10 | report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
 11 | 
 12 | # Runtime data
 13 | pids
 14 | *.pid
 15 | *.seed
 16 | *.pid.lock
 17 | 
 18 | # Directory for instrumented libs generated by jscoverage/JSCover
 19 | lib-cov
 20 | 
 21 | # Coverage directory used by tools like istanbul
 22 | coverage
 23 | *.lcov
 24 | 
 25 | # nyc test coverage
 26 | .nyc_output
 27 | 
 28 | # Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
 29 | .grunt
 30 | 
 31 | # Bower dependency directory (https://bower.io/)
 32 | bower_components
 33 | 
 34 | # node-waf configuration
 35 | .lock-wscript
 36 | 
 37 | # Compiled binary addons (https://nodejs.org/api/addons.html)
 38 | build/Release
 39 | 
 40 | # Dependency directories
 41 | node_modules/
 42 | jspm_packages/
 43 | 
 44 | # Snowpack dependency directory (https://snowpack.dev/)
 45 | web_modules/
 46 | 
 47 | # TypeScript cache
 48 | *.tsbuildinfo
 49 | 
 50 | # Optional npm cache directory
 51 | .npm
 52 | 
 53 | # Optional eslint cache
 54 | .eslintcache
 55 | 
 56 | # Microbundle cache
 57 | .rpt2_cache/
 58 | .rts2_cache_cjs/
 59 | .rts2_cache_es/
 60 | .rts2_cache_umd/
 61 | 
 62 | # Optional REPL history
 63 | .node_repl_history
 64 | 
 65 | # Output of 'npm pack'
 66 | *.tgz
 67 | 
 68 | # Yarn Integrity file
 69 | .yarn-integrity
 70 | 
 71 | # dotenv environment variables file
 72 | .env
 73 | .env.test
 74 | 
 75 | # parcel-bundler cache (https://parceljs.org/)
 76 | .cache
 77 | .parcel-cache
 78 | 
 79 | # Next.js build output
 80 | .next
 81 | out
 82 | 
 83 | # Nuxt.js build / generate output
 84 | .nuxt
 85 | dist
 86 | 
 87 | # Gatsby files
 88 | .cache/
 89 | # Comment in the public line in if your project uses Gatsby and not Next.js
 90 | # https://nextjs.org/blog/next-9-1#public-directory-support
 91 | # public
 92 | 
 93 | # vuepress build output
 94 | .vuepress/dist
 95 | 
 96 | # Serverless directories
 97 | .serverless/
 98 | 
 99 | # FuseBox cache
100 | .fusebox/
101 | 
102 | # DynamoDB Local files
103 | .dynamodb/
104 | 
105 | # TernJS port file
106 | .tern-port
107 | 
108 | # Stores VSCode versions used for testing VSCode extensions
109 | .vscode-test
110 | 
111 | # yarn v2
112 | .yarn/cache
113 | .yarn/unplugged
114 | .yarn/build-state.yml
115 | .yarn/install-state.gz
116 | .pnp.*
117 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | <p align="center">
 2 |   <h1 align="center">Pixel Art 🎨</h1>
 3 | 
 4 |   <p align="center">
 5 |     A simple 25x25 grid pixel art canvas made with HTML5 canvas.
 6 |     <br />
 7 |     <a href="https://captainayan.github.io/pixelart/">View Demo</a>
 8 |     ·
 9 |     <a href="https://github.com/captainAyan/pixelart/issues">Report Bug 😓</a>
10 |   </p>
11 | </p>
12 | 
13 | [![Screenshot](https://captainayan.github.io/pixelart/screenshots/1.png)](https://captainayan.github.io/pixelart/)
14 | 
15 | ## About
16 | Pixel Art is a simple 25x25 grid based pixel art style editor. Although it is 
17 | currently a 25x25 grid, the mechanism underneath is extensive and capable of 
18 | displaying grids bigger than 25x25. 🎨 I'm not using any external libraries or 
19 | bundler, so this project is easy for beginners 🚀.
20 | 
21 | ## Getting Started
22 | Just clone the repo and open the html file 😉👍. If you're having any trouble 
23 | in understanding any part of the codebase, please feel free to message me 😊.
24 | 
25 | _If this repo gets enough traction then I'll create the github wiki pages_
26 | 
27 | 🙏🥺 Consider starring this project.
28 | 
29 | 👉👈 Also consider contribution, I could use some help.
30 | 
31 | ## Contribution
32 | Just send me a pull request. Mention your discord or instagram id.
33 | 
34 | In case you want to add your own art to the `gallery.js`, follow these steps:
35 | - Draw in the canvas
36 | - type `grid.export()` in the console
37 | - copy the result (which is a stringified array)
38 | - paste it in the `gallery.js` file (use the previous entries as a reference)
39 | - go to the `index.html` file
40 | - add `<a href="#" onclick="grid.import([art name used in gallery.js]); return false;">[Display name]</a> &nbsp;` 
41 | inside `gallery-options` class div.
42 | 
43 | (if the instructions were unclear, please let me know)
44 | 
45 | 
46 | ## Contact
47 | Send me a message on discord or instagram. Check out my [Profile Readme](https://github.com/captainAyan)


--------------------------------------------------------------------------------
/gallery.js:
--------------------------------------------------------------------------------
 1 | var mario =   ["#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ff0000","#ff9900","#ff9900","#ff9900","#ffffff","#ffffff","#784000","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#784000","#784000","#ffffff","#ffffff","#ffffff","#ff0000","#ff0000","#ff9900","#ff9900","#ff9900","#ffffff","#784000","#784000","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ff0000","#784000","#ff9900","#ff9900","#784000","#ffffff","#ff0000","#ff0000","#ff0000","#ff0000","#ff9900","#0000ff","#0000ff","#784000","#784000","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ff0000","#ff0000","#784000","#784000","#784000","#ff9900","#ff9900","#ff0000","#ff0000","#ff0000","#0000ff","#0000ff","#0000ff","#0000ff","#784000","#784000","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ff0000","#ff0000","#784000","#ff9900","#784000","#ff9900","#ff9900","#0000ff","#0000ff","#0000ff","#ff9900","#0000ff","#0000ff","#0000ff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ff0000","#ff0000","#ff9900","#ff9900","#ff9900","#ff9900","#ff9900","#ff0000","#ff0000","#0000ff","#0000ff","#0000ff","#0000ff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ff0000","#ff0000","#ff9900","#ff9900","#ff9900","#ff9900","#ff9900","#ff0000","#ff0000","#0000ff","#0000ff","#0000ff","#0000ff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ff0000","#ff0000","#000000","#000000","#ff9900","#000000","#ff9900","#0000ff","#0000ff","#0000ff","#ff9900","#0000ff","#0000ff","#0000ff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ff0000","#ff9900","#ff9900","#000000","#000000","#ff9900","#ff0000","#ff0000","#ff0000","#0000ff","#0000ff","#0000ff","#0000ff","#784000","#784000","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ff0000","#ffffff","#ff9900","#ff9900","#000000","#ffffff","#ff0000","#ff0000","#ff0000","#ff0000","#ff9900","#0000ff","#0000ff","#784000","#784000","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ff0000","#ffffff","#ff9900","#ff9900","#000000","#ffffff","#ffffff","#ff0000","#ff0000","#ff9900","#ff9900","#ff9900","#ffffff","#784000","#784000","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ff9900","#ffffff","#ffffff","#ffffff","#ffffff","#ff0000","#ff9900","#ff9900","#ff9900","#ffffff","#ffffff","#784000","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff"];
 2 | var stitch =  ["#ffffff","#ffaec9","#ffaec9","#ffaec9","#ffaec9","#ffffff","#ffaec9","#ffaec9","#ffaec9","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#37B6F6","#ffaec9","#ffaec9","#ffaec9","#ffaec9","#ffaec9","#ffaec9","#ffaec9","#ffaec9","#000000","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#000000","#37B6F6","#37B6F6","#ffaec9","#ffaec9","#ffaec9","#ffaec9","#ffaec9","#ffaec9","#ffaec9","#ffaec9","#000000","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#000000","#000000","#37B6F6","#37B6F6","#ffaec9","#ffaec9","#ffaec9","#ffaec9","#000000","#000000","#000000","#000000","#000000","#000000","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#000000","#000000","#37B6F6","#37B6F6","#37B6F6","#000000","#9fdaea","#9fdaea","#9fdaea","#9fdaea","#00a2e8","#00a2e8","#00a2e8","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#000000","#9fdaea","#000000","#000000","#000000","#000000","#9fdaea","#00a2e8","#00a2e8","#00a2e8","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#000000","#9fdaea","#000000","#000000","#000000","#000000","#ffffff","#000000","#9fdaea","#00a2e8","#9fdaea","#ffffff","#ffffff","#ffffff","#000000","#000000","#000000","#000000","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#000000","#00a2e8","#00a2e8","#9fdaea","#000000","#ffffff","#000000","#000000","#000000","#9fdaea","#00a2e8","#9fdaea","#ffffff","#ffffff","#000000","#00a2e8","#000000","#000000","#00a2e8","#000000","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#000000","#00a2e8","#00a2e8","#00a2e8","#9fdaea","#000000","#000000","#000000","#9fdaea","#00a2e8","#00a2e8","#9fdaea","#ffffff","#000000","#000000","#00a2e8","#000000","#000000","#00a2e8","#000000","#ffffff","#ffffff","#ffffff","#ffffff","#000000","#00a2e8","#00a2e8","#00a2e8","#00a2e8","#00a2e8","#9fdaea","#9fdaea","#9fdaea","#00a2e8","#00a2e8","#00a2e8","#9fdaea","#000000","#37B6F6","#000000","#00a2e8","#00a2e8","#00a2e8","#00a2e8","#000000","#ffffff","#ffffff","#ffffff","#ffffff","#000000","#00a2e8","#00a2e8","#00a2e8","#00a2e8","#00a2e8","#00a2e8","#00a2e8","#00a2e8","#000000","#00a2e8","#00a2e8","#9fdaea","#37B6F6","#37B6F6","#37B6F6","#000000","#000000","#000000","#000000","#ffffff","#ffffff","#ffffff","#ffffff","#000000","#00a2e8","#00a2e8","#00a2e8","#00a2e8","#00a2e8","#00a2e8","#00a2e8","#00a2e8","#000000","#000000","#000000","#00a2e8","#9fdaea","#9fdaea","#000000","#000000","#000000","#9fdaea","#9fdaea","#000000","#ffffff","#ffffff","#ffffff","#000000","#00a2e8","#000000","#00a2e8","#00a2e8","#00a2e8","#00a2e8","#00a2e8","#00a2e8","#00a2e8","#000000","#000000","#000000","#00a2e8","#9fdaea","#9fdaea","#9fdaea","#9fdaea","#9fdaea","#9fdaea","#9fdaea","#000000","#ffffff","#ffffff","#ffffff","#ffffff","#000000","#00a2e8","#00a2e8","#00a2e8","#00a2e8","#00a2e8","#00a2e8","#00a2e8","#00a2e8","#000000","#000000","#000000","#00a2e8","#9fdaea","#9fdaea","#000000","#000000","#000000","#9fdaea","#9fdaea","#000000","#ffffff","#ffffff","#ffffff","#000000","#00a2e8","#000000","#00a2e8","#00a2e8","#00a2e8","#00a2e8","#00a2e8","#00a2e8","#00a2e8","#00a2e8","#000000","#00a2e8","#00a2e8","#9fdaea","#37B6F6","#37B6F6","#37B6F6","#000000","#000000","#000000","#000000","#ffffff","#ffffff","#ffffff","#000000","#000000","#000000","#00a2e8","#00a2e8","#00a2e8","#00a2e8","#00a2e8","#9fdaea","#9fdaea","#9fdaea","#00a2e8","#00a2e8","#00a2e8","#9fdaea","#000000","#37B6F6","#000000","#00a2e8","#00a2e8","#00a2e8","#00a2e8","#000000","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#000000","#00a2e8","#00a2e8","#00a2e8","#9fdaea","#000000","#000000","#000000","#9fdaea","#00a2e8","#00a2e8","#9fdaea","#ffffff","#000000","#000000","#00a2e8","#000000","#000000","#00a2e8","#000000","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#000000","#00a2e8","#00a2e8","#9fdaea","#000000","#ffffff","#000000","#000000","#000000","#9fdaea","#00a2e8","#9fdaea","#ffffff","#ffffff","#000000","#00a2e8","#000000","#000000","#00a2e8","#000000","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#000000","#9fdaea","#000000","#000000","#000000","#000000","#ffffff","#000000","#9fdaea","#00a2e8","#9fdaea","#ffffff","#ffffff","#ffffff","#000000","#000000","#000000","#000000","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#000000","#9fdaea","#000000","#000000","#000000","#000000","#9fdaea","#00a2e8","#00a2e8","#00a2e8","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#000000","#000000","#37B6F6","#37B6F6","#37B6F6","#000000","#9fdaea","#9fdaea","#9fdaea","#9fdaea","#00a2e8","#00a2e8","#00a2e8","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#000000","#000000","#37B6F6","#37B6F6","#ffaec9","#ffaec9","#ffaec9","#ffaec9","#000000","#000000","#000000","#000000","#000000","#000000","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#000000","#37B6F6","#37B6F6","#ffaec9","#ffaec9","#ffaec9","#ffaec9","#ffaec9","#ffaec9","#ffaec9","#ffaec9","#000000","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#37B6F6","#ffaec9","#ffaec9","#ffaec9","#ffaec9","#ffaec9","#ffaec9","#ffaec9","#ffaec9","#000000","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffaec9","#ffaec9","#ffaec9","#ffaec9","#ffffff","#ffaec9","#ffaec9","#ffaec9","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff"];
 3 | var monkas =  ["#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#54aa54","#54aa54","#54aa54","#54aa54","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#54aa54","#54aa54","#54aa54","#6cd96c","#6cd96c","#6cd96c","#54aa54","#54aa54","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#54aa54","#6cd96c","#6cd96c","#6cd96c","#6cd96c","#6cd96c","#6cd96c","#6cd96c","#6cd96c","#54aa54","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#54aa54","#54aa54","#54aa54","#54aa54","#6cd96c","#6cd96c","#6cd96c","#6cd96c","#6cd96c","#6cd96c","#6cd96c","#54aa54","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#54aa54","#54aa54","#6cd96c","#6cd96c","#6cd96c","#6cd96c","#6cd96c","#6cd96c","#6cd96c","#6cd96c","#6cd96c","#6cd96c","#6cd96c","#6cd96c","#54aa54","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#54aa54","#6cd96c","#6cd96c","#6cd96c","#6cd96c","#6cd96c","#6cd96c","#6cd96c","#6cd96c","#6cd96c","#6cd96c","#6cd96c","#6cd96c","#6cd96c","#6cd96c","#54aa54","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#54aa54","#6cd96c","#6cd96c","#6cd96c","#6cd96c","#6cd96c","#6cd96c","#6cd96c","#6cd96c","#6cd96c","#6cd96c","#6cd96c","#6cd96c","#6cd96c","#6cd96c","#6cd96c","#6cd96c","#54aa54","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#54aa54","#6cd96c","#6cd96c","#54aa54","#6cd96c","#54aa54","#54aa54","#6cd96c","#6cd96c","#6cd96c","#6cd96c","#6cd96c","#6cd96c","#bb3311","#bb3311","#6cd96c","#6cd96c","#6cd96c","#54aa54","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#54aa54","#6cd96c","#54aa54","#6cd96c","#54aa54","#54aa54","#ffffff","#54aa54","#6cd96c","#6cd96c","#6cd96c","#6cd96c","#bb3311","#ff6666","#bb3311","#6cd96c","#6cd96c","#6cd96c","#54aa54","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#54aa54","#6cd96c","#54aa54","#6cd96c","#54aa54","#ffffff","#555555","#54aa54","#54aa54","#6cd96c","#6cd96c","#6cd96c","#bb3311","#ff6666","#bb3311","#6cd96c","#6cd96c","#6cd96c","#54aa54","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#54aa54","#6cd96c","#54aa54","#6cd96c","#54aa54","#555555","#555555","#54aa54","#54aa54","#6cd96c","#54aa54","#bb3311","#ff6666","#bb3311","#bb3311","#6cd96c","#6cd96c","#6cd96c","#54aa54","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#54aa54","#6cd96c","#54aa54","#6cd96c","#54aa54","#555555","#555555","#54aa54","#54aa54","#6cd96c","#54aa54","#bb3311","#ff6666","#bb3311","#6cd96c","#6cd96c","#6cd96c","#6cd96c","#54aa54","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#54aa54","#6cd96c","#54aa54","#6cd96c","#54aa54","#ffffff","#ffffff","#54aa54","#6cd96c","#54aa54","#6cd96c","#bb3311","#ff6666","#bb3311","#6cd96c","#6cd96c","#6cd96c","#6cd96c","#54aa54","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#54aa54","#54aa54","#6cd96c","#54aa54","#54aa54","#54aa54","#6cd96c","#6cd96c","#6cd96c","#6cd96c","#bb3311","#ff6666","#bb3311","#6cd96c","#6cd96c","#6cd96c","#6cd96c","#54aa54","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#54aa54","#6cd96c","#6cd96c","#54aa54","#6cd96c","#54aa54","#ffffff","#54aa54","#6cd96c","#54aa54","#6cd96c","#bb3311","#ff6666","#bb3311","#6cd96c","#6cd96c","#6cd96c","#54aa54","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#54aa54","#6cd96c","#54aa54","#6cd96c","#54aa54","#ffffff","#555555","#54aa54","#54aa54","#6cd96c","#54aa54","#bb3311","#ff6666","#bb3311","#6cd96c","#6cd96c","#6cd96c","#54aa54","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#54aa54","#54aa54","#6cd96c","#54aa54","#555555","#555555","#54aa54","#54aa54","#6cd96c","#54aa54","#bb3311","#ff6666","#bb3311","#6cd96c","#6cd96c","#54aa54","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#54aa54","#6cd96c","#54aa54","#555555","#555555","#54aa54","#54aa54","#6cd96c","#6cd96c","#bb3311","#ff6666","#bb3311","#6cd96c","#54aa54","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#54aa54","#54aa54","#ffffff","#ffffff","#54aa54","#ffffff","#54aa54","#54aa54","#bb3311","#bb3311","#bb3311","#54aa54","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#54aa54","#54aa54","#54aa54","#ffffff","#ffffff","#ffffff","#ffffff","#bb3311","#ffffff","#bb3311","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff"];
 4 | var cat =     ["#000000","#000000","#000000","#000000","#000000","#000000","#000000","#000000","#000000","#000000","#000000","#000000","#000000","#000000","#000000","#000000","#000000","#000000","#000000","#000000","#000000","#000000","#000000","#000000","#000000","#000000","#000000","#000000","#000000","#000000","#000000","#000000","#000000","#000000","#000000","#000000","#000000","#000000","#000000","#000000","#000000","#000000","#000000","#000000","#000000","#000000","#000000","#000000","#000000","#000000","#a646ff","#000000","#000000","#000000","#a646ff","#a646ff","#a646ff","#c37cff","#c37cff","#ddb0ff","#000000","#000000","#ddb0ff","#ddb0ff","#ddb0ff","#ddb0ff","#ddb0ff","#c37cff","#ffffff","#000000","#000000","#000000","#000000","#000000","#000000","#a646ff","#000000","#000000","#a646ff","#a646ff","#ffffff","#c37cff","#ddb0ff","#ddb0ff","#000000","#000000","#ffffff","#ffffff","#ffffff","#ffffff","#ddb0ff","#ddb0ff","#ddb0ff","#ddb0ff","#c37cff","#c37cff","#000000","#000000","#000000","#000000","#a646ff","#000000","#a646ff","#a646ff","#a646ff","#c37cff","#ddb0ff","#000000","#000000","#000000","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ddb0ff","#ddb0ff","#c37cff","#000000","#000000","#000000","#a646ff","#000000","#000000","#a646ff","#c37cff","#c37cff","#ddb0ff","#000000","#ffffff","#000000","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ddb0ff","#000000","#000000","#000000","#a646ff","#000000","#000000","#a646ff","#c37cff","#ddb0ff","#ffffff","#ffffff","#ffffff","#ffffff","#000000","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#000000","#000000","#000000","#a646ff","#000000","#a646ff","#ffffff","#c37cff","#ddb0ff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#000000","#000000","#000000","#000000","#a646ff","#000000","#a646ff","#c37cff","#ddb0ff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#000000","#000000","#ffffff","#000000","#000000","#c37cff","#a646ff","#000000","#c37cff","#ddb0ff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#000000","#000000","#000000","#ffffff","#ffffff","#000000","#000000","#c37cff","#a646ff","#a646ff","#c37cff","#ddb0ff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#000000","#ffffff","#ffffff","#000000","#000000","#c37cff","#a646ff","#a646ff","#c37cff","#ddb0ff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#000000","#000000","#c37cff","#a646ff","#a646ff","#c37cff","#ddb0ff","#ffffff","#ffffff","#000000","#000000","#000000","#000000","#000000","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#000000","#000000","#000000","#ddb0ff","#ffffff","#a646ff","#c37cff","#ddb0ff","#ffffff","#ffffff","#ffffff","#000000","#000000","#000000","#000000","#000000","#ffffff","#ffffff","#000000","#000000","#000000","#000000","#000000","#000000","#000000","#000000","#000000","#000000","#ddb0ff","#a646ff","#a646ff","#c37cff","#ddb0ff","#ffffff","#ffffff","#ffffff","#ffffff","#000000","#000000","#000000","#000000","#ffffff","#000000","#000000","#000000","#000000","#000000","#000000","#000000","#000000","#000000","#000000","#000000","#ddb0ff","#a646ff","#a646ff","#c37cff","#ddb0ff","#ffffff","#ffffff","#ffffff","#ffffff","#000000","#000000","#000000","#000000","#000000","#000000","#000000","#000000","#000000","#000000","#000000","#000000","#000000","#000000","#000000","#000000","#ddb0ff","#a646ff","#a646ff","#c37cff","#c37cff","#ddb0ff","#ffffff","#ffffff","#ffffff","#000000","#000000","#000000","#000000","#ffffff","#000000","#000000","#000000","#000000","#000000","#000000","#000000","#000000","#000000","#000000","#000000","#ddb0ff","#a646ff","#a646ff","#a646ff","#c37cff","#ddb0ff","#ffffff","#ffffff","#000000","#000000","#000000","#000000","#000000","#ffffff","#ffffff","#000000","#000000","#000000","#000000","#000000","#000000","#000000","#000000","#000000","#000000","#ddb0ff","#a646ff","#a646ff","#ffffff","#c37cff","#ddb0ff","#ddb0ff","#000000","#000000","#000000","#000000","#000000","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#000000","#000000","#000000","#000000","#000000","#000000","#c37cff","#a646ff","#a646ff","#a646ff","#c37cff","#c37cff","#ddb0ff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#000000","#000000","#000000","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#000000","#000000","#000000","#000000","#000000","#c37cff","#a646ff","#a646ff","#a646ff","#a646ff","#c37cff","#ddb0ff","#ddb0ff","#ddb0ff","#ffffff","#ffffff","#000000","#ffffff","#ffffff","#ffffff","#000000","#ffffff","#ffffff","#ffffff","#ffffff","#ddb0ff","#000000","#c37cff","#000000","#000000","#c37cff","#a646ff","#a646ff","#a646ff","#a646ff","#a646ff","#c37cff","#c37cff","#ddb0ff","#ddb0ff","#ffffff","#000000","#ffffff","#ffffff","#ffffff","#ffffff","#000000","#ddb0ff","#ddb0ff","#ddb0ff","#000000","#c37cff","#a646ff","#000000","#000000","#c37cff","#a646ff","#a646ff","#a646ff","#a646ff","#a646ff","#a646ff","#a646ff","#c37cff","#c37cff","#a646ff","#000000","#ddb0ff","#ddb0ff","#ddb0ff","#ddb0ff","#ddb0ff","#000000","#000000","#000000","#c37cff","#a646ff","#000000","#000000","#c37cff","#a646ff","#a646ff","#a646ff","#ffffff","#a646ff","#a646ff","#a646ff","#a646ff","#ffffff","#a646ff","#c37cff","#c37cff","#000000","#000000","#c37cff","#c37cff","#c37cff","#c37cff","#c37cff","#c37cff","#a646ff","#000000","#000000","#a646ff","#000000","#a646ff","#a646ff","#a646ff","#a646ff","#a646ff","#a646ff","#a646ff","#a646ff","#a646ff","#a646ff","#a646ff","#a646ff","#a646ff","#a646ff","#a646ff","#a646ff","#ffffff","#a646ff","#a646ff","#a646ff","#000000","#a646ff","#a646ff","#a646ff","#a646ff","#000000"];
 5 | var pikachu = ["#ffffff","#ffffff","#ffffff","#ffffff","#3c2c1c","#3c2c1c","#3c2c1c","#3c2c1c","#3c2c1c","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#3c2c1c","#3c2c1c","#3c2c1c","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#3c2c1c","#3c2c1c","#fede11","#fede11","#3c2c1c","#3c2c1c","#3c2c1c","#3c2c1c","#ffffff","#ffffff","#3c2c1c","#3c2c1c","#3c2c1c","#3c2c1c","#fede11","#fede11","#fede11","#3c2c1c","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#3c2c1c","#3c2c1c","#3c2c1c","#fede11","#fede11","#fede11","#fede11","#fede11","#fede11","#3c2c1c","#3c2c1c","#fede11","#fede11","#fede11","#fede11","#fede11","#fe4646","#fe4646","#fede11","#3c2c1c","#ffffff","#ffffff","#ffffff","#3c2c1c","#3c2c1c","#3c2c1c","#3c2c1c","#3c2c1c","#fede11","#fede11","#fede11","#fede11","#fede11","#3c2c1c","#fede11","#fede11","#fede11","#fede11","#fede11","#fede11","#fe4646","#fe4646","#fe4646","#fe4646","#fede11","#3c2c1c","#ffffff","#ffffff","#3c2c1c","#3c2c1c","#3c2c1c","#3c2c1c","#3c2c1c","#fede11","#fede11","#fede11","#fede11","#fede11","#fede11","#fede11","#fede11","#fede11","#3c2c1c","#3c2c1c","#fede11","#fe4646","#fe4646","#fe4646","#fe4646","#fede11","#3c2c1c","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#3c2c1c","#3c2c1c","#3c2c1c","#3c2c1c","#fede11","#fede11","#fede11","#fede11","#fede11","#3c2c1c","#ffffff","#3c2c1c","#3c2c1c","#fede11","#fe4646","#fe4646","#fede11","#fede11","#fede11","#3c2c1c","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#3c2c1c","#fede11","#fede11","#fede11","#fede11","#fede11","#3c2c1c","#3c2c1c","#3c2c1c","#3c2c1c","#fede11","#fede11","#fede11","#fede11","#fede11","#fede11","#3c2c1c","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#3c2c1c","#fede11","#fede11","#fede11","#fede11","#fede11","#fede11","#fede11","#3c2c1c","#3c2c1c","#fede11","#fede11","#fede11","#fede11","#fede11","#fede11","#fede11","#3c2c1c","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#3c2c1c","#fede11","#fede11","#fede11","#fede11","#fede11","#fede11","#fede11","#fede11","#fede11","#fede11","#fede11","#3c2c1c","#fede11","#fede11","#fede11","#fede11","#fede11","#3c2c1c","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#3c2c1c","#fede11","#fede11","#fede11","#fede11","#fede11","#fede11","#fede11","#fede11","#fede11","#fede11","#fede11","#fede11","#3c2c1c","#3c2c1c","#3c2c1c","#fede11","#fede11","#3c2c1c","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#3c2c1c","#fede11","#fede11","#fede11","#fede11","#fede11","#fede11","#fede11","#fede11","#fede11","#3c2c1c","#fede11","#3c2c1c","#fe4646","#fe4646","#fe4646","#3c2c1c","#fede11","#3c2c1c","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#3c2c1c","#fede11","#fede11","#fede11","#fede11","#fede11","#fede11","#fede11","#fede11","#fede11","#3c2c1c","#fede11","#3c2c1c","#fe4646","#fe4646","#fe4646","#3c2c1c","#fede11","#3c2c1c","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#3c2c1c","#fede11","#fede11","#fede11","#fede11","#fede11","#fede11","#fede11","#fede11","#fede11","#fede11","#fede11","#fede11","#3c2c1c","#3c2c1c","#3c2c1c","#fede11","#fede11","#3c2c1c","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#3c2c1c","#fede11","#fede11","#fede11","#fede11","#fede11","#fede11","#fede11","#fede11","#fede11","#fede11","#3c2c1c","#fede11","#fede11","#fede11","#fede11","#fede11","#3c2c1c","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#3c2c1c","#fede11","#fede11","#fede11","#fede11","#fede11","#fede11","#3c2c1c","#3c2c1c","#fede11","#fede11","#fede11","#fede11","#fede11","#fede11","#fede11","#3c2c1c","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#3c2c1c","#fede11","#fede11","#fede11","#fede11","#fede11","#fede11","#3c2c1c","#ffffff","#3c2c1c","#3c2c1c","#fede11","#fede11","#fede11","#fede11","#fede11","#fede11","#3c2c1c","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#3c2c1c","#fede11","#fede11","#fede11","#fede11","#fede11","#fede11","#3c2c1c","#3c2c1c","#3c2c1c","#3c2c1c","#fede11","#fe4646","#fe4646","#fede11","#fede11","#fede11","#3c2c1c","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#3c2c1c","#fede11","#fede11","#fede11","#fede11","#fede11","#fede11","#fede11","#fede11","#3c2c1c","#3c2c1c","#fede11","#fe4646","#fe4646","#fe4646","#fe4646","#fede11","#3c2c1c","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#3c2c1c","#fede11","#fede11","#fede11","#fede11","#fede11","#3c2c1c","#fede11","#fede11","#fede11","#fede11","#fede11","#fede11","#fe4646","#fe4646","#fe4646","#fe4646","#fede11","#3c2c1c","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#3c2c1c","#fede11","#fede11","#fede11","#fede11","#fede11","#fede11","#3c2c1c","#3c2c1c","#fede11","#fede11","#fede11","#fede11","#fede11","#fe4646","#fe4646","#fede11","#3c2c1c","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#3c2c1c","#fede11","#fede11","#fede11","#fede11","#fede11","#fede11","#3c2c1c","#ffffff","#ffffff","#3c2c1c","#3c2c1c","#3c2c1c","#3c2c1c","#fede11","#fede11","#fede11","#3c2c1c","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#3c2c1c","#fede11","#fede11","#fede11","#fede11","#fede11","#fede11","#3c2c1c","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#3c2c1c","#3c2c1c","#3c2c1c","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#3c2c1c","#3c2c1c","#3c2c1c","#3c2c1c","#3c2c1c","#3c2c1c","#3c2c1c","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#3c2c1c","#3c2c1c","#3c2c1c","#3c2c1c","#3c2c1c","#3c2c1c","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#3c2c1c","#3c2c1c","#3c2c1c","#3c2c1c","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff"];
 6 | var conan =   ["#ffffff","#ffffff","#ffffff","#ffffff","#020100","#020100","#020100","#020100","#020100","#020100","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#020100","#b35802","#b35802","#b35802","#b35802","#b35802","#b35802","#020100","#020100","#020100","#020100","#020100","#020100","#ffffff","#ffffff","#020100","#020100","#020100","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#020100","#b35802","#cc6601","#cc6601","#cc6601","#cc6601","#b35802","#fe9b66","#fe9b66","#fe9b66","#fe9b66","#fe9b66","#020100","#ffffff","#020100","#333333","#333333","#ff976b","#020100","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#020100","#b35802","#b35802","#cc6601","#cc6601","#cc6601","#b35802","#ffac7f","#ffac7f","#ffac7f","#ffac7f","#ffac7f","#fe9b66","#fe9b66","#020100","#333333","#020100","#020100","#020100","#020100","#020100","#020100","#020100","#ffffff","#ffffff","#020100","#b35802","#cc6601","#cc6601","#b35802","#b35802","#b35802","#ffac7f","#ffac7f","#020100","#ffac7f","#ffac7f","#ffac7f","#fe9b66","#020100","#333333","#333333","#333333","#333333","#333333","#656565","#333333","#020100","#ffffff","#ffffff","#020100","#b35802","#cc6601","#cc6601","#b35802","#ffac7f","#ffac7f","#ffac7f","#ffac7f","#ffac7f","#ffac7f","#ffac7f","#ffac7f","#fe9b66","#020100","#2e81cf","#2e81cf","#333333","#333333","#333333","#656565","#333333","#020100","#ffffff","#ffffff","#020100","#b35802","#cc6601","#cc6601","#b35802","#ffac7f","#ffac7f","#ffac7f","#ffac7f","#ffac7f","#ffac7f","#ffffff","#ffac7f","#fe9b66","#020100","#1c4c7c","#1c4c7c","#1c4c7c","#333333","#656565","#656565","#020100","#ffffff","#ffffff","#ffffff","#020100","#b35802","#cc6601","#cc6601","#b35802","#ffac7f","#ffac7f","#ffac7f","#ffac7f","#ffac7f","#ffac7f","#ffffff","#ffac7f","#fe9b66","#020100","#2e81cf","#2e81cf","#333333","#333333","#333333","#656565","#020100","#ffffff","#ffffff","#ffffff","#ffffff","#020100","#b35802","#b35802","#b35802","#ffac7f","#ffac7f","#ffac7f","#ffac7f","#020100","#ffac7f","#ffffff","#ffac7f","#ffac7f","#020100","#333333","#333333","#333333","#333333","#333333","#656565","#333333","#020100","#ffffff","#ffffff","#ffffff","#ffffff","#020100","#693100","#b35802","#b35802","#ffac7f","#ffac7f","#ffac7f","#ffac7f","#ffac7f","#ffac7f","#ffac7f","#ffac7f","#020100","#333333","#333333","#333333","#333333","#333333","#656565","#333333","#020100","#ffffff","#ffffff","#ffffff","#ffffff","#020100","#b35802","#cc6601","#cc6601","#b35802","#b35802","#ffac7f","#ffac7f","#ffac7f","#ffac7f","#ffac7f","#ffac7f","#020100","#333333","#020100","#020100","#020100","#020100","#020100","#020100","#020100","#ffffff","#ffffff","#ffffff","#ffffff","#020100","#b35802","#cc6601","#cc6601","#cc6601","#cc6601","#b35802","#b35802","#ffac7f","#ffac7f","#ffac7f","#020100","#ffffff","#020100","#333333","#333333","#ff976b","#020100","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#020100","#b35802","#b35802","#b35802","#b35802","#020100","#020100","#ffac7f","#ffac7f","#020100","#020100","#020100","#ffffff","#ffffff","#020100","#020100","#020100","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#020100","#020100","#020100","#020100","#ffffff","#ffffff","#020100","#020100","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff"];
 7 | var doraemon= ["#c3c3c3","#c3c3c3","#c3c3c3","#c3c3c3","#c3c3c3","#c3c3c3","#c3c3c3","#c3c3c3","#c3c3c3","#c3c3c3","#c3c3c3","#c3c3c3","#c3c3c3","#c3c3c3","#c3c3c3","#c3c3c3","#c3c3c3","#c3c3c3","#c3c3c3","#c3c3c3","#c3c3c3","#c3c3c3","#c3c3c3","#c3c3c3","#c3c3c3","#c3c3c3","#c3c3c3","#c3c3c3","#c3c3c3","#c3c3c3","#c3c3c3","#c3c3c3","#c3c3c3","#c3c3c3","#c3c3c3","#c3c3c3","#c3c3c3","#c3c3c3","#c3c3c3","#c3c3c3","#c3c3c3","#c3c3c3","#c3c3c3","#c3c3c3","#c3c3c3","#c3c3c3","#c3c3c3","#c3c3c3","#c3c3c3","#c3c3c3","#c3c3c3","#c3c3c3","#c3c3c3","#00a2e8","#00a2e8","#00a2e8","#00a2e8","#00a2e8","#00a2e8","#00a2e8","#00a2e8","#c3c3c3","#c3c3c3","#c3c3c3","#c3c3c3","#ffffff","#ffffff","#c3c3c3","#c3c3c3","#c3c3c3","#c3c3c3","#c3c3c3","#c3c3c3","#c3c3c3","#c3c3c3","#c3c3c3","#c3c3c3","#00a2e8","#00a2e8","#00a2e8","#00a2e8","#00a2e8","#00a2e8","#00a2e8","#00a2e8","#00a2e8","#00a2e8","#c3c3c3","#c3c3c3","#c3c3c3","#ffffff","#ffffff","#c3c3c3","#c3c3c3","#c3c3c3","#c3c3c3","#c3c3c3","#c3c3c3","#c3c3c3","#c3c3c3","#c3c3c3","#00a2e8","#00a2e8","#00a2e8","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#00a2e8","#00a2e8","#00a2e8","#c3c3c3","#c3c3c3","#00a2e8","#00a2e8","#c3c3c3","#c3c3c3","#c3c3c3","#c3c3c3","#c3c3c3","#c3c3c3","#ffffff","#ffffff","#00a2e8","#00a2e8","#00a2e8","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#00a2e8","#00a2e8","#ed1c23","#ed1c23","#00a2e8","#00a2e8","#c3c3c3","#c3c3c3","#c3c3c3","#c3c3c3","#c3c3c3","#c3c3c3","#ffffff","#ffffff","#00a2e8","#00a2e8","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#00a2e8","#ed1c23","#ed1c23","#00a2e8","#00a2e8","#00a2e8","#00a2e8","#00a2e8","#00a2e8","#00a2e8","#00a2e8","#ffffff","#ffffff","#00a2e8","#00a2e8","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ed1c23","#ed1c23","#00a2e8","#00a2e8","#00a2e8","#00a2e8","#00a2e8","#00a2e8","#00a2e8","#00a2e8","#ffffff","#ffffff","#00a2e8","#00a2e8","#ffffff","#ffffff","#000000","#000000","#ffffff","#ffffff","#ffffff","#ffffff","#000000","#ffffff","#ffffff","#ed1c23","#ed1c23","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#00a2e8","#00a2e8","#ffffff","#ffffff","#00a2e8","#00a2e8","#ffffff","#ffffff","#000000","#000000","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#000000","#ffffff","#ed1c23","#ed1c23","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#00a2e8","#00a2e8","#ffffff","#ffffff","#00a2e8","#00a2e8","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ed1c23","#ed1c23","#ffffff","#ffffff","#000000","#ffffff","#fff200","#fff200","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#00a2e8","#00a2e8","#c3c3c3","#c3c3c3","#00a2e8","#00a2e8","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ed1c23","#ed1c23","#ffffff","#ffffff","#000000","#ffffff","#fff200","#fff200","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#00a2e8","#00a2e8","#c3c3c3","#c3c3c3","#00a2e8","#00a2e8","#ffffff","#ffffff","#000000","#000000","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#000000","#ffffff","#ed1c23","#ed1c23","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#00a2e8","#00a2e8","#ffffff","#ffffff","#00a2e8","#00a2e8","#ffffff","#ffffff","#000000","#000000","#ffffff","#ffffff","#ffffff","#ffffff","#000000","#ffffff","#ffffff","#ed1c23","#ed1c23","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#00a2e8","#00a2e8","#ffffff","#ffffff","#00a2e8","#00a2e8","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ed1c23","#ed1c23","#00a2e8","#00a2e8","#00a2e8","#00a2e8","#00a2e8","#00a2e8","#00a2e8","#00a2e8","#ffffff","#ffffff","#00a2e8","#00a2e8","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#00a2e8","#ed1c23","#ed1c23","#00a2e8","#00a2e8","#00a2e8","#00a2e8","#00a2e8","#00a2e8","#00a2e8","#00a2e8","#ffffff","#ffffff","#00a2e8","#00a2e8","#00a2e8","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#00a2e8","#00a2e8","#ed1c23","#ed1c23","#00a2e8","#00a2e8","#c3c3c3","#c3c3c3","#c3c3c3","#c3c3c3","#c3c3c3","#c3c3c3","#ffffff","#ffffff","#c3c3c3","#00a2e8","#00a2e8","#00a2e8","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#00a2e8","#00a2e8","#00a2e8","#c3c3c3","#c3c3c3","#00a2e8","#00a2e8","#c3c3c3","#c3c3c3","#c3c3c3","#c3c3c3","#c3c3c3","#c3c3c3","#ffffff","#ffffff","#c3c3c3","#c3c3c3","#00a2e8","#00a2e8","#00a2e8","#00a2e8","#00a2e8","#00a2e8","#00a2e8","#00a2e8","#00a2e8","#00a2e8","#c3c3c3","#c3c3c3","#c3c3c3","#ffffff","#ffffff","#c3c3c3","#c3c3c3","#c3c3c3","#c3c3c3","#c3c3c3","#c3c3c3","#c3c3c3","#c3c3c3","#c3c3c3","#c3c3c3","#c3c3c3","#00a2e8","#00a2e8","#00a2e8","#00a2e8","#00a2e8","#00a2e8","#00a2e8","#00a2e8","#c3c3c3","#c3c3c3","#c3c3c3","#c3c3c3","#ffffff","#ffffff","#c3c3c3","#c3c3c3","#c3c3c3","#c3c3c3","#c3c3c3","#c3c3c3","#c3c3c3","#c3c3c3","#c3c3c3","#c3c3c3","#c3c3c3","#c3c3c3","#c3c3c3","#c3c3c3","#c3c3c3","#c3c3c3","#c3c3c3","#c3c3c3","#c3c3c3","#c3c3c3","#c3c3c3","#c3c3c3","#c3c3c3","#c3c3c3","#c3c3c3","#c3c3c3","#c3c3c3","#c3c3c3","#c3c3c3","#c3c3c3","#c3c3c3","#c3c3c3","#c3c3c3","#c3c3c3","#c3c3c3","#c3c3c3","#c3c3c3","#c3c3c3","#c3c3c3","#c3c3c3","#c3c3c3","#c3c3c3","#c3c3c3","#c3c3c3","#c3c3c3","#c3c3c3","#c3c3c3","#c3c3c3","#c3c3c3","#c3c3c3","#c3c3c3","#c3c3c3","#c3c3c3","#c3c3c3","#c3c3c3","#c3c3c3","#c3c3c3","#c3c3c3","#c3c3c3","#c3c3c3","#c3c3c3","#c3c3c3","#c3c3c3","#c3c3c3","#c3c3c3","#c3c3c3","#c3c3c3","#c3c3c3","#c3c3c3","#c3c3c3","#c3c3c3","#c3c3c3","#c3c3c3","#c3c3c3","#c3c3c3","#c3c3c3","#c3c3c3","#c3c3c3","#c3c3c3","#c3c3c3","#c3c3c3","#c3c3c3","#c3c3c3","#c3c3c3","#c3c3c3","#c3c3c3","#c3c3c3","#c3c3c3","#c3c3c3","#c3c3c3","#c3c3c3","#c3c3c3","#c3c3c3","#c3c3c3","#c3c3c3","#c3c3c3","#c3c3c3","#c3c3c3","#c3c3c3","#c3c3c3","#c3c3c3","#c3c3c3","#c3c3c3","#c3c3c3","#c3c3c3","#c3c3c3","#c3c3c3","#c3c3c3","#c3c3c3","#c3c3c3","#c3c3c3","#c3c3c3","#c3c3c3","#c3c3c3","#c3c3c3","#c3c3c3","#c3c3c3","#c3c3c3","#c3c3c3","#c3c3c3","#c3c3c3","#c3c3c3","#c3c3c3","#c3c3c3","#c3c3c3","#c3c3c3","#c3c3c3","#c3c3c3","#c3c3c3","#c3c3c3","#c3c3c3","#c3c3c3","#c3c3c3"];
 8 | var traversymedia= ["#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#427fab","#427fab","#427fab","#427fab","#427fab","#427fab","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#427fab","#427fab","#427fab","#427fab","#427fab","#427fab","#427fab","#427fab","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#427fab","#427fab","#427fab","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#427fab","#427fab","#427fab","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#427fab","#427fab","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#427fab","#427fab","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#427fab","#427fab","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#427fab","#427fab","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#427fab","#427fab","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#427fab","#427fab","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#427fab","#427fab","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#427fab","#427fab","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#427fab","#427fab","#ffffff","#ffffff","#ffffff","#2f5876","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#427fab","#427fab","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#427fab","#427fab","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#427fab","#427fab","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#427fab","#427fab","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#427fab","#427fab","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#427fab","#427fab","#ffffff","#ffffff","#ffffff","#2f5876","#ffffff","#ffffff","#427fab","#ffffff","#ffffff","#427fab","#ffffff","#ffffff","#2f5876","#ffffff","#ffffff","#ffffff","#427fab","#427fab","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#427fab","#427fab","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#427fab","#427fab","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#427fab","#427fab","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#427fab","#427fab","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#427fab","#427fab","#ffffff","#ffffff","#ffffff","#2f5876","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#427fab","#427fab","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#427fab","#427fab","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#427fab","#427fab","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#427fab","#427fab","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#427fab","#427fab","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#427fab","#427fab","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#427fab","#427fab","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#427fab","#427fab","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#427fab","#427fab","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#427fab","#427fab","#427fab","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#427fab","#427fab","#427fab","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#427fab","#427fab","#427fab","#427fab","#427fab","#427fab","#427fab","#427fab","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#427fab","#427fab","#427fab","#427fab","#427fab","#427fab","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff"];
 9 | var heart = ["#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#000","#000","#000","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#000","#ff0000","#ff0000","#ff0000","#000","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#000","#ff0000","#ffffff","#ffffff","#ff0000","#ff0000","#000","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#000","#ff0000","#ffffff","#ff0000","#ff0000","#ff0000","#ff0000","#000","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#000","#ff0000","#ff0000","#ff0000","#ff0000","#ff0000","#ff0000","#ff0000","#000","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#000","#ff0000","#ff0000","#ff0000","#ff0000","#ff0000","#ff0000","#942631","#000","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#000","#ff0000","#ff0000","#ff0000","#ff0000","#ff0000","#ff0000","#942631","#000","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#000","#ff0000","#ff0000","#ff0000","#ff0000","#ff0000","#942631","#000","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#000","#942631","#ff0000","#ff0000","#ff0000","#942631","#000","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#000","#942631","#942631","#942631","#000","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#000","#000","#000","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff","#ffffff"];
10 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 | 	<title>Pixel Art</title>
 5 | 	<meta charset="utf-8">
 6 | 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 | 	<link rel="stylesheet" href="./style.css">
 8 | </head>
 9 | <body>
10 | 	<div id="app">
11 | 		<center>
12 | 			<div width="540px">
13 | 				<canvas id="canvas" width="500px" height="500px"></canvas>
14 | 				
15 | 				<div class="swatch-container">
16 | 					<div class="swatch-color eraser" index=0>						
17 | 						<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" 
18 | 							viewBox="-75 -75 600 600" style="enable-background:new 0 0 433.25 433.25;" xml:space="preserve">
19 | 
20 | 							<path d="M418.4,192.331c19.8-19.8,19.8-51.9,0-71.7l-0.1-0.1l-78.6-78.3c-19.8-19.8-51.9-19.7-71.8,0l-169.5,169.6l-54.2,54.1
21 | 									c-19.8,19.7-19.8,51.8-0.1,71.6l48.3,48.3H10c-5.5,0-10,4.5-10,10s4.5,10,10,10h297.4c5.5,0,10-4.5,10-10s-4.5-10-10-10H225
22 | 									l23.9-23.7L418.4,192.331z M196.7,385.831h-76.1l-62.3-62.4c-12-12-11.9-31.4,0-43.4l47.1-47l122.2,122L196.7,385.831z
23 | 			 						M119.6,218.931l162.5-162.5c12-12,31.5-12,43.5,0l78.6,78.4c12,12,12,31.4,0,43.5l-162.4,162.8L119.6,218.931z"/>
24 | 			 			</svg>
25 | 					</div>
26 | 					<div class="swatch-color" index=1 title="Right click to change color"></div>
27 | 					<div class="swatch-color" index=2 title="Right click to change color"></div>
28 | 					<div class="swatch-color" index=3 title="Right click to change color"></div>
29 | 					<div class="swatch-color" index=4 title="Right click to change color"></div>
30 | 					<div class="swatch-color" index=5 title="Right click to change color"></div>
31 | 
32 | 					<p class="info-text">
33 | 						Right click to change color. <br>
34 | 						Cell(<span id="cell-index">0, 0</span>)
35 | 					</p>
36 | 				</div>
37 | 
38 | 				<div class="gallery-options">
39 | 					<a href="#" onclick="grid.import(mario); return false;">Mario</a> &nbsp;
40 | 					<a href="#" onclick="grid.import(stitch); return false;">Stitch</a> &nbsp;
41 | 					<a href="#" class="tag" onclick="grid.import(traversymedia); return false;">Traversy Media </a> &nbsp;
42 | 					<a href="#" onclick="grid.import(monkas); return false;">Monkas</a> &nbsp;
43 | 					<a href="#" onclick="grid.import(cat); return false;">Cat</a> &nbsp;
44 | 					<a href="#" onclick="grid.import(pikachu); return false;">Pikachu</a> &nbsp;
45 | 					<a href="#" onclick="grid.import(conan); return false;">Conan O'Brien</a> &nbsp;
46 | 					<a href="#" onclick="grid.import(doraemon); return false;">Doraemon</a> &nbsp;
47 | 					<a href="#" onclick="grid.import(heart); return false;">Heart</a> &nbsp;
48 | 				</div>
49 | 				<br>
50 | 				<iframe src="https://ghbtns.com/github-btn.html?user=captainayan&repo=pixelart&type=star&count=true" frameborder="0" scrolling="0" width="150" height="20" title="GitHub"></iframe>
51 | 			</div>
52 | 		</center>
53 | 	</div>
54 | </body>
55 | <script type="text/javascript" src="./gallery.js"></script>
56 | <script type="text/javascript" src="./util.js"></script>
57 | <script type="text/javascript" src="./main.js"></script>
58 | </html>


--------------------------------------------------------------------------------
/main.js:
--------------------------------------------------------------------------------
 1 | 
 2 | // setting up canvas and constants
 3 | const rows = 25;
 4 | const columns = 25;
 5 | const cell_size = 20; // 20x20 grid
 6 | 
 7 | const c = document.querySelector('canvas');
 8 | const c_i = document.querySelector('#cell-index');
 9 | const ctx = c.getContext('2d');
10 | 
11 | var mouse = {x: undefined, y: undefined, isClicked: false};
12 | var grid, swatch;
13 | 
14 | const def_color_array = ["#35D461", "#F9E104", "#F99D07", "#882FF6", "#37B6F6"];
15 | 
16 | /// MOUSE INPUT SECTION
17 | c.addEventListener("mousemove",(e)=> {
18 | 	// mouse_coordinate - element_position_offset - border_width
19 |     mouse.x = e.clientX-c.offsetLeft-20;
20 |    	mouse.y = e.clientY-c.offsetTop-20;
21 | });
22 | c.addEventListener("mousedown",(e)=> mouse.isClicked = true);
23 | c.addEventListener("mouseup",(e)=> mouse.isClicked = false);
24 | /// MOUSE INPUT SECTION
25 | 
26 | // Initialization
27 | function init() {
28 | 	grid = new Grid(rows, columns, cell_size);
29 | 	swatch = new Swatch(def_color_array);
30 | 	swatch.setSwatchView();
31 | 
32 | 	// setup code here
33 |     animate();
34 | }
35 | 
36 | // animation loop
37 | function animate() {
38 |     requestAnimationFrame(animate);
39 | 	ctx.clearRect(0, 0, rows*cell_size, columns*cell_size);
40 | 	grid.update(mouse, ctx)
41 | }
42 | init();
43 | 
44 | 
45 | function displayCellIndex(x, y) {
46 | 	c_i.innerHTML = x + ", " + y;
47 | }


--------------------------------------------------------------------------------
/screenshots/1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/captainAyan/pixelart/3a7be733d6438070efcee11ecfc1aec1c80a1767/screenshots/1.png


--------------------------------------------------------------------------------
/style.css:
--------------------------------------------------------------------------------
 1 | * {
 2 | 	padding: 0px;
 3 | }
 4 | 
 5 | body {
 6 | 	/*background: #dfefff;*/
 7 | 	background: #e1f0ff;
 8 | 	margin: 0;
 9 | 
10 | 	font: 15px "Arial", sans-serif;
11 | }
12 | 
13 | canvas {
14 | 	margin: 20px auto;
15 | 	border: #89b 20px solid;
16 | 	border-radius: 24px;
17 | }
18 | 
19 | #container {
20 | 	width: 100%;
21 | }
22 | 
23 | #data {
24 | 	color: #212121;
25 | }
26 | 
27 | .swatch-container {
28 | 	width: 540px;
29 | 	padding: 5px 0px;
30 | 	border: #89b 1px solid;
31 | 	border-radius: 8px;
32 | 	overflow-wrap: normal;
33 | 	text-align: left;
34 | 	overflow: hidden;
35 | }
36 | 
37 | .swatch-color {
38 | 	display: block;
39 | 	border: solid #212121 2px;
40 | 	border-radius: 50%;
41 | 	width: 56px;
42 | 	height: 56px;
43 | 	background: #0088ff;
44 | 	margin: 15px 15px;
45 | 	float: left;
46 | 	cursor: pointer;
47 | }
48 | 
49 | .info-text {
50 | 	margin-left: 20px;
51 | 	font: 15px Arial, sans-serif;
52 | 	color: #89b;
53 | }
54 | 
55 | .eraser {
56 | 	background: white;
57 | }
58 | 
59 | .gallery-options {
60 | 	margin-top: 20px;
61 | 	width: 540px;
62 | 	display: block;
63 | 	overflow: hidden;
64 | }
65 | 
66 | .tag {
67 | 	background-color: #dc3545;
68 | 	display: inline;
69 |     padding: .2em .5em .2em;
70 |     font-size: 75%;
71 |     font-weight: 700;
72 |     line-height: 1;
73 |     color: #fff;
74 |     text-align: center;
75 |     white-space: nowrap;
76 |     vertical-align: baseline;
77 |     border-radius: .25em;
78 |     font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
79 | }


--------------------------------------------------------------------------------
/util.js:
--------------------------------------------------------------------------------
  1 | 
  2 | class Grid {
  3 | 
  4 | 	constructor(row_count, column_count, cell_size) {
  5 | 
  6 | 		this.row_count = row_count;
  7 | 		this.column_count = column_count;
  8 | 		this.cell_size = cell_size;
  9 | 
 10 | 		this.cells = [];
 11 | 
 12 | 		for(var x=0; x<this.row_count; x++) {
 13 | 			var row = [];
 14 | 			for(var y=0; y<this.column_count; y++) {
 15 | 				row.push(new Cell(x, y, cell_size))
 16 | 			}
 17 | 			this.cells.push(row);
 18 | 		}
 19 | 	}
 20 | 
 21 | 	update(mouse, ctx) {
 22 | 		for(var x=0; x<this.row_count; x++) {
 23 | 			for(var y=0; y<this.column_count; y++) {
 24 | 				var c = this.cells[x][y];
 25 | 				
 26 | 				if ((c.x <= mouse.x) && (mouse.x < c.x+c.size) && 
 27 | 					(c.y <= mouse.y) && (mouse.y < c.y+c.size)) {	
 28 | 					c.onHover();
 29 | 					displayCellIndex(x, y)
 30 | 
 31 | 					if(mouse.isClicked)
 32 | 						c.onClick(swatch.color);
 33 | 				}
 34 | 				else c.onUnhover();
 35 | 
 36 | 				c.draw(ctx)
 37 | 			}
 38 | 		}
 39 | 	}
 40 | 
 41 | 	export() {
 42 | 		let arr = [];
 43 | 		for(var x=0; x<this.row_count; x++) {
 44 | 			for(var y=0; y<this.column_count; y++) {
 45 | 				arr.push(this.cells[x][y].color);
 46 | 			}
 47 | 		}
 48 | 		return JSON.stringify(arr);
 49 | 	}
 50 | 
 51 | 	import(data) {
 52 | 		for(var x=0; x<this.row_count; x++) {
 53 | 			for(var y=0; y<this.column_count; y++) {
 54 | 				this.cells[x][y].color = data[x*this.row_count+y]
 55 | 			}
 56 | 		}
 57 | 	}
 58 | }
 59 | 
 60 | 
 61 | class Cell {
 62 | 
 63 | 	constructor(x_index, y_index, size) {
 64 | 		this.padding = 1;
 65 | 		this.size = size;
 66 | 		this.x = x_index * this.size;
 67 | 		this.y = y_index * this.size;
 68 | 		this.color = "#ffffff"; // default is white
 69 | 		this.isHovered = false;
 70 | 	}
 71 | 
 72 | 	onHover() { this.isHovered = true; }
 73 | 	onUnhover () { this.isHovered = false; }
 74 | 	onClick(color) { this.color = color; }
 75 | 
 76 | 	draw(ctx) {
 77 | 		ctx.fillStyle = this.color;
 78 | 		ctx.fillRect(this.x+this.padding, 
 79 | 			this.y+this.padding, 
 80 | 			this.size-this.padding*2, 
 81 | 			this.size-this.padding*2);
 82 | 
 83 | 		if (this.isHovered) {
 84 | 			ctx.strokeStyle = "#00f";
 85 | 			ctx.strokeRect(this.x, this.y, this.size, this.size);
 86 | 		}
 87 | 	}
 88 | 
 89 | }
 90 | 
 91 | class Swatch {
 92 | 	constructor(color_array) {
 93 | 		this.colors = ["#ffffff", ...color_array];
 94 | 		this.color = color_array[0];
 95 | 	}
 96 | 
 97 | 	setSwatchView() {
 98 | 		var l = document.getElementsByClassName("swatch-color");
 99 | 		for(let i=0; i<l.length; i++) {
100 | 			l[i].style.background = this.colors[i];
101 | 			
102 | 			// Select color event
103 | 			l[i].addEventListener("click", (e) => {
104 | 				this.color = this.colors[i];
105 | 			});
106 | 
107 | 			// Change color event
108 | 			l[i].addEventListener("contextmenu", (e) => {
109 | 				e.preventDefault();
110 | 				let _color = window
111 | 					.prompt("Enter color hex code (e.g. #fcba03):");
112 | 				
113 | 				if( !(/^#[0-9A-Fa-f]{6}$/i.test(_color) || 
114 | 					/^#[0-9A-Fa-f]{3}$/i.test(_color)) ) {
115 | 					window.alert("Invalid hex code given.")
116 | 				}
117 | 				else {
118 | 					this.colors[i] = _color;
119 | 					this.color = this.colors[i];
120 | 					l[i].style.background = this.colors[i];
121 | 				}
122 | 
123 | 			})
124 | 		}
125 | 	}
126 | }
127 | 


--------------------------------------------------------------------------------