A UI Razor component for displaying a ground loot item. It finds a parent Loot component, shows the item's FullName and formatted MonetaryValue with a currency glyph, and provides a build hash for change detection; includes component CSS for layout and animations.
@using System
@using Sandbox
@using Sandbox.UI
@namespace BrickJam.UI
@inherits PanelComponent
<root>
@if ( Loot.IsValid() )
{
<div class="container">
<span>@Loot.FullName</span>
<div class="row">
<span class="currency">$</span><span>@($"{Loot.MonetaryValue:n0}")</span>
</div>
</div>
}
</root>
@code {
private Loot loot;
private Loot Loot => loot ??= GetComponentInParent<Loot>();
protected override int BuildHash() => HashCode.Combine( Loot?.FullName, Loot?.MonetaryValue ?? 0 );
}
<style>
GroundLootPanel {
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%);
.currency {
padding-right: 4px;
font-size: 22px;
top: 5px;
color: rgba(50, 205, 50, 1);
}
}
&:outro {
transform: scale(0);
}
&:intro {
transform: scale(0);
}
}
</style>