In This House
Released
Rob-a-ton in this new robathon!
UI/RadialProgress.razor
A UI component (RadialProgress.razor) that renders a circular progress indicator using a conic-gradient background and CSS mask. It reads the local Player's interaction state and progress, shows the widget when interacting, and computes gradient stop percentages for the filled and transparent sections.
@using System
@using Sandbox
@using Sandbox.UI
@namespace BrickJam.UI
@inherits Panel
<root class="@(Active ? "active" : "")"
style="background: conic-gradient(white 0%, white @WhitePercent, transparent @TransparentPercent)">
</root>
@code {
private bool Active => Player.Local?.IsInteracting ?? false;
private float Value => (Player.Local?.InteractionProgress ?? 0f).Clamp( 0f, 1f );
private string WhitePercent => $"{Value * 100f}%";
private string TransparentPercent => $"{Value * 100f + 0.01f}%";
protected override int BuildHash() => HashCode.Combine( Active, Value );
}
<style>
RadialProgress {
position: absolute;
width: 96px;
height: 96px;
aspect-ratio: 1;
border-radius: 50%;
opacity: 0;
mask-image: radial-gradient(black 0%, black 36%, white 37%, white 100%);
&.active {
opacity: 1;
}
}
</style>