npm - @playcraft/skills - Versions diffs - 0.0.2 - Mend

@playcraft/skills 0.0.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (479) hide show

package/skills/threejs.aicomponent/ref/globals.d.ts ADDED Viewed

@@ -0,0 +1,74 @@
+declare module "*.png" {
+  const src: string;
+  export default src;
+}
+declare module "*.webp" {
+  const src: string;
+  export default src;
+}
+declare module "*.jpg" {
+  const src: string;
+  export default src;
+}
+declare module "*.jpeg" {
+  const src: string;
+  export default src;
+}
+declare module "*.svg" {
+  const src: string;
+  export default src;
+}
+declare module "*.gif" {
+  const src: string;
+  export default src;
+}
+declare module "*.mp3" {
+  const src: string;
+  export default src;
+}
+declare module "*.ogg" {
+  const src: string;
+  export default src;
+}
+declare module "*.wav" {
+  const src: string;
+  export default src;
+}
+declare module "*.m4a" {
+  const src: string;
+  export default src;
+}
+declare module "*.glb" {
+  const src: string;
+  export default src;
+}
+declare module "*.gltf" {
+  const src: string;
+  export default src;
+}
+declare module "*.fbx" {
+  const src: string;
+  export default src;
+}
+declare module "*.obj" {
+  const src: string;
+  export default src;
+}
+declare module "*.hdr" {
+  const src: string;
+  export default src;
+}
+declare module "*.exr" {
+  const src: string;
+  export default src;
+}
+declare module "*.json" {
+  const value: any;
+  export default value;
+}
+declare const __DEV__: boolean;

package/skills/threejs.aicomponent/ref/index.css ADDED Viewed

@@ -0,0 +1,80 @@
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  -webkit-tap-highlight-color: transparent;
+}
+html,
+body {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  background-color: #000;
+  -webkit-user-select: none;
+  user-select: none;
+  -webkit-touch-callout: none;
+  overscroll-behavior: none;
+  touch-action: none;
+}
+#game-container {
+  width: 100%;
+  height: 100%;
+  padding-top: env(safe-area-inset-top);
+  padding-bottom: env(safe-area-inset-bottom);
+  padding-left: env(safe-area-inset-left);
+  padding-right: env(safe-area-inset-right);
+}
+#game-container canvas {
+  display: block;
+  width: 100% !important;
+  height: 100% !important;
+}
+/* ─── Loading overlay ─── */
+#loading-overlay {
+  position: fixed;
+  inset: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  background: #1a1a2e;
+  z-index: 1000;
+  transition: opacity 0.4s ease-out;
+}
+#loading-overlay.hidden {
+  opacity: 0;
+  pointer-events: none;
+}
+.loading-bar-track {
+  width: 200px;
+  height: 6px;
+  background: #333;
+  border-radius: 3px;
+  overflow: hidden;
+}
+.loading-bar-fill {
+  width: 0%;
+  height: 100%;
+  background: #4488ff;
+  border-radius: 3px;
+  transition: width 0.15s ease-out;
+}
+.loading-text {
+  margin-top: 12px;
+  font-size: 13px;
+  color: #aaa;
+  font-family: Arial, sans-serif;
+}

package/skills/threejs.aicomponent/ref/index.html ADDED Viewed

@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover" />
+    <meta name="apple-mobile-web-app-capable" content="yes" />
+    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
+    <meta name="format-detection" content="telephone=no" />
+    <title>Three.js Game</title>
+  </head>
+  <body>
+    <div id="game-container"></div>
+    <div id="loading-overlay">
+      <div class="loading-bar-track">
+        <div class="loading-bar-fill" id="loading-bar"></div>
+      </div>
+      <div class="loading-text" id="loading-text">Loading...</div>
+    </div>
+  </body>
+</html>

package/skills/threejs.aicomponent/ref/index.ts ADDED Viewed

