s&box

UI/Timer.razor

A Blazor-style UI component (Timer.razor) for the game HUD that shows a countdown timer. It reads the game's MansionGame singleton for whether the timer is active and the remaining time, formats MM:SS, and exposes a build hash so the UI system can detect changes. Includes component CSS for visibility and show/hide animation.

Reflection

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

<root class="@( Active ? "active" : "" )">
	<div style="flex-direction: column">
		<span class="title">TIME</span>
		@TimeText
	</div>
</root>

@code {
	private bool Active => MansionGame.Instance?.TimerActive ?? false;
	private float Remaining => MansionGame.Instance is { } game ? MathF.Max( game.TimeLeft, 0f ) : 0f;

	private string TimeText
	{
		get
		{
			var total = (int)MathF.Ceiling( Remaining );
			return $"{total / 60:0}:{total % 60:00}";
		}
	}

	protected override int BuildHash() => HashCode.Combine( Active, (int)MathF.Ceiling( Remaining ) );
}

<style>
	Timer {
		position: absolute;
		top: 0px;
		left: 0; right: 0;
		justify-content: center;
		color: white;
		font-size: 32px;
		text-align: center;
		text-shadow: 4px 4px 0px black;
		padding: 10px;
		padding-bottom: 20px;
		background: linear-gradient(to bottom, rgba(black, 0.5) 0%, rgba(black, 0.2) 75%, rgba(black, 0) 100% );
		z-index: 3;
		transform: translateY(-100%);
		transition: transform 0.5s ease-in-out;
		font-family: "alagard";

		.title {
			font-size: 48px;
			color: darken(yellow, 0.2);
			margin-top: 5px;
		}

		&.active {
			transform: translateY(0%);
		}
	}
</style>