ui/BossNametag.razor

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.

NetworkingFile Access
@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);
	}
}