@@ -0,0 +1,117 @@
+import * as THREE from "three";
+import { GameConfig } from "./GameConfig";
+import { SceneManager } from "./SceneManager";
+import { SceneKeys } from "./SceneKeys";
+import { PreloaderScene } from "./scenes/PreloaderScene";
+import { MainScene } from "./scenes/MainScene";
+import { ViewportManager } from "./utils/ViewportManager";
+export type GameInstance = {
+  renderer: THREE.WebGLRenderer;
+  camera: THREE.PerspectiveCamera;
+  sceneManager: SceneManager;
+  viewportManager: ViewportManager;
+  clock: THREE.Clock;
+  dispose: () => void;
+};
+/**
+ * 创建并启动 Three.js 游戏实例。
+ *
+ * 自动配置：WebGLRenderer（抗锯齿 + 阴影 + 色调映射）、
+ * PerspectiveCamera、SceneManager（Preloader → Main 生命周期）、
+ * ViewportManager（响应式 resize）、requestAnimationFrame 主循环。
+ */
+export function StartGame(containerId: string): GameInstance {
+  const container = document.getElementById(containerId);
+  if (!container) throw new Error(`Container #${containerId} not found`);
+  // ─── Renderer ───
+  const renderer = new THREE.WebGLRenderer({
+    antialias: GameConfig.antialias,
+    alpha: false,
+    powerPreference: "high-performance",
+  });
+  renderer.setPixelRatio(Math.min(window.devicePixelRatio, GameConfig.maxPixelRatio));
+  renderer.setSize(container.clientWidth, container.clientHeight);
+  renderer.shadowMap.enabled = GameConfig.shadows;
+  renderer.shadowMap.type = THREE.PCFSoftShadowMap;
+  const tmMap: Record<string, THREE.ToneMapping> = {
+    ACESFilmic: THREE.ACESFilmicToneMapping,
+    Linear: THREE.LinearToneMapping,
+    Reinhard: THREE.ReinhardToneMapping,
+    Cineon: THREE.CineonToneMapping,
+  };
+  renderer.toneMapping = tmMap[GameConfig.toneMapping] ?? THREE.ACESFilmicToneMapping;
+  renderer.toneMappingExposure = GameConfig.toneMappingExposure;
+  container.appendChild(renderer.domElement);
+  // ─── Camera ───
+  const aspect = container.clientWidth / container.clientHeight;
+  const cam = GameConfig.camera;
+  const camera = new THREE.PerspectiveCamera(cam.fov, aspect, cam.near, cam.far);
+  camera.position.set(cam.position.x, cam.position.y, cam.position.z);
+  camera.lookAt(cam.lookAt.x, cam.lookAt.y, cam.lookAt.z);
+  // ─── Scene Manager ───
+  const sceneManager = new SceneManager(camera);
+  sceneManager.register(new PreloaderScene(), new MainScene());
+  // ─── Viewport Manager ───
+  const viewportManager = new ViewportManager(renderer, camera, container);
+  viewportManager.enable();
+  // ─── Start first scene ───
+  const startScene =
+    GameConfig.debugScene === "main" ? SceneKeys.Main : SceneKeys.Preloader;
+  sceneManager.switchTo(startScene);
+  // ─── Animation Loop ───
+  const clock = new THREE.Clock();
+  let animFrameId = 0;
+  function animate() {
+    animFrameId = requestAnimationFrame(animate);
+    const dt = clock.getDelta();
+    const elapsed = clock.getElapsedTime();
+    sceneManager.update(dt, elapsed);
+    const activeScene = sceneManager.activeThreeScene;
+    if (activeScene) {
+      renderer.render(activeScene, camera);
+    }
+  }
+  animate();
+  // ─── Dispose ───
+  function dispose() {
+    cancelAnimationFrame(animFrameId);
+    viewportManager.disable();
+    sceneManager.dispose();
+    renderer.dispose();
+    renderer.domElement.remove();
+  }
+  const instance: GameInstance = {
+    renderer,
+    camera,
+    sceneManager,
+    viewportManager,
+    clock,
+    dispose,
+  };
+  if (typeof __DEV__ !== "undefined" && __DEV__) {
+    (window as any).__THREE_GAME__ = instance;
+    (window as any).THREE = THREE;
+    console.log("[Game] Started", {
+      viewport: { w: container.clientWidth, h: container.clientHeight, dpr: window.devicePixelRatio },
+      renderer: { antialias: GameConfig.antialias, shadows: GameConfig.shadows },
+    });
+  }
+  return instance;
+}

package/skills/threejs.aicomponent/ref/main.ts ADDED Viewed

@@ -0,0 +1,10 @@
+import "./index.css";
+import { StartGame } from "./game";
+document.addEventListener("DOMContentLoaded", () => {
+  StartGame("game-container");
+});
+if (__DEV__) {
+  console.log("Development mode");
+}

package/skills/threejs.aicomponent/ref/package.json ADDED Viewed

