@iruka-edu/create-iruka-game 1.0.9 → 1.1.0

package/dist/index.cjs

@@ -202,6 +202,7 @@ dist
   }
   console.log(`
 \u{1F389} Project \u0111\xE3 s\u1EB5n s\xE0ng t\u1EA1i: ${import_picocolors.default.cyan(root)}`);
+  console.log(import_picocolors.default.green(`\u2728 Game c\u1EE7a b\u1EA1n \u0111\xE3 \u0111\u01B0\u1EE3c t\xEDch h\u1EE3p s\u1EB5n Iruka SDK v0.4. Safe & Ready!`));
   console.log(`\u{1F449} C\xE1c b\u01B0\u1EDBc ti\u1EBFp theo:`);
   console.log(`   cd ${projectName}`);
   const userAgent = process.env.npm_config_user_agent || "";

package/package.json

@@ -1,35 +1,35 @@
-{
-  "name": "@iruka-edu/create-iruka-game",
-  "version": "1.0.9",
-  "description": "Create Iruka mini game (React + Phaser template)",
-  "license": "MIT",
-  "type": "module",
-  "bin": {
-    "create-iruka-game": "dist/index.cjs"
-  },
-  "scripts": {
-    "build": "tsup src/index.ts --format cjs --clean",
-    "dev": "tsup src/index.ts --format cjs --watch"
-  },
-  "dependencies": {
-    "fs-extra": "^11.3.3",
-    "picocolors": "^1.1.1",
-    "prompts": "^2.4.2"
-  },
-  "devDependencies": {
-    "@types/fs-extra": "^11.0.4",
-    "@types/prompts": "^2.4.9",
-    "terser": "^5.44.1",
-    "tsup": "^8.0.0",
-    "typescript": "^5.5.0"
-  },
-  "files": [
-    "dist",
-    "templates",
-    "README.md"
-  ],
-  "publishConfig": {
-    "access": "public",
-    "registry": "https://registry.npmjs.org/"
-  }
-}
+{
+  "name": "@iruka-edu/create-iruka-game",
+  "version": "1.1.0",
+  "description": "Create Iruka mini game (React + Phaser template)",
+  "license": "MIT",
+  "type": "module",
+  "bin": {
+    "create-iruka-game": "dist/index.cjs"
+  },
+  "scripts": {
+    "build": "tsup src/index.ts --format cjs --clean",
+    "dev": "tsup src/index.ts --format cjs --watch"
+  },
+  "dependencies": {
+    "fs-extra": "^11.3.3",
+    "picocolors": "^1.1.1",
+    "prompts": "^2.4.2"
+  },
+  "devDependencies": {
+    "@types/fs-extra": "^11.0.4",
+    "@types/prompts": "^2.4.9",
+    "terser": "^5.44.1",
+    "tsup": "^8.0.0",
+    "typescript": "^5.5.0"
+  },
+  "files": [
+    "dist",
+    "templates",
+    "README.md"
+  ],
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  }
+}

package/templates/basic-phaser/package.json

