UI/Nametag.razor

A Razor UI component for player nametags. It finds a Player component in its parent, hides the tag for the local player, and shows the owner's DisplayName when the player entity is valid and alive. It also provides a BuildHash override and CSS styling for the nametag.

@using System
@using Sandbox
@using Sandbox.UI
@using WorldPanel = Sandbox.WorldPanel
@namespace BrickJam.UI
@inherits PanelComponent

<root>
	@if ( !IsLocal && Player.IsValid() && Player.IsAlive )
	{
		<div class="container">
			<span>@Name</span>
		</div>
	}
</root>

@code {
	private Player player;
	private Player Player => player ??= GetComponentInParent<Player>();

	// Don't draw your own nametag in first person.
	private bool IsLocal => Player == Player.Local;

	private string Name => Player.IsValid() && Player.Network.Owner is { } owner ? owner.DisplayName : "player";

	protected override int BuildHash() => HashCode.Combine( IsLocal, Name, Player?.IsAlive ?? false );
}

<style>
	Nametag {
		transition: transform 0.5s ease-in-out;
		justify-content: center;
		align-items: center;
		width: 100%;
		height: 100%;

		.container {
			padding: 10px;
			padding-right: 30px;
			padding-left: 30px;
			font-size: 32px;
			align-items: center;
			font-family: "alagard";
			flex-direction: column;
			color: white;
			text-shadow: 3px 3px 0px black;
			background: linear-gradient(to left, rgba(black, 0) 0%, rgba(black, 0.5) 20%, rgba(black, 0.5) 80%, rgba(black, 0) 100%);
		}

		&:outro {
			transform: scale(0);
		}

		&:intro {
			transform: scale(0);
		}
	}
</style>