diff --git a/public/assets/transparent.png b/public/assets/transparent.png new file mode 100644 index 0000000..36caf1f Binary files /dev/null and b/public/assets/transparent.png differ diff --git a/src/scenes/boot.ts b/src/scenes/boot.ts index 6603575..8ec5567 100644 --- a/src/scenes/boot.ts +++ b/src/scenes/boot.ts @@ -10,6 +10,7 @@ export class Boot extends Scene { // The smaller the file size of the assets, the better, as the Boot Scene itself has no preloader. this.load.image("background", "assets/bg.png"); + this.load.image("transparent", "assets/transparent.png"); this.load.image("grass-side-view", "assets/grass-block.webp"); this.load.image("grass", "assets/grass.png"); this.load.image("mountain", "assets/mountain.png"); diff --git a/src/scenes/ui/citational-gratitude/citational-gratitude-button.ts b/src/scenes/ui/citational-gratitude/citational-gratitude-button.ts new file mode 100644 index 0000000..02edc4c --- /dev/null +++ b/src/scenes/ui/citational-gratitude/citational-gratitude-button.ts @@ -0,0 +1,70 @@ +import { UIContainer } from "../ui-container"; +import { Game as MainGame } from "../../game/index"; +import { screenSize } from "../../../constants"; +import { MainWindow } from "./main-window"; + +export class CitationalGratitudeButton extends UIContainer { + pointerOver: boolean = false; + + constructor( + scene: MainGame, + private mainWindow: MainWindow + ) { + super(scene, screenSize.x - 48 - 16, screenSize.y - 48 - 16); + + const inputHandler = this.scene.add + .image(this.offsetX, this.offsetY, "transparent") + .setDisplaySize(48, 48) + .setOrigin(0, 0) + .setInteractive(); + + inputHandler.on("pointerup", () => { + if (!this.mainWindow.getVisible()) { + this.mainWindow.setVisible(true); + + setTimeout(() => { + scene.input.once("pointerup", () => { + if (this.mainWindow.getVisible()) { + this.mainWindow.setVisible(false); + } + }); + }, 100); + } + }); + + inputHandler.on("pointerover", () => { + this.pointerOver = true; + this.draw(); + }); + + inputHandler.on("pointerout", () => { + this.pointerOver = false; + this.draw(); + }); + + // scene.input.addListener("pointerup", () => { + // if (this.mainWindow.getVisible()) { + // this.mainWindow.setVisible(false); + // } + // }); + + this.draw(); + } + + draw() { + // draw the button + this.clear(); + this.drawRoundRect( + 0, + 0, + 48, + 48, + 0xffffff, + 0x000000, + 12, + 3, + this.pointerOver ? 1 : 0.5 + ); + this.drawText(24, 24, "i", 30).setOrigin(0.5, 0.5); + } +} diff --git a/src/scenes/ui/citational-gratitude/gratitude.ts b/src/scenes/ui/citational-gratitude/gratitude.ts new file mode 100644 index 0000000..5464603 --- /dev/null +++ b/src/scenes/ui/citational-gratitude/gratitude.ts @@ -0,0 +1 @@ +export const gratitude = "Hello, world!"; diff --git a/src/scenes/ui/citational-gratitude/index.ts b/src/scenes/ui/citational-gratitude/index.ts new file mode 100644 index 0000000..17bc188 --- /dev/null +++ b/src/scenes/ui/citational-gratitude/index.ts @@ -0,0 +1,2 @@ +export * from "./citational-gratitude-button"; +export * from "./main-window"; diff --git a/src/scenes/ui/citational-gratitude/main-window.ts b/src/scenes/ui/citational-gratitude/main-window.ts new file mode 100644 index 0000000..a3656fa --- /dev/null +++ b/src/scenes/ui/citational-gratitude/main-window.ts @@ -0,0 +1,62 @@ +import { UIContainer } from "../ui-container"; +import { Game as MainGame } from "../../game/index"; +import { screenSize } from "../../../constants"; +import { gratitude } from "./gratitude"; + +export class MainWindow extends UIContainer { + static readonly WIDTH = 600; + static readonly HEIGHT = 600; + alreadyDrawn: boolean = false; + + constructor(scene: MainGame) { + super( + scene, + screenSize.x / 2 - MainWindow.WIDTH / 2, + screenSize.y / 2 - 150 - MainWindow.HEIGHT / 2 + ); + this.draw(); + this.setVisible(false); + } + + draw() { + this.clear(); + this.drawRoundRect( + -screenSize.x, + -screenSize.y, + screenSize.x * 2, + screenSize.y * 2, + 0x000000, + 0xffffff, + 0, + 0, + 0.5 + ); + this.drawRoundRect( + 0, + 0, + MainWindow.WIDTH, + MainWindow.HEIGHT, + 0xffffff, + 0x000000, + 20, + 3 + ); + this.drawText( + MainWindow.WIDTH / 2, + 16, + "Citational Gratitude", + 24 + ).setOrigin(0.5, 0); + this.drawLine(32, 48, MainWindow.WIDTH - 32, 48); + + this.drawText(MainWindow.WIDTH / 2, 64, gratitude, 18).setOrigin(0.5, 0); + + this.drawText( + MainWindow.WIDTH / 2, + MainWindow.HEIGHT - 18 - 16, + "Click anywhere to dismiss", + 18, + "gray" + ).setOrigin(0.5, 0); + } +} diff --git a/src/scenes/ui/index.ts b/src/scenes/ui/index.ts index 3b10762..2028ab3 100644 --- a/src/scenes/ui/index.ts +++ b/src/scenes/ui/index.ts @@ -3,16 +3,27 @@ import { InfoDisplay } from "./info-display"; import { Store } from "../game/store"; import { Game as MainGame } from "../game/index"; import { Notification } from "./notification"; +import { CitationalGratitudeButton } from "./citational-gratitude"; +import { MainWindow as CitationalGratitudeMainWindow } from "./citational-gratitude/"; export class UI { menu: Menu; infoDisplay: InfoDisplay; notification: Notification; + citationalGratitudeMainWindow: CitationalGratitudeMainWindow; + citationalGratitudeButton: CitationalGratitudeButton; constructor(scene: MainGame, store: Store) { this.menu = new Menu(scene, store); this.infoDisplay = new InfoDisplay(scene, store); this.notification = new Notification(scene); + this.citationalGratitudeMainWindow = new CitationalGratitudeMainWindow( + scene + ); + this.citationalGratitudeButton = new CitationalGratitudeButton( + scene, + this.citationalGratitudeMainWindow + ); } update(_: number, __: number) { diff --git a/src/scenes/ui/ui-container.ts b/src/scenes/ui/ui-container.ts index 22c88b7..199acbf 100644 --- a/src/scenes/ui/ui-container.ts +++ b/src/scenes/ui/ui-container.ts @@ -26,10 +26,12 @@ export abstract class UIContainer { height: number, fillColor: number = 0xffffff, strokeColor: number = 0x000000, - radius: number = 20 + radius: number = 20, + thickness: number = 1, + alpha: number = 1 ) { - this.graphics.lineStyle(2, strokeColor, 1); - this.graphics.fillStyle(fillColor, 1); + this.graphics.lineStyle(thickness, strokeColor, alpha); + this.graphics.fillStyle(fillColor, alpha); this.graphics.fillRoundedRect( x + this.offsetX, y + this.offsetY, @@ -98,4 +100,8 @@ export abstract class UIContainer { setVisible(visible: boolean) { this.layer.visible = visible; } + + getVisible() { + return this.layer.visible; + } }