ai-control-center 1.15.2

package/lib/web/public/office/js/effects.js

@@ -0,0 +1,632 @@
+/**
+ * Effects System — particles, bubbles, overlays for character states
+ * All rendered in pixel art style to match the retro aesthetic
+ */
+
+import { renderSprite, renderPixelText, PIXEL_SIZE } from './sprite-renderer.js';
+import { BUG_SPRITE, MAGNIFIER_SPRITE, DOCUMENT_SPRITE, COFFEE_SPRITE } from './pixel-sprites.js';
+
+// ============================================================
+//  Particle base class
+// ============================================================
+class Particle {
+  constructor(x, y, life = 1) {
+    this.x = x;
+    this.y = y;
+    this.life = life;
+    this.maxLife = life;
+    this.dead = false;
+  }
+  update(dt) {
+    this.life -= dt;
+    if (this.life <= 0) this.dead = true;
+  }
+  render(ctx) {}
+}
+
+// ============================================================
+//  Z Particle — floating Z for sleeping characters
+// ============================================================
+class ZParticle extends Particle {
+  constructor(x, y) {
+    super(x, y, 2.0);
+    this.startX = x;
+    this.vx = (Math.random() - 0.5) * 8;
+    this.vy = -15;
+    this.size = 1 + Math.random() * 1.5;
+  }
+  update(dt) {
+    super.update(dt);
+    this.x += this.vx * dt;
+    this.y += this.vy * dt;
+    this.vy *= 0.98;
+  }
+  render(ctx) {
+    const alpha = Math.min(1, this.life / 0.5);
+    ctx.save();
+    ctx.globalAlpha = alpha;
+    ctx.fillStyle = '#a0c0ff';
+    const s = this.size * PIXEL_SIZE;
+    // Draw a pixelated Z
+    ctx.fillRect(this.x, this.y, s * 3, s);
+    ctx.fillRect(this.x + s * 2, this.y + s, s, s);
+    ctx.fillRect(this.x + s, this.y + s * 2, s, s);
+    ctx.fillRect(this.x, this.y + s * 3, s * 3, s);
+    ctx.restore();
+  }
+}
+
+// ============================================================
+//  Confetti Particle — celebrating
+// ============================================================
+const CONFETTI_COLORS = ['#ff4060', '#40c0ff', '#ffdd20', '#40ff80', '#ff80c0', '#ffa020'];
+
+class ConfettiParticle extends Particle {
+  constructor(x, y) {
+    super(x, y, 1.5 + Math.random());
+    this.vx = (Math.random() - 0.5) * 60;
+    this.vy = -40 - Math.random() * 30;
+    this.gravity = 80;
+    this.color = CONFETTI_COLORS[Math.floor(Math.random() * CONFETTI_COLORS.length)];
+    this.size = PIXEL_SIZE;
+    this.rotation = Math.random() * Math.PI * 2;
+    this.rotSpeed = (Math.random() - 0.5) * 8;
+  }
+  update(dt) {
+    super.update(dt);
+    this.x += this.vx * dt;
+    this.vy += this.gravity * dt;
+    this.y += this.vy * dt;
+    this.rotation += this.rotSpeed * dt;
+  }
+  render(ctx) {
+    const alpha = Math.min(1, this.life / 0.3);
+    ctx.save();
+    ctx.globalAlpha = alpha;
+    ctx.fillStyle = this.color;
+    ctx.translate(this.x, this.y);
+    ctx.rotate(this.rotation);
+    ctx.fillRect(-this.size, -this.size / 2, this.size * 2, this.size);
+    ctx.restore();
+  }
+}
+
+// ============================================================
+//  Steam Particle — frustrated / rate limited
+// ============================================================
+class SteamParticle extends Particle {
+  constructor(x, y) {
+    super(x, y, 1.2);
+    this.vx = (Math.random() - 0.5) * 10;
+    this.vy = -20 - Math.random() * 10;
+    this.size = PIXEL_SIZE;
+  }
+  update(dt) {
+    super.update(dt);
+    this.x += this.vx * dt;
+    this.y += this.vy * dt;
+    this.size += dt * 2;
+  }
+  render(ctx) {
+    const alpha = (this.life / this.maxLife) * 0.6;
+    ctx.save();
+    ctx.globalAlpha = alpha;
+    ctx.fillStyle = '#e04040';
+    ctx.fillRect(this.x - this.size, this.y - this.size, this.size * 2, this.size * 2);
+    ctx.restore();
+  }
+}
+
+// ============================================================
+//  Spark Particle — working/typing sparks
+// ============================================================
+class SparkParticle extends Particle {
+  constructor(x, y) {
+    super(x, y, 0.4 + Math.random() * 0.3);
+    this.vx = (Math.random() - 0.5) * 30;
+    this.vy = -10 - Math.random() * 20;
+    this.color = Math.random() > 0.5 ? '#80ff80' : '#60d060';
+  }
+  update(dt) {
+    super.update(dt);
+    this.x += this.vx * dt;
+    this.y += this.vy * dt;
+  }
+  render(ctx) {
+    ctx.fillStyle = this.color;
+    ctx.fillRect(this.x, this.y, PIXEL_SIZE, PIXEL_SIZE);
+  }
+}
+
+// ============================================================
+//  Firework Burst Particle — deploy celebration
+// ============================================================
+const FW_COLORS = ['#ff4060','#ff8020','#ffdd20','#40ff80','#40c0ff','#c060ff','#ff60c0','#ffffff'];
+
+class FireworkParticle extends Particle {
+  constructor(x, y) {
+    super(x, y, 0.8 + Math.random() * 0.8);
+    const angle = Math.random() * Math.PI * 2;
+    const speed = 40 + Math.random() * 80;
+    this.vx = Math.cos(angle) * speed;
+    this.vy = Math.sin(angle) * speed - 20;
+    this.gravity = 60;
+    this.color = FW_COLORS[Math.floor(Math.random() * FW_COLORS.length)];
+    this.trail = [];
+  }
+  update(dt) {
+    this.trail.push({ x: this.x, y: this.y, a: this.life / this.maxLife });
+    if (this.trail.length > 5) this.trail.shift();
+    super.update(dt);
+    this.x += this.vx * dt;
+    this.vy += this.gravity * dt;
+    this.y += this.vy * dt;
+  }
+  render(ctx) {
+    const alpha = Math.max(0, this.life / this.maxLife);
+    for (let i = 0; i < this.trail.length; i++) {
+      const t = this.trail[i];
+      ctx.save();
+      ctx.globalAlpha = t.a * 0.4;
+      ctx.fillStyle = this.color;
+      ctx.fillRect(t.x - 1, t.y - 1, 2, 2);
+      ctx.restore();
+    }
+    ctx.save();
+    ctx.globalAlpha = alpha;
+    ctx.fillStyle = this.color;
+    ctx.fillRect(this.x - 2, this.y - 2, 4, 4);
+    ctx.restore();
+  }
+}
+
+// ============================================================
+//  Effects Manager
+// ============================================================
+export class EffectsManager {
+  constructor() {
+    this.particles = [];
+    this.timers = {};
+    // Deploy banner
+    this.bannerTimer = 0;
+    this.bannerText = '';
+    this.bannerSub = '';
+  }
+
+  update(dt) {
+    // Update all particles
+    for (let i = this.particles.length - 1; i >= 0; i--) {
+      this.particles[i].update(dt);
+      if (this.particles[i].dead) {
+        this.particles.splice(i, 1);
+      }
+    }
+    // Update timers
+    for (const key in this.timers) {
+      this.timers[key] -= dt;
+    }
+    // Banner countdown
+    if (this.bannerTimer > 0) this.bannerTimer -= dt;
+  }
+
+  render(ctx) {
+    for (const p of this.particles) {
+      p.render(ctx);
+    }
+    // Draw deploy banner overlay
+    if (this.bannerTimer > 0) {
+      const alpha = Math.min(1, this.bannerTimer / 0.5);
+      const cw = ctx.canvas.width;
+      ctx.save();
+      ctx.globalAlpha = alpha * 0.92;
+      ctx.fillStyle = '#1a2a1a';
+      ctx.fillRect(cw / 2 - 160, 28, 320, 44);
+      ctx.strokeStyle = '#40d060';
+      ctx.lineWidth = 2;
+      ctx.strokeRect(cw / 2 - 160, 28, 320, 44);
+      ctx.globalAlpha = alpha;
+      ctx.fillStyle = '#40ff70';
+      ctx.font = 'bold 13px "Press Start 2P", monospace';
+      ctx.textAlign = 'center';
+      ctx.fillText('🎉 SHIPPED!', cw / 2, 50);
+      ctx.fillStyle = '#a0e0b0';
+      ctx.font = '8px "Press Start 2P", monospace';
+      ctx.fillText(this.bannerSub, cw / 2, 65);
+      ctx.restore();
+    }
+  }
+
+  /** Launch firework bursts at canvas position (cx, cy) */
+  launchFireworks(cx, cy, count = 20) {
+    for (let wave = 0; wave < 3; wave++) {
+      const delay = wave * 0.35;
+      // Use timers trick — spawn burst after delay
+      const key = `fw_wave_${wave}_${Date.now()}`;
+      this.timers[key] = -delay; // negative = fire immediately when <= 0 next frame
+    }
+    // Spawn immediately for wave 0, then schedule waves
+    this._spawnBurst(cx, cy, count);
+    this._spawnBurst(cx + (Math.random() - 0.5) * 80, cy - 20, count);
+    setTimeout(() => this._spawnBurst(cx + (Math.random() - 0.5) * 60, cy + 10, count), 350);
+    setTimeout(() => this._spawnBurst(cx + (Math.random() - 0.5) * 100, cy - 40, count), 700);
+  }
+
+  _spawnBurst(cx, cy, count) {
+    for (let i = 0; i < count; i++) {
+      this.particles.push(new FireworkParticle(cx, cy));
+    }
+    for (let i = 0; i < 6; i++) {
+      this.particles.push(new ConfettiParticle(cx + (Math.random() - 0.5) * 40, cy));
+    }
+  }
+
+  /** Show a deploy success banner for duration seconds */
+  showBanner(text, sub = '', duration = 4) {
+    this.bannerText = text;
+    this.bannerSub = sub;
+    this.bannerTimer = duration;
+  }
+
+  // --- Spawn methods ---
+
+  spawnSleepZ(x, y) {
+    const key = `z_${x}_${y}`;
+    if (this.timers[key] > 0) return;
+    this.timers[key] = 0.8;
+    this.particles.push(new ZParticle(x, y));
+  }
+
+  spawnConfetti(x, y, count = 12) {
+    const key = `conf_${x}_${y}`;
+    if (this.timers[key] > 0) return;
+    this.timers[key] = 0.3;
+    for (let i = 0; i < count; i++) {
+      this.particles.push(new ConfettiParticle(x + (Math.random() - 0.5) * 10, y));
+    }
+  }
+
+  spawnSteam(x, y) {
+    const key = `steam_${x}_${y}`;
+    if (this.timers[key] > 0) return;
+    this.timers[key] = 0.4;
+    this.particles.push(new SteamParticle(x + (Math.random() - 0.5) * 6, y));
+    this.particles.push(new SteamParticle(x + (Math.random() - 0.5) * 6, y));
+  }
+
+  spawnTypingSparks(x, y) {
+    const key = `spark_${x}_${y}`;
+    if (this.timers[key] > 0) return;
+    this.timers[key] = 0.15;
+    this.particles.push(new SparkParticle(x + (Math.random() - 0.5) * 16, y));
+  }
+
+  /**
+   * Render state-specific overlays on a character
+   * Called per-character after sprite rendering
+   */
+  renderStateOverlay(ctx, state, x, y, stateTime, isAtDesk = true) {
+    const pw = PIXEL_SIZE;
+
+    switch (state) {
+      case 'sleeping':
+        this.spawnSleepZ(x + 8, y - 36);
+        break;
+
+      case 'celebrating':
+        this.spawnConfetti(x, y - 40);
+        break;
+
+      case 'frustrated':
+      case 'rate_limited':
+        this.spawnSteam(x, y - 38);
+        // Exclamation mark
+        ctx.fillStyle = '#ff4040';
+        ctx.fillRect(x - pw, y - 42, pw * 2, pw * 6);
+        ctx.fillRect(x - pw, y - 34, pw * 2, pw * 2);
+        break;
+
+      case 'working':
+      case 'designing':
+        // Only show work effects when seated at desk, not while walking
+        if (isAtDesk) {
+          this.spawnTypingSparks(x, y - 8);
+          this.renderLightbulb(ctx, x, y - 56, stateTime, 1.0);
+        }
+        break;
+
+      case 'thinking':
+        // Thought bubble with "..."
+        this._drawThoughtBubble(ctx, x, y - 42);
+        break;
+
+      case 'waiting_input':
+        // Question mark bubble
+        this._drawQuestionBubble(ctx, x, y - 44);
+        break;
+
+      case 'reviewing':
+        if (isAtDesk) {
+          // Magnifying glass floating
+          renderSprite(ctx, MAGNIFIER_SPRITE, x + 16, y - 12, { scale: 0.8 });
+          this.renderLightbulb(ctx, x, y - 56, stateTime, 1.0);
+        }
+        break;
+
+      case 'fighting_bug': {
+        if (isAtDesk) {
+          this._renderBugBattle(ctx, x, y, stateTime);
+        }
+        break;
+      }
+
+      case 'handing_off': {
+        // Document floating to the right
+        const docX = x + 14 + Math.sin(stateTime * 2) * 4;
+        renderSprite(ctx, DOCUMENT_SPRITE, docX, y - 14);
+        break;
+      }
+
+      case 'coffee_break':
+        renderSprite(ctx, COFFEE_SPRITE, x + 14, y - 10);
+        break;
+
+      case 'deploying':
+        // Package above head
+        ctx.fillStyle = '#c8a050';
+        ctx.fillRect(x - 6, y - 42, 12, 10);
+        ctx.strokeStyle = '#a08030';
+        ctx.strokeRect(x - 6, y - 42, 12, 10);
+        // Cross tape
+        ctx.fillStyle = '#a08030';
+        ctx.fillRect(x - 1, y - 42, 2, 10);
+        ctx.fillRect(x - 6, y - 38, 12, 2);
+        break;
+    }
+  }
+
+  /**
+   * Render bug battle animation — coder holds keyboard to fight green virus bugs
+   */
+  _renderBugBattle(ctx, x, y, stateTime) {
+    const pw = PIXEL_SIZE;
+
+    // ── Green virus bugs (2-3 floating around) ──
+    for (let i = 0; i < 3; i++) {
+      const phase = i * (Math.PI * 2 / 3);
+      const bx = x + 20 + Math.sin(stateTime * 3 + phase) * 12;
+      const by = y - 8 + Math.cos(stateTime * 2.5 + phase) * 8;
+      // Hit flash — virus blinks white when keyboard swings
+      const isHit = Math.sin(stateTime * 6 + i) > 0.8;
+      this._drawVirusBug(ctx, bx, by, stateTime, isHit);
+    }
+
+    // ── Keyboard weapon (held by coder, swings at bugs) ──
+    const swingAngle = Math.sin(stateTime * 6) * 0.5;
+    ctx.save();
+    ctx.translate(x + 6, y - 6);
+    ctx.rotate(swingAngle);
+    this._drawKeyboard(ctx, 0, 0);
+    ctx.restore();
+
+    // ── Impact sparks on hit frames ──
+    if (Math.sin(stateTime * 6) > 0.7) {
+      const sparkX = x + 20 + Math.sin(stateTime * 3) * 10;
+      const sparkY = y - 8;
+      ctx.fillStyle = '#ffff40';
+      // Star burst
+      for (let i = 0; i < 4; i++) {
+        const angle = (stateTime * 10) + i * (Math.PI / 2);
+        const len = 3 + Math.random() * 3;
+        ctx.fillRect(
+          sparkX + Math.cos(angle) * len,
+          sparkY + Math.sin(angle) * len,
+          pw, pw
+        );
+      }
+    }
+
+    // ── Frantic lightbulb ──
+    this.renderLightbulb(ctx, x, y - 56, stateTime * 2, 1.0);
+
+    // ── Damage numbers floating up ──
+    if (Math.sin(stateTime * 4) > 0.9) {
+      const dmg = Math.floor(Math.random() * 50 + 10);
+      const numY = y - 20 - (stateTime % 1) * 15;
+      ctx.save();
+      ctx.fillStyle = '#ff4040';
+      ctx.font = 'bold 7px "Press Start 2P", monospace';
+      ctx.textAlign = 'center';
+      ctx.globalAlpha = Math.max(0, 1 - (stateTime % 1));
+      ctx.fillText(`-${dmg}`, x + 24, numY);
+      ctx.restore();
+    }
+  }
+
+  /**
+   * Draw a pixel-art green virus bug
+   */
+  _drawVirusBug(ctx, x, y, time, isHit) {
+    const pw = PIXEL_SIZE;
+    ctx.save();
+
+    // Virus body — green circle
+    const bodyColor = isHit ? '#ffffff' : '#40c040';
+    const eyeColor = isHit ? '#ff0000' : '#200020';
+
+    ctx.fillStyle = bodyColor;
+    // Body (5x5 rounded)
+    ctx.fillRect(x - 2, y - 1, 5, 3);
+    ctx.fillRect(x - 1, y - 2, 3, 5);
+
+    // Eyes — angry
+    ctx.fillStyle = eyeColor;
+    ctx.fillRect(x - 1, y - 1, pw, pw);
+    ctx.fillRect(x + 1, y - 1, pw, pw);
+
+    // Spikes — rotating around body
+    ctx.fillStyle = isHit ? '#ffaaaa' : '#20a020';
+    for (let i = 0; i < 6; i++) {
+      const angle = time * 3 + i * (Math.PI / 3);
+      const sx = x + Math.cos(angle) * 5;
+      const sy = y + Math.sin(angle) * 5;
+      ctx.fillRect(sx, sy, pw, pw);
+    }
+
+    ctx.restore();
+  }
+
+  /**
+   * Draw a pixel-art keyboard (weapon)
+   */
+  _drawKeyboard(ctx, x, y) {
+    const pw = PIXEL_SIZE;
+    ctx.save();
+
+    // Keyboard body
+    ctx.fillStyle = '#c0c0c0';
+    ctx.fillRect(x, y, 14, 6);
+
+    // Border
+    ctx.strokeStyle = '#808080';
+    ctx.lineWidth = 0.5;
+    ctx.strokeRect(x, y, 14, 6);
+
+    // Keys (tiny squares)
+    ctx.fillStyle = '#404040';
+    for (let r = 0; r < 2; r++) {
+      for (let c = 0; c < 5; c++) {
+        ctx.fillRect(x + 1 + c * 2.5, y + 1 + r * 2.5, 1.5, 1.5);
+      }
+    }
+
+    ctx.restore();
+  }
+
+  /**
+   * Render a pixel-art lightbulb above a character's head.
+   * Pulses between bright and dim to simulate thinking.
+   * @param {CanvasRenderingContext2D} ctx
+   * @param {number} x - center x of the bulb
+   * @param {number} y - top y of the bulb
+   * @param {number} time - stateTime (used for animation)
+   * @param {number} intensity - 0..1 overall brightness multiplier
+   */
+  renderLightbulb(ctx, x, y, time, intensity = 1.0) {
+    const pw = PIXEL_SIZE;
+    // Pulse factor: oscillates 0..1 at ~2Hz (time * 4 → sin period ~1.57s)
+    const pulse = (Math.sin(time * 4) + 1) / 2; // 0..1
+    const bright = pulse > 0.5;
+
+    const bulbColor = bright ? '#ffe040' : '#806020';
+    const glowColor = '#ffe040';
+
+    ctx.save();
+
+    // --- Glow circle (semi-transparent, only when bright) ---
+    if (bright) {
+      ctx.globalAlpha = 0.15 * intensity;
+      ctx.fillStyle = glowColor;
+      ctx.beginPath();
+      ctx.arc(x, y + 4, 12, 0, Math.PI * 2);
+      ctx.fill();
+    }
+
+    ctx.globalAlpha = intensity;
+
+    // --- Radiating lines (4 directions, only when bright) ---
+    if (bright) {
+      ctx.fillStyle = '#ffe080';
+      const lineLen = pw * 2;
+      // Top
+      ctx.fillRect(x - 0.5, y - 5, 1, -lineLen);
+      // Bottom-left
+      ctx.fillRect(x - 6, y + 4 - 0.5, -lineLen, 1);
+      // Bottom-right
+      ctx.fillRect(x + 6, y + 4 - 0.5, lineLen, 1);
+      // Top-left diagonal
+      ctx.fillRect(x - 5, y - 3, -pw, 1);
+      ctx.fillRect(x - 5, y - 3, 1, -pw);
+      // Top-right diagonal
+      ctx.fillRect(x + 5, y - 3, pw, 1);
+      ctx.fillRect(x + 5, y - 3, 1, -pw);
+    }
+
+    // --- Bulb body (5x6 px, roughly rounded) ---
+    ctx.fillStyle = bulbColor;
+    // Row 0 (top) — 3px wide, centered
+    ctx.fillRect(x - 1.5, y, 3, 1);
+    // Row 1 — 5px wide
+    ctx.fillRect(x - 2.5, y + 1, 5, 1);
+    // Row 2 — 5px wide
+    ctx.fillRect(x - 2.5, y + 2, 5, 1);
+    // Row 3 — 5px wide
+    ctx.fillRect(x - 2.5, y + 3, 5, 1);
+    // Row 4 — 3px wide (taper)
+    ctx.fillRect(x - 1.5, y + 4, 3, 1);
+    // Row 5 — 3px wide (taper)
+    ctx.fillRect(x - 1.5, y + 5, 3, 1);
+
+    // --- Socket/base (3x2 px, gray) ---
+    ctx.fillStyle = '#888888';
+    ctx.fillRect(x - 1.5, y + 6, 3, 1);
+    ctx.fillStyle = '#666666';
+    ctx.fillRect(x - 1.5, y + 7, 3, 1);
+
+    ctx.restore();
+  }
+
+  _drawThoughtBubble(ctx, x, y) {
+    const pw = PIXEL_SIZE;
+    // Bubble
+    ctx.fillStyle = '#fff';
+    ctx.fillRect(x - 10, y, 20, 10);
+    ctx.fillRect(x - 12, y + 2, 24, 6);
+    // Border
+    ctx.fillStyle = '#555';
+    ctx.fillRect(x - 10, y - 1, 20, 1);
+    ctx.fillRect(x - 10, y + 10, 20, 1);
+    ctx.fillRect(x - 13, y + 2, 1, 6);
+    ctx.fillRect(x + 12, y + 2, 1, 6);
+    // Dots (...)
+    ctx.fillStyle = '#333';
+    ctx.fillRect(x - 5, y + 4, pw, pw);
+    ctx.fillRect(x, y + 4, pw, pw);
+    ctx.fillRect(x + 5, y + 4, pw, pw);
+    // Tail dots
+    ctx.fillStyle = '#fff';
+    ctx.fillRect(x - 2, y + 12, 3, 3);
+    ctx.fillRect(x + 2, y + 16, 2, 2);
+  }
+
+  _drawQuestionBubble(ctx, x, y) {
+    const pw = PIXEL_SIZE;
+    // Bubble background
+    ctx.fillStyle = '#fff';
+    ctx.fillRect(x - 8, y, 16, 14);
+    ctx.fillRect(x - 10, y + 2, 20, 10);
+    // Border
+    ctx.fillStyle = '#555';
+    ctx.fillRect(x - 8, y - 1, 16, 1);
+    ctx.fillRect(x - 8, y + 14, 16, 1);
+    ctx.fillRect(x - 11, y + 2, 1, 10);
+    ctx.fillRect(x + 10, y + 2, 1, 10);
+    // Question mark
+    ctx.fillStyle = '#4080c0';
+    ctx.fillRect(x - 3, y + 2, 6, pw);
+    ctx.fillRect(x + 2, y + 3, pw, 3);
+    ctx.fillRect(x, y + 6, pw * 2, pw);
+    ctx.fillRect(x, y + 9, pw, pw);
+    ctx.fillRect(x, y + 11, pw, pw);
+    // Tail
+    ctx.fillStyle = '#fff';
+    ctx.fillRect(x - 1, y + 15, 3, 2);
+    ctx.fillRect(x + 1, y + 18, 2, 2);
+  }
+}
+
+// Singleton
+let _instance = null;
+export function getEffects() {
+  if (!_instance) _instance = new EffectsManager();
+  return _instance;
+}