aether-engine 1.0.0

package/src/ui/Icons.tsx

@@ -0,0 +1,239 @@
+import type { JSX } from "solid-js";
+
+export function IconBase(
+	props: JSX.SvgSVGAttributes<SVGSVGElement> & {
+		children?: any;
+		size?: number | string;
+	},
+) {
+	return (
+		<svg
+			xmlns="http://www.w3.org/2000/svg"
+			width={props.size || 24}
+			height={props.size || 24}
+			viewBox="0 0 24 24"
+			fill="none"
+			stroke="currentColor"
+			stroke-width="2"
+			stroke-linecap="round"
+			stroke-linejoin="round"
+			{...props}
+		>
+			{props.children}
+		</svg>
+	);
+}
+
+export const IconPencil = (props: any) => (
+	<IconBase {...props}>
+		<path d="M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z" />
+		<path d="m15 5 4 4" />
+	</IconBase>
+);
+
+export const IconEraser = (props: any) => (
+	<IconBase {...props}>
+		<path d="m7 21-4.3-4.3c-1-1-1-2.5 0-3.4l9.6-9.6c1-1 2.5-1 3.4 0l5.6 5.6c1 1 1 2.5 0 3.4L13 21" />
+		<path d="M22 21H7" />
+		<path d="m5 11 9 9" />
+	</IconBase>
+);
+
+export const IconBucket = (props: any) => (
+	<IconBase {...props}>
+		<path d="m19 11-8-8-8.6 8.6a2 2 0 0 0 0 2.8l5.2 5.2c.8.8 2 .8 2.8 0L19 11Z" />
+		<path d="m5 2 5 5" />
+		<path d="M2 13h15" />
+		<path d="M22 20a2 2 0 1 1-4 0c0-1.6 1.7-2.4 2-4 .3 1.6 2 2.4 2 4Z" />
+	</IconBase>
+);
+
+export const IconLine = (props: any) => (
+	<IconBase {...props}>
+		<line x1="3" y1="21" x2="21" y2="3" />
+	</IconBase>
+);
+
+export const IconRect = (props: any) => (
+	<IconBase {...props}>
+		<rect width="18" height="18" x="3" y="3" rx="2" />
+	</IconBase>
+);
+
+export const IconCircle = (props: any) => (
+	<IconBase {...props}>
+		<circle cx="12" cy="12" r="10" />
+	</IconBase>
+);
+
+export const IconSelect = (props: any) => (
+	<IconBase {...props}>
+		<rect width="18" height="18" x="3" y="3" rx="2" stroke-dasharray="4 4" />
+	</IconBase>
+);
+
+export const IconPan = (props: any) => (
+	<IconBase {...props}>
+		<path d="M18 11V6a2 2 0 0 0-2-2v0a2 2 0 0 0-2 2v0" />
+		<path d="M14 10V4a2 2 0 0 0-2-2v0a2 2 0 0 0-2 2v2" />
+		<path d="M10 10.5V6a2 2 0 0 0-2-2v0a2 2 0 0 0-2 2v8" />
+		<path d="M18 8a2 2 0 1 1 4 0v6a8 8 0 0 1-8 8h-2c-2.8 0-4.5-.86-5.99-2.34l-3.6-3.6a2 2 0 0 1 2.83-2.82L7 15" />
+	</IconBase>
+);
+
+export const IconCopy = (props: any) => (
+	<IconBase {...props}>
+		<rect width="14" height="14" x="8" y="8" rx="2" ry="2" />
+		<path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2" />
+	</IconBase>
+);
+
+export const IconPaste = (props: any) => (
+	<IconBase {...props}>
+		<path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2" />
+		<rect width="8" height="4" x="8" y="2" rx="1" ry="1" />
+	</IconBase>
+);
+
+export const IconDuplicate = (props: any) => (
+	<IconBase {...props}>
+		<path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2" />
+		<rect width="14" height="14" x="8" y="8" rx="2" ry="2" />
+		<line x1="15" x2="15" y1="11" y2="17" />
+		<line x1="12" x2="18" y1="14" y2="14" />
+	</IconBase>
+);
+
+export const IconTrash = (props: any) => (
+	<IconBase {...props}>
+		<path d="M3 6h18" />
+		<path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6" />
+		<path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2" />
+	</IconBase>
+);
+
+export const IconEye = (props: any) => (
+	<IconBase {...props}>
+		<path d="M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z" />
+		<circle cx="12" cy="12" r="3" />
+	</IconBase>
+);
+
+export const IconEyeOff = (props: any) => (
+	<IconBase {...props}>
+		<path d="M9.88 9.88a3 3 0 1 0 4.24 4.24" />
+		<path d="M10.73 5.08A10.43 10.43 0 0 1 12 5c7 0 10 7 10 7a13.16 13.16 0 0 1-1.67 2.68" />
+		<path d="M6.61 6.61A13.526 13.526 0 0 0 2 12s3 7 10 7a9.74 9.74 0 0 0 5.39-1.61" />
+		<line x1="2" x2="22" y1="2" y2="22" />
+	</IconBase>
+);
+
+export const IconUp = (props: any) => (
+	<IconBase {...props}>
+		<path d="m18 15-6-6-6 6" />
+	</IconBase>
+);
+
+export const IconDown = (props: any) => (
+	<IconBase {...props}>
+		<path d="m6 9 6 6 6-6" />
+	</IconBase>
+);
+
+export const IconMergeDown = (props: any) => (
+	<IconBase {...props}>
+		<path d="M12 3v14" />
+		<path d="m19 10-7 7-7-7" />
+		<path d="M5 21h14" />
+	</IconBase>
+);
+
+export const IconPlus = (props: any) => (
+	<IconBase {...props}>
+		<path d="M5 12h14" />
+		<path d="M12 5v14" />
+	</IconBase>
+);
+
+export const IconX = (props: any) => (
+	<IconBase {...props}>
+		<path d="M18 6 6 18" />
+		<path d="m6 6 12 12" />
+	</IconBase>
+);
+
+export const IconCheck = (props: any) => (
+	<IconBase {...props}>
+		<path d="M20 6 9 17l-5-5" />
+	</IconBase>
+);
+
+export const IconSave = (props: any) => (
+	<IconBase {...props}>
+		<path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z" />
+		<polyline points="17 21 17 13 7 13 7 21" />
+		<polyline points="7 3 7 8 15 8" />
+	</IconBase>
+);
+
+export const IconPlay = (props: any) => (
+	<IconBase {...props}>
+		<polygon points="5 3 19 12 5 21 5 3" />
+	</IconBase>
+);
+
+export const IconPause = (props: any) => (
+	<IconBase {...props}>
+		<rect width="4" height="16" x="6" y="4" />
+		<rect width="4" height="16" x="14" y="4" />
+	</IconBase>
+);
+
+export const IconStepForward = (props: any) => (
+	<IconBase {...props}>
+		<line x1="19" x2="19" y1="5" y2="19" />
+		<polygon points="5 4 15 12 5 20 5 4" />
+	</IconBase>
+);
+
+export const IconChevronUp = (props: any) => (
+	<IconBase {...props}>
+		<path d="m18 15-6-6-6 6" />
+	</IconBase>
+);
+
+export const IconChevronDown = (props: any) => (
+	<IconBase {...props}>
+		<path d="m6 9 6 6 6-6" />
+	</IconBase>
+);
+
+export const IconChevronRight = (props: any) => (
+	<IconBase {...props}>
+		<path d="m9 18 6-6-6-6" />
+	</IconBase>
+);
+
+export const IconFlipHorizontal = (props: any) => (
+	<IconBase {...props}>
+		<path d="M8 21.5 4.5 18 8 14.5" />
+		<path d="M16 21.5l3.5-3.5L16 14.5" />
+		<line x1="12" x2="12" y1="2" y2="22" />
+	</IconBase>
+);
+
+export const IconFlipVertical = (props: any) => (
+	<IconBase {...props}>
+		<path d="M14.5 8 18 4.5 21.5 8" />
+		<path d="M14.5 16 18 19.5 21.5 16" />
+		<line x1="2" x2="22" y1="12" y2="12" />
+	</IconBase>
+);
+
+export const IconAetherEngine = (props: any) => (
+	<IconBase {...props}>
+		<path d="M12 2L2 20h20L12 2z" />
+		<path d="M12 2v20" />
+		<path d="M6 14h12" />
+	</IconBase>
+);

