UI Razor component for a player icon. Renders avatar image, health bar, and level, highlights when selected or hovered, and toggles selection on click.
@namespace Sandbox
@using Sandbox;
@using Sandbox.UI;
@using System;
@inherits Panel
@attribute [StyleSheet("PlayerIcon.razor.scss")]
@{
var borderColor = Manager.Instance.SelectedPlayer.IsValid()
? Color.Lerp(Color.White, new Color(0.5f, 0.5f, 1f), Utils.FastSin(Time.Now * 24f))
: Color.White;
}
<root style="border: @(Player == Manager.Instance.SelectedPlayer ? 1 : 0)px solid @(borderColor.WithAlpha(0.75f).Rgba);">
<div class="icon" style="opacity:@((Player == Manager.Instance.SelectedPlayer ? 1f : 0.5f) * (Player.IsDead ? 0.1f : 1f) * (IsHovering ? 1f : 0.8f));">
<img src="avatar:@Player.Network.Owner.SteamId" />
<div class="hp_bg"></div>
<div class="hp_delta" style="width:@((Player.Health / Player.GetSyncStat(PlayerStat.MaxHp)) * 100f)%;"></div>
<div class="hp_fill" style="width:@((Player.Health / Player.GetSyncStat(PlayerStat.MaxHp)) * 100f)%;"></div>
</div>
<div class="player_level">@(Player.Level)</div>
</root>
@code
{
public Player Player { get; set; }
public bool IsHovering;
protected override void OnClick(MousePanelEvent e)
{
base.OnClick(e);
if (Manager.Instance.SelectedPlayer == Player)
Manager.Instance.SelectedPlayer = null;
else
Manager.Instance.SelectedPlayer = Player;
e.StopPropagation();
}
protected override void OnMouseOver(MousePanelEvent e)
{
if(e.Target != this)
return;
Manager.Instance.HoveredPlayerIcon = Player;
IsHovering = true;
}
protected override void OnMouseOut(MousePanelEvent e)
{
Manager.Instance.HoveredPlayerIcon = null;
IsHovering = false;
}
protected override int BuildHash()
{
return HashCode.Combine(RealTime.Now);
}
}