Right click toggles to another tool as needed

Also added a 'show grid' toggle button, which will update 'on' or 'off'
on its label as necessary.

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) {