2 files changed, 33 insertions, 7 deletions
diff --git a/src/controller/entitycontext.ts b/src/controller/entitycontext.ts
index c1eb1fc..6932227 100644
--- a/src/controller/entitycontext.ts
+++ b/src/controller/entitycontext.ts
@@ -1,4 +1,4 @@
-import { EntityData } from '../model/data/entity';
+import { EntityAnimation, EntityData } from '../model/data/entity';
 
 import { loadEntity } from '../view/entity';
 import { Renderer } from '../view/renderer/renderer';
@@ -20,21 +20,30 @@ export class EntityContext implements CollidableGroup {
 			name,
 			await loadEntity(renderer, entity),
 			mkCollision(entity.collision),
+			entity.animation,
 		);
 	}
 
 	public readonly pos: vec2 = vec2.create();
 
+	private readonly totalTime: number;
+
 	private constructor(
 		private readonly renderer: Renderer,
 		private readonly name: string,
-		private readonly view: SpriteView,
+		private readonly sprites: SpriteView[],
 		private readonly collision: Collidable[],
-	) {}
+		private readonly animation?: EntityAnimation,
+	) {
+		if (animation)
+			this.totalTime = animation.sequence.reduce((a, s) => a + s[0], 0);
+		else
+			this.totalTime = 0;
+	}
 
-	public render() {
+	public render(time: number) {
 		this.renderer.setTranslation(this.pos);
-		this.view.render();
+		this.getSprite(time).render();
 	}
 
 	public getTranslation(): vec2 {
@@ -48,4 +57,18 @@ export class EntityContext implements CollidableGroup {
 	public interact() {
 		alert(`You've interacted with ${this.name}!`);
 	}
+
+	private getSprite(time: number): SpriteView {
+		time %= this.totalTime;
+
+		if (this.animation) {
+			for (const [len, sprite] of this.animation.sequence) {
+				time -= len;
+				if (time < 0)
+					return this.sprites[sprite];
+			}
+		}
+
+		return this.sprites[0];
+	}
 }
diff --git a/src/controller/gamecontext.ts b/src/controller/gamecontext.ts
index 9c25c6b..771affa 100644
--- a/src/controller/gamecontext.ts
+++ b/src/controller/gamecontext.ts
@@ -19,19 +19,22 @@ export class GameContext implements CollidableGroup {
 		const map = this.loadMap(renderer, 'test');
 		const loadPlayer = EntityContext.load(renderer, 'green_circle');
 		const loadEntity = EntityContext.load(renderer, 'red_circle');
+		const loadEntity2 = EntityContext.load(renderer, 'square');
 
 		const [mapView, mapCollision] = await map;
 		const player = await loadPlayer;
 		const entity = await loadEntity;
+		const entity2 = await loadEntity2;
 
 		vec2.set(player.pos, 6, 6);
 		vec2.set(entity.pos, 3, 3);
+		vec2.set(entity2.pos, 3, 8);
 
 		return new GameContext(
 			renderer,
 			mapView,
 			player,
-			[entity],
+			[entity, entity2],
 			mapCollision,
 		);
 	}
@@ -168,7 +171,7 @@ export class GameContext implements CollidableGroup {
 		this.mapView.render();
 
 		for (const r of [...this.entities, this.player])
-			r.render();
+			r.render(time);
 
 		window.requestAnimationFrame(this.render);
 	}