Pixel drawing for https://github.com/gelstudios/gitfiti
Created
October 26, 2017 01:22
-
-
Save jcahill/5e5ce68e20b0ef2dcb9e0fcceee97381 to your computer and use it in GitHub Desktop.
Gitfiti Painter
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| #palette | |
| each val in ['', '#d6e685', '#8cc665', '#44a340', '#1e6823'] | |
| label | |
| input(type="radio", name="brush", value=val) | |
| #calendar | |
| ul | |
| - var n = 0 | |
| while n < 45 | |
| - n++ | |
| li | |
| ul | |
| each val in [0, 1, 2, 3, 4, 5, 6] | |
| li.pixel | |
| label | |
| a(href='https://github.com/gelstudios/gitfiti') gelstudios/gitfiti | |
| textarea#gitfiti | |
| label | |
| a(href='https://github.com/bayandin/github-board') bayandin/github-board | |
| textarea#github-board |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| let painting = false | |
| document.body.addEventListener('mousedown', event => { | |
| if (event.target.className === 'pixel') { | |
| painting = true | |
| paint(event.target) | |
| } | |
| }) | |
| document.body.addEventListener('mouseup', event => { | |
| painting = false | |
| }) | |
| document.body.addEventListener('mouseover', event => { | |
| if (painting && event.target.className === 'pixel') { | |
| paint(event.target) | |
| } | |
| }) | |
| function paint(pixel) { | |
| let brush = document.querySelector('input[name="brush"]:checked') | |
| let color = brush ? brush.value : '' | |
| let index = Math.floor(Array.prototype.indexOf.call( | |
| brush.parentNode.parentNode.childNodes, | |
| brush.parentNode | |
| ) / 2) | |
| pixel.style.backgroundColor = color | |
| pixel.dataset.brush = index | |
| updateTemplates() | |
| } | |
| function updateTemplates() { | |
| let data = [[],[],[],[],[],[],[]] | |
| let columns = document.querySelectorAll('#calendar > ul > li') | |
| Array.prototype.forEach.call(columns, (col, x) => { | |
| let cells = col.querySelectorAll('.pixel') | |
| Array.prototype.forEach.call(cells, (cell, y) => { | |
| let brush = cell.dataset.brush || 0 | |
| data[y][x] = brush | |
| }) | |
| }) | |
| updateGitHubBoard(data) | |
| updateGitfiti(data) | |
| } | |
| function updateGitHubBoard(data) { | |
| document.getElementById('github-board').value = | |
| data.map(row => row.join('')).join('\n') | |
| } | |
| function updateGitfiti(data) { | |
| document.getElementById('gitfiti').value = ':template\n[[' + | |
| data.map(row => row.join()).join('],\n[') + ']]' | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| * | |
| font-family sans-serif | |
| #palette | |
| label | |
| display inline-block | |
| height 40px | |
| width 40px | |
| margin 10px | |
| overflow hidden | |
| border 2px solid grey | |
| cursor pointer | |
| color transparent | |
| colours = #eee #d6e685 #8cc665 #44a340 #1e6823 | |
| for colour, i in colours | |
| &:nth-of-type({i+1}) | |
| background-color colour | |
| #calendar | |
| font-size 0 | |
| margin 0 0 10px 0 | |
| cursor crosshair | |
| user-select none | |
| -webkit-user-select none | |
| -moz-user-select none | |
| > ul | |
| padding 0 | |
| margin 0 | |
| > li | |
| overflow hidden | |
| display inline-block | |
| width 13px | |
| height 91px | |
| margin 0 | |
| > ul | |
| padding 0 | |
| margin 0 | |
| > li | |
| border 1px solid white | |
| display inline-block | |
| width 11px | |
| height 11px | |
| overflow hidden | |
| background-color #eee | |
| textarea | |
| font-family monospace | |
| font-size 10px | |
| display block | |
| width 600px | |
| height 120px | |
| margin 0 0 10px 0 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment