aether-engine 1.0.0

package/src/ui/BottomPanel.tsx

@@ -0,0 +1,443 @@
+import { createSignal, onCleanup, onMount, Show } from "solid-js";
+import { type AetherEngine, SpriteRenderer, Transform } from "../index";
+import { AnimationEditor } from "./AnimationEditor";
+import { EntityExplorer } from "./EntityExplorer";
+import { IconAetherEngine, IconChevronDown, IconChevronUp } from "./Icons";
+import { SpriteEditor } from "./SpriteEditor";
+import { SpriteSheetManager } from "./SpriteSheetManager";
+
+type Tab = "scene" | "sprite" | "animation" | "atlas";
+
+export function BottomPanel(props: { engine: AetherEngine }) {
+	const [activeTab, setActiveTab] = createSignal<Tab>("scene");
+	const [fps, setFps] = createSignal(0);
+	const [entities, setEntities] = createSignal(0);
+
+	const [height, setHeight] = createSignal(350);
+	const [collapsed, setCollapsed] = createSignal(true);
+	const [isDragging, setIsDragging] = createSignal(false);
+
+	onMount(() => {
+		const handleKeyDown = (e: KeyboardEvent) => {
+			// Standard VS Code / Web IDE mapping for bottom panel toggles.
+			// Note: macOS intercepts Cmd + ` natively for Window Switching, so we supply Cmd+J (VS Code style) natively!
+			if (
+				(e.code === "KeyJ" || e.code === "Backquote") &&
+				(e.ctrlKey || e.metaKey)
+			) {
+				e.preventDefault();
+				setCollapsed((c) => !c);
+			}
+		};
+		window.addEventListener("keydown", handleKeyDown);
+		onCleanup(() => window.removeEventListener("keydown", handleKeyDown));
+
+		let frames = 0;
+		let lastTime = performance.now();
+		const loop = () => {
+			frames++;
+			const now = performance.now();
+			if (now - lastTime >= 1000) {
+				setFps(frames);
+				frames = 0;
+				lastTime = now;
+			}
+			setEntities(props.engine.world.query(Transform).length);
+			requestAnimationFrame(loop);
+		};
+		requestAnimationFrame(loop);
+	});
+
+	const addSprite = () => {
+		const e = props.engine.world.createEntity();
+		props.engine.world.addComponent(e, Transform);
+		const t = props.engine.world.getComponent(e, Transform)!;
+		t.position[0] = Math.random() * 4 - 2;
+		t.position[1] = Math.random() * 4 - 2;
+		t.position[2] = -1;
+
+		props.engine.world.addComponent(
+			e,
+			SpriteRenderer,
+			"https://picsum.photos/400",
+		);
+	};
+
+	const startResize = (e: PointerEvent) => {
+		if (collapsed()) return;
+		setIsDragging(true);
+		e.preventDefault();
+		const handleMove = (eMove: PointerEvent) => {
+			const newHeight = window.innerHeight - eMove.clientY;
+			if (newHeight >= 100 && newHeight <= window.innerHeight - 50) {
+				setHeight(newHeight);
+			}
+		};
+		const handleUp = () => {
+			setIsDragging(false);
+			window.removeEventListener("pointermove", handleMove);
+			window.removeEventListener("pointerup", handleUp);
+		};
+		window.addEventListener("pointermove", handleMove);
+		window.addEventListener("pointerup", handleUp);
+	};
+
+	const themeDark = "#383838";
+	const themeHeader = "#2D2D2D";
+	const themeBorder = "#222222";
+	const themeActiveTab = "#3C3C3C";
+	const themeText = "#B4B4B4";
+	const themeActiveText = "#EEEEEE";
+
+	return (
+		<div
+			style={{
+				position: "fixed",
+				bottom: 0,
+				left: 0,
+				right: 0,
+				height: collapsed() ? "auto" : `${height()}px`,
+				background: themeDark,
+				"border-top": `1px solid ${themeBorder}`,
+				color: themeActiveText,
+				"font-family": "Arial, Helvetica, sans-serif",
+				"z-index": 9999,
+				display: "flex",
+				"flex-direction": "column",
+				"box-shadow": "0 -5px 15px rgba(0,0,0,0.3)",
+				"user-select": "none",
+				"-webkit-user-select": "none",
+			}}
+		>
+			{/* Resizer Handle */}
+			<div
+				onPointerDown={startResize}
+				style={{
+					position: "absolute",
+					top: "-3px",
+					left: 0,
+					right: 0,
+					height: "6px",
+					cursor: collapsed() ? "default" : "row-resize",
+					"z-index": 10000,
+					background: isDragging() ? "#3A72B0" : "transparent",
+				}}
+			/>
+
+			{/* Tabs Header */}
+			<div
+				style={{
+					display: "flex",
+					background: themeHeader,
+					"border-bottom": `1px solid ${themeBorder}`,
+					height: "28px",
+					"align-items": "flex-end",
+					"padding-left": "5px",
+				}}
+			>
+				<button
+					title="Toggle DevTools Panel (Cmd/Ctrl + J  or  Ctrl + `)"
+					onClick={() => setCollapsed(!collapsed())}
+					style={{
+						padding: "3px 5px",
+						margin: "0 3px 2px 0",
+						background: "transparent",
+						color: themeText,
+						border: "none",
+						cursor: "pointer",
+						display: "flex",
+						"align-items": "center",
+						"justify-content": "center",
+						"border-radius": "3px",
+					}}
+					onMouseOver={(e) => (e.currentTarget.style.background = "#444")}
+					onMouseOut={(e) => (e.currentTarget.style.background = "transparent")}
+				>
+					<div
+						style={{
+							"font-weight": "bold",
+							"font-size": "14px",
+							"line-height": "14px",
+						}}
+					>
+						{collapsed() ? (
+							<IconChevronUp size={14} />
+						) : (
+							<IconChevronDown size={14} />
+						)}
+					</div>
+				</button>
+
+				<div
+					style={{
+						"margin-right": "15px",
+						"margin-left": "5px",
+						"margin-top": "2px",
+						color: themeActiveText,
+						"font-size": "13px",
+						display: "flex",
+						"align-items": "center",
+						"user-select": "none",
+						height: "100%",
+					}}
+				>
+					<span
+						style={{
+							"font-weight": "bold",
+							"margin-right": "5px",
+							"min-width": "18px",
+							"text-align": "right",
+						}}
+					>
+						{fps()}
+					</span>{" "}
+					<span style={{ color: themeText }}>FPS</span>
+				</div>
+
+				<button
+					onClick={() => {
+						setActiveTab("scene");
+						setCollapsed(false);
+					}}
+					style={{
+						padding: "6px 15px",
+						margin: "0 1px",
+						background:
+							activeTab() === "scene" && !collapsed()
+								? themeActiveTab
+								: "transparent",
+						color:
+							activeTab() === "scene" && !collapsed()
+								? themeActiveText
+								: themeText,
+						border: "none",
+						cursor: "pointer",
+						"font-size": "12px",
+						"border-top":
+							activeTab() === "scene" && !collapsed()
+								? "2px solid #3A72B0"
+								: "2px solid transparent",
+						"border-radius": "0",
+					}}
+				>
+					Scene
+				</button>
+				<button
+					onClick={() => {
+						setActiveTab("sprite");
+						setCollapsed(false);
+					}}
+					style={{
+						padding: "6px 15px",
+						margin: "0 1px",
+						background:
+							activeTab() === "sprite" && !collapsed()
+								? themeActiveTab
+								: "transparent",
+						color:
+							activeTab() === "sprite" && !collapsed()
+								? themeActiveText
+								: themeText,
+						border: "none",
+						cursor: "pointer",
+						"font-size": "12px",
+						"border-top":
+							activeTab() === "sprite" && !collapsed()
+								? "2px solid #3A72B0"
+								: "2px solid transparent",
+						"border-radius": "0",
+					}}
+				>
+					Sprite Editor
+				</button>
+				<button
+					onClick={() => {
+						setActiveTab("animation");
+						setCollapsed(false);
+					}}
+					style={{
+						padding: "6px 15px",
+						margin: "0 1px",
+						background:
+							activeTab() === "animation" && !collapsed()
+								? themeActiveTab
+								: "transparent",
+						color:
+							activeTab() === "animation" && !collapsed()
+								? themeActiveText
+								: themeText,
+						border: "none",
+						cursor: "pointer",
+						"font-size": "12px",
+						"border-top":
+							activeTab() === "animation" && !collapsed()
+								? "2px solid #3A72B0"
+								: "2px solid transparent",
+						"border-radius": "0",
+					}}
+				>
+					Animation
+				</button>
+				<button
+					onClick={() => {
+						setActiveTab("atlas");
+						setCollapsed(false);
+					}}
+					style={{
+						padding: "6px 15px",
+						margin: "0 1px",
+						background:
+							activeTab() === "atlas" && !collapsed()
+								? themeActiveTab
+								: "transparent",
+						color:
+							activeTab() === "atlas" && !collapsed()
+								? themeActiveText
+								: themeText,
+						border: "none",
+						cursor: "pointer",
+						"font-size": "12px",
+						"border-top":
+							activeTab() === "atlas" && !collapsed()
+								? "2px solid #3A72B0"
+								: "2px solid transparent",
+						"border-radius": "0",
+					}}
+				>
+					SpriteSheet
+				</button>
+
+				{/* Spacer */}
+				<div style={{ flex: 1 }} />
+
+				{/* Recessed Brand Icon */}
+				<div
+					style={{
+						"margin-right": "15px",
+						"margin-bottom": "4px",
+						display: "flex",
+						"align-items": "center",
+						"user-select": "none",
+						opacity: 0.8,
+						"pointer-events": "none",
+					}}
+				>
+					<div
+						style={{
+							"font-weight": "bold",
+							"font-size": "13px",
+							color: "#7a7a7a",
+							"text-shadow": "0 1px 0 rgba(0, 0, 0, 0.12)",
+							display: "flex",
+							"align-items": "center",
+							gap: "6px",
+							"letter-spacing": "1.5px",
+							"font-family": "monospace",
+						}}
+					>
+						AETHER
+						<div
+							style={{
+								color: "#7a7a7a",
+								filter: "drop-shadow(0px 1px 0px rgba(0, 0, 0, 0.12))",
+								display: "flex",
+							}}
+						>
+							<IconAetherEngine size={18} />
+						</div>
+					</div>
+				</div>
+			</div>
+
+			{/* Body Area */}
+			<Show when={!collapsed()}>
+				<div
+					style={{
+						flex: 1,
+						padding: "5px",
+						overflow: "hidden",
+						position: "relative",
+					}}
+				>
+					<Show when={activeTab() === "scene"}>
+						<div
+							style={{
+								height: "100%",
+								"font-size": "13px",
+								padding: "10px",
+								display: "flex",
+								"flex-direction": "column",
+								"box-sizing": "border-box",
+							}}
+						>
+							<div
+								style={{
+									display: "flex",
+									"justify-content": "space-between",
+									"align-items": "center",
+									"margin-bottom": "10px",
+									"flex-shrink": 0,
+								}}
+							>
+								<div
+									style={{
+										"font-size": "16px",
+										"font-weight": "bold",
+										color: themeActiveText,
+									}}
+								>
+									Entity Explorer{" "}
+									<span style={{ color: "#888", "font-size": "13px" }}>
+										({entities()} Active)
+									</span>
+								</div>
+								<button
+									onClick={addSprite}
+									style={{
+										background: "#3A72B0",
+										color: themeActiveText,
+										padding: "4px 12px",
+										border: `none`,
+										"border-radius": "3px",
+										cursor: "pointer",
+										"font-size": "12px",
+									}}
+									onMouseOver={(e) =>
+										(e.currentTarget.style.background = "#4682c0")
+									}
+									onMouseOut={(e) =>
+										(e.currentTarget.style.background = "#3A72B0")
+									}
+								>
+									+ Add 2D Physics Sprite
+								</button>
+							</div>
+
+							<div style={{ flex: 1, "min-height": 0 }}>
+								<EntityExplorer engine={props.engine} />
+							</div>
+						</div>
+					</Show>
+
+					<Show when={activeTab() === "sprite"}>
+						<div style={{ height: "100%", width: "100%" }}>
+							<SpriteEditor engine={props.engine} embedded={true} />
+						</div>
+					</Show>
+
+					<Show when={activeTab() === "animation"}>
+						<div style={{ height: "100%", width: "100%" }}>
+							<AnimationEditor engine={props.engine} embedded={true} />
+						</div>
+					</Show>
+
+					<Show when={activeTab() === "atlas"}>
+						<div style={{ height: "100%", width: "100%" }}>
+							<SpriteSheetManager engine={props.engine} />
+						</div>
+					</Show>
+				</div>
+			</Show>
+		</div>
+	);
+}