UI/HatSelect.razor

A UI Razor component for hat selection. It displays four image buttons and loads corresponding SceneFile assets when each button is clicked.

File AccessExternal Download
@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/tofuchickenpic.png" />
		</div>

	</div>
</root>

@code
{
	[Property] public SceneFile hen1 { get; set; }
	[Property] public SceneFile hen2 { get; set; }
	[Property] public SceneFile hen3 { get; set; }
	[Property] public SceneFile hen4 { 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()
	{
		Scene.Load(hen4);
	}
	/// <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 );
}