s&box

UI/PlayerHud/Components/Gamemode/PayloadIndicator.razor

A UI Razor component for the payload indicator on the player HUD. It generates a row of indicator elements showing distances and capture progress for payload-related players, updates visibility each tick, and forces rebuilds by hashing current time.

Rough CodeHttp Calls

🐞 Both background-color style strings have a trailing ')' which makes the inline CSS invalid ("background-color: rgba(20, 150 ,10, 0.8);)" and $"background-color: {ColourString};)").

@using System;
@using Sandbox.UI;
@using KOTH.PlayerExp;

@namespace KOTH.UI
@inherits Panel

@attribute [StyleSheet]

<root class="flex absolute align-center justify-center">
	@GeneratePlayerRow(CurrentData.OutData)
</root>

@code
{
	private RenderFragment GeneratePlayerRow(List<(float Distance, float CaptureAmount)> OutData) => Builder =>
	{
		if (OutData == null || OutData.Count == 0)
		{
			return;
		}

		var Sequency = 0;
		Builder.OpenElement(Sequency++, "div");
		Builder.AddAttribute(Sequency++, "class", "indicator");

		Builder.OpenElement(Sequency++, "div");
		Builder.AddAttribute(Sequency++, "class", "point");
		Builder.AddAttribute(Sequency++, "style", $"background-color: rgba(20, 150 ,10, 0.8);)");
		Builder.CloseElement();

		foreach ((float Distance, float CaptureAmount) in OutData)
		{
			Builder.OpenElement(Sequency++, "div");
			Builder.AddAttribute(Sequency++, "class", "path");
			Builder.AddAttribute(Sequency++, "style", $"width: {Distance.FloorToInt()}px;");
			Builder.AddAttribute(Sequency++, "style", $"background-image: linear-gradient(to right, #FFFF00AA 100%, #FF0A0AAA {CaptureAmount * 100f}%);");
			Builder.CloseElement();

			Builder.OpenElement(Sequency++, "div");
			Builder.AddAttribute(Sequency++, "class", "point");
			Builder.AddAttribute(Sequency++, "class", "point");
			var ColourString = CaptureAmount >= 1 ? "rgba(0, 50, 0, 0.8)" : "rgba(225, 0, 0, 0.95)";

			Builder.AddAttribute(Sequency++, "style", $"background-color: {ColourString};)");
			Builder.CloseElement();
		}


		Builder.CloseElement();
	};

	protected override int BuildHash()
	{
		return HashCode.Combine(Time.Now);
	}

	FPayloadUIData CurrentData;

	public override void Tick()
	{
		if (!PayloadUI.QueryUIData(out CurrentData))
		{
			SetClass("hidden", true);
			return;
		}

		SetClass("hidden", false);
	}
}