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

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

(async () => {
  const app = new Application();
  await setup(app);
  const world = new Container();
  app.stage.addChild(world);

  const frame1 = new Graphics();
  const frameWidth = 2;
  const boxSize = 400;
  frame1.setStrokeStyle({ color: 0xff0000, width: frameWidth });
  frame1.rect(50, 50, boxSize, boxSize);
  frame1.stroke();
  world.addChild(frame1);
  const mask1 = new Graphics();
  mask1.setFillStyle({ color: 0xffffff });
  mask1.rect(48, 48, boxSize + frameWidth * 2, boxSize + frameWidth * 2);
  mask1.fill();
  frame1.mask = mask1;

  const frame2 = new Graphics();
  frame2.setStrokeStyle({ color: 0x00ff00, width: 2 });
  frame2.rect(50, 500, boxSize, boxSize);
  frame2.stroke();
  world.addChild(frame2);

  const mask2 = new Graphics();
  mask2.setFillStyle({ color: 0xffffff });
  mask2.rect(48, 498, boxSize + frameWidth * 2, boxSize + frameWidth * 2);
  mask2.fill();
  frame2.mask = mask2;

  const dot1 = new Graphics();
  dot1.circle(100, 100, 10);
  dot1.setFillStyle({ color: 0xff0000 });
  dot1.fill();
  frame1.addChild(dot1);

  const dot2 = new Graphics();
  dot2.circle(200, 600, 10);
  dot2.setFillStyle({ color: 0x00ff00 });
  dot2.fill();
  frame2.addChild(dot2);

  app.ticker.add((ticker) => {
    const speed = 1;
    const step = speed * ticker.deltaTime;
    dot1.y += step;
    dot2.y += step;
  });
})();