高物
548db78ca7
Adds/updates documentation, assets and implementation for Match3D and puzzle image generation workflows. Key changes: decision logs and pitfalls updated to prefer VectorEngine Gemini for Match3D material sheets and to require edits (multipart) for 1:1 container reference images; guidance added for when to use APIMart vs VectorEngine. .env.example clarified APIMart/Responses config. Many new public assets and PPT visuals added. Code changes across frontend and backend: updated shared contracts, server-rs match3d/puzzle/image-generation handlers, VectorEngine/OpenAI image generation clients, and multiple React components/tests to handle UI/background/container image signing, edits workflow, and puzzle UI background resolution. Added src/services/puzzle-runtime/puzzleUiBackgroundSource.ts and related test updates. Includes notes about multipart HTTP/1.1 requirement and test/verification commands in docs.
81 lines
2.9 KiB
TypeScript
81 lines
2.9 KiB
TypeScript
import type { ReactNode } from 'react';
|
|
|
|
import type { CustomWorldCoverRenderMode } from '../services/customWorldCover';
|
|
import { ResolvedAssetImage } from './ResolvedAssetImage';
|
|
|
|
const COVER_PORTRAIT_CLASS_NAMES = [
|
|
'h-[54%] w-[24%] translate-y-[8%]',
|
|
'h-[68%] w-[30%]',
|
|
'h-[56%] w-[24%] translate-y-[10%]',
|
|
] as const;
|
|
|
|
type CustomWorldCoverArtworkProps = {
|
|
imageSrc?: string | null;
|
|
fallbackImageSrc?: string | null;
|
|
title: string;
|
|
fallbackLabel: string;
|
|
renderMode?: CustomWorldCoverRenderMode;
|
|
characterImageSrcs?: string[];
|
|
className?: string;
|
|
overlay?: ReactNode;
|
|
};
|
|
|
|
export function CustomWorldCoverArtwork({
|
|
imageSrc,
|
|
fallbackImageSrc,
|
|
title,
|
|
fallbackLabel,
|
|
renderMode = 'image',
|
|
characterImageSrcs = [],
|
|
className = '',
|
|
overlay,
|
|
}: CustomWorldCoverArtworkProps) {
|
|
const coverCharacterImageSrcs = characterImageSrcs.slice(0, 3);
|
|
|
|
return (
|
|
<div className={`custom-world-cover-artwork relative overflow-hidden ${className}`}>
|
|
{imageSrc || fallbackImageSrc ? (
|
|
<ResolvedAssetImage
|
|
src={imageSrc}
|
|
fallbackSrc={fallbackImageSrc}
|
|
alt={title}
|
|
loading="lazy"
|
|
className="absolute inset-0 h-full w-full object-cover"
|
|
/>
|
|
) : null}
|
|
<div className="absolute inset-0 bg-[linear-gradient(180deg,rgba(8,10,14,0.04),rgba(8,10,14,0.26)_46%,rgba(8,10,14,0.82)_100%)]" />
|
|
{!imageSrc && !fallbackImageSrc ? (
|
|
<div className="absolute inset-0 flex items-center justify-center px-4 text-center text-sm font-semibold tracking-[0.18em] text-zinc-300">
|
|
{fallbackLabel}
|
|
</div>
|
|
) : null}
|
|
{renderMode === 'scene_with_roles' &&
|
|
coverCharacterImageSrcs.length > 0 ? (
|
|
<>
|
|
<div className="absolute inset-x-0 bottom-0 h-[42%] bg-[linear-gradient(180deg,rgba(8,10,14,0)_0%,rgba(8,10,14,0.88)_100%)]" />
|
|
<div className="pointer-events-none absolute inset-x-0 bottom-0 flex items-end justify-center gap-2 px-3 pb-2 sm:pb-3">
|
|
{coverCharacterImageSrcs.map((characterImageSrc, index) => (
|
|
<div
|
|
key={`${title}-cover-character-${index}-${characterImageSrc}`}
|
|
className={`overflow-hidden rounded-[1rem] border border-white/16 bg-[linear-gradient(180deg,rgba(255,255,255,0.14),rgba(255,255,255,0.04))] shadow-[0_12px_28px_rgba(0,0,0,0.4)] ${COVER_PORTRAIT_CLASS_NAMES[index] ?? COVER_PORTRAIT_CLASS_NAMES[1]}`}
|
|
>
|
|
<ResolvedAssetImage
|
|
src={characterImageSrc}
|
|
alt=""
|
|
loading="lazy"
|
|
className="h-full w-full object-cover object-top"
|
|
/>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</>
|
|
) : null}
|
|
{overlay ? (
|
|
<div className="pointer-events-none absolute inset-0">{overlay}</div>
|
|
) : null}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default CustomWorldCoverArtwork;
|