@@ -0,0 +1,23 @@
+{
+  "name": "playable-ad",
+  "version": "1.0.0",
+  "description": "Playable Ad - Three.js",
+  "scripts": {
+    "dev": "webpack serve --mode development",
+    "build": "webpack --mode production"
+  },
+  "dependencies": {
+    "three": "^0.172.0"
+  },
+  "devDependencies": {
+    "@types/three": "^0.172.0",
+    "typescript": "^5.3.0",
+    "webpack": "^5.90.0",
+    "webpack-cli": "^5.1.0",
+    "webpack-dev-server": "^5.0.0",
+    "ts-loader": "^9.5.0",
+    "html-webpack-plugin": "^5.6.0",
+    "css-loader": "^6.10.0",
+    "style-loader": "^3.3.0"
+  }
+}

package/skills/threejs.aicomponent/ref/tsconfig.json ADDED Viewed

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

package/skills/threejs.aicomponent/ref/webpack.config.js ADDED Viewed

@@ -0,0 +1,61 @@
+const path = require('path');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const webpack = require('webpack');
+module.exports = (env, argv) => {
+  const isDev = argv.mode === 'development';
+  return {
+    entry: './src/main.ts',
+    output: {
+      filename: 'bundle.js',
+      path: path.resolve(__dirname, 'dist'),
+      clean: true,
+    },
+    resolve: {
+      extensions: ['.ts', '.js'],
+      alias: {
+        assets: path.resolve(__dirname, 'assets'),
+      },
+    },
+    module: {
+      rules: [
+        {
+          test: /\.ts$/,
+          use: 'ts-loader',
+          exclude: /node_modules/,
+        },
+        {
+          test: /\.css$/,
+          use: ['style-loader', 'css-loader'],
+        },
+        {
+          test: /\.(mp3|ogg|wav|m4a)$/,
+          type: 'asset/resource',
+        },
+        {
+          test: /\.(png|jpg|jpeg|webp|svg|gif|hdr|exr)$/,
+          type: 'asset/resource',
+        },
+        {
+          test: /\.(glb|gltf|fbx|obj)$/,
+          type: 'asset/resource',
+        },
+      ],
+    },
+    plugins: [
+      new HtmlWebpackPlugin({
+        template: './src/index.html',
+      }),
+      new webpack.DefinePlugin({
+        __DEV__: JSON.stringify(isDev),
+      }),
+    ],
+    devServer: {
+      static: './dist',
+      hot: true,
+      open: true,
+    },
+    devtool: isDev ? 'source-map' : false,
+  };
+};

package/skills/time_clear_goal.aiconfig/SKILL.md ADDED Viewed

@@ -0,0 +1,46 @@
+---
+name: time_clear_goal.aiconfig
+description: 限时清除目标机制配置封包 - 关卡目标为在限定时间内清除指定数量，营造紧迫感
+triggers: 限时,timer,时间,time,清除,clear,目标,goal,紧迫,pressure,倒计时,countdown,配置
+---
+# time_clear_goal.aiconfig
+限时清除目标机制配置封包。玩家需要在倒计时内清除指定数量的元素，营造强烈的紧迫感。
+## Recipe
+- **配置方式**：参数化（parametric）
+- **核心参数**：
+  - `goalType`: `"time_clear"`
+  - `timeLimitSeconds`: 60（限时秒数）
+  - `clearCount`: 30（需清除数量）
+- **可 fork 变体**：
+  - 极限挑战：`timeLimitSeconds: 30, clearCount: 40`
+  - 宽松入门：`timeLimitSeconds: 90, clearCount: 20`
+**配置步骤：**
+1. 读取 `game/config.json`
+2. 写入 `level.goalType = "time_clear"` 及时间和数量参数
+3. 更新 manifest
+## Result
+- **产物**：修改 `game/config.json` 键值
+- **目标键**：`level.goalType = "time_clear"`
+## Binding
+- **Binding Role**：`gameConfig`
+- **挂载目标**：`game/config.json`
+- **引用类型**：`config-key-value`
+## Skill Definition
+tools:
+  - read
+  - write
+prompt_extension: |
+  You are configuring a timed clear goal mechanism for a match game.
+  Write the time limit and clear count parameters to game/config.json per the Recipe.
+  This creates urgency and pressure in the gameplay. Apply the Binding.

package/skills/time_clear_goal.aiconfig/manifest.json ADDED Viewed

