253 lines
9.3 KiB
TypeScript
253 lines
9.3 KiB
TypeScript
import { AnimatePresence, motion } from 'motion/react';
|
|
import type { ReactNode } from 'react';
|
|
|
|
import { resolveInventoryItemUseEffect } from '../data/inventoryEffects';
|
|
import { buildInventoryItemDescription } from '../data/itemPresentation';
|
|
import type { Character, InventoryItem, WorldType } from '../types';
|
|
import {
|
|
CHROME_ICONS,
|
|
getInventoryItemVisualSrc,
|
|
getNineSliceStyle,
|
|
UI_CHROME,
|
|
} from '../uiAssets';
|
|
import { PixelIcon } from './PixelIcon';
|
|
|
|
function getInventoryRarityTheme(rarity: InventoryItem['rarity']) {
|
|
switch (rarity) {
|
|
case 'legendary':
|
|
return {
|
|
frameClass:
|
|
'border-amber-400/45 bg-gradient-to-br from-amber-500/16 to-orange-500/8',
|
|
titleClass: 'text-amber-300',
|
|
quantityClass:
|
|
'border-amber-300/30 bg-amber-500/14 text-amber-50 shadow-[0_0_18px_rgba(251,191,36,0.16)]',
|
|
auraClass: 'from-amber-500/18 via-orange-500/12 to-transparent',
|
|
glowClass: 'bg-amber-300/24',
|
|
};
|
|
case 'epic':
|
|
return {
|
|
frameClass:
|
|
'border-fuchsia-400/40 bg-gradient-to-br from-fuchsia-500/14 to-rose-500/8',
|
|
titleClass: 'text-fuchsia-300',
|
|
quantityClass:
|
|
'border-fuchsia-300/28 bg-fuchsia-500/12 text-fuchsia-50 shadow-[0_0_18px_rgba(232,121,249,0.14)]',
|
|
auraClass: 'from-fuchsia-500/18 via-rose-500/10 to-transparent',
|
|
glowClass: 'bg-fuchsia-300/22',
|
|
};
|
|
case 'rare':
|
|
return {
|
|
frameClass:
|
|
'border-sky-400/40 bg-gradient-to-br from-sky-500/14 to-cyan-500/8',
|
|
titleClass: 'text-sky-300',
|
|
quantityClass:
|
|
'border-sky-300/26 bg-sky-500/12 text-sky-50 shadow-[0_0_18px_rgba(56,189,248,0.14)]',
|
|
auraClass: 'from-sky-500/18 via-cyan-500/10 to-transparent',
|
|
glowClass: 'bg-sky-300/20',
|
|
};
|
|
case 'uncommon':
|
|
return {
|
|
frameClass:
|
|
'border-emerald-400/35 bg-gradient-to-br from-emerald-500/12 to-lime-500/8',
|
|
titleClass: 'text-emerald-300',
|
|
quantityClass:
|
|
'border-emerald-300/24 bg-emerald-500/12 text-emerald-50 shadow-[0_0_18px_rgba(74,222,128,0.12)]',
|
|
auraClass: 'from-emerald-500/18 via-lime-500/10 to-transparent',
|
|
glowClass: 'bg-emerald-300/18',
|
|
};
|
|
default:
|
|
return {
|
|
frameClass: 'border-white/10 bg-white/[0.04]',
|
|
titleClass: 'text-zinc-100',
|
|
quantityClass:
|
|
'border-white/12 bg-white/[0.06] text-zinc-100 shadow-[0_0_18px_rgba(255,255,255,0.06)]',
|
|
auraClass: 'from-white/10 via-white/4 to-transparent',
|
|
glowClass: 'bg-white/10',
|
|
};
|
|
}
|
|
}
|
|
|
|
function getInventoryItemIcon(item: InventoryItem) {
|
|
return getInventoryItemVisualSrc(item);
|
|
}
|
|
|
|
function buildInventoryItemSummary(
|
|
item: InventoryItem,
|
|
useEffect: ReturnType<typeof resolveInventoryItemUseEffect>,
|
|
) {
|
|
return buildInventoryItemDescription(item, useEffect);
|
|
}
|
|
|
|
function buildInventorySlots(items: InventoryItem[], minimumSlotCount: number) {
|
|
const slotCount = Math.ceil(Math.max(items.length, minimumSlotCount) / 4) * 4;
|
|
return [
|
|
...items,
|
|
...Array.from(
|
|
{ length: Math.max(0, slotCount - items.length) },
|
|
() => null,
|
|
),
|
|
];
|
|
}
|
|
|
|
export function InventoryItemGrid({
|
|
items,
|
|
selectedItemId = null,
|
|
minimumSlotCount = 16,
|
|
onSelectItem,
|
|
}: {
|
|
items: InventoryItem[];
|
|
selectedItemId?: string | null;
|
|
minimumSlotCount?: number;
|
|
onSelectItem: (item: InventoryItem) => void;
|
|
}) {
|
|
const inventorySlots = buildInventorySlots(items, minimumSlotCount);
|
|
|
|
return (
|
|
<div className="grid grid-cols-4 gap-2 sm:grid-cols-5 lg:grid-cols-6 xl:grid-cols-7">
|
|
{inventorySlots.map((item, index) => {
|
|
if (!item) {
|
|
return (
|
|
<div
|
|
key={`empty-slot-${index}`}
|
|
className="aspect-square rounded-xl border border-dashed border-white/8 bg-black/12"
|
|
/>
|
|
);
|
|
}
|
|
|
|
const selected = selectedItemId === item.id;
|
|
const rarityTheme = getInventoryRarityTheme(item.rarity);
|
|
|
|
return (
|
|
<button
|
|
key={item.id}
|
|
type="button"
|
|
onClick={() => onSelectItem(item)}
|
|
className={`relative aspect-square rounded-xl border p-1.5 transition-colors hover:border-white/25 ${rarityTheme.frameClass} ${selected ? 'ring-1 ring-amber-300/55' : ''}`}
|
|
title={`${item.name} x${item.quantity}`}
|
|
>
|
|
<div className="flex h-full items-center justify-center">
|
|
<PixelIcon
|
|
src={getInventoryItemIcon(item)}
|
|
className="h-9 w-9 drop-shadow-[0_4px_8px_rgba(0,0,0,0.35)] sm:h-11 sm:w-11"
|
|
/>
|
|
</div>
|
|
<div className="absolute bottom-1 right-1 rounded-full border border-black/30 bg-black/65 px-1.5 py-0.5 text-[10px] font-semibold text-white">
|
|
{item.quantity}
|
|
</div>
|
|
</button>
|
|
);
|
|
})}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
type InventoryItemDetailModalProps = {
|
|
item: InventoryItem | null;
|
|
playerCharacter: Character;
|
|
worldType: WorldType | null;
|
|
ownerLabel?: string;
|
|
onClose: () => void;
|
|
footer?: ReactNode;
|
|
};
|
|
|
|
export function InventoryItemDetailModal({
|
|
item,
|
|
playerCharacter,
|
|
onClose,
|
|
footer,
|
|
}: InventoryItemDetailModalProps) {
|
|
const selectedItemUseEffect = item
|
|
? resolveInventoryItemUseEffect(item, playerCharacter)
|
|
: null;
|
|
const itemSummary = item
|
|
? buildInventoryItemSummary(item, selectedItemUseEffect)
|
|
: '';
|
|
const rarityTheme = item
|
|
? getInventoryRarityTheme(item.rarity)
|
|
: getInventoryRarityTheme('common');
|
|
|
|
return (
|
|
<AnimatePresence>
|
|
{item && (
|
|
<motion.div
|
|
initial={{ opacity: 0 }}
|
|
animate={{ opacity: 1 }}
|
|
exit={{ opacity: 0 }}
|
|
className="fixed inset-0 z-[78] flex items-end justify-center bg-black/78 p-3 backdrop-blur-sm sm:items-center sm:p-4"
|
|
onClick={onClose}
|
|
>
|
|
<motion.div
|
|
initial={{ opacity: 0, scale: 0.96, y: 8 }}
|
|
animate={{ opacity: 1, scale: 1, y: 0 }}
|
|
exit={{ opacity: 0, scale: 0.96, y: 8 }}
|
|
transition={{ duration: 0.18, ease: 'easeOut' }}
|
|
className="pixel-nine-slice pixel-modal-shell flex max-h-[min(90vh,50rem)] w-full max-w-2xl flex-col overflow-hidden shadow-[0_24px_80px_rgba(0,0,0,0.55)]"
|
|
style={getNineSliceStyle(UI_CHROME.modalPanel)}
|
|
onClick={(event) => event.stopPropagation()}
|
|
>
|
|
<div className="relative flex min-h-0 flex-1 flex-col gap-4 p-4 sm:gap-5 sm:p-5">
|
|
<button
|
|
type="button"
|
|
onClick={onClose}
|
|
className="absolute right-4 top-4 z-10 rounded-full border border-white/10 bg-black/25 p-1.5 text-zinc-400 transition-colors hover:text-white sm:right-5 sm:top-5"
|
|
>
|
|
<PixelIcon src={CHROME_ICONS.close} className="h-4 w-4" />
|
|
</button>
|
|
|
|
<div
|
|
className={`relative overflow-hidden rounded-[1.5rem] border px-4 py-5 sm:px-6 sm:py-6 ${rarityTheme.frameClass}`}
|
|
>
|
|
<div
|
|
className={`pointer-events-none absolute inset-0 bg-gradient-to-br ${rarityTheme.auraClass}`}
|
|
/>
|
|
<div
|
|
className={`pointer-events-none absolute -right-12 top-1/2 h-28 w-28 -translate-y-1/2 rounded-full blur-3xl sm:h-36 sm:w-36 ${rarityTheme.glowClass}`}
|
|
/>
|
|
<div className="pointer-events-none absolute right-4 top-4 opacity-[0.16] sm:right-6 sm:top-5">
|
|
<PixelIcon
|
|
src={getInventoryItemIcon(item)}
|
|
className="h-16 w-16 drop-shadow-[0_8px_16px_rgba(0,0,0,0.3)] sm:h-20 sm:w-20"
|
|
/>
|
|
</div>
|
|
<div className="relative max-w-[80%] sm:max-w-[85%]">
|
|
<div
|
|
className={`break-words text-[clamp(1.2rem,5vw,1.95rem)] font-semibold leading-tight drop-shadow-[0_2px_6px_rgba(0,0,0,0.35)] ${rarityTheme.titleClass}`}
|
|
>
|
|
{item.name}
|
|
</div>
|
|
<div
|
|
className={`mt-4 inline-flex items-center rounded-full border px-3 py-1.5 text-xs sm:text-sm ${rarityTheme.quantityClass}`}
|
|
>
|
|
数量 x{item.quantity}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
className="pixel-nine-slice pixel-panel min-h-0 flex-1"
|
|
style={getNineSliceStyle(UI_CHROME.infoPanel)}
|
|
>
|
|
<div className="relative flex h-full min-h-[clamp(18rem,48vh,30rem)] flex-col overflow-hidden">
|
|
<div
|
|
className={`pointer-events-none absolute -left-10 bottom-4 h-24 w-24 rounded-full blur-3xl sm:h-32 sm:w-32 ${rarityTheme.glowClass}`}
|
|
/>
|
|
<div className="relative h-full overflow-y-auto pr-1">
|
|
<p className="whitespace-pre-wrap text-[0.95rem] leading-7 text-zinc-100 sm:text-base sm:leading-8">
|
|
{itemSummary}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{footer != null ? (
|
|
<div className="border-t border-white/10 px-4 py-3 sm:px-5">
|
|
{footer}
|
|
</div>
|
|
) : null}
|
|
</motion.div>
|
|
</motion.div>
|
|
)}
|
|
</AnimatePresence>
|
|
);
|
|
}
|