I need to write a component for the scene/entity access >.<

biome.json

@@ -6,6 +6,7 @@
 				"noNonNullAssertion": "off"
 			},
 			"suspicious": {
+				"noTsIgnore": "off",
 				"noAssignInExpressions": "off"
 			},
 			"correctness": {

dev/FileBrowser.tsx

@@ -8,11 +8,16 @@ import {
 } from "solid-js";
 import { FileIcon, FolderIcon, FolderOpenIcon } from "#/dev/icons/index.ts";
 
-export type BrowserFolder = Map<string, string | BrowserFolder>;
+export type BrowserFile = {
+	path: string;
+	isActive: boolean;
+};
+
+export type BrowserFolder = Map<string, BrowserFile | BrowserFolder>;
 
 export type FileHandler = (path: string) => void;
 
-function isFolder(entry: string | BrowserFolder): entry is BrowserFolder {
+function isFolder(entry: BrowserFile | BrowserFolder): entry is BrowserFolder {
 	return typeof (entry as BrowserFolder).size === "number";
 }
 
@@ -22,10 +27,16 @@ export const FileBrowser: Component<{
 }> = (props) => {
 	const FileEntry: Component<{
 		name: string;
-		path: string;
-	}> = ({ name, path }) => {
+		entry: BrowserFile;
+	}> = ({ name, entry }) => {
 		return (
-			<div class="file-label" onClick={[props.handler, path]}>
+			<div
+				class="file-label"
+				classList={{
+					active: entry.isActive,
+				}}
+				onClick={() => props.handler(entry.path)}
+			>
 				<FileIcon />
 				<span>{name}</span>
 			</div>
@@ -65,7 +76,7 @@ export const FileBrowser: Component<{
 								{isFolder(entry) ? (
 									<FolderEntry folder={entry} name={name} open={index() < 1} />
 								) : (
-									<FileEntry name={name} path={entry} />
+									<FileEntry name={name} entry={entry} />
 								)}
 							</li>
 						);

dev/main.tsx

@@ -1,5 +1,5 @@
 import "./main.css";
-import { type Component, createSignal, onMount } from "solid-js";
+import { type Accessor, type Component, createSignal, onMount } from "solid-js";
 import { render } from "solid-js/web";
 import { InputField } from "#/dev/controls/InputField.tsx";
 import { RangeSlider } from "#/dev/controls/RangeSlider.tsx";
@@ -19,7 +19,7 @@ async function fetchBrowserData(dir: string): Promise<BrowserFolder> {
 
 	const scenes = indexRef.reduce((root, entry) => {
 		const [name] = entry.substring(1).split("/");
-		root.set(name, name);
+		root.set(name, { path: name, isActive: false });
 
 		return root;
 	}, new Map() as BrowserFolder);
@@ -28,13 +28,14 @@ async function fetchBrowserData(dir: string): Promise<BrowserFolder> {
 }
 
 function mapSceneEntities(sceneData: SceneData): BrowserFolder {
-	const sets = {};
+	const sets: Record<string, number> = {};
 	const entites = sceneData.entities.reduce((root, entiry) => {
-		sets[entiry.id] = sets[entiry.id] === undefined ? 0 : sets[entiry.id] + 1;
-		root.set(
-			`${entiry.id}:${sets[entiry.id]}`,
-			`${entiry.id}:${sets[entiry.id]}`,
-		);
+		sets[entiry.name] =
+			sets[entiry.name] === undefined ? 0 : sets[entiry.name] + 1;
+		root.set(`${entiry.name}:${sets[entiry.name]}`, {
+			path: `${entiry.name}:${sets[entiry.name]}`,
+			isActive: false,
+		});
 		return root;
 	}, new Map() as BrowserFolder);
 
@@ -43,14 +44,6 @@ function mapSceneEntities(sceneData: SceneData): BrowserFolder {
 
 const scenesRaw = await fetchBrowserData("scenes");
 
-let activeEntity = null;
-function setActiveEntity(entity: string): void {
-	const [id, index] = entity.split(":");
-	const entities = currentScene.entityInstanceMap.get(id)!.instances;
-	activeEntity = entities[parseInt(index)] as Entity<unknown>;
-	console.log(activeEntity);
-}
-
 function adjustGameContainer(gameContainer: HTMLElement, width: number): void {
 	gameContainer.style = `position: relative; top: 0; left: ${width}px; width: ${document.body.offsetWidth - width}px;`;
 }
@@ -82,10 +75,43 @@ const DevTools: Component<{ gameContainer: HTMLElement }> = ({
 		mapSceneEntities(currentScene.data),
 	);
 
-	const [scenes] = createSignal(scenesRaw);
+	const mapActive = (
+		root: string,
+		path: string,
+		accessor: Accessor<BrowserFolder>,
+	): BrowserFolder => {
+		return new Map([
+			[
+				root,
+				(accessor().get(root) as BrowserFolder)
+					.entries()
+					.reduce((acc, [key, value]) => {
+						acc.set(key, {
+							// @ts-ignore: value is BrowserFile
+							path: value.path,
+							isActive: path === key,
+						});
 
-	const setCurrentScene = async (name: string) => {
-		await loadScene(name);
+						return acc;
+					}, new Map() as BrowserFolder),
+			],
+		]);
+	};
+
+	let activeEntity = null;
+	const setActiveEntity = (path: string): void => {
+		const [id, index] = path.split(":");
+		const instances = currentScene.entityInstanceMap.get(id)!.instances;
+		activeEntity = instances[parseInt(index)] as Entity<unknown>;
+		setEntities(mapActive("entities", path, entities));
+		console.log(activeEntity);
+	};
+
+	const [scenes, setScenes] = createSignal(scenesRaw);
+
+	const setCurrentScene = async (path: string) => {
+		await loadScene(path);
+		setScenes(mapActive("scenes", path, scenes));
 		setEntities(mapSceneEntities(currentScene.data));
 	};
 
@@ -116,7 +142,7 @@ const DevTools: Component<{ gameContainer: HTMLElement }> = ({
 				<div class="scene-props">
 					<InputField
 						name="file"
-						value={currentScene.data.id}
+						value={currentScene.data.name}
 						icon={FileIcon()}
 					></InputField>
 					<InputField

engine/Entity.ts

@@ -3,7 +3,7 @@ import { createVector, type Vector } from "#/lib/Vector.ts";
 export type Indirect = never;
 
 export type Entity<T> = {
-	id: string;
+	name: string;
 	position: Vector;
 } & T;
 
@@ -20,24 +20,24 @@ export const entityAnimateMap = new Map<string, Animate<Indirect>>();
 export const entityProcessMap = new Map<string, Process<Indirect>>();
 
 export function useEntity<T extends object>(
-	id: string,
+	name: string,
 	data: T,
 ): {
 	animate: (fn: Animate<T>) => void;
 	process: (fn: Process<T>) => void;
 } {
-	entityMap.set(id, {
-		id,
+	entityMap.set(name, {
+		name,
 		position: createVector(),
 		...data,
 	});
 
 	return {
 		animate(fn) {
-			entityAnimateMap.set(id, fn);
+			entityAnimateMap.set(name, fn);
 		},
 		process(fn) {
-			entityProcessMap.set(id, fn);
+			entityProcessMap.set(name, fn);
 		},
 	};
 }

engine/Scene.ts

@@ -10,7 +10,7 @@ import {
 } from "./Entity.ts";
 
 export type SceneData = {
-	id: string;
+	name: string;
 	width: number;
 	height: number;
 	entities: Array<Entity<unknown>>;
@@ -42,7 +42,7 @@ const sceneGraph: Graph<string> = new Map();
 
 export const currentScene: Scene = {
 	data: {
-		id: "",
+		name: "",
 		width: 0,
 		height: 0,
 		entities: [],
@@ -81,13 +81,13 @@ export function useScene(data: SceneData): {
 	) => (id: T[number]) => Promise<void>;
 	process: (fn: Process) => void;
 } {
-	sceneDataMap.set(data.id, data);
-	sceneEntiyMap.set(data.id, new Map());
+	sceneDataMap.set(data.name, data);
+	sceneEntiyMap.set(data.name, new Map());
 
 	return {
 		linkScenes(ids) {
 			for (const id of ids) {
-				linkScenes(data.id, id);
+				linkScenes(data.name, id);
 			}
 
 			return async (id) => {
@@ -95,7 +95,7 @@ export function useScene(data: SceneData): {
 			};
 		},
 		process(fn) {
-			sceneProcessMap.set(data.id, (ctx, delta) => {
+			sceneProcessMap.set(data.name, (ctx, delta) => {
 				animateEntities(ctx, delta);
 				processEntities(delta);
 				fn(ctx, delta);
@@ -128,22 +128,22 @@ export async function loadScene(id: string): Promise<void> {
 
 	Promise.all(
 		data.entities.map(async (entity: Entity<unknown>) => {
-			await import(`#/entities/${entity.id}/index.ts`);
+			await import(`#/entities/${entity.name}/index.ts`);
 
-			if (!entityInstanceMap.has(entity.id)) {
-				entityInstanceMap.set(entity.id, {
-					animate: entityAnimateMap.get(entity.id) ?? (() => {}),
-					process: entityProcessMap.get(entity.id) ?? (() => {}),
+			if (!entityInstanceMap.has(entity.name)) {
+				entityInstanceMap.set(entity.name, {
+					animate: entityAnimateMap.get(entity.name) ?? (() => {}),
+					process: entityProcessMap.get(entity.name) ?? (() => {}),
 					instances: [],
 				});
 			}
 
 			const instance: Entity<unknown> = {
-				...structuredClone(entityMap.get(entity.id)!),
+				...structuredClone(entityMap.get(entity.name)!),
 				...structuredClone(entity),
 			};
 
-			entityInstanceMap.get(entity.id)!.instances.push(instance);
+			entityInstanceMap.get(entity.name)!.instances.push(instance);
 		}),
 	);
 

scenes/fooScene/data.json

@@ -1,10 +1,10 @@
 {
-	"id": "fooScene",
+	"name": "fooScene",
 	"width": 80,
 	"height": 48,
 	"entities": [
 		{
-			"id": "fooEntity",
+			"name": "fooEntity",
 			"position": {
 				"x": 24,
 				"y": 16

scenes/testScene/data.json

@@ -1,24 +1,24 @@
 {
-	"id": "testScene",
+	"name": "testScene",
 	"width": 80,
 	"height": 48,
 	"entities": [
 		{
-			"id": "testEntity",
+			"name": "testEntity",
 			"position": {
 				"x": 0,
 				"y": 0
 			}
 		},
 		{
-			"id": "fooEntity",
+			"name": "fooEntity",
 			"position": {
 				"x": 16,
 				"y": 16
 			}
 		},
 		{
-			"id": "testEntity",
+			"name": "testEntity",
 			"position": {
 				"x": 32,
 				"y": 32