@playcraft/cli 0.0.53 → 0.0.55

package/project-templates/playable-template-three/src/Game.ts

@@ -0,0 +1,215 @@
+import { sdk } from '@playcraft/adsdk';
+import * as THREE from 'three';
+import { AudioManager } from './managers/AudioManager';
+import { PreloadScene, PreloadResources } from './scenes/PreloadScene';
+import themeConfig from './theme/current';
+
+export class Game {
+  private scene: THREE.Scene;
+  private camera: THREE.PerspectiveCamera;
+  private renderer: THREE.WebGLRenderer;
+  private uiContainer: HTMLDivElement;
+  private installButton: HTMLDivElement;
+  private storkModel: THREE.Group;
+  private mixer: THREE.AnimationMixer;
+  private clock: THREE.Clock;
+  public isPaused: boolean = false;
+  
+  // Audio Manager
+  private audioManager: AudioManager;
+
+  constructor(width: number, height: number) {
+    // 创建 PreloadScene
+    const preloadScene = new PreloadScene();
+    preloadScene.start((resources: PreloadResources) => {
+      // 资源加载完成，初始化游戏
+      this.initGame(width, height, resources);
+      // 通知 SDK 游戏开始
+      sdk.start();
+    });
+  }
+
+  private initGame(width: number, height: number, resources: PreloadResources): void {
+    // 初始化 AudioManager（示例配置，可根据需要调整）
+    this.audioManager = new AudioManager({
+      bgmVolume: 0.5,
+      effectVolume: 0.6,
+      enableBackgroundPause: true,
+      watchdogInterval: 500
+    });
+    this.audioManager.init();
+
+    // Create renderer
+    this.renderer = new THREE.WebGLRenderer({ antialias: true });
+    this.renderer.setSize(width, height);
+    this.renderer.setPixelRatio(1.5);
+    document.body.appendChild(this.renderer.domElement);
+
+    // Create THREE.js scene（使用主题配置）
+    this.scene = new THREE.Scene();
+    this.scene.background = new THREE.Color(themeConfig.sceneBackground);
+
+    // Create camera
+    this.camera = new THREE.PerspectiveCamera(75, width / height, 0.1, 1000);
+
+    // Initialize clock for animations
+    this.clock = new THREE.Clock();
+
+    // Create UI container
+    this.uiContainer = document.createElement('div');
+    this.uiContainer.style.cssText = 'position: absolute; top: 0px; left: 0px; transform-origin: top left;';
+    document.body.appendChild(this.uiContainer);
+
+    // 使用预加载的资源创建场景
+    this.create(resources);
+  }
+
+  private create(resources: PreloadResources): void {
+    this.createUI(resources.buttonImage);
+
+    // Add lights（使用主题配置）
+    const ambientLight = new THREE.AmbientLight(
+      themeConfig.ambientLightColor,
+      themeConfig.ambientLightIntensity
+    );
+    this.scene.add(ambientLight);
+
+    const directionalLight = new THREE.DirectionalLight(
+      themeConfig.directionalLightColor,
+      themeConfig.directionalLightIntensity
+    );
+    directionalLight.position.set(5, 5, 5);
+    this.scene.add(directionalLight);
+
+    // 添加 3D 模型（使用主题配置的缩放）
+    if (resources.storkModel) {
+      this.storkModel = resources.storkModel.scene;
+      const scale = themeConfig.modelScale || 0.5;
+      this.storkModel.scale.set(scale, scale, scale);
+      this.scene.add(this.storkModel);
+
+      // Set up animation mixer
+      this.mixer = new THREE.AnimationMixer(this.storkModel);
+
+      // Play first animation
+      if (resources.storkModel.animations.length > 0) {
+        const action = this.mixer.clipAction(resources.storkModel.animations[0]);
+        action.play();
+      }
+    }
+
+    // Set up interaction listener
+    sdk.on('interaction', (count: number) => {
+      console.log(`Interaction count: ${count}`);
+
+      if (sdk.interactions >= 10) {
+        sdk.finish();
+      }
+    });
+
+    // Start animation loop
+    this.animate();
+  }
+
+  private createUI(buttonImage: HTMLImageElement | null): void {
+    this.installButton = document.createElement('div');
+    this.installButton.style.cssText =
+      'cursor: pointer; width: 200px; display: flex; align-items: center; justify-content: center; margin: 20px;';
+    this.installButton.onclick = () => {
+      // 用户交互时可以播放音效或BGM
+      // 示例：this.audioManager.playEffect('click');
+      // 示例：this.audioManager.playBgm();
+      sdk.install();
+    };
+
+    // Add image
+    if (buttonImage) {
+      buttonImage.style.width = '100%';
+      this.installButton.appendChild(buttonImage);
+    }
+
+    // Add text overlay（使用主题配置）
+    const text = document.createElement('div');
+    text.textContent = 'Install';
+    text.style.cssText = `
+      position: absolute;
+      color: ${themeConfig.uiTextColor};
+      font-size: ${themeConfig.buttonStyle.fontSize};
+      font-weight: ${themeConfig.buttonStyle.fontWeight};
+      text-shadow: ${themeConfig.buttonStyle.textShadow};
+      pointer-events: none;
+      font-family: cursive;
+    `;
+    this.installButton.appendChild(text);
+
+    this.uiContainer.appendChild(this.installButton);
+  }
+
+  private update(): void {
+    if (this.mixer) {
+      const delta = this.clock.getDelta();
+      this.mixer.update(delta);
+    }
+
+    if (this.storkModel) {
+      const speed = themeConfig.rotationSpeed || 0.01;
+      this.storkModel.rotation.y += speed;
+    }
+  }
+
+  private animate(): void {
+    requestAnimationFrame(() => this.animate());
+
+    if (!this.isPaused) this.update();
+
+    this.renderer.render(this.scene, this.camera);
+  }
+
+  public resize(width: number, height: number): void {
+    // Update container size
+    this.uiContainer.style.width = `${width}px`;
+    this.uiContainer.style.height = `${height}px`;
+
+    // Calculate scale based on screen dimensions
+    const scaleX = width / 320;
+    const scaleY = height / 480;
+    const scale = Math.min(scaleX, scaleY); // Use smaller scale to fit both dimensions
+
+    this.uiContainer.style.transform = `scale(${scale})`;
+
+    // Update camera aspect ratio
+    this.camera.aspect = width / height;
+    
+    // 使用主题配置的相机距离（如果有），否则使用默认值
+    const landscapeDistance = themeConfig.cameraDistance || 80;
+    const portraitDistance = landscapeDistance * 2;
+    this.camera.position.z = width > height ? landscapeDistance : portraitDistance;
+    
+    this.camera.updateProjectionMatrix();
+
+    // Resize renderer
+    this.renderer.setSize(width, height);
+  }
+
+  public pause(): void {
+    this.isPaused = true;
+    this.audioManager.setGamePaused(true);
+    console.log('Game paused');
+  }
+
+  public resume(): void {
+    this.isPaused = false;
+    this.audioManager.setGamePaused(false);
+    console.log('Game resumed');
+  }
+
+  public volume(value: number): void {
+    this.audioManager.setVolume(value);
+    console.log(`Volume changed to: ${value}`);
+  }
+
+  public finish(): void {
+    this.audioManager.setGameEnded(true);
+    console.log('Game finished');
+  }
+}

