wIp

engine/Circle.ts

@@ -17,10 +17,12 @@ export function strokeCircle(
 	circle: Circle,
 	color: string = "#fff",
 	alpha: number = 1.0,
+	lineWidth: number = 1,
 ): void {
 	ctx.save();
 	ctx.strokeStyle = color;
 	ctx.globalAlpha = alpha;
+	ctx.lineWidth = lineWidth;
 	ctx.beginPath();
 	ctx.arc(circle.position.x, circle.position.y, circle.radius, 0, 2 * Math.PI);
 	ctx.stroke();

engine/Component.ts

@@ -1,9 +1,3 @@
-export const componentMap = new Map();
+import type { Box } from "#/engine/Box.ts";
 
-export function defineComponent<T>(key: string): Map<string, T> {
-	if (!componentMap.has(key)) {
-		componentMap.set(key, new Map());
-	}
-
-	return componentMap.get(key)!;
-}
+export type Component<T> = Record<string, Box<T>>;

engine/Entity.ts

@@ -1,18 +1,13 @@
-export type Entity<T extends object> = {
-	name: string;
-	state: T;
-};
+export type Process = (id: string, delta: number) => void;
 
-export type Process<T extends object> = (instance: T, delta: number) => void;
+export const entityProcessMap = new Map<string, Process>();
+export const entityBlueprintsMap = new Map<string, Map<string, unknown>>();
 
-export const entityMap = new Map();
-export const entityProcessMap = new Map();
-
-export function defineEntity<T extends object>(
+export function defineEntity<T extends { [key: string]: unknown }>(
 	name: string,
-	state: T,
-): (fn: Process<T>) => void {
-	entityMap.set(name, state);
+	blueprints: T,
+): (fn: Process) => void {
+	entityBlueprintsMap.set(name, new Map(Object.entries(blueprints)));
 
 	return (fn) => {
 		entityProcessMap.set(name, fn);

engine/Rect.ts

@@ -31,10 +31,12 @@ export function strokeRect(
 	rect: Rect,
 	color: string = "#fff",
 	alpha: number = 1.0,
+	lineWidth: number = 1,
 ): void {
 	ctx.save();
 	ctx.strokeStyle = color;
 	ctx.globalAlpha = alpha;
+	ctx.lineWidth = lineWidth;
 	ctx.strokeRect(
 		rect.position.x - 0.5,
 		rect.position.y - 0.5,

engine/Scene.ts

@@ -1,66 +1,43 @@
 import { type Box, box } from "#/engine/Box.ts";
 import { type Drawable, draw, isDrawable } from "#/engine/Drawable.ts";
-import {
-	entityMap,
-	entityProcessMap,
-	type Process as ProcessEntity,
-} from "#/engine/Entity.ts";
+import { entityBlueprintsMap, entityProcessMap } from "#/engine/Entity.ts";
 import { type Graph, getNeighbours } from "#/engine/Graph.ts";
 import { useWithAsyncCache } from "#/engine/lib/cache.ts";
-import { animateSprite, type SpriteAnimation } from "#/engine/Sprite.ts";
-import { componentMap, defineComponent } from "./Component";
-import { mulberry32 } from "./lib/mulberry32";
+import type MapProxy from "#/engine/lib/MapProxy.ts";
+import { mulberry32 } from "#/engine/lib/mulberry32.ts";
+import { animateSprite, type SpritePlayback } from "#/engine/Sprite.ts";
 
-export type EntityData = {
-	name: string;
-	init: object;
-};
+export type Process = (ctx: CanvasRenderingContext2D, delta: number) => void;
+export type PreProcess = () => void;
+export type PostProcess = () => void;
 
 export type SceneData = {
 	name: string;
 	width: number;
 	height: number;
-	entities: Array<EntityData>;
+	entities: string[];
 };
 
-export type EntityMap = Map<
-	string,
-	{
-		process: ProcessEntity<{ id: number }>;
-		instances: Array<{ id: number }>;
-	}
->;
-
-export type AnimationMap = Map<number, Box<SpriteAnimation>>;
+export type ComponentsMap = Map<string, MapProxy<string, unknown>>;
 
 export type Scene = {
 	data: SceneData;
-	entityMap: EntityMap;
+	components: ComponentsMap;
 	process: Process;
 };
 
-export type Process = (ctx: CanvasRenderingContext2D, delta: number) => void;
-export type PreProcess = (entityMap: EntityMap) => void;
-export type PostProcess = (entityMap: EntityMap) => void;
-
-export type SceneChangeHandler = (to: SceneData, from: SceneData) => void;
+export type SceneChange = (to: SceneData, from: SceneData) => void;
 
+export const sceneDataMap = new Map<string, SceneData>();
 export const sceneProcessMap = new Map<string, Process>();
+export const sceneComponentsMap = new Map<string, ComponentsMap>();
+
 export const scenePreProcessMap = new Map<string, PreProcess>();
 export const scenePostProcessMap = new Map<string, PostProcess>();
 
-export const sceneChangedHandlers = new Set<SceneChangeHandler>();
-
-export const sceneDataMap = new Map<string, SceneData>();
-export const sceneEntiyMap = new Map<string, EntityMap>();
+export const sceneChangeSet = new Set<SceneChange>();
 export const sceneGraph: Graph<string> = new Map();
 
-const sceneInstancesDrawMap = new Map<
-	string,
-	Array<Drawable & { id: number }>
->();
-const sceneInstancesAnimationMap = new Map<string, AnimationMap>();
-
 export const [loadScene, sceneCache] = useWithAsyncCache(
 	async (name: string) => {
 		await import(`#/game/scenes/${name}/scene.ts`);
@@ -203,7 +180,7 @@ export async function setScene(name: string): Promise<void> {
 			) {
 				animateInstances.set(
 					instance.id,
-					(instance as { id: number; animation: Box<SpriteAnimation> })
+					(instance as { id: number; animation: Box<SpritePlayback> })
 						.animation, // TODO
 				);
 			}
@@ -227,7 +204,7 @@ export async function setScene(name: string): Promise<void> {
 
 	currentScene.entityMap = entityInstanceMap;
 
-	for (const handler of sceneChangedHandlers.values()) {
+	for (const handler of sceneChangeSet.values()) {
 		handler(data, currentScene.data);
 	}
 }
@@ -245,3 +222,7 @@ export function def(name: string): <T>(key: string, value: T) => void {
 		console.log(componentMap);
 	};
 }
+
+export default function <T>(name: string): MapProxy<string, T> {
+	return currentScene.components.get(name) as MapProxy<string, T>;
+}

engine/Segment.ts

@@ -61,12 +61,17 @@ export function setSegmentIntersection(
 export function drawSegment(
 	segment: Segment,
 	ctx: CanvasRenderingContext2D,
-	color: string,
+	color: string = "#fff",
+	alpha: number = 1.0,
+	lineWidth: number = 1,
 ): void {
-	ctx.lineWidth = 2;
+	ctx.save();
 	ctx.strokeStyle = color;
+	ctx.globalAlpha = alpha;
+	ctx.lineWidth = lineWidth;
 	ctx.beginPath();
 	ctx.moveTo(segment[0].x, segment[0].y);
 	ctx.lineTo(segment[1].x, segment[1].y);
 	ctx.stroke();
+	ctx.restore();
 }

engine/Sprite.ts

@@ -16,8 +16,7 @@ export type SpriteSheet = {
 	frameHeight: number;
 };
 
-export type SpriteAnimation = {
-	sprite: Sprite;
+export type SpritePlayback = {
 	xIndex: number;
 	yIndex: number;
 	frameTime: number;
@@ -26,7 +25,7 @@ export type SpriteAnimation = {
 
 // It's not possible to crate a structured clone of a HTMLImageElement and it would be a
 // waste of memory anyways since we use the HTMLImageElement only as reference for draw calls.
-// Therefore the SpriteSheet will stored by it's image source.
+// Therefore the SpriteSheet will stored and referenced by it's image source.
 export const spriteSheetMap = new Map<string, SpriteSheet>();
 
 export function createSpriteSheet(
@@ -43,7 +42,23 @@ export function createSpriteSheet(
 	};
 }
 
-export async function useSpriteSheetSrc(
+export function createSprite(
+	src: string,
+	xStartFrame: number = 0,
+	yStartFrame: number = 0,
+): Sprite {
+	const spriteSheet = spriteSheetMap.get(src)!;
+
+	return {
+		src,
+		xStart: xStartFrame * spriteSheet.frameWidth,
+		yStart: yStartFrame * spriteSheet.frameHeight,
+		width: spriteSheet.frameWidth,
+		height: spriteSheet.frameHeight,
+	};
+}
+
+export async function defineSpriteSheet(
 	src: string,
 	xFrames: number,
 	yFrames: number,
@@ -56,15 +71,11 @@ export async function useSpriteSheetSrc(
 	return src;
 }
 
-export function createSpriteAnimation(
-	sprite: Sprite,
+export function createSpritePlayback(
 	frameTime: number,
 	yIndex: number,
-): SpriteAnimation {
-	sprite.yStart = yIndex * spriteSheetMap.get(sprite.src)!.frameHeight;
-
+): SpritePlayback {
 	return {
-		sprite,
 		xIndex: 0,
 		yIndex,
 		frameTime,
@@ -95,14 +106,18 @@ export function drawSprite(
 	);
 }
 
-export function animateSprite(animation: SpriteAnimation, delta: number): void {
-	const sheet = spriteSheetMap.get(animation.sprite.src)!;
-	if ((animation.frameDelta += delta) > animation.frameTime) {
-		animation.frameDelta = 0;
-		if ((animation.xIndex += 1) >= sheet.xFrames) {
-			animation.xIndex = 0;
+export function animateSprite(
+	sprite: Sprite,
+	playback: SpritePlayback,
+	delta: number,
+): void {
+	const sheet = spriteSheetMap.get(sprite.src)!;
+	if ((playback.frameDelta += delta) > playback.frameTime) {
+		playback.frameDelta = 0;
+		if ((playback.xIndex += 1) >= sheet.xFrames) {
+			playback.xIndex = 0;
 		}
 	}
 
-	animation.sprite.xStart = animation.xIndex * sheet.frameWidth;
+	sprite.xStart = playback.xIndex * sheet.frameWidth;
 }

engine/dev/main.tsx

@@ -11,7 +11,7 @@ import type { Entity } from "#/engine/Entity.ts";
 import {
 	currentScene,
 	type SceneData,
-	sceneChangedHandlers,
+	sceneChangeSet,
 	sceneGraph,
 	setScene,
 } from "#/engine/Scene.ts";
@@ -86,7 +86,7 @@ const DevTools: Component<{ gameContainer: HTMLElement }> = ({
 		await setScene(name);
 	};
 
-	sceneChangedHandlers.add((data) => {
+	sceneChangeSet.add((data) => {
 		setActiveEntity(null);
 		setSceneData(data);
 		setEntities(mapSceneEntities(data));

engine/lib/MapProxy.ts

@@ -0,0 +1,13 @@
+import type { Box } from "#/engine/Box.ts";
+
+export default class MapProxy<K, V> {
+	map: Map<K, Box<V>>;
+
+	constructor() {
+		this.map = new Map();
+	}
+
+	get(key: K): V | undefined {
+		return this.map.get(key)?.value;
+	}
+}