@coze-arch/cli 0.0.35 → 0.0.36-alpha.1b252b

package/lib/__templates__/phaser/scripts/dev.sh

@@ -0,0 +1,82 @@
+#!/bin/bash
+set -Eeuo pipefail
+
+COZE_WORKSPACE_PATH="${COZE_WORKSPACE_PATH:-$(pwd)}"
+PORT="${PORT:-<%= port %>}"
+DEPLOY_RUN_PORT="${DEPLOY_RUN_PORT:-${PORT}}"
+cd "${COZE_WORKSPACE_PATH}"
+
+get_listening_pids() {
+  local port="$1"
+
+  if command -v lsof >/dev/null 2>&1; then
+    lsof -tiTCP:"${port}" -sTCP:LISTEN 2>/dev/null || true
+  elif command -v ss >/dev/null 2>&1; then
+    ss -H -lntp 2>/dev/null \
+      | awk -v port="${port}" '$4 ~ ":"port"$"' \
+      | grep -o 'pid=[0-9]*' \
+      | cut -d= -f2 \
+      | sort -u || true
+  else
+    echo "Warning: neither lsof nor ss found, cannot check port ${port}." >&2
+  fi
+}
+
+kill_port_if_listening() {
+  local port="$1"
+  local pids
+
+  pids="$(get_listening_pids "${port}")"
+  if [[ -z "${pids}" ]]; then
+    echo "Port ${port} is free."
+    return
+  fi
+
+  echo "Port ${port} is in use by PIDs: ${pids//$'\n'/ } (SIGKILL)"
+  echo "${pids}" | xargs kill -9 2>/dev/null || true
+  sleep 1
+
+  pids="$(get_listening_pids "${port}")"
+  if [[ -n "${pids}" ]]; then
+    echo "Failed to clear port ${port}; remaining PIDs: ${pids//$'\n'/ }." >&2
+    return 1
+  fi
+
+  echo "Port ${port} cleared."
+}
+
+echo "Clearing port ${DEPLOY_RUN_PORT} before start."
+kill_port_if_listening "${DEPLOY_RUN_PORT}"
+
+<% if (process.env.NODE_ENV === 'test') { %>
+# Keep the process attached in tests so the test runner can collect logs and stop it.
+exec env COZE_PHASER_GAME_ENV=DEV pnpm vite \
+  --port "${DEPLOY_RUN_PORT}" \
+  --host 127.0.0.1 \
+  --strictPort
+<% } else { %>
+LOG_DIR="${COZE_WORKSPACE_PATH}/logs"
+LOG_FILE="${LOG_DIR}/phaser-dev.log"
+PID_FILE="${LOG_DIR}/phaser-dev.pid"
+mkdir -p "${LOG_DIR}"
+
+echo "Starting Phaser dev server on port ${DEPLOY_RUN_PORT}..."
+server_pid="$(COZE_PHASER_GAME_ENV=DEV node scripts/spawn-detached.cjs \
+  "${LOG_FILE}" pnpm vite \
+  --port "${DEPLOY_RUN_PORT}" \
+  --host 127.0.0.1 \
+  --strictPort)"
+echo "${server_pid}" > "${PID_FILE}"
+
+sleep 1
+if ! kill -0 "${server_pid}" 2>/dev/null; then
+  echo "Phaser dev server failed to start. See ${LOG_FILE}." >&2
+  tail -n 20 "${LOG_FILE}" >&2 || true
+  rm -f "${PID_FILE}"
+  exit 1
+fi
+
+echo "Phaser dev server started (PID: ${server_pid})."
+echo "Log file: ${LOG_FILE}"
+echo "PID file: ${PID_FILE}"
+<% } %>

package/lib/__templates__/phaser/scripts/prepare.sh

@@ -0,0 +1,7 @@
+#!/bin/bash
+set -Eeuo pipefail
+
+COZE_WORKSPACE_PATH="${COZE_WORKSPACE_PATH:-$(pwd)}"
+cd "${COZE_WORKSPACE_PATH}"
+
+pnpm install --prefer-frozen-lockfile --prefer-offline --reporter=append-only

package/lib/__templates__/phaser/scripts/spawn-detached.cjs

