第12章 - 实战：开发一个新的典故

import rawKongrong from './kongrong.json';

/* ... 在 allusions 数组里追加（位置即大厅列表中的顺序，实际排序按 yearApprox） */
AllusionSchema.parse(rawKongrong),

import enKongrong from './en/kongrong.json';

export const patches = {
  en: {
    /* ... */
    kongrong: enKongrong,
  },
};

import type { GameManifest } from '@chags/game-kit';
import { DESIGN } from '@chags/templates';

export const manifest: GameManifest = {
  id: 'kongrong',
  title: '孔融让梨',
  version: '0.1.0',
  template: 'place',
  orientation: 'portrait',
  designSize: { width: DESIGN.width, height: DESIGN.height },
  ageRange: [6, 9],
  sessionSeconds: [120, 240],
  skills: ['谦让', '分享', '观察'],
  curriculum: { dynasty: '东汉', yearApprox: 190, figures: ['孔融'] },
  assets: { cover: 'none' },
};

import { stageScript } from '@chags/content';
import type { AllusionContent } from '@chags/content';
import { PlaceLevelSchema } from '@chags/templates/schemas';
import type { PlaceLevel } from '@chags/templates/schemas';

/** 纯逻辑：不碰 Phaser，可以直接单测 */
export function placeLevel(content: AllusionContent): PlaceLevel {
  return PlaceLevelSchema.parse(stageScript(content, 'place'));
}

import type Phaser from 'phaser';
import { THEME, circle, groundShadow, roundRect, shade } from '@chags/phaser-kit';

const PEAR_SIZE: Record<string, number> = { big: 54, mid: 42, small: 30 };

function drawPear(g: Phaser.GameObjects.Graphics, x: number, y: number, kind: string): void {
  const r = PEAR_SIZE[kind] ?? 40;
  g.fillStyle(THEME.leaf, 1);
  g.fillEllipse(x, y - r * 1.3, r * 0.9, r * 0.55);          // 叶子
  g.fillStyle(0xf5d76e, 1);
  g.fillEllipse(x, y, r * 1.7, r * 2.1);                     // 梨身
  g.lineStyle(6, THEME.outline, 1);
  g.strokeEllipse(x, y, r * 1.7, r * 2.1);
  g.fillStyle(shade(0xf5d76e, 0.86), 1);
  g.fillCircle(x - r * 0.4, y + r * 0.35, r * 0.28);         // 腮部阴影
}

/** 光球：一只梨，大小按 kind（big / mid / small） */
export function drawOrb(g: Phaser.GameObjects.Graphics, kind: string): void {
  drawPear(g, 0, 0, kind);
}

/** 槽位：三位家人；归位后手里多一只梨 */
export function drawPiece(
  g: Phaser.GameObjects.Graphics,
  kind: string,
  x: number,
  y: number,
  filled: boolean,
): void {
  const s = kind === 'second' ? 1.06 : 0.96;
  groundShadow(g, x, y + 96, 150 * s, 26, 0.14);
  roundRect(g, x - 54 * s, y - 60 * s, 108 * s, 150 * s, 44,
    kind === 'kong' ? THEME.red : THEME.teal, THEME.outline, 6);
  circle(g, x, y - 96 * s, 44 * s, THEME.sand, THEME.outline, 6);
  if (filled) {
    const size = kind === 'elder' ? 'big' : kind === 'second' ? 'mid' : 'small';
    drawPear(g, x + 70, y - 34, size);
  }
}

/** 分幕插图：第一幕一盘梨，第二幕三个孩子 */
export function drawBeat(
  g: Phaser.GameObjects.Graphics,
  index: number,
  rect: { x: number; y: number; w: number; h: number },
): void {
  const cx = rect.x + rect.w / 2;
  const cy = rect.y + rect.h / 2;
  if (index === 0) {
    roundRect(g, cx - 200, cy + 90, 400, 40, 20, THEME.wood, THEME.outline, 6);
    drawPear(g, cx - 90, cy + 20, 'big');
    drawPear(g, cx, cy + 52, 'mid');
    drawPear(g, cx + 90, cy + 76, 'small');
    return;
  }
  for (const [dx, h] of [[-170, 300], [-40, 330], [110, 190]] as const) {
    groundShadow(g, cx + dx, cy + 170, h * 0.7, 30, 0.14);
    roundRect(g, cx + dx - h * 0.18, cy + 170 - h, h * 0.36, h, 60, THEME.teal, THEME.outline, 6);
    circle(g, cx + dx, cy + 170 - h - 46, h * 0.22, THEME.sand, THEME.outline, 6);
  }
}

