A UI Razor panel that displays a dash reminder with a key hint and a progress bar. It shows either "RB" or "Space" depending on controller use, animates a fill based on a timer, fades after a duration, and invokes OnComplete when finished.
@namespace Sandbox
@using Sandbox;
@using Sandbox.UI;
@using System;
@inherits Panel
@attribute [StyleSheet("DashReminderPanel.razor.scss")]
@{
var keyText = Input.UsingController ? "RB" : "Space";
var progress = Math.Clamp( 1f - ((float)_showTimer / _displayDuration), 0f, 1f );
var isFading = (float)_showTimer > _displayDuration;
}
<root>
<div class="dash-reminder @(isFading ? "fading" : "") @(_initialized ? "initialized" : "")">
<div class="reminder-text">Press @keyText to dash</div>
<div class="progress-bar-bg">
<div class="progress-bar-fill" style="width: @(progress * 100f)%;"></div>
</div>
</div>
</root>
@code
{
public Action OnComplete { get; set; }
RealTimeSince _showTimer;
bool _initialized;
const float _displayDuration = 10f;
const float _fadeDuration = 0.4f;
protected override int BuildHash()
{
return HashCode.Combine( Input.UsingController, _initialized, (int)((float)_showTimer * 10f) );
}
protected override void OnAfterTreeRender( bool firstTime )
{
if ( firstTime )
_showTimer = 0f;
}
public override void Tick()
{
_initialized = true;
if ( (float)_showTimer > _displayDuration + _fadeDuration )
OnComplete?.Invoke();
}
}