WIP

engine/Box.ts

@@ -0,0 +1,7 @@
+export type Box<T> = {
+	value: T;
+};
+
+export function box<T>(value: T): Box<T> {
+	return { value };
+}

engine/Scene.ts

@@ -1,3 +1,4 @@
+import type { Box } from "#/engine/Box.ts";
 import { type Drawable, draw, isDrawable } from "#/engine/Drawable.ts";
 import {
 	entityMap,
@@ -28,7 +29,7 @@ export type EntityMap = Map<
 	}
 >;
 
-export type AnimationMap = Map<number, { value: SpriteAnimation }>;
+export type AnimationMap = Map<number, Box<SpriteAnimation>>;
 
 export type Scene = {
 	data: SceneData;
@@ -119,6 +120,7 @@ function processSystems(ctx: CanvasRenderingContext2D, delta: number): void {
 	for (const drawable of drawables.sort(
 		(a, b) => a.position.y - b.position.y,
 	)) {
+		// this dosn't belong here
 		if (animationsMap.has(drawable.id)) {
 			animateSprite(animationsMap.get(drawable.id)!.value, delta);
 		}
@@ -195,13 +197,12 @@ export async function setScene(name: string): Promise<void> {
 				drawableInstances.push(instance);
 			}
 			if (
-				(instance as { id: number; $animation: object }).$animation !==
-				undefined
+				(instance as { id: number; animation: object }).animation !== undefined
 			) {
 				animateInstances.set(
 					instance.id,
-					(instance as { id: number; $animation: { value: SpriteAnimation } })
-						.$animation, // TODO: unify that $ value component thing
+					(instance as { id: number; animation: Box<SpriteAnimation> })
+						.animation, // TODO
 				);
 			}
 		}

game/entities/hero/entity.ts

@@ -1,3 +1,4 @@
+import { type Box, box } from "#/engine/Box.ts";
 import { type Circle, createCircle } from "#/engine/Circle.ts";
 import { moveAndCollide } from "#/engine/Collision.ts";
 import { defineEntity } from "#/engine/Entity.ts";
@@ -17,7 +18,7 @@ export type Hero = {
 	velocity: Vector;
 	body: Circle;
 	sprite: Sprite;
-	$animation: { value: SpriteAnimation };
+	animation: Box<SpriteAnimation>;
 };
 
 const speed = 0.05;
@@ -35,7 +36,7 @@ const state: Hero = {
 	velocity: createVector(),
 	body: createCircle(createVector(), 4),
 	sprite,
-	$animation: { value: createSpriteAnimation(sprite, 500, 2) },
+	animation: box(createSpriteAnimation(sprite, 500, 2)),
 };
 
 const process = defineEntity("hero", state);

game/entities/portal/entity.ts

@@ -1,3 +1,4 @@
+import { box } from "#/engine/Box";
 import { defineEntity } from "#/engine/Entity.ts";
 import { createSpriteAnimation, useSpriteSheetSrc } from "#/engine/Sprite.ts";
 import { createVector } from "#/engine/Vector.ts";
@@ -15,5 +16,5 @@ const sprite = {
 defineEntity("portal", {
 	position: createVector(64, 64),
 	sprite,
-	$animation: { value: createSpriteAnimation(sprite, 400, 0) },
+	animation: box(createSpriteAnimation(sprite, 400, 0)),
 });