@@ -0,0 +1,29 @@
+const fs = require('node:fs');
+const { spawn } = require('node:child_process');
+
+const [logFile, command, ...args] = process.argv.slice(2);
+
+if (!logFile || !command) {
+  process.stderr.write(
+    'Usage: node scripts/spawn-detached.cjs <log-file> <command> [...args]\n',
+  );
+  process.exit(1);
+}
+
+const logFd = fs.openSync(logFile, 'a');
+const child = spawn(command, args, {
+  cwd: process.cwd(),
+  detached: process.platform !== 'win32',
+  env: process.env,
+  stdio: ['ignore', logFd, logFd],
+});
+
+fs.closeSync(logFd);
+child.unref();
+
+if (!child.pid) {
+  process.stderr.write('Failed to start detached process.\n');
+  process.exit(1);
+}
+
+process.stdout.write(String(child.pid));

package/lib/__templates__/phaser/scripts/start.sh

@@ -0,0 +1,82 @@
+#!/bin/bash
+set -Eeuo pipefail
+
+COZE_WORKSPACE_PATH="${COZE_WORKSPACE_PATH:-$(pwd)}"
+PORT="${PORT:-<%= port %>}"
+DEPLOY_RUN_PORT="${DEPLOY_RUN_PORT:-${PORT}}"
+cd "${COZE_WORKSPACE_PATH}"
+
+get_listening_pids() {
+  local port="$1"
+
+  if command -v lsof >/dev/null 2>&1; then
+    lsof -tiTCP:"${port}" -sTCP:LISTEN 2>/dev/null || true
+  elif command -v ss >/dev/null 2>&1; then
+    ss -H -lntp 2>/dev/null \
+      | awk -v port="${port}" '$4 ~ ":"port"$"' \
+      | grep -o 'pid=[0-9]*' \
+      | cut -d= -f2 \
+      | sort -u || true
+  else
+    echo "Warning: neither lsof nor ss found, cannot check port ${port}." >&2
+  fi
+}
+
+kill_port_if_listening() {
+  local port="$1"
+  local pids
+
+  pids="$(get_listening_pids "${port}")"
+  if [[ -z "${pids}" ]]; then
+    echo "Port ${port} is free."
+    return
+  fi
+
+  echo "Port ${port} is in use by PIDs: ${pids//$'\n'/ } (SIGKILL)"
+  echo "${pids}" | xargs kill -9 2>/dev/null || true
+  sleep 1
+
+  pids="$(get_listening_pids "${port}")"
+  if [[ -n "${pids}" ]]; then
+    echo "Failed to clear port ${port}; remaining PIDs: ${pids//$'\n'/ }." >&2
+    return 1
+  fi
+
+  echo "Port ${port} cleared."
+}
+
+echo "Clearing port ${DEPLOY_RUN_PORT} before start."
+kill_port_if_listening "${DEPLOY_RUN_PORT}"
+
+<% if (process.env.NODE_ENV === 'test') { %>
+# Keep the process attached in tests so the test runner can collect logs and stop it.
+exec env COZE_PHASER_GAME_ENV=PROD pnpm vite preview \
+  --port "${DEPLOY_RUN_PORT}" \
+  --host 127.0.0.1 \
+  --strictPort
+<% } else { %>
+LOG_DIR="${COZE_WORKSPACE_PATH}/logs"
+LOG_FILE="${LOG_DIR}/phaser-start.log"
+PID_FILE="${LOG_DIR}/phaser-start.pid"
+mkdir -p "${LOG_DIR}"
+
+echo "Starting Phaser production server on port ${DEPLOY_RUN_PORT}..."
+server_pid="$(COZE_PHASER_GAME_ENV=PROD node scripts/spawn-detached.cjs \
+  "${LOG_FILE}" pnpm vite preview \
+  --port "${DEPLOY_RUN_PORT}" \
+  --host 127.0.0.1 \
+  --strictPort)"
+echo "${server_pid}" > "${PID_FILE}"
+
+sleep 1
+if ! kill -0 "${server_pid}" 2>/dev/null; then
+  echo "Phaser production server failed to start. See ${LOG_FILE}." >&2
+  tail -n 20 "${LOG_FILE}" >&2 || true
+  rm -f "${PID_FILE}"
+  exit 1
+fi
+
+echo "Phaser production server started (PID: ${server_pid})."
+echo "Log file: ${LOG_FILE}"
+echo "PID file: ${PID_FILE}"
+<% } %>

package/lib/__templates__/phaser/scripts/validate.sh

@@ -0,0 +1,7 @@
+#!/bin/bash
+set -Eeuo pipefail
+
+COZE_WORKSPACE_PATH="${COZE_WORKSPACE_PATH:-$(pwd)}"
+cd "${COZE_WORKSPACE_PATH}"
+
+pnpm validate

package/lib/__templates__/phaser/src/assets.ts

