320 lines
11 KiB
JavaScript
320 lines
11 KiB
JavaScript
import { BaseModule } from './base-module.js';
|
|
import { moduleRegistry } from './module-registry.js';
|
|
import { ModuleEvent } from './base-module.js';
|
|
|
|
class UIEffects extends BaseModule {
|
|
constructor() {
|
|
super('ui-effects');
|
|
|
|
// No external dependencies
|
|
this.dependencies = [];
|
|
|
|
// Effects state
|
|
this.activeEffects = new Map();
|
|
this.ambientEffectsActive = false;
|
|
|
|
// Effects configuration
|
|
this.effectsConfig = {
|
|
candleFlicker: {
|
|
intensity: 0.5,
|
|
speed: 0.8
|
|
},
|
|
textShadow: {
|
|
enabled: true,
|
|
color: 'rgba(0, 0, 0, 0.5)'
|
|
},
|
|
backgroundEffects: {
|
|
enabled: true
|
|
}
|
|
};
|
|
|
|
// Bind methods that use 'this' internally or are used as callbacks/event handlers
|
|
this.initialize = this.initialize.bind(this); // Bind initialize as it calls dispatchEvent
|
|
this.updateCandleEffect = this.updateCandleEffect.bind(this); // Used with requestAnimationFrame
|
|
this.setupEffectElements = this.setupEffectElements.bind(this);
|
|
this.createEffectsOverlay = this.createEffectsOverlay.bind(this);
|
|
this.createCandleEffect = this.createCandleEffect.bind(this);
|
|
this.createLightingElement = this.createLightingElement.bind(this);
|
|
this.setupAmbientEffects = this.setupAmbientEffects.bind(this);
|
|
this.setupCandleFlickerEffect = this.setupCandleFlickerEffect.bind(this);
|
|
this.startAmbientEffects = this.startAmbientEffects.bind(this);
|
|
this.stopAmbientEffects = this.stopAmbientEffects.bind(this);
|
|
this.applyEffect = this.applyEffect.bind(this);
|
|
this.applyShakeEffect = this.applyShakeEffect.bind(this);
|
|
this.applyFlashEffect = this.applyFlashEffect.bind(this);
|
|
this.applyTextEmphasis = this.applyTextEmphasis.bind(this);
|
|
this.processCommand = this.processCommand.bind(this);
|
|
|
|
// Store a bound version of dispatchEvent for use in methods
|
|
this._dispatchModuleEvent = (name, detail) => {
|
|
document.dispatchEvent(new CustomEvent(name, {
|
|
detail: { moduleId: this.id, ...detail },
|
|
bubbles: true
|
|
}));
|
|
};
|
|
|
|
console.log('UIEffects: Constructor initialized');
|
|
}
|
|
|
|
async initialize() {
|
|
this.reportProgress(0, 'Initializing UI Effects');
|
|
|
|
try {
|
|
this.reportProgress(30, 'Setting up effect elements');
|
|
|
|
// Create or get effect elements
|
|
this.setupEffectElements();
|
|
|
|
this.reportProgress(60, 'Preparing ambient effects');
|
|
|
|
// Set up ambient effect animations
|
|
this.setupAmbientEffects();
|
|
|
|
this.reportProgress(100, 'UI Effects ready');
|
|
|
|
// Use the DOM event API directly instead of this.dispatchEvent
|
|
this._dispatchModuleEvent('ui:effects:ready', {});
|
|
|
|
return true;
|
|
} catch (error) {
|
|
console.error('Error initializing UI Effects:', error);
|
|
this.changeState('ERROR');
|
|
return false;
|
|
}
|
|
}
|
|
|
|
setupEffectElements() {
|
|
console.log('UIEffects: Setting up effect elements');
|
|
// Create overlay for effects if it doesn't exist
|
|
this.effectsOverlay = document.getElementById('effects-overlay') || this.createEffectsOverlay();
|
|
|
|
// Create candle effect element
|
|
this.candleEffectElement = document.getElementById('candle-effect') || this.createCandleEffect();
|
|
|
|
// Ensure lighting element exists
|
|
this.lightingElement = document.getElementById('lighting') || this.createLightingElement();
|
|
}
|
|
|
|
createEffectsOverlay() {
|
|
const overlay = document.createElement('div');
|
|
overlay.id = 'effects-overlay';
|
|
overlay.className = 'effects-overlay';
|
|
document.body.appendChild(overlay);
|
|
return overlay;
|
|
}
|
|
|
|
createCandleEffect() {
|
|
const candleEffect = document.createElement('div');
|
|
candleEffect.id = 'candle-effect';
|
|
candleEffect.className = 'candle-effect';
|
|
if (this.effectsOverlay) {
|
|
this.effectsOverlay.appendChild(candleEffect);
|
|
} else {
|
|
document.body.appendChild(candleEffect);
|
|
}
|
|
return candleEffect;
|
|
}
|
|
|
|
createLightingElement() {
|
|
const lighting = document.createElement('div');
|
|
lighting.id = 'lighting';
|
|
document.body.appendChild(lighting);
|
|
return lighting;
|
|
}
|
|
|
|
setupAmbientEffects() {
|
|
// Initialize candle flicker effect
|
|
if (this.candleEffectElement && this.effectsConfig.candleFlicker.enabled !== false) {
|
|
this.setupCandleFlickerEffect();
|
|
}
|
|
}
|
|
|
|
setupCandleFlickerEffect() {
|
|
// Store the animation frame ID for later cancellation
|
|
this.candleAnimationId = null;
|
|
}
|
|
|
|
updateCandleEffect() {
|
|
if (!this.candleEffectElement || !this.ambientEffectsActive) return;
|
|
|
|
const { intensity, speed } = this.effectsConfig.candleFlicker;
|
|
|
|
// Create subtle random flickering effect
|
|
const flickerAmount = Math.random() * intensity;
|
|
const opacity = 0.2 + flickerAmount * 0.2;
|
|
|
|
this.candleEffectElement.style.opacity = opacity;
|
|
|
|
// Schedule next update
|
|
this.candleAnimationId = requestAnimationFrame(this.updateCandleEffect);
|
|
}
|
|
|
|
// Public methods
|
|
|
|
startAmbientEffects() {
|
|
if (this.ambientEffectsActive) return;
|
|
|
|
this.ambientEffectsActive = true;
|
|
|
|
// Start candle flicker
|
|
if (this.candleEffectElement) {
|
|
this.updateCandleEffect();
|
|
}
|
|
|
|
// Apply lighting animation
|
|
if (this.lightingElement) {
|
|
this.lightingElement.style.animation = 'gradient-animation-shrink 2s infinite alternate';
|
|
}
|
|
}
|
|
|
|
stopAmbientEffects() {
|
|
this.ambientEffectsActive = false;
|
|
|
|
// Stop candle flicker
|
|
if (this.candleAnimationId) {
|
|
cancelAnimationFrame(this.candleAnimationId);
|
|
this.candleAnimationId = null;
|
|
}
|
|
|
|
// Stop lighting animation
|
|
if (this.lightingElement) {
|
|
this.lightingElement.style.animation = '';
|
|
}
|
|
}
|
|
|
|
applyEffect(effectName, options = {}) {
|
|
switch (effectName) {
|
|
case 'shake':
|
|
return this.applyShakeEffect(options);
|
|
case 'flash':
|
|
return this.applyFlashEffect(options);
|
|
case 'emphasis':
|
|
return this.applyTextEmphasis(options.text, options);
|
|
default:
|
|
console.warn(`Unknown effect: ${effectName}`);
|
|
return null;
|
|
}
|
|
}
|
|
|
|
applyShakeEffect(options = {}) {
|
|
const target = options.target || document.getElementById('book');
|
|
if (!target) return null;
|
|
|
|
const intensity = options.intensity || 'medium';
|
|
const duration = options.duration || 500;
|
|
|
|
// Store original styles
|
|
const originalTransition = target.style.transition;
|
|
const originalTransform = target.style.transform;
|
|
|
|
// Apply the shake animation
|
|
target.style.transition = `transform ${duration}ms ease`;
|
|
target.style.transform = 'translate(0, 0)';
|
|
target.style.animation = `shake ${duration}ms 1`;
|
|
|
|
// Return to normal after animation
|
|
const effectId = setTimeout(() => {
|
|
target.style.transition = originalTransition;
|
|
target.style.transform = originalTransform;
|
|
target.style.animation = '';
|
|
this.activeEffects.delete(effectId);
|
|
}, duration);
|
|
|
|
this.activeEffects.set(effectId, { name: 'shake', target });
|
|
return effectId;
|
|
}
|
|
|
|
applyFlashEffect(options = {}) {
|
|
const color = options.color || 'white';
|
|
const duration = options.duration || 300;
|
|
|
|
// Create flash overlay if not exists
|
|
let flashOverlay = document.getElementById('flash-overlay');
|
|
if (!flashOverlay) {
|
|
flashOverlay = document.createElement('div');
|
|
flashOverlay.id = 'flash-overlay';
|
|
flashOverlay.style.position = 'fixed';
|
|
flashOverlay.style.top = '0';
|
|
flashOverlay.style.left = '0';
|
|
flashOverlay.style.width = '100%';
|
|
flashOverlay.style.height = '100%';
|
|
flashOverlay.style.pointerEvents = 'none';
|
|
flashOverlay.style.zIndex = '9999';
|
|
flashOverlay.style.opacity = '0';
|
|
flashOverlay.style.transition = `opacity ${duration / 2}ms ease-in-out`;
|
|
document.body.appendChild(flashOverlay);
|
|
}
|
|
|
|
// Set color and make visible
|
|
flashOverlay.style.backgroundColor = color;
|
|
|
|
// Start animation
|
|
setTimeout(() => { flashOverlay.style.opacity = '0.8'; }, 10);
|
|
|
|
const effectId = setTimeout(() => {
|
|
flashOverlay.style.opacity = '0';
|
|
this.activeEffects.delete(effectId);
|
|
|
|
// Remove element after fade out
|
|
setTimeout(() => {
|
|
if (flashOverlay.parentNode) {
|
|
flashOverlay.parentNode.removeChild(flashOverlay);
|
|
}
|
|
}, duration / 2);
|
|
}, duration / 2);
|
|
|
|
this.activeEffects.set(effectId, { name: 'flash' });
|
|
return effectId;
|
|
}
|
|
|
|
applyTextEmphasis(text, options = {}) {
|
|
// Use existing display handler to show emphasized text
|
|
const displayHandler = moduleRegistry.getModule('ui-display-handler');
|
|
if (!displayHandler) return null;
|
|
|
|
const style = {
|
|
fontWeight: 'bold',
|
|
color: options.color || '#990000',
|
|
fontSize: options.size || '1.2em'
|
|
};
|
|
|
|
return displayHandler.displayText(text, { style, speak: true });
|
|
}
|
|
|
|
processCommand(command) {
|
|
switch (command.action) {
|
|
case 'apply':
|
|
return this.applyEffect(command.effect, command.options);
|
|
case 'cancel':
|
|
const effectId = command.effectId;
|
|
if (this.activeEffects.has(effectId)) {
|
|
clearTimeout(effectId);
|
|
this.activeEffects.delete(effectId);
|
|
}
|
|
break;
|
|
case 'ambient':
|
|
if (command.state === 'start') {
|
|
this.startAmbientEffects();
|
|
} else if (command.state === 'stop') {
|
|
this.stopAmbientEffects();
|
|
}
|
|
break;
|
|
default:
|
|
console.warn(`Unknown effect command: ${command.action}`);
|
|
}
|
|
}
|
|
}
|
|
|
|
// Create the singleton instance
|
|
const uiEffects = new UIEffects();
|
|
|
|
// Register with the module registry
|
|
moduleRegistry.register(uiEffects);
|
|
|
|
// Export the module
|
|
export { uiEffects as UIEffects };
|
|
|
|
// Keep a reference in window for loader system
|
|
console.log('UIEffects: Registering with window');
|
|
window.UIEffects = uiEffects;
|