citational gratitude interface

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");

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);
+  }
+}

src/scenes/ui/citational-gratitude/gratitude.ts

@@ -0,0 +1 @@
+export const gratitude = "Hello, world!";

src/scenes/ui/citational-gratitude/index.ts

@@ -0,0 +1,2 @@
+export * from "./citational-gratitude-button";
+export * from "./main-window";

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);
+  }
+}

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) {

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;
+  }
 }