@@ -0,0 +1,15 @@
+export const IMAGES: Record<string, string> = {};
+
+export const IMAGE_SEQUENCES: Record<string, string> = {
+  'coze-game-loading': 'assets/image_sequence/coze-game-loading',
+};
+
+export const VIDEOS: Record<string, string> = {};
+
+export const AUDIOS: Record<string, string> = {};
+
+// 注册素材到 PhaserBridge，可以在扣子网页游戏开发中定位
+window.PhaserBridge?.markImageAssetMap?.(IMAGES);
+window.PhaserBridge?.markImageSequenceAssetMap?.(IMAGE_SEQUENCES);
+window.PhaserBridge?.markVideoAssetMap?.(VIDEOS);
+window.PhaserBridge?.markAudioAssetMap?.(AUDIOS);

package/lib/__templates__/phaser/src/global.d.ts

@@ -0,0 +1,36 @@
+import type Phaser from 'phaser';
+
+declare global {
+  interface LaunchSpec {
+    protocol_version: 1;
+    target: {
+      graph_id: string;
+      node_id: string;
+    };
+    input: Record<string, any>;
+  }
+
+  interface PhaserBridgeBinding {
+    launchGame: (launchSpec: LaunchSpec | undefined) => Phaser.Game;
+  }
+
+  interface PhaserBridgeApi {
+    bind: (binding: PhaserBridgeBinding) => Phaser.Game;
+    markEditable?: <T extends Phaser.GameObjects.GameObject>(
+      stableId: string,
+      gameObject: T,
+    ) => T;
+    markImageAssetMap?: (images: Record<string, string>) => void;
+    markImageSequenceAssetMap?: (
+      imageSequences: Record<string, string>,
+    ) => void;
+    markVideoAssetMap?: (videos: Record<string, string>) => void;
+    markAudioAssetMap?: (audios: Record<string, string>) => void;
+  }
+
+  interface Window {
+    PhaserBridge?: PhaserBridgeApi;
+  }
+}
+
+export {};

package/lib/__templates__/phaser/src/main.ts

@@ -0,0 +1,28 @@
+import Phaser from 'phaser';
+
+import { BootScene } from './scene/BootScene';
+import { DevLoadingScene } from './scene/DevLoadingScene';
+import './style.css';
+
+const createGame = (_launchSpec?: LaunchSpec): Phaser.Game =>
+  new Phaser.Game({
+    type: Phaser.AUTO,
+    pixelArt: true,
+    parent: 'game',
+    // TODO 根据游戏的要求进行尺寸
+    width: 540,
+    height: 960,
+    backgroundColor: '#ffffff',
+    scale: {
+      mode: Phaser.Scale.FIT,
+      autoCenter: Phaser.Scale.CENTER_BOTH,
+    },
+    scene: [BootScene, DevLoadingScene],
+  });
+
+// 注册游戏到 PhaserBridge，可以在扣子网页游戏开发中编辑评论
+if (window.PhaserBridge) {
+  window.PhaserBridge.bind({ launchGame: createGame });
+} else {
+  createGame();
+}

package/lib/__templates__/phaser/src/scene/BootScene.ts

