import {CssType, HtmlPanel} from '@deep/engine';

/**
 * 岩爆标签面板
 */
export class RockBurstLabelHtmlPanel extends HtmlPanel {
    constructor(type: CssType = CssType.CSS2D) {
        super(type);
        this.initContent();
    }

    private initContent(): void {
        const content = `
            <div style="display:flex; flex-direction:column; align-items:center; pointer-events:none;transform: translate(0%, -50%)">
                <div style="
                    padding:6px 12px;
                    border-radius:8px;
                    border:1px solid rgba(255,255,255,0.35);
                    background:linear-gradient(135deg, rgba(111,0,0,0.9) 0%, rgba(170,0,0,0.9) 100%);
                    color:#ffffff;
                    font-size:13px;
                    font-weight:700;
                    letter-spacing:1px;
                    box-shadow:0 4px 14px rgba(0,0,0,0.35);
                    white-space:nowrap;
                ">岩爆</div>
                <div style="
                    width:0;
                    height:0;
                    margin-top:4px;
                    border-left:8px solid transparent;
                    border-right:8px solid transparent;
                    border-top:14px solid rgba(170,0,0,0.95);
                    filter:drop-shadow(0 2px 3px rgba(0,0,0,0.35));
                "></div>
            </div>
        `;

        this.updateContent(content);
    }
}