add invert button, flat causes circle to be fat

phentos · Jun 27, 2023 · 4a32fd9 · 4a32fd9
1 parent ab51505
commit 4a32fd9
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 1 deletion.
diff --git a/images/yang-yin.svg b/images/yang-yin.svg
diff --git a/images/yin-yang.svg b/images/yin-yang.svg
diff --git a/index.html b/index.html
@@ -12,6 +12,7 @@
             <fieldset>
                 <div>
                     <img class="block" id="floppy" src="images/floppy.svg" width="75px" height="50px">
+                    <img class="block" id="invert" src="images/yin-yang.svg" width="75px" height="50px">
 
                     <br>
 

diff --git a/touch.js b/touch.js
@@ -1,5 +1,12 @@
 const debug = true;
 
+const FG_COLOR = "#000";
+const BG_COLOR = "#666";
+const COLOR_STATE_SYMBOLS = {
+	[FG_COLOR]:'images/yin-yang.svg',
+	[BG_COLOR]:'images/yang-yin.svg'
+}
+
 const touchEventHandlers = [
 	["touchstart", handleStart],
 	["touchend", handleEnd],
@@ -16,7 +23,7 @@ const penModeSelections = [
 
 const touchHistory = {};
 
-let penColor = "black";
+let penColor = FG_COLOR;
 let penSize = 4;
 let penMode = dot;
 
@@ -36,6 +43,11 @@ function activateUIHandlers() {
 		updatePenSize(event.target.value);
 	});
 
+	document.querySelector("#invert").addEventListener('click', () => {
+		penColor = (penColor === BG_COLOR) ? FG_COLOR : BG_COLOR;
+		document.querySelector('#invert').src = COLOR_STATE_SYMBOLS[penColor];
+	})
+
 	penModeSelections.forEach(([elementId, penFunction, defaultPenSize]) => {
 		document.querySelector(elementId).addEventListener('change', (event) => {
 			event.preventDefault();