aether-engine 1.0.0

package/src/ui/AnimationEditor.tsx

@@ -0,0 +1,639 @@
+import { createSignal, For, onCleanup, onMount, Show } from "solid-js";
+import { type AetherEngine, SpriteAnimator, SpriteRenderer } from "../index";
+import {
+	IconPause,
+	IconPlay,
+	IconPlus,
+	IconSave,
+	IconStepForward,
+} from "./Icons";
+
+export function AnimationEditor(props: {
+	engine: AetherEngine;
+	embedded?: boolean;
+}) {
+	const [animators, setAnimators] = createSignal<
+		{ id: number; comp: SpriteAnimator; rend?: SpriteRenderer }[]
+	>([]);
+	const [selectedId, setSelectedId] = createSignal<number>(-1);
+	const [version, setVersion] = createSignal(0);
+	const [fastTick, setFastTick] = createSignal(0);
+	const [saveStatus, setSaveStatus] = createSignal<string>("");
+
+	const [newName, setNewName] = createSignal("jump");
+	const [newFrames, setNewFrames] = createSignal("0,1");
+	const [newFps, setNewFps] = createSignal(12);
+
+	onMount(() => {
+		let frameId: number;
+		let slowInterval: any;
+
+		const tickLoop = () => {
+			setFastTick((t) => t + 1);
+			frameId = requestAnimationFrame(tickLoop);
+		};
+		tickLoop();
+
+		const pollEntities = () => {
+			const entities = props.engine.world.query(SpriteAnimator);
+			const list = entities.map((id) => ({
+				id,
+				comp: props.engine.world.getComponent(id, SpriteAnimator)!,
+				rend: props.engine.world.getComponent(id, SpriteRenderer) as
+					| SpriteRenderer
+					| undefined,
+			}));
+
+			setAnimators((prev) => {
+				if (prev.length !== list.length) return list;
+				for (let i = 0; i < prev.length; i++)
+					if (prev[i].id !== list[i].id) return list;
+				return prev;
+			});
+
+			if (selectedId() === -1 && list.length > 0) setSelectedId(list[0].id);
+		};
+		pollEntities();
+		slowInterval = setInterval(pollEntities, 1000);
+
+		onCleanup(() => {
+			cancelAnimationFrame(frameId);
+			clearInterval(slowInterval);
+		});
+	});
+
+	const getSelected = () => animators().find((a) => a.id === selectedId());
+	const parseFrames = (str: string) =>
+		str
+			.split(",")
+			.map((s) => parseInt(s.trim(), 10))
+			.filter((n) => !Number.isNaN(n));
+
+	return (
+		<div
+			style={
+				props.embedded
+					? {
+							width: "100%",
+							height: "100%",
+							display: "flex",
+							gap: "5px",
+							"pointer-events": "auto",
+							color: "#EEEEEE",
+						}
+					: {
+							position: "fixed",
+							top: "50%",
+							left: "50%",
+							transform: "translate(-50%, -50%)",
+							width: "900px",
+							height: "600px",
+							background: "#383838",
+							padding: "5px",
+							"border-radius": "4px",
+							border: `1px solid #222222`,
+							"box-shadow": "0 10px 30px rgba(0,0,0,0.5)",
+							"font-family": "Arial, sans-serif",
+							"z-index": "9999",
+							display: "flex",
+							color: "#EEEEEE",
+							"pointer-events": "auto",
+						}
+			}
+		>
+			{/* Left Column: Selection & Playback */}
+			<div
+				style={{
+					width: "250px",
+					display: "flex",
+					"flex-direction": "column",
+					gap: "5px",
+				}}
+			>
+				<h3
+					style={{ margin: "5px 0 0 0", "font-size": "14px", color: "#EEEEEE" }}
+				>
+					Animation Timeline
+				</h3>
+				<p style={{ margin: 0, "font-size": "11px", color: "#B4B4B4" }}>
+					Manage sequence tags and active playback loops.
+				</p>
+
+				<label style={{ "font-size": "11px", color: "#B4B4B4" }}>
+					Target Entity:
+				</label>
+				<select
+					value={selectedId()}
+					onChange={(e) => setSelectedId(parseInt(e.currentTarget.value, 10))}
+					style={{
+						width: "100%",
+						padding: "4px",
+						"border-radius": "3px",
+						background: "#282828",
+						color: "#EEEEEE",
+						border: "1px solid #222222",
+						"font-size": "11px",
+					}}
+				>
+					<For each={animators()}>
+						{(a) => <option value={a.id}>Entity #{a.id}</option>}
+					</For>
+				</select>
+
+				<Show
+					when={getSelected()}
+					fallback={
+						<div style={{ "font-size": "11px", color: "#B4B4B4" }}>
+							No SpriteAnimators found in scene.
+						</div>
+					}
+				>
+					{(_selected) => {
+						const current = getSelected()?.comp;
+						return (
+							<div
+								style={{
+									background: "#2D2D2D",
+									padding: "5px",
+									"border-radius": "4px",
+									border: "1px solid #222222",
+									display: "flex",
+									"flex-direction": "column",
+									gap: "5px",
+								}}
+							>
+								<label style={{ "font-size": "11px", color: "#B4B4B4" }}>
+									Active Tag:
+								</label>
+								<select
+									value={version() > -1 ? current.currentAnimation : ""}
+									onChange={(e) => {
+										current.play(e.currentTarget.value);
+										setVersion((v) => v + 1);
+									}}
+									style={{
+										width: "100%",
+										padding: "4px",
+										"border-radius": "3px",
+										background: "#282828",
+										color: "#EEEEEE",
+										border: "1px solid #222222",
+										"font-size": "11px",
+									}}
+								>
+									<For
+										each={
+											version() > -1
+												? Array.from(current.animations.keys())
+												: []
+										}
+									>
+										{(anim) => <option value={anim}>{anim}</option>}
+									</For>
+								</select>
+
+								<div style={{ display: "flex", gap: "6px" }}>
+									<button
+										onClick={() => {
+											current.isPlaying = !current.isPlaying;
+											setVersion((v) => v + 1);
+										}}
+										style={{
+											flex: 1,
+											padding: "5px",
+											"border-radius": "3px",
+											border: "1px solid #222222",
+											background:
+												version() > -1 && current.isPlaying
+													? "#3A72B0"
+													: "#4A4A4A",
+											color: "#EEEEEE",
+											cursor: "pointer",
+											"font-size": "11px",
+											display: "flex",
+											"align-items": "center",
+											"justify-content": "center",
+											gap: "4px",
+										}}
+									>
+										{version() > -1 && current.isPlaying ? (
+											<>
+												<IconPause size={12} /> Pause
+											</>
+										) : (
+											<>
+												<IconPlay size={12} /> Play
+											</>
+										)}
+									</button>
+									<button
+										onClick={() => {
+											current.isPlaying = false;
+											const anim = current.animations.get(
+												current.currentAnimation,
+											);
+											if (anim)
+												current.currentFrameIndex =
+													(current.currentFrameIndex + 1) % anim.frames.length;
+											setVersion((v) => v + 1);
+										}}
+										style={{
+											flex: 1,
+											padding: "5px",
+											"border-radius": "3px",
+											border: "1px solid #222222",
+											background: "#4A4A4A",
+											color: "#EEEEEE",
+											cursor: "pointer",
+											"font-size": "11px",
+											display: "flex",
+											"align-items": "center",
+											"justify-content": "center",
+											gap: "4px",
+										}}
+									>
+										Step <IconStepForward size={12} />
+									</button>
+								</div>
+
+								<div
+									style={{
+										"text-align": "right",
+										"font-size": "10px",
+										color: "#B4B4B4",
+									}}
+								>
+									Frame Index:{" "}
+									<span style={{ color: "#EEEEEE", "font-weight": "bold" }}>
+										{(() => {
+											fastTick();
+											return current.currentFrameIndex;
+										})()}
+									</span>
+								</div>
+							</div>
+						);
+					}}
+				</Show>
+			</div>
+
+			{/* Right Column: Timeline Tags / Sequences */}
+			<Show when={getSelected()}>
+				{(_selected) => {
+					const state = getSelected()!;
+					const current = state.comp;
+					return (
+						<div
+							style={{
+								flex: 1,
+								display: "flex",
+								"flex-direction": "column",
+								gap: "5px",
+								background: "#2D2D2D",
+								padding: "5px",
+								"border-radius": "4px",
+								border: "1px solid #222222",
+							}}
+						>
+							<div
+								style={{
+									display: "flex",
+									"justify-content": "space-between",
+									"align-items": "center",
+								}}
+							>
+								<h4
+									style={{ margin: 0, "font-size": "12px", color: "#EEEEEE" }}
+								>
+									Timeline Tracker
+								</h4>
+
+								<Show when={state.rend?.imageSrc?.includes(".png")}>
+									<div
+										style={{
+											display: "flex",
+											"align-items": "center",
+											gap: "10px",
+										}}
+									>
+										<span
+											style={{
+												"font-size": "10px",
+												color:
+													saveStatus() === "Saved"
+														? "#4CAF50"
+														: saveStatus() === "Error"
+															? "#F44336"
+															: "#888",
+											}}
+										>
+											{saveStatus()}
+										</span>
+										<button
+											onClick={async () => {
+												setSaveStatus("Saving...");
+												const name = state.rend?.imageSrc
+													.replace("/public/assets/sprites/", "")
+													.replace(".png", "");
+												if (!name) return setSaveStatus("Error");
+
+												try {
+													const res = await fetch(
+														`/public/assets/sprites/${name}.json`,
+													);
+													const meta = res.ok ? await res.json() : {};
+													meta.animations = meta.animations || {};
+
+													// Overwrite animations exactly as configured
+													current.animations.forEach((def, key) => {
+														meta.animations[key] = {
+															frames: Array.from(def.frames),
+															fps: def.fps,
+														};
+													});
+
+													// Check for deleted animations
+													Object.keys(meta.animations).forEach((k) => {
+														if (!current.animations.has(k))
+															delete meta.animations[k];
+													});
+
+													const saveResp = await fetch(
+														"/__aether_dev/save-sprite-meta",
+														{
+															method: "POST",
+															headers: { "Content-Type": "application/json" },
+															body: JSON.stringify({ name, metadata: meta }),
+														},
+													);
+													if (!saveResp.ok) throw new Error();
+
+													setSaveStatus("Saved");
+													setTimeout(() => setSaveStatus("Ready"), 2000);
+												} catch (_e) {
+													setSaveStatus("Error");
+												}
+											}}
+											style={{
+												padding: "4px 8px",
+												background: "#3A72B0",
+												color: "#EEEEEE",
+												border: "1px solid #222222",
+												cursor: "pointer",
+												"font-size": "11px",
+												"font-weight": "bold",
+												"border-radius": "3px",
+												display: "flex",
+												"align-items": "center",
+												gap: "4px",
+											}}
+										>
+											<IconSave size={12} /> Save to Disk
+										</button>
+									</div>
+								</Show>
+							</div>
+
+							<div
+								style={{
+									display: "flex",
+									gap: "5px",
+									"font-size": "11px",
+									color: "#B4B4B4",
+									"border-bottom": "1px solid #222222",
+									"padding-bottom": "5px",
+								}}
+							>
+								<div style={{ width: "100px" }}>Tag Name</div>
+								<div style={{ flex: 1 }}>Sequence</div>
+								<div style={{ width: "60px" }}>FPS</div>
+								<div style={{ width: "60px" }}>Actions</div>
+							</div>
+
+							<div
+								style={{
+									flex: 1,
+									"overflow-y": "auto",
+									display: "flex",
+									"flex-direction": "column",
+									gap: "5px",
+								}}
+							>
+								<For
+									each={
+										version() > -1
+											? Array.from(current.animations.entries())
+											: []
+									}
+								>
+									{([name, data]) => (
+										<div
+											style={{
+												display: "flex",
+												gap: "5px",
+												"align-items": "center",
+												"font-size": "11px",
+											}}
+										>
+											<input
+												type="text"
+												value={name}
+												disabled
+												style={{
+													width: "100px",
+													padding: "4px",
+													background: "#383838",
+													border: "1px solid #222222",
+													color: "#EEEEEE",
+												}}
+											/>
+
+											<input
+												type="text"
+												value={Array.from(data.frames).join(", ")}
+												onInput={(e) => {
+													data.frames = parseFrames(
+														e.currentTarget.value,
+													) as any;
+													if (current.currentAnimation === name)
+														current.play(name);
+												}}
+												style={{
+													flex: 1,
+													padding: "4px",
+													background: "#282828",
+													border: "1px solid #222222",
+													color: "#EEEEEE",
+												}}
+											/>
+
+											<input
+												type="number"
+												min="1"
+												max="60"
+												value={data.fps}
+												onInput={(e) =>
+													(data.fps = parseInt(e.currentTarget.value, 10) || 12)
+												}
+												style={{
+													width: "60px",
+													padding: "4px",
+													background: "#282828",
+													border: "1px solid #222222",
+													color: "#EEEEEE",
+												}}
+											/>
+
+											<button
+												onClick={() => {
+													current.animations.delete(name);
+													if (current.currentAnimation === name)
+														current.play(
+															Array.from(current.animations.keys())[0] || "",
+														);
+													setVersion((v) => v + 1);
+												}}
+												style={{
+													width: "60px",
+													padding: "4px",
+													background: "#4A4A4A",
+													color: "#EEEEEE",
+													border: "1px solid #222222",
+													cursor: "pointer",
+													"border-radius": "3px",
+												}}
+											>
+												Delete
+											</button>
+										</div>
+									)}
+								</For>
+							</div>
+
+							<div
+								style={{
+									"border-top": "1px solid #222222",
+									"padding-top": "10px",
+									display: "flex",
+									gap: "5px",
+									"align-items": "flex-end",
+								}}
+							>
+								<div>
+									<label
+										style={{
+											"font-size": "10px",
+											color: "#B4B4B4",
+											display: "block",
+											"margin-bottom": "3px",
+										}}
+									>
+										New Sequence
+									</label>
+									<input
+										type="text"
+										value={newName()}
+										onInput={(e) => setNewName(e.currentTarget.value)}
+										style={{
+											width: "100px",
+											padding: "4px",
+											background: "#282828",
+											border: "1px solid #222222",
+											color: "#EEEEEE",
+											"font-size": "11px",
+											"border-radius": "3px",
+										}}
+									/>
+								</div>
+								<div style={{ flex: 1 }}>
+									<label
+										style={{
+											"font-size": "10px",
+											color: "#B4B4B4",
+											display: "block",
+											"margin-bottom": "3px",
+										}}
+									>
+										Frames (CSV)
+									</label>
+									<input
+										type="text"
+										value={newFrames()}
+										onInput={(e) => setNewFrames(e.currentTarget.value)}
+										placeholder="0,1,2"
+										style={{
+											width: "100%",
+											padding: "4px",
+											background: "#282828",
+											border: "1px solid #222222",
+											color: "#EEEEEE",
+											"font-size": "11px",
+											"border-radius": "3px",
+										}}
+									/>
+								</div>
+								<div>
+									<label
+										style={{
+											"font-size": "10px",
+											color: "#B4B4B4",
+											display: "block",
+											"margin-bottom": "3px",
+										}}
+									>
+										FPS
+									</label>
+									<input
+										type="number"
+										value={newFps()}
+										onInput={(e) =>
+											setNewFps(parseInt(e.currentTarget.value, 10))
+										}
+										style={{
+											width: "60px",
+											padding: "4px",
+											background: "#282828",
+											border: "1px solid #222222",
+											color: "#EEEEEE",
+											"font-size": "11px",
+											"border-radius": "3px",
+										}}
+									/>
+								</div>
+								<button
+									onClick={() => {
+										if (newName() && newFrames()) {
+											const arr = parseFrames(newFrames());
+											if (arr.length > 0) {
+												current.addAnimation(newName(), arr, newFps());
+												setNewName("");
+												setVersion((v) => v + 1);
+											}
+										}
+									}}
+									style={{
+										padding: "4px 10px",
+										height: "25px",
+										background: "#3A72B0",
+										color: "#EEEEEE",
+										border: "1px solid #222222",
+										cursor: "pointer",
+										"font-size": "11px",
+										"font-weight": "bold",
+										"border-radius": "3px",
+										display: "flex",
+										"align-items": "center",
+										"justify-content": "center",
+										gap: "4px",
+									}}
+								>
+									<IconPlus size={12} /> Add
+								</button>
+							</div>
+						</div>
+					);
+				}}
+			</Show>
+		</div>
+	);
+}