diff --git a/images/yang-yin.svg b/images/yang-yin.svg new file mode 100644 index 0000000..a328949 --- /dev/null +++ b/images/yang-yin.svg @@ -0,0 +1,6 @@ + + + + + + \ No newline at end of file diff --git a/images/yin-yang.svg b/images/yin-yang.svg new file mode 100644 index 0000000..24364f9 --- /dev/null +++ b/images/yin-yang.svg @@ -0,0 +1,6 @@ + + + + + + \ No newline at end of file diff --git a/index.html b/index.html index d31aaa0..8f5a17e 100644 --- a/index.html +++ b/index.html @@ -12,6 +12,7 @@
+
diff --git a/touch.js b/touch.js index e8bb6d2..0afa3f1 100644 --- 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();