@playcraft/cli 0.0.53 → 0.0.56

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

@@ -0,0 +1,207 @@
+/**
+ * 积分UI配置接口
+ */
+export interface ScoreUIConfig {
+  fontSize?: number;
+  fontFamily?: string;
+  color?: string;
+  bgColor?: string;
+  paddingX?: number;
+  paddingY?: number;
+  prefix?: string;
+  scale?: number;
+}
+
+/**
+ * 完整配置类型（所有属性都必填）
+ */
+type FullScoreUIConfig = Required<ScoreUIConfig>;
+
+/**
+ * 默认配置
+ */
+const DEFAULT_CONFIG: FullScoreUIConfig = {
+  fontSize: 32,
+  fontFamily: 'Arial, sans-serif',
+  color: '#ffff00',
+  bgColor: '#00000066',
+  paddingX: 16,
+  paddingY: 8,
+  prefix: 'Score: ',
+  scale: 1,
+};
+
+/** 推荐的默认每次匹配得分 */
+export const DEFAULT_POINTS_PER_MATCH = 5;
+
+/** 推荐的默认 X 坐标 */
+export const DEFAULT_X = 40;
+
+/** 推荐的默认 Y 坐标 */
+export const DEFAULT_Y = 15;
+
+/**
+ * 积分UI组件（纯DOM+CSS实现）
+ * ```
+ */
+export class ScoreUI {
+  private element!: HTMLDivElement;
+  private config: FullScoreUIConfig;
+  private score: number = 0;
+  
+  /**
+   * @param x X 坐标（像素）
+   * @param y Y 坐标（像素）
+   * @param initialScore 初始分数
+   * @param config UI 配置
+   */
+  constructor(x: number = DEFAULT_X, y: number = DEFAULT_Y, initialScore: number = 0, config?: ScoreUIConfig) {
+    this.score = initialScore;
+    this.config = this.mergeConfig(config);
+    this.create(x, y);
+  }
+  
+  /**
+   * 合并配置
+   */
+  private mergeConfig(userConfig?: ScoreUIConfig): FullScoreUIConfig {
+    if (!userConfig) {
+      return { ...DEFAULT_CONFIG };
+    }
+    
+    return {
+      fontSize: userConfig.fontSize ?? DEFAULT_CONFIG.fontSize,
+      fontFamily: userConfig.fontFamily ?? DEFAULT_CONFIG.fontFamily,
+      color: userConfig.color ?? DEFAULT_CONFIG.color,
+      bgColor: userConfig.bgColor ?? DEFAULT_CONFIG.bgColor,
+      paddingX: userConfig.paddingX ?? DEFAULT_CONFIG.paddingX,
+      paddingY: userConfig.paddingY ?? DEFAULT_CONFIG.paddingY,
+      prefix: userConfig.prefix ?? DEFAULT_CONFIG.prefix,
+      scale: userConfig.scale ?? DEFAULT_CONFIG.scale,
+    };
+  }
+  
+  private create(x: number, y: number): void {
+    const { fontSize, fontFamily, color, bgColor, paddingX, paddingY, prefix, scale: s } = this.config;
+    const scaledFontSize = Math.round(fontSize * s);
+    const scaledPaddingX = Math.round(paddingX * s);
+    const scaledPaddingY = Math.round(paddingY * s);
+    
+    // 创建 DOM 元素
+    this.element = document.createElement('div');
+    this.element.className = 'score-ui';
+    this.element.textContent = `${prefix}${this.score}`;
+    
+    // 应用样式
+    Object.assign(this.element.style, {
+      position: 'fixed',
+      left: `${x}px`,
+      top: `${y}px`,
+      fontSize: `${scaledFontSize}px`,
+      fontFamily: fontFamily,
+      color: color,
+      fontWeight: 'bold',
+      backgroundColor: bgColor,
+      padding: `${scaledPaddingY}px ${scaledPaddingX}px`,
+      borderRadius: '4px',
+      zIndex: '100',
+      pointerEvents: 'none',
+      userSelect: 'none',
+      whiteSpace: 'nowrap',
+      // 响应式：根据视口宽度自动缩放
+      transform: 'scale(var(--score-ui-scale, 1))',
+      transformOrigin: 'top left',
+    } as CSSStyleDeclaration);
+    
+    // 添加到 body
+    document.body.appendChild(this.element);
+    
+    // 响应式处理
+    this.setupResponsive();
+  }
+  
+  /**
+   * 设置响应式缩放
+   * 移动端下自动放大，PC端保持原尺寸
+   */
+  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('--score-ui-scale', scale.toString());
+    };
+    
+    updateScale();
+    window.addEventListener('resize', updateScale);
+    
+    // 保存清理函数
+    (this.element as any)._cleanupResize = () => {
+      window.removeEventListener('resize', updateScale);
+    };
+  }
+  
+  /**
+   * 增加分数（默认使用 DEFAULT_POINTS_PER_MATCH）
+   */
+  public add(points: number = DEFAULT_POINTS_PER_MATCH): void {
+    this.score += points;
+    this.refresh();
+  }
+
+  /**
+   * 获取当前分数
+   */
+  public getScore(): number {
+    return this.score;
+  }
+
+  /**
+   * 直接设置分数
+   */
+  public update(score: number): void {
+    this.score = score;
+    this.refresh();
+  }
+
+  private refresh(): void {
+    if (this.element) {
+      this.element.textContent = `${this.config.prefix}${this.score}`;
+    }
+  }
+  
+  /**
+   * 获取配置（用于调试或外部读取）
+   */
+  public getConfig(): FullScoreUIConfig {
+    return { ...this.config };
+  }
+  
+  /**
+   * 销毁组件
+   */
+  public destroy(): void {
+    if (this.element) {
+      // 清理响应式监听器
+      const cleanup = (this.element as any)._cleanupResize;
+      if (cleanup) cleanup();
+      
+      // 从 DOM 移除
+      this.element.remove();
+    }
+  }
+}

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

