Add employee pathfinding and animations

src/components/Board.ts

@@ -1,8 +1,8 @@
 import { GameScene } from "@/scenes/GameScene";
 
 export type GridPoint = {
-	gridX: number;
-	gridY: number;
+	x: number;
+	y: number;
 };
 
 export class Board extends Phaser.GameObjects.Container {
@@ -66,9 +66,9 @@ export class Board extends Phaser.GameObjects.Container {
 			this.size,
 			this.size,
 			0xffffff,
-			0.5,
+			0,
 			0xff0000,
-			0.5
+			0
 		);
 		this.add(this.grid);
 	}
@@ -93,7 +93,7 @@ export class Board extends Phaser.GameObjects.Container {
 	coordToGrid(x: number, y: number): GridPoint {
 		const gridX = Math.floor((x - this.x + this.grid.width / 2) / this.size);
 		const gridY = Math.floor((y - this.y + this.grid.height / 2) / this.size);
-		return { gridX, gridY };
+		return { x: gridX, y: gridY };
 	}
 
 	// Return nav grid cell of the coordinates
@@ -104,6 +104,14 @@ export class Board extends Phaser.GameObjects.Container {
 		const gridY = Math.floor(
 			(y - this.y + this.grid.height / 2) / (this.size / 7)
 		);
-		return { gridX, gridY };
+		return { x: gridX, y: gridY };
+	}
+
+	// Return nav coord of world coords, not rounded
+	coordToNav(x: number, y: number): GridPoint {
+		return {
+			x: (x - this.x + this.grid.width / 2) / (this.size / 7),
+			y: (y - this.y + this.grid.height / 2) / (this.size / 7),
+		};
 	}
 }

src/components/Employee.ts

