A UI Razor component that displays a boss nametag with health bar, name label and numeric HP. It computes HP percentage and interpolates a color across three stops for the health overlay, and supplies a BuildHash using current health.
@namespace Sandbox
@using Sandbox;
@using Sandbox.UI;
@using System;
@inherits Panel
@attribute [StyleSheet("BossNametag.razor.scss")]
<root>
@{
var currHp = Boss.Health;
var maxHp = Boss.MaxHealth;
var hpPercent = currHp / maxHp;
var bgColor = Lerp3(new Color(0f, 0.75f, 0f), new Color(0.75f, 0.75f, 0f), new Color(1f, 0f, 0f), 1f - hpPercent);
}
<div class="hpbar">
<div class="bar_container" style=@("mask-image: url(\"/textures/ui/panel/boss_healthbar_mask.png\");")>
<div class="hpbardelta" style="width:@(hpPercent * 100f)%;"></div>
<div class="hpbaroverlay" style="width:@(hpPercent * 100f)%; background-color:@(bgColor.Rgba);"></div>
</div>
<div class="name_label">@("BOSS")</div>
<div class="hp_label">
<div class="label">@($"{(int)Math.Ceiling(currHp)}")</div>
<div class="label">/</div>
<div class="label">@($"{(int)maxHp}")</div>
</div>
</div>
</root>
@code
{
public Boss Boss { get; set; }
protected override int BuildHash()
{
var currHp = Boss.Health;
return HashCode.Combine(
currHp
);
}
Color Lerp3(Color a, Color b, Color c, float t)
{
if (t < 0.5f) // 0.0 to 0.5 goes to a -> b
return Color.Lerp(a, b, t / 0.5f);
else // 0.5 to 1.0 goes to b -> c
return Color.Lerp(b, c, (t - 0.5f) / 0.5f);
}
}