@mpgd/cli 0.1.0

package/templates/phaser-game/src/runtime/createGame.ts

@@ -0,0 +1,28 @@
+import Phaser from 'phaser';
+
+import { BootScene } from '../scenes/BootScene';
+import { LobbyScene } from '../scenes/LobbyScene';
+import { PlayScene } from '../scenes/PlayScene';
+import { starterContextKey, type StarterContext } from './gameContext';
+
+export function createStarterGame(input: {
+  readonly mountId: string;
+  readonly context: StarterContext;
+}): Phaser.Game {
+  const game = new Phaser.Game({
+    type: Phaser.AUTO,
+    parent: input.mountId,
+    width: 960,
+    height: 540,
+    backgroundColor: '#07111f',
+    scale: {
+      mode: Phaser.Scale.FIT,
+      autoCenter: Phaser.Scale.CENTER_BOTH,
+    },
+    scene: [BootScene, LobbyScene, PlayScene],
+  });
+
+  game.registry.set(starterContextKey, input.context);
+
+  return game;
+}

package/templates/phaser-game/src/runtime/gameContext.ts

@@ -0,0 +1,18 @@
+import type { AnalyticsReporter, BufferedAnalyticsSink } from '@mpgd/analytics';
+import type { Locale } from '@mpgd/i18n';
+import type { PlayerIdentity } from '@mpgd/platform';
+import type { TargetConfiguredGateway, TargetRuntimeSnapshot } from '@mpgd/target-config';
+
+import type { StarterGameServices } from '../platform/gameServices';
+
+export const starterContextKey = 'starterContext';
+
+export interface StarterContext {
+  readonly platform: TargetConfiguredGateway;
+  readonly runtime: TargetRuntimeSnapshot;
+  readonly player: PlayerIdentity;
+  readonly locale: Locale;
+  readonly gameServices: StarterGameServices;
+  readonly analytics: AnalyticsReporter;
+  readonly analyticsSink: BufferedAnalyticsSink;
+}

package/templates/phaser-game/src/runtime/id.ts

@@ -0,0 +1,6 @@
+export function createClientId(prefix: string): string {
+  const randomUuid = globalThis.crypto?.randomUUID?.bind(globalThis.crypto);
+  const id = randomUuid?.() ?? `${Date.now().toString(36)}-${Math.random().toString(36).slice(2)}`;
+
+  return `${prefix}-${id}`;
+}

package/templates/phaser-game/src/scenes/BootScene.ts

@@ -0,0 +1,11 @@
+import Phaser from 'phaser';
+
+export class BootScene extends Phaser.Scene {
+  constructor() {
+    super('BootScene');
+  }
+
+  create(): void {
+    this.scene.start('LobbyScene');
+  }
+}

package/templates/phaser-game/src/scenes/LobbyScene.ts

@@ -0,0 +1,65 @@
+import Phaser from 'phaser';
+
+import { t } from '../i18n/messages';
+import { starterContextKey, type StarterContext } from '../runtime/gameContext';
+
+export class LobbyScene extends Phaser.Scene {
+  constructor() {
+    super('LobbyScene');
+  }
+
+  create(): void {
+    const rawContext = this.registry.get(starterContextKey);
+
+    if (rawContext === undefined || rawContext === null) {
+      throw new Error('Starter context is missing from Phaser registry.');
+    }
+
+    const context = rawContext as StarterContext;
+    const locale = context.locale;
+    const features = Object.values(context.runtime.features)
+      .filter((feature) => feature.enabled)
+      .map((feature) => feature.feature)
+      .join(', ') || t(locale, 'featuresNone');
+
+    this.add
+      .text(480, 106, t(locale, 'title'), {
+        color: '#ffffff',
+        fontFamily: 'Arial, sans-serif',
+        fontSize: '40px',
+        fontStyle: 'bold',
+      })
+      .setOrigin(0.5);
+    this.add
+      .text(480, 174, t(locale, 'target', { target: context.runtime.configTarget }), {
+        color: '#9fb3c8',
+        fontFamily: 'Arial, sans-serif',
+        fontSize: '20px',
+      })
+      .setOrigin(0.5);
+    this.add
+      .text(480, 216, t(locale, 'features', { features }), {
+        color: '#d6dee8',
+        fontFamily: 'Arial, sans-serif',
+        fontSize: '18px',
+      })
+      .setOrigin(0.5);
+    this.add
+      .text(480, 258, t(locale, 'backend', { mode: context.gameServices.mode }), {
+        color: context.gameServices.mode === 'disabled' ? '#f59e0b' : '#2dd4bf',
+        fontFamily: 'Arial, sans-serif',
+        fontSize: '18px',
+      })
+      .setOrigin(0.5);
+    this.add
+      .text(480, 336, t(locale, 'tapToStart'), {
+        color: '#ffffff',
+        fontFamily: 'Arial, sans-serif',
+        fontSize: '22px',
+      })
+      .setOrigin(0.5);
+
+    this.input.once('pointerdown', () => this.scene.start('PlayScene'));
+    this.input.keyboard?.once('keydown-ENTER', () => this.scene.start('PlayScene'));
+  }
+}

