Add station front masking, hiding customers inside the baths

src/components/Customer.ts

@@ -392,8 +392,27 @@ export class Customer extends Button {
 		});
 	}
 
+	applyMask(station: Station) {
+		if (station.foregroundMask) {
+			this.scene.tweens.addCounter({
+				from: 0,
+				to: 1,
+				yoyo: true,
+				duration: 200,
+				ease: "Sine.easeInOut",
+				onUpdate: (tween, target, key, current) => {
+					this.spriteCont.y = this.spriteOffset - 0.3 * this.cellSize * current;
+				},
+				onYoyo: () => {
+					this.setMask(station.foregroundMask);
+				},
+			});
+		}
+	}
+
 	setStation(station: Station | null) {
 		this.currentStation = station;
+		this.clearMask();
 
 		if (station) {
 			this.lastX = station.x;

src/components/Station.ts

@@ -40,6 +40,9 @@ export class Station extends Button {
 	private spriteCont: Phaser.GameObjects.Container;
 	private sprite: Phaser.GameObjects.Image;
 
+	private maskImage: Phaser.GameObjects.Image;
+	public foregroundMask: Phaser.Display.Masks.BitmapMask;
+
 	private progressTimer: Timer;
 	private upgradeIcon: UpgradeIcon;
 
@@ -73,6 +76,19 @@ export class Station extends Button {
 		this.sprite.setTint(interpolateColor(0xffffff, this.stationTypeColor, 0.2));
 		this.spriteCont.add(this.sprite);
 
+		const frontKey = this.spriteKey + "_front";
+		if (scene.textures.exists(frontKey)) {
+			this.maskImage = this.scene.make
+				.image({
+					key: frontKey,
+					add: false,
+				})
+				.setOrigin(0.5, 1);
+
+			this.foregroundMask = this.maskImage.createBitmapMask();
+			this.foregroundMask.invertAlpha = true;
+		}
+
 		this.upgradeIcon = new UpgradeIcon(
 			scene,
 			x + 0.3 * cellSize,
@@ -123,6 +139,11 @@ export class Station extends Button {
 		const squish = 1.0 + amount * Math.sin((6 * time) / 1000);
 		this.spriteCont.setScale(1.0, squish - 0.2 * this.holdSmooth);
 
+		if (this.maskImage) {
+			const scale = this.spriteSize / this.maskImage.width;
+			this.maskImage.setScale(scale, scale * (squish - 0.2 * this.holdSmooth));
+		}
+
 		this.upgradeIcon.update(time, delta);
 	}
 
@@ -265,10 +286,7 @@ export class Station extends Button {
 			this.upgradeIcon.setPurchased(true);
 		} else if (this.upgradeTo) {
 			this.stationId = this.upgradeTo!;
-			this.sprite.setTexture(this.spriteKey);
-			this.spriteCont.x = this.spriteOffsetX;
-			this.spriteCont.y = this.spriteOffsetY;
-			this.sprite.setScale(this.spriteSize / this.sprite.width);
+			this.updateTexture();
 		}
 
 		if (this.upgradeTo === undefined) {
@@ -281,11 +299,24 @@ export class Station extends Button {
 		this.hasBeenPurchased = true;
 		this.setAlpha(1.0);
 		this.stationId = id;
+		this.updateTexture();
+		this.upgradeIcon.setPurchased(true);
+	}
+
+	updateTexture() {
 		this.sprite.setTexture(this.spriteKey);
 		this.spriteCont.x = this.spriteOffsetX;
 		this.spriteCont.y = this.spriteOffsetY;
 		this.sprite.setScale(this.spriteSize / this.sprite.width);
-		this.upgradeIcon.setPurchased(true);
+
+		if (this.maskImage) {
+			this.maskImage.setTexture(this.spriteKey + "_front");
+			this.maskImage.setPosition(
+				this.x + this.spriteCont.x,
+				this.y + this.spriteCont.y
+			);
+			this.maskImage.setScale(this.spriteSize / this.maskImage.width);
+		}
 	}
 
 	applyItem(id: number, sp: string) {

src/scenes/GameScene.ts

@@ -453,8 +453,6 @@ export class GameScene extends BaseScene {
 				if (employeeId !== undefined) {
 					this.addEmployee(gridX, gridY, employeeId);
 				}
-
-				console.log(blockType, stationId, employeeId);
 			}
 		}
 
@@ -744,8 +742,7 @@ export class GameScene extends BaseScene {
 		// Picking up a customer
 		customer.on("pickup", () => {
 			if (customer.currentStation) {
-				// customer.currentStation.setCustomer(null);
-				// customer.setStation(null);
+				customer.clearMask();
 			}
 		});
 
@@ -769,8 +766,10 @@ export class GameScene extends BaseScene {
 
 				station.setCustomer(customer);
 				customer.setStation(station);
+				customer.applyMask(station);
 			} else if (customer.currentStation) {
 				customer.snapTo(customer.currentStation.x, customer.currentStation.y);
+				customer.applyMask(customer.currentStation);
 			} else {
 				customer.snapTo(customer.lastX, customer.lastY);
 			}
@@ -819,11 +818,13 @@ export class GameScene extends BaseScene {
 	// Get available seat for new customers to go to
 	getAvailableWaitingSeat(id: CustomerId) {
 		// TODO: Use id to ensure seat and stations are available for tier
-		return this.stations.find(
-			(s) =>
-				s.stationType === StationType.Waiting &&
-				s.hasBeenPurchased &&
-				!s.currentCustomer
+		return Phaser.Math.RND.pick(
+			this.stations.filter(
+				(s) =>
+					s.stationType === StationType.Waiting &&
+					s.hasBeenPurchased &&
+					!s.currentCustomer
+			)
 		);
 	}