@playcraft/cli 0.0.52 → 0.0.55

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

@@ -0,0 +1,565 @@
+/**
+ * 倒计时UI配置接口
+ */
+export interface CountdownUIConfig {
+  /** 初始倒计时秒数 */
+  initialSeconds?: number;
+  /** 倒计时归零回调 */
+  onGameOver?: () => void;
+  bgWidth?: number;
+  bgHeight?: number;
+  bgRadius?: number;
+  bgAlpha?: number;
+  bgColor?: string;
+  digitWidth?: number;
+  digitHeight?: number;
+  digitSpacing?: number;
+  colonWidth?: number;
+  dotSize?: number;
+  dotSpacing?: number;
+  colorNormal?: string;
+  colorWarn?: string;
+  colorOff?: string;
+  warnTime?: number;
+  glowAlpha?: number;
+  /** 是否启用危险闪烁边框 */
+  enableDangerWarning?: boolean;
+}
+
+/**
+ * 完整配置类型（所有属性都必填，onGameOver 除外）
+ */
+type FullCountdownUIConfig = Required<Omit<CountdownUIConfig, 'onGameOver'>>;
+
+/**
+ * 默认配置
+ */
+const DEFAULT_CONFIG: FullCountdownUIConfig = {
+  initialSeconds: 30,
+  bgWidth: 200,
+  bgHeight: 60,
+  bgRadius: 12,
+  bgAlpha: 0.6,
+  bgColor: '#0a0a0a',
+  digitWidth: 24,
+  digitHeight: 38,
+  digitSpacing: 6,
+  colonWidth: 20,
+  dotSize: 3,
+  dotSpacing: 10,
+  colorNormal: '#00ff00',
+  colorWarn: '#ff3333',
+  colorOff: '#003300',
+  warnTime: 10,
+  glowAlpha: 0.3,
+  enableDangerWarning: true,
+};
+
+/** 推荐的默认倒计时（秒） */
+export const DEFAULT_COUNTDOWN = 30;
+
+/** 推荐的默认警告阈值（秒） */
+export const DEFAULT_WARN_TIME = 10;
+
+/**
+ * LED数码管风格倒计时UI组件（纯DOM+CSS实现）
+ * ```
+ */
+export class CountdownUI {
+  private container!: HTMLDivElement;
+  private background!: HTMLDivElement;
+  private digitCanvases: HTMLCanvasElement[] = [];
+  private config: FullCountdownUIConfig;
+
+
+  // --- 内部状态 ---
+  private _countdown: number = 0;
+  private timer?: number;
+  private onGameOver: () => void;
+
+  // --- 危险警告闪烁 ---
+  private dangerOverlay?: HTMLDivElement;
+  private isDangerMode: boolean = false;
+  
+  /**
+   * @param x 中心 X 坐标
+   * @param y 中心 Y 坐标
+   * @param config UI 配置（含 initialSeconds、onGameOver 等）
+   */
+  constructor(x: number = 0, y: number = 0, config?: CountdownUIConfig) {
+    this.config = this.mergeConfig(config);
+    this.onGameOver = config?.onGameOver ?? (() => {});
+    this._countdown = this.config.initialSeconds;
+    this.create(x, y);
+
+    // 立即显示初始值
+    this.update(this._countdown);
+
+    // 初始化危险闪烁边框（如果启用）
+    if (this.config.enableDangerWarning) {
+      this.initDangerWarning();
+    }
+    
+    // 自动启动倒计时
+    this.start();
+  }
+
+  // ========================================
+  //  启动 / 暂停 / 恢复
+  // ========================================
+
+  /**
+   * 启动倒计时（每秒 -1，到 0 触发 onGameOver）
+   * 构造时已完成初始化和显示，此方法只负责"开始走时间"
+   */
+  public start(): void {
+    // 防止重复启动
+    if (this.timer) return;
+
+    this.timer = window.setInterval(() => {
+      this._countdown -= 1;
+      this.update(this._countdown);
+
+      if (this._countdown <= this.config.warnTime && !this.isDangerMode) {
+        this.isDangerMode = true;
+        this.startDangerFlash();
+      }
+
+      if (this._countdown <= 0) {
+        this.stopDangerFlash();
+        if (this.timer) {
+          clearInterval(this.timer);
+          this.timer = undefined;
+        }
+        this.onGameOver();
+      }
+    }, 1000);
+  }
+
+  /**
+   * 暂停倒计时
+   */
+  public pause(): void {
+    if (this.timer) {
+      clearInterval(this.timer);
+      this.timer = undefined;
+    }
+  }
+
+  /**
+   * 恢复倒计时
+   */
+  public resume(): void {
+    if (!this.timer) {
+      this.start();
+    }
+  }
+
+  /**
+   * 获取当前剩余秒数
+   */
+  public getCountdown(): number {
+    return this._countdown;
+  }
+
+  /**
+   * 外部直接设置剩余秒数（如加时奖励）
+   */
+  public setCountdown(seconds: number): void {
+    this._countdown = seconds;
+    this.update(this._countdown);
+
+    // 如果加时后脱离警告区间，停止闪烁
+    if (this._countdown > this.config.warnTime && this.isDangerMode) {
+      this.stopDangerFlash();
+    }
+  }
+
+  // ========================================
+  //  内部实现
+  // ========================================
+  
+  /**
+   * 合并配置
+   */
+  private mergeConfig(userConfig?: CountdownUIConfig): FullCountdownUIConfig {
+    if (!userConfig) {
+      return { ...DEFAULT_CONFIG };
+    }
+    
+    return {
+      initialSeconds: userConfig.initialSeconds ?? DEFAULT_CONFIG.initialSeconds,
+      bgWidth: userConfig.bgWidth ?? DEFAULT_CONFIG.bgWidth,
+      bgHeight: userConfig.bgHeight ?? DEFAULT_CONFIG.bgHeight,
+      bgRadius: userConfig.bgRadius ?? DEFAULT_CONFIG.bgRadius,
+      bgAlpha: userConfig.bgAlpha ?? DEFAULT_CONFIG.bgAlpha,
+      bgColor: userConfig.bgColor ?? DEFAULT_CONFIG.bgColor,
+      digitWidth: userConfig.digitWidth ?? DEFAULT_CONFIG.digitWidth,
+      digitHeight: userConfig.digitHeight ?? DEFAULT_CONFIG.digitHeight,
+      digitSpacing: userConfig.digitSpacing ?? DEFAULT_CONFIG.digitSpacing,
+      colonWidth: userConfig.colonWidth ?? DEFAULT_CONFIG.colonWidth,
+      dotSize: userConfig.dotSize ?? DEFAULT_CONFIG.dotSize,
+      dotSpacing: userConfig.dotSpacing ?? DEFAULT_CONFIG.dotSpacing,
+      colorNormal: userConfig.colorNormal ?? DEFAULT_CONFIG.colorNormal,
+      colorWarn: userConfig.colorWarn ?? DEFAULT_CONFIG.colorWarn,
+      colorOff: userConfig.colorOff ?? DEFAULT_CONFIG.colorOff,
+      warnTime: userConfig.warnTime ?? DEFAULT_CONFIG.warnTime,
+      glowAlpha: userConfig.glowAlpha ?? DEFAULT_CONFIG.glowAlpha,
+      enableDangerWarning: userConfig.enableDangerWarning ?? DEFAULT_CONFIG.enableDangerWarning,
+    };
+  }
+  
+  private create(x: number, y: number): void {
+    // 创建主容器
+    this.container = document.createElement('div');
+    this.container.className = 'countdown-ui-container';
+    
+    // 创建半透明背景
+    this.background = document.createElement('div');
+    this.background.className = 'countdown-ui-background';
+    
+    const { bgWidth, bgHeight, bgRadius, bgAlpha, bgColor } = this.config;
+    
+    // 将十六进制颜色转为 rgba
+    const rgba = `${bgColor}${Math.round(bgAlpha * 255).toString(16).padStart(2, '0')}`;
+    
+    Object.assign(this.background.style, {
+      position: 'absolute',
+      width: `${bgWidth}px`,
+      height: `${bgHeight}px`,
+      backgroundColor: rgba,
+      borderRadius: `${bgRadius}px`,
+      left: '50%',
+      top: '50%',
+      transform: 'translate(-50%, -50%)',
+    } as CSSStyleDeclaration);
+    
+    this.container.appendChild(this.background);
+    
+    // 创建数码管容器
+    const digitsContainer = document.createElement('div');
+    digitsContainer.className = 'countdown-digits';
+    Object.assign(digitsContainer.style, {
+      position: 'absolute',
+      left: '50%',
+      top: '50%',
+      transform: 'translate(-50%, -50%)',
+      display: 'flex',
+      alignItems: 'center',
+      gap: `${this.config.digitSpacing}px`,
+    } as CSSStyleDeclaration);
+    
+    // 创建5个 canvas：分钟十位、分钟个位、冒号、秒钟十位、秒钟个位
+    for (let i = 0; i < 5; i++) {
+      const canvas = document.createElement('canvas');
+      canvas.className = i === 2 ? 'countdown-colon' : 'countdown-digit';
+      
+      if (i === 2) {
+        // 冒号
+        canvas.width = this.config.colonWidth;
+        canvas.height = this.config.digitHeight;
+      } else {
+        // 数字
+        canvas.width = this.config.digitWidth;
+        canvas.height = this.config.digitHeight;
+      }
+      
+      this.digitCanvases.push(canvas);
+      digitsContainer.appendChild(canvas);
+    }
+    
+    this.container.appendChild(digitsContainer);
+    
+    // 设置容器样式（使用传入的 x, y 坐标）
+    Object.assign(this.container.style, {
+      position: 'fixed',
+      left: `${x}px`,
+      top: `${y}px`,
+      transform: 'translateX(-50%) scale(var(--countdown-ui-scale, 1))', // translateX(-50%) 使元素以 x 为中心
+      transformOrigin: 'top center',
+      zIndex: '100',
+      pointerEvents: 'none',
+      userSelect: 'none',
+    } as CSSStyleDeclaration);
+    
+    document.body.appendChild(this.container);
+    
+    // 响应式处理
+    this.setupResponsive();
+  }
+  
+  /**
+   * 设置响应式缩放（参考 ScoreUI）
+   */
+  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('--countdown-ui-scale', scale.toString());
+    };
+    
+    updateScale();
+    window.addEventListener('resize', updateScale);
+    
+    // 保存清理函数
+    (this.container as any)._cleanupResize = () => {
+      window.removeEventListener('resize', updateScale);
+    };
+  }
+  
+  /**
+   * 更新倒计时显示
+   */
+  public update(seconds: number): void {
+    const mins = Math.floor(seconds / 60);
+    const secs = seconds % 60;
+    
+    const color = seconds <= this.config.warnTime ? this.config.colorWarn : this.config.colorNormal;
+    
+    this.drawDigit(this.digitCanvases[0], Math.floor(mins / 10), color);
+    this.drawDigit(this.digitCanvases[1], mins % 10, color);
+    this.drawColon(this.digitCanvases[2], color);
+    this.drawDigit(this.digitCanvases[3], Math.floor(secs / 10), color);
+    this.drawDigit(this.digitCanvases[4], secs % 10, color);
+  }
+
+  /**
+   * 初始化危险警告边框
+   */
+  public initDangerWarning(): void {
+    if (this.dangerOverlay) return; // 避免重复初始化
+    
+    this.dangerOverlay = document.createElement('div');
+    this.dangerOverlay.className = 'countdown-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('countdown-danger-keyframes')) {
+      const style = document.createElement('style');
+      style.id = 'countdown-danger-keyframes';
+      style.textContent = `
+        @keyframes countdown-danger-flash {
+          0%, 100% { opacity: 0; }
+          50% { opacity: 0.6; }
+        }
+      `;
+      document.head.appendChild(style);
+    }
+    
+    this.dangerOverlay.style.display = 'block';
+    this.dangerOverlay.style.animation = 'countdown-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;
+  }
+
+  /**
+   * 绘制七段数码管数字（使用 Canvas）
+   */
+  private drawDigit(canvas: HTMLCanvasElement, digit: number, color: string): void {
+    const ctx = canvas.getContext('2d');
+    if (!ctx) return;
+    
+    const width = canvas.width;
+    const height = canvas.height;
+    
+    ctx.clearRect(0, 0, width, height);
+    
+    // 七段数码管映射（上、右上、右下、下、左下、左上、中）
+    const segments: { [key: number]: boolean[] } = {
+      0: [true, true, true, true, true, true, false],
+      1: [false, true, true, false, false, false, false],
+      2: [true, true, false, true, true, false, true],
+      3: [true, true, true, true, false, false, true],
+      4: [false, true, true, false, false, true, true],
+      5: [true, false, true, true, false, true, true],
+      6: [true, false, true, true, true, true, true],
+      7: [true, true, true, false, false, false, false],
+      8: [true, true, true, true, true, true, true],
+      9: [true, true, true, true, false, true, true]
+    };
+    
+    const segs = segments[digit] || segments[0];
+    const segW = width * 0.7;
+    const segH = height * 0.12;
+    const segVW = segH;
+    const segVH = (height - segH * 3) / 2;
+    const gap = 2;
+    
+    const drawSegment = (cx: number, cy: number, w: number, h: number, isHorizontal: boolean, isOn: boolean) => {
+      ctx.globalAlpha = isOn ? 1 : 0.1;
+      ctx.fillStyle = isOn ? color : this.config.colorOff;
+      
+      ctx.beginPath();
+      if (isHorizontal) {
+        // 水平段（六边形）
+        ctx.moveTo(cx - w / 2 + h / 2, cy - h / 2);
+        ctx.lineTo(cx + w / 2 - h / 2, cy - h / 2);
+        ctx.lineTo(cx + w / 2, cy);
+        ctx.lineTo(cx + w / 2 - h / 2, cy + h / 2);
+        ctx.lineTo(cx - w / 2 + h / 2, cy + h / 2);
+        ctx.lineTo(cx - w / 2, cy);
+      } else {
+        // 垂直段（六边形）
+        ctx.moveTo(cx, cy - w / 2);
+        ctx.lineTo(cx + h / 2, cy - w / 2 + h / 2);
+        ctx.lineTo(cx + h / 2, cy + w / 2 - h / 2);
+        ctx.lineTo(cx, cy + w / 2);
+        ctx.lineTo(cx - h / 2, cy + w / 2 - h / 2);
+        ctx.lineTo(cx - h / 2, cy - w / 2 + h / 2);
+      }
+      ctx.closePath();
+      ctx.fill();
+    };
+    
+    const halfW = width / 2;
+    const halfH = height / 2;
+    
+    // 绘制七段（顺序：上、右上、右下、下、左下、左上、中）
+    drawSegment(halfW, segH / 2 + gap, segW, segH, true, segs[0]);  // 上
+    drawSegment(width - segVW / 2 - gap, halfH / 2, segVH, segVW, false, segs[1]);  // 右上
+    drawSegment(width - segVW / 2 - gap, halfH + halfH / 2, segVH, segVW, false, segs[2]);  // 右下
+    drawSegment(halfW, height - segH / 2 - gap, segW, segH, true, segs[3]);  // 下
+    drawSegment(segVW / 2 + gap, halfH + halfH / 2, segVH, segVW, false, segs[4]);  // 左下
+    drawSegment(segVW / 2 + gap, halfH / 2, segVH, segVW, false, segs[5]);  // 左上
+    drawSegment(halfW, halfH, segW, segH, true, segs[6]);  // 中
+    
+    ctx.globalAlpha = 1;
+  }
+  
+  /**
+   * 绘制数码管冒号（使用 Canvas）
+   */
+  private drawColon(canvas: HTMLCanvasElement, color: string): void {
+    const ctx = canvas.getContext('2d');
+    if (!ctx) return;
+    
+    const width = canvas.width;
+    const height = canvas.height;
+    const { dotSize, dotSpacing } = this.config;
+    
+    ctx.clearRect(0, 0, width, height);
+    ctx.fillStyle = color;
+    
+    // 上点
+    ctx.beginPath();
+    ctx.arc(width / 2, height / 2 - dotSpacing, dotSize, 0, Math.PI * 2);
+    ctx.fill();
+    
+    // 下点
+    ctx.beginPath();
+    ctx.arc(width / 2, height / 2 + dotSpacing, dotSize, 0, Math.PI * 2);
+    ctx.fill();
+  }
+  
+  /**
+   * Game Over 时绘制遮罩层，在屏幕中央显示 "Time Up!" 文字
+   */
+  public showGameOver(overlayAlpha: number = 0.6, overlayDepth: number = 300): void {
+    const overlay = document.createElement('div');
+    overlay.className = 'countdown-gameover-overlay';
+    
+    Object.assign(overlay.style, {
+      position: 'fixed',
+      left: '0',
+      top: '0',
+      width: '100vw',
+      height: '100vh',
+      backgroundColor: `rgba(0, 0, 0, ${overlayAlpha})`,
+      zIndex: overlayDepth.toString(),
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+    } as CSSStyleDeclaration);
+    
+    const text = document.createElement('div');
+    text.textContent = 'Time Up!';
+    Object.assign(text.style, {
+      fontFamily: 'Arial, sans-serif',
+      fontSize: '72px',
+      color: '#ffffff',
+      fontWeight: 'bold',
+      textShadow: '0 0 4px #000000, 0 0 8px #000000',
+    } as CSSStyleDeclaration);
+    
+    overlay.appendChild(text);
+    document.body.appendChild(overlay);
+  }
+
+  /**
+   * 获取配置
+   */
+  public getConfig(): FullCountdownUIConfig {
+    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();
+    }
+  }
+}

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