package/templates/phaser-game/src/scenes/PlayScene.ts

@@ -0,0 +1,121 @@
+import Phaser from 'phaser';
+
+import type { LogicalAdPlacementId } from '@mpgd/platform';
+
+import { createStarterRunState, stepStarterRunState, type StarterRunState } from '../game/state';
+import { t } from '../i18n/messages';
+import { starterContextKey, type StarterContext } from '../runtime/gameContext';
+import { createClientId } from '../runtime/id';
+
+const rewardedPlacementId = 'CONTINUE_AFTER_FAIL' satisfies LogicalAdPlacementId;
+
+export class PlayScene extends Phaser.Scene {
+  private state: StarterRunState = createStarterRunState();
+  private marker!: Phaser.GameObjects.Arc;
+  private scoreText!: Phaser.GameObjects.Text;
+  private rewardText!: Phaser.GameObjects.Text;
+  private analyticsText!: Phaser.GameObjects.Text;
+  private context!: StarterContext;
+  private lastScore = -1;
+  private lastAnalyticsCount = -1;
+
+  constructor() {
+    super('PlayScene');
+  }
+
+  create(): void {
+    this.context = this.registry.get(starterContextKey) as StarterContext;
+
+    this.marker = this.add.circle(480, 250, 34, 0x2dd4bf);
+    this.scoreText = this.add
+      .text(480, 86, '', {
+        color: '#ffffff',
+        fontFamily: 'Arial, sans-serif',
+        fontSize: '28px',
+      })
+      .setOrigin(0.5);
+    this.rewardText = this.add
+      .text(480, 412, this.rewardHint(), {
+        color: '#d6dee8',
+        fontFamily: 'Arial, sans-serif',
+        fontSize: '18px',
+      })
+      .setOrigin(0.5);
+    this.analyticsText = this.add
+      .text(480, 454, '', {
+        color: '#9fb3c8',
+        fontFamily: 'Arial, sans-serif',
+        fontSize: '16px',
+      })
+      .setOrigin(0.5);
+
+    this.input.keyboard?.on('keydown-R', () => {
+      void this.requestRewardedAd();
+    });
+  }
+
+  override update(_time: number, delta: number): void {
+    this.state = stepStarterRunState(this.state, delta);
+
+    const angle = this.state.phase * Math.PI * 2;
+    this.marker.setPosition(480 + Math.cos(angle) * 144, 250 + Math.sin(angle) * 54);
+
+    if (this.state.score !== this.lastScore) {
+      this.lastScore = this.state.score;
+      this.scoreText.setText(t(this.context.locale, 'score', { score: this.state.score }));
+    }
+
+    const analyticsCount = this.context.analyticsSink.events.length;
+
+    if (analyticsCount !== this.lastAnalyticsCount) {
+      this.lastAnalyticsCount = analyticsCount;
+      this.analyticsText.setText(t(this.context.locale, 'analytics', { count: analyticsCount }));
+    }
+  }
+
+  private rewardHint(): string {
+    const rewardedAds = this.context.runtime.features.rewardedAds;
+
+    if (!rewardedAds.enabled) {
+      return t(this.context.locale, 'rewardUnavailable');
+    }
+
+    return t(this.context.locale, 'rewardPending');
+  }
+
+  private async requestRewardedAd(): Promise<void> {
+    const rewardedAds = this.context.runtime.features.rewardedAds;
+
+    if (!rewardedAds.enabled) {
+      this.rewardText.setText(t(this.context.locale, 'rewardUnavailable'));
+      return;
+    }
+
+    try {
+      const result = await this.context.platform.ads.showRewarded({
+        placementId: rewardedPlacementId,
+        idempotencyKey: createClientId('starter-reward'),
+      });
+
+      await this.context.analytics.track({
+        name: result.status === 'completed' ? 'rewarded_ad_completed' : 'rewarded_ad_rejected',
+        properties: {
+          status: result.status,
+          granted: result.rewardGranted,
+        },
+      });
+
+      this.rewardText.setText(t(this.context.locale, 'reward', { status: result.status }));
+    } catch (error) {
+      await this.context.analytics.track({
+        name: 'rewarded_ad_rejected',
+        properties: {
+          status: 'failed',
+          granted: false,
+        },
+      });
+      this.rewardText.setText(t(this.context.locale, 'rewardError'));
+      console.error('[rewarded-ad]', error);
+    }
+  }
+}