@@ -0,0 +1,209 @@
+import Phaser from 'phaser';
+
+import {
+  getAssetLabelFromFileKey,
+  getImageSequenceRuntimeKeys,
+  loadAssets,
+  markEditable,
+  registerImageSequenceAnimations,
+} from '@/utils';
+
+import { AUDIOS, IMAGES, IMAGE_SEQUENCES, VIDEOS } from '../assets';
+
+interface LoaderFileLike {
+  key: string;
+}
+
+const LOADING_TEXT_STYLE: Phaser.Types.GameObjects.Text.TextStyle = {
+  color: '#71717a',
+  fontFamily: '"PingFang SC", "Microsoft YaHei", sans-serif',
+  fontSize: '18px',
+};
+
+const DEV_LOADING_ASSET_KEY = 'coze-game-loading';
+const devLoadingSource = IMAGE_SEQUENCES[DEV_LOADING_ASSET_KEY];
+
+if (!devLoadingSource) {
+  throw new Error(`Image sequence asset not found: ${DEV_LOADING_ASSET_KEY}`);
+}
+
+const BOOT_IMAGE_SEQUENCES = {
+  [DEV_LOADING_ASSET_KEY]: devLoadingSource,
+};
+
+const BOOT_ASSETS = {
+  imageSequences: BOOT_IMAGE_SEQUENCES,
+};
+
+const GAME_IMAGE_SEQUENCES = Object.fromEntries(
+  Object.entries(IMAGE_SEQUENCES).filter(
+    ([assetKey]) => assetKey !== DEV_LOADING_ASSET_KEY,
+  ),
+);
+
+const GAME_ASSETS = {
+  images: IMAGES,
+  imageSequences: GAME_IMAGE_SEQUENCES,
+  videos: VIDEOS,
+  audios: AUDIOS,
+};
+
+export const DEV_LOADING_RUNTIME_KEYS =
+  getImageSequenceRuntimeKeys(DEV_LOADING_ASSET_KEY);
+
+export class BootScene extends Phaser.Scene {
+  private loadingText?: Phaser.GameObjects.Text;
+  private progressBar?: Phaser.GameObjects.Graphics;
+  private progressText?: Phaser.GameObjects.Text;
+  private loadFailed = false;
+
+  constructor() {
+    super('boot');
+  }
+
+  preload(): void {
+    loadAssets(this, BOOT_ASSETS);
+  }
+
+  create(): void {
+    registerImageSequenceAnimations(this, BOOT_IMAGE_SEQUENCES);
+    this.createLoadingView();
+
+    const queuedFileCount = loadAssets(this, GAME_ASSETS);
+    if (queuedFileCount === 0) {
+      this.finishLoading();
+      return;
+    }
+
+    this.load.on(Phaser.Loader.Events.FILE_PROGRESS, this.onGameFile, this);
+    this.load.on(Phaser.Loader.Events.PROGRESS, this.onProgress, this);
+    this.load.once(
+      Phaser.Loader.Events.FILE_LOAD_ERROR,
+      this.onLoadError,
+      this,
+    );
+    this.load.once(Phaser.Loader.Events.COMPLETE, this.finishLoading, this);
+    this.load.start();
+  }
+
+  private createLoadingView(): void {
+    const { centerX, centerY } = this.cameras.main;
+
+    markEditable(
+      'boot.loading-mascot',
+      this.add
+        .sprite(centerX, centerY - 58, DEV_LOADING_RUNTIME_KEYS.texture)
+        .setScale(0.56)
+        .play(DEV_LOADING_RUNTIME_KEYS.animation),
+    );
+
+    this.loadingText = markEditable(
+      'boot.loading-text',
+      this.add
+        .text(
+          centerX,
+          centerY + 120,
+          '正在加载游戏资源…',
+          LOADING_TEXT_STYLE,
+        )
+        .setOrigin(0.5),
+    );
+
+    this.progressBar = markEditable(
+      'boot.loading-progress-bar',
+      this.add.graphics(),
+    );
+    this.renderProgressBar(0);
+
+    this.progressText = markEditable(
+      'boot.loading-progress',
+      this.add
+        .text(centerX, centerY + 190, '0%', LOADING_TEXT_STYLE)
+        .setOrigin(0.5),
+    );
+  }
+
+  private readonly onGameFile = (file: LoaderFileLike): void => {
+    const assetLabel = getAssetLabelFromFileKey(file.key, GAME_ASSETS);
+    this.loadingText?.setText(`正在加载${assetLabel}`);
+  };
+
+  private readonly onProgress = (progress: number): void => {
+    this.renderProgressBar(progress);
+    this.progressText?.setText(`${Math.round(progress * 100)}%`);
+  };
+
+  private readonly onLoadError = (file: LoaderFileLike): void => {
+    this.loadFailed = true;
+    const assetLabel = getAssetLabelFromFileKey(file.key, GAME_ASSETS);
+    this.loadingText?.setText(`${assetLabel}加载失败`);
+  };
+
+  private renderProgressBar(progress: number): void {
+    if (!this.progressBar) {
+      return;
+    }
+
+    const { centerX, centerY } = this.cameras.main;
+    const width = 300;
+    const height = 14;
+    const x = centerX - width / 2;
+    const y = centerY + 154;
+    const padding = 3;
+    const innerWidth = width - padding * 2;
+    const filledWidth = Phaser.Math.Clamp(progress, 0, 1) * innerWidth;
+
+    this.progressBar.clear();
+    this.progressBar.fillStyle(0x102536, 0.12);
+    this.progressBar.fillRoundedRect(x, y, width, height, height / 2);
+    this.progressBar.lineStyle(2, 0x102536, 0.28);
+    this.progressBar.strokeRoundedRect(x, y, width, height, height / 2);
+
+    if (filledWidth <= 0) {
+      return;
+    }
+
+    this.progressBar.fillStyle(0xef648d, 1);
+    this.progressBar.fillRoundedRect(
+      x + padding,
+      y + padding,
+      filledWidth,
+      height - padding * 2,
+      (height - padding * 2) / 2,
+    );
+
+    this.progressBar.fillStyle(0x165ca8, 1);
+    this.progressBar.fillCircle(
+      Phaser.Math.Clamp(
+        x + padding + filledWidth,
+        x + padding + 5,
+        x + width - padding - 5,
+      ),
+      y + height / 2,
+      5,
+    );
+  }
+
+  private readonly finishLoading = (): void => {
+    this.removeLoaderListeners();
+
+    if (this.loadFailed) {
+      this.progressText?.setText('请刷新页面重试');
+      return;
+    }
+
+    registerImageSequenceAnimations(this, GAME_IMAGE_SEQUENCES);
+    this.scene.start('dev-loading');
+  };
+
+  private removeLoaderListeners(): void {
+    this.load.off(Phaser.Loader.Events.FILE_PROGRESS, this.onGameFile, this);
+    this.load.off(Phaser.Loader.Events.PROGRESS, this.onProgress, this);
+    this.load.off(
+      Phaser.Loader.Events.FILE_LOAD_ERROR,
+      this.onLoadError,
+      this,
+    );
+    this.load.off(Phaser.Loader.Events.COMPLETE, this.finishLoading, this);
+  }
+}

