A UI Razor component for a hat selection panel. It displays four clickable image buttons that call methods to load different SceneFile assets; three buttons call Scene.Load with hen1, hen2, hen3, and the fourth is a locked/empty handler.
@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/melonchickenpic.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 hen2 { get; set; }
[Property] public SceneFile hen3 { get; set; }
[Property, TextArea] public string MyStringValue { get; set; } = "Hat Selection";
void Henrietta()
{
Scene.Load(hen1);
}
void Watermelon()
{
Scene.Load(hen2);
}
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);
}