From ea031fd90952fb3708a0b51b852230392be2f807 Mon Sep 17 00:00:00 2001
From: Nicholas Jitkoff <nicholas@jitkoff.com>
Date: Sat, 2 Jul 2022 14:44:18 -0700
Subject: [PATCH] Add updatehash

---
 docs/index.js        |  3 +++
 docs/render/color.js | 51 +++++++++++++++++++++++++++-----------------
 2 files changed, 34 insertions(+), 20 deletions(-)

diff --git a/docs/index.js b/docs/index.js
index 426aa75..434c185 100644
--- a/docs/index.js
+++ b/docs/index.js
@@ -139,6 +139,9 @@
       if (e.data.wakeLock) {
         getWakeLock();
       }
+      if (e.data.updateHash) {
+        window.history.replaceState(null, null, e.data.updateHash);
+      }
       if (e.data.replaceURL) {
         if (e.data.compressURL) {
           let durl = new bitty.DataURL(e.data.replaceURL);
diff --git a/docs/render/color.js b/docs/render/color.js
index d91c64b..ebae4a9 100644
--- a/docs/render/color.js
+++ b/docs/render/color.js
@@ -42,26 +42,6 @@ let currentColor;
   };
 }
 
-function update (e){
-   if (!e.buttons) return;
-  console.log(e)
-  // Get the coordinates of the click
-  var eventLocation = getEventLocation(this,event);
-  // Get the data of the pixel according to the location generate by the getEventLocation function
-  var context = this.getContext('2d');
-  var pixelData = context.getImageData(eventLocation.x, eventLocation.y, 1, 1).data; 
-
-  // If transparency on the pixel , array = [0,0,0,0]
-  if((pixelData[0] == 0) && (pixelData[1] == 0) && (pixelData[2] == 0) && (pixelData[3] == 0)){
-      // Do something if the pixel is transparent
-  }
-  currentColor = `rgba(${pixelData[0]},${pixelData[1]},${pixelData[2]},${pixelData[3]})`;
-  renderCanvas()
-
-  console.log(pixelData[0], pixelData[1], pixelData[2]);
-  // Convert it to HEX if you want using the rgbToHex method.
-  // var hex = "#" + ("000000" + rgbToHex(pixelData[0], pixelData[1], pixelData[2])).slice(-6);
-}
 function render() {
   let colors = params.body.substring(2).split(";");
   console.log("params", params, colors)
@@ -82,6 +62,37 @@ function render() {
   renderCanvas()
 }
 
+function update (e){
+  if (!e.buttons) return;
+ // Get the coordinates of the click
+ var eventLocation = getEventLocation(this,event);
+ // Get the data of the pixel according to the location generate by the getEventLocation function
+ var context = this.getContext('2d');
+ var pixelData = context.getImageData(eventLocation.x, eventLocation.y, 1, 1).data; 
+
+ // If transparency on the pixel , array = [0,0,0,0]
+ if((pixelData[0] == 0) && (pixelData[1] == 0) && (pixelData[2] == 0) && (pixelData[3] == 0)){
+     // Do something if the pixel is transparent
+ }
+ currentColor = `rgb(${pixelData[0]},${pixelData[1]},${pixelData[2]}})`;
+
+ updateURL();
+ renderCanvas()
+
+ console.log(pixelData[0], pixelData[1], pixelData[2]);
+ // Convert it to HEX if you want using the rgbToHex method.
+ // var hex = "#" + ("000000" + rgbToHex(pixelData[0], pixelData[1], pixelData[2])).slice(-6);
+}
+
+let timeout;
+function updateURL() {
+  clearTimeout(timeout)
+  timeout = setTimeout(() => {
+    parent.postMessage({updateHash:"#/c:" + currentColor}, "*");
+  },100);
+  
+}
+
 function renderCanvas() {
   let ctx = canvas.getContext("2d");
   let w = canvas.width, h = canvas.height;