ui/PerkFloaterWorldPanel.razor

A UI WorldPanel Razor component that renders a perk floater in world space. It displays rarity background, icon, and a progress bar, and updates opacity, scaling, rotation and a Degrees property when the perk is removed.

NetworkingFile Access
@namespace Sandbox
@using Sandbox;
@using Sandbox.UI;
@using System;
@inherits PanelComponent
@attribute [StyleSheet("PerkFloaterWorldPanel.razor.scss")]

<root style="opacity:@(PerkFloater.Opacity); @(PerkFloater.WasRemoved ? $"transform: rotate({Degrees}deg);" : "")">
	@{
		var bgColor = PerkManager.GetCardRarityColor(PerkFloater.Rarity, PerkFloater.Curse);
		var highlightColor = PerkManager.GetCardRarityColor(PerkFloater.Rarity, PerkFloater.Curse, alpha: 0.7f);
	}
	<panel class="rarity" style="background-color:@(bgColor.Rgba);">
		<panel class="icon" style="background-image: url(@(PerkFloater.IconPath)); " />
	</panel>

	<panel class="progress" style="width:100%; background-color:@(new Color(0f, 0f, 0f, 0.6f).Rgba); z-index: 1;"></panel>
	<panel class="progress" style="width:@(PerkFloater.Progress * 100f)%; background-color:@highlightColor.Rgba; z-index: 2;"></panel>
</root>

@code
{
	[Property] public PerkFloater PerkFloater { get; set; } 
	[Property] public Sandbox.WorldPanel WorldPanel { get; set; }

	public float Degrees { get; set; }

	protected override void OnUpdate()
	{
		base.OnUpdate();

		if(PerkFloater.WasRemoved) 
		{
			var dt = PerkFloater.Timing == ParticleEffect.TimingMode.GameTime ? Time.Delta : RealTime.Delta;
			WorldPanel.PanelSize *= (1f - dt * 0.75f);
			// WorldPanel.LookAtCamera = false;

			var timeNow = PerkFloater.Timing == ParticleEffect.TimingMode.GameTime ? Time.Now : RealTime.Now;
			WorldPanel.WorldRotation = WorldPanel.WorldRotation.RotateAroundAxis(Vector3.Right, Time.Now * 5f);

			Degrees += PerkFloater.RemovedRotateSpeed * dt;
		}
	}

	protected override int BuildHash()
	{
		var timeNow = PerkFloater.Timing == ParticleEffect.TimingMode.GameTime ? Time.Now : RealTime.Now;
		return HashCode.Combine(timeNow);
	}
}