summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--pixeled.css12
-rw-r--r--pixeled.js33
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 {
+}
diff --git a/pixeled.js b/pixeled.js
index 731f2e0..fd6a890 100644
--- a/pixeled.js
+++ b/pixeled.js
@@ -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) {