removed storage removal

index.html

@@ -98,6 +98,15 @@
         </select>
       </div>
 
+      <div class="setting-bar generation-params">
+        <span>palette generation type:</span>
+        <select id="paletteGenerationSettings">
+          <option>analogous</option>
+          <option>gradient</option>
+          <option>monochromatic</option>
+        </select>
+      </div>
+
 
       <div id="close-settings" class="setting-button">ok!</div>
       <div id="clear-data" class="setting-button">clear local data (removes all palettes and settings)</div>
@@ -210,9 +219,9 @@
           <div id="randomize-mobile">randomize &#10542;</div>
           <div class="control-button disabled" id="redo">redo &orarr;</div>
         </div>
-        <!-- <div class="generate-controls">
+        <div class="generate-controls">
           <div id="generate-palette" class="control-button">generate palette</div>
-        </div> -->
+        </div>
       </div>
 
       <div class="color-sliders">
@@ -303,7 +312,7 @@ <h2>click a color to copy it! <span id="copiedNotification">copied!</span></h2>
 
 <script type="text/javascript">
   window.isUpdateAvailable = new Promise((resolve, reject) => {
-    if ('serviceWorker' in navigator) {
+    if ('serviceWorker' in navigator && 0 == 1) {
       // register service worker file
       navigator.serviceWorker.register('./service-worker.js')
         .then(reg => {

scripts/main.js

@@ -36,6 +36,10 @@ const txtSliders = Array.from(document.getElementsByClassName("colortxtInput"));
 const randomParamsStart = document.getElementById("randomParamsStart");
 const randomParamsEnd = document.getElementById("randomParamsEnd");
 const themeSelect = document.getElementById("themeSelect");
+const colorPaletteGenerationSwitch = document.getElementById(
+  "paletteGenerationSettings"
+);
+let paletteGenParams = "analogous";
 
 const BODY = document.body;
 
@@ -50,7 +54,7 @@ window.onload = () => {
 
   setTimeout(() => {
     preloader.classList.add("hidden");
-    document.body.classList.add("scroll");
+    BODY.classList.add("scroll");
     enableScroll();
   }, 1500);
 
@@ -190,6 +194,13 @@ window.onload = () => {
 
   randomParamsEnd.addEventListener("input", fixParams);
 
+  const setPaletteGenParams = () => {
+    const setting = colorPaletteGenerationSwitch.value;
+    paletteGenParams = setting;
+  };
+
+  colorPaletteGenerationSwitch.addEventListener("input", setPaletteGenParams);
+
   if (
     STORAGE.getItem("darkMode") != undefined &&
     STORAGE.getItem("darkMode") == "false"
@@ -309,14 +320,14 @@ window.onload = () => {
     }
   };
 
-  document.body.onkeydown = e => {
-    if (e.keyCode == 32 && document.activeElement == document.body) {
+  BODY.onkeydown = e => {
+    if (e.keyCode == 32 && document.activeElement == BODY) {
       e.preventDefault();
     }
   };
 
-  document.body.onkeyup = e => {
-    if (e.keyCode == 32 && document.activeElement == document.body) {
+  BODY.onkeyup = e => {
+    if (e.keyCode == 32 && document.activeElement == BODY) {
       e.preventDefault();
 
       if (document.getElementById("randomizeReminder")) {
@@ -385,7 +396,7 @@ window.onload = () => {
     const getScrollTop = () => {
       if (typeof pageYOffset != "undefined") return pageYOffset;
       else {
-        var B = document.body;
+        var B = BODY;
         var D = document.documentElement;
         D = D.clientHeight ? D : B;
         return D.scrollTop;

scripts/paletteOperations.js

@@ -23,7 +23,7 @@ selectExportType.addEventListener("input", () => {
 let STORAGE = window.localStorage;
 
 // remember to remove this:
-// STORAGE.clear();
+STORAGE.clear();
 
 let PALETTES =
   STORAGE.getItem("palettes") == undefined
@@ -531,6 +531,7 @@ addNewPalette.addEventListener("click", () =>
 
 // generate an entire palette from two colors
 const makeFullPalette = () => {
+  console.log("[PARAMS]", paletteGenParams);
   // create a fresh palette bar with the two current colors
   addNewPaletteBar(colorObject.bg.hex, colorObject.text.hex);
 
@@ -546,20 +547,25 @@ const makeFullPalette = () => {
   let bgColors = [];
   let txtColors = [];
 
-  let cyan = { r: 0, g: 255, b: 255 };
+  bgColors.push(obgRGB);
+  txtColors.push(obtxtRGB);
 
-  // function to change color's hue
-  const shiftHue = (rgb, deg) => {
-    let hsl = rgbToNHSL(rgb.r, rgb.g, rgb.b);
-    console.log(hsl);
-    hsl.h += deg;
-    if (hsl.h > 360) hsl.h -= 360;
-    else if (hsl.h < 0) hsl.h += 360;
+  console.log(bgColors, txtColors);
 
-    return hslToRGB(hsl.h, hsl.s, hsl.l);
-  };
+  let cyan = { r: 251, g: 255, b: 255 };
+
+  console.log("[SHIFTHUE RGB OUT]", shiftHue(cyan, 20));
+  return;
+
+  // if color scheme generation setting is gradient
+  // use the background color as one endpoint and the text color as the other.
+  // generate the palette by interpolating between these two colors with eight steps.
+  // in pigments, background color is on the left, text color is on the right.
+  // keep that in mind when creating a gradient palette.
 
-  console.log(shiftHue(cyan, 20));
+  // color scheme generation setting is monochrome
+  // then each generated pigment should have a background / text pigment
+  // derived from the original pigments, but all using the same hue.
 
   // if color scheme generation setting is analogous, use shiftHue
   // to select new colors. if it's monochrome, then just use changeShade
@@ -610,6 +616,6 @@ const makeFullPalette = () => {
   // savePaletteState();
 };
 
-// document
-//   .getElementById("generate-palette")
-//   .addEventListener("click", () => makeFullPalette());
+document
+  .getElementById("generate-palette")
+  .addEventListener("click", () => makeFullPalette());