domma-cms 0.1.0

package/plugins/domma-effects/public/celebrations/core/canvas.js

@@ -0,0 +1,111 @@
+/**
+ * Canvas Management Utilities
+ * Handles canvas creation, resizing, and context management
+ */
+
+export class CanvasManager {
+  constructor(options = {}) {
+    this.canvasId = options.canvasId || 'celebrations-canvas';
+    this.zIndex = options.zIndex || 999;
+    this.canvas = null;
+    this.ctx = null;
+    this.resizeTimeout = null;
+    this.resizeCallback = options.onResize || null;
+
+    // Bind methods
+    this._handleResize = this._handleResize.bind(this);
+  }
+
+  /**
+   * Create and append canvas to DOM
+   */
+  create() {
+    if (this.canvas) return; // Already created
+
+    this.canvas = document.createElement('canvas');
+    this.canvas.id = this.canvasId;
+    this.canvas.style.cssText = `
+      position: fixed;
+      top: 0;
+      left: 0;
+      width: 100vw;
+      height: 100vh;
+      pointer-events: none;
+      z-index: ${this.zIndex};
+    `;
+
+    this.ctx = this.canvas.getContext('2d', { alpha: true });
+    this.resize();
+    document.body.appendChild(this.canvas);
+
+    // Bind resize listener
+    window.addEventListener('resize', this._handleResize);
+  }
+
+  /**
+   * Resize canvas to match window dimensions
+   */
+  resize() {
+    if (!this.canvas) return;
+
+    this.canvas.width = window.innerWidth;
+    this.canvas.height = window.innerHeight;
+  }
+
+  /**
+   * Clear entire canvas
+   */
+  clear() {
+    if (!this.ctx) return;
+    this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
+  }
+
+  /**
+   * Get canvas dimensions
+   */
+  getDimensions() {
+    return {
+      width: this.canvas?.width || 0,
+      height: this.canvas?.height || 0
+    };
+  }
+
+  /**
+   * Check if mobile device
+   */
+  isMobile() {
+    return window.innerWidth < 768;
+  }
+
+  /**
+   * Remove canvas from DOM and cleanup
+   */
+  destroy() {
+    window.removeEventListener('resize', this._handleResize);
+
+    if (this.canvas && this.canvas.parentNode) {
+      this.canvas.parentNode.removeChild(this.canvas);
+    }
+
+    this.canvas = null;
+    this.ctx = null;
+  }
+
+  /**
+   * Handle window resize with debouncing
+   * @private
+   */
+  _handleResize() {
+    if (this.resizeTimeout) {
+      clearTimeout(this.resizeTimeout);
+    }
+
+    this.resizeTimeout = setTimeout(() => {
+      this.resize();
+
+      if (this.resizeCallback) {
+        this.resizeCallback();
+      }
+    }, 250);
+  }
+}

package/plugins/domma-effects/public/celebrations/core/particles.js

