From c0d6bee9c309c1c060f916e7a7f367ca5eef824f Mon Sep 17 00:00:00 2001 From: Dan Date: Fri, 9 Jan 2026 13:20:06 +0000 Subject: [PATCH] New effects, refactor --- assets/sass/pages/button-generator.scss | 45 ++- content/resources/button-generator/index.md | 6 +- .../effects/background-aurora.js | 191 +++++++++ .../effects/background-bubbles.js | 178 +++++++++ .../effects/background-fire.js | 216 ++++++++++ .../effects/background-starfield.js | 166 ++++++++ static/js/button-generator/effects/border.js | 372 +++++++++++++++--- .../js/button-generator/effects/spin-text.js | 90 +++-- .../js/button-generator/effects/spotlight.js | 18 +- .../button-generator/effects/text-shadow.js | 167 ++++++++ .../button-generator/effects/text-standard.js | 197 +++++----- .../js/button-generator/effects/wave-text.js | 17 +- static/js/button-generator/main.js | 11 + static/js/button-generator/ui-builder.js | 161 +++++++- 14 files changed, 1620 insertions(+), 215 deletions(-) create mode 100644 static/js/button-generator/effects/background-aurora.js create mode 100644 static/js/button-generator/effects/background-bubbles.js create mode 100644 static/js/button-generator/effects/background-fire.js create mode 100644 static/js/button-generator/effects/background-starfield.js create mode 100644 static/js/button-generator/effects/text-shadow.js diff --git a/assets/sass/pages/button-generator.scss b/assets/sass/pages/button-generator.scss index 193610b..17c0710 100644 --- a/assets/sass/pages/button-generator.scss +++ b/assets/sass/pages/button-generator.scss @@ -75,7 +75,6 @@ ); z-index: 90; } - &::before { content: ""; @@ -203,7 +202,7 @@ } label { - display: block; + //display: block; margin-top: 0.75rem; margin-bottom: 0.25rem; font-weight: 500; @@ -438,6 +437,7 @@ input[type="checkbox"] { margin: 0; cursor: pointer; + margin-right: 0.25em; } span { @@ -535,4 +535,45 @@ transform: translateY(0); } } + + // Custom tooltip styles + .control-tooltip { + position: fixed; + background: linear-gradient( + 135deg, + rgba(0, 120, 200, 0.98) 0%, + rgba(0, 100, 180, 0.98) 100% + ); + color: #fff; + padding: 0.5rem 0.75rem; + border-radius: 4px; + font-size: 0.8rem; + pointer-events: none; + z-index: 10000; + max-width: 250px; + box-shadow: + 0 0 20px rgba(0, 150, 255, 0.5), + 0 4px 12px rgba(0, 0, 0, 0.4), + inset 0 0 20px rgba(0, 150, 255, 0.1); + border: 1px solid rgba(0, 150, 255, 0.6); + opacity: 0; + transition: opacity 0.15s ease; + line-height: 1.4; + text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); + + &.visible { + opacity: 1; + } + + &::before { + content: ""; + position: absolute; + bottom: 100%; + left: 50%; + transform: translateX(-50%); + border: 6px solid transparent; + border-bottom-color: rgba(0, 120, 200, 0.98); + filter: drop-shadow(0 -2px 4px rgba(0, 0, 0, 0.2)); + } + } } diff --git a/content/resources/button-generator/index.md b/content/resources/button-generator/index.md index 9f5d5d2..a5cc19e 100644 --- a/content/resources/button-generator/index.md +++ b/content/resources/button-generator/index.md @@ -14,10 +14,14 @@ This supports gif despite the basic `canvas` tag limitation courtesy of [gif.js] Big thanks to [neonaut's 88x31 archive](https://neonaut.neocities.org/cyber/88x31) and everyone who made the buttons that appear there. You should check it out if you need inspiration for your button! +**Important note:** Some effects and animations stack, some don't. Some work better with certain lengths of text or variables depending on text length. Experiment, see what happens. + {{< button-generator >}} --- ### Changelog -- 08/01/2025 - Initial release. +- 07/01/2025 - Initial release. +- 08/01/2025 - Total refactor to be modular, added many more effects. +- 09/01/2025 - Rewrote the bevel inset and outset border code so they look a lot nicer at the corners. Updates throughout so that multibit (emoji!) characters should work. diff --git a/static/js/button-generator/effects/background-aurora.js b/static/js/button-generator/effects/background-aurora.js new file mode 100644 index 0000000..464a107 --- /dev/null +++ b/static/js/button-generator/effects/background-aurora.js @@ -0,0 +1,191 @@ +import { ButtonEffect } from "../effect-base.js"; + +/** + * Aurora/Plasma background effect + * Flowing organic color patterns using layered gradients + */ +export class AuroraEffect extends ButtonEffect { + constructor() { + super({ + id: "bg-aurora", + name: "Aurora", + type: "general", + category: "Background Animations", + renderOrder: 55, + }); + } + + defineControls() { + return [ + { + id: "animate-aurora", + type: "checkbox", + label: "Aurora Effect", + defaultValue: false, + }, + { + id: "aurora-speed", + type: "range", + label: "Flow Speed", + defaultValue: 1, + min: 1, + max: 3, + step: 1, + showWhen: "animate-aurora", + description: "Speed of flowing colors", + }, + { + id: "aurora-intensity", + type: "range", + label: "Intensity", + defaultValue: 0.6, + min: 0.2, + max: 1, + step: 0.1, + showWhen: "animate-aurora", + description: "Brightness and opacity", + }, + { + id: "aurora-complexity", + type: "range", + label: "Complexity", + defaultValue: 3, + min: 2, + max: 6, + step: 1, + showWhen: "animate-aurora", + description: "Number of wave layers", + }, + { + id: "aurora-color-scheme", + type: "select", + label: "Color Scheme", + defaultValue: "northern", + options: [ + { value: "northern", label: "Northern Lights" }, + { value: "purple", label: "Purple Dream" }, + { value: "fire", label: "Fire" }, + { value: "ocean", label: "Ocean" }, + { value: "rainbow", label: "Rainbow" }, + ], + showWhen: "animate-aurora", + description: "Color palette", + }, + ]; + } + + isEnabled(controlValues) { + return controlValues["animate-aurora"] === true; + } + + getColorScheme(scheme, hue) { + switch (scheme) { + case "northern": + return [ + { h: 120, s: 70, l: 50 }, // Green + { h: 160, s: 70, l: 50 }, // Teal + { h: 200, s: 70, l: 50 }, // Blue + ]; + case "purple": + return [ + { h: 270, s: 70, l: 50 }, // Purple + { h: 300, s: 70, l: 50 }, // Magenta + { h: 330, s: 70, l: 50 }, // Pink + ]; + case "fire": + return [ + { h: 0, s: 80, l: 50 }, // Red + { h: 30, s: 80, l: 50 }, // Orange + { h: 50, s: 80, l: 50 }, // Yellow-Orange + ]; + case "ocean": + return [ + { h: 180, s: 70, l: 50 }, // Cyan + { h: 200, s: 70, l: 50 }, // Light Blue + { h: 220, s: 70, l: 50 }, // Blue + ]; + case "rainbow": + return [ + { h: (hue + 0) % 360, s: 70, l: 50 }, + { h: (hue + 120) % 360, s: 70, l: 50 }, + { h: (hue + 240) % 360, s: 70, l: 50 }, + ]; + default: + return [ + { h: 120, s: 70, l: 50 }, + { h: 180, s: 70, l: 50 }, + { h: 240, s: 70, l: 50 }, + ]; + } + } + + apply(context, controlValues, animState, renderData) { + if (!animState) return; + + const speed = controlValues["aurora-speed"] || 1; + const intensity = controlValues["aurora-intensity"] || 0.6; + const complexity = controlValues["aurora-complexity"] || 3; + const colorScheme = controlValues["aurora-color-scheme"] || "northern"; + + const time = animState.getPhase(speed); + + // Create flowing hue shift that loops properly (only used for rainbow scheme) + // Convert phase (0 to 2π) to hue degrees (0 to 360) + const hueShift = (time / (Math.PI * 2)) * 360; + const colors = this.getColorScheme(colorScheme, hueShift); + + // Draw multiple overlapping gradients to create aurora effect + context.globalCompositeOperation = "screen"; // Blend mode for aurora effect + + for (let i = 0; i < complexity; i++) { + const phase = time + i * ((Math.PI * 2) / complexity); + + // Calculate wave positions + const wave1X = + renderData.centerX + Math.sin(phase) * renderData.width * 0.5; + const wave1Y = + renderData.centerY + Math.cos(phase * 1.3) * renderData.height * 0.5; + + // Create radial gradient + const gradient = context.createRadialGradient( + wave1X, + wave1Y, + 0, + wave1X, + wave1Y, + renderData.width * 0.8, + ); + + // Pick color based on wave index + const colorIdx = i % colors.length; + const color = colors[colorIdx]; + + const baseOpacity = intensity * 0.3; + + // Rainbow scheme already has hueShift applied in getColorScheme + // Other schemes use their fixed colors + gradient.addColorStop( + 0, + `hsla(${color.h}, ${color.s}%, ${color.l}%, ${baseOpacity})`, + ); + gradient.addColorStop( + 0.5, + `hsla(${color.h}, ${color.s}%, ${color.l}%, ${baseOpacity * 0.5})`, + ); + gradient.addColorStop( + 1, + `hsla(${color.h}, ${color.s}%, ${color.l}%, 0)`, + ); + + context.fillStyle = gradient; + context.fillRect(0, 0, renderData.width, renderData.height); + } + + // Reset composite operation + context.globalCompositeOperation = "source-over"; + } +} + +export function register(generator) { + generator.registerEffect(new AuroraEffect()); +} diff --git a/static/js/button-generator/effects/background-bubbles.js b/static/js/button-generator/effects/background-bubbles.js new file mode 100644 index 0000000..be3fc8f --- /dev/null +++ b/static/js/button-generator/effects/background-bubbles.js @@ -0,0 +1,178 @@ +import { ButtonEffect } from "../effect-base.js"; + +/** + * Bubbles rising background effect + * Floating bubbles that rise with drift + */ +export class BubblesEffect extends ButtonEffect { + constructor() { + super({ + id: "bg-bubbles", + name: "Bubbles", + type: "general", + category: "Background Animations", + renderOrder: 55, + }); + + this.bubbles = []; + this.initialized = false; + } + + defineControls() { + return [ + { + id: "animate-bubbles", + type: "checkbox", + label: "Bubbles Effect", + defaultValue: false, + }, + { + id: "bubble-count", + type: "range", + label: "Bubble Count", + defaultValue: 15, + min: 5, + max: 40, + step: 1, + showWhen: "animate-bubbles", + description: "Number of bubbles", + }, + { + id: "bubble-speed", + type: "range", + label: "Rise Speed", + defaultValue: 1, + min: 0.3, + max: 3, + step: 0.1, + showWhen: "animate-bubbles", + description: "Speed of rising bubbles", + }, + { + id: "bubble-drift", + type: "range", + label: "Drift Amount", + defaultValue: 1, + min: 0, + max: 3, + step: 0.1, + showWhen: "animate-bubbles", + description: "Side-to-side drift", + }, + { + id: "bubble-color", + type: "color", + label: "Bubble Color", + defaultValue: "#4da6ff", + showWhen: "animate-bubbles", + description: "Color of bubbles", + }, + ]; + } + + isEnabled(controlValues) { + return controlValues["animate-bubbles"] === true; + } + + apply(context, controlValues, animState, renderData) { + if (!animState) return; + + const count = controlValues["bubble-count"] || 15; + const speed = controlValues["bubble-speed"] || 1; + const drift = controlValues["bubble-drift"] || 1; + const bubbleColor = controlValues["bubble-color"] || "#4da6ff"; + + // Initialize bubbles on first frame or count change + if (!this.initialized || this.bubbles.length !== count) { + this.bubbles = []; + for (let i = 0; i < count; i++) { + this.bubbles.push({ + x: Math.random() * renderData.width, + startY: Math.random(), // Store as 0-1 ratio instead of pixel value + size: 3 + Math.random() * 8, + speedMultiplier: 0.5 + Math.random() * 1, + driftPhase: Math.random() * Math.PI * 2, + driftSpeed: 0.5 + Math.random() * 1, + }); + } + this.initialized = true; + } + + // Parse color for gradient + const hexToRgb = (hex) => { + const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex); + return result + ? { + r: parseInt(result[1], 16), + g: parseInt(result[2], 16), + b: parseInt(result[3], 16), + } + : { r: 77, g: 166, b: 255 }; + }; + + const rgb = hexToRgb(bubbleColor); + + // Draw bubbles + this.bubbles.forEach((bubble) => { + // Calculate Y position based on animation progress for perfect looping + // Each bubble has a different starting offset and speed + const bubbleProgress = + (animState.progress * speed * bubble.speedMultiplier + bubble.startY) % + 1; + + // Convert to pixel position (bubbles rise from bottom to top) + const bubbleY = + renderData.height + bubble.size - bubbleProgress * (renderData.height + bubble.size * 2); + + // Drift side to side + const driftOffset = + Math.sin( + animState.getPhase(bubble.driftSpeed * 0.5) + bubble.driftPhase + ) * + drift * + 2; + const currentX = bubble.x + driftOffset; + + // Draw bubble with gradient for 3D effect + const gradient = context.createRadialGradient( + currentX - bubble.size * 0.3, + bubbleY - bubble.size * 0.3, + 0, + currentX, + bubbleY, + bubble.size + ); + + gradient.addColorStop( + 0, + `rgba(${rgb.r + 40}, ${rgb.g + 40}, ${rgb.b + 40}, 0.6)` + ); + gradient.addColorStop( + 0.6, + `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, 0.4)` + ); + gradient.addColorStop(1, `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, 0.2)`); + + context.fillStyle = gradient; + context.beginPath(); + context.arc(currentX, bubbleY, bubble.size, 0, Math.PI * 2); + context.fill(); + + // Add highlight + context.fillStyle = "rgba(255, 255, 255, 0.4)"; + context.beginPath(); + context.arc( + currentX - bubble.size * 0.3, + bubbleY - bubble.size * 0.3, + bubble.size * 0.3, + 0, + Math.PI * 2 + ); + context.fill(); + }); + } +} + +export function register(generator) { + generator.registerEffect(new BubblesEffect()); +} diff --git a/static/js/button-generator/effects/background-fire.js b/static/js/button-generator/effects/background-fire.js new file mode 100644 index 0000000..e6072d5 --- /dev/null +++ b/static/js/button-generator/effects/background-fire.js @@ -0,0 +1,216 @@ +import { ButtonEffect } from "../effect-base.js"; + +/** + * Fire background effect + * Animated flames rising from bottom using particles + */ +export class FireEffect extends ButtonEffect { + constructor() { + super({ + id: "bg-fire", + name: "Fire", + type: "general", + category: "Background Animations", + renderOrder: 55, + }); + + this.particles = []; + this.initialized = false; + } + + defineControls() { + return [ + { + id: "animate-fire", + type: "checkbox", + label: "Fire Effect", + defaultValue: false, + }, + { + id: "fire-intensity", + type: "range", + label: "Intensity", + defaultValue: 50, + min: 20, + max: 100, + step: 5, + showWhen: "animate-fire", + description: "Number of flame particles", + }, + { + id: "fire-height", + type: "range", + label: "Flame Height", + defaultValue: 0.6, + min: 0.3, + max: 1, + step: 0.1, + showWhen: "animate-fire", + description: "How high flames reach", + }, + { + id: "fire-speed", + type: "range", + label: "Speed", + defaultValue: 1, + min: 0.3, + max: 3, + step: 0.1, + showWhen: "animate-fire", + description: "Speed of rising flames", + }, + { + id: "fire-color-scheme", + type: "select", + label: "Color Scheme", + defaultValue: "normal", + options: [ + { value: "normal", label: "Normal Fire" }, + { value: "blue", label: "Blue Flame" }, + { value: "green", label: "Green Flame" }, + { value: "purple", label: "Purple Flame" }, + { value: "white", label: "White Hot" }, + ], + showWhen: "animate-fire", + description: "Flame color", + }, + ]; + } + + isEnabled(controlValues) { + return controlValues["animate-fire"] === true; + } + + getFireColors(scheme) { + switch (scheme) { + case "normal": + return [ + { r: 255, g: 60, b: 0 }, // Red-orange + { r: 255, g: 140, b: 0 }, // Orange + { r: 255, g: 200, b: 0 }, // Yellow + ]; + case "blue": + return [ + { r: 0, g: 100, b: 255 }, // Blue + { r: 100, g: 180, b: 255 }, // Light blue + { r: 200, g: 230, b: 255 }, // Very light blue + ]; + case "green": + return [ + { r: 0, g: 200, b: 50 }, // Green + { r: 100, g: 255, b: 100 }, // Light green + { r: 200, g: 255, b: 150 }, // Very light green + ]; + case "purple": + return [ + { r: 150, g: 0, b: 255 }, // Purple + { r: 200, g: 100, b: 255 }, // Light purple + { r: 230, g: 180, b: 255 }, // Very light purple + ]; + case "white": + return [ + { r: 255, g: 200, b: 150 }, // Warm white + { r: 255, g: 240, b: 200 }, // Light white + { r: 255, g: 255, b: 255 }, // Pure white + ]; + default: + return [ + { r: 255, g: 60, b: 0 }, + { r: 255, g: 140, b: 0 }, + { r: 255, g: 200, b: 0 }, + ]; + } + } + + apply(context, controlValues, animState, renderData) { + if (!animState) return; + + const intensity = controlValues["fire-intensity"] || 50; + const height = controlValues["fire-height"] || 0.6; + const speed = controlValues["fire-speed"] || 1; + const colorScheme = controlValues["fire-color-scheme"] || "normal"; + + const colors = this.getFireColors(colorScheme); + const maxHeight = renderData.height * height; + + // Spawn new particles at the bottom + for (let i = 0; i < intensity / 10; i++) { + this.particles.push({ + x: Math.random() * renderData.width, + y: renderData.height, + vx: (Math.random() - 0.5) * 1.5, + vy: -(2 + Math.random() * 3) * speed, + size: 2 + Math.random() * 6, + life: 1.0, + colorIndex: Math.random(), + }); + } + + // Update and draw particles + this.particles = this.particles.filter((particle) => { + // Update position + particle.x += particle.vx; + particle.y += particle.vy; + + // Add some turbulence + particle.vx += (Math.random() - 0.5) * 0.2; + particle.vy *= 0.98; // Slow down as they rise + + // Fade out based on height and time + const heightRatio = + (renderData.height - particle.y) / renderData.height; + particle.life -= 0.015; + + if (particle.life > 0 && particle.y > renderData.height - maxHeight) { + // Choose color based on life (hotter at bottom, cooler at top) + const colorProgress = 1 - particle.life; + const colorIdx = Math.floor(colorProgress * (colors.length - 1)); + const colorBlend = (colorProgress * (colors.length - 1)) % 1; + + const c1 = colors[Math.min(colorIdx, colors.length - 1)]; + const c2 = colors[Math.min(colorIdx + 1, colors.length - 1)]; + + const r = Math.floor(c1.r + (c2.r - c1.r) * colorBlend); + const g = Math.floor(c1.g + (c2.g - c1.g) * colorBlend); + const b = Math.floor(c1.b + (c2.b - c1.b) * colorBlend); + + // Draw particle with gradient + const gradient = context.createRadialGradient( + particle.x, + particle.y, + 0, + particle.x, + particle.y, + particle.size + ); + + gradient.addColorStop( + 0, + `rgba(${r}, ${g}, ${b}, ${particle.life * 0.8})` + ); + gradient.addColorStop( + 0.5, + `rgba(${r}, ${g}, ${b}, ${particle.life * 0.5})` + ); + gradient.addColorStop(1, `rgba(${r}, ${g}, ${b}, 0)`); + + context.fillStyle = gradient; + context.beginPath(); + context.arc(particle.x, particle.y, particle.size, 0, Math.PI * 2); + context.fill(); + + return true; + } + return false; + }); + + // Limit particle count + if (this.particles.length > intensity * 5) { + this.particles = this.particles.slice(-intensity * 5); + } + } +} + +export function register(generator) { + generator.registerEffect(new FireEffect()); +} diff --git a/static/js/button-generator/effects/background-starfield.js b/static/js/button-generator/effects/background-starfield.js new file mode 100644 index 0000000..1440d32 --- /dev/null +++ b/static/js/button-generator/effects/background-starfield.js @@ -0,0 +1,166 @@ +import { ButtonEffect } from "../effect-base.js"; + +/** + * Starfield background effect + * Twinkling stars with optional shooting stars + */ +export class StarfieldEffect extends ButtonEffect { + constructor() { + super({ + id: "bg-starfield", + name: "Starfield", + type: "general", + category: "Background Animations", + renderOrder: 55, + }); + + this.stars = []; + this.shootingStars = []; + this.initialized = false; + } + + defineControls() { + return [ + { + id: "animate-starfield", + type: "checkbox", + label: "Starfield Effect", + description: + "This might look a bit different when exported, work in progress!", + defaultValue: false, + }, + { + id: "star-density", + type: "range", + label: "Star Density", + defaultValue: 30, + min: 10, + max: 80, + step: 5, + showWhen: "animate-starfield", + description: "Number of stars", + }, + { + id: "star-twinkle-speed", + type: "range", + label: "Twinkle Speed", + defaultValue: 1, + min: 0.1, + max: 3, + step: 0.1, + showWhen: "animate-starfield", + description: "Speed of twinkling", + }, + { + id: "star-shooting-enabled", + type: "checkbox", + label: "Shooting Stars", + defaultValue: true, + showWhen: "animate-starfield", + description: "Enable shooting stars", + }, + { + id: "star-color", + type: "color", + label: "Star Color", + defaultValue: "#ffffff", + showWhen: "animate-starfield", + description: "Color of stars", + }, + ]; + } + + isEnabled(controlValues) { + return controlValues["animate-starfield"] === true; + } + + apply(context, controlValues, animState, renderData) { + if (!animState) return; + + const density = controlValues["star-density"] || 30; + const twinkleSpeed = controlValues["star-twinkle-speed"] || 1; + const shootingEnabled = controlValues["star-shooting-enabled"] !== false; + const starColor = controlValues["star-color"] || "#ffffff"; + + // Initialize stars on first frame or density change + if (!this.initialized || this.stars.length !== density) { + this.stars = []; + for (let i = 0; i < density; i++) { + this.stars.push({ + x: Math.random() * renderData.width, + y: Math.random() * renderData.height, + size: 0.5 + Math.random() * 1.5, + twinkleOffset: Math.random() * Math.PI * 2, + twinkleSpeed: 0.5 + Math.random() * 1.5, + }); + } + this.initialized = true; + } + + // Draw twinkling stars + this.stars.forEach((star) => { + const twinkle = + Math.sin( + animState.getPhase(twinkleSpeed * star.twinkleSpeed) + + star.twinkleOffset, + ) * + 0.5 + + 0.5; + const opacity = 0.3 + twinkle * 0.7; + + context.fillStyle = starColor; + context.globalAlpha = opacity; + context.beginPath(); + context.arc(star.x, star.y, star.size, 0, Math.PI * 2); + context.fill(); + context.globalAlpha = 1.0; + }); + + // Shooting stars + if (shootingEnabled) { + // Randomly spawn shooting stars + if (Math.random() < 0.02 && this.shootingStars.length < 3) { + this.shootingStars.push({ + x: Math.random() * renderData.width, + y: -10, + vx: (Math.random() - 0.5) * 2, + vy: 3 + Math.random() * 2, + life: 1.0, + }); + } + + // Update and draw shooting stars + this.shootingStars = this.shootingStars.filter((star) => { + star.x += star.vx; + star.y += star.vy; + star.life -= 0.02; + + if (star.life > 0) { + // Draw shooting star trail + const gradient = context.createLinearGradient( + star.x, + star.y, + star.x - star.vx * 5, + star.y - star.vy * 5, + ); + gradient.addColorStop(0, `rgba(255, 255, 255, ${star.life * 0.8})`); + gradient.addColorStop(1, "rgba(255, 255, 255, 0)"); + + context.strokeStyle = gradient; + context.lineWidth = 2; + context.beginPath(); + context.moveTo(star.x, star.y); + context.lineTo(star.x - star.vx * 5, star.y - star.vy * 5); + context.stroke(); + + return true; + } + return false; + }); + } + } +} + +export function register(generator) { + generator.registerEffect(new StarfieldEffect()); +} diff --git a/static/js/button-generator/effects/border.js b/static/js/button-generator/effects/border.js index 79a496f..0ed6029 100644 --- a/static/js/button-generator/effects/border.js +++ b/static/js/button-generator/effects/border.js @@ -1,4 +1,4 @@ -import { ButtonEffect } from '../effect-base.js'; +import { ButtonEffect } from "../effect-base.js"; /** * Border effect @@ -7,65 +7,107 @@ import { ButtonEffect } from '../effect-base.js'; export class BorderEffect extends ButtonEffect { constructor() { super({ - id: 'border', - name: 'Border', - type: 'border', - category: 'Border', - renderOrder: 10 + id: "border", + name: "Border", + type: "border", + category: "Border", + renderOrder: 10, }); } defineControls() { return [ { - id: 'border-width', - type: 'range', - label: 'Border Width', + id: "border-width", + type: "range", + label: "Border Width", defaultValue: 2, min: 0, max: 5, step: 1, - description: 'Width of border in pixels' + description: "Width of border in pixels", }, { - id: 'border-color', - type: 'color', - label: 'Border Color', - defaultValue: '#000000' + id: "border-color", + type: "color", + label: "Border Color", + defaultValue: "#000000", }, { - id: 'border-style', - type: 'select', - label: 'Border Style', - defaultValue: 'solid', + id: "border-style", + type: "select", + label: "Border Style", + defaultValue: "solid", options: [ - { value: 'solid', label: 'Solid' }, - { value: 'inset', label: 'Inset (3D)' }, - { value: 'outset', label: 'Outset (3D)' }, - { value: 'ridge', label: 'Ridge' } - ] - } + { value: "solid", label: "Solid" }, + { value: "dashed", label: "Dashed" }, + { value: "dotted", label: "Dotted" }, + { value: "double", label: "Double" }, + { value: "inset", label: "Inset (3D)" }, + { value: "outset", label: "Outset (3D)" }, + { value: "ridge", label: "Ridge" }, + { value: "rainbow", label: "Rainbow (Animated)" }, + { value: "marching-ants", label: "Marching Ants" }, + { value: "checkerboard", label: "Checkerboard" }, + ], + }, + { + id: "border-rainbow-speed", + type: "range", + label: "Rainbow Speed", + defaultValue: 1, + min: 1, + max: 3, + step: 1, + showWhen: "border-style", + description: "Speed of rainbow animation", + }, + { + id: "border-march-speed", + type: "range", + label: "March Speed", + defaultValue: 1, + min: 1, + max: 3, + step: 1, + showWhen: "border-style", + description: "Speed of marching animation", + }, ]; } isEnabled(controlValues) { - const width = controlValues['border-width'] || 0; + const width = controlValues["border-width"] || 0; return width > 0; } apply(context, controlValues, animState, renderData) { - const width = controlValues['border-width'] || 0; + const width = controlValues["border-width"] || 0; if (width === 0) return; - const color = controlValues['border-color'] || '#000000'; - const style = controlValues['border-style'] || 'solid'; + const color = controlValues["border-color"] || "#000000"; + const style = controlValues["border-style"] || "solid"; - if (style === 'solid') { + if (style === "solid") { this.drawSolidBorder(context, width, color, renderData); - } else if (style === 'inset' || style === 'outset') { - this.draw3DBorder(context, width, style === 'outset', renderData); - } else if (style === 'ridge') { + } else if (style === "dashed") { + this.drawDashedBorder(context, width, color, renderData); + } else if (style === "dotted") { + this.drawDottedBorder(context, width, color, renderData); + } else if (style === "double") { + this.drawDoubleBorder(context, width, color, renderData); + } else if (style === "inset" || style === "outset") { + this.draw3DBorder(context, width, color, style === "outset", renderData); + } else if (style === "ridge") { this.drawRidgeBorder(context, width, renderData); + } else if (style === "rainbow") { + const speed = controlValues["border-rainbow-speed"] || 1; + this.drawRainbowBorder(context, width, animState, speed, renderData); + } else if (style === "marching-ants") { + const speed = controlValues["border-march-speed"] || 1; + this.drawMarchingAntsBorder(context, width, animState, speed, renderData); + } else if (style === "checkerboard") { + this.drawCheckerboardBorder(context, width, color, renderData); } } @@ -79,33 +121,65 @@ export class BorderEffect extends ButtonEffect { width / 2, width / 2, renderData.width - width, - renderData.height - width + renderData.height - width, ); } /** * Draw 3D inset/outset border */ - draw3DBorder(context, width, isOutset, renderData) { - const lightColor = isOutset ? '#ffffff' : '#000000'; - const darkColor = isOutset ? '#000000' : '#ffffff'; + draw3DBorder(context, width, color, isOutset, renderData) { + const w = renderData.width; + const h = renderData.height; + const t = width; - // Top and left (light) - context.strokeStyle = lightColor; - context.lineWidth = width; - context.beginPath(); - context.moveTo(0, renderData.height); - context.lineTo(0, 0); - context.lineTo(renderData.width, 0); - context.stroke(); + const normalized = color.toLowerCase(); + const isPureBlack = normalized === "#000000"; + const isPureWhite = normalized === "#ffffff"; - // Bottom and right (dark) - context.strokeStyle = darkColor; - context.beginPath(); - context.moveTo(renderData.width, 0); - context.lineTo(renderData.width, renderData.height); - context.lineTo(0, renderData.height); - context.stroke(); + let lightColor; + let darkColor; + + if (isPureBlack || isPureWhite) { + lightColor = isOutset ? "#ffffff" : "#000000"; + darkColor = isOutset ? "#000000" : "#ffffff"; + } else { + const lighter = this.adjustColor(color, 0.25); + const darker = this.adjustColor(color, -0.25); + + lightColor = isOutset ? lighter : darker; + darkColor = isOutset ? darker : lighter; + } + + context.fillStyle = lightColor; + context.fillRect(0, 0, w - t, t); + context.fillRect(0, t, t, h - t); + + context.fillStyle = darkColor; + context.fillRect(t, h - t, w - t, t); + context.fillRect(w - t, 0, t, h - t); + + this.drawBevelCorners(context, t, w, h, lightColor, darkColor, isOutset); + } + + drawBevelCorners(ctx, t, w, h, light, dark, isOutset) { + // Top-left corner + ctx.fillStyle = dark; + ctx.beginPath(); + ctx.moveTo(0, h); + ctx.lineTo(t, h); + ctx.lineTo(t, h - t); + ctx.closePath(); + ctx.fill(); + + // Bottom-right corner + ctx.fillStyle = light; + ctx.beginPath(); + ctx.moveTo(w - t, 0); + ctx.lineTo(w - t, t); + ctx.lineTo(w, 0); + ctx.closePath(); + ctx.fill(); } /** @@ -113,24 +187,212 @@ export class BorderEffect extends ButtonEffect { */ drawRidgeBorder(context, width, renderData) { // Outer ridge (light) - context.strokeStyle = '#ffffff'; + context.strokeStyle = "#ffffff"; context.lineWidth = width / 2; context.strokeRect( width / 4, width / 4, renderData.width - width / 2, - renderData.height - width / 2 + renderData.height - width / 2, ); // Inner ridge (dark) - context.strokeStyle = '#000000'; + context.strokeStyle = "#000000"; context.strokeRect( (width * 3) / 4, (width * 3) / 4, renderData.width - width * 1.5, - renderData.height - width * 1.5 + renderData.height - width * 1.5, ); } + + adjustColor(hex, amount) { + // hex: "#rrggbb", amount: -1.0 .. 1.0 + let r = parseInt(hex.slice(1, 3), 16); + let g = parseInt(hex.slice(3, 5), 16); + let b = parseInt(hex.slice(5, 7), 16); + + const adjust = (c) => + Math.min(255, Math.max(0, Math.round(c + amount * 255))); + + r = adjust(r); + g = adjust(g); + b = adjust(b); + + return `#${((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1)}`; + } + + /** + * Draw dashed border + */ + drawDashedBorder(context, width, color, renderData) { + context.strokeStyle = color; + context.lineWidth = width; + context.setLineDash([6, 3]); // 6px dash, 3px gap + context.strokeRect( + width / 2, + width / 2, + renderData.width - width, + renderData.height - width + ); + context.setLineDash([]); // Reset to solid + } + + /** + * Draw dotted border + */ + drawDottedBorder(context, width, color, renderData) { + context.strokeStyle = color; + context.lineWidth = width; + context.setLineDash([2, 3]); // 2px dot, 3px gap + context.lineCap = "round"; + context.strokeRect( + width / 2, + width / 2, + renderData.width - width, + renderData.height - width + ); + context.setLineDash([]); // Reset to solid + context.lineCap = "butt"; + } + + /** + * Draw double border + */ + drawDoubleBorder(context, width, color, renderData) { + const gap = Math.max(1, Math.floor(width / 3)); + const lineWidth = Math.max(1, Math.floor((width - gap) / 2)); + + context.strokeStyle = color; + context.lineWidth = lineWidth; + + // Outer border + context.strokeRect( + lineWidth / 2, + lineWidth / 2, + renderData.width - lineWidth, + renderData.height - lineWidth + ); + + // Inner border + const innerOffset = lineWidth + gap; + context.strokeRect( + innerOffset + lineWidth / 2, + innerOffset + lineWidth / 2, + renderData.width - innerOffset * 2 - lineWidth, + renderData.height - innerOffset * 2 - lineWidth + ); + } + + /** + * Draw rainbow animated border + */ + drawRainbowBorder(context, width, animState, speed, renderData) { + if (!animState) { + // Fallback to solid if no animation + this.drawSolidBorder(context, width, "#ff0000", renderData); + return; + } + + const hue = (animState.progress * speed * 360) % 360; + const color = `hsl(${hue}, 80%, 50%)`; + + context.strokeStyle = color; + context.lineWidth = width; + context.strokeRect( + width / 2, + width / 2, + renderData.width - width, + renderData.height - width + ); + } + + /** + * Draw marching ants animated border + */ + drawMarchingAntsBorder(context, width, animState, speed, renderData) { + if (!animState) { + // Fallback to dashed if no animation + this.drawDashedBorder(context, width, "#000000", renderData); + return; + } + + // Animate the dash offset using phase for smooth looping + const phase = animState.getPhase(speed); + const dashLength = 9; // 4px dash + 5px gap = 9px total + const offset = (phase / (Math.PI * 2)) * dashLength; + + context.strokeStyle = "#000000"; + context.lineWidth = width; + context.setLineDash([4, 5]); + context.lineDashOffset = -offset; + context.strokeRect( + width / 2, + width / 2, + renderData.width - width, + renderData.height - width + ); + context.setLineDash([]); + context.lineDashOffset = 0; + } + + /** + * Draw checkerboard border + */ + drawCheckerboardBorder(context, width, color, renderData) { + const squareSize = Math.max(2, width); + const w = renderData.width; + const h = renderData.height; + + // Parse the color + const r = parseInt(color.slice(1, 3), 16); + const g = parseInt(color.slice(3, 5), 16); + const b = parseInt(color.slice(5, 7), 16); + + // Create light and dark versions + const darkColor = color; + const lightColor = `rgb(${Math.min(255, r + 60)}, ${Math.min( + 255, + g + 60 + )}, ${Math.min(255, b + 60)})`; + + // Draw checkerboard on all four sides + // Top + for (let x = 0; x < w; x += squareSize) { + for (let y = 0; y < width; y += squareSize) { + const checker = Math.floor(x / squareSize + y / squareSize) % 2; + context.fillStyle = checker === 0 ? darkColor : lightColor; + context.fillRect(x, y, squareSize, squareSize); + } + } + + // Bottom + for (let x = 0; x < w; x += squareSize) { + for (let y = h - width; y < h; y += squareSize) { + const checker = Math.floor(x / squareSize + y / squareSize) % 2; + context.fillStyle = checker === 0 ? darkColor : lightColor; + context.fillRect(x, y, squareSize, squareSize); + } + } + + // Left + for (let x = 0; x < width; x += squareSize) { + for (let y = width; y < h - width; y += squareSize) { + const checker = Math.floor(x / squareSize + y / squareSize) % 2; + context.fillStyle = checker === 0 ? darkColor : lightColor; + context.fillRect(x, y, squareSize, squareSize); + } + } + + // Right + for (let x = w - width; x < w; x += squareSize) { + for (let y = width; y < h - width; y += squareSize) { + const checker = Math.floor(x / squareSize + y / squareSize) % 2; + context.fillStyle = checker === 0 ? darkColor : lightColor; + context.fillRect(x, y, squareSize, squareSize); + } + } + } } // Auto-register effect diff --git a/static/js/button-generator/effects/spin-text.js b/static/js/button-generator/effects/spin-text.js index d009b2b..a075844 100644 --- a/static/js/button-generator/effects/spin-text.js +++ b/static/js/button-generator/effects/spin-text.js @@ -1,4 +1,4 @@ -import { ButtonEffect } from '../effect-base.js'; +import { ButtonEffect } from "../effect-base.js"; /** * Spinning text animation effect @@ -6,61 +6,62 @@ import { ButtonEffect } from '../effect-base.js'; */ export class SpinTextEffect extends ButtonEffect { constructor(textLineNumber = 1) { - const suffix = textLineNumber === 1 ? '' : '2'; + const suffix = textLineNumber === 1 ? "" : "2"; super({ id: `text-spin${suffix}`, name: `Spinning Text ${textLineNumber}`, - type: textLineNumber === 1 ? 'text' : 'text2', - category: textLineNumber === 1 ? 'Text Line 1' : 'Text Line 2', + type: textLineNumber === 1 ? "text" : "text2", + category: textLineNumber === 1 ? "Text Line 1" : "Text Line 2", renderOrder: 8, // Before wave, after rainbow - textLineNumber: textLineNumber + textLineNumber: textLineNumber, }); this.textLineNumber = textLineNumber; } defineControls() { - const textLineNumber = this.textLineNumber || this.config?.textLineNumber || 1; - const suffix = textLineNumber === 1 ? '' : '2'; + const textLineNumber = + this.textLineNumber || this.config?.textLineNumber || 1; + const suffix = textLineNumber === 1 ? "" : "2"; return [ { id: `animate-text-spin${suffix}`, - type: 'checkbox', - label: 'Spinning Animation', - defaultValue: false + type: "checkbox", + label: "Spinning Animation", + defaultValue: false, }, { id: `spin-speed${suffix}`, - type: 'range', - label: 'Spin Speed', + type: "range", + label: "Spin Speed", defaultValue: 1, - min: 0.1, + min: 1, max: 5, - step: 0.1, + step: 1, showWhen: `animate-text-spin${suffix}`, - description: 'Speed of character rotation' + description: "Speed of character rotation", }, { id: `spin-stagger${suffix}`, - type: 'range', - label: 'Spin Stagger', + type: "range", + label: "Spin Stagger", defaultValue: 0.3, min: 0, max: 1, step: 0.1, showWhen: `animate-text-spin${suffix}`, - description: 'Delay between characters' - } + description: "Delay between characters", + }, ]; } isEnabled(controlValues) { - const suffix = this.textLineNumber === 1 ? '' : '2'; + const suffix = this.textLineNumber === 1 ? "" : "2"; return controlValues[`animate-text-spin${suffix}`] === true; } apply(context, controlValues, animState, renderData) { - const suffix = this.textLineNumber === 1 ? '' : '2'; - const text = controlValues[`button-text${suffix}`] || ''; + const suffix = this.textLineNumber === 1 ? "" : "2"; + const text = controlValues[`button-text${suffix}`] || ""; if (!text || !controlValues[`text${suffix}-enabled`]) return; if (!animState) return; @@ -68,21 +69,26 @@ export class SpinTextEffect extends ButtonEffect { const speed = controlValues[`spin-speed${suffix}`] || 1; const stagger = controlValues[`spin-stagger${suffix}`] || 0.3; const fontSize = controlValues[`font-size${suffix}`] || 14; - const fontFamily = controlValues[`font-family${suffix}`] || 'Arial'; - const fontWeight = controlValues[`text${suffix}-bold`] ? 'bold' : 'normal'; - const fontStyle = controlValues[`text${suffix}-italic`] ? 'italic' : 'normal'; + const fontFamily = controlValues[`font-family${suffix}`] || "Arial"; + const fontWeight = controlValues[`text${suffix}-bold`] ? "bold" : "normal"; + const fontStyle = controlValues[`text${suffix}-italic`] + ? "italic" + : "normal"; context.font = `${fontStyle} ${fontWeight} ${fontSize}px "${fontFamily}"`; - context.textAlign = 'center'; - context.textBaseline = 'middle'; + context.textAlign = "center"; + context.textBaseline = "middle"; // Get text color let fillStyle; - const colorType = controlValues[`text${suffix}-color-type`] || 'solid'; - if (colorType === 'gradient') { - const color1 = controlValues[`text${suffix}-gradient-color1`] || '#ffffff'; - const color2 = controlValues[`text${suffix}-gradient-color2`] || '#00ffff'; - const angle = (controlValues[`text${suffix}-gradient-angle`] || 90) * (Math.PI / 180); + const colorType = controlValues[`text${suffix}-color-type`] || "solid"; + if (colorType === "gradient") { + const color1 = + controlValues[`text${suffix}-gradient-color1`] || "#ffffff"; + const color2 = + controlValues[`text${suffix}-gradient-color2`] || "#00ffff"; + const angle = + (controlValues[`text${suffix}-gradient-angle`] || 90) * (Math.PI / 180); const centerX = renderData.centerX; const centerY = renderData.centerY; const x1 = centerX + Math.cos(angle) * 20; @@ -94,7 +100,7 @@ export class SpinTextEffect extends ButtonEffect { gradient.addColorStop(1, color2); fillStyle = gradient; } else { - fillStyle = controlValues[`text${suffix}-color`] || '#ffffff'; + fillStyle = controlValues[`text${suffix}-color`] || "#ffffff"; } // Calculate base position @@ -103,13 +109,24 @@ export class SpinTextEffect extends ButtonEffect { const baseX = (x / 100) * renderData.width; const baseY = (y / 100) * renderData.height; + // Split text into grapheme clusters (handles emojis properly) + // Use Intl.Segmenter if available, otherwise fall back to spread operator + let chars; + if (typeof Intl !== 'undefined' && Intl.Segmenter) { + const segmenter = new Intl.Segmenter('en', { granularity: 'grapheme' }); + chars = Array.from(segmenter.segment(text), s => s.segment); + } else { + // Fallback: spread operator handles basic emoji + chars = [...text]; + } + // Measure total text width for centering const totalWidth = context.measureText(text).width; let currentX = baseX - totalWidth / 2; // Draw each character with rotation - for (let i = 0; i < text.length; i++) { - const char = text[i]; + for (let i = 0; i < chars.length; i++) { + const char = chars[i]; const charWidth = context.measureText(char).width; const charCenterX = currentX + charWidth / 2; @@ -123,7 +140,8 @@ export class SpinTextEffect extends ButtonEffect { // Apply outline if enabled if (controlValues[`text${suffix}-outline`]) { - context.strokeStyle = controlValues[`text${suffix}-outline-color`] || '#000000'; + context.strokeStyle = + controlValues[`text${suffix}-outline-color`] || "#000000"; context.lineWidth = 2; context.strokeText(char, 0, 0); } diff --git a/static/js/button-generator/effects/spotlight.js b/static/js/button-generator/effects/spotlight.js index b1185e7..cfd79fb 100644 --- a/static/js/button-generator/effects/spotlight.js +++ b/static/js/button-generator/effects/spotlight.js @@ -70,10 +70,10 @@ export class SpotlightEffect extends ButtonEffect { id: "spotlight-darkness", type: "range", label: "Darkness", - defaultValue: 0.5, + defaultValue: 1, min: 0, max: 1, - step: 0.05, + step: 0.1, showWhen: "animate-spotlight", description: "How dark the non-spotlight area should be", }, @@ -84,9 +84,9 @@ export class SpotlightEffect extends ButtonEffect { type: "range", label: "Movement Speed", defaultValue: 1, - min: 0.1, + min: 1, max: 3, - step: 0.1, + step: 1, showWhen: "animate-spotlight", description: "Speed of spotlight movement", }, @@ -152,16 +152,6 @@ export class SpotlightEffect extends ButtonEffect { context.fill(); } - /** - * Optional: Override canApply for more complex logic - * By default, it just checks isEnabled() - */ - canApply(controlValues) { - // Example: Only apply if text is also enabled - const textEnabled = controlValues["textEnabled"]; - return this.isEnabled(controlValues) && textEnabled; - } - /** * Optional: Add helper methods for your effect */ diff --git a/static/js/button-generator/effects/text-shadow.js b/static/js/button-generator/effects/text-shadow.js new file mode 100644 index 0000000..3daa287 --- /dev/null +++ b/static/js/button-generator/effects/text-shadow.js @@ -0,0 +1,167 @@ +import { ButtonEffect } from "../effect-base.js"; + +/** + * Text Drop Shadow Effect + * Renders text with a drop shadow underneath + * This draws the shadow first, then standard text rendering draws on top + */ +export class TextShadowEffect extends ButtonEffect { + constructor(textLineNumber = 1) { + const suffix = textLineNumber === 1 ? "" : "2"; + super({ + id: `text-shadow${suffix}`, + name: `Drop Shadow ${textLineNumber}`, + type: textLineNumber === 1 ? "text" : "text2", + category: textLineNumber === 1 ? "Text Line 1" : "Text Line 2", + renderOrder: 19, // Before standard text (20), so shadow draws first + textLineNumber: textLineNumber, + }); + this.textLineNumber = textLineNumber; + } + + defineControls() { + const textLineNumber = + this.textLineNumber || this.config?.textLineNumber || 1; + const suffix = textLineNumber === 1 ? "" : "2"; + + return [ + { + id: `text${suffix}-shadow-enabled`, + type: "checkbox", + label: "Drop Shadow", + defaultValue: false, + description: + "Add drop shadow to text - Not compatible with other text effects!!", + }, + { + id: `text${suffix}-shadow-color`, + type: "color", + label: "Shadow Color", + defaultValue: "#000000", + showWhen: `text${suffix}-shadow-enabled`, + description: "Color of the shadow", + }, + { + id: `text${suffix}-shadow-blur`, + type: "range", + label: "Shadow Blur", + defaultValue: 4, + min: 0, + max: 10, + step: 1, + showWhen: `text${suffix}-shadow-enabled`, + description: "Blur radius of shadow", + }, + { + id: `text${suffix}-shadow-offset-x`, + type: "range", + label: "Shadow X Offset", + defaultValue: 2, + min: -10, + max: 10, + step: 1, + showWhen: `text${suffix}-shadow-enabled`, + description: "Horizontal shadow offset", + }, + { + id: `text${suffix}-shadow-offset-y`, + type: "range", + label: "Shadow Y Offset", + defaultValue: 2, + min: -10, + max: 10, + step: 1, + showWhen: `text${suffix}-shadow-enabled`, + description: "Vertical shadow offset", + }, + { + id: `text${suffix}-shadow-opacity`, + type: "range", + label: "Shadow Opacity", + defaultValue: 0.8, + min: 0, + max: 1, + step: 0.1, + showWhen: `text${suffix}-shadow-enabled`, + description: "Opacity of the shadow", + }, + ]; + } + + isEnabled(controlValues) { + const suffix = this.textLineNumber === 1 ? "" : "2"; + const textEnabled = controlValues[`text${suffix}-enabled`]; + const shadowEnabled = controlValues[`text${suffix}-shadow-enabled`]; + return textEnabled && shadowEnabled; + } + + apply(context, controlValues, animState, renderData) { + const suffix = this.textLineNumber === 1 ? "" : "2"; + + const text = controlValues[`button-text${suffix}`] || ""; + if (!text) return; + + // Get shadow settings + const shadowColor = + controlValues[`text${suffix}-shadow-color`] || "#000000"; + const shadowBlur = controlValues[`text${suffix}-shadow-blur`] || 4; + const shadowOffsetX = controlValues[`text${suffix}-shadow-offset-x`] || 2; + const shadowOffsetY = controlValues[`text${suffix}-shadow-offset-y`] || 2; + const shadowOpacity = controlValues[`text${suffix}-shadow-opacity`] || 0.8; + + // Get text rendering settings + const fontSize = controlValues[`font-size${suffix}`] || 14; + const fontFamily = controlValues[`font-family${suffix}`] || "Arial"; + const fontWeight = controlValues[`text${suffix}-bold`] ? "bold" : "normal"; + const fontStyle = controlValues[`text${suffix}-italic`] + ? "italic" + : "normal"; + const textX = (controlValues[`text${suffix}-x`] || 50) / 100; + const textY = (controlValues[`text${suffix}-y`] || 50) / 100; + + // Convert hex to rgba + const hexToRgba = (hex, alpha) => { + const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex); + if (result) { + const r = parseInt(result[1], 16); + const g = parseInt(result[2], 16); + const b = parseInt(result[3], 16); + return `rgba(${r}, ${g}, ${b}, ${alpha})`; + } + return `rgba(0, 0, 0, ${alpha})`; + }; + + // Set up text rendering + context.font = `${fontStyle} ${fontWeight} ${fontSize}px "${fontFamily}"`; + context.textAlign = "center"; + context.textBaseline = "middle"; + + // Calculate text position + const x = renderData.width * textX; + const y = renderData.height * textY; + + // Draw the shadow using the shadow API + // This will create a shadow underneath whatever we draw + context.shadowColor = hexToRgba(shadowColor, shadowOpacity); + context.shadowBlur = shadowBlur; + context.shadowOffsetX = shadowOffsetX; + context.shadowOffsetY = shadowOffsetY; + + // Draw a solid shadow by filling with the shadow color + // The shadow API will create the blur effect + context.fillStyle = hexToRgba(shadowColor, shadowOpacity); + context.fillText(text, x, y); + + // Reset shadow for subsequent renders + context.shadowColor = "transparent"; + context.shadowBlur = 0; + context.shadowOffsetX = 0; + context.shadowOffsetY = 0; + } +} + +// Export two instances for text line 1 and text line 2 +export function register(generator) { + generator.registerEffect(new TextShadowEffect(1)); + generator.registerEffect(new TextShadowEffect(2)); +} diff --git a/static/js/button-generator/effects/text-standard.js b/static/js/button-generator/effects/text-standard.js index 9caaf58..fb90f87 100644 --- a/static/js/button-generator/effects/text-standard.js +++ b/static/js/button-generator/effects/text-standard.js @@ -1,4 +1,4 @@ -import { ButtonEffect } from '../effect-base.js'; +import { ButtonEffect } from "../effect-base.js"; /** * Standard text rendering effect @@ -6,180 +6,184 @@ import { ButtonEffect } from '../effect-base.js'; */ export class StandardTextEffect extends ButtonEffect { constructor(textLineNumber = 1) { - const suffix = textLineNumber === 1 ? '' : '2'; + const suffix = textLineNumber === 1 ? "" : "2"; super({ id: `text-standard${suffix}`, name: `Standard Text ${textLineNumber}`, - type: textLineNumber === 1 ? 'text' : 'text2', - category: textLineNumber === 1 ? 'Text Line 1' : 'Text Line 2', + type: textLineNumber === 1 ? "text" : "text2", + category: textLineNumber === 1 ? "Text Line 1" : "Text Line 2", renderOrder: 20, // After animations - textLineNumber: textLineNumber // Pass through config so defineControls can access it + textLineNumber: textLineNumber, // Pass through config so defineControls can access it }); this.textLineNumber = textLineNumber; } defineControls() { // Access from config since this is called before constructor completes - const textLineNumber = this.textLineNumber || this.config?.textLineNumber || 1; - const suffix = textLineNumber === 1 ? '' : '2'; + const textLineNumber = + this.textLineNumber || this.config?.textLineNumber || 1; + const suffix = textLineNumber === 1 ? "" : "2"; return [ { id: `button-text${suffix}`, - type: 'text', + type: "text", label: `Text Line ${textLineNumber}`, - defaultValue: textLineNumber === 1 ? 'RITUAL.SH' : '' - }, - { - id: `text${suffix}-enabled`, - type: 'checkbox', - label: `Enable Text Line ${textLineNumber}`, - defaultValue: textLineNumber === 1 + defaultValue: textLineNumber === 1 ? "RITUAL.SH" : "", }, { id: `font-size${suffix}`, - type: 'range', - label: 'Font Size', + type: "range", + label: "Font Size", min: 6, max: 24, - defaultValue: textLineNumber === 1 ? 14 : 12 + defaultValue: textLineNumber === 1 ? 14 : 12, }, { id: `text${suffix}-x`, - type: 'range', - label: 'Horizontal Position', + type: "range", + label: "Horizontal Position", min: 0, max: 100, defaultValue: 50, - description: 'Percentage from left' + description: "Percentage from left", }, { id: `text${suffix}-y`, - type: 'range', - label: 'Vertical Position', + type: "range", + label: "Vertical Position", min: 0, max: 100, defaultValue: textLineNumber === 1 ? 35 : 65, - description: 'Percentage from top' + description: "Percentage from top", }, { id: `text${suffix}-color-type`, - type: 'select', - label: 'Color Type', - defaultValue: 'solid', + type: "select", + label: "Color Type", + defaultValue: "solid", options: [ - { value: 'solid', label: 'Solid Color' }, - { value: 'gradient', label: 'Gradient' } - ] + { value: "solid", label: "Solid Color" }, + { value: "gradient", label: "Gradient" }, + ], }, { id: `text${suffix}-color`, - type: 'color', - label: 'Text Color', - defaultValue: '#ffffff', - showWhen: `text${suffix}-color-type` + type: "color", + label: "Text Color", + defaultValue: "#ffffff", + showWhen: `text${suffix}-color-type`, }, { id: `text${suffix}-gradient-color1`, - type: 'color', - label: 'Gradient Color 1', - defaultValue: '#ffffff', - showWhen: `text${suffix}-color-type` + type: "color", + label: "Gradient Color 1", + defaultValue: "#ffffff", + showWhen: `text${suffix}-color-type`, }, { id: `text${suffix}-gradient-color2`, - type: 'color', - label: 'Gradient Color 2', - defaultValue: '#00ffff', - showWhen: `text${suffix}-color-type` + type: "color", + label: "Gradient Color 2", + defaultValue: "#00ffff", + showWhen: `text${suffix}-color-type`, }, { id: `text${suffix}-gradient-angle`, - type: 'range', - label: 'Gradient Angle', + type: "range", + label: "Gradient Angle", min: 0, max: 360, defaultValue: 0, - showWhen: `text${suffix}-color-type` + showWhen: `text${suffix}-color-type`, }, { id: `text${suffix}-outline`, - type: 'checkbox', - label: 'Outline', - defaultValue: false + type: "checkbox", + label: "Outline", + defaultValue: false, }, { id: `outline${suffix}-color`, - type: 'color', - label: 'Outline Color', - defaultValue: '#000000', - showWhen: `text${suffix}-outline` + type: "color", + label: "Outline Color", + defaultValue: "#000000", + showWhen: `text${suffix}-outline`, }, { id: `font-family${suffix}`, - type: 'select', - label: 'Font', - defaultValue: 'Lato', + type: "select", + label: "Font", + defaultValue: "Lato", options: [ - { value: 'Lato', label: 'Lato' }, - { value: 'Roboto', label: 'Roboto' }, - { value: 'Open Sans', label: 'Open Sans' }, - { value: 'Montserrat', label: 'Montserrat' }, - { value: 'Oswald', label: 'Oswald' }, - { value: 'Bebas Neue', label: 'Bebas Neue' }, - { value: 'Roboto Mono', label: 'Roboto Mono' }, - { value: 'VT323', label: 'VT323' }, - { value: 'Press Start 2P', label: 'Press Start 2P' }, - { value: 'DSEG7-Classic', label: 'DSEG7' } - ] + { value: "Lato", label: "Lato" }, + { value: "Roboto", label: "Roboto" }, + { value: "Open Sans", label: "Open Sans" }, + { value: "Montserrat", label: "Montserrat" }, + { value: "Oswald", label: "Oswald" }, + { value: "Bebas Neue", label: "Bebas Neue" }, + { value: "Roboto Mono", label: "Roboto Mono" }, + { value: "VT323", label: "VT323" }, + { value: "Press Start 2P", label: "Press Start 2P" }, + { value: "DSEG7-Classic", label: "DSEG7" }, + ], }, { id: `font-bold${suffix}`, - type: 'checkbox', - label: 'Bold', - defaultValue: false + type: "checkbox", + label: "Bold", + defaultValue: false, }, { id: `font-italic${suffix}`, - type: 'checkbox', - label: 'Italic', - defaultValue: false - } + type: "checkbox", + label: "Italic", + defaultValue: false, + }, ]; } isEnabled(controlValues) { - const suffix = this.textLineNumber === 1 ? '' : '2'; + const suffix = this.textLineNumber === 1 ? "" : "2"; const text = controlValues[`button-text${suffix}`]; - const enabled = controlValues[`text${suffix}-enabled`]; - // Only render if text exists, is enabled, and no animations are active on this text + // Only render if text exists and no animations are active on this text const waveActive = controlValues[`animate-text-wave${suffix}`]; const rainbowActive = controlValues[`animate-text-rainbow${suffix}`]; + const spinActive = controlValues[`animate-text-spin${suffix}`]; - return text && enabled && !waveActive && !rainbowActive; + return text && text.trim() !== "" && !waveActive && !rainbowActive && !spinActive; } apply(context, controlValues, animState, renderData) { - const suffix = this.textLineNumber === 1 ? '' : '2'; + const suffix = this.textLineNumber === 1 ? "" : "2"; const text = controlValues[`button-text${suffix}`]; if (!text) return; const fontSize = controlValues[`font-size${suffix}`] || 12; - const fontWeight = controlValues[`font-bold${suffix}`] ? 'bold' : 'normal'; - const fontStyle = controlValues[`font-italic${suffix}`] ? 'italic' : 'normal'; - const fontFamily = controlValues[`font-family${suffix}`] || 'Arial'; + const fontWeight = controlValues[`font-bold${suffix}`] ? "bold" : "normal"; + const fontStyle = controlValues[`font-italic${suffix}`] + ? "italic" + : "normal"; + const fontFamily = controlValues[`font-family${suffix}`] || "Arial"; const x = (controlValues[`text${suffix}-x`] / 100) * renderData.width; const y = (controlValues[`text${suffix}-y`] / 100) * renderData.height; // Set font context.font = `${fontStyle} ${fontWeight} ${fontSize}px "${fontFamily}"`; - context.textAlign = 'center'; - context.textBaseline = 'middle'; + context.textAlign = "center"; + context.textBaseline = "middle"; // Get colors - const colors = this.getTextColors(context, controlValues, text, x, y, fontSize); + const colors = this.getTextColors( + context, + controlValues, + text, + x, + y, + fontSize, + ); // Draw outline if enabled if (controlValues[`text${suffix}-outline`]) { @@ -197,17 +201,18 @@ export class StandardTextEffect extends ButtonEffect { * Get text colors (solid or gradient) */ getTextColors(context, controlValues, text, x, y, fontSize) { - const suffix = this.textLineNumber === 1 ? '' : '2'; - const colorType = controlValues[`text${suffix}-color-type`] || 'solid'; + const suffix = this.textLineNumber === 1 ? "" : "2"; + const colorType = controlValues[`text${suffix}-color-type`] || "solid"; let fillStyle, strokeStyle; - if (colorType === 'solid') { - fillStyle = controlValues[`text${suffix}-color`] || '#ffffff'; - strokeStyle = controlValues[`outline${suffix}-color`] || '#000000'; + if (colorType === "solid") { + fillStyle = controlValues[`text${suffix}-color`] || "#ffffff"; + strokeStyle = controlValues[`outline${suffix}-color`] || "#000000"; } else { // Gradient - const angle = (controlValues[`text${suffix}-gradient-angle`] || 0) * (Math.PI / 180); + const angle = + (controlValues[`text${suffix}-gradient-angle`] || 0) * (Math.PI / 180); const textWidth = context.measureText(text).width; const x1 = x - textWidth / 2 + (Math.cos(angle) * textWidth) / 2; const y1 = y - fontSize / 2 + (Math.sin(angle) * fontSize) / 2; @@ -215,10 +220,16 @@ export class StandardTextEffect extends ButtonEffect { const y2 = y + fontSize / 2 - (Math.sin(angle) * fontSize) / 2; const gradient = context.createLinearGradient(x1, y1, x2, y2); - gradient.addColorStop(0, controlValues[`text${suffix}-gradient-color1`] || '#ffffff'); - gradient.addColorStop(1, controlValues[`text${suffix}-gradient-color2`] || '#00ffff'); + gradient.addColorStop( + 0, + controlValues[`text${suffix}-gradient-color1`] || "#ffffff", + ); + gradient.addColorStop( + 1, + controlValues[`text${suffix}-gradient-color2`] || "#00ffff", + ); fillStyle = gradient; - strokeStyle = controlValues[`outline${suffix}-color`] || '#000000'; + strokeStyle = controlValues[`outline${suffix}-color`] || "#000000"; } return { fillStyle, strokeStyle }; diff --git a/static/js/button-generator/effects/wave-text.js b/static/js/button-generator/effects/wave-text.js index cf36211..b394c61 100644 --- a/static/js/button-generator/effects/wave-text.js +++ b/static/js/button-generator/effects/wave-text.js @@ -87,18 +87,29 @@ export class WaveTextEffect extends ButtonEffect { // Get colors const colors = this.getTextColors(context, controlValues, text, baseX, baseY, fontSize, animState); + // Split text into grapheme clusters (handles emojis properly) + // Use Intl.Segmenter if available, otherwise fall back to spread operator + let chars; + if (typeof Intl !== 'undefined' && Intl.Segmenter) { + const segmenter = new Intl.Segmenter('en', { granularity: 'grapheme' }); + chars = Array.from(segmenter.segment(text), s => s.segment); + } else { + // Fallback: spread operator handles basic emoji + chars = [...text]; + } + // Measure total width for centering const totalWidth = context.measureText(text).width; let currentX = baseX - totalWidth / 2; // Draw each character with wave offset - for (let i = 0; i < text.length; i++) { - const char = text[i]; + for (let i = 0; i < chars.length; i++) { + const char = chars[i]; const charWidth = context.measureText(char).width; // Calculate wave offset for this character const phase = animState.getPhase(speed); - const charOffset = i / text.length; + const charOffset = i / chars.length; const waveY = Math.sin(phase + charOffset * Math.PI * 2) * amplitude; const charX = currentX + charWidth / 2; diff --git a/static/js/button-generator/main.js b/static/js/button-generator/main.js index 805edef..51233e8 100644 --- a/static/js/button-generator/main.js +++ b/static/js/button-generator/main.js @@ -15,8 +15,13 @@ import * as textureBg from "./effects/background-texture.js"; import * as emojiWallpaper from "./effects/background-emoji-wallpaper.js"; import * as rainbowBg from "./effects/background-rainbow.js"; import * as rain from "./effects/background-rain.js"; +import * as starfield from "./effects/background-starfield.js"; +//import * as bubbles from "./effects/background-bubbles.js"; +import * as aurora from "./effects/background-aurora.js"; +import * as fire from "./effects/background-fire.js"; import * as border from "./effects/border.js"; import * as standardText from "./effects/text-standard.js"; +import * as textShadow from "./effects/text-shadow.js"; import * as waveText from "./effects/wave-text.js"; import * as rainbowText from "./effects/rainbow-text.js"; import * as spinText from "./effects/spin-text.js"; @@ -63,6 +68,7 @@ async function setupApp() { fps: 20, duration: 2, fonts: [ + "Arial", "Lato", "Roboto", "Open Sans", @@ -84,8 +90,13 @@ async function setupApp() { emojiWallpaper.register(generator); rainbowBg.register(generator); rain.register(generator); + starfield.register(generator); + //bubbles.register(generator); + aurora.register(generator); + fire.register(generator); border.register(generator); standardText.register(generator); + textShadow.register(generator); waveText.register(generator); rainbowText.register(generator); spinText.register(generator); diff --git a/static/js/button-generator/ui-builder.js b/static/js/button-generator/ui-builder.js index 2a051a4..00ce430 100644 --- a/static/js/button-generator/ui-builder.js +++ b/static/js/button-generator/ui-builder.js @@ -6,6 +6,120 @@ export class UIBuilder { constructor(containerElement) { this.container = containerElement; this.controlGroups = new Map(); // category -> { element, controls } + this.tooltip = null; + this.tooltipTimeout = null; + this.setupTooltip(); + } + + /** + * Create and setup the tooltip element + */ + setupTooltip() { + // Wait for DOM to be ready + if (document.readyState === 'loading') { + document.addEventListener('DOMContentLoaded', () => { + this.createTooltipElement(); + }); + } else { + this.createTooltipElement(); + } + } + + createTooltipElement() { + this.tooltip = document.createElement('div'); + this.tooltip.className = 'control-tooltip'; + this.tooltip.style.cssText = ` + position: fixed; + background: linear-gradient(135deg, rgba(0, 120, 200, 0.98) 0%, rgba(0, 100, 180, 0.98) 100%); + color: #fff; + padding: 0.5rem 0.75rem; + border-radius: 4px; + font-size: 0.8rem; + pointer-events: none; + z-index: 10000; + max-width: 250px; + box-shadow: 0 0 20px rgba(0, 150, 255, 0.5), 0 4px 12px rgba(0, 0, 0, 0.4); + border: 1px solid rgba(0, 150, 255, 0.6); + opacity: 0; + transition: opacity 0.15s ease; + line-height: 1.4; + text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); + `; + document.body.appendChild(this.tooltip); + } + + /** + * Show tooltip for an element + */ + showTooltip(element, text) { + if (!text || !this.tooltip) return; + + clearTimeout(this.tooltipTimeout); + + this.tooltip.textContent = text; + this.tooltip.style.opacity = '1'; + + // Position tooltip above the element + const rect = element.getBoundingClientRect(); + + // Set initial position to measure + this.tooltip.style.left = '0px'; + this.tooltip.style.top = '0px'; + this.tooltip.style.visibility = 'hidden'; + this.tooltip.style.display = 'block'; + + const tooltipRect = this.tooltip.getBoundingClientRect(); + + this.tooltip.style.visibility = 'visible'; + + let left = rect.left + rect.width / 2 - tooltipRect.width / 2; + let top = rect.top - tooltipRect.height - 10; + + // Keep tooltip on screen + const padding = 10; + if (left < padding) left = padding; + if (left + tooltipRect.width > window.innerWidth - padding) { + left = window.innerWidth - tooltipRect.width - padding; + } + if (top < padding) { + top = rect.bottom + 10; + } + + this.tooltip.style.left = `${left}px`; + this.tooltip.style.top = `${top}px`; + } + + /** + * Hide tooltip + */ + hideTooltip() { + if (!this.tooltip) return; + clearTimeout(this.tooltipTimeout); + this.tooltipTimeout = setTimeout(() => { + this.tooltip.style.opacity = '0'; + }, 100); + } + + /** + * Add tooltip handlers to an element + */ + addTooltipHandlers(element, description) { + if (!description) return; + + element.addEventListener('mouseenter', () => { + this.showTooltip(element, description); + }); + + element.addEventListener('mouseleave', () => { + this.hideTooltip(); + }); + + element.addEventListener('mousemove', () => { + // Update position on mouse move for better following + if (this.tooltip && this.tooltip.style.opacity === '1') { + this.showTooltip(element, description); + } + }); } /** @@ -133,19 +247,19 @@ export class UIBuilder { switch (type) { case 'checkbox': - return this.createCheckbox(id, label, defaultValue, showWhen); + return this.createCheckbox(id, label, defaultValue, showWhen, description); case 'range': return this.createRange(id, label, defaultValue, min, max, step, description, showWhen); case 'color': - return this.createColor(id, label, defaultValue, showWhen); + return this.createColor(id, label, defaultValue, showWhen, description); case 'select': - return this.createSelect(id, label, defaultValue, options, showWhen); + return this.createSelect(id, label, defaultValue, options, showWhen, description); case 'text': - return this.createTextInput(id, label, defaultValue); + return this.createTextInput(id, label, defaultValue, showWhen, description); default: console.warn(`Unknown control type: ${type}`); @@ -156,7 +270,7 @@ export class UIBuilder { /** * Create a checkbox control */ - createCheckbox(id, label, defaultValue, showWhen) { + createCheckbox(id, label, defaultValue, showWhen, description) { const wrapper = document.createElement('label'); wrapper.className = 'checkbox-label'; @@ -176,6 +290,9 @@ export class UIBuilder { wrapper.dataset.showWhen = showWhen; } + // Add tooltip handlers to the label wrapper + this.addTooltipHandlers(wrapper, description); + return wrapper; } @@ -188,9 +305,6 @@ export class UIBuilder { const labelEl = document.createElement('label'); labelEl.htmlFor = id; labelEl.innerHTML = `${label}: ${defaultValue}`; - if (description) { - labelEl.title = description; - } const input = document.createElement('input'); input.type = 'range'; @@ -218,13 +332,16 @@ export class UIBuilder { container.dataset.showWhen = showWhen; } + // Add tooltip handlers to the label + this.addTooltipHandlers(labelEl, description); + return container; } /** * Create a color picker control */ - createColor(id, label, defaultValue, showWhen) { + createColor(id, label, defaultValue, showWhen, description) { const container = document.createElement('div'); const labelEl = document.createElement('label'); @@ -244,13 +361,16 @@ export class UIBuilder { container.dataset.showWhen = showWhen; } + // Add tooltip handlers to the label + this.addTooltipHandlers(labelEl, description); + return container; } /** * Create a select dropdown control */ - createSelect(id, label, defaultValue, options, showWhen) { + createSelect(id, label, defaultValue, options, showWhen, description) { const container = document.createElement('div'); const labelEl = document.createElement('label'); @@ -278,13 +398,16 @@ export class UIBuilder { container.dataset.showWhen = showWhen; } + // Add tooltip handlers to the label + this.addTooltipHandlers(labelEl, description); + return container; } /** * Create a text input control */ - createTextInput(id, label, defaultValue) { + createTextInput(id, label, defaultValue, showWhen, description) { const container = document.createElement('div'); const labelEl = document.createElement('label'); @@ -300,6 +423,14 @@ export class UIBuilder { container.appendChild(labelEl); container.appendChild(input); + if (showWhen) { + container.style.display = 'none'; + container.dataset.showWhen = showWhen; + } + + // Add tooltip handlers to the label + this.addTooltipHandlers(labelEl, description); + return container; } @@ -348,6 +479,14 @@ export class UIBuilder { } else if (controlId && controlId.startsWith('text2-gradient-')) { control.style.display = triggerControl.value === 'gradient' ? 'block' : 'none'; } + } + // For border style controls + else if (triggerControlId === 'border-style') { + if (controlId === 'border-rainbow-speed') { + control.style.display = triggerControl.value === 'rainbow' ? 'block' : 'none'; + } else if (controlId === 'border-march-speed') { + control.style.display = triggerControl.value === 'marching-ants' ? 'block' : 'none'; + } } else { // Default: show when any value is selected control.style.display = triggerControl.value ? 'block' : 'none';