+ {(hasSkin || attachmentCount > 0 || hasCustomName) && (
+
+ {hasCustomName && (
+
+
+
+ )}
+ {hasSkin && (
+
+
+
+ )}
+ {attachmentCount > 0 && (
+
+
+ {attachmentCount}
+
+ )}
+
+ )}
{thumb ? (
@@ -119,7 +162,7 @@ export function LockerItemFace({
{getAssetIcon(asset.assetType, "size-5")}
)}
- {asset.name}
+ {displayName}
{quantity > 1 && (
void;
selected: boolean;
+ highlight?: boolean;
}) {
const didDrag = useRef(false);
const fp = getLockerItemFootprint(item.asset, item.rotated);
@@ -189,13 +234,20 @@ function DraggableLockerItem({
"transition-shadow duration-150",
selected && "ring-2 ring-primary",
!selected && "hover:ring-1 hover:ring-primary/50",
+ highlight && "locker-search-highlight",
)}
{...listeners}
{...attributes}
onClick={handleClick}
suppressHydrationWarning
>
-
+
);
}
@@ -210,6 +262,8 @@ interface LockerGridProps {
onRemoveItem: (entryId: string) => Promise
;
onSelectItem: (item: LockerGridItem | null) => void;
selectedItem: LockerGridItem | null;
+ highlightId?: string | null;
+ onAttachItem?: (weaponEntryId: string, attachmentEntryId: string) => Promise;
}
export function LockerGrid({
@@ -222,10 +276,14 @@ export function LockerGrid({
onRemoveItem,
onSelectItem,
selectedItem,
+ highlightId,
+ onAttachItem,
}: LockerGridProps) {
const [activeItem, setActiveItem] = useState(null);
const [hoverPosition, setHoverPosition] = useState<{ x: number; y: number } | null>(null);
const [pendingRotated, setPendingRotated] = useState(false);
+ const [dragError, setDragError] = useState(null);
+ const dragErrorTimer = useRef | null>(null);
const [cellSize, setCellSize] = useState(48);
const gridRef = useRef(null);
const containerRef = useRef(null);
@@ -280,15 +338,56 @@ export function LockerGrid({
const hoverInfo = useMemo(() => {
if (!hoverPosition || !activeItem) return null;
const fp = getLockerItemFootprint(activeItem.asset, pendingRotated);
- const cells = new Set();
- for (let dx = 0; dx < fp.width; dx++) {
- for (let dy = 0; dy < fp.height; dy++) {
- cells.add(`${hoverPosition.x + dx},${hoverPosition.y + dy}`);
+ const isAttachment = ATTACHMENT_CATEGORIES.some(
+ (c) => c.assetType === activeItem.asset.assetType,
+ );
+
+ const targetItem =
+ items.find(
+ (it) => it.id !== activeItem.id && itemContainsCell(it, hoverPosition.x, hoverPosition.y),
+ ) ?? null;
+ const mergeTarget = findLockerMergeTarget(
+ items,
+ activeItem,
+ hoverPosition.x,
+ hoverPosition.y,
+ pendingRotated,
+ );
+
+ let mode: "move" | "merge" | "attach" = "move";
+ if (mergeTarget) {
+ mode = "merge";
+ } else if (
+ isAttachment &&
+ targetItem?.asset.assetType === "weapon" &&
+ isAttachmentCompatible(targetItem.asset, activeItem.asset)
+ ) {
+ const alreadyInstalled = (targetItem.equipment?.attachments ?? []).some(
+ (a) => resolveAssetId(a.asset) === activeItem.assetId,
+ );
+ if (!alreadyInstalled) {
+ mode = "attach";
}
}
- const mergeTarget = findLockerMergeTarget(items, activeItem, hoverPosition.x, hoverPosition.y, pendingRotated);
+
+ const cells = new Set();
+ if (mode === "attach" && targetItem) {
+ const tFp = getLockerItemFootprint(targetItem.asset, targetItem.rotated);
+ for (let dx = 0; dx < tFp.width; dx++) {
+ for (let dy = 0; dy < tFp.height; dy++) {
+ cells.add(`${targetItem.gridX + dx},${targetItem.gridY + dy}`);
+ }
+ }
+ } else {
+ for (let dx = 0; dx < fp.width; dx++) {
+ for (let dy = 0; dy < fp.height; dy++) {
+ cells.add(`${hoverPosition.x + dx},${hoverPosition.y + dy}`);
+ }
+ }
+ }
+
const valid =
- mergeTarget !== null ||
+ mode !== "move" ||
isLockerPlacementValid(
items,
activeItem.id,
@@ -299,7 +398,8 @@ export function LockerGrid({
gridWidth,
gridHeight,
);
- return { cells, valid };
+
+ return { cells, valid, isAttachDrop: mode === "attach" };
}, [hoverPosition, activeItem, items, gridWidth, gridHeight, pendingRotated]);
const handleDragStart = useCallback((event: DragStartEvent) => {
@@ -310,6 +410,7 @@ export function LockerGrid({
setPendingRotated(item.rotated ?? false);
}
setHoverPosition(null);
+ setDragError(null);
}, []);
const handleDragMove = useCallback(
@@ -365,6 +466,32 @@ export function LockerGrid({
return;
}
+ if (onAttachItem) {
+ const isAttachment = ATTACHMENT_CATEGORIES.some((c) => c.assetType === item.asset.assetType);
+ const targetItem =
+ items.find(
+ (it) => it.id !== item.id && itemContainsCell(it, targetX, targetY),
+ ) ?? null;
+ if (
+ isAttachment &&
+ targetItem?.asset.assetType === "weapon" &&
+ isAttachmentCompatible(targetItem.asset, item.asset)
+ ) {
+ const alreadyInstalled = (targetItem.equipment?.attachments ?? []).some(
+ (a) => resolveAssetId(a.asset) === item.assetId,
+ );
+ if (!alreadyInstalled) {
+ const result = await onAttachItem(targetItem.id, item.id);
+ if (!result.success && result.error) {
+ setDragError(result.error);
+ if (dragErrorTimer.current) clearTimeout(dragErrorTimer.current);
+ dragErrorTimer.current = setTimeout(() => setDragError(null), 5000);
+ }
+ return;
+ }
+ }
+ }
+
const fp = getLockerItemFootprint(item.asset, pendingRotated);
const valid = isLockerPlacementValid(
items,
@@ -381,7 +508,7 @@ export function LockerGrid({
await onMoveItem(item.id, targetX, targetY, pendingRotated);
}
},
- [items, gridWidth, gridHeight, onMoveItem, onMergeStacks, cellSize, pendingRotated],
+ [items, gridWidth, gridHeight, onMoveItem, onMergeStacks, onAttachItem, cellSize, pendingRotated],
);
const handleBackgroundClick = useCallback(() => {
@@ -414,6 +541,7 @@ export function LockerGrid({
isDropTarget={!!activeItem}
isHovered={hoverInfo !== null && hoverInfo.cells.has(key)}
isInvalidDrop={hoverInfo !== null && !hoverInfo.valid}
+ isAttachDrop={hoverInfo?.isAttachDrop ?? false}
/>
);
}),
@@ -426,6 +554,7 @@ export function LockerGrid({
cellSize={cellSize}
onSelect={onSelectItem}
selected={selectedItem?.id === item.id}
+ highlight={highlightId === item.id}
/>
))}
@@ -439,6 +568,7 @@ export function LockerGrid({
{gridWidth} x {gridHeight}
+ {dragError &&