@@ -0,0 +1,144 @@
+/**
+ * Particle System Base
+ * Handles particle creation, depth layers, and lifecycle management
+ */
+
+/**
+ * Create a base particle with depth layering
+ * @param {Object} config - Configuration for particle creation
+ * @param {number} canvasWidth - Canvas width for positioning
+ * @param {number} canvasHeight - Canvas height for positioning
+ * @returns {Object} Particle object
+ */
+export function createParticle(config, canvasWidth, canvasHeight) {
+  // Determine depth layer (front, middle, back)
+  const depth = Math.random();
+  let size, speed, opacity, windSpeed;
+
+  if (depth < 0.33) {
+    // Front layer - larger, faster, more opaque
+    size = config.sizeRange[0] + Math.random() * (config.sizeRange[1] - config.sizeRange[0]) * 1.5;
+    speed = config.speedRange[0] + Math.random() * (config.speedRange[1] - config.speedRange[0]) * 1.3;
+    opacity = 0.8 + Math.random() * 0.2;
+    windSpeed = 0.01 + Math.random() * 0.02;
+  } else if (depth < 0.66) {
+    // Middle layer
+    size = config.sizeRange[0] + Math.random() * (config.sizeRange[1] - config.sizeRange[0]);
+    speed = config.speedRange[0] + Math.random() * (config.speedRange[1] - config.speedRange[0]);
+    opacity = 0.5 + Math.random() * 0.2;
+    windSpeed = 0.02 + Math.random() * 0.03;
+  } else {
+    // Back layer - smaller, slower, less opaque
+    size = config.sizeRange[0] + Math.random() * (config.sizeRange[1] - config.sizeRange[0]) * 0.7;
+    speed = config.speedRange[0] + Math.random() * (config.speedRange[1] - config.speedRange[0]) * 0.7;
+    opacity = 0.3 + Math.random() * 0.2;
+    windSpeed = 0.03 + Math.random() * 0.04;
+  }
+
+  return {
+    x: Math.random() * canvasWidth,
+    y: Math.random() * canvasHeight - canvasHeight, // Start above viewport
+    size: size,
+    speed: speed,
+    opacity: opacity,
+    windOffset: Math.random() * Math.PI * 2,
+    windSpeed: windSpeed,
+    rotation: Math.random() * Math.PI * 2,
+    rotationSpeed: (Math.random() - 0.5) * 0.02,
+    depth: depth
+  };
+}
+
+/**
+ * Create a static decoration (tree, house, etc.)
+ * @param {string} type - Type of decoration
+ * @param {number} canvasWidth - Canvas width for positioning
+ * @param {number} canvasHeight - Canvas height for positioning
+ * @param {Object} options - Additional options
+ * @returns {Object} Static particle object
+ */
+export function createStaticDecoration(type, canvasWidth, canvasHeight, options = {}) {
+  return {
+    type: type,
+    x: options.x !== undefined ? options.x : Math.random() * canvasWidth,
+    y: options.y !== undefined ? options.y : Math.random() * canvasHeight,
+    vx: 0,
+    vy: 0,
+    size: options.size || (20 + Math.random() * 15),
+    opacity: options.opacity || (0.6 + Math.random() * 0.3),
+    rotation: options.rotation || 0,
+    rotationSpeed: 0,
+    active: true,
+    static: true,
+    ...options
+  };
+}
+
+/**
+ * Create a moving special particle (sleigh, bird, etc.)
+ * @param {string} type - Type of special particle
+ * @param {number} canvasWidth - Canvas width for positioning
+ * @param {number} canvasHeight - Canvas height for positioning
+ * @param {Object} options - Movement and appearance options
+ * @returns {Object} Moving particle object
+ */
+export function createMovingParticle(type, canvasWidth, canvasHeight, options = {}) {
+  const startX = options.startX !== undefined ? options.startX : -100;
+  const startY = options.startY !== undefined ? options.startY : canvasHeight * 0.3;
+
+  return {
+    type: type,
+    x: startX,
+    y: startY,
+    vx: options.vx || 1.5,
+    vy: options.vy || 0,
+    size: options.size || 40,
+    opacity: options.opacity || 1,
+    rotation: options.rotation || 0,
+    rotationSpeed: options.rotationSpeed || 0,
+    active: true,
+    static: false,
+    // Sine wave motion
+    waveAmplitude: options.waveAmplitude || 0,
+    waveFrequency: options.waveFrequency || 0,
+    waveOffset: options.waveOffset || 0,
+    ...options
+  };
+}
+
+/**
+ * Recycle particle to top/side of canvas
+ * @param {Object} particle - Particle to recycle
+ * @param {number} canvasWidth - Canvas width
+ * @param {number} canvasHeight - Canvas height
+ */
+export function recycleParticle(particle, canvasWidth, canvasHeight) {
+  if (particle.y > canvasHeight + 10) {
+    particle.y = -10;
+    particle.x = Math.random() * canvasWidth;
+  }
+
+  // Wrap horizontally
+  if (particle.x < -10) {
+    particle.x = canvasWidth + 10;
+  } else if (particle.x > canvasWidth + 10) {
+    particle.x = -10;
+  }
+}
+
+/**
+ * Check if particle is off-screen and should be removed
+ * @param {Object} particle - Particle to check
+ * @param {number} canvasWidth - Canvas width
+ * @param {number} canvasHeight - Canvas height
+ * @param {number} buffer - Extra buffer space (default 100)
+ * @returns {boolean} True if particle is off-screen
+ */
+export function isOffScreen(particle, canvasWidth, canvasHeight, buffer = 100) {
+  return (
+    particle.x < -buffer ||
+    particle.x > canvasWidth + buffer ||
+    particle.y < -buffer ||
+    particle.y > canvasHeight + buffer
+  );
+}

package/plugins/domma-effects/public/celebrations/core/physics.js

