Improve button component for creation template

templates/template-creation-web/src/app/popups/PausePopup.ts

@@ -2,8 +2,8 @@ import { animate } from "motion";
 import { BlurFilter, Container, Sprite, Texture } from "pixi.js";
 
 import { engine } from "../getEngine";
+import { Button } from "../ui/Button";
 import { Label } from "../ui/Label";
-import { LargeButton } from "../ui/LargeButton";
 import { RoundedBox } from "../ui/RoundedBox";
 
 /** Popup that shows up when gameplay is paused */
@@ -15,7 +15,7 @@ export class PausePopup extends Container {
   /** The popup title label */
   private title: Label;
   /** Button that closes the popup */
-  private doneButton: LargeButton;
+  private doneButton: Button;
   /** The panel background */
   private panelBase: RoundedBox;
 
@@ -40,7 +40,7 @@ export class PausePopup extends Container {
     this.title.y = -80;
     this.panel.addChild(this.title);
 
-    this.doneButton = new LargeButton({ text: "Resume" });
+    this.doneButton = new Button({ text: "Resume" });
     this.doneButton.y = 70;
     this.doneButton.onPress.connect(() => engine().navigation.dismissPopup());
     this.panel.addChild(this.doneButton);

templates/template-creation-web/src/app/popups/SettingsPopup.ts

@@ -4,8 +4,8 @@ import type { Text } from "pixi.js";
 import { BlurFilter, Container, Sprite, Texture } from "pixi.js";
 
 import { engine } from "../getEngine";
+import { Button } from "../ui/Button";
 import { Label } from "../ui/Label";
-import { LargeButton } from "../ui/LargeButton";
 import { RoundedBox } from "../ui/RoundedBox";
 import { VolumeSlider } from "../ui/VolumeSlider";
 import { userSettings } from "../utils/userSettings";
@@ -19,7 +19,7 @@ export class SettingsPopup extends Container {
   /** The popup title label */
   private title: Text;
   /** Button that closes the popup */
-  private doneButton: LargeButton;
+  private doneButton: Button;
   /** The panel background */
   private panelBase: RoundedBox;
   /** The build version label */
@@ -57,7 +57,7 @@ export class SettingsPopup extends Container {
     this.title.y = -this.panelBase.boxHeight * 0.5 + 60;
     this.panel.addChild(this.title);
 
-    this.doneButton = new LargeButton({ text: "OK" });
+    this.doneButton = new Button({ text: "OK" });
     this.doneButton.y = this.panelBase.boxHeight * 0.5 - 78;
     this.doneButton.onPress.connect(() => engine().navigation.dismissPopup());
     this.panel.addChild(this.doneButton);

templates/template-creation-web/src/app/screens/main/MainScreen.ts

@@ -7,7 +7,7 @@ import { Container } from "pixi.js";
 import { engine } from "../../getEngine";
 import { PausePopup } from "../../popups/PausePopup";
 import { SettingsPopup } from "../../popups/SettingsPopup";
-import { LargeButton } from "../../ui/LargeButton";
+import { Button } from "../../ui/Button";
 
 import { Bouncer } from "./Bouncer";
 
@@ -65,15 +65,15 @@ export class MainScreen extends Container {
     );
     this.addChild(this.settingsButton);
 
-    this.addButton = new LargeButton({
+    this.addButton = new Button({
       text: "Add",
       width: 175,
       height: 110,
     });
     this.addButton.onPress.connect(() => this.bouncer.add());
     this.addChild(this.addButton);
 
-    this.removeButton = new LargeButton({
+    this.removeButton = new Button({
       text: "Remove",
       width: 175,
       height: 110,

templates/template-creation-web/src/app/ui/LargeButton.ts → templates/template-creation-web/src/app/ui/Button.ts

@@ -1,49 +1,28 @@
 import { FancyButton } from "@pixi/ui";
-import { NineSliceSprite, Texture } from "pixi.js";
 
 import { engine } from "../getEngine";
 
 import { Label } from "./Label";
 
-const defaultLargeButtonOptions = {
+const defaultButtonOptions = {
   text: "",
   width: 301,
   height: 112,
   fontSize: 28,
 };
 
-type LargeButtonOptions = typeof defaultLargeButtonOptions;
+type ButtonOptions = typeof defaultButtonOptions;
 
 /**
  * The big rectangle button, with a label, idle and pressed states
  */
-export class LargeButton extends FancyButton {
-  constructor(options: Partial<LargeButtonOptions> = {}) {
-    const opts = { ...defaultLargeButtonOptions, ...options };
-
-    const defaultView = new NineSliceSprite({
-      texture: Texture.from("button-large.png"),
-      leftWidth: 36,
-      topHeight: 42,
-      rightWidth: 36,
-      bottomHeight: 52,
-      width: opts.width,
-      height: opts.height,
-    });
-
-    const pressedView = new NineSliceSprite({
-      texture: Texture.from("button-large-press.png"),
-      leftWidth: 36,
-      topHeight: 42,
-      rightWidth: 36,
-      bottomHeight: 52,
-      width: opts.width,
-      height: opts.height,
-    });
+export class Button extends FancyButton {
+  constructor(options: Partial<ButtonOptions> = {}) {
+    const opts = { ...defaultButtonOptions, ...options };
 
     super({
-      defaultView,
-      pressedView,
+      defaultView: "button.png",
+      nineSliceSprite: [38, 50, 38, 50],
       anchor: 0.5,
       text: new Label({
         text: opts.text,
@@ -60,20 +39,24 @@ export class LargeButton extends FancyButton {
         hover: {
           props: {
             scale: { x: 1.03, y: 1.03 },
+            y: 0,
           },
           duration: 100,
         },
         pressed: {
           props: {
-            scale: { x: 1.03, y: 1.03 },
+            scale: { x: 0.97, y: 0.97 },
+            y: 10,
           },
           duration: 100,
         },
       },
     });
 
+    this.width = opts.width;
+    this.height = opts.height;
+
     this.onDown.connect(this.handleDown.bind(this));
-    this.onUp.connect(this.handleUp.bind(this));
     this.onHover.connect(this.handleHover.bind(this));
   }
 
@@ -83,10 +66,5 @@ export class LargeButton extends FancyButton {
 
   private handleDown() {
     engine().audio.sfx.play("main/sounds/sfx-press.wav");
-    this.textOffset = { x: 0, y: -7 };
-  }
-
-  private handleUp() {
-    this.textOffset = { x: 0, y: -13 };
   }
 }