diff options
| -rw-r--r-- | pixeled.css | 12 | ||||
| -rw-r--r-- | pixeled.js | 33 |
2 files changed, 35 insertions, 10 deletions
diff --git a/pixeled.css b/pixeled.css index 6e2da15..5f02f19 100644 --- a/pixeled.css +++ b/pixeled.css @@ -53,8 +53,11 @@ button { #grid_container > div { background: white; aspect-ratio: 1; - border-bottom: 1px solid #888; - border-right: 1px solid #888; +} + +.show_grid > div { + border-bottom: 1px solid #777; + border-right: 1px solid #777; border-collapse: collapse; } @@ -76,7 +79,7 @@ button { font-weight: bold; z-index: 2; gap: 2rem; - grid-template-rows: 10vh 15vh 20vh 1fr 1fr 1fr 1fr + grid-template-rows: 10vh 15vh 20vh 1fr 1fr 1fr 1fr 1fr; } #toolbox > header { @@ -145,3 +148,6 @@ button { button.selected { border: 4px solid #fff !important; } + +#btn_overlay { +} @@ -28,7 +28,7 @@ * * [*] discrete drawing states * [*] click-and-drag to draw, not hover - * [ ] right click to copy color under cursor (and switch to it) + * [*] right click to copy color under cursor (and switch to it) * * STRETCH GOAL * @@ -79,13 +79,18 @@ function rebuildCanvas(size) { } }); box.addEventListener("mousedown", function(e) { - console.log(e); + // console.log(e.target.style.backgroundColor); if (e.which == 3 || e.button == 2) { - console.log(e); - setCustom(); - custom_color = rgb_to_hex(e.target.style.backgroundColor); - document.querySelector("#custom_color").value = custom_color; - current_color = custom_color; + if (e.target.style.backgroundColor == 'rgb(0, 0, 0)') { + setBlack(); + } else if (e.target.style.backgroundColor == 'rgb(255, 255, 255)' || e.target.style.backgroundColor == '') { + setWhite(); + } else { + custom_color = rgb_to_hex(e.target.style.backgroundColor); + document.querySelector("#custom_color").value = custom_color; + current_color = custom_color; + setCustom(); + } } else { do_draw = true; drawColor(e.target, current_color); @@ -115,6 +120,7 @@ function initialSetup() { /* generate a 16x16 grid of divs */ grid = document.createElement("div"); grid.id = ["grid_container"]; + grid.classList = ["show_grid"]; /* turn the pen off when you leave the canvas */ grid.addEventListener("mouseleave", (e) => { @@ -158,6 +164,7 @@ function initialSetup() { <button id="darken">darken</button> <button id="lighten">lighten</button> <button id="erase">erase</button> + <button id="grid_toggle">grid on</button> <datalist id="sizes"> <option value="16"></option> <option value="32"></option> @@ -248,6 +255,9 @@ function initialSetup() { document.querySelector('#custom_color').addEventListener("input", setCustom); document.querySelector('#custom_pick > span').addEventListener("click", setCustom); document.querySelector('#custom_pick').addEventListener("click", setCustom); + + /* The Toggle Grid option */ + document.querySelector('#grid_toggle').addEventListener("click", toggleGrid); } function drawColor(e, c) { @@ -292,6 +302,15 @@ function setLighten() { document.querySelector("#lighten").classList.toggle("selected"); } +function toggleGrid(e) { + document.querySelector("#grid_container").classList.toggle("show_grid"); + if (document.querySelector("#grid_container").classList.contains("show_grid")) { + e.target.textContent = "grid on"; + } else { + e.target.textContent = "grid off"; + } +} + function lintCanvasSize(s) { s = parseInt(s); if (s < 8) { |