@@ -0,0 +1,43 @@
+import * as Phaser from 'phaser';
+import { PlayButton } from './PlayButton';
+
+/**
+ * 通用成功 UI 组件
+ * 显示半透明遮罩 + "You Win!" + PlayButton
+ * 
+ * 纹理依赖（间接通过 PlayButton）：
+ * - interact 合图中的 playBtn 帧
+ */
+export class SuccessUI {
+  private scene: Phaser.Scene;
+
+  constructor(scene: Phaser.Scene) {
+    this.scene = scene;
+  }
+
+  /**
+   * 显示成功浮层
+   * @param depth 渲染层级（默认 300，遮罩层）
+   */
+  public show(depth: number = 300): void {
+    const { width, height } = this.scene.scale;
+
+    // 半透明遮罩
+    const overlay = this.scene.add.graphics().setDepth(depth);
+    overlay.fillStyle(0x000000, 0.6);
+    overlay.fillRect(0, 0, width, height);
+
+    const contentDepth = depth + 1;
+
+    // "You Win!" 文字
+    this.scene.add.text(width / 2, height / 2 - 40, 'You Win!', {
+      fontFamily: 'Arial, sans-serif',
+      fontSize: '56px',
+      color: '#ffffff',
+      fontStyle: 'bold'
+    }).setOrigin(0.5).setDepth(contentDepth);
+
+    // Play 按钮
+    new PlayButton(this.scene).show(width / 2, height / 2 + 50, 0.45, contentDepth);
+  }
+}

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

@@ -0,0 +1,15 @@
+/**
+ * UI 组件统一导出
+ */
+export { BrainAgeUI } from './BrainAgeUI';
+export type { BrainAgeUIConfig, BrainAgeGameConfig } from './BrainAgeUI';
+
+export { CountdownUI, DEFAULT_COUNTDOWN, DEFAULT_WARN_TIME } from './CountdownUI';
+export type { CountdownUIConfig } from './CountdownUI';
+
+export { ScoreUI, DEFAULT_POINTS_PER_MATCH, DEFAULT_X, DEFAULT_Y } from './ScoreUI';
+export type { ScoreUIConfig } from './ScoreUI';
+
+export { SuccessUI } from './SuccessUI';
+
+export { PlayButton } from './PlayButton';

