Meh

dev/main.tsx

@@ -11,7 +11,7 @@ import {
 	ZoomScanIcon,
 } from "#/dev/icons/index.ts";
 import type { Entity } from "#/engine/Entity";
-import { currentScene, type SceneData } from "#/engine/Scene.ts";
+import { currentScene, loadScene, type SceneData } from "#/engine/Scene.ts";
 import { setScale, viewport } from "#/engine/Viewport.ts";
 
 async function fetchBrowserData(dir: string): Promise<BrowserFolder> {
@@ -42,9 +42,13 @@ const entites = mapSceneEntities(currentScene.data);
 let activeEntity = null;
 function setActiveEntity(entity: string): void {
 	const [id, index] = entity.split(":");
-	const entities = currentScene.entityMap.get(id)!.entities;
+	const entities = currentScene.entityInstanceMap.get(id)!.instances;
 	activeEntity = entities[parseInt(index)] as Entity<unknown>;
-	console.log(activeEntity.position);
+	console.log(activeEntity);
+}
+
+function setCurrentScene(name: string): void {
+	loadScene(name);
 }
 
 function adjustGameContainer(gameContainer: HTMLElement, width: number): void {
@@ -126,7 +130,7 @@ const DevTools: Component<{ gameContainer: HTMLElement }> = ({
 					></InputField>
 				</div>
 
-				<FileBrowser root={scenes} handler={console.log} />
+				<FileBrowser root={scenes} handler={setCurrentScene} />
 				<FileBrowser root={entites} handler={setActiveEntity} />
 			</div>
 			<div class="tool-bar-resize" onMouseDown={startResizing}></div>

engine/Entity.ts

@@ -1,5 +1,7 @@
 import { createVector, type Vector } from "#/lib/Vector.ts";
 
+export type Indirect = never;
+
 export type Entity<T> = {
 	id: string;
 	position: Vector;
@@ -14,10 +16,10 @@ export type Animate<T> = (
 export type Process<T> = (entity: Entity<T>, delta: number) => void;
 
 export const entityMap = new Map<string, Entity<unknown>>();
-export const entityAnimateMap = new Map<string, Animate<never>>();
+export const entityAnimateMap = new Map<string, Animate<Indirect>>();
-export const entityProcessMap = new Map<string, Process<never>>();
+export const entityProcessMap = new Map<string, Process<Indirect>>();
 
-export function useEntity<T>(
+export function useEntity<T extends object>(
 	id: string,
 	data: T,
 ): {
@@ -31,10 +33,10 @@ export function useEntity<T>(
 	});
 
 	return {
-		animate(fn: Animate<T>): void {
+		animate(fn) {
 			entityAnimateMap.set(id, fn);
 		},
-		process(fn: Process<T>): void {
+		process(fn) {
 			entityProcessMap.set(id, fn);
 		},
 	};

engine/Scene.ts

@@ -1,10 +1,11 @@
-import type { Vector } from "#/lib/Vector.ts";
+import { type Graph, getNeighbours } from "#/lib/Graph.ts";
 import {
 	type Animate as AnimateEntity,
 	type Entity,
 	entityAnimateMap,
 	entityMap,
 	entityProcessMap,
+	type Indirect,
 	type Process as ProcessEntity,
 } from "./Entity.ts";
 
@@ -12,22 +13,21 @@ export type SceneData = {
 	id: string;
 	width: number;
 	height: number;
-	entities: Array<{
+	entities: Array<Entity<unknown>>;
-		id: string;
-		position: Vector;
-	}>;
 };
 
+export type EntityInstanceMap = Map<
+	string,
+	{
+		animate: AnimateEntity<Indirect>;
+		process: ProcessEntity<Indirect>;
+		instances: Array<Entity<unknown>>;
+	}
+>;
+
 export type Scene = {
 	data: SceneData;
-	entityMap: Map<
+	entityInstanceMap: EntityInstanceMap;
-		string,
-		{
-			animate: AnimateEntity<never>;
-			process: ProcessEntity<never>;
-			entities: Array<Entity<unknown>>;
-		}
-	>;
 	process: Process;
 };
 
@@ -35,10 +35,10 @@ export type Process = (ctx: CanvasRenderingContext2D, delta: number) => void;
 
 export type SceneChangeCallback = (from: Scene, to: Scene) => void;
 
-let sceneChangeCallback: SceneChangeCallback = (): 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 currentScene: Scene = {
 	data: {
@@ -48,33 +48,50 @@ export const currentScene: Scene = {
 		entities: [],
 	},
 	process: () => {},
-	entityMap: new Map(),
+	entityInstanceMap: new Map(),
 };
 
 function animateEntities(ctx: CanvasRenderingContext2D, delta: number): void {
-	for (const entry of currentScene.entityMap.values()) {
+	for (const entity of currentScene.entityInstanceMap.values()) {
-		for (const entity of entry.entities) {
+		for (const instance of entity.instances) {
-			entry.animate(entity as Entity<never>, ctx, delta);
+			entity.animate(instance as Entity<Indirect>, ctx, delta);
 		}
 	}
 }
 
 function processEntities(delta: number): void {
-	for (const entry of currentScene.entityMap.values()) {
+	for (const entity of currentScene.entityInstanceMap.values()) {
-		for (const entity of entry.entities) {
+		for (const instance of entity.instances) {
-			entry.process(entity as Entity<never>, delta);
+			entity.process(instance as Entity<Indirect>, delta);
 		}
 	}
 }
 
+function linkScenes(a: string, b: string): void {
+	if (sceneGraph.has(a)) {
+		sceneGraph.get(a)!.push(b);
+	} else {
+		sceneGraph.set(a, [b]);
+	}
+}
+
 export function useScene(data: SceneData): {
+	linkScenes: (ids: string[]) => () => Promise<void>;
 	process: (fn: Process) => void;
 } {
 	sceneDataMap.set(data.id, data);
+	sceneEntiyMap.set(data.id, new Map());
 
 	return {
-		process(fn: Process): void {
+		linkScenes(ids) {
-			sceneProcessMap.set(data.id, (ctx, delta): void => {
+			for (const id of ids) {
+				linkScenes(data.id, id);
+			}
+
+			return async () => {};
+		},
+		process(fn) {
+			sceneProcessMap.set(data.id, (ctx, delta) => {
 				animateEntities(ctx, delta);
 				processEntities(delta);
 				fn(ctx, delta);
@@ -83,43 +100,35 @@ export function useScene(data: SceneData): {
 	};
 }
 
-export function setSceneChangeCallback(callback: SceneChangeCallback) {
+export async function loadScene(id: string): Promise<void> {
-	sceneChangeCallback = callback;
+	await import(`#/scenes/${id}/index.ts`);
-}
 
-export function changeScene(scene: Scene): void {
+	const data = sceneDataMap.get(id)!;
-	sceneChangeCallback(currentScene, scene);
+	const process = sceneProcessMap.get(id)!;
-	currentScene.data = scene.data;
+	const entityInstanceMap = sceneEntiyMap.get(id)!;
-	currentScene.process = scene.process;
-}
 
-export async function loadScene(name: string): Promise<void> {
+	Promise.all(
-	await import(`#/scenes/${name}/index.ts`);
+		data.entities.map(async (entity: Entity<unknown>) => {
+			await import(`#/entities/${entity.id}/index.ts`);
+
+			if (!entityInstanceMap.has(entity.id)) {
+				entityInstanceMap.set(entity.id, {
+					animate: entityAnimateMap.get(entity.id) ?? (() => {}),
+					process: entityProcessMap.get(entity.id) ?? (() => {}),
+					instances: [],
+				});
+			}
+
+			const instance: Entity<unknown> = {
+				...structuredClone(entityMap.get(entity.id)!),
+				position: entity.position,
+			};
+
+			entityInstanceMap.get(entity.id)!.instances.push(instance);
+		}),
+	);
 
-	const data = sceneDataMap.get(name)!;
 	currentScene.data = data;
-
-	for (const entityData of data.entities) {
-		await import(`#/entities/${entityData.id}/index.ts`);
-
-		const entity = entityMap.get(entityData.id) as Entity<unknown>;
-		const instance: Entity<unknown> = {
-			...structuredClone(entity),
-			position: entityData.position,
-		};
-
-		if (currentScene.entityMap.has(entity.id)) {
-			const entry = currentScene.entityMap.get(entity.id);
-			entry!.entities.push(instance);
-		} else {
-			currentScene.entityMap.set(entity.id, {
-				animate: entityAnimateMap.get(entityData.id) ?? (() => {}),
-				process: entityProcessMap.get(entityData.id) ?? (() => {}),
-				entities: [instance],
-			});
-		}
-	}
-
-	const process = sceneProcessMap.get(name)!;
 	currentScene.process = process;
+	currentScene.entityInstanceMap = entityInstanceMap;
 }

entities/fooEntity/index.ts

@@ -0,0 +1,23 @@
+import charIdle from "#/assets/char-idle.png";
+import { useEntity } from "#/engine/Entity.ts";
+import { animateSprite, createAnimation } from "#/lib/Animation.ts";
+import { fromSrc, type Sprite } from "#/lib/Sprite.ts";
+
+const idle: Sprite = await fromSrc(charIdle, 2, 4);
+
+const { animate, process } = useEntity("fooEntity", {
+	animation: createAnimation(2, 500),
+});
+
+animate((entity, ctx, delta) => {
+	animateSprite(
+		ctx,
+		idle,
+		entity.animation,
+		entity.position.x,
+		entity.position.y,
+		delta,
+	);
+});
+
+process((entity, delta) => {});

entities/testEntity/index.ts

@@ -1,3 +1,5 @@
+import charIdle from "#/assets/char-idle.png";
+import charWalk from "#/assets/char-walk.png";
 import { useEntity } from "#/engine/Entity.ts";
 import { viewport } from "#/engine/Viewport.ts";
 import {
@@ -9,8 +11,8 @@ import { loadImage } from "#/lib/loadImage.ts";
 import { createSprite } from "#/lib/Sprite.ts";
 
 const sprites = {
-	idle: createSprite(await loadImage("/assets/char-idle.png"), 2, 4),
+	idle: createSprite(await loadImage(charIdle), 2, 4),
-	walk: createSprite(await loadImage("/assets/char-walk.png"), 4, 4),
+	walk: createSprite(await loadImage(charWalk), 4, 4),
 };
 
 const { animate, process } = useEntity<{

lib/Sprite.ts

@@ -1,3 +1,5 @@
+import { loadImage } from "./loadImage.ts";
+
 export type Sprite = {
 	image: HTMLImageElement;
 	xFrames: number;
@@ -20,6 +22,14 @@ export function createSprite(
 	};
 }
 
+export async function fromSrc(
+	src: string,
+	xFrames: number,
+	yFrames: number,
+): Promise<Sprite> {
+	return createSprite(await loadImage(src), xFrames, yFrames);
+}
+
 export function drawSprite(
 	ctx: CanvasRenderingContext2D,
 	sprite: Sprite,

scenes/fooScene/data.json

@@ -0,0 +1,14 @@
+{
+	"id": "fooScene",
+	"width": 80,
+	"height": 48,
+	"entities": [
+		{
+			"id": "fooEntity",
+			"position": {
+				"x": 24,
+				"y": 16
+			}
+		}
+	]
+}

scenes/fooScene/index.ts

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

scenes/testScene/data.json

@@ -11,7 +11,7 @@
 			}
 		},
 		{
-			"id": "testEntity",
+			"id": "fooEntity",
 			"position": {
 				"x": 16,
 				"y": 16