Add customer request

src/assets/assets.ts

@@ -16,6 +16,7 @@ const images: Image[] = [
 
 	// UI
 	image('ui/hud', 'hud'),
+	image('ui/bubble', 'bubble'),
 
 	// Titlescreen
 	image('titlescreen/sky', 'title_sky'),

src/components/Customer.ts

@@ -1,6 +1,6 @@
 import { GameScene } from "@/scenes/GameScene";
 import { Button } from "./elements/Button";
-import { Station } from "./Station";
+import { Station, StationType, StationTypeColors } from "./Station";
 import { Employee } from "./Employee";
 
 export class Customer extends Button {
@@ -10,11 +10,16 @@ export class Customer extends Button {
 	public dragY: number;
 	public currentStation: Station | null;
 	public currentEmployee: Employee | null;
+	public requestedStation: StationType | null;
 	public doingCuteThing: boolean;
 
-	private spriteSize: number;
+	// Customer sprite
 	private sprite: Phaser.GameObjects.Sprite;
 
+	// Request bubble
+	private bubble: Phaser.GameObjects.Sprite;
+	private bubbleImage: Phaser.GameObjects.Ellipse;
+
 	constructor(scene: GameScene, x: number, y: number) {
 		super(scene, x, y);
 		scene.add.existing(this);
@@ -26,15 +31,25 @@ export class Customer extends Button {
 		this.dragY = y;
 		this.currentStation = null;
 		this.currentEmployee = null;
+		this.requestedStation = null;
 
 		/* Sprite */
-		this.spriteSize = 150;
+		const size = 150;
 		this.sprite = this.scene.add.sprite(0, 0, "player");
 		this.sprite.setOrigin(0.5, 1.0);
-		this.sprite.y += this.spriteSize / 2;
-		this.sprite.setScale(this.spriteSize / this.sprite.width);
+		this.sprite.y += size / 2;
+		this.sprite.setScale(size / this.sprite.width);
 		this.add(this.sprite);
 
+		this.bubble = this.scene.add.sprite(0, -0.75 * size, "bubble");
+		this.bubble.setScale(0.5);
+		this.bubble.setVisible(false);
+		this.add(this.bubble);
+
+		this.bubbleImage = this.scene.add.ellipse(0, -0.82 * size, 40, 40, 0);
+		this.bubbleImage.setVisible(false);
+		this.add(this.bubbleImage);
+
 		this.bindInteractive(this.sprite, true);
 	}
 
@@ -81,4 +96,17 @@ export class Customer extends Button {
 	setAction(temp: boolean) {
 		this.doingCuteThing = temp;
 	}
+
+	setRequest(type: StationType | null) {
+		if (type !== null) {
+			this.requestedStation = type;
+
+			this.bubble.setVisible(true);
+			this.bubbleImage.setVisible(true);
+			this.bubbleImage.fillColor = StationTypeColors[type];
+		} else {
+			this.bubble.setVisible(false);
+			this.bubbleImage.setVisible(false);
+		}
+	}
 }

src/components/Station.ts

@@ -2,35 +2,51 @@ import { GameScene } from "@/scenes/GameScene";
 import { Button } from "./elements/Button";
 import { Customer } from "./Customer";
 
+export enum StationType {
+	HornAndNails = 0,
+	ScalePolish = 1,
+	GoldBath = 2,
+}
+
+export const StationTypeColors: { [key in StationType]: number } = {
+	[StationType.HornAndNails]: 0xff0000,
+	[StationType.ScalePolish]: 0x00ff00,
+	[StationType.GoldBath]: 0x0000ff,
+};
+
 export class Station extends Button {
+	public stationType: StationType;
 	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) {
+	constructor(scene: GameScene, x: number, y: number, type: StationType) {
 		super(scene, x, y);
 		scene.add.existing(this);
 		this.scene = scene;
+		this.stationType = type;
 
 		this.currentCustomer = null;
 		this.taskDuration = 3000;
 
 		/* Sprite */
 		const size = 150;
-		this.sprite = this.scene.add.rectangle(0, 0, size, size, 0x777777);
+		const color = StationTypeColors[type];
+		this.sprite = this.scene.add.rectangle(0, 0, size, size, color);
+		this.sprite.alpha = 0.5;
 		this.add(this.sprite);
 
 		this.text = this.scene.addText({
 			x: 0,
 			y: size / 2,
-            size: 32,
+			size: 32,
 			text: "Available",
 		});
-        this.text.setOrigin(0.5);
-        this.text.setStroke("#000000", 4);
-        this.add(this.text);
+		this.text.setOrigin(0.5);
+		this.text.setStroke("#000000", 4);
+		this.add(this.text);
 	}
 
 	update(time: number, delta: number) {
@@ -41,18 +57,18 @@ export class Station extends Button {
 	setCustomer(customer: Customer | null) {
 		this.currentCustomer = customer;
 
-		this.sprite.fillColor = customer ? 0x7777ff : 0x777777;
-        this.text.setText(customer ? "Click me!" : "Available");
+		this.sprite.alpha = customer ? 0.75 : 0.5;
+		this.text.setText(customer ? "Click me!" : "Available");
 	}
 
 	startTask() {
-		this.sprite.fillColor = 0x0000ff;
-        this.text.setText("Working");
+		this.sprite.alpha = 1.0;
+		this.text.setText("Working");
 
 		this.scene.addEvent(this.taskDuration, () => {
 			this.emit("taskend");
-			this.sprite.fillColor = this.currentCustomer ? 0x7777ff : 0xff0000;
-            this.text.setText("Click me!");
+			this.sprite.alpha = this.currentCustomer ? 0.75 : 0.5;
+			this.text.setText("Click me!");
 		});
 	}
 }

src/scenes/GameScene.ts

@@ -2,7 +2,7 @@ import { BaseScene } from "@/scenes/BaseScene";
 import { Board } from "@/components/Board";
 import { Employee } from "@/components/Employee";
 import { Customer } from "@/components/Customer";
-import { Station } from "@/components/Station";
+import { Station, StationType } from "@/components/Station";
 import { UI } from "@/components/UI";
 import { custom } from "@neutralinojs/lib";
 
@@ -30,10 +30,10 @@ export class GameScene extends BaseScene {
 		this.board = new Board(this, 900, 500);
 
 		this.stations = [];
-		this.addStation(2, 3);
-		this.addStation(4, 3);
-		this.addStation(6, 3);
-		this.addStation(6, 1);
+		this.addStation(2, 3, StationType.HornAndNails);
+		this.addStation(4, 3, StationType.HornAndNails);
+		this.addStation(6, 3, StationType.ScalePolish);
+		this.addStation(6, 1, StationType.GoldBath);
 
 		this.employees = [];
 		this.addEmployee(5, 5);
@@ -55,9 +55,9 @@ export class GameScene extends BaseScene {
 	}
 
 	// Add new station
-	addStation(gridX: number, gridY: number) {
+	addStation(gridX: number, gridY: number, type: StationType) {
 		const coord = this.board.gridToCoord(gridX, gridY);
-		const station = new Station(this, coord.x, coord.y);
+		const station = new Station(this, coord.x, coord.y, type);
 		this.stations.push(station);
 
 		// Station task completed
@@ -69,6 +69,8 @@ export class GameScene extends BaseScene {
 				customer.setEmployee(null);
 				employee.setAction(false);
 				employee.setCustomer(null);
+
+				this.setCustomerRequest(customer);
 			}
 		});
 	}
@@ -101,6 +103,9 @@ export class GameScene extends BaseScene {
 		const customer = new Customer(this, coord.x, coord.y);
 		this.customers.push(customer);
 
+		// Set random customer request
+		this.setCustomerRequest(customer);
+
 		// Picking up a customer
 		customer.on("pickup", () => {
 			if (customer.currentStation) {
@@ -140,7 +145,6 @@ export class GameScene extends BaseScene {
 
 		// Clicking a customer
 		customer.on("click", () => {
-			console.log("CLICK");
 			this.callEmployee(customer);
 		});
 	}
@@ -161,7 +165,8 @@ export class GameScene extends BaseScene {
 			if (
 				!station.currentCustomer &&
 				distance < closestDistance &&
-				distance < maxDistance
+				distance < maxDistance &&
+				station.stationType === customer.requestedStation
 			) {
 				closestStation = station;
 				closestDistance = distance;
@@ -199,9 +204,17 @@ export class GameScene extends BaseScene {
 			const { x, y } = this.board.gridToCoord(gridX, gridY - 1);
 
 			customer.setEmployee(closestEmployee);
+			customer.setRequest(null);
+
 			closestEmployee.setCustomer(customer);
 			closestEmployee.walkTo(x, y);
 			// Wait for employee.on("walkend")
 		}
 	}
+
+	// Set a random request for the customer
+	setCustomerRequest(customer: Customer) {
+		const type = Phaser.Math.RND.between(0, 2);
+		customer.setRequest(type);
+	}
 }