v0.6.6 improve GUI resizing (#146)

core/main.ts

@@ -32,7 +32,6 @@ export * from "./src/ecs/systems/ui/HealthBarSystem";
 export * from "./src/ecs/systems/ui/InputSystem";
 export * from "./src/ecs/systems/ui/RenderSystem";
 export * from "./src/ecs/entities/buttons/ConnectButton";
-export * from "./src/ecs/entities/buttons/DebugButton";
 export * from "./src/ecs/entities/buttons/FullscreenButton";
 export * from "./src/ecs/entities/characters/Skelly";
 export * from "./src/ecs/entities/characters/Spaceship";

core/src/ecs/components/Renderable.ts

@@ -98,6 +98,8 @@ export class Renderable extends Component<"renderable"> {
     if (!renderer) return;
     this.renderer = renderer;
 
+    this.c = new Container();
+
     // add child container
     if (this.setContainer && renderer) this.c = await this.setContainer(renderer);
 

core/src/ecs/entities/buttons/ConnectButton.ts

@@ -4,15 +4,15 @@ export const ConnectButton = () => Entity({
   id: "connectButton",
   persists: true,
   components: {
-    position: new Position({ x: 75, y: 5, screenFixed: true }),
+    position: new Position({ x: 45, y: 5, screenFixed: true }),
+    clickable: new Clickable({ width: 80, height: 32, active: true }),
     actions: new Actions({
       click: {
         invoke: ({ world }) => {
           if (world && world.client) world.client.joinLobby("hub", () => {});
         }
       }
     }),
-    clickable: new Clickable({ width: 80, height: 32, active: true }),
     renderable: Button({
       dims: { w: 72, textX: 8, textY: 5 },
       zIndex: 1,

core/src/ecs/entities/buttons/FullscreenButton.ts

@@ -1,23 +1,19 @@
-import { Actions, Button, Clickable, Entity, Position, pixiText } from "@piggo-gg/core";
+import { Action, Actions, Button, Clickable, Entity, Position, pixiText } from "@piggo-gg/core";
 
 export const FullscreenButton = (id: string = "fullscreenButton") => Entity({
   id: id,
   components: {
-    position: new Position({
-      x: 5, y: 5, screenFixed: true
-    }),
+    position: new Position({ x: 5, y: 5, screenFixed: true }),
+    clickable: new Clickable({ active: true, width: 32, height: 30 }),
     actions: new Actions({
-      click: {
-        invoke: ({ world }) => {
-          if (!document.fullscreenElement) {
-            world.renderer?.app.canvas.requestFullscreen?.();
-          } else {
-            document.exitFullscreen();
-          }
+      click: Action(({ world }) => {
+        if (!document.fullscreenElement) {
+          world.renderer?.app.canvas.requestFullscreen?.();
+        } else {
+          document.exitFullscreen();
         }
-      }
+      })
     }),
-    clickable: new Clickable({ active: true, width: 32, height: 30 }),
     renderable: Button({
       dims: { w: 32, textX: 7, textY: 2 },
       zIndex: 4,

core/src/ecs/entities/objects/Projectile.ts

@@ -1,24 +1,32 @@
 import { Collider, Entity, Expires, Networked, Position, Renderable, TeamNumber, World, pixiCircle } from "@piggo-gg/core";
 
+export type OnHitHandler = (e2: Entity<Position | Collider>, world: World) => boolean
+
 export type ProjectileProps = {
   id: string
   radius: number
   pos?: { x: number, y: number, vx: number, vy: number }
-  onHit?: (e2: Entity<Position | Collider>, world: World) => void
+  onHit?: OnHitHandler
 }
 
-export const onHitTeam = (allyTeam: TeamNumber) => (e2: Entity<Position | Collider>) => {
+export const onHitTeam = (allyTeam: TeamNumber): OnHitHandler => (e2: Entity<Position | Collider>) => {
   const { collider, health, team } = e2.components;
   if (health && collider.shootable) {
     if (!team || (team.data.team !== allyTeam)) {
       health.data.health -= 25;
+      return true;
     }
   }
+  return false;
 }
 
 const onHitDefault = (e2: Entity<Position | Collider>) => {
   const { collider, health } = e2.components;
-  if (collider.shootable && health) health.data.health -= 25;
+  if (collider.shootable && health) {
+    health.data.health -= 25;
+    return true;
+  }
+  return false;
 }
 
 export const Projectile = ({ radius, pos, id, onHit = onHitDefault }: ProjectileProps) => {
@@ -34,8 +42,7 @@ export const Projectile = ({ radius, pos, id, onHit = onHitDefault }: Projectile
         width: radius ?? 8,
         ccd: true,
         sensor: (e2: Entity<Position | Collider>, world: World) => {
-          onHit(e2, world);
-          world.removeEntity(projectile.id);
+          if (onHit(e2, world)) world.removeEntity(projectile.id);
         }
       }),
       renderable: new Renderable({

core/src/ecs/renderables/Button.ts

@@ -4,14 +4,9 @@ import { Renderable, RenderableProps } from "@piggo-gg/core";
 export type ButtonProps = RenderableProps & {
   dims: { w: number, textX: number, textY: number },
   text: Text
-  outline?: Graphics
-  shadow?: Graphics
 }
 
 export const Button = <T extends ButtonProps = ButtonProps>(props: T): Renderable => {
-  const outline = props.outline ?? new Graphics();
-  const shadow = props.shadow ?? new Graphics();
-
   const dims = props.dims;
   let text: Text;
 
@@ -26,10 +21,12 @@ export const Button = <T extends ButtonProps = ButtonProps>(props: T): Renderabl
       const radius = 10;
 
       // button outline
+      const outline = new Graphics();
       outline.roundRect(0, 0, width, height, radius);
       outline.fill(0x000066);
 
       // button shadow
+      const shadow = new Graphics();
       shadow.roundRect(0, -1, width, height, radius);
       shadow.fill({ color: 0xFFFF33, alpha: 0.3 });
 

core/src/ecs/systems/ui/ClickableSystem.ts

@@ -1,6 +1,8 @@
 import { Actions, Clickable, ClientSystemBuilder, Entity, Position, XY, checkBounds, mouse } from "@piggo-gg/core";
 import { FederatedPointerEvent } from "pixi.js";
 
+export let clickableClickedThisFrame = false;
+
 // ClickableSystem handles clicks for clickable entities
 export const ClickableSystem = ClientSystemBuilder({
   id: "ClickableSystem",
@@ -22,6 +24,8 @@ export const ClickableSystem = ClientSystemBuilder({
       skipOnRollback: true,
       onTick: (entities: Entity<Clickable | Actions | Position>[]) => {
 
+        clickableClickedThisFrame = false;
+
         entities.forEach((entity) => {
           const { clickable, position } = entity.components;
 
@@ -51,6 +55,7 @@ export const ClickableSystem = ClientSystemBuilder({
 
             const clicked = checkBounds(renderer, position, clickable, click, clickWorld);
             if (clicked) {
+              clickableClickedThisFrame = true;
               const invocation = clickable.click({ world });
 
               if (networked && networked.isNetworked) {

core/src/ecs/systems/ui/InputSystem.ts

@@ -1,9 +1,8 @@
-import { Actions, ClientSystemBuilder, Input, Entity, Position, World, currentJoystickPosition, XY } from "@piggo-gg/core";
+import { Actions, ClientSystemBuilder, Input, Entity, Position, World, currentJoystickPosition, XY, clickableClickedThisFrame } from "@piggo-gg/core";
 
-// TODO these are global
 export var chatBuffer: string[] = [];
 export var chatIsOpen = false;
-export var mouse = { x: 0, y: 0 };
+export var mouse: XY = { x: 0, y: 0 };
 
 type KeyMouse = { key: string, mouse: XY };
 
@@ -37,12 +36,12 @@ export const InputSystem = ClientSystemBuilder({
     let joystickOn = false;
     let mouseEvent = { x: 0, y: 0 };
 
-    renderer?.app.canvas.addEventListener('mousemove', (event) => {
+    renderer?.app.canvas.addEventListener("mousemove", (event) => {
       mouseEvent = { x: event.offsetX, y: event.offsetY };
       mouse = renderer.camera.toWorldCoords({ x: event.offsetX, y: event.offsetY })
     });
 
-    renderer?.app.canvas.addEventListener('pointerdown', (event) => {
+    renderer?.app.canvas.addEventListener("pointerdown", (event) => {
       const key = event.button === 0 ? "mb1" : "mb2";
 
       mouseEvent = { x: event.offsetX, y: event.offsetY };
@@ -57,7 +56,7 @@ export const InputSystem = ClientSystemBuilder({
       bufferedDown.push({ key, mouse });
     });
 
-    renderer?.app.canvas.addEventListener('pointerup', (event) => {
+    document.addEventListener("pointerup", (event) => {
       const key = event.button === 0 ? "mb1" : "mb2";
       bufferedDown.remove(key);
     });
@@ -230,6 +229,8 @@ export const InputSystem = ClientSystemBuilder({
           return;
         }
 
+        if (clickableClickedThisFrame || joystickOn) bufferedDown.remove("mb1");
+
         const playerEntity = world.client?.playerEntity;
         if (!playerEntity) return;
 

core/src/ecs/systems/ui/RenderSystem.ts

@@ -1,4 +1,5 @@
 import { Entity, Position, Renderable, ClientSystemBuilder, XY } from "@piggo-gg/core";
+import { Container } from "pixi.js";
 
 // RenderSystem handles rendering entities to the screen
 export const RenderSystem = ClientSystemBuilder({
@@ -61,6 +62,17 @@ export const RenderSystem = ClientSystemBuilder({
           return Math.abs(x - cameraX) > (width / cameraScale / 2) || Math.abs(y - cameraY) > (height / cameraScale / 2);
         }
 
+        if (renderer.resizedFlag) {
+          renderer.guiRenderables.forEach((renderable) => renderer.app.stage.removeChild(renderable.c));
+
+          entities.forEach((entity) => {
+            const { position, renderable } = entity.components;
+            if (position.screenFixed) renderable.rendered = false;
+          });
+
+          renderer.resizedFlag = false;
+        }
+
         entities.forEach((entity) => {
           const { position, renderable } = entity.components;
 

core/src/graphics/Camera.ts

@@ -1,5 +1,5 @@
 import { Renderable, Renderer, XY } from "@piggo-gg/core";
-import { Container } from "pixi.js";
+import { Application, Container } from "pixi.js";
 
 export type Camera = {
   c: Container
@@ -11,7 +11,7 @@ export type Camera = {
 }
 
 // Camera handles the viewport of the game
-export const Camera = (renderer: Renderer): Camera => {
+export const Camera = (app: Application): Camera => {
 
   const renderables: Set<Renderable> = new Set();
   const c: Container = new Container({ sortableChildren: true, zIndex: 0, alpha: 1 });
@@ -44,8 +44,8 @@ export const Camera = (renderer: Renderer): Camera => {
       c.y += y;
     },
     moveTo: ({ x, y }: XY) => {
-      c.x = renderer.app.screen.width / 2 - x * scale;
-      c.y = renderer.app.screen.height / 2 - y * scale;
+      c.x = app.screen.width / 2 - x * scale;
+      c.y = app.screen.height / 2 - y * scale;
     },
     toWorldCoords: ({ x, y }: XY) => ({
       x: (x - c.x) / scale,