package/templates/phaser-game/src/styles.css

@@ -0,0 +1,31 @@
+html,
+body,
+#game {
+  width: 100%;
+  height: 100%;
+  margin: 0;
+}
+
+body {
+  overflow: hidden;
+  background: #07111f;
+  color: #ffffff;
+  font-family: Arial, sans-serif;
+}
+
+canvas {
+  display: block;
+}
+
+.boot-error {
+  box-sizing: border-box;
+  width: min(720px, calc(100vw - 32px));
+  margin: 20vh auto 0;
+  padding: 20px;
+  border: 1px solid #dc2626;
+  border-radius: 8px;
+  background: #1f1111;
+  color: #fecaca;
+  font-size: 16px;
+  line-height: 1.5;
+}

package/templates/phaser-game/tsconfig.json

@@ -0,0 +1,27 @@
+{
+__TSCONFIG_EXTENDS_LINE__
+  "compilerOptions": {
+    "target": "ES2022",
+    "useDefineForClassFields": true,
+    "strict": true,
+    "strictNullChecks": true,
+    "noUncheckedIndexedAccess": true,
+    "exactOptionalPropertyTypes": true,
+    "noImplicitOverride": true,
+    "noFallthroughCasesInSwitch": true,
+    "skipLibCheck": true,
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "types": ["vite/client", "node"],
+    "noEmit": true
+  },
+  "include": [
+    "src/**/*.ts",
+    "vite.config.ts"__TSCONFIG_WORKSPACE_INCLUDES__
+  ],
+  "exclude": [
+    "dist"__TSCONFIG_WORKSPACE_EXCLUDES__
+  ]
+}

package/templates/phaser-game/vite.config.ts

@@ -0,0 +1,35 @@
+import ttsc from '@ttsc/unplugin/vite';
+import { defineConfig } from 'vite';
+
+export default defineConfig(({ mode }) => {
+  const isProduction = mode === 'production';
+
+  return {
+    plugins: [
+      ttsc({
+        project: 'tsconfig.json',
+        plugins: false,
+      }),
+    ],
+    define: {
+      __APP_TARGET__: JSON.stringify(process.env.APP_TARGET ?? 'browser'),
+      __APP_VERSION__: JSON.stringify(process.env.APP_VERSION ?? '0.0.0-dev'),
+      __BUILD_ID__: JSON.stringify(process.env.BUILD_ID ?? 'local'),
+      __DEBUG_BUILD__: JSON.stringify(!isProduction),
+    },
+    build: {
+      target: 'es2022',
+      sourcemap: !isProduction,
+      outDir: 'dist',
+      assetsDir: 'assets',
+      emptyOutDir: true,
+      rolldownOptions: {
+        output: {
+          entryFileNames: 'assets/game.js',
+          chunkFileNames: 'assets/[name].js',
+          assetFileNames: 'assets/[name][extname]',
+        },
+      },
+    },
+  };
+});