Move items onto the grid

src/components/Board.ts

@@ -1,6 +1,8 @@
 import { GameScene } from "@/scenes/GameScene";
 
 export class Board extends Phaser.GameObjects.Container {
+	public size: number;
+
 	private grid: Phaser.GameObjects.Grid;
 	private things: any[];
 
@@ -9,16 +11,16 @@ export class Board extends Phaser.GameObjects.Container {
 		scene.add.existing(this);
 		this.scene = scene;
 
-		const size = 130;
+		this.size = 130;
 		this.grid = this.scene.add.grid(
 			0,
 			0,
-			8*size,
-			6*size,
-			size,
-			size,
+			8 * this.size,
+			6 * this.size,
+			this.size,
+			this.size,
 			0xffffff,
-			0.5,
+			0.2,
 			0x000000,
 			0.5
 		);
@@ -28,4 +30,12 @@ export class Board extends Phaser.GameObjects.Container {
 	}
 
 	update(time: number, delta: number) {}
+
+	// Return coordinates of the grid cell
+	getGridCell(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,
+		};
+	}
 }

src/components/Customer.ts

@@ -3,7 +3,9 @@ import { Button } from "./elements/Button";
 import { Station } from "./Station";
 
 export class Customer extends Button {
-	public dragX: number;
+	public lastX: number; // Last position on the grid
+	public lastY: number;
+	public dragX: number; // Current drag position
 	public dragY: number;
 	public currentStation: Station | null;
 
@@ -15,6 +17,8 @@ export class Customer extends Button {
 		scene.add.existing(this);
 		this.scene = scene;
 
+		this.lastX = x;
+		this.lastY = y;
 		this.dragX = x;
 		this.dragY = y;
 		this.currentStation = null;
@@ -57,4 +61,8 @@ export class Customer extends Button {
 		this.dragX = x;
 		this.dragY = y;
 	}
+
+	setStation(station: Station | null) {
+		this.currentStation = station;
+	}
 }

src/components/Station.ts

@@ -25,4 +25,10 @@ export class Station extends Button {
 		const squish = 1.0 + 0.02 * Math.sin((6 * time) / 1000);
 		this.setScale(1.0, squish);
 	}
+
+	setCustomer(customer: Customer | null) {
+		this.currentCustomer = customer;
+
+        this.sprite.fillColor = customer ? 0x00ff00 : 0xff0000;
+	}
 }

src/scenes/GameScene.ts

@@ -27,57 +27,23 @@ export class GameScene extends BaseScene {
 		this.background.setOrigin(0);
 		this.fitToScreen(this.background);
 
-		this.board = new Board(this, 1300, 500);
+		this.board = new Board(this, 900, 500);
 
-		this.stations = [
-			new Station(this, 200, 800),
-			new Station(this, 400, 800),
-			new Station(this, 600, 800),
-		];
+		this.stations = [];
+		this.addStation(2, 3);
+		this.addStation(4, 3);
 
-		this.employees = [
-			new Employee(this, 200, 200),
-			new Employee(this, 400, 200),
-		];
+		this.employees = [];
+		this.addEmployee(5, 5);
+		this.addEmployee(4, 5);
 
-		this.customers = [
-			new Customer(this, 200, 500),
-			new Customer(this, 400, 500),
-			new Customer(this, 600, 500),
-		];
+		this.customers = [];
+		this.addCustomer(0, 0);
+		this.addCustomer(1, 0);
+		this.addCustomer(2, 0);
 
 		this.ui = new UI(this);
 		this.ui.setVisible(false);
-
-		// Customer interaction logic
-		this.customers.forEach((customer) => {
-			// Picking up a customer
-			customer.on("pickup", () => {
-				if (customer.currentStation) {
-					customer.currentStation.currentCustomer = null;
-					customer.currentStation = null;
-				}
-			});
-
-			// Dragging a customer
-			customer.on("drag", () => {
-				let station = this.getClosestStation(customer);
-				if (station) {
-					customer.snapTo(station.x, station.y);
-				}
-			});
-
-			// Dropping a customer
-			customer.on("drop", () => {
-				let station = this.getClosestStation(customer);
-				if (station) {
-					station.currentCustomer = customer;
-					customer.currentStation = station;
-				} else if (customer.currentStation) {
-					customer.snapTo(customer.currentStation.x, customer.currentStation.y);
-				}
-			});
-		});
 	}
 
 	update(time: number, delta: number) {
@@ -86,6 +52,58 @@ export class GameScene extends BaseScene {
 		this.customers.forEach((c) => c.update(time, delta));
 	}
 
+	// Add new station
+	addStation(gridX: number, gridY: number) {
+		const coord = this.board.getGridCell(gridX, gridY);
+		const station = new Station(this, coord.x, coord.y);
+		this.stations.push(station);
+	}
+
+	// Add new employee
+	addEmployee(gridX: number, gridY: number) {
+		const coord = this.board.getGridCell(gridX, gridY);
+		const employee = new Employee(this, coord.x, coord.y);
+		this.employees.push(employee);
+	}
+
+	// Add new customer
+	addCustomer(gridX: number, gridY: number) {
+		const coord = this.board.getGridCell(gridX, gridY);
+		const customer = new Customer(this, coord.x, coord.y);
+		this.customers.push(customer);
+
+		// Picking up a customer
+		customer.on("pickup", () => {
+			if (customer.currentStation) {
+				customer.currentStation.setCustomer(null);
+				customer.currentStation = null;
+			}
+		});
+
+		// Dragging a customer
+		customer.on("drag", () => {
+			let station = this.getClosestStation(customer);
+			if (station) {
+				customer.snapTo(station.x, station.y);
+			}
+		});
+
+		// Dropping a customer
+		customer.on("drop", () => {
+			let station = this.getClosestStation(customer);
+			if (station) {
+				station.setCustomer(customer);
+				customer.currentStation = station;
+				customer.lastX = station.x;
+				customer.lastY = station.y;
+			} else if (customer.currentStation) {
+				customer.snapTo(customer.currentStation.x, customer.currentStation.y);
+			} else {
+				customer.snapTo(customer.lastX, customer.lastY);
+			}
+		});
+	}
+
 	// Find the closest station to the customer that is not occupied
 	getClosestStation(customer: Customer): Station | null {
 		let closestStation = null;