Add customer and employee interaction

src/components/Board.ts

@@ -32,10 +32,17 @@ export class Board extends Phaser.GameObjects.Container {
 	update(time: number, delta: number) {}
 
 	// Return coordinates of the grid cell
-	getGridCell(gridX: number, gridY: number) {
+	gridToCoord(gridX: number, gridY: number) {
 		return {
 			x: this.x - this.grid.width / 2 + gridX * this.size + this.size / 2,
 			y: this.y - this.grid.height / 2 + gridY * this.size + this.size / 2,
 		};
 	}
+
+	// Return grid cell of the coordinates
+	coordToGrid(x: number, y: number) {
+		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 };
+	}
 }

src/components/Customer.ts

@@ -1,13 +1,16 @@
 import { GameScene } from "@/scenes/GameScene";
 import { Button } from "./elements/Button";
 import { Station } from "./Station";
+import { Employee } from "./Employee";
 
 export class Customer extends Button {
 	public lastX: number; // Last position on the grid
 	public lastY: number;
 	public dragX: number; // Current drag position
 	public dragY: number;
 	public currentStation: Station | null;
+	public currentEmployee: Employee | null;
+	public doingCuteThing: boolean;
 
 	private spriteSize: number;
 	private sprite: Phaser.GameObjects.Sprite;
@@ -22,6 +25,7 @@ export class Customer extends Button {
 		this.dragX = x;
 		this.dragY = y;
 		this.currentStation = null;
+		this.currentEmployee = null;
 
 		/* Sprite */
 		this.spriteSize = 150;
@@ -39,7 +43,8 @@ export class Customer extends Button {
 		this.x += (this.dragX - this.x) * 0.5;
 		this.y += (this.dragY - this.y) * 0.5;
 
-		const squish = 1.0 + 0.02 * Math.sin((6 * time) / 1000);
+		const factor = this.doingCuteThing ? 0.1 : 0.02;
+		const squish = 1.0 + factor * Math.sin((6 * time) / 1000);
 		this.setScale(1.0, squish);
 	}
 
@@ -48,6 +53,7 @@ export class Customer extends Button {
 	}
 
 	onDrag(pointer: Phaser.Input.Pointer, dragX: number, dragY: number) {
+		this.hold = false;
 		this.dragX = pointer.x;
 		this.dragY = pointer.y;
 		this.emit("drag");
@@ -65,4 +71,14 @@ export class Customer extends Button {
 	setStation(station: Station | null) {
 		this.currentStation = station;
 	}
+
+	setEmployee(employee: Employee | null) {
+		this.currentEmployee = employee;
+
+		this.sprite.input!.enabled = !employee;
+	}
+
+	setAction(temp: boolean) {
+		this.doingCuteThing = temp;
+	}
 }

src/components/Employee.ts

@@ -1,8 +1,11 @@
 import { GameScene } from "@/scenes/GameScene";
 import { Button } from "./elements/Button";
+import { Customer } from "./Customer";
 
 export class Employee extends Button {
-	// Sprites
+	public currentCustomer: Customer | null;
+	public doingCuteThing: boolean;
+
 	private spriteSize: number;
 	private sprite: Phaser.GameObjects.Sprite;
 
@@ -11,6 +14,8 @@ export class Employee extends Button {
 		scene.add.existing(this);
 		this.scene = scene;
 
+		this.currentCustomer = null;
+
 		/* Sprite */
 		this.spriteSize = 200;
 		this.sprite = this.scene.add.sprite(0, 0, "worker");
@@ -21,7 +26,41 @@ export class Employee extends Button {
 	}
 
 	update(time: number, delta: number) {
-		const squish = 1.0 + 0.02 * Math.sin((6 * time) / 1000);
+		const factor = this.doingCuteThing ? 0.1 : 0.02;
+		const squish = 1.0 + factor * Math.sin((6 * time) / 1000);
 		this.setScale(1.0, squish);
 	}
+
+	setCustomer(customer: Customer | null) {
+		this.currentCustomer = customer;
+	}
+
+	walkTo(targetX: number, targetY: number) {
+		// TODO: Replace with pathfinding algorithm
+
+		// Temporary: set duration based on distance
+		const distance = Phaser.Math.Distance.Between(
+			this.x,
+			this.y,
+			targetX,
+			targetY
+		);
+
+		// Add tween to move from current position to the target
+		this.scene.tweens.add({
+			targets: this,
+			x: targetX,
+			y: targetY,
+			duration: 2 * distance,
+			ease: "Linear",
+
+			onComplete: () => {
+				this.emit("walkend");
+			},
+		});
+	}
+
+	setAction(temp: boolean) {
+		this.doingCuteThing = temp;
+	}
 }

src/components/Station.ts

@@ -3,22 +3,34 @@ import { Button } from "./elements/Button";
 import { Customer } from "./Customer";
 
 export class Station extends Button {
-	public currentCustomer: Customer | null;
+	public currentCustomer: Customer | null; // The customer using the station
+	public taskDuration: number; // Time it takes to complete a task
 
 	private sprite: Phaser.GameObjects.Rectangle;
+	private text: Phaser.GameObjects.Text;
 
 	constructor(scene: GameScene, x: number, y: number) {
 		super(scene, x, y);
 		scene.add.existing(this);
 		this.scene = scene;
 
-		// The customer using the station
 		this.currentCustomer = null;
+		this.taskDuration = 3000;
 
 		/* Sprite */
 		const size = 150;
-		this.sprite = this.scene.add.rectangle(0, 0, size, size, 0xff0000);
+		this.sprite = this.scene.add.rectangle(0, 0, size, size, 0x777777);
 		this.add(this.sprite);
+
+		this.text = this.scene.addText({
+			x: 0,
+			y: size / 2,
+            size: 32,
+			text: "Available",
+		});
+        this.text.setOrigin(0.5);
+        this.text.setStroke("#000000", 4);
+        this.add(this.text);
 	}
 
 	update(time: number, delta: number) {
@@ -29,6 +41,18 @@ export class Station extends Button {
 	setCustomer(customer: Customer | null) {
 		this.currentCustomer = customer;
 
-        this.sprite.fillColor = customer ? 0x00ff00 : 0xff0000;
+		this.sprite.fillColor = customer ? 0x7777ff : 0x777777;
+        this.text.setText(customer ? "Click me!" : "Available");
+	}
+
+	startTask() {
+		this.sprite.fillColor = 0x0000ff;
+        this.text.setText("Working");
+
+		this.scene.addEvent(this.taskDuration, () => {
+			this.emit("taskend");
+			this.sprite.fillColor = this.currentCustomer ? 0x7777ff : 0xff0000;
+            this.text.setText("Click me!");
+		});
 	}
 }

src/scenes/GameScene.ts

@@ -32,6 +32,8 @@ export class GameScene extends BaseScene {
 		this.stations = [];
 		this.addStation(2, 3);
 		this.addStation(4, 3);
+		this.addStation(6, 3);
+		this.addStation(6, 1);
 
 		this.employees = [];
 		this.addEmployee(5, 5);
@@ -54,21 +56,48 @@ export class GameScene extends BaseScene {
 
 	// Add new station
 	addStation(gridX: number, gridY: number) {
-		const coord = this.board.getGridCell(gridX, gridY);
+		const coord = this.board.gridToCoord(gridX, gridY);
 		const station = new Station(this, coord.x, coord.y);
 		this.stations.push(station);
+
+		// Station task completed
+		station.on("taskend", () => {
+			const customer = station.currentCustomer;
+			const employee = customer?.currentEmployee;
+			if (customer && employee) {
+				customer.setAction(false);
+				customer.setEmployee(null);
+				employee.setAction(false);
+				employee.setCustomer(null);
+			}
+		});
 	}
 
 	// Add new employee
 	addEmployee(gridX: number, gridY: number) {
-		const coord = this.board.getGridCell(gridX, gridY);
+		const coord = this.board.gridToCoord(gridX, gridY);
 		const employee = new Employee(this, coord.x, coord.y);
 		this.employees.push(employee);
+
+		// Employee reached the destination
+		employee.on("walkend", () => {
+			const customer = employee.currentCustomer;
+			if (customer && customer.currentStation) {
+				// Play appropriate animations
+				customer.setAction(true);
+				employee.setAction(true);
+
+				// Wait for station.on("taskend")
+				customer.currentStation.startTask();
+			} else {
+				employee.setCustomer(null);
+			}
+		});
 	}
 
 	// Add new customer
 	addCustomer(gridX: number, gridY: number) {
-		const coord = this.board.getGridCell(gridX, gridY);
+		const coord = this.board.gridToCoord(gridX, gridY);
 		const customer = new Customer(this, coord.x, coord.y);
 		this.customers.push(customer);
 
@@ -92,6 +121,7 @@ export class GameScene extends BaseScene {
 		customer.on("drop", () => {
 			let station = this.getClosestStation(customer);
 			if (station) {
+				// Let go of previous station
 				if (customer.currentStation) {
 					customer.currentStation.setCustomer(null);
 					customer.setStation(null);
@@ -107,6 +137,12 @@ export class GameScene extends BaseScene {
 				customer.snapTo(customer.lastX, customer.lastY);
 			}
 		});
+
+		// Clicking a customer
+		customer.on("click", () => {
+			console.log("CLICK");
+			this.callEmployee(customer);
+		});
 	}
 
 	// Find the closest station to the customer that is not occupied
@@ -133,4 +169,39 @@ export class GameScene extends BaseScene {
 		});
 		return closestStation;
 	}
+
+	// Request an available employee to serve the customer
+	callEmployee(customer: Customer) {
+		// Abort if customer is not assigned to a station
+		if (!customer.currentStation || customer.currentEmployee) {
+			return;
+		}
+
+		let closestEmployee: any = null;
+		let closestDistance = Infinity;
+
+		this.employees.forEach((employee) => {
+			const distance = Phaser.Math.Distance.Between(
+				customer.x,
+				customer.y,
+				employee.x,
+				employee.y
+			);
+			if (!employee.currentCustomer && distance < closestDistance) {
+				closestEmployee = employee;
+				closestDistance = distance;
+			}
+		});
+
+		if (closestEmployee) {
+			const station = customer.currentStation;
+			const { gridX, gridY } = this.board.coordToGrid(station.x, station.y);
+			const { x, y } = this.board.gridToCoord(gridX, gridY - 1);
+
+			customer.setEmployee(closestEmployee);
+			closestEmployee.setCustomer(customer);
+			closestEmployee.walkTo(x, y);
+			// Wait for employee.on("walkend")
+		}
+	}
 }