package/lib/__templates__/phaser/src/scene/DevLoadingScene.ts

@@ -0,0 +1,66 @@
+import Phaser from 'phaser';
+
+import { markEditable } from '@/utils';
+
+import { DEV_LOADING_RUNTIME_KEYS } from './BootScene';
+
+/**
+ * 本场景用于为兜底场景展示
+ */
+export class DevLoadingScene extends Phaser.Scene {
+  constructor() {
+    super('dev-loading');
+  }
+
+  create(): void {
+    const { centerX, centerY } = this.cameras.main;
+
+    markEditable(
+      'dev-loading.mascot',
+      this.add
+        .sprite(centerX, centerY - 82, DEV_LOADING_RUNTIME_KEYS.texture)
+        .setScale(0.64)
+        .play(DEV_LOADING_RUNTIME_KEYS.animation),
+    );
+
+    markEditable(
+      'dev-loading.title',
+      this.add
+        .text(centerX, centerY + 92, '游戏开发中', {
+          color: '#18181b',
+          fontFamily: '"PingFang SC", "Microsoft YaHei", sans-serif',
+          fontSize: '32px',
+          fontStyle: 'bold',
+        })
+        .setOrigin(0.5),
+    );
+
+    markEditable(
+      'dev-loading.description',
+      this.add
+        .text(centerX, centerY + 138, '请稍后，游戏世界即将呈现', {
+          color: '#71717a',
+          fontFamily: '"PingFang SC", "Microsoft YaHei", sans-serif',
+          fontSize: '18px',
+        })
+        .setOrigin(0.5),
+    );
+
+    const loadingDots = Array.from({ length: 3 }, (_value, index) =>
+      this.add.circle(centerX + (index - 1) * 18, centerY + 178, 4, 0xf43f75),
+    );
+
+    loadingDots.forEach((dot, index) => {
+      this.tweens.add({
+        targets: dot,
+        alpha: 0.25,
+        scale: 0.7,
+        duration: 520,
+        delay: index * 160,
+        ease: 'Sine.inOut',
+        repeat: -1,
+        yoyo: true,
+      });
+    });
+  }
+}

package/lib/__templates__/phaser/src/style.css

@@ -0,0 +1,28 @@
+:root {
+  color-scheme: dark;
+  font-family: Arial, sans-serif;
+  background: #000;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+html,
+body,
+#game {
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  overflow: hidden;
+  background: #000;
+}
+
+#game {
+  min-width: 0;
+  min-height: 0;
+}
+
+#game canvas {
+  display: block;
+}

package/lib/__templates__/phaser/src/types.ts

@@ -0,0 +1,32 @@
+export type AssetSources = Readonly<Record<string, string>>;
+
+export interface AssetCollections {
+  images?: AssetSources;
+  imageSequences?: AssetSources;
+  videos?: AssetSources;
+  audios?: AssetSources;
+}
+
+export interface ImageSequenceManifest {
+  schema_version: string;
+  id: string;
+  type: 'image_sequence';
+  name: string;
+  properties: {
+    fps: number;
+    frame_count: number;
+  };
+  sources: readonly string[];
+}
+
+export type LoadedAsset =
+  | {
+      kind: 'image' | 'video' | 'audio';
+      key: string;
+    }
+  | {
+      kind: 'image-sequence';
+      key: string;
+      texture: string;
+      animation: string;
+    };