Add new temporary background

src/components/Board.ts

@@ -20,9 +20,9 @@ export class Board extends Phaser.GameObjects.Container {
 			this.size,
 			this.size,
 			0xffffff,
-			0.2,
+			0.1,
 			0x000000,
-			0.5
+			0.2
 		);
 		this.add(this.grid);
 

src/components/Customer.ts

@@ -60,13 +60,13 @@ export class Customer extends Button {
 		this.sprite.setScale(size / this.sprite.width);
 		this.add(this.sprite);
 
-		this.thoughtBubble = new ThoughtBubble(scene, 0, -0.75 * size, size);
+		this.thoughtBubble = new ThoughtBubble(scene, 0.2 * size, -0.6 * size, size);
 		this.add(this.thoughtBubble);
 
 		this.happinessTimer = new Timer(
 			scene,
-			0.3 * size,
-			-0.4 * size,
+			-0.3 * size,
+			-0.3 * size,
 			0.6 * size,
 			0xfa9425
 		);

src/components/UI.ts

@@ -6,28 +6,50 @@ export class UI extends Phaser.GameObjects.Container {
 
 	private panel: Phaser.GameObjects.Container;
 	private background: Phaser.GameObjects.Image;
-	private moneyText: Phaser.GameObjects.Text;
-	private dayText: Phaser.GameObjects.Text;
 	private dayProgressTimer: Timer;
+	private dayText: Phaser.GameObjects.Text;
+	private moneyText: Phaser.GameObjects.Text;
 
 	constructor(scene: GameScene) {
 		super(scene, 0, 0);
 		scene.add.existing(this);
 		this.scene = scene;
 
-		const panelHeight = 200;
+		const panelWidth = 300;
+		const panelHeight = 400;
 
-		this.panel = this.scene.add.container(0, 0);
+		this.panel = this.scene.add.container(
+			scene.W - panelWidth / 2,
+			panelHeight / 2
+		);
 		this.add(this.panel);
 
-		this.background = this.scene.add.image(0, 0, "hud");
-		this.background.setScale(panelHeight / this.background.height);
-		this.background.setVisible(false);
-		this.panel.add(this.background);
+		// this.background = this.scene.add.image(0, 0, "hud");
+		// this.background.setScale(panelHeight / this.background.height);
+		// this.background.setVisible(false);
+		// this.panel.add(this.background);
+		const rect = this.scene.add.rectangle(
+			0,
+			0,
+			panelWidth,
+			panelHeight,
+			0x000000,
+			0.5
+		);
+		this.panel.add(rect);
+
+		this.dayProgressTimer = new Timer(
+			scene,
+			0,
+			-0.3 * panelHeight,
+			200,
+			0xff7700
+		);
+		this.panel.add(this.dayProgressTimer);
 
 		this.dayText = this.scene.addText({
-			x: 100,
-			y: 200,
+			x: 0,
+			y: 0,
 			size: 60,
 			color: "#FFFFFF",
 			text: "Day 1",
@@ -38,16 +60,14 @@ export class UI extends Phaser.GameObjects.Container {
 
 		this.moneyText = this.scene.addText({
 			x: 0,
-			y: 240,
+			y: 0.3 * panelHeight,
 			size: 40,
 			color: "#FFFFFF",
 			text: "Money: $0",
 		});
 		this.moneyText.setStroke("black", 4);
+		this.moneyText.setOrigin(0.5);
 		this.panel.add(this.moneyText);
-
-		this.dayProgressTimer = new Timer(scene, 100, 100, 200, 0xff7700);
-		this.add(this.dayProgressTimer);
 	}
 
 	update(time: number, delta: number) {}

src/scenes/GameScene.ts

@@ -18,6 +18,7 @@ export class GameScene extends BaseScene {
 
 	// Game stats
 	private day: number = 0;
+	private dayDuration: number = 60000; // 1 minute
 	private timeOfDay: number = 0;
 	private money: number = 0;
 
@@ -35,16 +36,16 @@ export class GameScene extends BaseScene {
 		this.background.setOrigin(0);
 		this.fitToScreen(this.background);
 
-		this.board = new Board(this, 900, 500);
+		this.board = new Board(this, 930, 550);
 
 		this.stations = [];
 		this.addStation(0, 0, StationType.WaitingSeat);
-		this.addStation(1, 0, StationType.WaitingSeat);
-		this.addStation(2, 0, StationType.WaitingSeat);
-		this.addStation(1, 2, StationType.HornAndNails);
-		this.addStation(3, 2, StationType.HornAndNails);
-		this.addStation(5, 1, StationType.ScalePolish);
-		this.addStation(5, 3, StationType.GoldBath);
+		this.addStation(0, 1, StationType.WaitingSeat);
+		this.addStation(0, 2, StationType.WaitingSeat);
+		this.addStation(2, 2, StationType.HornAndNails);
+		this.addStation(4, 2, StationType.HornAndNails);
+		this.addStation(6, 1, StationType.ScalePolish);
+		this.addStation(6, 3, StationType.GoldBath);
 		this.addStation(7, 5, StationType.CashRegister);
 
 		this.employees = [];
@@ -78,7 +79,7 @@ export class GameScene extends BaseScene {
 		this.tweens.add({
 			targets: this,
 			timeOfDay: { from: 1, to: 0 },
-			duration: 3 * 60 * 1000,
+			duration: this.dayDuration,
 			onUpdate: (tween) => {
 				this.timeOfDay = tween.getValue();
 				this.ui.setTimeOfDay(this.timeOfDay);