package/project-templates/playable-template-phaser/tsconfig.json

@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "outDir": "./dist",
+    "target": "es5",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "noFallthroughCasesInSwitch": true,
+    "strictPropertyInitialization": false,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "sourceMap": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "paths": {
+      "assets/*": ["./assets/*"],
+      "@/*": ["./src/*"],
+      "src/*": ["./src/*"]
+    }
+  },
+  "exclude": ["node_modules", "tests"]
+}

package/project-templates/playable-template-phaser/vite.config.ts

@@ -0,0 +1,64 @@
+import { defineConfig } from "vite";
+import path from "path";
+import JSON5 from "json5";
+import fs from "fs";
+
+// 自定义 Vite 插件：支持 .json5 文件导入
+function json5Plugin() {
+  return {
+    name: "vite-plugin-json5",
+    transform(code: string, id: string) {
+      if (id.endsWith(".json5")) {
+        const raw = fs.readFileSync(id, "utf-8");
+        const parsed = JSON5.parse(raw);
+        return {
+          code: `export default ${JSON.stringify(parsed)};`,
+          map: null,
+        };
+      }
+    },
+  };
+}
+
+export default defineConfig({
+  // 项目根目录（index.html 所在位置）
+  root: ".",
+
+  // 路径别名，匹配 tsconfig 中的 paths 配置
+  resolve: {
+    alias: {
+      assets: path.resolve(__dirname, "assets"),
+      "@": path.resolve(__dirname, "src"),
+      src: path.resolve(__dirname, "src"),
+    },
+  },
+
+  plugins: [json5Plugin()],
+
+  // 全局常量定义，匹配 @playcraft/devkit 的 defines
+  define: {
+    __DEV__: JSON.stringify(true),
+    AD_NETWORK: JSON.stringify("preview"),
+    AD_PROTOCOL: JSON.stringify("none"),
+    GOOGLE_PLAY_URL: JSON.stringify("https://play.google.com/store/apps/details?id=com.nextinitiatives.minigames.mpp"),
+    APP_STORE_URL: JSON.stringify("https://apps.apple.com/app/id6758609907"),
+    APP: JSON.stringify("playable-template-phaser"),
+    NAME: JSON.stringify("Phaser Template"),
+    VERSION: JSON.stringify("1.0.0"),
+    LANGUAGE: JSON.stringify("auto"),
+    ORIENTATION: JSON.stringify("both"),
+    BUILD_HASH: JSON.stringify("dev"),
+  },
+
+  // 开发服务器配置
+  server: {
+    port: 3000,
+    open: true,
+  },
+
+  // 构建配置
+  build: {
+    outDir: "dist",
+    sourcemap: true,
+  },
+});

package/project-templates/playable-template-phaser//346/226/260/346/211/213/345/274/200/345/217/221/346/214/207/345/215/227.md