@@ -0,0 +1,32 @@
+{
+  "schemaVersion": 1,
+  "atomId": "time_clear_goal.aiconfig",
+  "bundleType": "aiconfig",
+  "category": "config",
+  "mode": "parametric",
+  "label": { "zh": "限时清除目标配置", "en": "Timed clear goal config" },
+  "tags": ["config", "goal", "timer", "time", "pressure", "mechanism", "level"],
+  "bindingRoles": ["gameConfig"],
+  "generation": {
+    "kind": "config-patch",
+    "params": {
+      "goalType": "time_clear",
+      "timeLimitSeconds": 60,
+      "clearCount": 30
+    }
+  },
+  "result": {
+    "configKey": "level.goalType",
+    "configValue": "time_clear",
+    "format": "json-patch"
+  },
+  "binding": {
+    "role": "gameConfig",
+    "target": "game/config.json",
+    "type": "config-key-value",
+    "constraints": { "key": "level.goalType" }
+  },
+  "files": {
+    "skill": "SKILL.md"
+  }
+}

package/skills/time_icon.aiimage/SKILL.md ADDED Viewed

@@ -0,0 +1,58 @@
+---
+name: time_icon.aiimage
+description: 顶部 UI 条中倒计时旁边的时钟/秒表图标。
+triggers: 需要生成倒计时时钟图标时触发。
+---
+# 倒计时图标
+## Recipe
+生成提示词见 manifest.json generation.prompt。
+- model: google/imagen-3.0-generate-002（默认，见 manifest.json generation.platformSkill）
+- format: webp, 透明背景
+## Result
+- 产物文件：`time.webp`
+- 在 Preloader.ts 中作为 `clockIcon` key 加载
+## Binding
+```json
+{
+  "role": "clockIcon",
+  "target": "assets/time.webp",
+  "type": "image-asset-reference"
+}
+```
+## 生成方式
+Platform Skill: `playcraft-image-generation`
+```bash
+# 1. 生成图片（参考 ref/ 中的参考图）
+playcraft tools generate-image \
+     --prompt "stopwatch or clock icon for game countdown timer UI, simple flat design, transparent background" \
+     --aspect-ratio 1:1 \
+     --reference-image ${SKILL_DIR}/ref/time.png \
+     --image-model google/imagen-3.0-generate-002 \
+     --output ta-workspace/raw.png
+# 2. 后处理（去白底 + 格式转换）
+playcraft image remove-background --input ta-workspace/raw.png --output ta-workspace/trimmed.png
+playcraft image convert --input ta-workspace/trimmed.png --output ta-workspace/time.webp --quality 85
+# 3. 将产物写入 sandbox 对应路径（见 binding.target）
+```
+## Skill Definition
+```yaml
+tools:
+  - generate_image
+inputs:
+  - prompt: see manifest.json
+outputs:
+  - image: time.webp
+```

package/skills/time_icon.aiimage/manifest.json ADDED Viewed

@@ -0,0 +1,47 @@
+{
+  "schemaVersion": 1,
+  "atomId": "time_icon.aiimage",
+  "bundleType": "aiimage",
+  "category": "visual",
+  "mode": "generative",
+  "label": {
+    "zh": "倒计时图标",
+    "en": "Countdown clock icon"
+  },
+  "tags": [
+    "visual",
+    "clock",
+    "timer",
+    "countdown",
+    "icon"
+  ],
+  "bindingRoles": [
+    "clockIcon"
+  ],
+  "generation": {
+    "kind": "image",
+    "prompt": "stopwatch or clock icon for game countdown timer UI, simple flat design, transparent background",
+    "aspectRatio": "1:1",
+    "model": "google/imagen-3.0-generate-002",
+    "referenceImage": "ref/time.png",
+    "platformSkill": "playcraft-image-generation"
+  },
+  "result": {
+    "outputFile": "ref/time.webp",
+    "format": "webp",
+    "constraints": {
+      "minWidth": 64,
+      "minHeight": 64
+    }
+  },
+  "binding": {
+    "role": "clockIcon",
+    "target": "assets/time.webp",
+    "type": "image-asset-reference"
+  },
+  "files": {
+    "skill": "SKILL.md",
+    "asset": "ref/time.webp",
+    "assetPng": "ref/time.png"
+  }
+}

package/skills/time_icon.aiimage/ref/time.png ADDED Viewed

Binary file

package/skills/time_icon.aiimage/ref/time.webp ADDED Viewed

Binary file

package/skills/top_ui_bar.aicomponent/SKILL.md ADDED Viewed

