A Razor UI component for a hat selection panel. It renders four image buttons, exposes two SceneFile properties (hen1 and hen3) and a string property, and loads scenes when the Henrietta or Shooter buttons are clicked.
@using Sandbox;
@using Sandbox.UI;
@inherits PanelComponent
@namespace Sandbox
<root>
<h2>Hat Selection</h2>
<div class="hatselector">
<div class="image-button" onclick=@Henrietta>
<image src="images/henriettapicture.png" />
</div>
<div class="image-button" onclick=@Watermelon>
<image src="images/lock1.png" />
</div>
<div class="image-button" onclick=@Shooter>
<image src="images/shooterchickenpic.png" />
</div>
<div class="image-button" onclick=@Tofu>
<image src="images/lock3.png" />
</div>
</div>
</root>
@code
{
[Property] public SceneFile hen1 { get; set; }
[Property] public SceneFile hen3 { get; set; }
[Property, TextArea] public string MyStringValue { get; set; } = "Hat Selection";
void Henrietta()
{
Scene.Load(hen1);
}
void Watermelon()
{
}
void Shooter()
{
Scene.Load(hen3);
}
void Tofu()
{
}
/// <summary>
/// the hash determines if the system should be rebuilt. If it changes, it will be rebuilt
/// </summary>
protected override int BuildHash() => System.HashCode.Combine(MyStringValue);
}