@@ -0,0 +1,166 @@
+/**
+ * Physics Utilities
+ * Handles wind, gravity, movement, and physics simulation
+ */
+
+export class PhysicsEngine {
+  constructor(options = {}) {
+    this.windGust = 0; // Current wind strength
+    this.windGustTarget = 0; // Target wind strength
+    this.lastGustTime = 0;
+    this.gustInterval = options.gustInterval || [5000, 15000]; // Min/max ms between gusts
+    this.gustStrength = options.gustStrength || [-2, 2]; // Min/max wind force
+  }
+
+  /**
+   * Update wind physics
+   * @param {number} currentTime - Current timestamp
+   */
+  updateWind(currentTime) {
+    // Generate new wind gust periodically
+    const [minInterval, maxInterval] = this.gustInterval;
+    if (currentTime - this.lastGustTime > minInterval + Math.random() * (maxInterval - minInterval)) {
+      const [minStrength, maxStrength] = this.gustStrength;
+      this.windGustTarget = minStrength + Math.random() * (maxStrength - minStrength);
+      this.lastGustTime = currentTime;
+    }
+
+    // Smooth wind transition
+    this.windGust += (this.windGustTarget - this.windGust) * 0.02;
+  }
+
+  /**
+   * Get current wind force
+   * @returns {number} Current wind force
+   */
+  getWindForce() {
+    return this.windGust;
+  }
+
+  /**
+   * Reset wind to calm
+   */
+  resetWind() {
+    this.windGust = 0;
+    this.windGustTarget = 0;
+  }
+}
+
+/**
+ * Update particle position with gravity and wind
+ * @param {Object} particle - Particle to update
+ * @param {number} deltaTime - Time since last frame
+ * @param {number} windForce - Current wind force
+ */
+export function updateParticlePhysics(particle, deltaTime, windForce = 0) {
+  const normalizedDelta = deltaTime / (1000 / 60); // Normalize to 60fps
+
+  // Apply gravity (downward movement) - support both speed and vy
+  const verticalSpeed = particle.vy || particle.speed || 0;
+  particle.y += verticalSpeed * normalizedDelta;
+
+  // Apply horizontal velocity if present
+  if (particle.vx) {
+    particle.x += particle.vx * normalizedDelta;
+  }
+
+  // Apply wind drift + wind gust
+  if (particle.windOffset !== undefined && particle.windSpeed !== undefined) {
+    particle.windOffset += particle.windSpeed * normalizedDelta;
+    const baseWind = Math.sin(particle.windOffset) * 0.5;
+    particle.x += (baseWind + windForce) * normalizedDelta;
+  }
+
+  // Apply rotation
+  if (particle.rotationSpeed) {
+    particle.rotation += particle.rotationSpeed * normalizedDelta;
+  }
+}
+
+/**
+ * Update moving particle with sine wave motion
+ * @param {Object} particle - Moving particle to update
+ * @param {number} deltaTime - Time since last frame
+ * @param {number} currentTime - Current timestamp
+ */
+export function updateMovingParticle(particle, deltaTime, currentTime) {
+  const normalizedDelta = deltaTime / (1000 / 60);
+
+  // Update horizontal position
+  particle.x += particle.vx * normalizedDelta;
+
+  // Apply sine wave vertical motion if configured
+  if (particle.waveAmplitude && particle.waveFrequency) {
+    const waveProgress = (currentTime * particle.waveFrequency) / 1000;
+    particle.y = particle.baseY + Math.sin(waveProgress + particle.waveOffset) * particle.waveAmplitude;
+  } else {
+    particle.y += particle.vy * normalizedDelta;
+  }
+
+  // Apply rotation
+  if (particle.rotationSpeed) {
+    particle.rotation += particle.rotationSpeed * normalizedDelta;
+  }
+}
+
+/**
+ * Apply gravity to particle
+ * @param {Object} particle - Particle to affect
+ * @param {number} deltaTime - Time since last frame
+ * @param {number} gravity - Gravity force (default 0.5)
+ */
+export function applyGravity(particle, deltaTime, gravity = 0.5) {
+  const normalizedDelta = deltaTime / (1000 / 60);
+  particle.vy += gravity * normalizedDelta;
+  particle.y += particle.vy * normalizedDelta;
+}
+
+/**
+ * Apply bounce physics when particle hits ground
+ * @param {Object} particle - Particle to bounce
+ * @param {number} groundY - Y position of ground
+ * @param {number} restitution - Bounce factor (0-1, default 0.6)
+ */
+export function applyBounce(particle, groundY, restitution = 0.6) {
+  if (particle.y >= groundY && particle.vy > 0) {
+    particle.y = groundY;
+    particle.vy *= -restitution;
+
+    // Stop bouncing if velocity is too low
+    if (Math.abs(particle.vy) < 0.5) {
+      particle.vy = 0;
+    }
+  }
+}
+
+/**
+ * Calculate normalized delta time for consistent animation
+ * @param {number} deltaTime - Time since last frame in ms
+ * @param {number} targetFPS - Target framerate (default 60)
+ * @returns {number} Normalized delta
+ */
+export function normalizeDelta(deltaTime, targetFPS = 60) {
+  return deltaTime / (1000 / targetFPS);
+}
+
+/**
+ * Interpolate between two values
+ * @param {number} start - Start value
+ * @param {number} end - End value
+ * @param {number} t - Interpolation factor (0-1)
+ * @returns {number} Interpolated value
+ */
+export function lerp(start, end, t) {
+  return start + (end - start) * t;
+}
+
+/**
+ * Clamp value between min and max
+ * @param {number} value - Value to clamp
+ * @param {number} min - Minimum value
+ * @param {number} max - Maximum value
+ * @returns {number} Clamped value
+ */
+export function clamp(value, min, max) {
+  return Math.min(Math.max(value, min), max);
+}