import { Application, Container, Graphics, Ticker } from "pixi.js";

async function setup(app: Application) {
  await app.init({ background: "#111111", resizeTo: window, antialias: true });
  document.getElementById("pixi-container")!.appendChild(app.canvas);
}

function addStuff(app: Application) {
  const boxes = new Container({ label: "boxes" });
  const loc1 = { x: app.screen.width / 2, y: app.screen.height / 2 };
  const width = 100;
  const box1 = new Graphics({ label: "box1" });
  box1.rect(-width / 2, -width / 2, width, width).fill(0xff0000);
  box1.x = loc1.x;
  box1.y = loc1.y;
  boxes.addChild(box1);

  const loc2 = { x: loc1.x + 400, y: loc1.y };
  const box2 = new Graphics({ label: "box2" });
  box2.rect(-width / 2, -width / 2, width, width).fill(0x0000ff);
  box2.x = loc2.x;
  box2.y = loc2.y;
  boxes.addChild(box2);

  const loc3 = { x: loc1.x, y: loc1.y + 400 };
  const box3 = new Graphics({ label: "box3" });
  box3.rect(-width / 2, -width / 2, width, width).fill(0x00ff00);
  box3.x = loc3.x;
  box3.y = loc3.y;
  boxes.addChild(box3);

  app.stage.addChild(boxes);
}

function animateBox1(app: Application, ticker: Ticker) {
  const delta = ticker.deltaTime;
  const box1 = app.stage.getChildByLabel("boxes")?.getChildByLabel("box1");
  if (box1) {
    box1.y -= 2.0 * delta;
    if (box1.y < 0) {
      box1.y += app.screen.height;
    }
  }
}

(async () => {
  const app = new Application();
  await setup(app);
  addStuff(app);

  app.ticker.add((ticker) => {
    animateBox1(app, ticker);
  });
})();