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

feat: refine match3d brick runtime assets
Some checks failed
CI / verify (push) Has been cancelled
Details

Browse Source
This commit is contained in:
五香丸子
2026-05-03 23:26:08 +08:00
parent 49aad7311c
commit f1e86a88da
11 changed files with 1580 additions and 570 deletions
Download Patch File Download Diff File Expand all files Collapse all files

65
src/components/match3d-runtime/Match3DRuntimeShell.tsx
View File

@@ -19,7 +19,10 @@ import {
Match3DVisualIcon,
resolveVisualSeed,
} from './match3dVisualAssets';
import { Match3DPhysicsBoard } from './Match3DPhysicsBoard';
import {
Match3DPhysicsBoard,
Match3DTrayPreviewBoard,
} from './Match3DPhysicsBoard';
import {
isItemState,
isRunState,
@@ -178,19 +181,28 @@ function Match3DToken({
);
}
function Match3DTrayToken({ slot }: { slot: Match3DTraySlot }) {
function Match3DTrayToken({
slot,
use3DPreview,
}: {
slot: Match3DTraySlot;
use3DPreview: boolean;
}) {
if (!slot.visualKey) {
return (
<span className="h-full w-full rounded-xl border border-dashed border-slate-300/35 bg-white/8" />
);
}
const visualSeed = resolveVisualSeed(slot.visualKey);
const fallback = <Match3DVisualIcon visualKey={slot.visualKey} />;
return (
<span
className="flex h-full w-full items-center justify-center p-1"
aria-label={visualSeed.label}
>
<Match3DVisualIcon visualKey={slot.visualKey} />
<span className={use3DPreview ? 'opacity-0' : 'opacity-100'}>
{fallback}
</span>
</span>
);
}
@@ -321,6 +333,18 @@ export function Match3DRuntimeShell({
}, [run]);
const shouldUse3DRender = !force2DRender;
const trayPreviewItems = useMemo(() => {
if (!run) {
return [];
}
return run.traySlots.map((slot) =>
slot.itemInstanceId
? (run.items.find(
(item) => item.itemInstanceId === slot.itemInstanceId,
) ?? null)
: null,
);
}, [run]);
const handleItemClick = async (item: Match3DItemSnapshot) => {
if (!run || !isRunState(run.status, 'running') || pendingClick) {
@@ -436,7 +460,9 @@ export function Match3DRuntimeShell({
<section className="relative mt-3 flex flex-1 min-h-0 items-center justify-center">
<div
ref={stageRef}
className="relative aspect-square max-w-full overflow-hidden rounded-full border-[10px] border-[#e6d19b] bg-[radial-gradient(circle_at_50%_42%,#f2d993_0%,#c88f43_56%,#835223_100%)] shadow-[inset_0_8px_34px_rgba(72,41,16,0.34),0_22px_42px_rgba(15,23,42,0.28)]"
className={`relative aspect-square max-w-full rounded-full border-[10px] border-[#e6d19b] bg-[radial-gradient(circle_at_50%_42%,#f2d993_0%,#c88f43_56%,#835223_100%)] shadow-[inset_0_8px_34px_rgba(72,41,16,0.34),0_22px_42px_rgba(15,23,42,0.28)] ${
shouldUse3DRender ? 'overflow-visible' : 'overflow-hidden'
}`}
style={{
width: 'min(92vw, 58dvh, 100%)',
}}
@@ -474,16 +500,27 @@ export function Match3DRuntimeShell({
</section>
<section className="mt-3 w-full min-w-0 overflow-hidden rounded-[1.35rem] border border-white/14 bg-black/24 p-2 shadow-[0_16px_36px_rgba(15,23,42,0.24)] backdrop-blur">
<div className="grid grid-cols-7 gap-1.5" data-testid="match3d-tray">
{run.traySlots.map((slot) => (
<div
key={slot.slotIndex}
className="aspect-square min-w-0 rounded-xl bg-white/10 p-1"
data-testid="match3d-tray-slot"
>
<Match3DTrayToken slot={slot} />
</div>
))}
<div
className="relative grid grid-cols-7 gap-1.5"
data-testid="match3d-tray"
>
{shouldUse3DRender ? (
<Match3DTrayPreviewBoard slotItems={trayPreviewItems} />
) : null}
{run.traySlots.map((slot) => {
return (
<div
key={slot.slotIndex}
className="relative z-0 aspect-square min-w-0 rounded-xl bg-white/10 p-1"
data-testid="match3d-tray-slot"
>
<Match3DTrayToken
slot={slot}
use3DPreview={shouldUse3DRender}
/>
</div>
);
})}
</div>
</section>
</div>