WIP

engine/Viewport.ts

@@ -8,7 +8,7 @@ export type Viewport = {
 	canvas: HTMLCanvasElement;
 	gameContainer: HTMLElement;
 	canvasContainer: HTMLElement;
-	bounds: {
+	boundaries: {
 		minX: number;
 		minY: number;
 		maxX: number;
@@ -27,7 +27,7 @@ export const viewport: Viewport = {
 	canvas: null as unknown as HTMLCanvasElement,
 	gameContainer: null as unknown as HTMLElement,
 	canvasContainer: null as unknown as HTMLElement,
-	bounds: {
+	boundaries: {
 		minX: 0,
 		minY: 0,
 		maxX: 0,
@@ -70,7 +70,7 @@ export function resizeCanvas(width: number, height: number): void {
 		canvasContainer,
 		gameContainer,
 		translation,
-		bounds,
+		boundaries,
 	} = viewport;
 
 	const containerWidth = (gameContainer.offsetWidth / scale) | 0;
@@ -87,10 +87,10 @@ export function resizeCanvas(width: number, height: number): void {
 
 	canvasContainer.style = `width: ${canvasWidth}px; height: ${canvasHeight}px;`;
 
-	bounds.minX = translation.x;
+	boundaries.minX = translation.x;
-	bounds.minY = translation.y;
+	boundaries.minY = translation.y;
-	bounds.maxX = translation.x + canvas.width;
+	boundaries.maxX = translation.x + canvas.width;
-	bounds.maxY = translation.x + canvas.height;
+	boundaries.maxY = translation.x + canvas.height;
 }
 
 export function resetCtx() {

engine/lib/Signal.ts

@@ -8,9 +8,9 @@ export function createSignal<T>(value: T): [() => T, (value: T) => void] {
 
 	const getter = () => {
 		current !== null && observers.add(current);
-
 		return innerValue;
 	};
+
 	const setter = (value: T) => {
 		innerValue = value;
 		for (const observer of observers) {

engine/system/drawSprites.ts

@@ -29,7 +29,7 @@ sceneChangeSet.add((sceneData) => {
 });
 
 export function drawSprites(ctx: CanvasRenderingContext2D): void {
-	const { bounds } = viewport;
+	const { boundaries } = viewport;
 
 	visibleDrawables.length = 0;
 	for (const drawable of drawables) {
@@ -40,10 +40,10 @@ export function drawSprites(ctx: CanvasRenderingContext2D): void {
 		const relY = pos.y + sprite.offset.y;
 
 		if (
-			relX + sprite.width > bounds.minX &&
+			relX + sprite.width > boundaries.minX &&
-			relX < bounds.maxX &&
+			relX < boundaries.maxX &&
-			relY + sprite.height > bounds.minY &&
+			relY + sprite.height > boundaries.minY &&
-			relY < bounds.maxY
+			relY < boundaries.maxY
 		) {
 			visibleDrawables.push(drawable);
 		}

game/entities/hero/entity.ts

@@ -34,7 +34,7 @@ const process = defineEntity("hero", {
 });
 
 createEffect(() => {
-	console.log(speed());
+	console.log("speed: ", speed());
 });
 
 let onceGuard = true;

game/entities/testEntity/entity.ts

@@ -83,6 +83,9 @@ process((id, delta) => {
 	velocity.x = stuff.value * 0.05;
 	position.x += velocity.x * delta;
 
+	// @ts-ignore
+	window.viewport = viewport;
+
 	if (position.x + collider.offset.x > viewport.canvas.width - 16) {
 		stuff.value = -1;
 		animation.value = animations.walk;