WIP

dev/ItemList.tsx

@@ -19,7 +19,7 @@ import {
 
 export type ListItem = { label: string; isActive: boolean };
 
-export type ItemHandler = (item: ListItem, index: number) => void;
+export type ItemHandler = (list: Array<ListItem>, index: number) => void;
 
 export type Direction = "default" | "asc" | "desc";
 
@@ -136,7 +136,7 @@ export const ItemList: Component<{
 									classList={{
 										active: item.isActive,
 									}}
-									onClick={() => props.handler(item, index())}
+									onClick={() => props.handler(items(), index())}
 								>
 									{item.label}
 								</li>

dev/main.tsx

@@ -1,5 +1,5 @@
 import "./main.css";
-import { type Component, createSignal, onMount } from "solid-js";
+import { type Component, createSignal, onMount, type Setter } from "solid-js";
 import { render } from "solid-js/web";
 import { InputField } from "#/dev/controls/InputField.tsx";
 import { RangeSlider } from "#/dev/controls/RangeSlider.tsx";
@@ -40,6 +40,13 @@ function adjustGameContainer(gameContainer: HTMLElement, width: number): void {
 	gameContainer.style = `position: relative; top: 0; left: ${width}px; width: ${document.body.offsetWidth - width}px;`;
 }
 
+function mapActiveItem(items: Array<ListItem>, index: number): Array<ListItem> {
+	return items.map((item, idx) => ({
+		...item,
+		isActive: idx === index,
+	}));
+}
+
 const scenesRaw = await fetchScenes();
 
 const DevTools: Component<{ gameContainer: HTMLElement }> = ({
@@ -65,17 +72,35 @@ const DevTools: Component<{ gameContainer: HTMLElement }> = ({
 
 	adjustGameContainer(gameContainer, width());
 
+	const [scenes, setScenes] = createSignal(
+		scenesRaw.map((scene) => ({
+			...scene,
+			isActive: scene.label === currentScene.data.name,
+		})),
+	);
 	const [entities, setEntities] = createSignal(
 		mapSceneEntities(currentScene.data),
 	);
 
-	const [scenes] = createSignal(scenesRaw);
+	const setCurrentScene = async (
+		scenes: Array<ListItem>,
+		index: number,
+	): Promise<void> => {
+		setScenes(mapActiveItem(scenes, index));
 
-	const setCurrentScene = async ({ label: name }: ListItem) => {
+		await loadScene(scenes[index].label);
-		await loadScene(name);
 		setEntities(mapSceneEntities(currentScene.data));
 	};
 
+	const setActiveEntity = (entities: Array<ListItem>, index: number): void => {
+		setEntities(mapActiveItem(entities, index));
+
+		const instances = currentScene.entityInstanceMap.get(
+			entities[index].label,
+		)!.instances;
+		console.log(instances);
+	};
+
 	onMount(() => {
 		self.addEventListener("resize", () => {
 			adjustGameContainer(gameContainer, width());
@@ -129,7 +154,7 @@ const DevTools: Component<{ gameContainer: HTMLElement }> = ({
 				</div>
 
 				<ItemList name="Scenes" handler={setCurrentScene} items={scenes} />
-				<ItemList name="Entities" handler={console.log} items={entities} />
+				<ItemList name="Entities" handler={setActiveEntity} items={entities} />
 			</div>
 			<div class="tool-bar-resize" onMouseDown={startResizing}></div>
 		</div>