diff options
Diffstat (limited to '')
-rw-r--r-- | pixeled.js | 33 |
1 files changed, 26 insertions, 7 deletions
@@ -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) { |