@@ -7,11 +7,12 @@ export class Employee extends Button {
 	public employeeId: EmployeeId;
 	public hasBeenPurchased: boolean;
 	public currentCustomer: Customer | null;
-	public doingCuteThing: boolean;
+	public isWorking: boolean;
 
 	private cellSize: number;
 	private spriteCont: Phaser.GameObjects.Container;
 	private sprite: Phaser.GameObjects.Sprite;
+	private graphics: Phaser.GameObjects.Graphics;
 
 	public startX: number;
 	public startY: number;
@@ -29,7 +30,7 @@ export class Employee extends Button {
 		this.employeeId = id;
 		this.cellSize = cellSize;
 		this.currentCustomer = null;
-		this.doingCuteThing = false;
+		this.isWorking = false;
 
 		this.startX = x;
 		this.startY = y;
@@ -41,20 +42,29 @@ export class Employee extends Button {
 		this.spriteCont = this.scene.add.container(0, this.spriteOffset);
 		this.add(this.spriteCont);
 
-		this.sprite = this.scene.add.sprite(0, 0, this.spriteKey);
+		this.sprite = this.scene.add.sprite(0, 0, this.spriteKeys.idle);
 		this.sprite.setOrigin(0.5, 1.0);
 		this.sprite.setScale(this.spriteSize / this.sprite.width);
 		this.spriteCont.add(this.sprite);
 
+		this.graphics = this.scene.add.graphics();
+
 		// Make employee clickable during shopping
 		this.bindInteractive(this.sprite);
 		this.sprite.input!.enabled = false;
 	}
 
 	update(time: number, delta: number) {
-		const factor = this.doingCuteThing ? 0.1 : this.hasBeenPurchased ? 0.02 : 0;
+		const factor = this.isWorking ? 0.1 : this.hasBeenPurchased ? 0.02 : 0;
 		const squish = 1.0 + factor * Math.sin((6 * time) / 1000);
 		this.spriteCont.setScale(1.0, squish - 0.2 * this.holdSmooth);
+
+		if (this.isWorking) {
+			const count = this.spriteKeys.work.length;
+			const index = Math.floor(time / 200) % count;
+			const frame = this.spriteKeys.work[index];
+			this.sprite.setTexture(frame);
+		}
 	}
 
 	setCustomer(customer: Customer | null) {
@@ -65,48 +75,48 @@ export class Employee extends Button {
 		this.currentCustomer = customer;
 	}
 
-	walkTo(paths: Array<{x: number, y: number}>) {
-		// TODO: Replace with pathfinding algorithm
-
-		if(paths.length <= 0) return;
-
-		console.log("walkTo", paths);
-
-		const last = paths[paths.length-1]
+	walk(path: Phaser.Curves.Path) {
+		// Debug draw path
+		this.graphics.clear();
+		this.graphics.lineStyle(8, 0xff0000);
+		path.draw(this.graphics);
+		this.graphics.fillStyle(0xff0000);
+		this.graphics.fillCircle(path.getPoint(0).x, path.getPoint(0).y, 12);
+		this.graphics.fillCircle(path.getPoint(1).x, path.getPoint(1).y, 12);
 
-		// Temporary: set duration based on distance
-		const distance = Phaser.Math.Distance.Between(
-			this.x,
-			this.y,
-			last.x,
-			last.y
-		);
-
-		const path = paths.reduce((path, pos) => {
-			return path.lineTo(pos.x, pos.y);
-		}, new Phaser.Curves.Path(this.x, this.y));
-
-		console.log(path);
+		const distance = path.getLength();
 
 		// Add tween to move from current position to the target
 		this.scene.tweens.addCounter({
-			duration: 2 * distance,
+			duration: (10 * distance) / this.walkSpeed,
 			ease: "Linear",
 
-			onUpdate: ({progress}) => {
+			onUpdate: ({ progress }) => {
 				const pos = path.getPoint(progress);
-				this.setX(pos.x);
-				this.setY(pos.y);
+				this.setPosition(pos.x, pos.y);
+
+				const count = this.spriteKeys.walk.length;
+				const index = Math.floor((progress * distance) / 40) % count;
+				const frame = this.spriteKeys.walk[index];
+				this.sprite.setTexture(frame);
 			},
 
 			onComplete: () => {
+				const pos = path.getPoint(1);
+				this.setPosition(pos.x, pos.y);
+
+				this.graphics.clear();
+				this.sprite.setTexture(this.spriteKeys.idle);
 				this.emit("walkend");
 			},
 		});
 	}
 
-	setAction(temp: boolean) {
-		this.doingCuteThing = temp;
+	setAction(isWorking: boolean) {
+		this.isWorking = isWorking;
+		if (!isWorking) {
+			this.sprite.setTexture(this.spriteKeys.idle);
+		}
 	}
 
 	setClickable(value: boolean) {
@@ -121,7 +131,7 @@ export class Employee extends Button {
 			this.setAlpha(1.0);
 		} else if (this.upgradeTo) {
 			this.employeeId = this.upgradeTo!;
-			this.sprite.setTexture(this.spriteKey);
+			this.sprite.setTexture(this.spriteKeys.idle);
 		}
 	}
 
@@ -130,7 +140,7 @@ export class Employee extends Button {
 		this.hasBeenPurchased = true;
 		this.setAlpha(1.0);
 		this.employeeId = id;
-		this.sprite.setTexture(this.spriteKey);
+		this.sprite.setTexture(this.spriteKeys.idle);
 	}
 
 	/* Getters */
@@ -147,8 +157,8 @@ export class Employee extends Button {
 		return EmployeeData[this.employeeId].tier;
 	}
 
-	get spriteKey(): string {
-		return EmployeeData[this.employeeId].spriteKey;
+	get spriteKeys() {
+		return EmployeeData[this.employeeId].spriteKeys;
 	}
 
 	get spriteScale(): number {

src/components/EmployeeData.ts

@@ -20,7 +20,12 @@ export interface EmployeeInterface {
 	type: EmployeeType; // Employee type
 	name: string; // Employee name
 	tier: number; // Tier number
-	spriteKey: string; // Employee image key
+	spriteKeys: {
+		// Employee sprite keys
+		idle: string;
+		walk: string[];
+		work: string[];
+	};
 	walkSpeed: number; // Speed of the employee walking
 	workSpeed: number; // Speed of the employee working
 	cost: number; // Cost to purchase that tier of employee
@@ -32,8 +37,12 @@ export const EmployeeData: { [key in EmployeeId]: EmployeeInterface } = {
 		type: EmployeeType.Raccoon,
 		name: "Raccoon employee",
 		tier: 1,
-		spriteKey: "worker",
-		walkSpeed: 1,
+		spriteKeys: {
+			idle: "worker",
+			walk: ["workerWalk1", "workerWalk2", "workerWalk3", "workerWalk2"],
+			work: ["workerWork1", "workerWork2", "workerWork1", "worker"],
+		},
+		walkSpeed: 2,
 		workSpeed: 1,
 		cost: 300,
 		upgradeTo: EmployeeId.RaccoonTier2,
@@ -42,8 +51,12 @@ export const EmployeeData: { [key in EmployeeId]: EmployeeInterface } = {
 		type: EmployeeType.Raccoon,
 		name: "Raccoon employee",
 		tier: 2,
-		spriteKey: "worker",
-		walkSpeed: 2,
+		spriteKeys: {
+			idle: "worker",
+			walk: ["workerWalk1", "workerWalk2", "workerWalk3", "workerWalk2"],
+			work: ["workerWork1", "workerWork2", "workerWork1", "worker"],
+		},
+		walkSpeed: 3,
 		workSpeed: 2,
 		cost: 400,
 		upgradeTo: EmployeeId.RaccoonTier3,
@@ -52,8 +65,12 @@ export const EmployeeData: { [key in EmployeeId]: EmployeeInterface } = {
 		type: EmployeeType.Raccoon,
 		name: "Raccoon employee",
 		tier: 3,
-		spriteKey: "worker",
-		walkSpeed: 3,
+		spriteKeys: {
+			idle: "worker",
+			walk: ["workerWalk1", "workerWalk2", "workerWalk3", "workerWalk2"],
+			work: ["workerWork1", "workerWork2", "workerWork1", "worker"],
+		},
+		walkSpeed: 5,
 		workSpeed: 3,
 		cost: 800,
 	},
@@ -62,8 +79,12 @@ export const EmployeeData: { [key in EmployeeId]: EmployeeInterface } = {
 		type: EmployeeType.Human,
 		name: "Human employee",
 		tier: 1,
-		spriteKey: "player",
-		walkSpeed: 1,
+		spriteKeys: {
+			idle: "player",
+			walk: ["player"],
+			work: ["player"],
+		},
+		walkSpeed: 2,
 		workSpeed: 1,
 		cost: 1000,
 		upgradeTo: EmployeeId.HumanTier2,
@@ -72,8 +93,12 @@ export const EmployeeData: { [key in EmployeeId]: EmployeeInterface } = {
 		type: EmployeeType.Human,
 		name: "Human employee",
 		tier: 2,
-		spriteKey: "player",
-		walkSpeed: 2,
+		spriteKeys: {
+			idle: "player",
+			walk: ["player"],
+			work: ["player"],
+		},
+		walkSpeed: 3,
 		workSpeed: 2,
 		cost: 400,
 		upgradeTo: EmployeeId.HumanTier3,
@@ -82,8 +107,12 @@ export const EmployeeData: { [key in EmployeeId]: EmployeeInterface } = {
 		type: EmployeeType.Human,
 		name: "Human employee",
 		tier: 3,
-		spriteKey: "player",
-		walkSpeed: 3,
+		spriteKeys: {
+			idle: "player",
+			walk: ["player"],
+			work: ["player"],
+		},
+		walkSpeed: 5,
 		workSpeed: 3,
 		cost: 800,
 	},

src/components/Station.ts

@@ -64,7 +64,7 @@ export class Station extends Button {
 		this.sprite = this.scene.add.image(0, 0, this.spriteKey);
 		this.sprite.setOrigin(0.5, 1.0);
 		this.sprite.setScale(this.spriteSize / this.sprite.width);
-		this.sprite.setTint(interpolateColor(0xffffff, this.stationTypeColor, 0.5));
+		this.sprite.setTint(interpolateColor(0xffffff, this.stationTypeColor, 0.2));
 		this.spriteCont.add(this.sprite);
 
 		this.text = this.scene.addText({
@@ -343,7 +343,7 @@ export class Station extends Button {
 	}
 
 	get spriteOffset(): number {
-		return 0.4 * this.spriteSize;
+		return 0.5 * this.spriteSize;
 	}
 
 	get taskDuration(): number {

src/components/UI.ts

@@ -118,6 +118,8 @@ export class UI extends Phaser.GameObjects.Container {
 
 	setShoppingMode(isShopping: boolean) {
 		this.nextButton.setVisible(isShopping);
-		this.newLocationButton.setVisible(isShopping);
+
+		const canUpgrade = this.newLocationButton.getData("cost") !== undefined;
+		this.newLocationButton.setVisible(isShopping && canUpgrade);
 	}
 }