Start of the rewrite to a modular system

2026-01-09 09:15:05 +00:00 · 2026-01-09 09:15:05 +00:00 · 4ac45367e5
commit 4ac45367e5
parent 2bfdc30caa
29 changed files with 4414 additions and 588 deletions
--- a/static/js/button-generator/effects/background-rainbow.js
+++ b/static/js/button-generator/effects/background-rainbow.js
@ -0,0 +1,137 @@
+import { ButtonEffect } from '../effect-base.js';
+
+/**
+ * Rainbow flash background effect
+ * Animates background through rainbow colors
+ */
+export class RainbowBackgroundEffect extends ButtonEffect {
+  constructor() {
+    super({
+      id: 'bg-rainbow',
+      name: 'Rainbow Background',
+      type: 'background',
+      category: 'Background Animations',
+      renderOrder: 2 // After base background
+    });
+  }
+
+  defineControls() {
+    return [
+      {
+        id: 'animate-bg-rainbow',
+        type: 'checkbox',
+        label: 'Rainbow Flash',
+        defaultValue: false
+      },
+      {
+        id: 'rainbow-speed',
+        type: 'range',
+        label: 'Rainbow Speed',
+        defaultValue: 1,
+        min: 0.1,
+        max: 5,
+        step: 0.1,
+        showWhen: 'animate-bg-rainbow',
+        description: 'Speed of rainbow cycling'
+      }
+    ];
+  }
+
+  isEnabled(controlValues) {
+    return controlValues['animate-bg-rainbow'] === true;
+  }
+
+  apply(context, controlValues, animState, renderData) {
+    if (!animState) return;
+
+    const speed = controlValues['rainbow-speed'] || 1;
+    const hue = (animState.progress * speed * 360) % 360;
+
+    const bgType = controlValues['bg-type'];
+
+    if (bgType === 'solid') {
+      // Solid rainbow
+      context.fillStyle = `hsl(${hue}, 70%, 50%)`;
+      context.fillRect(0, 0, renderData.width, renderData.height);
+    } else if (bgType === 'gradient') {
+      // Rainbow gradient
+      const angle = (controlValues['gradient-angle'] || 90) * (Math.PI / 180);
+      const x1 = renderData.centerX + Math.cos(angle) * renderData.centerX;
+      const y1 = renderData.centerY + Math.sin(angle) * renderData.centerY;
+      const x2 = renderData.centerX - Math.cos(angle) * renderData.centerX;
+      const y2 = renderData.centerY - Math.sin(angle) * renderData.centerY;
+
+      const gradient = context.createLinearGradient(x1, y1, x2, y2);
+      gradient.addColorStop(0, `hsl(${hue}, 70%, 50%)`);
+      gradient.addColorStop(1, `hsl(${(hue + 60) % 360}, 70%, 60%)`);
+
+      context.fillStyle = gradient;
+      context.fillRect(0, 0, renderData.width, renderData.height);
+    }
+  }
+}
+
+/**
+ * Rainbow gradient sweep effect
+ * Creates a moving rainbow gradient that sweeps across the button
+ */
+export class RainbowGradientSweepEffect extends ButtonEffect {
+  constructor() {
+    super({
+      id: 'bg-rainbow-gradient',
+      name: 'Rainbow Gradient Sweep',
+      type: 'general',
+      category: 'Background Animations',
+      renderOrder: 50 // After background and text
+    });
+  }
+
+  defineControls() {
+    return [
+      {
+        id: 'animate-bg-rainbow-gradient',
+        type: 'checkbox',
+        label: 'Rainbow Sweep',
+        defaultValue: false,
+        description: 'Moving rainbow gradient overlay'
+      }
+    ];
+  }
+
+  isEnabled(controlValues) {
+    return controlValues['animate-bg-rainbow-gradient'] === true;
+  }
+
+  apply(context, controlValues, animState, renderData) {
+    if (!animState) return;
+
+    // Map progress to position (-100 to 100)
+    const position = animState.progress * 200 - 100;
+
+    // Create a horizontal gradient that sweeps across
+    const gradient = context.createLinearGradient(
+      position - 50,
+      0,
+      position + 50,
+      0
+    );
+
+    // Create rainbow stops that also cycle through colors
+    const hueOffset = animState.progress * 360;
+    gradient.addColorStop(0, `hsla(${(hueOffset + 0) % 360}, 80%, 50%, 0)`);
+    gradient.addColorStop(0.2, `hsla(${(hueOffset + 60) % 360}, 80%, 50%, 0.6)`);
+    gradient.addColorStop(0.4, `hsla(${(hueOffset + 120) % 360}, 80%, 50%, 0.8)`);
+    gradient.addColorStop(0.6, `hsla(${(hueOffset + 180) % 360}, 80%, 50%, 0.8)`);
+    gradient.addColorStop(0.8, `hsla(${(hueOffset + 240) % 360}, 80%, 50%, 0.6)`);
+    gradient.addColorStop(1, `hsla(${(hueOffset + 300) % 360}, 80%, 50%, 0)`);
+
+    context.fillStyle = gradient;
+    context.fillRect(0, 0, renderData.width, renderData.height);
+  }
+}
+
+// Auto-register effects
+export function register(generator) {
+  generator.registerEffect(new RainbowBackgroundEffect());
+  generator.registerEffect(new RainbowGradientSweepEffect());
+}