package/src/ui/InventoryPanel.tsx

@@ -0,0 +1,335 @@
+import { Index, onCleanup, onMount, Show } from "solid-js";
+import {
+	chestInv,
+	draggedItem,
+	dragHoverTarget,
+	getInvAccessor,
+	handleDrop,
+	type InventorySource,
+	type Item,
+	initInventory,
+	isDropHandled,
+	playerInv,
+	setDraggedItem,
+	setDragHoverTarget,
+	setInvAccessor,
+	setIsDropHandled,
+} from "./GameState";
+
+export function InventoryPanel(props: {
+	isOpen: boolean;
+	hasChest?: boolean;
+	onClose: () => void;
+}) {
+	onMount(() => {
+		initInventory(); // We call init here temporarily just to test
+
+		const handleKeyDown = (e: KeyboardEvent) => {
+			if (e.key === "Escape" && props.isOpen) {
+				props.onClose();
+			}
+		};
+		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);
+			}
+		}
+		setDraggedItem(null);
+		setDragHoverTarget(null);
+		setIsDropHandled(false);
+	};
+
+	const renderSlot = (
+		itemAccessor: () => Item | null,
+		source: InventorySource,
+		index: number,
+	) => {
+		return (
+			<div
+				style={{
+					width: "48px",
+					height: "48px",
+					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:
+						dragHoverTarget()?.source === source &&
+						dragHoverTarget()?.index === index &&
+						!(
+							draggedItem()?.source === source && draggedItem()?.index === index
+						)
+							? "1px solid rgba(255, 255, 255, 0.8)"
+							: "1px solid rgba(255, 255, 255, 0.1)",
+					"border-radius": "6px",
+					position: "relative",
+					display: "flex",
+					"justify-content": "center",
+					"align-items": "center",
+					cursor: itemAccessor() ? "grab" : "default",
+					"box-shadow":
+						dragHoverTarget()?.source === source &&
+						dragHoverTarget()?.index === index &&
+						!(
+							draggedItem()?.source === source && draggedItem()?.index === index
+						)
+							? "0 0 8px rgba(255,255,255,0.5)"
+							: "inset 0px 2px 4px rgba(0,0,0,0.3)",
+					opacity:
+						draggedItem()?.source === source && draggedItem()?.index === index
+							? 0.3
+							: 1,
+					transition: "all 0.1s ease-in-out",
+				}}
+				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}
+			>
+				<Show when={itemAccessor()}>
+					{(it) => {
+						const item = () => it();
+						return (
+							<>
+								<Show
+									when={item().iconX !== undefined}
+									fallback={
+										<img
+											src={item().icon}
+											style={{
+												"max-width": "32px",
+												"max-height": "32px",
+												"object-fit": "contain",
+												"pointer-events": "none",
+											}}
+										/>
+									}
+								>
+									<div
+										style={{
+											width: "32px",
+											height: "32px",
+											"background-image": `url(${item().icon})`,
+											"background-position": `-${item().iconX! * (32 / item().iconW!)}px -${item().iconY! * (32 / item().iconH!)}px`,
+											"background-size": `${item().atlasW! * (32 / item().iconW!)}px ${item().atlasH! * (32 / item().iconH!)}px`,
+											"pointer-events": "none",
+											"image-rendering": "pixelated",
+										}}
+									></div>
+								</Show>
+								<div
+									style={{
+										position: "absolute",
+										bottom: "2px",
+										right: "4px",
+										"font-size": "11px",
+										color: "white",
+										"font-weight": "bold",
+										"text-shadow": "1px 1px 0px black",
+									}}
+								>
+									{item().quantity > 1 ? item().quantity : ""}
+								</div>
+							</>
+						);
+					}}
+				</Show>
+			</div>
+		);
+	};
+
+	return (
+		<Show when={props.isOpen}>
+			<div
+				style={{
+					position: "absolute",
+					top: 0,
+					left: 0,
+					width: "100%",
+					height: "100%",
+					background: "rgba(0, 0, 0, 0.6)",
+					display: "flex",
+					"justify-content": "center",
+					"align-items": "center",
+					"z-index": 5000,
+					"backdrop-filter": "blur(4px)",
+					"font-family": "Arial, Helvetica, sans-serif",
+					"user-select": "none",
+				}}
+			>
+				<div
+					style={{
+						display: "flex",
+						gap: "40px",
+						background: "rgba(35, 35, 45, 0.9)",
+						padding: "30px",
+						"border-radius": "12px",
+						border: "1px solid rgba(255,255,255,0.15)",
+						"box-shadow": "0 10px 30px rgba(0,0,0,0.5)",
+						position: "relative",
+					}}
+				>
+					<button
+						onClick={props.onClose}
+						style={{
+							position: "absolute",
+							top: "10px",
+							right: "10px",
+							background: "transparent",
+							border: "none",
+							color: "#AAA",
+							cursor: "pointer",
+							"font-size": "16px",
+							"font-weight": "bold",
+						}}
+					>
+						X
+					</button>
+
+					{/* Chest Inventory */}
+					<Show when={props.hasChest !== false}>
+						<div
+							style={{
+								display: "flex",
+								"flex-direction": "column",
+								gap: "10px",
+							}}
+						>
+							<h2
+								style={{
+									color: "white",
+									margin: 0,
+									"font-size": "18px",
+									"text-align": "center",
+									"text-shadow": "0 2px 2px rgba(0,0,0,0.5)",
+								}}
+							>
+								Chest
+							</h2>
+							<div
+								style={{
+									display: "grid",
+									"grid-template-columns": "repeat(4, 1fr)",
+									gap: "8px",
+									background: "rgba(0,0,0,0.2)",
+									padding: "15px",
+									"border-radius": "8px",
+								}}
+							>
+								<Index each={chestInv()}>
+									{(item, i) => renderSlot(item, "chest", i)}
+								</Index>
+							</div>
+						</div>
+					</Show>
+
+					{/* Player Inventory */}
+					<div
+						style={{ display: "flex", "flex-direction": "column", gap: "10px" }}
+					>
+						<h2
+							style={{
+								color: "white",
+								margin: 0,
+								"font-size": "18px",
+								"text-align": "center",
+								"text-shadow": "0 2px 2px rgba(0,0,0,0.5)",
+							}}
+						>
+							Inventory
+						</h2>
+						<div
+							style={{
+								display: "grid",
+								"grid-template-columns": "repeat(4, 1fr)",
+								gap: "8px",
+								background: "rgba(0,0,0,0.2)",
+								padding: "15px",
+								"border-radius": "8px",
+							}}
+						>
+							<Index each={playerInv()}>
+								{(item, i) => renderSlot(item, "player", i)}
+							</Index>
+						</div>
+					</div>
+				</div>
+			</div>
+		</Show>
+	);
+}