WIP

engine/system/animateSprites.ts

@@ -0,0 +1,13 @@
+import $ from "#/engine/Scene.ts";
+import {
+	animateSprite,
+	type Sprite,
+	type SpritePlayback,
+} from "#/engine/Sprite.ts";
+
+export function animateSprites(delta: number) {
+	for (const [id, playback] of $<SpritePlayback>("playback").entries()) {
+		const sprite = $<Sprite>("sprite").get(id)!;
+		animateSprite(sprite.value, playback.value, delta);
+	}
+}

engine/system/drawSprites.ts

@@ -0,0 +1,39 @@
+import type { Box } from "#/engine/Box.ts";
+import { sceneChangeSet, sceneComponentsMap } from "#/engine/Scene.ts";
+import { drawSprite, type Sprite, spriteSheetMap } from "#/engine/Sprite.ts";
+import type { Vector } from "#/engine/Vector.ts";
+
+const drawables: Array<{ position: Box<Vector>; sprite: Box<Sprite> }> = [];
+sceneChangeSet.add((sceneData) => {
+	drawables.length = 0;
+
+	const sprites = [
+		...sceneComponentsMap.get(sceneData.name)!.get("sprite")!.values(),
+	] as Array<Box<Sprite>>;
+
+	sceneComponentsMap
+		.get(sceneData.name)!
+		.get("position")!
+		.values()
+		.forEach((box, index) => {
+			drawables.push({
+				position: box as Box<Vector>,
+				sprite: sprites[index],
+			});
+		});
+});
+
+export function drawSprites(ctx: CanvasRenderingContext2D) {
+	for (const drawable of drawables.sort(
+		(a, b) => a.position.value.y - b.position.value.y,
+	)) {
+		drawSprite(
+			ctx,
+			spriteSheetMap.get(drawable.sprite.value.src)!,
+			drawable.sprite.value.xStart,
+			drawable.sprite.value.yStart,
+			drawable.position.value.x,
+			drawable.position.value.y,
+		);
+	}
+}

main.ts

@@ -1,20 +1,8 @@
-import type { Box } from "#/engine/Box.ts";
 import { listenKeyboard } from "#/engine/Keyboard.ts";
 import { listenPointer } from "#/engine/Pointer.ts";
-import $, {
+import { currentScene, setScene } from "#/engine/Scene.ts";
-	currentScene,
+import { animateSprites } from "#/engine/system/animateSprites.ts";
-	sceneChangeSet,
+import { drawSprites } from "#/engine/system/drawSprites.ts";
-	sceneComponentsMap,
-	setScene,
-} from "#/engine/Scene.ts";
-import {
-	animateSprite,
-	drawSprite,
-	type Sprite,
-	type SpritePlayback,
-	spriteSheetMap,
-} from "#/engine/Sprite.ts";
-import type { Vector } from "#/engine/Vector.ts";
 import {
 	initViewport,
 	resetCtx,
@@ -22,48 +10,6 @@ import {
 	viewport,
 } from "#/engine/Viewport.ts";
 
-function animateSpriteSystem() {
-	for (const [id, playback] of $<SpritePlayback>("playback").entries()) {
-		const sprite = $<Sprite>("sprite").get(id)!;
-		animateSprite(sprite.value, playback.value, delta);
-	}
-}
-
-const drawables: Array<{ position: Box<Vector>; sprite: Box<Sprite> }> = [];
-sceneChangeSet.add((sceneData) => {
-	drawables.length = 0;
-
-	const sprites = [
-		...sceneComponentsMap.get(sceneData.name)!.get("sprite")!.values(),
-	] as Array<Box<Sprite>>;
-
-	sceneComponentsMap
-		.get(sceneData.name)!
-		.get("position")!
-		.values()
-		.forEach((box, index) => {
-			drawables.push({
-				position: box as Box<Vector>,
-				sprite: sprites[index],
-			});
-		});
-});
-
-function drawSpriteSystem() {
-	for (const drawable of drawables.sort(
-		(a, b) => a.position.value.y - b.position.value.y,
-	)) {
-		drawSprite(
-			viewport.ctx,
-			spriteSheetMap.get(drawable.sprite.value.src)!,
-			drawable.sprite.value.xStart,
-			drawable.sprite.value.yStart,
-			drawable.position.value.x,
-			drawable.position.value.y,
-		);
-	}
-}
-
 let then = self.performance.now();
 let delta = 0;
 function animate(timestamp: number): void {
@@ -73,8 +19,8 @@ function animate(timestamp: number): void {
 	resetCtx();
 	currentScene.process(viewport.ctx, delta);
 
-	animateSpriteSystem();
+	animateSprites(delta);
-	drawSpriteSystem();
+	drawSprites(viewport.ctx);
 
 	requestAnimationFrame(animate);
 }