aether-engine 1.0.0

package/src/ui/EntityExplorer.tsx

@@ -0,0 +1,420 @@
+import {
+	createMemo,
+	createSignal,
+	For,
+	onCleanup,
+	onMount,
+	Show,
+} from "solid-js";
+import type { ComponentClass, Entity } from "../ecs/World";
+import { type AetherEngine, Transform } from "../index";
+import { IconChevronDown, IconChevronRight } from "./Icons";
+
+const DataRow = (props: { label: string; value: any }) => {
+	const formatValue = (v: any, depth = 0): string => {
+		if (depth > 2) {
+			if (typeof v === "object" && v !== null)
+				return v.constructor?.name || "{...}";
+			return String(v);
+		}
+		if (typeof v === "number") {
+			return Number.isInteger(v) ? v.toString() : v.toFixed(3);
+		}
+		if (typeof v === "boolean") return v ? "true" : "false";
+		if (typeof v === "string") return `"${v}"`;
+
+		if (v instanceof Float32Array || Array.isArray(v)) {
+			const arr = Array.from(v);
+			const limit = 16;
+			const peek = arr
+				.slice(0, limit)
+				.map((n: any) => formatValue(n, depth + 1))
+				.join(", ");
+			if (arr.length > limit) return `[${peek}, ... (${arr.length} items)]`;
+			return `[${peek}]`;
+		}
+
+		if (v === null) return "null";
+		if (v === undefined) return "undefined";
+
+		if (v instanceof Set) {
+			const arr = Array.from(v);
+			const limit = 8;
+			const peek = arr
+				.slice(0, limit)
+				.map((n) => formatValue(n, depth + 1))
+				.join(", ");
+			return `Set(${v.size}) { ${peek}${v.size > limit ? ", ..." : ""} }`;
+		}
+
+		if (v instanceof Map) {
+			const arr = Array.from(v.entries());
+			const limit = 8;
+			const peek = arr
+				.slice(0, limit)
+				.map(([k, val]) => `${k} => ${formatValue(val, depth + 1)}`)
+				.join(", ");
+			return `Map(${v.size}) { ${peek}${v.size > limit ? ", ..." : ""} }`;
+		}
+
+		if (typeof v === "object") {
+			if (v.constructor && v.constructor.name !== "Object") {
+				return `${v.constructor.name} {...}`;
+			}
+			try {
+				const keys = Object.keys(v);
+				const limit = 8;
+				const peek = keys
+					.slice(0, limit)
+					.map((k) => `${k}: ${formatValue(v[k], depth + 1)}`)
+					.join(", ");
+				return `{ ${peek}${keys.length > limit ? ", ..." : ""} }`;
+			} catch (_e) {
+				return "{...}";
+			}
+		}
+		if (typeof v === "function") return `ƒ ${v.name || "anonymous"}()`;
+		return String(v);
+	};
+
+	return (
+		<div
+			style={{
+				display: "flex",
+				"justify-content": "space-between",
+				"font-family": "monospace",
+				"font-size": "11px",
+				padding: "3px 0",
+				"border-bottom": "1px solid #2d2d2d",
+			}}
+		>
+			<div style={{ color: "#9cdcfe" }}>{props.label}</div>
+			<div
+				style={{
+					color: "#ce9178",
+					"text-align": "right",
+					"white-space": "nowrap",
+					overflow: "hidden",
+					"text-overflow": "ellipsis",
+					"max-width": "80%",
+				}}
+				title={formatValue(props.value)}
+			>
+				{formatValue(props.value)}
+			</div>
+		</div>
+	);
+};
+
+const ComponentInspector = (props: {
+	entity: Entity;
+	engine: AetherEngine;
+	cls: ComponentClass;
+	tick: number;
+}) => {
+	const [expanded, setExpanded] = createSignal(false);
+
+	const entries = createMemo(() => {
+		props.tick; // Force dependency
+		const comp = props.engine.world.getComponent(props.entity, props.cls);
+		if (!comp) return [];
+		return Object.entries(comp).filter(
+			([key]) => key !== "parent" && key !== "children",
+		);
+	});
+
+	return (
+		<div
+			style={{
+				"margin-left": "22px",
+				"margin-top": "4px",
+				"margin-bottom": "4px",
+				background: "#1e1e1e",
+				border: "1px solid #333",
+				"border-radius": "3px",
+			}}
+		>
+			<div
+				style={{
+					padding: "4px 6px",
+					cursor: "pointer",
+					display: "flex",
+					"align-items": "center",
+					background: "#252526",
+				}}
+				onClick={() => setExpanded(!expanded())}
+			>
+				<div
+					style={{
+						"margin-right": "6px",
+						display: "flex",
+						"align-items": "center",
+					}}
+				>
+					{expanded() ? (
+						<IconChevronDown size={12} />
+					) : (
+						<IconChevronRight size={12} />
+					)}
+				</div>
+				<span
+					style={{
+						"font-weight": "bold",
+						color: "#4ec9b0",
+						"font-size": "12px",
+					}}
+				>
+					{props.cls.name}
+				</span>
+			</div>
+			<Show when={expanded()}>
+				<div style={{ padding: "4px 8px" }}>
+					<For each={entries()}>
+						{([k, v]) => <DataRow label={k} value={v} />}
+					</For>
+				</div>
+			</Show>
+		</div>
+	);
+};
+
+const EntityNode = (props: {
+	entity: Entity;
+	depth: number;
+	engine: AetherEngine;
+	tMap: () => Map<Transform, Entity>;
+	tick: number;
+}) => {
+	const [expanded, setExpanded] = createSignal(false);
+
+	const componentClasses = createMemo(() => {
+		props.tick;
+		const map = props.engine.world.getComponentsForEntity(props.entity);
+		if (!map) return [];
+		return Array.from(map.keys());
+	});
+
+	const childEntities = createMemo(() => {
+		props.tick;
+		const t = props.engine.world.getComponent(props.entity, Transform);
+		if (!t) return [];
+		return Array.from(t.children)
+			.map((childT) => props.tMap().get(childT))
+			.filter((id) => id !== undefined) as Entity[];
+	});
+
+	const hasChildren = createMemo(() => childEntities().length > 0);
+
+	return (
+		<div style={{ "margin-left": `${props.depth * 14}px` }}>
+			<div
+				style={{
+					display: "flex",
+					"align-items": "center",
+					padding: "5px",
+					cursor: "pointer",
+					"border-radius": "3px",
+					"user-select": "none",
+				}}
+				onMouseOver={(e) => (e.currentTarget.style.background = "#2a2d2e")}
+				onMouseOut={(e) => (e.currentTarget.style.background = "transparent")}
+				onClick={() => setExpanded(!expanded())}
+			>
+				<div
+					style={{
+						display: "flex",
+						"align-items": "center",
+						width: "16px",
+						"justify-content": "center",
+					}}
+				>
+					<Show when={hasChildren()}>
+						{expanded() ? (
+							<IconChevronDown size={14} />
+						) : (
+							<IconChevronRight size={14} />
+						)}
+					</Show>
+				</div>
+				<div
+					style={{
+						"margin-left": "4px",
+						color: "#d4d4d4",
+						"font-weight": "bold",
+						"font-size": "13px",
+					}}
+				>
+					Entity #{props.entity}
+				</div>
+				<div
+					style={{
+						"margin-left": "8px",
+						color: "#888",
+						"font-size": "11px",
+						"pointer-events": "none",
+					}}
+				>
+					{componentClasses().length} components
+				</div>
+			</div>
+
+			<Show when={expanded()}>
+				<div
+					style={{
+						"margin-bottom": "8px",
+						"padding-bottom": "4px",
+						"border-bottom": "1px dashed #333",
+					}}
+				>
+					<For each={componentClasses()}>
+						{(cls) => (
+							<ComponentInspector
+								entity={props.entity}
+								engine={props.engine}
+								cls={cls}
+								tick={props.tick}
+							/>
+						)}
+					</For>
+
+					<div style={{ "margin-top": "6px" }}>
+						<For each={childEntities()}>
+							{(childE) => (
+								<EntityNode
+									entity={childE}
+									depth={props.depth + 1}
+									engine={props.engine}
+									tMap={props.tMap}
+									tick={props.tick}
+								/>
+							)}
+						</For>
+					</div>
+				</div>
+			</Show>
+		</div>
+	);
+};
+
+export const EntityExplorer = (props: { engine: AetherEngine }) => {
+	const [tick, setTick] = createSignal(0);
+	const [roots, setRoots] = createSignal<Entity[]>([]);
+	const [tMap, setTMap] = createSignal<Map<Transform, Entity>>(new Map());
+	const [search, setSearch] = createSignal("");
+
+	onMount(() => {
+		let timer: number;
+		const loop = () => {
+			const all = props.engine.world.getAllEntities();
+			const newTMap = new Map<Transform, Entity>();
+			const newRoots: Entity[] = [];
+
+			for (const e of all) {
+				const t = props.engine.world.getComponent(e, Transform);
+				if (t) {
+					newTMap.set(t, e);
+				}
+			}
+
+			for (const e of all) {
+				const t = props.engine.world.getComponent(e, Transform);
+				if (!t || t.parent === null) {
+					newRoots.push(e);
+				}
+			}
+
+			setTMap(newTMap);
+			setRoots(newRoots);
+			setTick((t) => t + 1);
+
+			timer = window.setTimeout(loop, 250);
+		};
+		loop();
+		onCleanup(() => window.clearTimeout(timer));
+	});
+
+	const themeBorder = "#222222";
+
+	const displayRoots = createMemo(() => {
+		const s = search().toLowerCase();
+		if (!s) return roots();
+
+		// Flat search bypasses hierarchy logic if search is active
+		const all = props.engine.world.getAllEntities();
+		return all.filter((e) => {
+			if (e.toString().includes(s)) return true;
+			const map = props.engine.world.getComponentsForEntity(e);
+			if (!map) return false;
+			for (const cls of map.keys()) {
+				if (cls.name.toLowerCase().includes(s)) return true;
+			}
+			return false;
+		});
+	});
+
+	return (
+		<div
+			style={{
+				display: "flex",
+				"flex-direction": "column",
+				height: "100%",
+				background: "#1e1e1e",
+				"border-radius": "4px",
+				border: `1px solid ${themeBorder}`,
+				overflow: "hidden",
+			}}
+		>
+			<div
+				style={{
+					padding: "8px",
+					background: "#252526",
+					"border-bottom": `1px solid ${themeBorder}`,
+				}}
+			>
+				<input
+					type="text"
+					placeholder="Filter by ID or Component (e.g., 'SpriteRenderer')"
+					value={search()}
+					onInput={(e) => setSearch(e.currentTarget.value)}
+					onKeyDown={(e) => e.stopPropagation()}
+					onKeyUp={(e) => e.stopPropagation()}
+					style={{
+						width: "100%",
+						padding: "6px 8px",
+						background: "#3c3c3c",
+						border: "1px solid transparent",
+						color: "#cccccc",
+						"border-radius": "3px",
+						outline: "none",
+						"font-size": "12px",
+						"box-sizing": "border-box",
+					}}
+					onFocus={(e) => (e.currentTarget.style.border = "1px solid #007fd4")}
+					onBlur={(e) =>
+						(e.currentTarget.style.border = "1px solid transparent")
+					}
+				/>
+			</div>
+			<div
+				style={{
+					flex: 1,
+					"overflow-y": "auto",
+					padding: "8px",
+					background: "#1e1e1e",
+				}}
+			>
+				<For each={displayRoots()}>
+					{(entity) => (
+						<EntityNode
+							entity={entity}
+							depth={0}
+							engine={props.engine}
+							tMap={tMap}
+							tick={tick()}
+						/>
+					)}
+				</For>
+			</div>
+		</div>
+	);
+};

