ui/Panels/Nametag.razor
@using Sandbox;
@using Sandbox.UI;
@namespace SS1
@inherits Panel
@attribute [StyleSheet("Nametag.razor.scss")]

@{
	if (Player.IsDead)
		return;

	var hpPercent = Math.Clamp(Player.Health / Player.Stats[PlayerStat.MaxHp], 0f, 1f);
	var bgColor = new Color(1f, 0f, 0f);

	//var bgColor = Lerp3(new Color(0f, 0.75f, 0f), new Color(0.75f, 0.75f, 0f), new Color(1f, 0f, 0f), 1f - hpPercent);
	//var reloadProgress = Utils.EasePercent(Player.ReloadProgress, EasingType.CubicInOut);

	// var opacity = Utils.Map(Player.TimeSinceChangeHP.Relative, 0f, 1.5f, 1f, 0f, EasingType.ExpoIn);

	// opacity = (Player.TimeSinceChangeHP.Relative < 1f || hpPercent < 0.25f) ? 1f : 0f;

	var opacity = ( hpPercent < 1f || Player.TimeSinceChangeHP.Relative < 1f) ? 1f : 0f;
}

<root style="opacity: @(opacity); width: @((int)Utils.Map(Player.Stats[PlayerStat.MaxHp], 15f, 300f, 40f, 140f))px;">
	@{
		// var displayName = Player.Network.Owner.DisplayName;
	}

	@*
	<label class="name">
		@displayName.Truncate(12, "..")
	</label>

	<label class="level">
		@Player.Level.ToString()
	</label>
	*@


	<div class="hpbardelta" style="width:@(hpPercent * 100f)%;"></div>
	<div class="hpbaroverlay" style="width:@(hpPercent * 100f)%; background-color:@(bgColor.Rgba);"></div>

	@*<div class="reload_bar @(Player.IsReloading ? "showing" : "")" style="width:@(reloadProgress * 100f)%; opacity: @(Utils.MapReturn(reloadProgress, 0f, 1f, 0f, 1f, EasingType.ExtremeOut));"></div>*@
</root>

@code
{
	public Player Player { get; set; }

	protected override int BuildHash()
	{
		var timeSinceChangeHP = Player.TimeSinceChangeHP.Relative < 1f ? Time.Now : 0f;

		return HashCode.Combine(
			Player.Level,
			Player.Health,
			Player.Stats[PlayerStat.MaxHp],
			Player.ReloadProgress,
			Player.IsReloading,
			timeSinceChangeHP
		);
	}

	public 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);
	}
}