fix link share logic

images/balloon-mask(1).svg

@@ -0,0 +1,51 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   version="1.1"
+   id="svg1"
+   width="266.66666"
+   height="266.66666"
+   viewBox="0 0 266.66666 266.66666"
+   sodipodi:docname="970844-200.png"
+   inkscape:version="1.3.2 (091e20ef0f, 2023-11-25)"
+   inkscape:dataloss="true"
+   inkscape:export-filename="balloon.svg"
+   inkscape:export-xdpi="96"
+   inkscape:export-ydpi="96"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs1" />
+  <sodipodi:namedview
+     id="namedview1"
+     pagecolor="#ffffff"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     showgrid="false"
+     inkscape:zoom="2.8537501"
+     inkscape:cx="133.33333"
+     inkscape:cy="133.33333"
+     inkscape:window-width="1913"
+     inkscape:window-height="965"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="g1" />
+  <g
+     inkscape:groupmode="layer"
+     inkscape:label="Image"
+     id="g1">
+    <path
+       style="fill:#000000"
+       d="m 110.86728,176.98292 c -4.14002,0 -4.72369,-2.23401 -2.50756,-9.59765 l 1.86611,-6.20063 -6.64984,-2.17505 C 79.220392,151.04328 59.783306,123.31229 54.44661,88.916447 50.643745,64.406394 58.908048,38.185685 75.880855,20.91057 112.83686,-16.70367 169.04213,6.1526753 179.48832,63.043415 c 1.80388,9.824085 1.93369,13.895611 0.74359,23.324138 -3.90357,30.925927 -19.83967,57.568167 -41.24178,68.948697 -4.48207,2.38333 -8.96523,4.34252 -9.96258,4.35375 -4.50331,0.0507 -5.26813,1.96681 -3.1647,7.92856 2.23565,6.33649 1.10587,9.38436 -3.47859,9.38436 z"
+       id="path1"
+       sodipodi:nodetypes="sscssssssssss" />
+  </g>
+</svg>

script.js

@@ -102,16 +102,9 @@ fetch('colors.json')
 
 /**
  * Saves the current 'selectedPalette' array to the browser's Local Storage.
- * We also save the URL params that would be generated from this palette.
  */
 function savePaletteToLocalStorage() {
   localStorage.setItem('userPalette', JSON.stringify(selectedPalette));
-
-  // Generate the canonical URL parameter string for the CURRENT palette
-  const currentPaletteParams = selectedPalette.map(c => c.hex.substring(1)).join(',');
-  
-  // Always save this as the source, so we can detect incoming new links
-  localStorage.setItem('paletteSourceUrl', currentPaletteParams);
 }
 
 /**
@@ -245,18 +238,16 @@ function shuffleArray(array) {
 
 /**
  * Initializes the palette on page load, prioritizing a new shared URL
- * over existing local storage.
+ * over existing local storage, without overwriting it.
  * @param {Array} allColorData - The entire array of color families from colors.json.
  */
 function initializePaletteOnLoad(allColorData) {
   const params = new URLSearchParams(window.location.search);
   const colorsFromURL = params.get('colors');
-  const savedSourceUrl = localStorage.getItem('paletteSourceUrl');
 
-  // Case 1: A new shared link has been clicked.
-  // The URL has colors, and they are different from the source of the currently saved palette.
-  if (colorsFromURL && colorsFromURL !== savedSourceUrl) {
-    console.log("Loading palette from new share link...");
+  // Check if a 'colors' parameter exists in the URL
+  if (colorsFromURL) {
+    console.log("Loading palette from share link for this session...");
     const flatColorList = allColorData.flatMap(family => family.colors);
     const hexCodesFromURL = colorsFromURL.split(',');
     const paletteFromURL = hexCodesFromURL.map(hex => {
@@ -264,29 +255,28 @@ function initializePaletteOnLoad(allColorData) {
     }).filter(Boolean);
 
     if (paletteFromURL.length > 0) {
-      selectedPalette = paletteFromURL;
+      selectedPalette = paletteFromURL; // Load for viewing
     }
     
-    // "Claim" this URL by saving it, then clean the address bar.
-    savePaletteToLocalStorage();
+    // Clean the address bar but DO NOT save to local storage yet
     history.replaceState(null, '', window.location.pathname);
   }
-  // Case 2: The user is just reloading a page. Default to local storage.
+  // If no URL parameter, the existing palette from local storage is used by default.
   else {
     console.log("Loading palette from Local Storage.");
-    // No action needed; palette is already loaded from local storage at the top.
   }
 
-  // Finally, render whatever palette was decided upon.
+  // Render whatever palette was decided upon (from URL or local storage).
+  // The render function itself will only save when the palette is changed.
   renderSelectedPalette(); 
   updateSwatchHighlights();
 }
 
+
 // --- Event Listeners ---
 
 document.getElementById('clear-palette').addEventListener('click', () => {
   selectedPalette = [];
-  localStorage.removeItem('paletteSourceUrl'); // Also clear the source
   renderSelectedPalette();
   updateSwatchHighlights();
 });
@@ -403,11 +393,3 @@ document.addEventListener('keydown', (event) => {
     closeZoomView();
   }
 });
-
-const animInput = document.getElementById('toggle-animation');
-const animWrap = animInput.closest('.icon-switch');
-animWrap.setAttribute('aria-pressed', animInput.checked ? 'true' : 'false');
-
-animInput.addEventListener('change', () => {
-  animWrap.setAttribute('aria-pressed', animInput.checked ? 'true' : 'false');
-});