@@ -0,0 +1,209 @@
+# 新手开发指南
+
+欢迎使用 Phaser 可玩广告模板！本指南将帮助你快速上手。
+
+## 第一步：安装依赖
+
+```bash
+npm install
+```
+
+## 第二步：启动开发服务器
+
+```bash
+# 推荐：使用 Vite（速度快，支持 HMR）
+npm run dev
+
+# 或使用 playable-scripts（与构建环境一致）
+npm run dev:wp
+```
+
+浏览器会自动打开 `http://localhost:3000`
+
+## 第三步：修改主题配置
+
+### 方式一：修改配置值
+
+编辑 `src/theme/blue-theme/theme.data.json5`：
+
+```json5
+{
+  name: '我的主题',
+  id: 'my-theme',
+
+  visual: {
+    backgroundColor: 0x123456, // 修改背景色
+    primaryColor: 0x654321,
+    // ...
+  },
+
+  gameplay: {
+    difficulty: 8, // 修改难度
+    enableHints: false,
+  },
+}
+```
+
+### 方式二：切换主题
+
+编辑 `src/theme/index.ts`：
+
+```typescript
+export { default } from './blue-theme'; // 蓝色主题
+// export { default } from './green-theme';  // 绿色主题
+// export { default } from './red-theme';     // 红色主题
+```
+
+## 第四步：添加资源
+
+### 添加公共资源
+
+1. 将资源放到 `assets/` 目录
+2. 在代码中 import：
+
+```typescript
+import myImage from 'assets/my-image.png';
+```
+
+### 添加主题特定资源
+
+1. 将资源放到 `src/theme/blue-theme/assets/`
+2. 在主题的 `index.ts` 中 import 并映射：
+
+```typescript
+import myImage from './assets/my-image.png';
+
+const assetRecordByPath: Record<string, string> = {
+  './assets/my-image.png': myImage,
+};
+```
+
+3. 在 `theme.schema.json5` 中定义：
+
+```json5
+assets: {
+  myImage: {
+    type: "string",
+    default: "./assets/my-image.png",
+    description: "我的图片",
+    xplatform: { value_type: "path", mime_type: "image/png" },
+  },
+}
+```
+
+4. 在代码中使用：
+
+```typescript
+import { GameThemeConfig } from './config/ThemeConfig';
+const imageUrl = GameThemeConfig.ASSET_MY_IMAGE;
+```
+
+## 第五步：修改游戏逻辑
+
+编辑 `src/scenes/MainScene.ts`，这是主游戏场景。
+
+### 读取配置
+
+```typescript
+import { GameThemeConfig } from '../config/ThemeConfig';
+
+// 读取配置
+const difficulty = GameThemeConfig.DIFFICULTY;
+const bgColor = GameThemeConfig.BACKGROUND_COLOR;
+```
+
+### 添加游戏元素
+
+```typescript
+create() {
+  // 添加精灵
+  const sprite = this.add.sprite(100, 100, 'myImage');
+
+  // 添加文本
+  const text = this.add.text(100, 200, 'Hello!', {
+    fontSize: '32px',
+    color: GameThemeConfig.TEXT_COLOR
+  });
+
+  // 添加交互
+  sprite.setInteractive();
+  sprite.on('pointerdown', () => {
+    console.log('点击了精灵！');
+  });
+}
+```
+
+## 第六步：构建生产版本
+
+### 构建单个渠道
+
+```bash
+npm run build -- google
+```
+
+输出在 `dist/` 目录。
+
+### 批量构建所有渠道
+
+```bash
+npm run builds
+```
+
+输出在 `dist-all/` 目录。
+
+## 常见任务
+
+### 修改 Loading 页面
+
+编辑 `src/theme/theme.schema.json5` 的 `loading` 部分：
+
+```json5
+loading: {
+  appTitle: {
+    type: "string",
+    default: "My Game",
+    description: "应用标题",
+  },
+  // ...
+}
+```
+
+### 添加音频
+
+1. 将音频文件放到 `assets/`
+2. 在 `src/scenes/PreloadScene.ts` 中加载：
+
+```typescript
+this.load.audio('bgm', 'assets/bgm.mp3');
+```
+
+3. 在 `MainScene.ts` 中播放：
+
+```typescript
+this.audioManager.playBGM('bgm');
+```
+
+### 调试渠道
+
+```bash
+# 本地预览时模拟 Google Ads 渠道
+npm run dev
+
+# 模拟 Facebook 渠道
+npm run dev:wp facebook
+```
+
+## 获取帮助
+
+- 查看 [README.md](./README.md) 了解详细功能
+- 查看 [CLAUDE.md](./CLAUDE.md) 了解架构设计
+- 查看 [Phaser 官方文档](https://phaser.io/learn)
+- 查看主题元数据：`src/theme/theme.metadata.md`
+
+## 下一步
+
+- 学习 Phaser 基础：https://phaser.io/tutorials
+- 了解可玩广告规范：各渠道的尺寸和功能限制
+- 探索 UI 组件：`src/ui/` 目录中的示例组件
+
+祝开发顺利！🎮