Piotr 'pwh' Hanusiak
136 lines
4.2 KiB
TypeScript
136 lines
4.2 KiB
TypeScript
import { GridItem } from "@home-based-studio/phaser3-utils";
|
|
import { GridItemEvent } from "@home-based-studio/phaser3-utils/lib/utils/gui/containers/grids/GridItem";
|
|
|
|
export interface WokaBodyPartSlotConfig {
|
|
color: number;
|
|
borderThickness: number;
|
|
borderColor: number;
|
|
borderSelectedColor: number;
|
|
offsetX: number;
|
|
offsetY: number;
|
|
bodyImageKey?: string;
|
|
categoryImageKey?: string;
|
|
imageKey?: string;
|
|
selected?: boolean;
|
|
}
|
|
|
|
export enum WokaBodyPartSlotEvent {
|
|
Clicked = "WokaBodyPartSlotEvent:Clicked",
|
|
}
|
|
|
|
export class WokaBodyPartSlot extends GridItem {
|
|
private background: Phaser.GameObjects.Image;
|
|
private frame: Phaser.GameObjects.Graphics;
|
|
private categoryImage?: Phaser.GameObjects.Image;
|
|
private bodyImage: Phaser.GameObjects.Image;
|
|
private image: Phaser.GameObjects.Image;
|
|
|
|
private config: WokaBodyPartSlotConfig;
|
|
|
|
private selected: boolean;
|
|
|
|
public static readonly SIZE: number = 50;
|
|
|
|
constructor(scene: Phaser.Scene, x: number, y: number, config: WokaBodyPartSlotConfig, id?: number) {
|
|
super(scene, `${id}`, { x, y });
|
|
|
|
this.config = config;
|
|
|
|
this.selected = this.config.selected ?? false;
|
|
|
|
this.background = this.background = this.scene.add.image(0, 0, "floorTexture");
|
|
this.frame = this.scene.add.graphics();
|
|
this.drawFrame();
|
|
this.add([this.background, this.frame]);
|
|
|
|
if (this.config.categoryImageKey) {
|
|
this.categoryImage = this.scene.add
|
|
.image(WokaBodyPartSlot.SIZE / 2 - 1, -WokaBodyPartSlot.SIZE / 2 + 1, this.config.categoryImageKey)
|
|
.setDisplaySize(16, 16)
|
|
.setAlpha(0.75)
|
|
.setOrigin(1, 0);
|
|
this.add(this.categoryImage);
|
|
}
|
|
|
|
this.bodyImage = this.scene.add
|
|
.image(this.config.offsetX, this.config.offsetY, this.config.bodyImageKey ?? "")
|
|
.setVisible(this.config.imageKey !== undefined);
|
|
|
|
this.image = this.scene.add
|
|
.image(this.config.offsetX, this.config.offsetY, this.config.imageKey ?? "")
|
|
.setVisible(this.config.bodyImageKey !== undefined);
|
|
|
|
this.setSize(WokaBodyPartSlot.SIZE, WokaBodyPartSlot.SIZE);
|
|
|
|
this.add([this.bodyImage, this.image]);
|
|
|
|
this.setInteractive({ cursor: "pointer" });
|
|
this.scene.input.setDraggable(this);
|
|
|
|
this.bindEventHandlers();
|
|
|
|
this.scene.add.existing(this);
|
|
}
|
|
|
|
public getContentData(): { bodyImageKey?: string; key?: string } {
|
|
return { bodyImageKey: this.config.bodyImageKey, key: this.config.imageKey };
|
|
}
|
|
|
|
public setTextures(bodyTextureKey?: string, imageTextureKey?: string): void {
|
|
this.setBodyTexture(bodyTextureKey);
|
|
this.setImageTexture(imageTextureKey);
|
|
}
|
|
|
|
public setBodyTexture(textureKey?: string, frame?: string | number): void {
|
|
this.bodyImage.setVisible(textureKey !== undefined && textureKey !== "");
|
|
if (textureKey) {
|
|
this.bodyImage.setTexture(textureKey, frame);
|
|
this.config.bodyImageKey = textureKey;
|
|
}
|
|
}
|
|
|
|
public setImageTexture(textureKey?: string, frame?: string | number): void {
|
|
this.image.setVisible(textureKey !== undefined && textureKey !== "");
|
|
if (textureKey) {
|
|
this.image.setTexture(textureKey, frame);
|
|
this.config.imageKey = textureKey;
|
|
}
|
|
}
|
|
|
|
public select(select: boolean = true): void {
|
|
if (this.selected === select) {
|
|
return;
|
|
}
|
|
this.selected = select;
|
|
this.updateSelected();
|
|
}
|
|
|
|
public isSelected(): boolean {
|
|
return this.selected;
|
|
}
|
|
|
|
protected bindEventHandlers(): void {
|
|
super.bindEventHandlers();
|
|
|
|
this.on(GridItemEvent.Clicked, () => {
|
|
this.emit(WokaBodyPartSlotEvent.Clicked, this.selected);
|
|
});
|
|
}
|
|
|
|
private drawFrame(): void {
|
|
this.frame.clear();
|
|
this.frame.lineStyle(
|
|
this.config.borderThickness,
|
|
this.selected ? this.config.borderSelectedColor : this.config.borderColor
|
|
);
|
|
|
|
const size = WokaBodyPartSlot.SIZE;
|
|
|
|
this.frame.strokeRect(-size / 2, -size / 2, size, size);
|
|
}
|
|
|
|
private updateSelected(): void {
|
|
this.drawFrame();
|
|
}
|
|
}
|