package/project-templates/playable-template-three/src/config/LoadingConfig.ts

@@ -0,0 +1,27 @@
+/**
+ * Loading 页面配置
+ * 可根据实际项目需要修改
+ */
+
+// TODO: 替换为实际的 Logo 图片路径
+import logoImage from 'assets/logo.webp';
+
+export const LoadingConfig = {
+  // 文案配置
+  LOGO_IMAGE: logoImage,                    // Logo 图片
+  APP_TITLE: 'Vita Mahjong',                // 应用标题
+  APP_STARS: '★★★★★',                       // 评分星星
+  APP_DESC: 'Relaxing Vita Mahjong: Classic Tile\nMatching and Offline Puzzle Games!...', // 应用描述
+  LOADING_TEXT: 'Loading Playable Ads',     // 加载文字
+  GAMEPAD_ICON: '🎮',   
+  
+  // 时间配置
+  SCENE_DURATION: 100,                     // Loading 页面最小显示时长（毫秒）
+  DOT_ANIM_DELAY: 200,                      // 点号动画间隔（毫秒）
+  
+  // 跳跃动画配置
+  BOUNCE_HEIGHT_LANDSCAPE: 8,              // 横屏跳跃高度
+  BOUNCE_HEIGHT_PORTRAIT: 10,               // 竖屏跳跃高度
+  BOUNCE_DURATION: 300,                     // 跳跃动画时长（毫秒）
+  BOUNCE_REPEAT_DELAY: 100,                 // 跳跃重复延迟（毫秒）
+};