package/src/ui/GameState.ts

@@ -0,0 +1,286 @@
+import { createSignal } from "solid-js";
+
+export interface Item {
+	id: string;
+	name: string;
+	icon: string;
+	iconX?: number; // sprite offset X in px
+	iconY?: number; // sprite offset Y in px
+	iconW?: number; // sprite width locally
+	iconH?: number; // sprite height locally
+	atlasW?: number; // full atlas width
+	atlasH?: number; // full atlas height
+	quantity: number;
+}
+
+export type InventorySource = "player" | "chest" | "hotbar";
+
+export const [playerInv, setPlayerInv] = createSignal<(Item | null)[]>(
+	Array(16).fill(null),
+);
+export const [chestInv, setChestInv] = createSignal<(Item | null)[]>(
+	Array(16).fill(null),
+);
+export const [hotbarSlots, setHotbarSlots] = createSignal<(Item | null)[]>(
+	Array(5).fill(null),
+);
+
+export const [selectedHotbarIndex, setSelectedHotbarIndex] =
+	createSignal<number>(0);
+export const [draggedItem, setDraggedItem] = createSignal<{
+	source: InventorySource;
+	index: number;
+} | null>(null);
+export const [dragHoverTarget, setDragHoverTarget] = createSignal<{
+	source: InventorySource;
+	index: number;
+} | null>(null);
+export const [isDropHandled, setIsDropHandled] = createSignal<boolean>(false);
+
+export const getInvAccessor = (source: InventorySource) => {
+	if (source === "player") return playerInv;
+	if (source === "chest") return chestInv;
+	return hotbarSlots;
+};
+
+export const setInvAccessor = (
+	source: InventorySource,
+	newInv: (Item | null)[],
+) => {
+	if (source === "player") setPlayerInv(newInv);
+	else if (source === "chest") setChestInv(newInv);
+	else setHotbarSlots(newInv);
+};
+
+export const handleDrop = (
+	targetSource: InventorySource,
+	targetIndex: number,
+) => {
+	setIsDropHandled(true);
+	setDragHoverTarget(null);
+	const dragged = draggedItem();
+	if (!dragged) return;
+
+	if (dragged.source === targetSource && dragged.index === targetIndex) {
+		setDraggedItem(null);
+		return;
+	}
+
+	const sourceInv = getInvAccessor(dragged.source)();
+	const destInv = getInvAccessor(targetSource)();
+
+	const sItem = sourceInv[dragged.index];
+	const dItem = destInv[targetIndex];
+
+	const newSource = [...sourceInv];
+	const newDest = dragged.source === targetSource ? newSource : [...destInv];
+
+	// Stack
+	if (sItem && dItem && sItem.name === dItem.name) {
+		newDest[targetIndex] = {
+			...dItem,
+			quantity: dItem.quantity + sItem.quantity,
+		};
+		newSource[dragged.index] = null;
+	} else {
+		// Swap
+		newDest[targetIndex] = sItem;
+		newSource[dragged.index] = dItem;
+	}
+
+	setInvAccessor(targetSource, newDest);
+	if (dragged.source !== targetSource) {
+		setInvAccessor(dragged.source, newSource);
+	}
+	setDraggedItem(null);
+
+	// Notify ECS of equipment change if hotbar changed
+	notifyEquipmentChange();
+};
+
+export const setHotbarIndex = (index: number) => {
+	setSelectedHotbarIndex(index);
+	notifyEquipmentChange();
+};
+
+export const notifyEquipmentChange = () => {
+	const currentHotbarItem = hotbarSlots()[selectedHotbarIndex()];
+	window.dispatchEvent(
+		new CustomEvent("EquippedItemChanged", {
+			detail: { item: currentHotbarItem },
+		}),
+	);
+};
+
+export const initInventory = () => {
+	const pInv = Array(16).fill(null);
+	pInv[0] = {
+		id: "1",
+		name: "Wood",
+		icon: "/public/assets/sprites/Outdoor_Decoration/Oak_Tree.png",
+		quantity: 5,
+	};
+
+	// Atlas seeds 16x16, the atlas is 112x192
+	// Carrot seed bag: Col 4, Row 0 = X:64, Y:0
+	pInv[1] = {
+		id: "carrot_seed",
+		name: "Carrot Seed",
+		icon: "/public/assets/sprites/Outdoor_Decoration/Outdoor_Decor_Free.png",
+		iconX: 64,
+		iconY: 0,
+		iconW: 16,
+		iconH: 16,
+		atlasW: 112,
+		atlasH: 192,
+		quantity: 10,
+	};
+
+	// Wheat seed bag: Col 6, Row 0 = X:96, Y:0
+	pInv[2] = {
+		id: "wheat_seed",
+		name: "Wheat Seed",
+		icon: "/public/assets/sprites/Outdoor_Decoration/Outdoor_Decor_Free.png",
+		iconX: 96,
+		iconY: 0,
+		iconW: 16,
+		iconH: 16,
+		atlasW: 112,
+		atlasH: 192,
+		quantity: 15,
+	};
+	setPlayerInv(pInv);
+
+	const cInv = Array(16).fill(null);
+	cInv[0] = {
+		id: "3",
+		name: "Wood",
+		icon: "/public/assets/sprites/Outdoor_Decoration/Oak_Tree.png",
+		quantity: 10,
+	};
+	cInv[3] = {
+		id: "4",
+		name: "Chest",
+		icon: "/public/assets/sprites/Outdoor_Decoration/Chest.png",
+		quantity: 1,
+	};
+	setChestInv(cInv);
+
+	const hSlots = Array(5).fill(null);
+	setHotbarSlots(hSlots);
+};
+
+// Global Listener for ECS integration
+if (typeof window !== "undefined") {
+	const addItemToInv = (itemObj: Item) => {
+		const currentInv = [...playerInv()];
+		let found = false;
+
+		// Stack existing
+		for (let i = 0; i < currentInv.length; i++) {
+			if (currentInv[i] && currentInv[i]?.id === itemObj.id) {
+				currentInv[i] = {
+					...currentInv[i]!,
+					quantity: currentInv[i]?.quantity + itemObj.quantity,
+				};
+				found = true;
+				break;
+			}
+		}
+
+		// Find empty slot
+		if (!found) {
+			for (let i = 0; i < currentInv.length; i++) {
+				if (!currentInv[i]) {
+					currentInv[i] = { ...itemObj };
+					break;
+				}
+			}
+		}
+		setPlayerInv(currentInv);
+	};
+
+	window.addEventListener("HarvestCrop", ((e: CustomEvent) => {
+		const type = e.detail?.type;
+		if (!type) return;
+
+		const itemObj: Item =
+			type === "carrot"
+				? {
+						id: "carrot_item",
+						name: "Carrot",
+						icon: "/public/assets/sprites/Outdoor_Decoration/Outdoor_Decor_Free.png",
+						iconX: 64,
+						iconY: 48,
+						iconW: 16,
+						iconH: 16,
+						atlasW: 112,
+						atlasH: 192,
+						quantity: 1,
+					}
+				: {
+						id: "wheat_item",
+						name: "Wheat",
+						icon: "/public/assets/sprites/Outdoor_Decoration/Outdoor_Decor_Free.png",
+						iconX: 96,
+						iconY: 48,
+						iconW: 16,
+						iconH: 16,
+						atlasW: 112,
+						atlasH: 192,
+						quantity: 1,
+					};
+
+		addItemToInv(itemObj);
+	}) as EventListener);
+
+	window.addEventListener("PickUpItem", ((e: CustomEvent) => {
+		const itemObj = e.detail?.item;
+		if (itemObj) {
+			addItemToInv(itemObj);
+		}
+	}) as EventListener);
+
+	window.addEventListener("DeductItem", ((e: CustomEvent) => {
+		const typeId = e.detail?.id;
+		if (!typeId) return;
+
+		// Deduct from hotbar first, then player inv
+		let deducted = false;
+		const currentHotbar = [...hotbarSlots()];
+		for (let i = 0; i < currentHotbar.length; i++) {
+			if (currentHotbar[i] && currentHotbar[i]?.id === typeId) {
+				if (currentHotbar[i]?.quantity > 1) {
+					currentHotbar[i] = {
+						...currentHotbar[i]!,
+						quantity: currentHotbar[i]?.quantity - 1,
+					};
+				} else {
+					currentHotbar[i] = null;
+				}
+				setHotbarSlots(currentHotbar);
+				deducted = true;
+				notifyEquipmentChange();
+				break;
+			}
+		}
+
+		if (!deducted) {
+			const currentInv = [...playerInv()];
+			for (let i = 0; i < currentInv.length; i++) {
+				if (currentInv[i] && currentInv[i]?.id === typeId) {
+					if (currentInv[i]?.quantity > 1) {
+						currentInv[i] = {
+							...currentInv[i]!,
+							quantity: currentInv[i]?.quantity - 1,
+						};
+					} else {
+						currentInv[i] = null;
+					}
+					setPlayerInv(currentInv);
+					break;
+				}
+			}
+		}
+	}) as EventListener);
+}