@@ -0,0 +1,45 @@
+---
+name: top_ui_bar.aicomponent
+description: 顶部 UI 条容器骨架。在屏幕顶部显示生命值指示器、倒计时和进度条等子组件，导出 GAME_TOP_UI_BAR_HEIGHT 供棋盘布局计算使用。
+triggers: 需要实现游戏顶部 HUD 布局容器时触发。
+---
+# 顶部 UI 条（Top UI Bar）
+**屏幕分区与顶/底/棋盘 z-order** 见 `playable_hud_layout.aicomponent`（框架无关）；缩放数学见 `responsive_2d_layout.aicomponent` 第一节。
+## Scaffold
+`src/game/scenes/GameUI/GameTopUI.ts`
+## Recipe
+| 决策 | 原因 |
+|------|------|
+| **导出高度常量给棋盘使用** | `GAME_TOP_UI_BAR_HEIGHT` 是顶部 UI 高度与棋盘布局之间的关键桥接；显式常量确保两者使用同一数值，不依赖运行时测量 |
+| **容器 vs 散布组件** | 将 HeartDisplay、CountdownDisplay、ProgressDisplay 统一放入 TopUI 容器管理，简化 GameScene 的 create() 逻辑 |
+| **遵从 HUD Layout 合同** | 顶栏高度与棋盘可用区域扣减通过 `playable_hud_layout.aicomponent` 约定，TopUI 不自行计算可用高度 |
+## Adapter
+- **Role**: `topUiBar` — 顶部 HUD 区域容器（生命值 + 倒计时 + 进度条）及高度常量提供者
+- **Provides**: `GameTopUI` 类、`GAME_TOP_UI_BAR_HEIGHT` 常量（供棋盘布局扣减使用）
+- **Requires**: `phaser.aicomponent`、`responsive_2d_layout.aicomponent`（屏幕缩放参数）
+- **Consumed by**: `game_scene.aicomponent`（实例化 TopUI）、`grid_board_layout.aicomponent`（`topUIHeight` 参数中引用 `GAME_TOP_UI_BAR_HEIGHT`）
+- **Integration point**: `src/game/scenes/GameUI/GameTopUI.ts` → `Game.create()` 中实例化并传入 `GAME_TOP_UI_BAR_HEIGHT` 到 `computeBoardLayout()`
+## Imports
+- `phaser.aicomponent` / `responsive_2d_layout.aicomponent`（硬依赖）
+## Skill Definition
+```yaml
+tools:
+  - read_file
+  - write_file
+inputs:
+  - source: src/game/scenes/GameUI/GameTopUI.ts
+outputs:
+  - gameTopUI: GameTopUI class + GAME_TOP_UI_BAR_HEIGHT constant
+```

package/skills/top_ui_bar.aicomponent/manifest.json ADDED Viewed

@@ -0,0 +1,27 @@
+{
+  "schemaVersion": 1,
+  "atomId": "top_ui_bar.aicomponent",
+  "bundleType": "aicomponent",
+  "category": "component",
+  "mode": "fixed",
+  "label": { "zh": "顶部 UI 条", "en": "Top UI bar" },
+  "tags": ["ui", "top-bar", "lives", "timer", "progress", "phaser"],
+  "bindingRoles": ["topUiBar"],
+  "scaffold": {
+    "files": {
+      "src/game/scenes/GameUI/GameTopUI.ts": { "source": "ref/GameTopUI.ts", "mode": "full", "weight": 10 }
+    }
+  },
+  "imports": [
+    { "slot": "engine", "pinAtomId": "phaser.aicomponent",               "edgeKind": "requires", "bindAs": "engine" },
+    { "slot": "layout", "pinAtomId": "responsive_2d_layout.aicomponent", "edgeKind": "requires", "bindAs": "layout" }
+  ],
+  "exports": [
+    { "name": "GameTopUI",             "kind": "class",    "location": "src/game/scenes/GameUI/GameTopUI.ts" },
+    { "name": "GAME_TOP_UI_BAR_HEIGHT","kind": "constant", "location": "src/game/scenes/GameUI/GameTopUI.ts" }
+  ],
+  "neutralDescriptor": {
+    "geometry": "horizontal UI bar at the top of the screen containing lives indicator, countdown timer, and progress bar sub-components"
+  },
+  "files": { "skill": "SKILL.md", "gameTopUI": "ref/GameTopUI.ts" }
+}