package/project-templates/playable-template-three/src/config/ThemeConfig.ts

@@ -0,0 +1,36 @@
+/**
+ * 主题配置接口
+ * 定义主题的数据结构，包括颜色、样式等配置
+ */
+
+export interface ThemeConfig {
+  // 基础信息
+  name: string;                    // 主题名称
+  id: string;                      // 主题唯一标识
+  
+  // 场景配置
+  sceneBackground: number;         // 场景背景色（THREE.Color 值）
+  
+  // 光照配置
+  ambientLightColor: number;       // 环境光颜色
+  ambientLightIntensity: number;   // 环境光强度
+  directionalLightColor: number;   // 方向光颜色
+  directionalLightIntensity: number; // 方向光强度
+  
+  // UI 配置
+  uiPrimaryColor: string;          // 主色调（CSS 颜色）
+  uiTextColor: string;             // 文字颜色
+  buttonStyle: {
+    fontSize: string;
+    fontWeight: string;
+    textShadow: string;
+  };
+  
+  // 可选：游戏特定配置
+  modelScale?: number;             // 模型缩放比例
+  cameraDistance?: number;         // 相机距离
+  rotationSpeed?: number;          // 旋转速度
+  
+  // 可选：自定义配置
+  [key: string]: any;
+}

package/project-templates/playable-template-three/src/global.d.ts

@@ -0,0 +1,108 @@
+/**
+ * 全局类型声明
+ * 用于声明非 TypeScript 模块的类型
+ */
+
+// 图片资源模块声明
+declare module '*.png' {
+  const value: string;
+  export default value;
+}
+
+declare module '*.jpg' {
+  const value: string;
+  export default value;
+}
+
+declare module '*.jpeg' {
+  const value: string;
+  export default value;
+}
+
+declare module '*.gif' {
+  const value: string;
+  export default value;
+}
+
+declare module '*.svg' {
+  const value: string;
+  export default value;
+}
+
+declare module '*.webp' {
+  const value: string;
+  export default value;
+}
+
+declare module '*.ico' {
+  const value: string;
+  export default value;
+}
+
+declare module '*.bmp' {
+  const value: string;
+  export default value;
+}
+
+// 3D 模型文件声明
+declare module '*.glb' {
+  const value: string;
+  export default value;
+}
+
+declare module '*.gltf' {
+  const value: string;
+  export default value;
+}
+
+declare module '*.fbx' {
+  const value: string;
+  export default value;
+}
+
+declare module '*.obj' {
+  const value: string;
+  export default value;
+}
+
+// 音频文件声明
+declare module '*.mp3' {
+  const value: string;
+  export default value;
+}
+
+declare module '*.wav' {
+  const value: string;
+  export default value;
+}
+
+declare module '*.ogg' {
+  const value: string;
+  export default value;
+}
+
+declare module '*.m4a' {
+  const value: string;
+  export default value;
+}
+
+// 其他资源文件声明
+declare module '*.json' {
+  const value: any;
+  export default value;
+}
+
+declare module '*.css' {
+  const value: any;
+  export default value;
+}
+
+declare module '*.scss' {
+  const value: any;
+  export default value;
+}
+
+declare module '*.less' {
+  const value: any;
+  export default value;
+}

package/project-templates/playable-template-three/src/index.css

@@ -0,0 +1,18 @@
+body,
+html {
+  margin: 0;
+  padding: 0;
+}
+html {
+  background-color: #fff;
+  overflow: hidden;
+  width: 100%;
+  height: 100%;
+}
+body {
+  height: inherit;
+  width: inherit;
+}
+* {
+  -webkit-tap-highlight-color: transparent;
+}

package/project-templates/playable-template-three/src/index.html

@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Three.js Playable Template</title>
+  </head>
+  <body>
+  </body>
+</html>

package/project-templates/playable-template-three/src/index.ts

@@ -0,0 +1,20 @@
+import { Game } from './Game';
+import './index.css';
+import { sdk } from '@playcraft/adsdk';
+
+// Initialize the SDK
+sdk.init((width: number, height: number) => {
+  // Initialize game with container dimensions
+  const game = new Game(width, height);
+
+  // Set up all event listeners
+  sdk.on('resize', game.resize, game);
+  sdk.on('pause', game.pause, game);
+  sdk.on('resume', game.resume, game);
+  sdk.on('volume', game.volume, game);
+  sdk.on('finish', game.finish, game);
+});
+
+if (__DEV__) {
+  console.log('Development mode');
+}