From a0671e79531d1c2a214e2b1496f780a84ac7351e Mon Sep 17 00:00:00 2001
From: Schluffe <schluffe@cachyos>
Date: Wed, 25 Feb 2026 23:59:06 +0100
Subject: [PATCH] Fix the animation issue

---
 engine/Scene.ts                    | 9 +++++----
 game/entities/hero/entity.ts       | 4 ++--
 game/entities/portal/entity.ts     | 2 +-
 game/entities/testEntity/entity.ts | 8 ++++----
 4 files changed, 12 insertions(+), 11 deletions(-)

diff --git a/engine/Scene.ts b/engine/Scene.ts
index 54a79a1..56e42ca 100644
--- a/engine/Scene.ts
+++ b/engine/Scene.ts
@@ -28,7 +28,7 @@ export type EntityMap = Map<
 	}
 >;
 
-export type AnimationMap = Map<number, SpriteAnimation>;
+export type AnimationMap = Map<number, { value: SpriteAnimation }>;
 
 export type Scene = {
 	data: SceneData;
@@ -120,7 +120,7 @@ function processSystems(ctx: CanvasRenderingContext2D, delta: number): void {
 		(a, b) => a.position.y - b.position.y,
 	)) {
 		if (animationsMap.has(drawable.id)) {
-			animateSprite(animationsMap.get(drawable.id)!, delta);
+			animateSprite(animationsMap.get(drawable.id)!.value, delta);
 		}
 		draw(ctx, drawable);
 	}
@@ -195,12 +195,13 @@ export async function setScene(name: string): Promise<void> {
 				drawableInstances.push(instance);
 			}
 			if (
-				(instance as { id: number; animation: SpriteAnimation }).animation !==
+				(instance as { id: number; $animation: object }).$animation !==
 				undefined
 			) {
 				animateInstances.set(
 					instance.id,
-					(instance as { id: number; animation: SpriteAnimation }).animation, // FIXME
+					(instance as { id: number; $animation: { value: SpriteAnimation } })
+						.$animation, // TODO: unify that $ value component thing
 				);
 			}
 		}
diff --git a/game/entities/hero/entity.ts b/game/entities/hero/entity.ts
index c700597..da75cf1 100644
--- a/game/entities/hero/entity.ts
+++ b/game/entities/hero/entity.ts
@@ -17,7 +17,7 @@ export type Hero = {
 	velocity: Vector;
 	body: Circle;
 	sprite: Sprite;
-	animation: SpriteAnimation;
+	$animation: { value: SpriteAnimation };
 };
 
 const speed = 0.05;
@@ -35,7 +35,7 @@ const state: Hero = {
 	velocity: createVector(),
 	body: createCircle(createVector(), 4),
 	sprite,
-	animation: createSpriteAnimation(sprite, 500, 2),
+	$animation: { value: createSpriteAnimation(sprite, 500, 2) },
 };
 
 const process = defineEntity("hero", state);
diff --git a/game/entities/portal/entity.ts b/game/entities/portal/entity.ts
index b203149..74de5e3 100644
--- a/game/entities/portal/entity.ts
+++ b/game/entities/portal/entity.ts
@@ -15,5 +15,5 @@ const sprite = {
 defineEntity("portal", {
 	position: createVector(64, 64),
 	sprite,
-	animation: createSpriteAnimation(sprite, 400, 0),
+	$animation: { value: createSpriteAnimation(sprite, 400, 0) },
 });
diff --git a/game/entities/testEntity/entity.ts b/game/entities/testEntity/entity.ts
index d816fd4..016e79b 100644
--- a/game/entities/testEntity/entity.ts
+++ b/game/entities/testEntity/entity.ts
@@ -39,7 +39,7 @@ const animations = {
 
 const process = defineEntity<{
 	position: Vector;
-	animation: SpriteAnimation;
+	$animation: { value: SpriteAnimation };
 	animations: {
 		idle: SpriteAnimation;
 		walk: SpriteAnimation;
@@ -52,7 +52,7 @@ const process = defineEntity<{
 	stuff: number;
 }>("testEntity", {
 	position: createVector(),
-	animation: animations.idle,
+	$animation: { value: animations.idle },
 	animations,
 	sprite: sprites.idle,
 	sprites,
@@ -63,11 +63,11 @@ process((entity, _delta) => {
 	entity.position.x += entity.stuff * 0.5;
 	if (entity.position.x > viewport.canvas.width - 16) {
 		entity.stuff = -1;
-		entity.animation = entity.animations.walk;
+		entity.$animation.value = entity.animations.walk;
 		entity.sprite = entity.sprites.walk;
 	} else if (entity.position.x < 0) {
 		entity.stuff = 1;
-		entity.animation = entity.animations.idle;
+		entity.$animation.value = entity.animations.idle;
 		entity.sprite = entity.sprites.idle;
 	}
 });