@@ -0,0 +1,51 @@
+import * as Phaser from 'phaser';
+import { sdk } from '@playcraft/adsdk';
+
+/**
+ * 通用 Play 按钮组件
+ * 使用 interact 合图中的 playBtn 帧，点击跳转安装，带呼吸动画
+ * 
+ * 纹理依赖：
+ * - interact 合图中的 playBtn 帧
+ */
+export class PlayButton {
+  private scene: Phaser.Scene;
+  private btn!: Phaser.GameObjects.Image;
+  private isGoogleChannel: boolean;
+
+  constructor(scene: Phaser.Scene) {
+    this.scene = scene;
+    this.isGoogleChannel = (window as any).PlayableSDK?.getCurChannel?.() === 'google';
+  }
+
+  /**
+   * 在指定位置显示按钮
+   * @param x x 坐标
+   * @param y y 坐标
+   * @param scale 缩放（默认 0.45）
+   * @param depth 渲染层级（默认 301）
+   */
+  public show(x: number, y: number, scale: number = 0.45, depth: number = 301): Phaser.GameObjects.Image {
+    this.btn = this.scene.add.image(x, y, 'interact', 'playBtn')
+      .setScale(scale)
+      .setDepth(depth)
+      .setInteractive({ useHandCursor: true });
+
+    this.btn.on('pointerdown', () => sdk.playcraftInstall());
+
+    // 呼吸动画（Google 渠道禁用）
+    if (!this.isGoogleChannel) {
+      this.scene.tweens.add({
+        targets: this.btn,
+        scaleX: scale * 1.1,
+        scaleY: scale * 1.1,
+        duration: 700,
+        yoyo: true,
+        repeat: -1,
+        ease: 'Sine.easeInOut'
+      });
+    }
+
+    return this.btn;
+  }
+}