aether-engine 1.0.0

package/src/ui/PlayerHUD.tsx

@@ -0,0 +1,250 @@
+import { Index, onCleanup, onMount, Show } from "solid-js";
+import {
+	draggedItem,
+	dragHoverTarget,
+	getInvAccessor,
+	handleDrop,
+	hotbarSlots,
+	type InventorySource,
+	type Item,
+	isDropHandled,
+	notifyEquipmentChange,
+	selectedHotbarIndex,
+	setDraggedItem,
+	setDragHoverTarget,
+	setHotbarIndex,
+	setInvAccessor,
+	setIsDropHandled,
+} from "./GameState";
+
+export function PlayerHUD() {
+	onMount(() => {
+		const handleKeyDown = (e: KeyboardEvent) => {
+			// Numbers 1-5
+			if (e.key >= "1" && e.key <= "5") {
+				const index = parseInt(e.key, 10) - 1;
+				setHotbarIndex(index);
+			}
+		};
+		window.addEventListener("keydown", handleKeyDown);
+		onCleanup(() => {
+			window.removeEventListener("keydown", handleKeyDown);
+		});
+	});
+
+	const handleDragStart = (
+		e: DragEvent,
+		source: InventorySource,
+		index: number,
+	) => {
+		setDraggedItem({ source, index });
+		if (e.dataTransfer) {
+			e.dataTransfer.effectAllowed = "move";
+			e.dataTransfer.setData("text/plain", "");
+		}
+	};
+
+	const handleDragOver = (e: DragEvent) => {
+		e.preventDefault();
+		if (e.dataTransfer) {
+			e.dataTransfer.dropEffect = "move";
+		}
+	};
+
+	const onDropHandler = (
+		e: DragEvent,
+		targetSource: InventorySource,
+		targetIndex: number,
+	) => {
+		e.preventDefault();
+		handleDrop(targetSource, targetIndex);
+	};
+
+	const handleDragEnter = (
+		e: DragEvent,
+		source: InventorySource,
+		index: number,
+	) => {
+		e.preventDefault();
+		setDragHoverTarget({ source, index });
+	};
+
+	const handleDragLeave = (
+		_e: DragEvent,
+		source: InventorySource,
+		index: number,
+	) => {
+		const currentTarget = dragHoverTarget();
+		if (
+			currentTarget &&
+			currentTarget.source === source &&
+			currentTarget.index === index
+		) {
+			setDragHoverTarget(null);
+		}
+	};
+
+	const handleDragEnd = (_e: DragEvent) => {
+		if (!isDropHandled() && draggedItem()) {
+			// Dropped on ground
+			const itemInfo = draggedItem()!;
+			const invAccess = getInvAccessor(itemInfo.source)();
+			const item = invAccess[itemInfo.index];
+			if (item) {
+				window.dispatchEvent(
+					new CustomEvent("DropItemOnGround", { detail: { item } }),
+				);
+				const newInv = [...invAccess];
+				newInv[itemInfo.index] = null;
+				setInvAccessor(itemInfo.source, newInv);
+				if (itemInfo.source === "hotbar") {
+					notifyEquipmentChange();
+				}
+			}
+		}
+		setDraggedItem(null);
+		setDragHoverTarget(null);
+		setIsDropHandled(false);
+	};
+
+	const renderSlot = (
+		itemAccessor: () => Item | null,
+		source: InventorySource,
+		index: number,
+	) => {
+		const isSelected = () => selectedHotbarIndex() === index;
+
+		return (
+			<div
+				onClick={() => setHotbarIndex(index)}
+				style={{
+					width: "56px",
+					height: "56px",
+					background:
+						dragHoverTarget()?.source === source &&
+						dragHoverTarget()?.index === index &&
+						!(
+							draggedItem()?.source === source && draggedItem()?.index === index
+						)
+							? "rgba(255, 255, 255, 0.2)"
+							: "rgba(0, 0, 0, 0.4)",
+					border: isSelected()
+						? "3px solid #FFD700"
+						: dragHoverTarget()?.source === source &&
+								dragHoverTarget()?.index === index &&
+								!(
+									draggedItem()?.source === source &&
+									draggedItem()?.index === index
+								)
+							? "1px solid rgba(255, 255, 255, 0.8)"
+							: "2px solid rgba(255, 255, 255, 0.2)",
+					"border-radius": "8px",
+					position: "relative",
+					display: "flex",
+					"justify-content": "center",
+					"align-items": "center",
+					cursor: "pointer",
+					"box-shadow":
+						"inset 0px 2px 4px rgba(0,0,0,0.5), 0 4px 6px rgba(0,0,0,0.3)",
+					opacity:
+						draggedItem()?.source === source && draggedItem()?.index === index
+							? 0.3
+							: 1,
+					transition: "all 0.1s ease-in-out",
+					"margin-top": isSelected() ? "-10px" : "0px",
+					"pointer-events": "auto",
+				}}
+				draggable={!!itemAccessor()}
+				onDragStart={(e) => itemAccessor() && handleDragStart(e, source, index)}
+				onDragOver={handleDragOver}
+				onDragEnter={(e) => handleDragEnter(e, source, index)}
+				onDragLeave={(e) => handleDragLeave(e, source, index)}
+				onDrop={(e) => onDropHandler(e, source, index)}
+				onDragEnd={handleDragEnd}
+			>
+				<div
+					style={{
+						position: "absolute",
+						top: "2px",
+						left: "4px",
+						"font-size": "10px",
+						color: "rgba(255,255,255,0.5)",
+						"pointer-events": "none",
+					}}
+				>
+					{index + 1}
+				</div>
+
+				<Show when={itemAccessor()}>
+					{(it) => {
+						const item = () => it();
+						return (
+							<>
+								<Show
+									when={item().iconX !== undefined}
+									fallback={
+										<img
+											src={item().icon}
+											style={{
+												"max-width": "40px",
+												"max-height": "40px",
+												"object-fit": "contain",
+												"pointer-events": "none",
+											}}
+										/>
+									}
+								>
+									<div
+										style={{
+											width: "40px",
+											height: "40px",
+											"background-image": `url(${item().icon})`,
+											"background-position": `-${item().iconX! * (40 / item().iconW!)}px -${item().iconY! * (40 / item().iconH!)}px`,
+											"background-size": `${item().atlasW! * (40 / item().iconW!)}px ${item().atlasH! * (40 / item().iconH!)}px`,
+											"pointer-events": "none",
+											"image-rendering": "pixelated",
+										}}
+									></div>
+								</Show>
+								<div
+									style={{
+										position: "absolute",
+										bottom: "2px",
+										right: "4px",
+										"font-size": "12px",
+										color: "white",
+										"font-weight": "bold",
+										"text-shadow": "1px 1px 0px black",
+										"pointer-events": "none",
+									}}
+								>
+									{item().quantity > 1 ? item().quantity : ""}
+								</div>
+							</>
+						);
+					}}
+				</Show>
+			</div>
+		);
+	};
+
+	return (
+		<div
+			style={{
+				position: "absolute",
+				bottom: "30px",
+				left: "50%",
+				transform: "translateX(-50%)",
+				display: "flex",
+				gap: "10px",
+				"z-index": 5001,
+				"user-select": "none",
+				"pointer-events": "none",
+			}}
+		>
+			<Index each={hotbarSlots()}>
+				{(item, i) => renderSlot(item, "hotbar", i)}
+			</Index>
+		</div>
+	);
+}