WIP

dev/main.tsx

@@ -69,7 +69,7 @@ const DevTools: Component<{ gameContainer: HTMLElement }> = ({
 
 	adjustGameContainer(gameContainer, width());
 
-	const [currentScale, setCurrentScale] = createSignal(viewport.initialScale);
+	const [currentScale, setCurrentScale] = createSignal(viewport.scale);
 	const [sceneData, setSceneData] = createSignal(currentScene.data);
 	const [scenes] = createSignal(scenesRaw);
 	const [entities, setEntities] = createSignal(

engine/Pointer.ts

@@ -54,11 +54,11 @@ function adjustPointerPosition(
 	clientX: number,
 	clientY: number,
 ): void {
-	const { ctx, translation: position, initialScale } = viewport;
+	const { ctx, translation: position, scale } = viewport;
 	const clientRect = ctx.canvas.getBoundingClientRect();
 
-	pointer.position.x = (clientX - clientRect.x + position.x) / initialScale;
-	pointer.position.y = (clientY - clientRect.y + position.y) / initialScale;
+	pointer.position.x = (clientX - clientRect.x + position.x) / scale;
+	pointer.position.y = (clientY - clientRect.y + position.y) / scale;
 }
 
 export function listenPointer(): () => void {

engine/Viewport.ts

@@ -1,7 +1,7 @@
 import { createVector, type Vector } from "#/lib/Vector.ts";
 
 export type Viewport = {
-	initialScale: number;
+	scale: number;
 	imageSmoothing: CanvasImageSmoothing;
 	translation: Vector;
 	ctx: CanvasRenderingContext2D;
@@ -11,7 +11,7 @@ export type Viewport = {
 };
 
 export const viewport: Viewport = {
-	initialScale: 4,
+	scale: 4,
 	imageSmoothing: {
 		imageSmoothingEnabled: false,
 		imageSmoothingQuality: "low",
@@ -45,13 +45,13 @@ export function initViewport(): void {
 }
 
 export function setScale(scale: number): void {
-	viewport.initialScale = scale;
+	viewport.scale = scale;
 	self.dispatchEvent(new Event("resize"));
 }
 
 export function resizeCanvas(width: number, height: number): void {
 	const {
-		initialScale,
+		scale: initialScale,
 		imageSmoothing,
 		ctx,
 		canvas,

entities/hero/entity.ts

@@ -1,6 +1,7 @@
 import charIdle from "#/assets/char-idle.png";
 import { createAnimation, playAnimation } from "#/engine/Animation.ts";
 import { defineEntity } from "#/engine/Entity.ts";
+import { keyboardInput } from "#/engine/Keyboard.ts";
 import { pointer } from "#/engine/Pointer.ts";
 import { fromSrc, type Sprite } from "#/lib/Sprite.ts";
 
@@ -25,4 +26,9 @@ process((entity, delta) => {
 		entity.position.x = pointer.position.x;
 		entity.position.y = pointer.position.y;
 	}
+
+	entity.position.x -= keyboardInput.arrowLeft ? 1 : 0;
+	entity.position.x += keyboardInput.arrowRight ? 1 : 0;
+	entity.position.y -= keyboardInput.arrowUp ? 1 : 0;
+	entity.position.y += keyboardInput.arrowDown ? 1 : 0;
 });

main.ts

@@ -6,6 +6,7 @@ import {
 	resizeCanvas,
 	viewport,
 } from "#/engine/Viewport.ts";
+import { listenKeyboard } from "./engine/Keyboard.ts";
 
 let then = self.performance.now();
 let delta = 0;
@@ -32,6 +33,7 @@ function animate(timestamp: number): void {
 	});
 
 	listenPointer();
+	listenKeyboard();
 
 	animate(delta);
 })();