@playcraft/cli 0.0.53 → 0.0.56

package/project-templates/playable-template-phaser/src/ui/BrainAgeUI.ts

@@ -0,0 +1,681 @@
+/**
+ * 脑龄UI配置接口
+ */
+export interface BrainAgeUIConfig {
+  scale?: number;
+  width?: number;
+  height?: number;
+  radius?: number;
+  padding?: number;
+  iconSize?: number;
+  iconOffset?: number;
+  labelFontSize?: string;
+  ageFontSize?: string;
+  labelText?: string;
+  colors?: {
+    bg?: string;
+    borderNormal?: string;
+    text?: string;
+    ageNormal?: string;
+  };
+  borderWidth?: number;
+}
+
+/**
+ * 脑龄游戏逻辑配置
+ */
+export interface BrainAgeGameConfig {
+  /** 初始脑龄 */
+  initial?: number;
+  /** 最大脑龄（达到则 Game Over） */
+  max?: number;
+  /** 最小脑龄 */
+  min?: number;
+  /** 每秒增加的脑龄 */
+  incrementPerSecond?: number;
+  /** 每次匹配减少的脑龄 */
+  decrementPerMatch?: number;
+  /** 警告阈值脑龄 */
+  warningAge?: number;
+  /** 正常状态图标 URL */
+  iconUrl?: string;
+  /** 警告状态图标 URL */
+  warnIconUrl?: string;
+  /** 是否启用危险闪烁边框 */
+  enableDangerWarning?: boolean;
+  /** 脑龄达到上限回调 */
+  onGameOver?: () => void;
+}
+
+/**
+ * 完整配置类型（所有属性都必填，包括嵌套对象）
+ */
+type FullBrainAgeUIConfig = Required<Omit<BrainAgeUIConfig, "colors">> & {
+  colors: Required<NonNullable<BrainAgeUIConfig["colors"]>>;
+};
+
+type FullBrainAgeGameConfig = Required<Omit<BrainAgeGameConfig, 'onGameOver'>>;
+
+/**
+ * 默认 UI 配置
+ */
+const DEFAULT_CONFIG: FullBrainAgeUIConfig = {
+  scale: 1,
+  width: 400,
+  height: 100,
+  radius: 50,
+  padding: 15,
+  iconSize: 75,
+  iconOffset: 35,
+  labelFontSize: "36px",
+  ageFontSize: "72px",
+  labelText: "Brain Age:",
+  colors: {
+    bg: "#ffffff",
+    borderNormal: "#dddddd",
+    text: "#000000",
+    ageNormal: "#2b5c9e",
+  },
+  borderWidth: 0,
+};
+
+/**
+ * 默认游戏逻辑配置
+ */
+const DEFAULT_GAME_CONFIG: FullBrainAgeGameConfig = {
+  initial: 60,
+  max: 100,
+  min: 20,
+  incrementPerSecond: 1,
+  decrementPerMatch: 5,
+  warningAge: 90,
+  iconUrl: '',
+  warnIconUrl: '',
+  enableDangerWarning: true,
+};
+
+/**
+ * 脑龄UI组件（纯DOM+CSS实现）
+ */
+export class BrainAgeUI {
+  private container!: HTMLDivElement;
+  private background!: HTMLDivElement;
+  private icon?: HTMLElement;
+  private ageText!: HTMLDivElement;
+  private config: FullBrainAgeUIConfig;
+
+  // --- 内部状态 ---
+  private _age: number = 60;
+  private gameConfig: FullBrainAgeGameConfig = { ...DEFAULT_GAME_CONFIG };
+  private timer?: number;
+  private onGameOver: () => void;
+
+  // --- 危险警告闪烁 ---
+  private dangerOverlay?: HTMLDivElement;
+  private isDangerMode: boolean = false;
+
+  /**
+   * @param x X 坐标（像素）
+   * @param y Y 坐标（像素）
+   * @param iconContent 图标内容（图片 URL 优先，或 emoji/文本，留空不显示）
+   * @param uiConfig UI 外观配置
+   * @param gameConfig 游戏逻辑配置（含 onGameOver）
+   */
+  constructor(
+    x: number = 30,
+    y: number = 30,
+    iconContent?: string,
+    uiConfig?: BrainAgeUIConfig,
+    gameConfig?: BrainAgeGameConfig
+  ) {
+    this.config = this.mergeConfig(uiConfig);
+    this.gameConfig = this.mergeGameConfig(gameConfig);
+    this.onGameOver = gameConfig?.onGameOver ?? (() => {});
+    this._age = this.gameConfig.initial;
+    this.create(x, y, iconContent);
+
+    // 立即显示初始值
+    this.update(this._age);
+
+    // 初始化危险闪烁边框（如果启用）
+    if (this.gameConfig.enableDangerWarning) {
+      this.initDangerWarning();
+    }
+    
+    // 自动启动计时
+    this.start();
+  }
+
+  // ========================================
+  //  启动 / 暂停 / 恢复
+  // ========================================
+
+  /**
+   * 启动脑龄计时器（每秒 +incrementPerSecond，达到 max 触发 onGameOver）
+   */
+  public start(): void {
+    // 防止重复启动
+    if (this.timer) return;
+
+    this.timer = window.setInterval(() => {
+      this._age += this.gameConfig.incrementPerSecond;
+      this.update(this._age);
+
+      // 达到警告值 → 切换图标 + 启动闪烁
+      if (this._age >= this.gameConfig.warningAge) {
+        this.setIcon(this.gameConfig.warnIconUrl || '⚠️');
+        if (!this.isDangerMode) {
+          this.isDangerMode = true;
+          this.startDangerFlash();
+        }
+      }
+
+      // 达到最大值 → 停止闪烁 + Game Over
+      if (this._age >= this.gameConfig.max) {
+        this.stopDangerFlash();
+        if (this.timer) {
+          clearInterval(this.timer);
+          this.timer = undefined;
+        }
+        this.onGameOver();
+      }
+    }, 1000);
+  }
+
+  /**
+   * 匹配成功时减少脑龄（内部自管理，自动处理图标切换和闪烁解除）
+   * @param customDecrement 自定义减少量（默认使用 gameConfig.decrementPerMatch）
+   */
+  public onMatchSuccess(customDecrement?: number): void {
+    const decrement = customDecrement ?? this.gameConfig.decrementPerMatch;
+    this._age = Math.max(this.gameConfig.min, this._age - decrement);
+    this.update(this._age);
+
+    if (this._age < this.gameConfig.warningAge) {
+      this.setIcon(this.gameConfig.iconUrl || '🧠');
+      this.stopDangerFlash();
+    }
+  }
+
+  /**
+   * 暂停计时器
+   */
+  public pause(): void {
+    if (this.timer) {
+      clearInterval(this.timer);
+      this.timer = undefined;
+    }
+  }
+
+  /**
+   * 恢复计时器
+   */
+  public resume(): void {
+    if (!this.timer) {
+      this.start();
+    }
+  }
+
+  /**
+   * 获取当前脑龄
+   */
+  public getAge(): number {
+    return this._age;
+  }
+
+  /**
+   * 外部直接设置脑龄
+   */
+  public setAge(age: number): void {
+    this._age = age;
+    this.update(this._age);
+
+    // 脱离警告区间 → 恢复正常图标 + 停止闪烁
+    if (this._age < this.gameConfig.warningAge && this.isDangerMode) {
+      this.setIcon(this.gameConfig.iconUrl || '🧠');
+      this.stopDangerFlash();
+    }
+  }
+
+  // ========================================
+  //  内部实现
+  // ========================================
+
+  private mergeGameConfig(userConfig?: BrainAgeGameConfig): FullBrainAgeGameConfig {
+    if (!userConfig) return { ...DEFAULT_GAME_CONFIG };
+    return {
+      initial: userConfig.initial ?? DEFAULT_GAME_CONFIG.initial,
+      max: userConfig.max ?? DEFAULT_GAME_CONFIG.max,
+      min: userConfig.min ?? DEFAULT_GAME_CONFIG.min,
+      incrementPerSecond: userConfig.incrementPerSecond ?? DEFAULT_GAME_CONFIG.incrementPerSecond,
+      decrementPerMatch: userConfig.decrementPerMatch ?? DEFAULT_GAME_CONFIG.decrementPerMatch,
+      warningAge: userConfig.warningAge ?? DEFAULT_GAME_CONFIG.warningAge,
+      iconUrl: userConfig.iconUrl ?? DEFAULT_GAME_CONFIG.iconUrl,
+      warnIconUrl: userConfig.warnIconUrl ?? DEFAULT_GAME_CONFIG.warnIconUrl,
+      enableDangerWarning: userConfig.enableDangerWarning ?? DEFAULT_GAME_CONFIG.enableDangerWarning,
+    };
+  }
+
+  private mergeConfig(userConfig?: BrainAgeUIConfig): FullBrainAgeUIConfig {
+    if (!userConfig) {
+      return { ...DEFAULT_CONFIG, colors: { ...DEFAULT_CONFIG.colors } };
+    }
+
+    return {
+      scale: userConfig.scale ?? DEFAULT_CONFIG.scale,
+      width: userConfig.width ?? DEFAULT_CONFIG.width,
+      height: userConfig.height ?? DEFAULT_CONFIG.height,
+      radius: userConfig.radius ?? DEFAULT_CONFIG.radius,
+      padding: userConfig.padding ?? DEFAULT_CONFIG.padding,
+      iconSize: userConfig.iconSize ?? DEFAULT_CONFIG.iconSize,
+      iconOffset: userConfig.iconOffset ?? DEFAULT_CONFIG.iconOffset,
+      labelFontSize: userConfig.labelFontSize ?? DEFAULT_CONFIG.labelFontSize,
+      ageFontSize: userConfig.ageFontSize ?? DEFAULT_CONFIG.ageFontSize,
+      labelText: userConfig.labelText ?? DEFAULT_CONFIG.labelText,
+      colors: {
+        bg: userConfig.colors?.bg ?? DEFAULT_CONFIG.colors.bg,
+        borderNormal: userConfig.colors?.borderNormal ?? DEFAULT_CONFIG.colors.borderNormal,
+        text: userConfig.colors?.text ?? DEFAULT_CONFIG.colors.text,
+        ageNormal: userConfig.colors?.ageNormal ?? DEFAULT_CONFIG.colors.ageNormal,
+      },
+      borderWidth: userConfig.borderWidth ?? DEFAULT_CONFIG.borderWidth,
+    };
+  }
+
+  private create(x: number, y: number, iconContent?: string): void {
+    const {
+      scale: s,
+      colors,
+      borderWidth: rawBorderWidth,
+      labelText,
+    } = this.config;
+
+    const width = this.config.width * s;
+    const height = this.config.height * s;
+    const radius = this.config.radius * s;
+    const padding = this.config.padding * s;
+    const iconSize = this.config.iconSize * s;
+    const iconOffset = this.config.iconOffset * s;
+    const borderWidth = rawBorderWidth * s;
+    const labelFontSize = `${parseFloat(this.config.labelFontSize) * s}px`;
+    const ageFontSize = `${parseFloat(this.config.ageFontSize) * s}px`;
+
+    // 创建主容器
+    this.container = document.createElement('div');
+    this.container.className = 'brainage-ui-container';
+    
+    Object.assign(this.container.style, {
+      position: 'fixed',
+      left: `${x}px`,
+      top: `${y}px`,
+      width: `${width}px`,
+      height: `${height}px`,
+      zIndex: '100',
+      transform: 'scale(var(--brainage-ui-scale, 1))',
+      transformOrigin: 'top left',
+      pointerEvents: 'none',
+      userSelect: 'none',
+    } as CSSStyleDeclaration);
+
+    // 创建背景
+    this.background = document.createElement('div');
+    this.background.className = 'brainage-ui-background';
+    
+    Object.assign(this.background.style, {
+      position: 'absolute',
+      width: '100%',
+      height: '100%',
+      backgroundColor: colors.bg,
+      border: borderWidth > 0 ? `${borderWidth}px solid ${colors.borderNormal}` : 'none',
+      borderRadius: `${radius}px`,
+      display: 'flex',
+      alignItems: 'center',
+      padding: `0 ${padding}px`,
+      boxSizing: 'border-box',
+    } as CSSStyleDeclaration);
+
+    // 创建图标（如果提供）
+    if (iconContent) {
+      // 判断是图片 URL 还是 emoji/文本
+      const isImageUrl = iconContent.startsWith('data:image/') ||  // base64 data URL
+                         iconContent.startsWith('http') || 
+                         iconContent.startsWith('/') || 
+                         iconContent.startsWith('./') ||
+                         iconContent.includes('.png') || 
+                         iconContent.includes('.jpg') || 
+                         iconContent.includes('.webp') ||
+                         iconContent.includes('.svg');
+      
+      if (isImageUrl) {
+        // 使用图片
+        const imgElement = document.createElement('img');
+        imgElement.className = 'brainage-ui-icon';
+        imgElement.src = iconContent;
+        imgElement.alt = 'Brain Icon';
+        
+        Object.assign(imgElement.style, {
+          width: `${iconSize}px`,
+          height: `${iconSize}px`,
+          marginRight: `${iconOffset * 0.6}px`,  // 调整间距为原值的 0.6 倍
+          flexShrink: '0',
+          objectFit: 'contain',
+          alignSelf: 'center',  // 垂直居中对齐
+        } as CSSStyleDeclaration);
+        
+        this.icon = imgElement;
+        this.background.appendChild(imgElement);
+      } else {
+        // 使用 emoji/文本
+        this.icon = document.createElement('div');
+        this.icon.className = 'brainage-ui-icon';
+        this.icon.textContent = iconContent;
+        
+        Object.assign(this.icon.style, {
+          fontSize: `${iconSize}px`,
+          lineHeight: '1',  // 改为 1,避免行高冲突
+          marginRight: `${iconOffset * 0.6}px`,  // 调整间距为原值的 0.6 倍
+          flexShrink: '0',
+          display: 'flex',
+          alignItems: 'center',      // 垂直居中对齐
+          justifyContent: 'center',  // 水平居中对齐
+          height: `${iconSize}px`,   // 显式设置高度
+        } as CSSStyleDeclaration);
+        
+        this.background.appendChild(this.icon);
+      }
+    }
+
+    // 创建文本容器
+    const textContainer = document.createElement('div');
+    textContainer.className = 'brainage-ui-text-container';
+    Object.assign(textContainer.style, {
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'space-between',
+      flex: '1',
+    } as CSSStyleDeclaration);
+
+    // 创建标签文本
+    const labelTextObj = document.createElement('div');
+    labelTextObj.className = 'brainage-ui-label';
+    labelTextObj.textContent = labelText;
+    
+    Object.assign(labelTextObj.style, {
+      fontFamily: 'Arial, sans-serif',
+      fontSize: labelFontSize,
+      color: colors.text,
+      fontWeight: 'bold',
+    } as CSSStyleDeclaration);
+
+    // 创建脑龄文本
+    this.ageText = document.createElement('div');
+    this.ageText.className = 'brainage-ui-age';
+    this.ageText.textContent = this._age.toString();
+    
+    Object.assign(this.ageText.style, {
+      fontFamily: 'Arial, sans-serif',
+      fontSize: ageFontSize,
+      color: colors.ageNormal,
+      fontWeight: '700',
+    } as CSSStyleDeclaration);
+
+    textContainer.appendChild(labelTextObj);
+    textContainer.appendChild(this.ageText);
+    this.background.appendChild(textContainer);
+    this.container.appendChild(this.background);
+    
+    document.body.appendChild(this.container);
+    
+    // 响应式处理
+    this.setupResponsive();
+  }
+
+  /**
+   * 设置响应式缩放
+   */
+  private setupResponsive(): void {
+    const updateScale = () => {
+      const currentWidth = window.innerWidth;
+      const currentHeight = window.innerHeight;
+      
+      // 判断是否为移动设备
+      const isMobile = currentWidth < 768 || (currentWidth < 1024 && currentHeight < 768);
+      
+      let scale: number;
+      if (isMobile) {
+        // 移动端：基于 375px 基准，最小 0.8 倍，最大 1.2 倍
+        const baseWidth = 375;
+        scale = Math.max(0.4, Math.min(currentWidth / baseWidth, 0.5));
+      } else {
+        // PC端：基于 1920px 基准，最小 0.6 倍，最大 1 倍
+        const baseWidth = 1920;
+        scale = Math.max(0.6, Math.min(currentWidth / baseWidth, 1));
+      }
+      
+      document.documentElement.style.setProperty('--brainage-ui-scale', scale.toString());
+    };
+    
+    updateScale();
+    window.addEventListener('resize', updateScale);
+    
+    // 保存清理函数
+    (this.container as any)._cleanupResize = () => {
+      window.removeEventListener('resize', updateScale);
+    };
+  }
+
+  /**
+   * 更新脑龄显示
+   */
+  public update(age: number): void {
+    if (this.ageText) {
+      this.ageText.textContent = age.toString();
+    }
+  }
+
+  /**
+   * 初始化危险警告边框
+   */
+  public initDangerWarning(): void {
+    if (this.dangerOverlay) return; // 避免重复初始化
+    
+    this.dangerOverlay = document.createElement('div');
+    this.dangerOverlay.className = 'brainage-danger-overlay';
+    
+    Object.assign(this.dangerOverlay.style, {
+      position: 'fixed',
+      left: '0',
+      top: '0',
+      width: '100vw',
+      height: '100vh',
+      border: '8px solid #ff3333',
+      boxSizing: 'border-box',
+      pointerEvents: 'none',
+      zIndex: '99',
+      opacity: '0',
+      display: 'none',
+    } as CSSStyleDeclaration);
+    
+    document.body.appendChild(this.dangerOverlay);
+  }
+
+  /**
+   * 启动危险警告闪烁（使用 CSS 动画）
+   */
+  private startDangerFlash(): void {
+    if (!this.dangerOverlay) return;
+    
+    // 注入 CSS 动画（如果尚未注入）
+    if (!document.getElementById('brainage-danger-keyframes')) {
+      const style = document.createElement('style');
+      style.id = 'brainage-danger-keyframes';
+      style.textContent = `
+        @keyframes brainage-danger-flash {
+          0%, 100% { opacity: 0; }
+          50% { opacity: 0.6; }
+        }
+      `;
+      document.head.appendChild(style);
+    }
+    
+    this.dangerOverlay.style.display = 'block';
+    this.dangerOverlay.style.animation = 'brainage-danger-flash 1s ease-in-out infinite';
+  }
+
+  public stopDangerFlash(): void {
+    if (this.dangerOverlay) {
+      this.dangerOverlay.style.display = 'none';
+      this.dangerOverlay.style.animation = '';
+    }
+    this.isDangerMode = false;
+  }
+
+  /**
+   * 切换图标
+   */
+  public setIcon(iconContent: string): void {
+    if (!this.icon) return;
+    
+    // 判断是图片 URL 还是 emoji/文本
+    const isImageUrl = iconContent.startsWith('data:image/') ||  // base64 data URL
+                       iconContent.startsWith('http') || 
+                       iconContent.startsWith('/') || 
+                       iconContent.startsWith('./') ||
+                       iconContent.includes('.png') || 
+                       iconContent.includes('.jpg') || 
+                       iconContent.includes('.webp') ||
+                       iconContent.includes('.svg');
+    
+    if (isImageUrl) {
+      // 如果是 img 元素，直接更新 src
+      if (this.icon instanceof HTMLImageElement) {
+        this.icon.src = iconContent;
+      } else {
+        // 如果原来是 div，需要替换为 img
+        const parent = this.icon.parentElement;
+        if (parent) {
+          const imgElement = document.createElement('img');
+          imgElement.className = 'brainage-ui-icon';
+          imgElement.src = iconContent;
+          imgElement.alt = 'Brain Icon';
+          
+          const computedStyle = getComputedStyle(this.icon);
+          Object.assign(imgElement.style, {
+            width: computedStyle.width,
+            height: computedStyle.height,
+            marginRight: computedStyle.marginRight,
+            flexShrink: '0',
+            objectFit: 'contain',
+            alignSelf: 'center',  // 垂直居中对齐
+          } as CSSStyleDeclaration);
+          
+          parent.replaceChild(imgElement, this.icon);
+          this.icon = imgElement;
+        }
+      }
+    } else {
+      // 如果是 div 元素，直接更新文本
+      if (this.icon instanceof HTMLDivElement) {
+        this.icon.textContent = iconContent;
+      } else {
+        // 如果原来是 img，需要替换为 div
+        const parent = this.icon.parentElement;
+        if (parent) {
+          const divElement = document.createElement('div');
+          divElement.className = 'brainage-ui-icon';
+          divElement.textContent = iconContent;
+          
+          const computedStyle = getComputedStyle(this.icon);
+          Object.assign(divElement.style, {
+            fontSize: computedStyle.width, // 使用宽度作为字体大小
+            lineHeight: '1',
+            height: computedStyle.height,
+            marginRight: computedStyle.marginRight,
+            flexShrink: '0',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+          } as CSSStyleDeclaration);
+          
+          parent.replaceChild(divElement, this.icon);
+          this.icon = divElement;
+        }
+      }
+    }
+  }
+
+  /**
+   * Game Over 遮罩 + 面板放大居中
+   */
+  public showGameOver(gameOverScale: number = 1.5, overlayAlpha: number = 0.6): void {
+    const s = this.config.scale;
+    const extraW = 30 * s;
+    const baseW = this.config.width * s;
+    const newW = baseW + extraW;
+
+    // 创建遮罩层
+    const overlay = document.createElement('div');
+    overlay.className = 'brainage-gameover-overlay';
+    
+    Object.assign(overlay.style, {
+      position: 'fixed',
+      left: '0',
+      top: '0',
+      width: '100vw',
+      height: '100vh',
+      backgroundColor: `rgba(0, 0, 0, ${overlayAlpha})`,
+      zIndex: '300',
+    } as CSSStyleDeclaration);
+    
+    document.body.appendChild(overlay);
+
+    // 更新背景样式
+    this.background.style.width = `${newW}px`;
+    this.background.style.border = `${6 * s}px solid #ff4444`;
+
+    // 更新脑龄文本颜色
+    this.ageText.style.color = '#ff4444';
+
+    // 放大并居中容器
+    this.container.style.transform = `scale(${gameOverScale * parseFloat(getComputedStyle(document.documentElement).getPropertyValue('--brainage-ui-scale') || '1')})`;
+    this.container.style.left = '50%';
+    this.container.style.top = '50%';
+    this.container.style.transform += ' translate(-50%, -60%)';
+    this.container.style.zIndex = '301';
+  }
+
+  public setPosition(x: number, y: number): void {
+    this.container.style.left = `${x}px`;
+    this.container.style.top = `${y}px`;
+  }
+
+  public setVisible(visible: boolean): void {
+    this.container.style.display = visible ? 'block' : 'none';
+  }
+
+  public getConfig(): FullBrainAgeUIConfig {
+    return { ...this.config };
+  }
+
+  public destroy(): void {
+    if (this.timer) {
+      clearInterval(this.timer);
+      this.timer = undefined;
+    }
+    
+    this.stopDangerFlash();
+    
+    // 清理响应式监听器
+    const cleanup = (this.container as any)._cleanupResize;
+    if (cleanup) cleanup();
+    
+    // 移除 DOM 元素
+    if (this.container) {
+      this.container.remove();
+    }
+    
+    if (this.dangerOverlay) {
+      this.dangerOverlay.remove();
+    }
+  }
+}