diff --git a/src/components/Label.ts b/src/components/Label.ts new file mode 100644 index 0000000..ea98cad --- /dev/null +++ b/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; \ No newline at end of file diff --git a/src/components/Panel.ts b/src/components/Panel.ts new file mode 100644 index 0000000..08d1fa4 --- /dev/null +++ b/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; \ No newline at end of file