import { SCENE_KEYS, createPlaceScene, defineGame } from '@chags/templates';
import { drawBeat, drawOrb, drawPiece } from './art';
import { placeLevel } from './logic';
import { manifest } from './manifest';

export default defineGame({
  manifest,
  drawBeat,

  gameplay: (ctx, session) => ({
    entry: SCENE_KEYS.place,
    scenes: [
      createPlaceScene(ctx, {
        level: placeLevel(ctx.content),
        session,
        nextSceneKey: SCENE_KEYS.reward,
        drawPiece,
        drawOrb,
        reveal: ctx.content.keyMoment.reveal,
      }),
    ],
  }),
});

import { getAllusion } from '@chags/content';
import { isPlaceComplete, slotFor } from '@chags/templates/place.logic';
import { describe, expect, it } from 'vitest';
import { placeLevel } from './logic';

describe('孔融让梨 · 关卡数据', () => {
  const raw = getAllusion('kongrong');

  it('三位家人、三只梨，一一对应', () => {
    const level = placeLevel(raw!);
    expect(level.slots.length).toBe(3);
    expect(level.orbs.length).toBe(3);
    for (const orb of level.orbs) expect(slotFor(level, orb)).toBeTruthy();
  });

  it('最大的梨在大哥的槽位，最小的留给孔融', () => {
    const level = placeLevel(raw!);
    const orb = (id: string) => level.orbs.find((o) => o.id === id);
    expect(orb('pearBig')?.slotId).toBe('elder');
    expect(orb('pearSmall')?.slotId).toBe('kong');
  });

  it('每个梨归位时都有一句念白', () => {
    const level = placeLevel(raw!);
    for (const orb of level.orbs) expect(orb.speak.length).toBeGreaterThan(0);
  });

  it('集齐三只梨才算完成，重复归位不算', () => {
    const level = placeLevel(raw!);
    expect(isPlaceComplete(level, ['elder', 'second', 'kong'])).toBe(true);
    expect(isPlaceComplete(level, ['elder', 'elder', 'elder'])).toBe(false);
  });
});

// apps/site/src/registry.ts —— 加一行
export const registry = {
  /* ... */
  kongrong: () => import('@chags/game-kongrong'),
};

const kongrongPlace = loadContent('kongrong').game.stages[0]!
  .levelScript as unknown as PlaceScript;

test('孔融让梨：真实拖拽把三只梨送到家人手里', async ({ page }) => {
  await page.goto('/#/play/kongrong');
  await expect(page.locator('canvas')).toBeVisible();
  await expect.poll(() => events(page)).toContain('session:start');

  // 两幕故事（注意 350ms 输入锁）
  await page.waitForTimeout(450);
  await clickDesign(page, 375, 900);
  await page.waitForTimeout(520);
  await clickDesign(page, 375, 900);
  await expect.poll(() => events(page)).toContain('scene:enter:place');

  // 三只梨各归各位：坐标直接从内容 JSON 读，不手抄
  for (const orb of kongrongPlace.orbs) {
    const slot = kongrongPlace.slots.find((s) => s.id === orb.slotId);
    if (!slot) throw new Error('光球 ' + orb.id + ' 找不到槽位');
    await dragDesign(page, { x: orb.x, y: orb.y }, { x: slot.x, y: slot.y });
    await page.waitForTimeout(200);
  }

  await expect.poll(() => events(page), { timeout: 30_000 }).toContain('card:unlocked');
  await clickDesign(page, REWARD.done.x, REWARD.done.y);
  await expect.poll(() => events(page)).toContain('session:exit');
});