From 3f2ebb3291401ed529d53027978dc01f0af8ff9e Mon Sep 17 00:00:00 2001
From: kolaflash <kolaflash@GAMBIT>
Date: Tue, 30 Dec 2025 19:40:24 +0100
Subject: [PATCH] further clean ups

---
 dev/ItemList.css        |  3 +--
 dev/fetchBrowserData.ts | 14 ++++++++++
 dev/main.tsx            | 59 +++++++++++------------------------------
 3 files changed, 30 insertions(+), 46 deletions(-)
 create mode 100644 dev/fetchBrowserData.ts

diff --git a/dev/ItemList.css b/dev/ItemList.css
index 4217441..cf0d34b 100644
--- a/dev/ItemList.css
+++ b/dev/ItemList.css
@@ -1,12 +1,11 @@
 .item-list {
-	border-radius: var(--sp-1);
-
 	ul {
 		background: var(--c-bg-1);
 		color: var(--c-fg-1);
 		list-style: none;
 		margin: 0;
 		padding: 0;
+		border-radius: 0 0 var(--sp-1) var(--sp-1);
 	}
 
 	li {
diff --git a/dev/fetchBrowserData.ts b/dev/fetchBrowserData.ts
new file mode 100644
index 0000000..8550ee4
--- /dev/null
+++ b/dev/fetchBrowserData.ts
@@ -0,0 +1,14 @@
+import type { BrowserFolder } from "#/dev/FileBrowser.tsx";
+
+export async function fetchBrowserData(dir: string): Promise<BrowserFolder> {
+	const indexRef: string[] = await (await fetch(`/api/${dir}`)).json();
+
+	const scenes = indexRef.reduce((root, entry) => {
+		const [name] = entry.substring(1).split("/");
+		root.set(name, { path: name, isActive: false });
+
+		return root;
+	}, new Map() as BrowserFolder);
+
+	return new Map([[dir, scenes]]);
+}
diff --git a/dev/main.tsx b/dev/main.tsx
index 5b30f81..3934e6e 100644
--- a/dev/main.tsx
+++ b/dev/main.tsx
@@ -1,9 +1,8 @@
 import "./main.css";
-import { type Accessor, type Component, createSignal, onMount } from "solid-js";
+import { 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";
-import { type BrowserFolder, FileBrowser } from "#/dev/FileBrowser.tsx";
 import { ItemList, type ListItem } from "#/dev/ItemList.tsx";
 import {
 	ArrowAutofitHeightIcon,
@@ -14,21 +13,16 @@ import {
 import { currentScene, loadScene, type SceneData } from "#/engine/Scene.ts";
 import { setScale, viewport } from "#/engine/Viewport.ts";
 
-async function fetchBrowserData(dir: string): Promise<BrowserFolder> {
-	const indexRef: string[] = await (await fetch(`/api/${dir}`)).json();
+async function fetchScenes(): Promise<Array<ListItem>> {
+	const indexRef: string[] = await (await fetch(`/api/scenes`)).json();
+	const items = indexRef.filter((value) => value.includes("index"));
 
-	const scenes = indexRef.reduce((root, entry) => {
-		const [name] = entry.substring(1).split("/");
-		root.set(name, { path: name, isActive: false });
-
-		return root;
-	}, new Map() as BrowserFolder);
-
-	return new Map([[dir, scenes]]);
+	return items.map((value) => {
+		const [label] = value.substring(1).split("/");
+		return { label, isActive: false };
+	});
 }
 
-const scenesRaw = await fetchBrowserData("scenes");
-
 function mapSceneEntities(sceneData: SceneData): Array<ListItem> {
 	const sets: Record<string, number> = {};
 	return sceneData.entities.map((entity, index) => {
@@ -46,6 +40,8 @@ function adjustGameContainer(gameContainer: HTMLElement, width: number): void {
 	gameContainer.style = `position: relative; top: 0; left: ${width}px; width: ${document.body.offsetWidth - width}px;`;
 }
 
+const scenesRaw = await fetchScenes();
+
 const DevTools: Component<{ gameContainer: HTMLElement }> = ({
 	gameContainer,
 }) => {
@@ -73,34 +69,10 @@ const DevTools: Component<{ gameContainer: HTMLElement }> = ({
 		mapSceneEntities(currentScene.data),
 	);
 
-	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 [scenes] = createSignal(scenesRaw);
 
-						return acc;
-					}, new Map() as BrowserFolder),
-			],
-		]);
-	};
-
-	const [scenes, setScenes] = createSignal(scenesRaw);
-
-	const setCurrentScene = async (path: string) => {
-		await loadScene(path);
-		setScenes(mapActive("scenes", path, scenes));
+	const setCurrentScene = async ({ label: name }: ListItem) => {
+		await loadScene(name);
 		setEntities(mapSceneEntities(currentScene.data));
 	};
 
@@ -156,9 +128,8 @@ const DevTools: Component<{ gameContainer: HTMLElement }> = ({
 					></InputField>
 				</div>
 
-				<FileBrowser root={scenes} handler={setCurrentScene} />
-
-				<ItemList name={"Entities"} handler={console.log} items={entities} />
+				<ItemList name="Scenes" handler={setCurrentScene} items={scenes} />
+				<ItemList name="Entities" handler={console.log} items={entities} />
 			</div>
 			<div class="tool-bar-resize" onMouseDown={startResizing}></div>
 		</div>