@@ -10,7 +10,7 @@
   },
   "dependencies": {
     "phaser": "^3.80.0",
-    "@iruka-edu/mini-game-sdk": "^0.3.3"
+    "@iruka-edu/mini-game-sdk": "^0.4.0"
   },
   "devDependencies": {
     "typescript": "^5.5.0",

package/templates/basic-phaser/src/game/MyGame.ts

@@ -0,0 +1,49 @@
+import { BaseGame, type LaunchContext, createIrukaPluginConfig } from "@iruka-edu/mini-game-sdk";
+import Phaser from "phaser";
+import { PreloadScene } from "../scenes/Preloader";
+import { PlayScene } from "../scenes/Play";
+
+export class MyGame extends BaseGame {
+  private game: Phaser.Game | null = null;
+
+  /**
+   * This function runs only after:
+   * 1. Hub connection is successful
+   * 2. Context validation passes
+   */
+  protected async onInit(context: LaunchContext): Promise<void> {
+    console.log("🎮 Initializing Game with Context:", context);
+
+    const config: Phaser.Types.Core.GameConfig = {
+      type: Phaser.AUTO,
+      width: 800,
+      height: 600,
+      parent: "game-container",
+      backgroundColor: "#2c3e50",
+      scale: {
+        mode: Phaser.Scale.FIT,
+        autoCenter: Phaser.Scale.CENTER_BOTH,
+      },
+      scene: [PreloadScene, PlayScene],
+      // Register Iruka plugin
+      plugins: {
+        global: [createIrukaPluginConfig()]
+      }
+    };
+
+    this.game = new Phaser.Game(config);
+
+    // Make game globally accessible for plugin initialization
+    (window as any).phaserGame = this.game;
+
+    // Inject SDK into Registry for Scenes to access (legacy support)
+    this.game.registry.set("iruka-context", context);
+    // this.bridge is available from BaseGame
+    this.game.registry.set("iruka-bridge", this.bridge);
+  }
+
+  protected async onStart(): Promise<void> {
+    console.log("🚀 Game Started Lifecycle");
+    // Optional: Tracking logic or additional setup
+  }
+}

package/templates/basic-phaser/src/main.ts

@@ -1,21 +1,6 @@
-import Phaser from "phaser";
+import { MyGame } from "./game/MyGame";
 import "./style.css";
-import { GameConfig } from "./config";
-import { Iruka } from "./iruka/adapter";
 
-/**
- * Entry point - Initialize SDK then start Phaser game
- */
-(async () => {
-  try {
-    // 1. Connect to Hub (or fallback to mock mode)
-    await Iruka.init();
-    console.log("✅ SDK Ready:", Iruka.isMock ? "Mock Mode" : "Connected to Hub");
-
-    // 2. Start Phaser game
-    new Phaser.Game(GameConfig);
-  } catch (error) {
-    console.error("❌ Failed to initialize:", error);
-    Iruka.error("INIT_FAILED", error);
-  }
-})();
+// Launch Game
+// BaseGame handles Handshake, Validation, and Loading UI automatically
+new MyGame();

package/templates/basic-phaser/src/scenes/Play.ts

@@ -1,14 +1,12 @@
 import { Scene } from "phaser";
-import { Iruka } from "../iruka/adapter";
-import { GAME_WIDTH, GAME_HEIGHT } from "../config";
 
 /**
  * PlayScene - Main gameplay scene
  *
- * Access SDK context via Iruka.context:
- * - sessionId, gameId, locale, difficulty
- * - playerId, profile (name, avatar)
- * - seed (for reproducible randomness)
+ * Access SDK via this.iruka (Phaser Plugin):
+ * - this.iruka.submitScore(100)
+ * - this.iruka.completeGame({score, timeMs})
+ * - this.iruka.getContext() for sessionId, difficulty, etc.
  */
 export class PlayScene extends Scene {
   private score = 0;
@@ -23,8 +21,10 @@ export class PlayScene extends Scene {
     this.startTime = Date.now();
     this.score = 0;
 
-    // Get context from SDK
-    const { difficulty, profile, seed } = Iruka.context;
+    // Get context from SDK plugin
+    const context = (this as any).iruka?.getContext();
+    const { difficulty, player, seed } = context || {};
+    const profile = player || {};
     console.log(`🎮 Starting game | Difficulty: ${difficulty} | Seed: ${seed}`);
 
     this.setupUI(profile?.name || "Player");
@@ -32,20 +32,34 @@ export class PlayScene extends Scene {
   }
 
   private setupUI(playerName: string) {
+    const width = this.scale.width;
+    const height = this.scale.height;
+
     // Header
-    this.add.text(20, 20, `Player: ${playerName}`, { fontSize: "18px", color: "#fff" });
+    this.add.text(20, 20, `Player: ${playerName}`, {
+      fontSize: "18px",
+      color: "#fff",
+    });
 
     // Score
     this.scoreText = this.add
-      .text(GAME_WIDTH - 20, 20, "Score: 0", { fontSize: "20px", color: "#2ecc71" })
+      .text(width - 20, 20, "Score: 0", {
+        fontSize: "20px",
+        color: "#2ecc71",
+      })
       .setOrigin(1, 0);
 
     // Instructions
     this.add
-      .text(GAME_WIDTH / 2, GAME_HEIGHT - 40, "Click anywhere to score | Press SPACE to finish", {
-        fontSize: "14px",
-        color: "#aaa",
-      })
+      .text(
+        width / 2,
+        height - 40,
+        "Click anywhere to score | Press SPACE to finish",
+        {
+          fontSize: "14px",
+          color: "#aaa",
+        }
+      )
       .setOrigin(0.5);
   }
 
@@ -63,16 +77,22 @@ export class PlayScene extends Scene {
   private addScore(points: number) {
     this.score += points;
     this.scoreText.setText(`Score: ${this.score}`);
-    Iruka.updateScore(this.score, points);
+    
+    // Use Iruka plugin to submit score
+    (this as any).iruka?.submitScore(this.score, points);
   }
 
   private endGame() {
     const timeMs = Date.now() - this.startTime;
 
-    // Submit result to Hub
-    Iruka.submit(this.score, timeMs, {
-      maxScore: 100,
-      accuracy: Math.min(1, this.score / 100),
+    // Submit result to Hub using Iruka plugin
+    (this as any).iruka?.completeGame({
+      score: this.score,
+      timeMs,
+      extras: {
+        maxScore: 100,
+        accuracy: Math.min(1, this.score / 100),
+      },
     });
 
     console.log(`🏁 Game Over | Score: ${this.score} | Time: ${timeMs}ms`);

package/templates/basic-phaser/src/scenes/Preloader.ts

@@ -1,8 +1,8 @@
 import { Scene } from "phaser";
-import { Iruka } from "../iruka/adapter";
+// Removed Iruka adapter import
 
 /**
- * PreloadScene - Load assets và báo progress cho Hub
+ * PreloadScene - Load assets and report progress to Hub
  */
 export class PreloadScene extends Scene {
   constructor() {
@@ -12,10 +12,15 @@ export class PreloadScene extends Scene {
   preload() {
     this.createLoadingUI();
 
-    // Báo progress cho Hub
+    // Report progress to Hub
     this.load.on("progress", (value: number) => {
       this.updateProgress(value);
-      Iruka.updateProgress({ progress: value });
+      const bridge = this.registry.get("iruka-bridge");
+      bridge?.loading(value * 100); // SDK expects 0-100? or 0-1? IframeBridge says loading(progress: number)
+      // IframeBridge documentation should be checked. Usually 0-100 for UI.
+      // Wait, let's check game-core/bridge.ts or iframeBridge.ts.
+      // iframeBridge.ts: loading: (progress: number) => post("LOADING", { progress })
+      // Usually standard is 0-100.
     });
 
     // Load game assets
@@ -24,7 +29,9 @@ export class PreloadScene extends Scene {
 
   create() {
     // Báo Hub game đã sẵn sàng
-    Iruka.ready(["score", "progress"]);
+    // Iruka.ready(["score", "progress"]);
+    const bridge = this.registry.get("iruka-bridge");
+    bridge?.ready(["score", "progress"]);
 
     // Chuyển sang màn chơi
     this.scene.start("Play");
@@ -34,17 +41,25 @@ export class PreloadScene extends Scene {
     const { width, height } = this.cameras.main;
 
     // Background
-    this.add.graphics().fillStyle(0x222222, 0.8).fillRect(width / 2 - 160, height / 2 - 25, 320, 50);
+    this.add
+      .graphics()
+      .fillStyle(0x222222, 0.8)
+      .fillRect(width / 2 - 160, height / 2 - 25, 320, 50);
 
     // Progress bar
     const bar = this.add.graphics();
-    const text = this.add.text(width / 2, height / 2, "0%", {
-      fontSize: "18px",
-      color: "#ffffff",
-    }).setOrigin(0.5);
+    const text = this.add
+      .text(width / 2, height / 2, "0%", {
+        fontSize: "18px",
+        color: "#ffffff",
+      })
+      .setOrigin(0.5);
 
     this.load.on("progress", (value: number) => {
-      bar.clear().fillStyle(0x3498db, 1).fillRect(width / 2 - 150, height / 2 - 15, 300 * value, 30);
+      bar
+        .clear()
+        .fillStyle(0x3498db, 1)
+        .fillRect(width / 2 - 150, height / 2 - 15, 300 * value, 30);
       text.setText(`${Math.round(value * 100)}%`);
     });
   }

package/templates/basic-phaser/src/config.ts

@@ -1,28 +0,0 @@
-import Phaser from "phaser";
-import { PreloadScene } from "./scenes/Preloader";
-import { PlayScene } from "./scenes/Play";
-
-export const GAME_WIDTH = 800;
-export const GAME_HEIGHT = 600;
-
-export const GameConfig: Phaser.Types.Core.GameConfig = {
-  type: Phaser.AUTO,
-  width: GAME_WIDTH,
-  height: GAME_HEIGHT,
-  parent: "app",
-
-  scale: {
-    mode: Phaser.Scale.FIT,
-    autoCenter: Phaser.Scale.CENTER_BOTH,
-  },
-
-  backgroundColor: "#2c3e50",
-
-  // Disable physics if not needed (better performance)
-  // physics: {
-  //   default: 'arcade',
-  //   arcade: { gravity: { x: 0, y: 300 }, debug: false }
-  // },
-
-  scene: [PreloadScene, PlayScene],
-};

package/templates/basic-phaser/src/iruka/adapter.ts

@@ -1,121 +0,0 @@
-import {
-  createIframeBridge,
-  type IframeBridge,
-  type LaunchContext,
-  type HubCommand,
-} from "@iruka-edu/mini-game-sdk";
-
-/**
- * IrukaAdapter - Cầu nối giữa Phaser Game và Iruka Hub
- *
- * Sử dụng SDK để giao tiếp với Hub:
- * - await Iruka.init() - Khởi tạo và chờ INIT từ Hub
- * - Iruka.context - Lấy thông tin session/user
- * - Iruka.submit() - Gửi kết quả cuối game
- */
-class IrukaAdapter {
-  private static instance: IrukaAdapter;
-
-  public context!: LaunchContext;
-  public isMock = false;
-  private bridge!: IframeBridge;
-  private initResolver?: (ctx: LaunchContext) => void;
-
-  public static get use(): IrukaAdapter {
-    return this.instance || (this.instance = new IrukaAdapter());
-  }
-
-  /**
-   * Khởi tạo SDK và chờ INIT command từ Hub
-   * Timeout 3s sẽ fallback sang Mock mode cho development
-   */
-  public async init(): Promise<LaunchContext> {
-    return new Promise((resolve) => {
-      // Tạo bridge với handler
-      this.bridge = createIframeBridge(this.handleCommand.bind(this));
-
-      // Timeout -> Mock mode
-      const timeout = setTimeout(() => {
-        console.warn("⚠️ Hub timeout, using Mock mode");
-        this.context = this.createMockContext();
-        this.isMock = true;
-        resolve(this.context);
-      }, 3000);
-
-      // Lưu resolver để gọi khi nhận INIT
-      this.initResolver = (ctx: LaunchContext) => {
-        clearTimeout(timeout);
-        this.context = ctx;
-        this.isMock = false;
-        resolve(ctx);
-      };
-    });
-  }
-
-  /** Báo Hub game đã sẵn sàng */
-  public ready(capabilities: string[] = ["score", "progress"]) {
-    this.bridge.ready(capabilities);
-  }
-
-  /** Cập nhật điểm */
-  public updateScore(score: number, delta?: number) {
-    this.bridge.score(score, delta);
-  }
-
-  /** Cập nhật tiến độ loading */
-  public updateProgress(data: unknown) {
-    this.bridge.progress(data);
-  }
-
-  /** Gửi kết quả cuối game */
-  public submit(score: number, timeMs: number, extras?: unknown) {
-    this.bridge.complete({ score, timeMs, extras });
-  }
-
-  /** Báo lỗi cho Hub */
-  public error(message: string, detail?: unknown) {
-    this.bridge.error(message, detail);
-  }
-
-  /** Cleanup khi game kết thúc */
-  public dispose() {
-    this.bridge.dispose();
-  }
-
-  // === Private ===
-
-  private handleCommand(cmd: HubCommand) {
-    switch (cmd.type) {
-      case "INIT":
-        this.initResolver?.(cmd.payload);
-        break;
-      case "START":
-        console.log("🎮 Hub: START");
-        break;
-      case "PAUSE":
-        console.log("⏸️ Hub: PAUSE");
-        break;
-      case "RESUME":
-        console.log("▶️ Hub: RESUME");
-        break;
-      case "QUIT":
-        console.log("🛑 Hub: QUIT");
-        this.dispose();
-        break;
-    }
-  }
-
-  private createMockContext(): LaunchContext {
-    return {
-      sessionId: "mock-" + Date.now(),
-      gameId: "{{GAME_ID}}",
-      locale: "vi",
-      difficulty: "medium",
-      playerId: "dev-player",
-      profile: { name: "Developer" },
-      seed: Math.floor(Math.random() * 1000000),
-    };
-  }
-}
-
-export const Iruka = IrukaAdapter.use;