Newer
Older
rpg / apps / game / src / systems / combat / HealthBar.ts
import { Container, Graphics } from '@rpg/engine';
import { PLAYER_COMBAT } from './stats';

/**
 * Полоса здоровья героя: сердечки в левом верхнем углу (uiRoot).
 */
export class HealthBar extends Container {
    private hearts: Graphics[] = [];

    constructor() {
        super();
        for (let i = 0; i < PLAYER_COMBAT.maxHp; i++) {
            const h = new Graphics();
            h.position.set(8 + i * 11, 16);
            this.addChild(h);
            this.hearts.push(h);
        }
        this.draw(PLAYER_COMBAT.maxHp);
    }

    /** Обновить по текущему HP. */
    setHp(hp: number): void {
        this.draw(hp);
    }

    private draw(hp: number): void {
        this.hearts.forEach((h, i) => {
            h.clear();
            // Пиксельное сердечко 7x6 из прямоугольников
            const color = i < hp ? 0xb0453f : 0x2a2a33;
            const border = i < hp ? 0x7a2f2b : 0x1c1c24;
            const px = (x: number, y: number, w: number, hh: number, c: number): void => {
                h.rect(x, y, w, hh).fill(c);
            };
            px(-3, -2, 6, 4, border); // тело
            px(-2, 2, 4, 1, border);
            px(-3, -2, 2, 2, color);
            px(1, -2, 2, 2, color);
            px(-2, -1, 4, 2, color);
            px(-2, 1, 2, 1, color);
            px(0, 1, 1, 1, color);
            px(-3, -3, 2, 1, color); // горбики
            px(1, -3, 2, 1, color);
        });
    }
}