feat: add puzzle clear template runtime
This commit is contained in:
@@ -0,0 +1,184 @@
|
||||
/* @vitest-environment jsdom */
|
||||
|
||||
import { fireEvent, render, screen } from '@testing-library/react';
|
||||
import { act } from 'react';
|
||||
import type { ImgHTMLAttributes } from 'react';
|
||||
import { expect, test, vi } from 'vitest';
|
||||
|
||||
import type {
|
||||
PuzzleClearCardAsset,
|
||||
PuzzleClearPatternGroup,
|
||||
PuzzleClearWorkProfileResponse,
|
||||
} from '../../../packages/shared/src/contracts/puzzleClear';
|
||||
import { PuzzleClearResultView } from './PuzzleClearResultView';
|
||||
|
||||
vi.mock('../ResolvedAssetImage', () => ({
|
||||
ResolvedAssetImage: ({
|
||||
src,
|
||||
alt,
|
||||
className,
|
||||
...rest
|
||||
}: {
|
||||
src?: string | null;
|
||||
alt?: string;
|
||||
className?: string;
|
||||
[key: string]: unknown;
|
||||
}) =>
|
||||
src ? (
|
||||
<img
|
||||
src={src}
|
||||
alt={alt}
|
||||
className={className}
|
||||
{...(rest as ImgHTMLAttributes<HTMLImageElement>)}
|
||||
/>
|
||||
) : null,
|
||||
}));
|
||||
|
||||
function createPatternGroup(index: number): PuzzleClearPatternGroup {
|
||||
return {
|
||||
groupId: `group-${index}`,
|
||||
shape: '1x2',
|
||||
width: 2,
|
||||
height: 1,
|
||||
atlasX: index * 64,
|
||||
atlasY: 0,
|
||||
atlasWidth: 128,
|
||||
atlasHeight: 64,
|
||||
};
|
||||
}
|
||||
|
||||
function createCard(index: number): PuzzleClearCardAsset {
|
||||
return {
|
||||
cardId: `card-${index}`,
|
||||
groupId: `group-${Math.floor(index / 2)}`,
|
||||
shape: '1x2',
|
||||
orientation: 'horizontal',
|
||||
partX: index % 2,
|
||||
partY: 0,
|
||||
imageSrc: `/cards/card-${index}.png`,
|
||||
imageObjectKey: `generated-puzzle-clear-assets/card-${index}.png`,
|
||||
assetObjectId: `assetobj_card_${index}`,
|
||||
sourceAtlasCell: `${index}:0:0`,
|
||||
};
|
||||
}
|
||||
|
||||
function createProfile(
|
||||
overrides: Partial<PuzzleClearWorkProfileResponse['summary']> = {},
|
||||
): PuzzleClearWorkProfileResponse {
|
||||
const atlasAsset = {
|
||||
assetId: 'atlas-1',
|
||||
imageSrc: '/atlas.png',
|
||||
imageObjectKey: 'generated-puzzle-clear-assets/atlas.png',
|
||||
assetObjectId: 'assetobj_atlas',
|
||||
generationProvider: 'gpt-image-2',
|
||||
prompt: '星港',
|
||||
width: 2560,
|
||||
height: 2560,
|
||||
};
|
||||
const boardBackgroundAsset = {
|
||||
...atlasAsset,
|
||||
assetId: 'board-background-1',
|
||||
imageSrc: '/board-background.png',
|
||||
imageObjectKey: 'generated-puzzle-clear-assets/board-background.png',
|
||||
assetObjectId: 'assetobj_board_background',
|
||||
};
|
||||
const patternGroups = Array.from({ length: 35 }, (_, index) =>
|
||||
createPatternGroup(index),
|
||||
);
|
||||
const cardAssets = Array.from({ length: 95 }, (_, index) => createCard(index));
|
||||
const draft = {
|
||||
templateId: 'puzzle-clear',
|
||||
templateName: '拼消消',
|
||||
profileId: 'puzzle-clear-profile-12345678',
|
||||
workTitle: '星港拼消消',
|
||||
workDescription: '霓虹星港主题',
|
||||
themePrompt: '星港',
|
||||
boardBackgroundPrompt: '星港中央棋盘底图',
|
||||
generateBoardBackground: true,
|
||||
boardBackgroundAsset,
|
||||
cardBackImageSrc: '/creation-type-references/puzzle-clear-card-back.webp',
|
||||
atlasAsset,
|
||||
patternGroups,
|
||||
cardAssets,
|
||||
generationStatus: 'ready' as const,
|
||||
};
|
||||
|
||||
return {
|
||||
summary: {
|
||||
runtimeKind: 'puzzle-clear',
|
||||
workId: 'puzzle-clear-work-12345678',
|
||||
profileId: 'puzzle-clear-profile-12345678',
|
||||
ownerUserId: 'user-1',
|
||||
sourceSessionId: 'puzzle-clear-session-1',
|
||||
workTitle: '星港拼消消',
|
||||
workDescription: '霓虹星港主题',
|
||||
themePrompt: '星港',
|
||||
coverImageSrc: '/atlas.png',
|
||||
publicationStatus: 'draft',
|
||||
playCount: 0,
|
||||
updatedAt: '2026-05-30T00:00:00.000Z',
|
||||
publishedAt: null,
|
||||
publishReady: true,
|
||||
generationStatus: 'ready',
|
||||
...overrides,
|
||||
},
|
||||
draft,
|
||||
boardBackgroundAsset,
|
||||
atlasAsset,
|
||||
patternGroups,
|
||||
cardAssets,
|
||||
};
|
||||
}
|
||||
|
||||
test('结果页展示 atlas、中央底图与卡牌预览，并触发试玩、发布和图集重试', async () => {
|
||||
const onStartTestRun = vi.fn();
|
||||
const onPublish = vi.fn();
|
||||
const onRegenerateAtlas = vi.fn();
|
||||
|
||||
const { container } = render(
|
||||
<PuzzleClearResultView
|
||||
profile={createProfile()}
|
||||
onBack={vi.fn()}
|
||||
onEdit={vi.fn()}
|
||||
onStartTestRun={onStartTestRun}
|
||||
onPublish={onPublish}
|
||||
onRegenerateAtlas={onRegenerateAtlas}
|
||||
/>,
|
||||
);
|
||||
|
||||
expect(screen.getByAltText('场地底图').getAttribute('src')).toBe(
|
||||
'/board-background.png',
|
||||
);
|
||||
expect(screen.getByAltText('素材图集').getAttribute('src')).toBe('/atlas.png');
|
||||
expect(screen.getByText('35')).not.toBeNull();
|
||||
expect(screen.getByText('95')).not.toBeNull();
|
||||
expect(container.querySelectorAll('img[src^="/cards/"]')).toHaveLength(24);
|
||||
|
||||
fireEvent.click(screen.getByRole('button', { name: /试玩/u }));
|
||||
await act(async () => {
|
||||
fireEvent.click(screen.getByRole('button', { name: /发布/u }));
|
||||
});
|
||||
fireEvent.click(screen.getByRole('button', { name: /图集/u }));
|
||||
|
||||
expect(onStartTestRun).toHaveBeenCalledTimes(1);
|
||||
expect(onPublish).toHaveBeenCalledTimes(1);
|
||||
expect(onRegenerateAtlas).toHaveBeenCalledTimes(1);
|
||||
});
|
||||
|
||||
test('结果页在素材未发布就绪时禁用发布，且不写入规则说明文案', () => {
|
||||
render(
|
||||
<PuzzleClearResultView
|
||||
profile={createProfile({ publishReady: false })}
|
||||
onBack={vi.fn()}
|
||||
onEdit={vi.fn()}
|
||||
onStartTestRun={vi.fn()}
|
||||
onPublish={vi.fn()}
|
||||
onRegenerateAtlas={vi.fn()}
|
||||
/>,
|
||||
);
|
||||
|
||||
expect(
|
||||
(screen.getByRole('button', { name: /发布/u }) as HTMLButtonElement).disabled,
|
||||
).toBe(true);
|
||||
expect(screen.queryByText(/规则|玩法说明|拖动卡片|拼接完整/u)).toBeNull();
|
||||
});
|
||||
223
src/components/puzzle-clear-result/PuzzleClearResultView.tsx
Normal file
223
src/components/puzzle-clear-result/PuzzleClearResultView.tsx
Normal file
@@ -0,0 +1,223 @@
|
||||
import { ArrowLeft, Loader2, Play, RefreshCcw, Send } from 'lucide-react';
|
||||
import { useState } from 'react';
|
||||
|
||||
import type {
|
||||
PuzzleClearDraftResponse,
|
||||
PuzzleClearWorkProfileResponse,
|
||||
} from '../../../packages/shared/src/contracts/puzzleClear';
|
||||
import { ResolvedAssetImage } from '../ResolvedAssetImage';
|
||||
|
||||
type PuzzleClearResultViewProps = {
|
||||
profile: PuzzleClearDraftResponse | PuzzleClearWorkProfileResponse;
|
||||
isBusy?: boolean;
|
||||
error?: string | null;
|
||||
onBack: () => void;
|
||||
onEdit: () => void;
|
||||
onStartTestRun: () => void;
|
||||
onPublish: () => void;
|
||||
onRegenerateAtlas: () => void;
|
||||
};
|
||||
|
||||
function isPuzzleClearWorkProfile(
|
||||
profile: PuzzleClearResultViewProps['profile'],
|
||||
): profile is PuzzleClearWorkProfileResponse {
|
||||
return 'summary' in profile;
|
||||
}
|
||||
|
||||
function getDraft(profile: PuzzleClearResultViewProps['profile']) {
|
||||
return isPuzzleClearWorkProfile(profile) ? profile.draft : profile;
|
||||
}
|
||||
|
||||
export function PuzzleClearResultView({
|
||||
profile,
|
||||
isBusy = false,
|
||||
error = null,
|
||||
onBack,
|
||||
onEdit,
|
||||
onStartTestRun,
|
||||
onPublish,
|
||||
onRegenerateAtlas,
|
||||
}: PuzzleClearResultViewProps) {
|
||||
const [isPublishing, setIsPublishing] = useState(false);
|
||||
const isWorkProfile = isPuzzleClearWorkProfile(profile);
|
||||
const draft = getDraft(profile);
|
||||
const summary = isWorkProfile ? profile.summary : null;
|
||||
const title = summary?.workTitle?.trim() || draft.workTitle.trim() || '拼消消';
|
||||
const description =
|
||||
summary?.workDescription?.trim() || draft.workDescription.trim();
|
||||
const boardBackgroundAsset = isWorkProfile
|
||||
? profile.boardBackgroundAsset ?? draft.boardBackgroundAsset
|
||||
: draft.boardBackgroundAsset;
|
||||
const atlasAsset = isWorkProfile ? profile.atlasAsset : draft.atlasAsset;
|
||||
const patternGroups = isWorkProfile ? profile.patternGroups : draft.patternGroups;
|
||||
const cardAssets = isWorkProfile ? profile.cardAssets : draft.cardAssets;
|
||||
const previewCards = cardAssets.slice(0, 24);
|
||||
const canPublish = Boolean(isWorkProfile && summary?.publishReady);
|
||||
|
||||
const handlePublish = async () => {
|
||||
setIsPublishing(true);
|
||||
try {
|
||||
await Promise.resolve(onPublish());
|
||||
} finally {
|
||||
setIsPublishing(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="platform-remap-surface mx-auto flex h-full min-h-0 w-full max-w-6xl flex-col px-3 pb-3 pt-3 sm:px-4 sm:pt-4">
|
||||
<div className="mb-3 flex items-center justify-between gap-3">
|
||||
<button
|
||||
type="button"
|
||||
onClick={onBack}
|
||||
className="platform-button platform-button--ghost min-h-0 px-3 py-2 text-sm"
|
||||
>
|
||||
<ArrowLeft className="h-4 w-4" />
|
||||
返回
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={onRegenerateAtlas}
|
||||
disabled={isBusy}
|
||||
className="platform-button platform-button--ghost min-h-0 px-3 py-2 text-sm"
|
||||
>
|
||||
<RefreshCcw className="h-4 w-4" />
|
||||
图集
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="grid min-h-0 flex-1 gap-3 lg:grid-cols-[minmax(0,1.05fr)_minmax(19rem,0.95fr)]">
|
||||
<section className="platform-subpanel flex min-h-0 flex-col rounded-[1.25rem] p-4">
|
||||
<div className="text-2xl font-black text-[var(--platform-text-strong)]">
|
||||
{title}
|
||||
</div>
|
||||
{description ? (
|
||||
<div className="mt-2 text-sm leading-6 text-[var(--platform-text-base)]">
|
||||
{description}
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
<div className="mt-4 grid min-h-0 flex-1 gap-3 sm:grid-cols-[minmax(0,0.92fr)_minmax(0,1.08fr)]">
|
||||
<div className="overflow-hidden rounded-[1rem] border border-[var(--platform-subpanel-border)] bg-white/80">
|
||||
{boardBackgroundAsset?.imageSrc ? (
|
||||
<ResolvedAssetImage
|
||||
src={boardBackgroundAsset.imageSrc}
|
||||
alt="场地底图"
|
||||
className="aspect-[9/16] h-full w-full object-cover"
|
||||
/>
|
||||
) : (
|
||||
<div className="grid aspect-[9/16] place-items-center text-sm text-[var(--platform-text-soft)]">
|
||||
底图
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="flex min-h-0 flex-col gap-3">
|
||||
<div className="overflow-hidden rounded-[1rem] border border-[var(--platform-subpanel-border)] bg-white/80">
|
||||
{atlasAsset?.imageSrc ? (
|
||||
<ResolvedAssetImage
|
||||
src={atlasAsset.imageSrc}
|
||||
alt="素材图集"
|
||||
className="aspect-square w-full object-cover"
|
||||
/>
|
||||
) : (
|
||||
<div className="grid aspect-square place-items-center text-sm text-[var(--platform-text-soft)]">
|
||||
图集
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-6 gap-1.5">
|
||||
{previewCards.map((card) => (
|
||||
<div
|
||||
key={card.cardId}
|
||||
className="aspect-square overflow-hidden rounded-[0.45rem] border border-white/80 bg-white shadow-sm"
|
||||
>
|
||||
<ResolvedAssetImage
|
||||
src={card.imageSrc}
|
||||
alt=""
|
||||
className="h-full w-full object-cover"
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<aside className="flex min-h-0 flex-col gap-3 overflow-y-auto">
|
||||
<section className="platform-subpanel rounded-[1.25rem] p-4">
|
||||
<div className="grid grid-cols-3 gap-2 text-center">
|
||||
<div className="rounded-[0.9rem] bg-white/76 px-2 py-3">
|
||||
<div className="text-xl font-black text-[var(--platform-text-strong)]">
|
||||
{patternGroups.length}
|
||||
</div>
|
||||
<div className="mt-1 text-[0.68rem] font-bold tracking-[0.14em] text-[var(--platform-text-soft)]">
|
||||
图案组
|
||||
</div>
|
||||
</div>
|
||||
<div className="rounded-[0.9rem] bg-white/76 px-2 py-3">
|
||||
<div className="text-xl font-black text-[var(--platform-text-strong)]">
|
||||
{cardAssets.length}
|
||||
</div>
|
||||
<div className="mt-1 text-[0.68rem] font-bold tracking-[0.14em] text-[var(--platform-text-soft)]">
|
||||
卡片
|
||||
</div>
|
||||
</div>
|
||||
<div className="rounded-[0.9rem] bg-white/76 px-2 py-3">
|
||||
<div className="text-xl font-black text-[var(--platform-text-strong)]">
|
||||
{draft.generationStatus}
|
||||
</div>
|
||||
<div className="mt-1 text-[0.68rem] font-bold tracking-[0.14em] text-[var(--platform-text-soft)]">
|
||||
状态
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{error ? (
|
||||
<div className="platform-banner platform-banner--danger rounded-2xl text-sm leading-6">
|
||||
{error}
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
<section className="platform-subpanel mt-auto rounded-[1.25rem] p-4">
|
||||
<div className="grid gap-2">
|
||||
<button
|
||||
type="button"
|
||||
onClick={onStartTestRun}
|
||||
disabled={isBusy || !isWorkProfile}
|
||||
className="platform-button platform-button--primary min-h-11 justify-center gap-2 px-4 py-3"
|
||||
>
|
||||
<Play className="h-4 w-4" />
|
||||
试玩
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={handlePublish}
|
||||
disabled={isBusy || isPublishing || !canPublish}
|
||||
className="platform-button platform-button--secondary min-h-11 justify-center gap-2 px-4 py-3"
|
||||
>
|
||||
{isPublishing ? (
|
||||
<Loader2 className="h-4 w-4 animate-spin" />
|
||||
) : (
|
||||
<Send className="h-4 w-4" />
|
||||
)}
|
||||
发布
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={onEdit}
|
||||
disabled={isBusy}
|
||||
className="platform-button platform-button--ghost min-h-11 justify-center px-4 py-3"
|
||||
>
|
||||
编辑
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
</aside>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default PuzzleClearResultView;
|
||||
Reference in New Issue
Block a user