GenarrativeAI/Genarrative
5
0
Fork 0
Code Issues Pull Requests Actions 5 Packages Projects Releases Wiki Activity

1

Browse Source
This commit is contained in:
高物
2026-05-08 21:46:11 +08:00
parent 94975e4735
commit e410f7974e
13 changed files with 757 additions and 426 deletions
Download Patch File Download Diff File Expand all files Collapse all files

76
src/components/platform-entry/PlatformEntryFlowShellImpl.tsx
View File

@@ -4699,6 +4699,31 @@ export function PlatformEntryFlowShellImpl({
],
);
const saveAndExitRecommendPuzzleRuntime = useCallback(async () => {
if (activeRecommendRuntimeKind !== 'puzzle') {
return;
}
const currentRun = puzzleRunRef.current;
if (!currentRun) {
setActiveRecommendRuntimeKind(null);
return;
}
// 中文注释：推荐页嵌入拼图的“保存并退出”沿用现有运行态语义；
// 正式 run 的每次交换/拖动/通关已写回后端，退出时只收口暂停和本地快照。
const closedRun = currentRun.currentLevel
? setLocalPuzzlePaused(currentRun, false)
: currentRun;
puzzleRunRef.current = null;
setPuzzleRun(null);
setActiveRecommendRuntimeKind(null);
if (closedRun.currentLevel) {
setPuzzleError(null);
}
}, [activeRecommendRuntimeKind, setPuzzleError]);
const leaveAgentWorkspace = useCallback(() => {
enterCreateTab();
sessionController.resetSessionViewState();
@@ -5952,6 +5977,9 @@ export function PlatformEntryFlowShellImpl({
async (entry: PlatformPublicGalleryCard) => {
const entryKey = getPlatformPublicGalleryEntryKey(entry);
const runtimeKind = getPlatformRecommendRuntimeKind(entry);
if (entryKey !== activeRecommendEntryKey) {
await saveAndExitRecommendPuzzleRuntime();
}
setActiveRecommendEntryKey(entryKey);
setActiveRecommendRuntimeKind(runtimeKind);
setActiveRecommendRuntimeError(null);
@@ -6025,6 +6053,8 @@ export function PlatformEntryFlowShellImpl({
}
},
[
activeRecommendEntryKey,
saveAndExitRecommendPuzzleRuntime,
selectedPuzzleDetail,
setBigFishError,
setMatch3DError,
@@ -6037,6 +6067,38 @@ export function PlatformEntryFlowShellImpl({
startVisualNovelRunFromProfile,
],
);
const selectAdjacentRecommendRuntimeEntry = useCallback(
(direction: 1 | -1) => {
if (recommendRuntimeEntries.length === 0) {
return;
}
const activeIndex = recommendRuntimeEntries.findIndex(
(entry) =>
getPlatformPublicGalleryEntryKey(entry) === activeRecommendEntryKey,
);
const baseIndex = activeIndex >= 0 ? activeIndex : 0;
const nextIndex =
(baseIndex + direction + recommendRuntimeEntries.length) %
recommendRuntimeEntries.length;
const nextEntry = recommendRuntimeEntries[nextIndex];
if (!nextEntry) {
return;
}
if (
getPlatformPublicGalleryEntryKey(nextEntry) === activeRecommendEntryKey
) {
return;
}
void selectRecommendRuntimeEntry(nextEntry);
},
[
activeRecommendEntryKey,
recommendRuntimeEntries,
selectRecommendRuntimeEntry,
],
);
const recommendRuntimeContent = useMemo(() => {
if (
@@ -6153,6 +6215,8 @@ export function PlatformEntryFlowShellImpl({
}
error={puzzleError}
embedded
hideBackButton
hideExitControls
onBack={() => {
setActiveRecommendRuntimeKind(null);
}}
@@ -6270,7 +6334,7 @@ export function PlatformEntryFlowShellImpl({
}
return (
<div className="flex h-full min-h-0 items-center justify-center bg-black px-5 text-center text-sm font-semibold leading-6 text-white">
<div className={`platform-theme ${platformThemeClass} flex h-full min-h-0 items-center justify-center bg-[var(--platform-recommend-runtime-state-fill)] px-5 text-center text-sm font-semibold leading-6 text-[var(--platform-recommend-runtime-state-text)]`}>
正在读取世界
</div>
);
@@ -6291,6 +6355,7 @@ export function PlatformEntryFlowShellImpl({
match3dError,
match3dFlow,
match3dRun,
platformThemeClass,
puzzleError,
puzzleRun,
recommendRuntimeEntries,
@@ -7357,9 +7422,12 @@ export function PlatformEntryFlowShellImpl({
isVisualNovelBusy
}
recommendRuntimeError={activeRecommendRuntimeError}
onSelectRecommendEntry={(entry) => {
void selectRecommendRuntimeEntry(entry);
}}
onSelectNextRecommendEntry={() =>
selectAdjacentRecommendRuntimeEntry(1)
}
onSelectPreviousRecommendEntry={() =>
selectAdjacentRecommendRuntimeEntry(-1)
}
onOpenLibraryDetail={(entry) => {
runProtectedAction(() => {
void detailNavigation.openLibraryDetail(entry);

32
src/components/puzzle-runtime/PuzzleRuntimeShell.test.tsx
View File

@@ -240,7 +240,7 @@ test('首次退出引导的作品改造按钮进入改造流程', () => {
expect(screen.queryByRole('dialog')).toBeNull();
});
test('顶部作者显示头像昵称，底部功能居中放大且不显示等待候选', () => {
test('顶部不显示作者，关卡标题和倒计时更紧凑', () => {
const runWithoutNext: PuzzleRunSnapshot = {
...clearedRun,
recommendedNextProfileId: null,
@@ -256,15 +256,17 @@ test('顶部作者显示头像昵称，底部功能居中放大且不显示等
/>,
);
const avatar = screen.getByText('测');
const timer = screen.getByText('4:48');
const hintButton = screen.getByRole('button', { name: '提示' });
const referenceButton = screen.getByRole('button', { name: '原图' });
const freezeButton = screen.getByRole('button', { name: '冻结' });
expect(avatar.className).toContain('rounded-full');
expect(screen.getByText('测试作者')).toBeTruthy();
expect(timer.className).toContain('text-2xl');
expect(screen.queryByText('测试作者')).toBeNull();
expect(screen.getByText('第 1 关')).toBeTruthy();
expect(screen.getByText('潮雾拼图')).toBeTruthy();
expect(timer.className).toContain('puzzle-runtime-timer');
expect(timer.className).toContain('text-lg');
expect(timer.className).not.toContain('text-2xl');
expect(hintButton.className).toContain('h-16');
expect(referenceButton.className).toContain('h-16');
expect(freezeButton.className).toContain('h-16');
@@ -467,14 +469,32 @@ test('拼图棋盘使用贴近移动端边缘的正方形舞台承载切块', ()
);
const board = screen.getByTestId('puzzle-board');
expect(board.className).toContain('puzzle-runtime-board');
expect(board.className).toContain('aspect-square');
expect(board.className).toContain('max-w-[min(99vw,calc(100vh_-_16.5rem))]');
expect(board.className).toContain('max-w-[min(99vw,calc(100vh_-_14rem))]');
expect(board.className).not.toContain('aspect-video');
expect(board.className).not.toContain('aspect-[9/16]');
expect(board.getAttribute('style')).toContain('grid-template-rows');
expect(container.querySelector('.min-h-\\[4\\.5rem\\]')).toBeNull();
});
test('拼图运行态主体使用主题语义类承接明暗主题', () => {
const { container } = renderPuzzleRuntime(
<PuzzleRuntimeShell
run={null}
onBack={vi.fn()}
onSwapPieces={vi.fn()}
onDragPiece={vi.fn()}
onAdvanceNextLevel={vi.fn()}
/>,
);
expect(container.firstElementChild?.className).toContain(
'puzzle-runtime-shell',
);
expect(container.querySelector('.puzzle-runtime-pill')).toBeTruthy();
});
test('合并块按实际拼块外轮廓描边', () => {
const mergedRun: PuzzleRunSnapshot = {
...clearedRun,

299
src/components/puzzle-runtime/PuzzleRuntimeShell.tsx
View File

@@ -41,6 +41,7 @@ type PuzzleRuntimeShellProps = {
isBusy?: boolean;
error?: string | null;
hideBackButton?: boolean;
hideExitControls?: boolean;
embedded?: boolean;
onBack: () => void;
onRemodelWork?: (profileId: string) => void | Promise<void>;
@@ -157,10 +158,6 @@ function formatTimerMs(value: number | null | undefined) {
return `${minutes}:${seconds.toString().padStart(2, '0')}`;
}
function resolveAuthorAvatarLabel(authorDisplayName: string) {
return authorDisplayName.trim().slice(0, 1) || '玩';
}
function resolveActiveFreezeElapsedMs(
level: PuzzleRuntimeLevelSnapshot,
nowMs: number,
@@ -309,6 +306,7 @@ export function PuzzleRuntimeShell({
isBusy = false,
error = null,
hideBackButton = false,
hideExitControls = false,
embedded = false,
onBack,
onRemodelWork,
@@ -790,9 +788,9 @@ export function PuzzleRuntimeShell({
if (!run || !currentLevel || !board) {
return (
<div
className={`${embedded ? 'relative h-full min-h-0 w-full' : 'fixed inset-0 z-[100]'} flex items-center justify-center bg-slate-950 text-white`}
className={`puzzle-runtime-shell ${embedded ? 'relative h-full min-h-0 w-full' : 'fixed inset-0 z-[100]'} flex items-center justify-center`}
>
<div className="flex items-center gap-2 rounded-full bg-white/10 px-5 py-3 text-sm">
<div className="puzzle-runtime-pill flex items-center gap-2 rounded-full px-5 py-3 text-sm">
<Loader2 className="h-4 w-4 animate-spin" />
正在进入拼图关卡
</div>
@@ -963,9 +961,6 @@ export function PuzzleRuntimeShell({
const canShowNextAction =
canAdvanceDefaultNextLevel || hasSimilarWorkChoices;
const levelLabel = `第 ${currentLevel.levelIndex} 关`;
const authorAvatarLabel = resolveAuthorAvatarLabel(
currentLevel.authorDisplayName,
);
const exitPromptProfileId = currentLevel.profileId.trim();
const leaderboardEntries =
(currentLevel.leaderboardEntries ?? []).length > 0
@@ -979,6 +974,10 @@ export function PuzzleRuntimeShell({
isBusy || runtimeStatus !== 'playing' || Boolean(propDialog);
const handleBackRequest = () => {
if (hideExitControls) {
return;
}
if (
onRemodelWork &&
exitPromptProfileId &&
@@ -1069,7 +1068,10 @@ export function PuzzleRuntimeShell({
if (propKind === 'freezeTime') {
// 中文注释：正式 run 可能在冻结确认期间已被服务端结算为失败态；
// 这种边界同步只关闭确认窗，不再播放冻结成功反馈。
const resultLevel = (useResult ?? null)?.currentLevel ?? currentLevelRef.current;
const resultLevel =
useResult && typeof useResult === 'object'
? useResult.currentLevel
: currentLevelRef.current;
if (resultLevel?.status === 'playing') {
setIsFreezeEffectVisible(true);
window.setTimeout(() => {
@@ -1084,9 +1086,9 @@ export function PuzzleRuntimeShell({
return (
<div
className={`${embedded ? 'relative h-full min-h-0 w-full' : 'fixed inset-0 z-[100]'} flex justify-center bg-slate-950 text-white`}
className={`puzzle-runtime-shell ${embedded ? 'relative h-full min-h-0 w-full' : 'fixed inset-0 z-[100]'} flex justify-center`}
>
<div className="relative h-full w-full overflow-hidden bg-[radial-gradient(circle_at_50%_20%,rgba(251,191,36,0.18),transparent_28%),radial-gradient(circle_at_20%_80%,rgba(249,115,22,0.16),transparent_26%),linear-gradient(180deg,#2d160e,#020617)]">
<div className="puzzle-runtime-stage relative h-full w-full overflow-hidden">
{currentLevel.coverImageSrc ? (
<ResolvedAssetImage
src={currentLevel.coverImageSrc}
@@ -1095,49 +1097,40 @@ export function PuzzleRuntimeShell({
className="absolute inset-0 h-full w-full object-cover opacity-[0.16] blur-2xl"
/>
) : null}
<div className="absolute inset-0 bg-[linear-gradient(rgba(255,255,255,0.04)_1px,transparent_1px),linear-gradient(90deg,rgba(255,255,255,0.04)_1px,transparent_1px)] bg-[length:34px_34px] opacity-20" />
<div className="puzzle-runtime-stage__grid" />
<div className="absolute left-0 top-0 z-20 w-full px-4 py-4">
<div className="grid grid-cols-[2.75rem_minmax(0,1fr)_2.75rem] items-start gap-2 sm:gap-3">
<div className="absolute left-0 top-0 z-20 w-full px-3 py-3 sm:px-4">
<div className="grid grid-cols-[2.5rem_minmax(0,1fr)_2.5rem] items-start gap-2 sm:grid-cols-[2.75rem_minmax(0,1fr)_2.75rem] sm:gap-3">
<button
type="button"
onClick={handleBackRequest}
aria-label="返回上一页"
disabled={hideBackButton}
className={`h-11 w-11 items-center justify-center rounded-full bg-black/30 backdrop-blur ${
className={`puzzle-runtime-icon-button h-10 w-10 items-center justify-center rounded-full sm:h-11 sm:w-11 ${
hideBackButton ? 'invisible pointer-events-none' : 'inline-flex'
}`}
>
<ArrowLeft className="h-4 w-4" />
</button>
<div className="flex min-w-0 flex-col items-center gap-2 rounded-[1.35rem] bg-black/30 px-3 py-3 text-center backdrop-blur sm:px-5">
<div className="line-clamp-1 max-w-full text-sm font-black text-white sm:text-base">
{currentLevel.levelName}
</div>
<div
className={`inline-flex items-center gap-2 rounded-full px-4 py-2 font-mono text-2xl font-black leading-none shadow-[0_10px_28px_rgba(0,0,0,0.24)] sm:text-3xl ${
displayRemainingMs <= 20_000 && runtimeStatus === 'playing'
? 'bg-red-500/24 text-red-100'
: 'bg-white/12 text-white'
}`}
>
<Clock className="h-5 w-5 sm:h-6 sm:w-6" />
{formatTimerMs(displayRemainingMs)}
</div>
<div className="flex min-w-0 max-w-full items-center justify-center gap-2 text-white/82">
<span
className="inline-flex h-7 w-7 shrink-0 items-center justify-center rounded-full border border-white/16 bg-amber-200 text-xs font-black text-slate-950 shadow-[0_8px_20px_rgba(0,0,0,0.2)]"
aria-hidden="true"
>
{authorAvatarLabel}
</span>
<span className="min-w-0 truncate text-xs font-semibold sm:text-sm">
{currentLevel.authorDisplayName}
</span>
<span className="shrink-0 rounded-full bg-white/10 px-2 py-0.5 text-[10px] font-bold tracking-[0.12em] text-amber-100/90 sm:text-[11px]">
<div className="puzzle-runtime-header-card mx-auto flex max-w-[min(15rem,calc(100vw_-_6.5rem))] min-w-0 flex-col items-center gap-1.5 rounded-[1.1rem] px-3 py-2 text-center sm:max-w-[18rem] sm:px-4">
<div className="flex max-w-full items-center justify-center gap-1.5">
<span className="puzzle-runtime-level-badge shrink-0 rounded-full px-2 py-0.5 text-[10px] font-bold sm:text-[11px]">
{levelLabel}
</span>
<span className="min-w-0 truncate text-sm font-black sm:text-base">
{currentLevel.levelName}
</span>
</div>
<div
className={`inline-flex items-center gap-1.5 rounded-full px-3 py-1.5 font-mono text-lg font-black leading-none shadow-[0_10px_28px_rgba(0,0,0,0.2)] sm:text-xl ${
displayRemainingMs <= 20_000 && runtimeStatus === 'playing'
? 'puzzle-runtime-timer--urgent'
: 'puzzle-runtime-timer'
}`}
>
<Clock className="h-4 w-4 sm:h-5 sm:w-5" />
{formatTimerMs(displayRemainingMs)}
</div>
</div>
@@ -1146,21 +1139,21 @@ export function PuzzleRuntimeShell({
onClick={() => setIsSettingsPanelOpen(true)}
aria-label="打开拼图设置"
title="打开拼图设置"
className="inline-flex h-11 w-11 items-center justify-center rounded-full bg-black/30 backdrop-blur transition duration-150 hover:-translate-y-px hover:brightness-110 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-amber-200/60"
className="puzzle-runtime-icon-button inline-flex h-10 w-10 items-center justify-center rounded-full transition duration-150 hover:-translate-y-px hover:brightness-110 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--platform-button-primary-border)] sm:h-11 sm:w-11"
>
<PixelIcon
src={CHROME_ICONS.settings}
className="h-[1.4rem] w-[1.4rem] drop-shadow-[0_4px_10px_rgba(0,0,0,0.45)]"
className="h-5 w-5 drop-shadow-[0_4px_10px_rgba(0,0,0,0.45)] sm:h-[1.4rem] sm:w-[1.4rem]"
/>
</button>
</div>
</div>
<div className="absolute inset-0 flex items-center justify-center px-1 py-3 pt-28 pb-32 sm:p-4">
<div className="absolute inset-0 flex items-center justify-center px-1 py-3 pt-24 pb-32 sm:px-4 sm:py-4 sm:pt-24 sm:pb-28">
<div
ref={boardRef}
data-testid="puzzle-board"
className="relative grid aspect-square w-full max-w-[min(99vw,calc(100vh_-_16.5rem))] touch-none select-none overflow-hidden rounded-[1.2rem] border border-white/16 bg-white/8 shadow-[0_30px_80px_rgba(0,0,0,0.35)] backdrop-blur-sm sm:max-w-[min(92vw,calc(100vh_-_17rem))] sm:rounded-[1.45rem]"
className="puzzle-runtime-board relative grid aspect-square w-full max-w-[min(99vw,calc(100vh_-_14rem))] touch-none select-none overflow-hidden rounded-[1.2rem] border backdrop-blur-sm sm:max-w-[min(92vw,calc(100vh_-_13rem))] sm:rounded-[1.45rem]"
style={{
gridTemplateColumns: `repeat(${board.cols}, minmax(0, 1fr))`,
gridTemplateRows: `repeat(${board.rows}, minmax(0, 1fr))`,
@@ -1216,14 +1209,14 @@ export function PuzzleRuntimeShell({
pieceElementRefMap.current.delete(piece.pieceId);
}}
data-piece-id={piece?.pieceId ?? undefined}
className={`relative flex h-full items-center justify-center overflow-hidden rounded-[0.85rem] border-2 border-white/22 text-sm font-black transition ${
className={`puzzle-runtime-piece relative flex h-full items-center justify-center overflow-hidden rounded-[0.85rem] border-2 text-sm font-black transition ${
occupied
? isSelected
? 'border-amber-200 bg-amber-400/84 text-slate-950 shadow-[0_12px_30px_rgba(251,191,36,0.22)]'
? 'puzzle-runtime-piece--selected'
: isMerged
? 'border-transparent bg-transparent text-white'
: 'bg-white/12 text-white'
: 'border-white/8 bg-black/18 text-white/20'
? 'puzzle-runtime-piece--merged'
: 'puzzle-runtime-piece--filled'
: 'puzzle-runtime-piece--empty'
} ${
isMerged
? 'transition-colors'
@@ -1282,7 +1275,7 @@ export function PuzzleRuntimeShell({
) : (
<div className="absolute inset-0 bg-[linear-gradient(145deg,rgba(251,191,36,0.4),rgba(76,29,19,0.72))]" />
)}
<div className="absolute inset-0 bg-black/10" />
<div className="puzzle-runtime-piece-overlay absolute inset-0" />
</div>
) : (
''
@@ -1467,12 +1460,12 @@ export function PuzzleRuntimeShell({
<div className="absolute bottom-0 left-0 z-20 flex w-full flex-col items-center gap-2 px-3 py-3 sm:px-4 sm:py-4">
{error ? (
<div className="rounded-full bg-red-500/20 px-3 py-1 text-xs text-red-100">
<div className="puzzle-runtime-error-chip rounded-full px-3 py-1 text-xs">
{error}
</div>
) : null}
{selectedPieceId && runtimeStatus === 'playing' ? (
<div className="rounded-full bg-black/28 px-3 py-1 text-xs text-white/72 backdrop-blur">
<div className="puzzle-runtime-status-chip rounded-full px-3 py-1 text-xs">
已选择
</div>
) : null}
@@ -1491,21 +1484,21 @@ export function PuzzleRuntimeShell({
levelId: run.nextLevelId ?? null,
});
}}
className="inline-flex min-h-11 items-center gap-2 rounded-full bg-amber-200 px-5 py-2.5 text-sm font-bold text-slate-950 shadow-[0_14px_36px_rgba(251,191,36,0.26)] transition hover:bg-amber-100 disabled:opacity-45"
className="puzzle-runtime-primary-button inline-flex min-h-11 items-center gap-2 rounded-full px-5 py-2.5 text-sm font-bold transition hover:brightness-105 disabled:opacity-45"
>
{hasSimilarWorkChoices ? '换个作品' : '下一关'}
<ArrowRight className="h-4 w-4" />
</button>
) : null}
<div className="flex items-center justify-center gap-2 rounded-full bg-black/36 p-2 backdrop-blur sm:gap-3">
<div className="puzzle-runtime-toolbar flex items-center justify-center gap-2 rounded-full p-2 sm:gap-3">
<button
type="button"
disabled={isInteractionLocked}
onClick={() => openPropDialog('hint', '使用提示')}
className="inline-flex h-16 min-w-[5.75rem] flex-col items-center justify-center gap-1 rounded-full px-4 text-sm font-black text-white/88 transition hover:bg-white/10 disabled:opacity-45"
className="puzzle-runtime-tool-button inline-flex h-16 min-w-[5.75rem] flex-col items-center justify-center gap-1 rounded-full px-4 text-sm font-black transition disabled:opacity-45"
>
<Lightbulb className="h-6 w-6 text-amber-100" />
<Lightbulb className="puzzle-runtime-tool-button__warm h-6 w-6" />
提示
</button>
<button
@@ -1519,10 +1512,10 @@ export function PuzzleRuntimeShell({
}
openPropDialog('reference', '查看原图');
}}
className={`inline-flex h-16 min-w-[5.75rem] flex-col items-center justify-center gap-1 rounded-full px-4 text-sm font-black transition hover:bg-white/10 disabled:opacity-45 ${
className={`inline-flex h-16 min-w-[5.75rem] flex-col items-center justify-center gap-1 rounded-full px-4 text-sm font-black transition disabled:opacity-45 ${
isOriginalOverlayVisible
? 'bg-sky-200 text-slate-950'
: 'text-white/86'
? 'puzzle-runtime-tool-button--active'
: 'puzzle-runtime-tool-button'
}`}
>
<Eye className="h-6 w-6" />
@@ -1532,9 +1525,9 @@ export function PuzzleRuntimeShell({
type="button"
disabled={isInteractionLocked}
onClick={() => openPropDialog('freezeTime', '冻结时间')}
className="inline-flex h-16 min-w-[5.75rem] flex-col items-center justify-center gap-1 rounded-full px-4 text-sm font-black text-white/88 transition hover:bg-white/10 disabled:opacity-45"
className="puzzle-runtime-tool-button inline-flex h-16 min-w-[5.75rem] flex-col items-center justify-center gap-1 rounded-full px-4 text-sm font-black transition disabled:opacity-45"
>
<Snowflake className="h-6 w-6 text-cyan-100" />
<Snowflake className="puzzle-runtime-tool-button__cool h-6 w-6" />
冻结
</button>
</div>
@@ -1565,7 +1558,7 @@ export function PuzzleRuntimeShell({
{propDialog ? (
<div
className="absolute inset-0 z-50 flex items-center justify-center bg-black/72 p-4 backdrop-blur-sm"
className="puzzle-runtime-modal-overlay absolute inset-0 z-50 flex items-center justify-center p-4 backdrop-blur-sm"
onClick={() => {
if (!isPropConfirming) {
setPropDialog(null);
@@ -1576,35 +1569,35 @@ export function PuzzleRuntimeShell({
role="dialog"
aria-modal="true"
aria-labelledby="puzzle-prop-confirm-title"
className="pixel-nine-slice pixel-modal-shell w-full max-w-[22rem] overflow-hidden shadow-[0_24px_80px_rgba(0,0,0,0.55)]"
className="puzzle-runtime-dialog pixel-nine-slice pixel-modal-shell w-full max-w-[22rem] overflow-hidden shadow-[0_24px_80px_rgba(0,0,0,0.24)]"
style={getNineSliceStyle(UI_CHROME.modalPanel)}
onClick={(event) => event.stopPropagation()}
>
<header className="flex items-center gap-3 border-b border-white/10 px-5 py-4">
<span className="inline-flex h-9 w-9 items-center justify-center rounded-full bg-amber-200 text-slate-950">
<header className="puzzle-runtime-dialog__line flex items-center gap-3 border-b px-5 py-4">
<span className="puzzle-runtime-primary-button inline-flex h-9 w-9 items-center justify-center rounded-full">
<Sparkles className="h-4 w-4" />
</span>
<h2
id="puzzle-prop-confirm-title"
className="text-sm font-black text-white"
className="text-sm font-black"
>
{propDialog.title}
</h2>
</header>
<div className="px-5 py-4 text-sm text-white/72">
<div className="puzzle-runtime-dialog__body px-5 py-4 text-sm">
消耗 1 光点
{propConfirmError ? (
<div className="mt-3 rounded-[0.9rem] border border-red-300/20 bg-red-500/12 px-3 py-2 text-xs leading-5 text-red-100">
<div className="puzzle-runtime-error-chip mt-3 rounded-[0.9rem] border px-3 py-2 text-xs leading-5">
{propConfirmError}
</div>
) : null}
</div>
<footer className="flex items-center justify-end gap-3 border-t border-white/10 px-5 py-4">
<footer className="puzzle-runtime-dialog__line flex items-center justify-end gap-3 border-t px-5 py-4">
<button
type="button"
onClick={() => setPropDialog(null)}
disabled={isPropConfirming}
className="rounded-full border border-white/12 bg-black/20 px-4 py-2 text-xs font-bold text-zinc-200 transition hover:text-white"
className="puzzle-runtime-secondary-button rounded-full px-4 py-2 text-xs font-bold transition hover:brightness-105"
>
取消
</button>
@@ -1614,7 +1607,7 @@ export function PuzzleRuntimeShell({
onClick={() => {
void handleConfirmProp();
}}
className="inline-flex items-center gap-2 rounded-full bg-amber-200 px-5 py-2 text-sm font-black text-slate-950 transition hover:bg-amber-100 disabled:opacity-60"
className="puzzle-runtime-primary-button inline-flex items-center gap-2 rounded-full px-5 py-2 text-sm font-black transition hover:brightness-105 disabled:opacity-60"
>
{isPropConfirming ? (
<Loader2 className="h-3.5 w-3.5 animate-spin" />
@@ -1628,51 +1621,53 @@ export function PuzzleRuntimeShell({
{isSettingsPanelOpen ? (
<div
className="absolute inset-0 z-50 flex items-center justify-center bg-black/72 p-3 backdrop-blur-sm sm:p-4"
className="puzzle-runtime-modal-overlay absolute inset-0 z-50 flex items-center justify-center p-3 backdrop-blur-sm sm:p-4"
onClick={() => setIsSettingsPanelOpen(false)}
>
<section
role="dialog"
aria-modal="true"
aria-labelledby="puzzle-settings-title"
className="pixel-nine-slice pixel-modal-shell flex max-h-[min(88vh,36rem)] w-full max-w-md flex-col overflow-hidden shadow-[0_24px_80px_rgba(0,0,0,0.55)]"
className="puzzle-runtime-dialog pixel-nine-slice pixel-modal-shell flex max-h-[min(88vh,36rem)] w-full max-w-md flex-col overflow-hidden shadow-[0_24px_80px_rgba(0,0,0,0.24)]"
style={getNineSliceStyle(UI_CHROME.modalPanel)}
onClick={(event) => event.stopPropagation()}
>
<header className="relative border-b border-white/10 px-4 py-3 sm:px-5 sm:py-4">
<header className="puzzle-runtime-dialog__line relative border-b px-4 py-3 sm:px-5 sm:py-4">
<div className="min-w-0 pr-10">
<h2
id="puzzle-settings-title"
className="text-sm font-semibold text-white"
className="text-sm font-semibold"
>
拼图设置
</h2>
<div className="mt-1 text-[11px] text-zinc-500">
调整音乐音量，查看本局进度，或返回上一页。
<div className="puzzle-runtime-dialog__soft mt-1 text-[11px]">
{hideExitControls
? '调整音乐音量，查看本局进度。'
: '调整音乐音量，查看本局进度，或返回上一页。'}
</div>
</div>
<button
type="button"
aria-label="关闭拼图设置"
onClick={() => setIsSettingsPanelOpen(false)}
className="absolute right-4 top-3 p-1 text-zinc-400 transition-colors hover:text-white sm:right-5 sm:top-4"
className="puzzle-runtime-dialog__soft absolute right-4 top-3 p-1 transition-colors hover:brightness-75 sm:right-5 sm:top-4"
>
<PixelIcon src={CHROME_ICONS.close} className="h-4 w-4" />
</button>
</header>
<div className="min-h-0 flex-1 space-y-4 overflow-y-auto p-4">
<div className="rounded-2xl border border-white/10 bg-[radial-gradient(circle_at_top,rgba(56,189,248,0.14),transparent_65%),rgba(0,0,0,0.24)] p-4">
<div className="puzzle-runtime-settings-card rounded-2xl p-4">
<div className="flex items-start justify-between gap-3">
<div>
<div className="text-[10px] tracking-[0.24em] text-sky-200/80">
<div className="puzzle-runtime-tool-button__cool text-[10px] tracking-[0.24em]">
音频
</div>
<div className="mt-2 text-sm font-semibold text-white">
<div className="mt-2 text-sm font-semibold">
音乐音量
</div>
</div>
<div className="rounded-full border border-white/10 bg-black/28 px-2 py-1 text-xs text-white/80">
<div className="puzzle-runtime-pill rounded-full px-2 py-1 text-xs">
{Math.round(musicVolume * 100)}%
</div>
</div>
@@ -1690,37 +1685,37 @@ export function PuzzleRuntimeShell({
Number(event.currentTarget.value) / 100,
)
}
className="h-2 w-full cursor-pointer accent-sky-400"
className="h-2 w-full cursor-pointer accent-[var(--puzzle-runtime-accent-text)]"
/>
</div>
</div>
<div className="rounded-2xl border border-white/10 bg-black/25 px-4 py-3">
<div className="text-[10px] uppercase tracking-[0.18em] text-zinc-500">
<div className="puzzle-runtime-settings-card rounded-2xl px-4 py-3">
<div className="puzzle-runtime-dialog__soft text-[10px] uppercase tracking-[0.18em]">
本局进度
</div>
<div className="mt-3 space-y-2 text-sm text-white/82">
<div className="puzzle-runtime-dialog__body mt-3 space-y-2 text-sm">
<div className="flex items-center justify-between gap-3">
<span className="text-white/56">关卡</span>
<span className="font-semibold text-white">
<span className="puzzle-runtime-dialog__soft">关卡</span>
<span className="font-semibold">
{levelLabel}
</span>
</div>
<div className="flex items-center justify-between gap-3">
<span className="text-white/56">已完成关卡</span>
<span className="font-semibold text-white">
<span className="puzzle-runtime-dialog__soft">已完成关卡</span>
<span className="font-semibold">
{run.clearedLevelCount}
</span>
</div>
<div className="flex items-center justify-between gap-3">
<span className="text-white/56">当前状态</span>
<span className="font-semibold text-white">
<span className="puzzle-runtime-dialog__soft">当前状态</span>
<span className="font-semibold">
{statusLabel}
</span>
</div>
<div className="flex items-center justify-between gap-3">
<span className="text-white/56">当前用时</span>
<span className="font-mono font-semibold text-white">
<span className="puzzle-runtime-dialog__soft">当前用时</span>
<span className="font-mono font-semibold">
{formatElapsedMs(currentLevel.elapsedMs)}
</span>
</div>
@@ -1728,50 +1723,52 @@ export function PuzzleRuntimeShell({
</div>
</div>
<footer className="flex items-center justify-end gap-3 border-t border-white/10 px-4 py-3 sm:px-5">
<footer className="puzzle-runtime-dialog__line flex items-center justify-end gap-3 border-t px-4 py-3 sm:px-5">
<button
type="button"
onClick={() => setIsSettingsPanelOpen(false)}
className="rounded-full border border-white/12 bg-black/20 px-3 py-1.5 text-[11px] text-zinc-200 transition hover:text-white"
className="puzzle-runtime-secondary-button rounded-full px-3 py-1.5 text-[11px] transition hover:brightness-105"
>
继续拼图
</button>
<button
type="button"
onClick={() => {
setIsSettingsPanelOpen(false);
onBack();
}}
className={`rounded-full bg-amber-200 px-4 py-2 text-sm font-bold text-slate-950 transition hover:bg-amber-100 ${
hideBackButton ? 'hidden' : ''
}`}
>
返回上一页
</button>
{!hideExitControls ? (
<button
type="button"
onClick={() => {
setIsSettingsPanelOpen(false);
onBack();
}}
className={`puzzle-runtime-primary-button rounded-full px-4 py-2 text-sm font-bold transition hover:brightness-105 ${
hideBackButton ? 'hidden' : ''
}`}
>
返回上一页
</button>
) : null}
</footer>
</section>
</div>
) : null}
{isExitRemodelPromptOpen ? (
{isExitRemodelPromptOpen && !hideExitControls ? (
<div
className="absolute inset-0 z-50 flex items-center justify-center bg-slate-950/76 px-4 py-6 backdrop-blur-md"
className="puzzle-runtime-modal-overlay absolute inset-0 z-50 flex items-center justify-center px-4 py-6 backdrop-blur-md"
>
<section
role="dialog"
aria-modal="true"
aria-labelledby="puzzle-exit-remodel-title"
className="relative flex w-full max-w-[21rem] flex-col overflow-hidden rounded-[1.35rem] border border-amber-200/24 bg-[linear-gradient(180deg,rgba(30,41,59,0.98),rgba(2,6,23,0.98))] shadow-[0_28px_90px_rgba(0,0,0,0.58)]"
className="puzzle-runtime-dialog relative flex w-full max-w-[21rem] flex-col overflow-hidden rounded-[1.35rem] shadow-[0_28px_90px_rgba(0,0,0,0.28)]"
onClick={(event) => event.stopPropagation()}
>
<div className="pointer-events-none absolute inset-x-8 top-0 h-px bg-gradient-to-r from-transparent via-amber-200/70 to-transparent" />
<div className="pointer-events-none absolute inset-x-8 top-0 h-px bg-gradient-to-r from-transparent via-[var(--puzzle-runtime-accent-text)] to-transparent" />
<header className="flex flex-col items-center px-6 pt-7 text-center">
<div className="mb-4 grid h-14 w-14 place-items-center rounded-2xl border border-amber-200/28 bg-amber-200/12 shadow-[0_16px_42px_rgba(251,191,36,0.18)]">
<Sparkles className="h-7 w-7 text-amber-200" />
<div className="puzzle-runtime-stat-card mb-4 grid h-14 w-14 place-items-center rounded-2xl">
<Sparkles className="puzzle-runtime-tool-button__warm h-7 w-7" />
</div>
<h2
id="puzzle-exit-remodel-title"
className="text-[1.75rem] font-black leading-[1.08] text-white"
className="text-[1.75rem] font-black leading-[1.08]"
>
体验不佳？
<br />
@@ -1786,7 +1783,7 @@ export function PuzzleRuntimeShell({
setIsExitRemodelPromptOpen(false);
void onRemodelWork?.(exitPromptProfileId);
}}
className="min-h-[3.25rem] rounded-2xl bg-amber-200 px-5 text-sm font-black text-slate-950 shadow-[0_14px_34px_rgba(251,191,36,0.24)] transition hover:bg-amber-100 active:translate-y-px disabled:cursor-not-allowed disabled:opacity-50"
className="puzzle-runtime-primary-button min-h-[3.25rem] rounded-2xl px-5 text-sm font-black transition hover:brightness-105 active:translate-y-px disabled:cursor-not-allowed disabled:opacity-50"
>
作品改造
</button>
@@ -1796,7 +1793,7 @@ export function PuzzleRuntimeShell({
setIsExitRemodelPromptOpen(false);
onBack();
}}
className="min-h-[3rem] rounded-2xl border border-white/14 bg-white/8 px-5 text-sm font-bold text-white/92 transition hover:bg-white/12 active:translate-y-px"
className="puzzle-runtime-secondary-button min-h-[3rem] rounded-2xl px-5 text-sm font-bold transition hover:brightness-105 active:translate-y-px"
>
保存并退出
</button>
@@ -1806,32 +1803,32 @@ export function PuzzleRuntimeShell({
) : null}
{runtimeStatus === 'failed' ? (
<div className="absolute inset-0 z-40 flex items-center justify-center bg-slate-950/68 px-4 py-6 backdrop-blur-sm">
<div className="puzzle-runtime-modal-overlay absolute inset-0 z-40 flex items-center justify-center px-4 py-6 backdrop-blur-sm">
<section
role="dialog"
aria-modal="true"
aria-labelledby="puzzle-failed-title"
className="flex w-full max-w-[24rem] flex-col overflow-hidden rounded-[1.5rem] border border-white/14 bg-slate-950/94 shadow-[0_28px_90px_rgba(0,0,0,0.5)]"
className="puzzle-runtime-dialog flex w-full max-w-[24rem] flex-col overflow-hidden rounded-[1.5rem] shadow-[0_28px_90px_rgba(0,0,0,0.28)]"
>
<header className="border-b border-white/10 px-5 py-4">
<header className="puzzle-runtime-dialog__line border-b px-5 py-4">
<h2
id="puzzle-failed-title"
className="text-lg font-black text-white"
className="text-lg font-black"
>
关卡失败
</h2>
<div className="mt-1 text-xs text-white/62">
<div className="puzzle-runtime-dialog__soft mt-1 text-xs">
{currentLevel.levelName}
</div>
</header>
<footer className="grid grid-cols-2 gap-3 border-t border-white/10 px-5 py-4">
<footer className="puzzle-runtime-dialog__line grid grid-cols-2 gap-3 border-t px-5 py-4">
<button
type="button"
disabled={isBusy}
onClick={() => {
void onRestartLevel?.();
}}
className="rounded-full border border-white/14 bg-black/24 px-4 py-2.5 text-sm font-black text-white transition hover:bg-white/10 disabled:opacity-50"
className="puzzle-runtime-secondary-button rounded-full px-4 py-2.5 text-sm font-black transition hover:brightness-105 disabled:opacity-50"
>
重新开始
</button>
@@ -1839,7 +1836,7 @@ export function PuzzleRuntimeShell({
type="button"
disabled={isBusy}
onClick={() => openPropDialog('extendTime', '继续1分钟')}
className="rounded-full bg-amber-200 px-4 py-2.5 text-sm font-black text-slate-950 transition hover:bg-amber-100 disabled:opacity-50"
className="puzzle-runtime-primary-button rounded-full px-4 py-2.5 text-sm font-black transition hover:brightness-105 disabled:opacity-50"
>
继续1分钟
</button>
@@ -1849,32 +1846,32 @@ export function PuzzleRuntimeShell({
) : null}
{isClearResultOpen ? (
<div className="absolute inset-0 z-40 flex items-center justify-center bg-slate-950/68 px-4 py-6 backdrop-blur-sm">
<div className="puzzle-runtime-modal-overlay absolute inset-0 z-40 flex items-center justify-center px-4 py-6 backdrop-blur-sm">
<section
role="dialog"
aria-modal="true"
aria-labelledby="puzzle-clear-result-title"
className="flex max-h-[min(92vh,42rem)] w-full max-w-[28rem] flex-col overflow-hidden rounded-[1.5rem] border border-white/14 bg-slate-950/94 shadow-[0_28px_90px_rgba(0,0,0,0.5)]"
className="puzzle-runtime-dialog flex max-h-[min(92vh,42rem)] w-full max-w-[28rem] flex-col overflow-hidden rounded-[1.5rem] shadow-[0_28px_90px_rgba(0,0,0,0.28)]"
>
<header className="flex items-start justify-between gap-3 border-b border-white/10 px-5 py-4">
<header className="puzzle-runtime-dialog__line flex items-start justify-between gap-3 border-b px-5 py-4">
<div className="min-w-0">
<div className="mb-2 inline-flex h-9 w-9 items-center justify-center rounded-full bg-amber-200 text-slate-950">
<div className="puzzle-runtime-primary-button mb-2 inline-flex h-9 w-9 items-center justify-center rounded-full">
<Trophy className="h-4 w-4" />
</div>
<h2
id="puzzle-clear-result-title"
className="truncate text-lg font-black text-white"
className="truncate text-lg font-black"
>
通关完成
</h2>
<div className="mt-1 line-clamp-1 text-xs text-white/62">
<div className="puzzle-runtime-dialog__soft mt-1 line-clamp-1 text-xs">
{currentLevel.levelName}
</div>
</div>
<button
type="button"
aria-label="关闭通关弹窗"
className="inline-flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-white/8 text-white/72 transition hover:bg-white/14 hover:text-white"
className="puzzle-runtime-secondary-button inline-flex h-9 w-9 shrink-0 items-center justify-center rounded-full transition hover:brightness-105"
onClick={() => {
setDismissedClearKey(clearResultKey);
}}
@@ -1884,26 +1881,26 @@ export function PuzzleRuntimeShell({
</header>
<div className="min-h-0 flex-1 overflow-y-auto px-5 py-4">
<div className="flex items-center justify-between gap-4 rounded-[1rem] border border-amber-200/24 bg-amber-200/10 px-4 py-3">
<div className="puzzle-runtime-stat-card flex items-center justify-between gap-4 rounded-[1rem] px-4 py-3">
<div className="flex items-center gap-3">
<span className="inline-flex h-9 w-9 items-center justify-center rounded-full bg-black/24 text-amber-100">
<span className="puzzle-runtime-pill inline-flex h-9 w-9 items-center justify-center rounded-full">
<Clock className="h-4 w-4" />
</span>
<span className="text-sm font-semibold text-white/72">
<span className="puzzle-runtime-dialog__soft text-sm font-semibold">
通关时间
</span>
</div>
<span className="font-mono text-xl font-black text-amber-100">
<span className="puzzle-runtime-tool-button__warm font-mono text-xl font-black">
{formatElapsedMs(currentLevel.elapsedMs)}
</span>
</div>
<div className="mt-4">
<div className="mb-2 text-sm font-bold text-white">
<div className="mb-2 text-sm font-bold">
排行榜
</div>
<div className="overflow-hidden rounded-[1rem] border border-white/10">
<div className="grid grid-cols-[3.5rem_minmax(0,1fr)_6rem] bg-white/6 px-3 py-2 text-[11px] font-bold text-white/48">
<div className="puzzle-runtime-dialog__line overflow-hidden rounded-[1rem] border">
<div className="puzzle-runtime-leaderboard-head grid grid-cols-[3.5rem_minmax(0,1fr)_6rem] px-3 py-2 text-[11px] font-bold">
<span>名次</span>
<span>昵称</span>
<span className="text-right">通关时间</span>
@@ -1915,8 +1912,8 @@ export function PuzzleRuntimeShell({
key={`${entry.rank}:${entry.nickname}:${entry.elapsedMs}`}
className={`grid grid-cols-[3.5rem_minmax(0,1fr)_6rem] items-center px-3 py-2.5 text-sm ${
entry.isCurrentPlayer
? 'bg-amber-200/14 text-amber-50'
: 'border-t border-white/8 text-white/78'
? 'puzzle-runtime-leaderboard-row--active'
: 'puzzle-runtime-leaderboard-row border-t'
}`}
>
<span className="font-mono font-black">
@@ -1931,7 +1928,7 @@ export function PuzzleRuntimeShell({
</div>
))
) : (
<div className="flex min-h-24 items-center justify-center px-4 py-5 text-sm text-white/56">
<div className="puzzle-runtime-dialog__soft flex min-h-24 items-center justify-center px-4 py-5 text-sm">
{isBusy
? '正在同步真实排行榜…'
: '暂无真实排行榜成绩'}
@@ -1960,7 +1957,7 @@ export function PuzzleRuntimeShell({
</div>
{canAdvanceDefaultNextLevel ? (
<footer className="flex items-center justify-end border-t border-white/10 px-5 py-4">
<footer className="puzzle-runtime-dialog__line flex items-center justify-end border-t px-5 py-4">
<button
type="button"
disabled={isBusy}
@@ -1970,7 +1967,7 @@ export function PuzzleRuntimeShell({
levelId: run.nextLevelId ?? null,
});
}}
className="inline-flex items-center gap-2 rounded-full bg-amber-200 px-5 py-2.5 text-sm font-black text-slate-950 transition hover:bg-amber-100 disabled:cursor-not-allowed disabled:opacity-45"
className="puzzle-runtime-primary-button inline-flex items-center gap-2 rounded-full px-5 py-2.5 text-sm font-black transition hover:brightness-105 disabled:cursor-not-allowed disabled:opacity-45"
>
{isBusy ? (
<Loader2 className="h-4 w-4 animate-spin" />
@@ -2003,9 +2000,9 @@ function PuzzleNextWorkCard({
type="button"
disabled={disabled}
onClick={onClick}
className="group grid min-h-[5.75rem] grid-cols-[4.5rem_minmax(0,1fr)] overflow-hidden rounded-[1rem] border border-white/10 bg-white/6 text-left transition hover:border-amber-200/40 hover:bg-amber-200/10 disabled:cursor-not-allowed disabled:opacity-45 sm:grid-cols-1"
className="puzzle-runtime-next-card group grid min-h-[5.75rem] grid-cols-[4.5rem_minmax(0,1fr)] overflow-hidden rounded-[1rem] text-left transition disabled:cursor-not-allowed disabled:opacity-45 sm:grid-cols-1"
>
<div className="relative min-h-full bg-white/8 sm:aspect-[1.35]">
<div className="puzzle-runtime-next-card__media relative min-h-full sm:aspect-[1.35]">
{item.coverImageSrc ? (
<ResolvedAssetImage
src={item.coverImageSrc}
@@ -2015,20 +2012,20 @@ function PuzzleNextWorkCard({
) : (
<div className="h-full w-full bg-[linear-gradient(145deg,rgba(20,184,166,0.34),rgba(15,23,42,0.88))]" />
)}
<div className="absolute inset-0 bg-black/10 transition group-hover:bg-black/0" />
<div className="puzzle-runtime-piece-overlay absolute inset-0 transition group-hover:opacity-0" />
</div>
<div className="min-w-0 px-3 py-2.5">
<div className="truncate text-sm font-black text-white">
<div className="truncate text-sm font-black">
{item.levelName}
</div>
<div className="mt-1 truncate text-xs font-semibold text-white/58">
<div className="puzzle-runtime-dialog__soft mt-1 truncate text-xs font-semibold">
{item.authorDisplayName}
</div>
<div className="mt-2 flex flex-wrap gap-1">
{item.themeTags.slice(0, 2).map((tag) => (
<span
key={tag}
className="max-w-full truncate rounded-full bg-white/10 px-2 py-0.5 text-[10px] font-bold text-white/64"
className="puzzle-runtime-next-card__tag max-w-full truncate rounded-full px-2 py-0.5 text-[10px] font-bold"
>
{tag}
</span>

115
src/components/rpg-entry/RpgEntryHomeView.recharge.test.tsx
View File

@@ -1,6 +1,13 @@
/* @vitest-environment jsdom */
import { act, render, screen, waitFor, within } from '@testing-library/react';
import {
act,
fireEvent,
render,
screen,
waitFor,
within,
} from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { useState } from 'react';
import { afterEach, expect, test, vi } from 'vitest';
@@ -302,6 +309,17 @@ vi.mock('../ResolvedAssetImage', () => ({
const originalMatchMedia = window.matchMedia;
const originalRequestAnimationFrame = window.requestAnimationFrame;
const originalCancelAnimationFrame = window.cancelAnimationFrame;
function dispatchClientYPointerEvent(
target: HTMLElement,
type: string,
clientY: number,
) {
const event = new Event(type, { bubbles: true, cancelable: true });
Object.assign(event, { clientY });
target.dispatchEvent(event);
}
const puzzlePublicEntry = {
sourceType: 'puzzle',
workId: 'puzzle-work-public-1',
@@ -512,7 +530,8 @@ function renderLoggedOutHomeView(
| 'activeRecommendEntryKey'
| 'isStartingRecommendEntry'
| 'recommendRuntimeError'
| 'onSelectRecommendEntry'
| 'onSelectNextRecommendEntry'
| 'onSelectPreviousRecommendEntry'
>
> = {},
) {
@@ -566,7 +585,8 @@ function renderLoggedOutHomeView(
activeRecommendEntryKey={overrides.activeRecommendEntryKey}
isStartingRecommendEntry={overrides.isStartingRecommendEntry}
recommendRuntimeError={overrides.recommendRuntimeError}
onSelectRecommendEntry={overrides.onSelectRecommendEntry}
onSelectNextRecommendEntry={overrides.onSelectNextRecommendEntry}
onSelectPreviousRecommendEntry={overrides.onSelectPreviousRecommendEntry}
onOpenLibraryDetail={vi.fn()}
onSearchPublicCode={overrides.onSearchPublicCode ?? vi.fn()}
/>
@@ -960,7 +980,7 @@ test('shows a reachable login entry in logged out mobile shell', async () => {
expect(openLoginModal).toHaveBeenCalledTimes(1);
});
test('logged out bottom nav keeps creation centered with recommend icon', () => {
test('logged out bottom nav turns active recommend tab into next action', () => {
const { container } = renderLoggedOutHomeView(vi.fn());
const nav = container.querySelector('.platform-bottom-nav');
@@ -968,11 +988,11 @@ test('logged out bottom nav keeps creation centered with recommend icon', () =>
const buttons = within(nav as HTMLElement).getAllByRole('button');
expect(buttons.map((button) => button.textContent)).toEqual([
'推荐',
'下一个',
'创作',
'发现',
]);
expect(buttons[0]?.querySelector('.lucide-gamepad-2')).toBeTruthy();
expect(buttons[0]?.querySelector('.lucide-chevron-down')).toBeTruthy();
expect(buttons[1]?.querySelector('.lucide-sparkles')).toBeTruthy();
expect(buttons[2]?.querySelector('.lucide-compass')).toBeTruthy();
});
@@ -1091,16 +1111,18 @@ test('public gallery cards hide work code until detail is opened', async () => {
expect(onOpenGalleryDetail).toHaveBeenCalledWith(puzzlePublicEntry);
});
test('mobile recommend page renders runtime viewport and bottom switcher', () => {
const onSelectRecommendEntry = vi.fn();
test('mobile recommend page renders runtime viewport without bottom work cards', () => {
const onOpenGalleryDetail = vi.fn();
renderLoggedOutHomeView(vi.fn(), {
latestEntries: [puzzlePublicEntry],
activeRecommendEntryKey: 'puzzle:user-2:puzzle-profile-public-1',
onSelectRecommendEntry,
onOpenGalleryDetail,
});
expect(screen.getByTestId('recommend-runtime')).toBeTruthy();
const runtimePanel = document.querySelector('.platform-recommend-runtime-panel');
expect(runtimePanel).toBeTruthy();
expect(runtimePanel?.className).not.toContain('bg-black');
expect(screen.queryByText('一张用于公开分享的拼图作品。')).toBeNull();
expect(
document.querySelector('.platform-public-work-card__cover'),
@@ -1109,33 +1131,66 @@ test('mobile recommend page renders runtime viewport and bottom switcher', () =>
expect(screen.getAllByText('奇幻拼图').length).toBeGreaterThan(0);
expect(screen.getAllByText('20').length).toBeGreaterThan(0);
expect(screen.getAllByText('12').length).toBeGreaterThan(0);
const switchButton = screen.getByRole('button', {
name: '切换到 奇幻拼图',
});
expect(switchButton.getAttribute('aria-pressed')).toBe('true');
expect(screen.queryByRole('button', { name: '切换到 奇幻拼图' })).toBeNull();
expect(
screen.queryByRole('button', { name: '查看 奇幻拼图 详情' }),
).toBeNull();
expect(
screen.queryByRole('button', { name: '打开 奇幻拼图 详情' }),
).toBeNull();
expect(document.querySelector('.platform-recommend-switcher')).toBeNull();
fireEvent.click(screen.getByLabelText('奇幻拼图 作品信息'));
expect(onOpenGalleryDetail).not.toHaveBeenCalled();
});
test('mobile recommend switcher selects a different public work', async () => {
const user = userEvent.setup();
const onSelectRecommendEntry = vi.fn();
const secondEntry = {
...puzzlePublicEntry,
workId: 'puzzle-work-second',
profileId: 'puzzle-profile-second',
publicWorkCode: 'PZ-SECOND',
worldName: '第二拼图',
} satisfies PlatformPublicGalleryCard;
test('mobile recommend loading state is themed instead of hardcoded black', () => {
renderLoggedOutHomeView(vi.fn(), {
latestEntries: [puzzlePublicEntry, secondEntry],
latestEntries: [puzzlePublicEntry],
activeRecommendEntryKey: 'puzzle:user-2:puzzle-profile-public-1',
onSelectRecommendEntry,
isStartingRecommendEntry: true,
recommendRuntimeContent: null,
});
await user.click(screen.getByRole('button', { name: '切换到 第二拼图' }));
const loadingState = screen.getByText('加载中...');
expect(loadingState.className).toContain('platform-recommend-runtime-state');
expect(loadingState.className).not.toContain('bg-black');
});
expect(onSelectRecommendEntry).toHaveBeenCalledWith(secondEntry);
test('mobile recommend meta swipes between public works', () => {
const onSelectNextRecommendEntry = vi.fn();
const onSelectPreviousRecommendEntry = vi.fn();
renderLoggedOutHomeView(vi.fn(), {
latestEntries: [puzzlePublicEntry],
activeRecommendEntryKey: 'puzzle:user-2:puzzle-profile-public-1',
onSelectNextRecommendEntry,
onSelectPreviousRecommendEntry,
});
const meta = screen.getByLabelText('奇幻拼图 作品信息');
dispatchClientYPointerEvent(meta, 'pointerdown', 240);
dispatchClientYPointerEvent(meta, 'pointerup', 180);
expect(onSelectNextRecommendEntry).toHaveBeenCalledTimes(1);
expect(onSelectPreviousRecommendEntry).not.toHaveBeenCalled();
dispatchClientYPointerEvent(meta, 'pointerdown', 180);
dispatchClientYPointerEvent(meta, 'pointerup', 240);
expect(onSelectPreviousRecommendEntry).toHaveBeenCalledTimes(1);
});
test('active recommend bottom tab selects next work instead of navigating', async () => {
const user = userEvent.setup();
const onSelectNextRecommendEntry = vi.fn();
renderLoggedOutHomeView(vi.fn(), {
latestEntries: [puzzlePublicEntry],
activeRecommendEntryKey: 'puzzle:user-2:puzzle-profile-public-1',
onSelectNextRecommendEntry,
});
await user.click(screen.getByRole('button', { name: '下一个' }));
expect(onSelectNextRecommendEntry).toHaveBeenCalledTimes(1);
});
test('mobile recommend meta loads real author avatar from public user summary', async () => {

165
src/components/rpg-entry/RpgEntryHomeView.tsx
View File

@@ -122,7 +122,8 @@ export interface RpgEntryHomeViewProps {
activeRecommendEntryKey?: string | null;
isStartingRecommendEntry?: boolean;
recommendRuntimeError?: string | null;
onSelectRecommendEntry?: (entry: PlatformPublicGalleryCard) => void;
onSelectNextRecommendEntry?: () => void;
onSelectPreviousRecommendEntry?: () => void;
onOpenLibraryDetail: (
entry: CustomWorldLibraryEntry<CustomWorldProfile>,
) => void;
@@ -149,6 +150,8 @@ const HERO_SURFACE_CLASS =
'platform-surface platform-surface--hero platform-interactive-card min-w-0';
const MOBILE_PAGE_STAGE_CLASS =
'platform-page-stage platform-remap-surface min-w-0 space-y-4 overflow-hidden pb-2';
const MOBILE_RECOMMEND_PAGE_STAGE_CLASS =
'platform-page-stage min-w-0 space-y-4 overflow-hidden pb-2';
const DESKTOP_PAGE_STAGE_CLASS =
'platform-page-stage platform-remap-surface min-w-0 space-y-5 pb-4';
const DESKTOP_LAYOUT_QUERY = '(min-width: 1024px)';
@@ -165,6 +168,7 @@ const AVATAR_ALLOWED_TYPES = new Set(['image/jpeg', 'image/png', 'image/webp']);
const PLATFORM_WORK_COVER_CAROUSEL_INTERVAL_MS = 4200;
const PROFILE_INVITE_REDEEM_ENTRY_VISIBLE_MS = 24 * 60 * 60 * 1000;
const PROFILE_INVITE_QUERY_KEYS = ['inviteCode', 'invite_code'] as const;
const RECOMMEND_ENTRY_SWIPE_THRESHOLD_PX = 36;
type ProfilePopupPanel = 'invite' | 'redeem' | 'community';
type DiscoverChannel = 'recommend' | 'today' | 'category' | 'ranking';
@@ -664,12 +668,15 @@ function CreationLibraryCard({
function RecommendRuntimeMeta({
entry,
authorAvatarUrl,
onOpenDetail,
onSelectNext,
onSelectPrevious,
}: {
entry: PlatformPublicGalleryCard;
authorAvatarUrl?: string | null;
onOpenDetail: () => void;
onSelectNext?: () => void;
onSelectPrevious?: () => void;
}) {
const swipeStartYRef = useRef<number | null>(null);
const playCount = getPlatformWorldPlayCount(entry);
const remixCount = getPlatformWorldRemixCount(entry);
const likeCount = getPlatformWorldLikeCount(entry);
@@ -682,11 +689,37 @@ function RecommendRuntimeMeta({
{ label: '点赞', value: likeCount, icon: Heart },
{ label: '改造', value: remixCount, icon: MessageCircle },
];
const handlePointerEnd = (clientY: number) => {
const startY = swipeStartYRef.current;
swipeStartYRef.current = null;
if (startY === null) {
return;
}
const deltaY = clientY - startY;
if (Math.abs(deltaY) < RECOMMEND_ENTRY_SWIPE_THRESHOLD_PX) {
return;
}
if (deltaY < 0) {
onSelectNext?.();
return;
}
onSelectPrevious?.();
};
return (
<section
className="platform-recommend-work-meta"
aria-label={`${entry.worldName} 作品信息`}
onPointerDown={(event) => {
swipeStartYRef.current = event.clientY;
}}
onPointerUp={(event) => handlePointerEnd(event.clientY)}
onPointerCancel={() => {
swipeStartYRef.current = null;
}}
>
<div className="platform-recommend-work-meta__stats">
{statItems.map(({ label, value, icon: Icon }) => (
@@ -702,11 +735,8 @@ function RecommendRuntimeMeta({
</div>
<div className="platform-recommend-work-meta__row">
<button
type="button"
onClick={onOpenDetail}
<div
className="platform-recommend-work-meta__identity"
aria-label={`打开 ${entry.worldName} 详情`}
>
<span
className="platform-recommend-work-meta__avatar"
@@ -730,62 +760,12 @@ function RecommendRuntimeMeta({
{displayName}
</span>
</span>
</button>
<button
type="button"
onClick={onOpenDetail}
className="platform-recommend-work-meta__detail-button"
aria-label={`查看 ${entry.worldName} 详情`}
title="详情"
>
<ArrowRight className="h-4 w-4" />
</button>
</div>
</div>
</section>
);
}
function RecommendWorkSwitchItem({
entry,
active,
onSelect,
}: {
entry: PlatformPublicGalleryCard;
active: boolean;
onSelect: () => void;
}) {
const displayName = formatPlatformWorkDisplayName(entry.worldName);
const typeLabel = describePublicGalleryCardKind(entry);
const playCount = getPlatformWorldPlayCount(entry);
const likeCount = getPlatformWorldLikeCount(entry);
return (
<button
type="button"
onClick={onSelect}
aria-label={`切换到 ${entry.worldName}`}
aria-pressed={active}
className={`platform-recommend-switch-card ${active ? 'platform-recommend-switch-card--active' : ''}`}
>
<span className="platform-recommend-switch-card__kind">{typeLabel}</span>
<span className="platform-recommend-switch-card__title">
{displayName}
</span>
<span className="platform-recommend-switch-card__stats">
<span>
<Gamepad2 className="h-3 w-3" aria-hidden="true" />
{formatCompactCount(playCount)}
</span>
<span>
<Heart className="h-3 w-3" aria-hidden="true" />
{formatCompactCount(likeCount)}
</span>
</span>
</button>
);
}
function SaveArchiveCard({
entry,
onClick,
@@ -2861,7 +2841,8 @@ export function RpgEntryHomeView({
activeRecommendEntryKey = null,
isStartingRecommendEntry = false,
recommendRuntimeError = null,
onSelectRecommendEntry,
onSelectNextRecommendEntry,
onSelectPreviousRecommendEntry,
onOpenLibraryDetail,
onDeleteLibraryEntry,
deletingLibraryEntryId = null,
@@ -3722,6 +3703,12 @@ export function RpgEntryHomeView({
) ??
recommendedFeedEntries[0] ??
null;
const selectNextRecommendEntry = useCallback(() => {
onSelectNextRecommendEntry?.();
}, [onSelectNextRecommendEntry]);
const selectPreviousRecommendEntry = useCallback(() => {
onSelectPreviousRecommendEntry?.();
}, [onSelectPreviousRecommendEntry]);
const leadPublicEntry = featuredShelf[0] ?? latestEntries[0] ?? null;
const openLeadPublicEntry = () => {
if (leadPublicEntry) {
@@ -3785,7 +3772,7 @@ export function RpgEntryHomeView({
const mobileRecommendContent: ReactNode = (
<div
className={`${MOBILE_PAGE_STAGE_CLASS} platform-mobile-home-stage platform-mobile-recommend-stage`}
className={`${MOBILE_RECOMMEND_PAGE_STAGE_CLASS} platform-mobile-home-stage platform-mobile-recommend-stage`}
>
{platformError ? (
<div className="rounded-2xl border border-rose-400/20 bg-rose-500/10 px-4 py-3 text-sm leading-6 text-rose-700">
@@ -3823,42 +3810,9 @@ export function RpgEntryHomeView({
<RecommendRuntimeMeta
entry={activeRecommendEntry}
authorAvatarUrl={getPublicEntryAuthorAvatarUrl(activeRecommendEntry)}
onOpenDetail={() => onOpenGalleryDetail(activeRecommendEntry)}
onSelectNext={selectNextRecommendEntry}
onSelectPrevious={selectPreviousRecommendEntry}
/>
) : null}
{recommendedFeedEntries.length > 0 ? (
<section
className="platform-recommend-switcher"
aria-label="推荐作品"
>
{recommendedFeedEntries.map((entry) => {
const cardKey = buildPublicGalleryCardKey(entry);
const active =
activeRecommendEntryKey === cardKey ||
Boolean(
!activeRecommendEntryKey &&
activeRecommendEntry &&
buildPublicGalleryCardKey(activeRecommendEntry) === cardKey,
);
return (
<RecommendWorkSwitchItem
key={`${cardKey}:recommend-switch`}
entry={entry}
active={active}
onSelect={() => {
if (onSelectRecommendEntry) {
onSelectRecommendEntry(entry);
return;
}
onOpenGalleryDetail(entry);
}}
/>
);
})}
</section>
) : !isLoadingPlatform ? (
<EmptyShelf text="公开广场暂时还没有可展示的作品。" />
) : null}
@@ -4706,10 +4660,25 @@ export function RpgEntryHomeView({
<PlatformTabButton
key={tab}
active={activeTab === tab}
label={tabLabels[tab]}
icon={tabIcons[tab]}
label={
activeTab === 'home' && tab === 'home'
? '下一个'
: tabLabels[tab]
}
icon={
activeTab === 'home' && tab === 'home'
? ChevronDown
: tabIcons[tab]
}
emphasized={tab === 'create'}
onClick={() => onTabChange(tab)}
onClick={() => {
if (activeTab === 'home' && tab === 'home') {
selectNextRecommendEntry();
return;
}
onTabChange(tab);
}}
/>
))}
</div>

424
src/index.css
View File

@@ -505,6 +505,59 @@ body {
),
radial-gradient(circle at right, rgba(255, 205, 178, 0.14), transparent 28%),
linear-gradient(180deg, rgba(255, 255, 255, 0.2), rgba(255, 241, 246, 0.9));
--platform-recommend-runtime-fill: var(--platform-panel-fill);
--platform-recommend-runtime-border: rgba(232, 191, 205, 0.42);
--platform-recommend-runtime-shadow: 0 18px 44px rgba(215, 87, 134, 0.13),
inset 0 0 0 1px rgba(255, 255, 255, 0.58);
--platform-recommend-runtime-state-fill: radial-gradient(
circle at 50% 18%,
rgba(255, 91, 132, 0.12),
transparent 34%
),
linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(255, 246, 249, 0.94));
--platform-recommend-runtime-state-text: var(--platform-text-strong);
--puzzle-runtime-shell-fill: var(--platform-body-fill);
--puzzle-runtime-stage-fill: radial-gradient(
circle at 50% 18%,
rgba(255, 91, 132, 0.13),
transparent 30%
),
radial-gradient(circle at 18% 82%, rgba(255, 138, 115, 0.13), transparent 28%),
linear-gradient(180deg, #fffefe 0%, #fff7fa 58%, #fff1f5 100%);
--puzzle-runtime-grid-line: rgba(130, 75, 95, 0.06);
--puzzle-runtime-text-strong: var(--platform-text-strong);
--puzzle-runtime-text-base: var(--platform-text-base);
--puzzle-runtime-text-soft: var(--platform-text-soft);
--puzzle-runtime-surface-fill: rgba(255, 255, 255, 0.76);
--puzzle-runtime-surface-fill-strong: rgba(255, 255, 255, 0.9);
--puzzle-runtime-surface-border: rgba(232, 191, 205, 0.48);
--puzzle-runtime-board-fill: rgba(255, 255, 255, 0.68);
--puzzle-runtime-board-border: rgba(255, 126, 154, 0.28);
--puzzle-runtime-board-shadow: 0 30px 80px rgba(215, 87, 134, 0.14);
--puzzle-runtime-piece-fill: rgba(255, 255, 255, 0.74);
--puzzle-runtime-piece-border: rgba(232, 191, 205, 0.54);
--puzzle-runtime-piece-empty-fill: rgba(255, 228, 236, 0.34);
--puzzle-runtime-piece-empty-text: rgba(92, 70, 80, 0.38);
--puzzle-runtime-piece-selected-fill: linear-gradient(135deg, #ff4f8b, #ff8a73);
--puzzle-runtime-piece-selected-text: #fff7fb;
--puzzle-runtime-piece-selected-border: rgba(255, 79, 139, 0.68);
--puzzle-runtime-piece-overlay: rgba(61, 24, 38, 0.06);
--puzzle-runtime-control-fill: rgba(255, 255, 255, 0.72);
--puzzle-runtime-control-hover-fill: rgba(255, 91, 132, 0.1);
--puzzle-runtime-primary-fill: var(--platform-button-primary-fill);
--puzzle-runtime-primary-text: var(--platform-button-primary-text);
--puzzle-runtime-primary-shadow: var(--platform-profile-action-shadow);
--puzzle-runtime-accent-text: var(--platform-cool-text);
--puzzle-runtime-cool-text: #0f8fa9;
--puzzle-runtime-danger-fill: rgba(255, 228, 233, 0.9);
--puzzle-runtime-danger-text: #c2415d;
--puzzle-runtime-backdrop-fill: rgba(43, 20, 32, 0.34);
--puzzle-runtime-dialog-fill: var(--platform-modal-fill);
--puzzle-runtime-dialog-border: var(--platform-modal-border);
--puzzle-runtime-table-fill: rgba(255, 255, 255, 0.62);
--puzzle-runtime-table-row-fill: rgba(255, 91, 132, 0.12);
--puzzle-runtime-next-card-fill: rgba(255, 255, 255, 0.66);
--puzzle-runtime-next-card-hover-fill: rgba(255, 91, 132, 0.1);
}
.platform-theme--dark {
@@ -684,6 +737,54 @@ body {
),
radial-gradient(circle at right, rgba(255, 205, 178, 0.14), transparent 28%),
linear-gradient(180deg, rgba(8, 10, 14, 0.22), rgba(8, 10, 14, 0.9));
--platform-recommend-runtime-fill: #030303;
--platform-recommend-runtime-border: rgba(255, 255, 255, 0.08);
--platform-recommend-runtime-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.025),
0 18px 44px rgba(0, 0, 0, 0.18);
--platform-recommend-runtime-state-fill: #030303;
--platform-recommend-runtime-state-text: rgba(255, 255, 255, 0.92);
--puzzle-runtime-shell-fill: #020617;
--puzzle-runtime-stage-fill: radial-gradient(
circle at 50% 20%,
rgba(251, 191, 36, 0.18),
transparent 28%
),
radial-gradient(circle at 20% 80%, rgba(249, 115, 22, 0.16), transparent 26%),
linear-gradient(180deg, #2d160e, #020617);
--puzzle-runtime-grid-line: rgba(255, 255, 255, 0.04);
--puzzle-runtime-text-strong: #ffffff;
--puzzle-runtime-text-base: rgba(255, 255, 255, 0.82);
--puzzle-runtime-text-soft: rgba(255, 255, 255, 0.58);
--puzzle-runtime-surface-fill: rgba(0, 0, 0, 0.34);
--puzzle-runtime-surface-fill-strong: rgba(0, 0, 0, 0.5);
--puzzle-runtime-surface-border: rgba(255, 255, 255, 0.12);
--puzzle-runtime-board-fill: rgba(255, 255, 255, 0.08);
--puzzle-runtime-board-border: rgba(255, 255, 255, 0.16);
--puzzle-runtime-board-shadow: 0 30px 80px rgba(0, 0, 0, 0.35);
--puzzle-runtime-piece-fill: rgba(255, 255, 255, 0.12);
--puzzle-runtime-piece-border: rgba(255, 255, 255, 0.22);
--puzzle-runtime-piece-empty-fill: rgba(0, 0, 0, 0.18);
--puzzle-runtime-piece-empty-text: rgba(255, 255, 255, 0.2);
--puzzle-runtime-piece-selected-fill: rgba(251, 191, 36, 0.84);
--puzzle-runtime-piece-selected-text: #020617;
--puzzle-runtime-piece-selected-border: rgba(253, 230, 138, 1);
--puzzle-runtime-piece-overlay: rgba(0, 0, 0, 0.1);
--puzzle-runtime-control-fill: rgba(0, 0, 0, 0.36);
--puzzle-runtime-control-hover-fill: rgba(255, 255, 255, 0.1);
--puzzle-runtime-primary-fill: #fde68a;
--puzzle-runtime-primary-text: #020617;
--puzzle-runtime-primary-shadow: 0 14px 36px rgba(251, 191, 36, 0.26);
--puzzle-runtime-accent-text: #fde68a;
--puzzle-runtime-cool-text: #cffafe;
--puzzle-runtime-danger-fill: rgba(239, 68, 68, 0.2);
--puzzle-runtime-danger-text: #fee2e2;
--puzzle-runtime-backdrop-fill: rgba(2, 6, 23, 0.68);
--puzzle-runtime-dialog-fill: rgba(2, 6, 23, 0.94);
--puzzle-runtime-dialog-border: rgba(255, 255, 255, 0.14);
--puzzle-runtime-table-fill: rgba(255, 255, 255, 0.06);
--puzzle-runtime-table-row-fill: rgba(251, 191, 36, 0.14);
--puzzle-runtime-next-card-fill: rgba(255, 255, 255, 0.06);
--puzzle-runtime-next-card-hover-fill: rgba(251, 191, 36, 0.1);
}
.platform-brand-logo {
@@ -1907,6 +2008,205 @@ body {
inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.puzzle-runtime-shell {
background: var(--puzzle-runtime-shell-fill);
color: var(--puzzle-runtime-text-strong);
}
.puzzle-runtime-stage {
background: var(--puzzle-runtime-stage-fill);
color: var(--puzzle-runtime-text-strong);
}
.puzzle-runtime-stage__grid {
position: absolute;
inset: 0;
background-image:
linear-gradient(var(--puzzle-runtime-grid-line) 1px, transparent 1px),
linear-gradient(90deg, var(--puzzle-runtime-grid-line) 1px, transparent 1px);
background-size: 34px 34px;
opacity: 0.8;
}
.puzzle-runtime-pill,
.puzzle-runtime-icon-button,
.puzzle-runtime-header-card,
.puzzle-runtime-toolbar {
border: 1px solid var(--puzzle-runtime-surface-border);
background: var(--puzzle-runtime-surface-fill);
color: var(--puzzle-runtime-text-strong);
backdrop-filter: blur(14px);
}
.puzzle-runtime-icon-button {
color: var(--puzzle-runtime-text-strong);
}
.puzzle-runtime-header-card {
background: var(--puzzle-runtime-surface-fill-strong);
}
.puzzle-runtime-level-badge {
background: var(--puzzle-runtime-control-fill);
color: var(--puzzle-runtime-accent-text);
}
.puzzle-runtime-timer {
background: var(--puzzle-runtime-control-fill);
color: var(--puzzle-runtime-text-strong);
}
.puzzle-runtime-timer--urgent {
background: var(--puzzle-runtime-danger-fill);
color: var(--puzzle-runtime-danger-text);
}
.puzzle-runtime-board {
border-color: var(--puzzle-runtime-board-border);
background: var(--puzzle-runtime-board-fill);
box-shadow: var(--puzzle-runtime-board-shadow);
}
.puzzle-runtime-piece {
border-color: var(--puzzle-runtime-piece-border);
color: var(--puzzle-runtime-text-strong);
}
.puzzle-runtime-piece--selected {
border-color: var(--puzzle-runtime-piece-selected-border);
background: var(--puzzle-runtime-piece-selected-fill);
color: var(--puzzle-runtime-piece-selected-text);
box-shadow: var(--puzzle-runtime-primary-shadow);
}
.puzzle-runtime-piece--merged {
border-color: transparent;
background: transparent;
color: var(--puzzle-runtime-text-strong);
}
.puzzle-runtime-piece--filled {
background: var(--puzzle-runtime-piece-fill);
}
.puzzle-runtime-piece--empty {
border-color: var(--puzzle-runtime-surface-border);
background: var(--puzzle-runtime-piece-empty-fill);
color: var(--puzzle-runtime-piece-empty-text);
}
.puzzle-runtime-piece-overlay {
background: var(--puzzle-runtime-piece-overlay);
}
.puzzle-runtime-primary-button {
border: 1px solid var(--platform-button-primary-border);
background: var(--puzzle-runtime-primary-fill);
color: var(--puzzle-runtime-primary-text);
box-shadow: var(--puzzle-runtime-primary-shadow);
}
.puzzle-runtime-tool-button {
color: var(--puzzle-runtime-text-base);
}
.puzzle-runtime-tool-button:hover {
background: var(--puzzle-runtime-control-hover-fill);
}
.puzzle-runtime-tool-button--active {
background: var(--platform-button-primary-fill);
color: var(--platform-button-primary-text);
}
.puzzle-runtime-tool-button__warm {
color: var(--puzzle-runtime-accent-text);
}
.puzzle-runtime-tool-button__cool {
color: var(--puzzle-runtime-cool-text);
}
.puzzle-runtime-status-chip {
background: var(--puzzle-runtime-control-fill);
color: var(--puzzle-runtime-text-soft);
backdrop-filter: blur(12px);
}
.puzzle-runtime-error-chip {
background: var(--puzzle-runtime-danger-fill);
color: var(--puzzle-runtime-danger-text);
}
.puzzle-runtime-modal-overlay {
background: var(--puzzle-runtime-backdrop-fill);
}
.puzzle-runtime-dialog {
border: 1px solid var(--puzzle-runtime-dialog-border);
background: var(--puzzle-runtime-dialog-fill);
color: var(--puzzle-runtime-text-strong);
}
.puzzle-runtime-dialog__line {
border-color: var(--puzzle-runtime-surface-border);
}
.puzzle-runtime-dialog__soft {
color: var(--puzzle-runtime-text-soft);
}
.puzzle-runtime-dialog__body {
color: var(--puzzle-runtime-text-base);
}
.puzzle-runtime-secondary-button {
border: 1px solid var(--puzzle-runtime-surface-border);
background: var(--puzzle-runtime-control-fill);
color: var(--puzzle-runtime-text-strong);
}
.puzzle-runtime-stat-card,
.puzzle-runtime-settings-card {
border: 1px solid var(--puzzle-runtime-surface-border);
background: var(--puzzle-runtime-table-fill);
}
.puzzle-runtime-leaderboard-head {
background: var(--puzzle-runtime-table-fill);
color: var(--puzzle-runtime-text-soft);
}
.puzzle-runtime-leaderboard-row {
border-color: var(--puzzle-runtime-surface-border);
color: var(--puzzle-runtime-text-base);
}
.puzzle-runtime-leaderboard-row--active {
background: var(--puzzle-runtime-table-row-fill);
color: var(--puzzle-runtime-text-strong);
}
.puzzle-runtime-next-card {
border: 1px solid var(--puzzle-runtime-surface-border);
background: var(--puzzle-runtime-next-card-fill);
color: var(--puzzle-runtime-text-strong);
}
.puzzle-runtime-next-card:hover {
border-color: var(--platform-button-primary-border);
background: var(--puzzle-runtime-next-card-hover-fill);
}
.puzzle-runtime-next-card__media {
background: var(--puzzle-runtime-control-fill);
}
.puzzle-runtime-next-card__tag {
background: var(--puzzle-runtime-control-fill);
color: var(--puzzle-runtime-text-soft);
}
@media (max-width: 639px) {
:root {
--platform-bottom-nav-height: 3.85rem;
@@ -2095,7 +2395,7 @@ body {
height: 100%;
min-height: 0;
flex-direction: column;
gap: 0.55rem;
gap: 0.28rem;
border: 0;
border-radius: 0;
background: transparent;
@@ -2109,12 +2409,10 @@ body {
flex: 1 1 auto;
min-height: 0;
overflow: hidden;
border: 1px solid rgba(255, 255, 255, 0.08);
border: 1px solid var(--platform-recommend-runtime-border);
border-radius: 1.65rem;
background: #030303;
box-shadow:
inset 0 0 0 1px rgba(255, 255, 255, 0.025),
0 18px 44px rgba(0, 0, 0, 0.18);
background: var(--platform-recommend-runtime-fill);
box-shadow: var(--platform-recommend-runtime-shadow);
}
.platform-recommend-runtime-viewport {
@@ -2122,7 +2420,7 @@ body {
inset: 0;
min-width: 0;
overflow: hidden;
background: #030303;
background: var(--platform-recommend-runtime-fill);
}
.platform-recommend-runtime-state {
@@ -2132,8 +2430,8 @@ body {
width: 100%;
border: 0;
place-items: center;
background: #030303;
color: rgba(255, 255, 255, 0.92);
background: var(--platform-recommend-runtime-state-fill);
color: var(--platform-recommend-runtime-state-text);
font-size: clamp(1.8rem, 10vw, 2.45rem);
font-weight: 950;
letter-spacing: 0;
@@ -2148,6 +2446,8 @@ body {
flex: 0 0 auto;
min-width: 0;
color: var(--platform-text-strong);
touch-action: pan-y;
user-select: none;
}
.platform-recommend-work-meta__stats {
@@ -2170,7 +2470,7 @@ body {
}
.platform-recommend-work-meta__row {
margin-top: 0.55rem;
margin-top: 0.36rem;
display: flex;
min-width: 0;
align-items: center;
@@ -2184,9 +2484,6 @@ body {
flex: 1 1 auto;
align-items: center;
gap: 0.55rem;
border: 0;
background: transparent;
padding: 0;
color: inherit;
text-align: left;
}
@@ -2231,107 +2528,6 @@ body {
color: var(--platform-text-soft);
}
.platform-recommend-work-meta__detail-button {
display: inline-flex;
width: 2.35rem;
height: 2.35rem;
flex: 0 0 auto;
align-items: center;
justify-content: center;
border: 1px solid var(--platform-surface-border);
border-radius: 9999px;
background: var(--platform-button-secondary-fill);
color: var(--platform-text-strong);
box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
}
.platform-recommend-switcher {
display: flex;
flex: 0 0 auto;
min-width: 0;
gap: 0.55rem;
margin-right: -0.25rem;
overflow-x: auto;
overscroll-behavior-x: contain;
padding: 0.05rem 0.25rem 0.2rem 0;
scroll-snap-type: x mandatory;
scrollbar-width: none;
touch-action: pan-x;
-webkit-overflow-scrolling: touch;
}
.platform-recommend-switcher::-webkit-scrollbar {
display: none;
}
.platform-recommend-switch-card {
display: grid;
width: min(9.1rem, 42vw);
min-height: 4.25rem;
flex: 0 0 auto;
scroll-snap-align: start;
gap: 0.18rem;
border: 1px solid color-mix(in srgb, var(--platform-surface-border) 72%, transparent);
border-radius: 1.05rem;
background: color-mix(in srgb, var(--platform-panel-fill) 90%, #050505);
padding: 0.58rem 0.65rem;
color: var(--platform-text-strong);
text-align: left;
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
}
.platform-recommend-switch-card--active {
border-color: color-mix(
in srgb,
var(--platform-warm-text) 72%,
var(--platform-surface-border)
);
background: color-mix(
in srgb,
var(--platform-button-secondary-fill) 84%,
#151515
);
box-shadow:
0 14px 34px rgba(0, 0, 0, 0.16),
inset 0 0 0 1px color-mix(in srgb, var(--platform-warm-text) 42%, transparent);
}
.platform-recommend-switch-card__kind {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 0.64rem;
font-weight: 850;
color: var(--platform-text-soft);
}
.platform-recommend-switch-card__title {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 0.88rem;
font-weight: 950;
line-height: 1.15;
}
.platform-recommend-switch-card__stats {
display: flex;
min-width: 0;
gap: 0.55rem;
font-size: 0.68rem;
font-weight: 850;
color: var(--platform-text-base);
}
.platform-recommend-switch-card__stats span {
display: inline-flex;
min-width: 0;
align-items: center;
gap: 0.18rem;
}
.platform-mobile-home-stage .platform-desktop-search {
border-radius: 9999px;
padding: 0.64rem 0.9rem;