From 300cde1217d2e5c1960ff9f02d046843d280cdcd Mon Sep 17 00:00:00 2001
From: Lea <me@janderedev.xyz>
Date: Sat, 25 Mar 2023 23:05:43 +0100
Subject: [PATCH] Add warning and transitionless gradient

---
 index.css  |  4 ++++
 index.html |  8 +++++---
 index.js   | 45 ++++++++++++++++++++++++++++++++++++++++++---
 3 files changed, 51 insertions(+), 6 deletions(-)

diff --git a/index.css b/index.css
index 9cc261c..54a6398 100644
--- a/index.css
+++ b/index.css
@@ -15,3 +15,7 @@ body {
     font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
     font-weight: 500;
 }
+
+#output_error {
+    color: red;
+}
diff --git a/index.html b/index.html
index cdf6de0..0aa6ce5 100644
--- a/index.html
+++ b/index.html
@@ -16,6 +16,7 @@
 
         <p id="preview">This is a preview of your gradient.</p>
         <input type="text" id="output" style="width: calc(100% - 8px)" value="Adjust the options, the output will appear here :3" readonly autocomplete="off" />
+        <p id="output_error"></p>
 
         <h3>Gradient type</h3>
         <input type="radio" id="gradient_linear" value="gradient_linear" name="gradient_type" onchange="updateUi()" autocomplete="off" />
@@ -25,10 +26,11 @@
         <input type="radio" id="gradient_conic" value="gradient_conic" name="gradient_type" onchange="updateUi()" autocomplete="off" />
         <label for="gradient_conic">Conic Gradient</label><br />
 
-        <div id="color-list">
-
-        </div>
+        <div id="color-list"></div>
         <button onclick="appendColor()">Add Color</button>
+        <br />
+        <input id="no_transition" type="checkbox" autocomplete="off" onchange="updateUi()">
+        <label for="no_transition">No transitions</label>
 
         <div id="config_linear" style="display: none;">
             <h4>Linear</h4>
diff --git a/index.js b/index.js
index d9d3190..20cd5aa 100644
--- a/index.js
+++ b/index.js
@@ -38,6 +38,23 @@ function updateUi() {
             button3.onclick = () => removeColor(i);
             list.appendChild(button3);
 
+            // Dynamic distance scaling between color nodes, too much effort to implement rn
+            /*
+            let sliderValue = document.createElement('span');
+            sliderValue.innerText = '50%';
+
+            let slider = document.createElement('input');
+            slider.type = 'range';
+            slider.min = 0;
+            slider.max = 100;
+            slider.value = 50;
+            slider.autocomplete = 'off';
+            slider.oninput = (e) => sliderValue.innerText = `${e.currentTarget.value}%`;
+
+            list.appendChild(slider);
+            list.appendChild(sliderValue);
+            */
+
             list.appendChild(document.createElement('br'));
         }
     }
@@ -48,6 +65,11 @@ function updateUi() {
     if (css) {
         document.getElementById('preview').style.backgroundImage = css;
         document.getElementById('output').value = css;
+
+        if (css.length > 128) {
+            document.getElementById('output_error').innerText = `Warning: The generated CSS is ${css.length} characters long, which exceeds Revolt's limit of 128 characters. You will not be able to use this gradient on Revolt.`;
+        }
+        else document.getElementById('output_error').innerText = '';
     }
 }
 
@@ -81,6 +103,23 @@ function moveDown(index) {
     updateUi();
 }
 
+/**
+ * @returns {string}
+ */
+function generateColorList() {
+    const noTransition = document.getElementById('no_transition').checked;
+    if (noTransition) {
+        const distance = 100 / colors.length;
+        const colorCodes = [];
+        for (let i = 0; i < colors.length; i++) {
+            colorCodes.push(i == 0 ? colors[i] : `${colors[i]} ${Math.round(distance * i * 10) / 10}%`);
+            colorCodes.push(i == colors.length - 1 ? colors[i] : `${colors[i]} ${Math.round(distance * (i+1) * 10) / 10}%`);
+        }
+        return colorCodes.join(',');
+    }
+    else return colors.join(',');
+}
+
 /**
  * @returns {string}
  */
@@ -97,7 +136,7 @@ function generateCss() {
  */
 function generateCssLinear() {
     const rotation = document.getElementById('rotation').value;
-    return `linear-gradient(${rotation}deg,${colors.join(',')})`;
+    return `linear-gradient(${rotation}deg,${generateColorList()})`;
 }
 /**
  * @returns {string}
@@ -107,7 +146,7 @@ function generateCssRadial() {
     const mode = Array.from(radios).find(r => r.checked).value ?? 'circle';
     radios = document.getElementsByName('radial_pos');
     const pos = Array.from(radios).find(r => r.checked).value ?? 'center';
-    return `radial-gradient(${mode} at ${pos}, ${colors.join(',')})`;
+    return `radial-gradient(${mode} at ${pos}, ${generateColorList()})`;
 }
 /**
  * @returns {string}
@@ -117,7 +156,7 @@ function generateCssConic() {
     const showCustomPos = document.getElementById('conic_custom_position').checked;
     const x = document.getElementById('conic_x').value;
     const y = document.getElementById('conic_y').value;
-    return `conic-gradient(from ${rotation}deg${showCustomPos ? ` at ${x}% ${y}%` : ''}, ${colors.join(',')})`;
+    return `conic-gradient(from ${rotation}deg${showCustomPos ? ` at ${x}% ${y}%` : ''}, ${generateColorList()})`;
 }
 
 // Initial update