UI/Vitals.razor
@using Sandbox;
@using Sandbox.UI;

@inherits PanelComponent
@namespace Sandbox

@if ( !Player.IsValid() )
{
    return;
}

<root>
    <div class="bar">
        <div class="bar-inner" style="width:@((Health / 100f) * 100f)%" />
        <div class="icon" @ref="IconPanel" />
        <label class="text">@(Health.CeilToInt())</label>
    </div>

    @if ( Armour > 0 )
    {
        <div class="bar alt">
            <div class="bar-inner" style="width:@((Armour / 100f) * 100f )%" />
            <div class="icon small" @ref="ArmourIconPanel" />
            <label class="text small">@(Armour.CeilToInt())</label>
        </div>
    }
</root>

@code
{
    public Player Player => Player.Local;
    public float Health => Player.Health;
    public float Armour => Player.Armour;

    [Property]
    public Texture HealthIcon { get; set; }

    [Property]
    public Texture ArmourIcon { get; set; }

    public Panel IconPanel { get; set; }
    public Panel ArmourIconPanel { get; set; }

    protected override int BuildHash()
    {
        if (!Player.IsValid()) return -1;
        return System.HashCode.Combine( Player.Health, Player.Armour );
    }

  
    protected override void OnTreeBuilt()
    {
        if ( IconPanel is not null )
        {
            IconPanel.Style.SetBackgroundImage(HealthIcon);
        }

        if ( ArmourIconPanel is not null )
        {
            ArmourIconPanel.Style.SetBackgroundImage(ArmourIcon);
        }
    }
}