A UI Razor component for rich text that renders a small shop item icon. It implements IRichTextPanel, parses an item id from rich text, looks up the item in ProgressManager.ShopItems, shows its icon as a background image, and sets/clears hovered item references on mouse over/out and deletion.
@namespace Sandbox
@using Sandbox;
@using Sandbox.UI;
@using System;
@inherits Panel
@implements IRichTextPanel
@attribute [RichTextPanel( @"\[item:([\w_]+)\]" )]
<root class="richtext-shop-item-icon">
@if ( _item.HasValue )
{
<div class="image" style="background-image: url( @_item.Value.IconPath )"></div>
}
</root>
<style>
.richtext-shop-item-icon {
position: relative;
width: 24px;
height: 24px;
flex-shrink: 0;
pointer-events: all;
cursor: default;
.image {
position: relative;
width: 100%;
height: 100%;
background-position: center;
background-size: cover;
}
}
</style>
@code
{
ShopItemDef? _item;
public float? ImageSize { get; set; }
public void ParseRichText( string text )
{
var def = ProgressManager.ShopItems.FirstOrDefault( d => d.Id == text );
_item = def.Id != null ? def : null;
}
protected override void OnMouseOver( MousePanelEvent e )
{
if ( !_item.HasValue ) return;
Manager.Instance.HoveredShopItem = _item;
Manager.Instance.HoveredShopItemPanel = this;
}
protected override void OnMouseOut( MousePanelEvent e )
{
if ( Manager.Instance.HoveredShopItemPanel != this ) return;
Manager.Instance.HoveredShopItem = null;
Manager.Instance.HoveredShopItemPanel = null;
}
public override void OnDeleted()
{
base.OnDeleted();
if ( Manager.Instance.HoveredShopItemPanel != this ) return;
Manager.Instance.HoveredShopItem = null;
Manager.Instance.HoveredShopItemPanel = null;
}
protected override int BuildHash() => HashCode.Combine( _item?.Id );
}