feat: add Label and Panel components

src/components/Label.ts

@@ -0,0 +1,59 @@
+import { Container, Text, TextStyle, type TextStyleOptions } from "pixi.js";
+
+export interface LabelOptions {
+  text: string;
+  style?: TextStyleOptions;
+  position?: { x: number; y: number };
+  anchor?: { x: number; y: number };
+}
+
+export class Label {
+  private _container: Container;
+  private _text: Text;
+
+  constructor(opts: LabelOptions) {
+    this._container = new Container();
+    const style = new TextStyle({
+      fontFamily: "Arial",
+      fontSize: 30,
+      fill: 0xffffff,
+      ...opts.style,
+    });
+    this._text = new Text({
+      text: opts.text,
+      style,
+    });
+    if (opts.anchor) {
+      this._text.anchor.set(opts.anchor.x, opts.anchor.y);
+    }
+    if (opts.position) {
+      this._container.position.set(opts.position.x, opts.position.y);
+    }
+    this._container.addChild(this._text);
+  }
+
+  get container(): Container {
+    return this._container;
+  }
+
+  get text(): Text {
+    return this._text;
+  }
+
+  setText(text: string): void {
+    this._text.text = text;
+  }
+
+  getText(): string {
+    return this._text.text;
+  }
+
+  setStyle(style: TextStyleOptions): void {
+    this._text.style = new TextStyle({
+      ...this._text.style,
+      ...style,
+    });
+  }
+}
+
+export default Label;

src/components/Panel.ts

@@ -0,0 +1,39 @@
+import { Container, Graphics, type ContainerOptions } from "pixi.js";
+
+export interface PanelOptions extends ContainerOptions {
+  width: number;
+  height: number;
+  backgroundColor?: number;
+  padding?: number;
+  alpha?: number;
+}
+
+export class Panel extends Container {
+  private bg: Graphics;
+
+  constructor(opts: PanelOptions) {
+    super(opts);
+    this.bg = new Graphics();
+    this.drawBackground(opts);
+    this.addChild(this.bg);
+  }
+
+  private drawBackground(opts: PanelOptions): void {
+    this.bg.clear();
+    this.bg.roundRect(0, 0, opts.width, opts.height, 8);
+    this.bg.fill(opts.backgroundColor ?? 0x000000);
+    this.bg.alpha = opts.alpha ?? 0.8;
+  }
+
+  resize(width: number, height: number): void {
+    this.bg.clear();
+    this.bg.roundRect(0, 0, width, height, 8);
+    this.bg.fill(0x000000);
+  }
+
+  setBackgroundColor(color: number): void {
+    this.bg.tint = color;
+  }
+}
+
+export default Panel;