UI/PlayerKillFeed/PlayerKillFeed.razor
@using Sandbox.UI
@inherits Panel
<style>
PlayerKillFeed {
position: absolute;
top: 80px;
right: 100px;
z-index: 50;
flex-direction: column-reverse;
width: 500px;
align-items: flex-end;
.entries {
flex-direction: column-reverse;
align-items: flex-end;
}
}
PlayerKillFeedEntry {
flex-direction: row;
align-items: center;
justify-content: flex-end;
background-color: rgba(78, 75, 66, 0.5);
border-left: 5px solid rgba(0, 0, 0, 0.2);
border-right: 5px solid rgba(0, 0, 0, 0.2);
margin-bottom: 5px;
color: white;
transition: all 0.2s ease-out;
opacity: 1;
flex-shrink: 0;
flex-grow: 0;
padding: 12px;
height: 45px;
font-family: "AzeretMono-Medium";
font-size: 24px;
&:intro {
transform: scale(2);
padding-top: 0;
padding-bottom: 0;
margin-bottom: 0;
height: 0;
opacity: 0;
}
&:outro {
top: -20px;
opacity: 0;
transform: scale(1.1);
transition: all 0.2s ease-in;
}
.killer { padding: 0 12px; }
.victim { padding: 0 12px; }
.method { opacity: 0.3; }
&.faded { opacity: 0; }
}
</style>
<root>
<div @ref="_entries" class="entries">
<div style="flex-grow: 1;"></div>
</div>
</root>
@code
{
private Panel _entries;
public static PlayerKillFeed Current { get; private set; }
public PlayerKillFeed() => Current = this;
protected override void OnAfterTreeRender( bool firstTime )
{
base.OnAfterTreeRender( firstTime );
if ( !firstTime ) return;
if ( _entries != null ) _entries.PreferScrollToBottom = true;
KillFeedEvent.OnKill += AddEntry;
}
public override void OnDeleted()
{
KillFeedEvent.OnKill -= AddEntry;
if ( Current == this ) Current = null;
}
public void AddEntry( string killer, string victim, string method )
{
_entries?.AddChild( new PlayerKillFeedEntry( killer, victim, method ) );
}
}