Z8MB1E
4ae2b3137c
- Add attachItemFromGrid server action for drag-drop attachment - Add attach drop detection in LockerGrid handleDragEnd - Add attach drop styling with amber highlight on weapon footprint - Add isAttachDrop prop to GridCell for attach-specific feedback - Add dragError state with 5s auto-clear for attach failures - Reuse setItemAttachment/removeItemAttachment semantics - Handle slot replacement with no-room fallback for old attachments
45 lines
1.1 KiB
TypeScript
45 lines
1.1 KiB
TypeScript
"use client";
|
|
|
|
import { useDroppable } from "@dnd-kit/core";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
interface GridCellProps {
|
|
x: number;
|
|
y: number;
|
|
cellSize: number;
|
|
isOccupied: boolean;
|
|
isDropTarget: boolean;
|
|
isHovered: boolean;
|
|
isInvalidDrop: boolean;
|
|
isAttachDrop?: boolean;
|
|
}
|
|
|
|
export function GridCell({
|
|
x,
|
|
y,
|
|
cellSize,
|
|
isOccupied,
|
|
isDropTarget,
|
|
isHovered,
|
|
isInvalidDrop,
|
|
isAttachDrop = false,
|
|
}: GridCellProps) {
|
|
const { setNodeRef } = useDroppable({
|
|
id: `cell-${x}-${y}`,
|
|
data: { x, y },
|
|
});
|
|
|
|
return (
|
|
<div
|
|
ref={setNodeRef}
|
|
className={cn(
|
|
"border border-border/60 transition-colors duration-75",
|
|
isHovered && isAttachDrop && "bg-amber-400/30 border-amber-400/60",
|
|
isHovered && !isAttachDrop && !isInvalidDrop && "bg-green-500/25 border-green-500/50",
|
|
isHovered && !isAttachDrop && isInvalidDrop && "bg-red-500/25 border-red-500/50",
|
|
!isHovered && isDropTarget && "bg-primary/5 border-primary/20",
|
|
)}
|
|
style={{ width: cellSize, height: cellSize }}
|
|
/>
|
|
);
|
|
}
|