Separate overworld and shop into states

src/assets/assets.ts

@@ -4,7 +4,8 @@ import { image, sound, music, loadFont, spritesheet } from './util';
 /* Images */
 const images: Image[] = [
 	// Backgrounds
-	image('backgrounds/background', 'background'),
+	image('backgrounds/overworld', 'overworld'),
+	image('backgrounds/shop', 'shop'),
 	image('backgrounds/trampoline', 'trampoline'),
 
 	// Characters

src/scenes/GameScene.ts

@@ -1,47 +1,46 @@
 import { BaseScene } from "@/scenes/BaseScene";
-import { Turtle } from "@/components/Turtle";
+import { OverworldState } from "@/scenes/OverworldState";
+import { ShopState } from "@/scenes/ShopState";
 import { UI } from "@/components/UI";
 
+export enum State {
+	Overworld = "Overworld",
+	Shop = "Shop",
+}
+
 export class GameScene extends BaseScene {
-	private background: Phaser.GameObjects.Image;
-	private trampoline: Phaser.GameObjects.Image;
-	private turtles: Turtle[];
+	private overworld: OverworldState;
+	private shop: ShopState;
 	private ui: UI;
 
+	private state: State;
+	private health: number;
+
 	constructor() {
 		super({ key: "GameScene" });
 	}
 
 	create(): void {
 		this.fade(false, 200, 0x000000);
 
-		this.background = this.add.image(0, 0, "background");
-		this.background.setOrigin(0);
-		this.fitToScreen(this.background);
-
-		this.trampoline = this.add.image(0.3 * this.W, 0.75 * this.H, "trampoline");
-
-		this.turtles = [];
-		for (let i = 0; i < 5; i++) {
-			this.addTurtle();
-		}
+		this.state = State.Overworld;
+		this.health = 0;
 
+		this.overworld = new OverworldState(this);
+		this.shop = new ShopState(this);
 		this.ui = new UI(this);
+
+		this.setState(State.Overworld);
 	}
 
 	update(time: number, delta: number) {
-		this.turtles.forEach((turtle) => {
-			turtle.update(time, delta);
-		});
+		this.overworld.update(time, delta);
+		this.shop.update(time, delta);
 	}
 
-	addTurtle() {
-		let x = this.W * (0.5 + 0.4 * Math.random());
-		let y = this.H * (0.6 + 0.2 * Math.random());
-		let turtle = new Turtle(this, x, y);
-		turtle.on("action", () => {
-			turtle.doABarrelRoll();
-		});
-		this.turtles.push(turtle);
+	setState(state: State) {
+		this.state = state;
+		this.overworld.setVisible(state == State.Overworld);
+		this.shop.setVisible(state == State.Shop);
 	}
 }

src/scenes/OverworldState.ts

@@ -0,0 +1,68 @@
+import { GameScene, State } from "@/scenes/GameScene";
+import { Turtle } from "@/components/Turtle";
+import { Button } from "@/components/Button";
+
+export class OverworldState extends Phaser.GameObjects.Container {
+	public scene: GameScene;
+
+	private background: Phaser.GameObjects.Image;
+	private trampoline: Phaser.GameObjects.Image;
+	private turtles: Turtle[];
+	private someButton: Button;
+
+	constructor(scene: GameScene) {
+		super(scene, 0, 0);
+		this.scene = scene;
+		this.scene.add.existing(this);
+
+		this.background = scene.add.image(0, 0, "overworld");
+		this.background.setOrigin(0);
+		scene.fitToScreen(this.background);
+		this.add(this.background);
+
+		this.trampoline = scene.add.image(
+			0.3 * scene.W,
+			0.75 * scene.H,
+			"trampoline"
+		);
+		this.add(this.trampoline);
+
+		this.turtles = [];
+		for (let i = 0; i < 5; i++) {
+			this.addTurtle();
+		}
+
+		this.someButton = new Button(scene, 100, 100);
+		this.add(this.someButton);
+		let buttonText = scene.addText({
+			size: 50,
+			weight: 900,
+			color: "black",
+			text: "Shop",
+		});
+		buttonText.setOrigin(0.5);
+		this.someButton.add(buttonText);
+		this.someButton.bindInteractive(buttonText);
+		this.someButton.on("click", () => {
+			this.scene.setState(State.Shop);
+		});
+	}
+
+	update(time: number, delta: number) {
+		this.turtles.forEach((turtle) => {
+			turtle.update(time, delta);
+		});
+	}
+
+	addTurtle() {
+		let x = this.scene.W * (0.5 + 0.4 * Math.random());
+		let y = this.scene.H * (0.6 + 0.2 * Math.random());
+		let turtle = new Turtle(this.scene, x, y);
+		this.add(turtle);
+		this.turtles.push(turtle);
+
+		turtle.on("action", () => {
+			turtle.doABarrelRoll();
+		});
+	}
+}

src/scenes/ShopState.ts

@@ -0,0 +1,37 @@
+import { GameScene, State } from "@/scenes/GameScene";
+import { Button } from "@/components/Button";
+
+export class ShopState extends Phaser.GameObjects.Container {
+	public scene: GameScene;
+
+	private background: Phaser.GameObjects.Image;
+	private someButton: Button;
+
+	constructor(scene: GameScene) {
+		super(scene, 0, 0);
+		this.scene = scene;
+		this.scene.add.existing(this);
+
+		this.background = scene.add.image(0, 0, "shop");
+		this.background.setOrigin(0);
+		scene.fitToScreen(this.background);
+		this.add(this.background);
+
+		this.someButton = new Button(scene, 100, 100);
+		this.add(this.someButton);
+		let buttonText = scene.addText({
+			size: 50,
+			weight: 900,
+			color: "black",
+			text: "Back",
+		});
+		buttonText.setOrigin(0.5);
+		this.someButton.add(buttonText);
+		this.someButton.bindInteractive(buttonText);
+		this.someButton.on("click", () => {
+			this.scene.setState(State.Overworld);
+		});
+	}
+
+	update(time: number, delta: number) {}
+}