UI/PlayerCounter.razor

A UI Razor component that shows a player counter. It renders PlayersAlive of TotalPlayers and toggles an active CSS class based on MansionGame.Instance.TimerActive. It computes BuildHash from Active, PlayersAlive and TotalPlayers for change detection.

Networking
@using System
@using System.Linq
@using Sandbox
@using Sandbox.UI
@namespace BrickJam.UI
@inherits Panel

<root class="@(Active ? "active" : "")">
	<div class="container">
		<div class="icon" />
		<label>@PlayersAlive of @TotalPlayers</label>
	</div>
</root>

@code {
	private bool Active => MansionGame.Instance?.TimerActive ?? false;
	private int PlayersAlive => Game.ActiveScene is { } scene ? scene.GetAllComponents<Player>().Count( p => p.IsAlive ) : 0;
	private int TotalPlayers => Connection.All.Count;

	protected override int BuildHash() => HashCode.Combine( Active, PlayersAlive, TotalPlayers );
}

<style>
	PlayerCounter {
		position: absolute;
		right: 0; top: 100px;
		padding: 5px 10px 0 40px;
		font-size: 50px;
		color: white;
		flex-direction: row-reverse;
		background: linear-gradient(to left, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.2) 75%, rgba(0,0,0,0) 100%);
		transform: translateX(100%);
		transition: transform 0.5s ease-in-out;

		&.active { transform: translateX(0%); }

		.container { flex-direction: row; text-shadow: 4px 4px 0px black; }
	}
</style>