houston...

dev/GraphBrowser.tsx

@@ -1,5 +1,6 @@
 import "./GraphBrowser.css";
 import { type Component, createSignal, onMount } from "solid-js";
+import { currentScene, sceneCache } from "#/engine/Scene.ts";
 import {
 	type Edge,
 	type Graph,
@@ -92,25 +93,13 @@ function hookEdge<T extends PhysicsPartial>([a, b]: Edge<T>): void {
 }
 
 export const GraphBrowser: Component<{
-	graph: Graph<PhysicsPartial & { label: string }>;
+	graph: Graph<string>;
 }> = (props) => {
 	let canvasRef!: HTMLCanvasElement;
 
 	const [width] = createSignal(300);
 	const [height] = createSignal(300);
 
-	const nodes: Array<Node<PhysicsPartial>> = [...props.graph.keys()];
-
-	const edges: Array<Edge<PhysicsPartial>> = props.graph.entries().reduce(
-		(acc, [node, neighbours]) => {
-			for (const neighbour of neighbours) {
-				acc.push([node, neighbour]);
-			}
-			return acc;
-		},
-		[] as Array<Edge<PhysicsPartial>>,
-	);
-
 	onMount(() => {
 		const ctx: CanvasRenderingContext2D = canvasRef.getContext("2d", {
 			alpha: false,
@@ -118,8 +107,34 @@ export const GraphBrowser: Component<{
 
 		const damping = 0.8;
 
-		const activeNode = props.graph.keys().find((_, i) => i === 3);
+		const nodes: Array<Node<PhysicsPartial & { name: string }>> = [
-		const activeNeighbours = getNeighbours(props.graph, activeNode);
+			...props.graph.keys(),
+		].map((node: string) => ({
+			name: node,
+			position: createVector(Math.random(), Math.random()),
+			velocity: createVector(),
+			acceleration: createVector(),
+		}));
+
+		const edges: Array<Edge<PhysicsPartial>> = props.graph.entries().reduce(
+			(acc, [name, neighbours]) => {
+				const node = nodes.find((n) => n.name === name)!;
+				for (const neighbour of neighbours) {
+					const n = nodes.find((node) => node.name === neighbour);
+					if (n !== undefined) {
+						acc.push([node, n]);
+					}
+				}
+				return acc;
+			},
+			[] as Array<Edge<PhysicsPartial>>,
+		);
+
+		const activeNode = props.graph
+			.keys()
+			.find((name) => name === currentScene.data.name);
+
+		const activeNeighbours = getNeighbours(props.graph, activeNode!);
 
 		const animate = (): void => {
 			applyRepulsion(nodes);
@@ -151,14 +166,10 @@ export const GraphBrowser: Component<{
 			}
 
 			for (const node of nodes) {
-				if (node === activeNode) {
+				if (node.name === activeNode) {
 					drawNode(node, ctx, "#ee459e");
 				} else {
-					if (
+					if (activeNeighbours.includes(node.name)) {
-						activeNeighbours.includes(
-							node as PhysicsPartial & { label: string },
-						)
-					) {
 						drawNode(node, ctx, "#6572f5");
 					} else {
 						drawNode(node, ctx, "#404249");

dev/main.tsx

@@ -10,10 +10,13 @@ import {
 	FileIcon,
 	ZoomScanIcon,
 } from "#/dev/icons/index.ts";
-import { currentScene, loadScene, type SceneData } from "#/engine/Scene.ts";
+import {
+	currentScene,
+	type SceneData,
+	sceneGraph,
+	setScene,
+} from "#/engine/Scene.ts";
 import { setScale, viewport } from "#/engine/Viewport.ts";
-import { createGraph, type Edge, type Node } from "#/lib/Graph.ts";
-import { createVector, type Vector } from "#/lib/Vector.ts";
 import { GraphBrowser } from "./GraphBrowser.tsx";
 
 async function fetchScenes(): Promise<string[]> {
@@ -33,46 +36,6 @@ function adjustGameContainer(gameContainer: HTMLElement, width: number): void {
 
 const scenesRaw = await fetchScenes();
 
-type TestNode = Node<{
-	position: Vector;
-	velocity: Vector;
-	acceleration: Vector;
-	label: string;
-}>;
-
-function createTestNode(label: string): TestNode {
-	return {
-		label,
-		position: createVector(Math.random(), Math.random()),
-		velocity: createVector(),
-		acceleration: createVector(),
-	};
-}
-
-const nodes: Array<TestNode> = [
-	createTestNode("foo"),
-	createTestNode("bar"),
-	createTestNode("lol"),
-	createTestNode("hai"),
-	createTestNode("sea"),
-	createTestNode("vot"),
-	createTestNode("zoe"),
-	createTestNode("asm"),
-];
-
-const edges: Array<Edge<TestNode>> = [
-	[nodes[0], nodes[1]],
-	[nodes[0], nodes[2]],
-	[nodes[1], nodes[2]],
-	[nodes[2], nodes[3]],
-	[nodes[4], nodes[5]],
-	[nodes[4], nodes[3]],
-	[nodes[5], nodes[6]],
-	[nodes[3], nodes[6]],
-];
-
-const graph = createGraph<TestNode>(nodes, edges);
-
 const DevTools: Component<{ gameContainer: HTMLElement }> = ({
 	gameContainer,
 }) => {
@@ -103,7 +66,7 @@ const DevTools: Component<{ gameContainer: HTMLElement }> = ({
 
 	const setCurrentScene = async (items: ItemsRef): Promise<void> => {
 		const name = items.find((ref) => ref.item.isActive)!.item.label;
-		await loadScene(name);
+		await setScene(name);
 		setEntities(mapSceneEntities(currentScene.data));
 	};
 
@@ -177,7 +140,7 @@ const DevTools: Component<{ gameContainer: HTMLElement }> = ({
 				<ItemList name="Scenes" handler={setCurrentScene} items={scenes} />
 				<ItemList name="Entities" handler={setActiveEntity} items={entities} />
 
-				<GraphBrowser graph={graph} />
+				<GraphBrowser graph={sceneGraph} />
 			</div>
 			<div class="tool-bar-resize" onMouseDown={startResizing}></div>
 		</div>

engine/Scene.ts

@@ -1,3 +1,4 @@
+import { useWithAsyncCache } from "#/lib/cache.ts";
 import { type Graph, getNeighbours } from "#/lib/Graph.ts";
 import {
 	type Animate as AnimateEntity,
@@ -38,7 +39,38 @@ export type SceneChangeCallback = (from: Scene, to: Scene) => void;
 const sceneDataMap = new Map<string, SceneData>();
 const sceneProcessMap = new Map<string, Process>();
 const sceneEntiyMap = new Map<string, EntityInstanceMap>();
-const sceneGraph: Graph<string> = new Map();
+export const sceneGraph: Graph<string> = new Map();
+
+export const [loadScene, sceneCache] = useWithAsyncCache(
+	async (name: string) => {
+		await import(`#/scenes/${name}/index.ts`);
+
+		const data = sceneDataMap.get(name)!;
+		const entityInstanceMap = sceneEntiyMap.get(name)!;
+		entityInstanceMap.clear();
+
+		Promise.all(
+			data.entities.map(async (entity: Entity<unknown>) => {
+				await import(`#/entities/${entity.name}/index.ts`);
+
+				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.name)!,
+					...entity,
+				});
+
+				entityInstanceMap.get(entity.name)!.instances.push(instance);
+			}),
+		);
+	},
+);
 
 export const currentScene: Scene = {
 	data: {
@@ -77,8 +109,8 @@ function linkScenes(a: string, b: string): void {
 
 export function useScene(data: SceneData): {
 	linkScenes: <T extends readonly string[]>(
-		ids: T,
+		names: T,
-	) => (id: T[number]) => Promise<void>;
+	) => (name: T[number]) => Promise<void>;
 	process: (fn: Process) => void;
 } {
 	sceneDataMap.set(data.name, data);
@@ -91,7 +123,7 @@ export function useScene(data: SceneData): {
 			}
 
 			return async (id) => {
-				return changeScene(id);
+				return setScene(id);
 			};
 		},
 		process(fn) {
@@ -104,48 +136,17 @@ export function useScene(data: SceneData): {
 	};
 }
 
-export function changeScene(id: string): Promise<void> {
+export async function setScene(name: string): Promise<void> {
-	const data = sceneDataMap.get(id)!;
+	await loadScene(name);
-	const process = sceneProcessMap.get(id)!;
+	for (const neighbour of getNeighbours(sceneGraph, name)) {
-	const entityInstanceMap = sceneEntiyMap.get(id)!;
-	for (const neighbour of getNeighbours(sceneGraph, id)) {
 		if (!sceneCache.has(neighbour)) {
 			sceneCache.set(neighbour, loadScene(neighbour));
 		}
 	}
-	currentScene.data = data;
-	currentScene.process = process;
-	currentScene.entityInstanceMap = entityInstanceMap;
-}
 
-export async function loadScene(id: string): Promise<void> {
+	const data = sceneDataMap.get(name)!;
-	await import(`#/scenes/${id}/index.ts`);
+	const process = sceneProcessMap.get(name)!;
-
+	const entityInstanceMap = sceneEntiyMap.get(name)!;
-	const data = sceneDataMap.get(id)!;
-	const process = sceneProcessMap.get(id)!;
-	const entityInstanceMap = sceneEntiyMap.get(id)!;
-	entityInstanceMap.clear();
-
-	Promise.all(
-		data.entities.map(async (entity: Entity<unknown>) => {
-			await import(`#/entities/${entity.name}/index.ts`);
-
-			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.name)!,
-				...entity,
-			});
-
-			entityInstanceMap.get(entity.name)!.instances.push(instance);
-		}),
-	);
 
 	currentScene.data = data;
 	currentScene.process = process;

lib/cache.ts

@@ -1,7 +1,7 @@
 export type Cache<T> = Map<string, T>;
 export type AsyncCache<T> = Map<string, Promise<T>>;
 
-export function withCache<T, U extends (...args: unknown[]) => T>(
+export function withCache<T, U extends (...args: any[]) => T>(
 	callback: U,
 	key: string,
 	cache: Cache<T>,
@@ -18,7 +18,7 @@ export function withCache<T, U extends (...args: unknown[]) => T>(
 	};
 }
 
-export function withAsyncCache<T, U extends (...args: unknown[]) => Promise<T>>(
+export function withAsyncCache<T, U extends (...args: any[]) => Promise<T>>(
 	callback: U,
 	key: string,
 	cache: AsyncCache<T>,
@@ -36,7 +36,7 @@ export function withAsyncCache<T, U extends (...args: unknown[]) => Promise<T>>(
 }
 
 export function useWithCache<T>(
-	callback: (...args: unknown[]) => T,
+	callback: (...args: any[]) => T,
 ): [(uri: string) => T, Cache<T>] {
 	const cache: Cache<T> = new Map();
 
@@ -44,7 +44,7 @@ export function useWithCache<T>(
 }
 
 export function useWithAsyncCache<T>(
-	callback: (...args: unknown[]) => Promise<T>,
+	callback: (...args: any[]) => Promise<T>,
 ): [(uri: string) => Promise<T>, AsyncCache<T>] {
 	const cache: AsyncCache<T> = new Map();
 

main.ts

@@ -1,4 +1,4 @@
-import { currentScene, loadScene } from "#/engine/Scene.ts";
+import { currentScene, setScene } from "#/engine/Scene.ts";
 import {
 	initViewport,
 	resetCtx,
@@ -23,7 +23,7 @@ function animate(timestamp: number): void {
 	}
 
 	initViewport();
-	await loadScene("testScene");
+	await setScene("testScene");
 
 	resizeCanvas(currentScene.data.width, currentScene.data.height);
 	self.addEventListener("resize", () => {

scenes/barScene/data.json

@@ -1,7 +1,7 @@
 {
 	"name": "barScene",
-	"width": 80,
+	"width": 240,
-	"height": 48,
+	"height": 160,
 	"entities": [
 		{
 			"name": "fooEntity",

scenes/barScene/index.ts

@@ -3,8 +3,6 @@ import data from "./data.json";
 
 const { process, linkScenes } = useScene(data);
 
-// const changeScene = linkScenes(["testScene"] as const);
+linkScenes(["testScene"] as const);
-
-// changeScene("testScene");
 
 process((_ctx, _delta) => {});

scenes/fooScene/index.ts

@@ -3,8 +3,6 @@ import data from "./data.json";
 
 const { process, linkScenes } = useScene(data);
 
-// const changeScene = linkScenes(["testScene"] as const);
+linkScenes(["barScene"] as const);
-
-// changeScene("testScene");
 
 process((_ctx, _delta) => {});

scenes/testScene/index.ts

@@ -1,6 +1,8 @@
 import { useScene } from "#/engine/Scene.ts";
 import data from "./data.json";
 
-const { process } = useScene(data);
+const { process, linkScenes } = useScene(data);
+
+linkScenes(["fooScene"] as const);
 
 process((_ctx, _delta) => {});