HUD.razor
@using Sandbox;
@using Sandbox.UI;
@inherits PanelComponent
@namespace Sandbox

<root>
	<div class="spacer"></div>
	<div class="lower">
		<div @ref=HealthBox class="health box" style="color: @color.Rgba; background-color: @bgcolor.Rgba">@Health</div>
	</div>
</root>

@code
{
	public int Health { get; set; }
	public Panel HealthBox;
	[Property]
	public Color Color
	{
		get
		{
			return color;
		}
		set
		{
			color = value;
			var c = value;
			c.a = 0.3f;
			bgcolor = c;
		}
	}

	Color color;
	Color bgcolor;

	[Property]
	public Vector4 Viewport
	{
		get { return viewport; }
		set
		{
			viewport = value;

			if (Panel is null) return;

			FitViewport();
		}
	}
	Vector4 viewport = new Vector4(0, 0, 1, 1);

	protected override void OnEnabled()
	{
		base.OnEnabled();

		FitViewport();
	}

	void FitViewport()
	{
		if (viewport.z < 1) Panel.Style.FontSize = Length.Pixels(35);

		Panel.Style.Height = Length.Percent(viewport.w * 100f);
		Panel.Style.MarginTop = Length.Percent(viewport.y * 100f);
		Panel.Style.Width = Length.Percent(viewport.z * 100f);
		Panel.Style.MarginLeft = Length.Percent(viewport.x * 100f);
	}

	public async void HealthBadBlip()
	{
		HealthBox.RemoveClass("fade_bg");
		HealthBox.AddClass("red_blip");

		if (Health == 0) return;

		await Task.DelayRealtime(100);
		HealthBox.AddClass("fade_bg");
		HealthBox.RemoveClass("red_blip");
	}

	public async void HealthGoodBlip()
	{
		HealthBox.RemoveClass("fade_bg");
		HealthBox.AddClass("green_blip");

		if (Health == 0) return;

		await Task.DelayRealtime(100);
		HealthBox.AddClass("fade_bg");
		HealthBox.RemoveClass("green_blip");
	}

	/// <summary>
	/// the hash determines if the system should be rebuilt. If it changes, it will be rebuilt
	/// </summary>
	protected override int BuildHash() => System.HashCode.Combine( Health, Viewport, Color );
}