funky new button class

Program/src/Systems/ClickableSystem.ts

@@ -9,6 +9,7 @@ export class ClickableSystem extends System {
   priority = 80
 
   init() {
+    //the great deselector
     globals.app.stage.interactive = true
     globals.app.stage.on("click", (event: interaction.InteractionEvent) => {
       if (event.target == event.currentTarget) globals.selected.set(null)

Program/src/UI/Button.ts

@@ -1,3 +1,65 @@
-import { Sprite } from "pixi.js"
+import { Sprite, Texture, interaction } from "pixi.js"
 
-export class Button extends Sprite {}
+export class Button extends Sprite {
+  //TODO: sound utility
+
+  defaultSprite: Texture
+  hoverSprite: Texture
+  clickSprite: Texture
+
+  hovered = false
+  clicked = false
+
+  constructor(texture?: Texture) {
+    super()
+
+    this.defaultSprite = texture
+
+    this.texture = texture
+    this.interactive = true
+
+    this.on("pointerover", this.startHover)
+    this.on("pointerout", this.endHover)
+    this.on("pointercancel", this.endHover)
+
+    this.on("pointerdown", this.startClick)
+    this.on("pointerup", this.endClick)
+    this.on("pointerupoutside", this.endClick)
+  }
+
+  startHover() {
+    this.hovered = true
+    this.updateSprite()
+  }
+
+  endHover() {
+    this.hovered = false
+    this.updateSprite()
+  }
+
+  startClick() {
+    this.clicked = true
+    this.updateSprite()
+  }
+
+  endClick() {
+    this.clicked = false
+    this.updateSprite()
+  }
+
+  updateSprite() {
+    if (this.clicked && this.clickSprite) {
+      this.texture = this.clickSprite
+      return
+    }
+    if (this.hovered && this.hoverSprite) {
+      this.texture = this.hoverSprite
+      return
+    }
+    this.texture = this.defaultSprite
+  }
+
+  onClick(action: (event: interaction.InteractionEvent) => void, context: any) {
+    this.on("click", action, context)
+  }
+}

Program/src/UI/InfoMenu.ts

@@ -4,6 +4,7 @@ import { Point } from "../Datatypes/MathTypes/point"
 import { InfoSystem } from "../Systems/InfoSystem"
 import { Name } from "../Components/name"
 import { Entity } from "ecsy"
+import { Button } from "./Button"
 
 export class InfoMenu extends Container {
   system: InfoSystem
@@ -61,12 +62,9 @@ export class InfoMenu extends Container {
 
     for (let i = 0; i < buttonDef.length; i++) {
       let def = buttonDef[i]
-      let button = new Sprite(def.texture)
+      let button = new Button(def.texture)
 
-      if (def.action) {
+      if (def.action) button.onClick(def.action, def.context)
-        button.on("click", def.action, def.context)
-        button.interactive = true
-      }
 
       container.addChild(button)
       button.position = new Point(i * 18, 0)

Program/src/UI/PlanningMenu.ts

@@ -1,14 +1,12 @@
-import { Container, Text, Sprite, Loader, Texture, interaction } from "pixi.js"
+import { Container, Loader, Texture, interaction } from "pixi.js"
 
 import { Point } from "../Datatypes/MathTypes/point"
 import { InfoSystem } from "../Systems/InfoSystem"
+import { Button } from "./Button"
 
 export class PlanningMenu extends Container {
   system: InfoSystem
 
-  nameField: Text
-  portrait: Sprite
-
   constructor(system: InfoSystem) {
     super()
 
@@ -44,11 +42,9 @@ export class PlanningMenu extends Container {
 
     for (let i = 0; i < buttonDef.length; i++) {
       let def = buttonDef[i]
-      let button = new Sprite(def.texture)
+      let button = new Button(def.texture)
-      if (def.action) {
+      if (def.action) button.onClick(def.action, def.context)
-        button.on("click", def.action, def.context)
+
-        button.interactive = true
-      }
       container.addChild(button)
       button.position = new Point(i * 18, 0)
     }

Program/src/globals.ts

@@ -1,9 +1,9 @@
-import { World, Entity } from "ecsy";
+import { World, Entity } from "ecsy"
-import { Application } from "pixi.js";
+import { Application } from "pixi.js"
-import { Observable } from "./Datatypes/observable";
+import { Observable } from "./Datatypes/observable"
 
 export default {
   world: <World>null,
   app: <Application>null,
   selected: new Observable<Entity>(),
-}
+}