diff --git a/src/assets/assets.ts b/src/assets/assets.ts index 00a659e..7e43470 100644 --- a/src/assets/assets.ts +++ b/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'), diff --git a/src/assets/images/ui/bubble.png b/src/assets/images/ui/bubble.png new file mode 100644 index 0000000..24781fd Binary files /dev/null and b/src/assets/images/ui/bubble.png differ diff --git a/src/components/Customer.ts b/src/components/Customer.ts index ba954a6..61ba3eb 100644 --- a/src/components/Customer.ts +++ b/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); + } + } } diff --git a/src/components/Station.ts b/src/components/Station.ts index 085cdf2..2bc077b 100644 --- a/src/components/Station.ts +++ b/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!"); }); } } diff --git a/src/scenes/GameScene.ts b/src/scenes/GameScene.ts index 82010cf..3cd6049 100644 --- a/src/scenes/GameScene.ts +++ b/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); + } }