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

Extend square-hole creation flow with visual asset timeout guard

Browse Source
This commit is contained in:
kdletters
2026-05-05 15:27:09 +08:00
parent 2252afb080
commit 60b667a9d1
30 changed files with 2838 additions and 215 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
src/components/square-hole-runtime/SquareHoleRuntimeShell.tsx
View File

@@ -15,6 +15,7 @@ import type {
SquareHoleHoleSnapshot,
SquareHoleRunSnapshot,
} from '../../../packages/shared/src/contracts/squareHoleRuntime';
import { ResolvedAssetImage } from '../ResolvedAssetImage';
type SquareHoleRuntimeShellProps = {
run: SquareHoleRunSnapshot | null;
@@ -241,7 +242,17 @@ export function SquareHoleRuntimeShell({
return (
<main className="relative flex min-h-dvh w-full justify-center overflow-hidden bg-[#101827] text-white">
<div className="absolute inset-0 bg-[radial-gradient(circle_at_50%_10%,rgba(125,211,252,0.32),transparent_27%),radial-gradient(circle_at_80%_80%,rgba(248,113,113,0.24),transparent_34%),linear-gradient(180deg,#1f3a5f_0%,#152238_48%,#111827_100%)]" />
{run.backgroundImageSrc ? (
<ResolvedAssetImage
src={run.backgroundImageSrc}
alt=""
aria-hidden="true"
className="absolute inset-0 h-full w-full object-cover"
/>
) : (
<div className="absolute inset-0 bg-[radial-gradient(circle_at_50%_10%,rgba(125,211,252,0.32),transparent_27%),radial-gradient(circle_at_80%_80%,rgba(248,113,113,0.24),transparent_34%),linear-gradient(180deg,#1f3a5f_0%,#152238_48%,#111827_100%)]" />
)}
<div className="absolute inset-0 bg-slate-950/42" />
<div
className="relative flex min-h-dvh min-w-0 flex-col overflow-hidden px-3 pb-[calc(env(safe-area-inset-bottom,0px)+0.8rem)] pt-[calc(env(safe-area-inset-top,0px)+0.65rem)]"
style={{
@@ -287,14 +298,14 @@ export function SquareHoleRuntimeShell({
<section className="mt-3 rounded-[1.5rem] border border-white/14 bg-black/18 p-3 shadow-[0_18px_42px_rgba(15,23,42,0.28)] backdrop-blur">
<div className="flex items-center justify-between gap-2 text-xs font-bold text-white/68">
<span>{run.ruleLabel}</span>
<span>v{run.snapshotVersion}</span>
<span>当前形状</span>
<span>{progressText}</span>
</div>
<div className="mt-3 flex min-h-[12rem] items-center justify-center rounded-[1.35rem] border border-white/10 bg-white/10">
{currentShape ? (
<div className="flex flex-col items-center gap-3">
<div
className={`h-24 w-24 shadow-[0_18px_38px_rgba(15,23,42,0.34)] ${getShapePreviewClass(
className={`relative h-24 w-24 overflow-hidden shadow-[0_18px_38px_rgba(15,23,42,0.34)] ${getShapePreviewClass(
currentShape.shapeKind,
)}`}
style={{
@@ -302,7 +313,16 @@ export function SquareHoleRuntimeShell({
currentShape.color ||
'linear-gradient(135deg,#f8fafc,#38bdf8)',
}}
/>
>
{currentShape.imageSrc ? (
<ResolvedAssetImage
src={currentShape.imageSrc}
alt=""
aria-hidden="true"
className="h-full w-full object-cover"
/>
) : null}
</div>
<div className="flex items-center gap-2 text-base font-black">
<Shapes size={18} />
<span>{currentShape.label}</span>