@using System
@using Sandbox
@using Sandbox.UI
@namespace BrickJam.UI.MainMenu
@inherits PanelComponent

<root>
	<div class="panel">
		<div class="title">In This House</div>

		<div class="buttons">
			<div class="button highlight" onclick=@StartGame>Start Game</div>
			<div class="button" onclick=@( () => showCredits = !showCredits )>Credits</div>
		</div>

		@if ( showCredits )
		{
			<div class="credits">
				<div class="line">A small fish jam game.</div>
				<div class="line">Scene-System port of the original Entity-System project.</div>
				<div class="line dim">Multiplayer is handled by the s&box lobby / friends system.</div>
			</div>
		}
	</div>
</root>

@code {
	/// <summary>The gameplay scene to load on "Start Game" (set this to scenes/game.scene).</summary>
	[Property] public SceneFile GameScene { get; set; }

	private bool showCredits;

	private void StartGame()
	{
		Sound.Play( "sounds/ui/press.sound" );

		if ( GameScene is not null )
			Scene.Load( GameScene );
	}

	protected override int BuildHash() => HashCode.Combine( showCredits, GameScene );
}

<style>
	MainMenu {
		position: absolute;
		top: 0; left: 0;
		width: 100%;
		height: 100%;
		align-items: center;
		justify-content: center;
		font-family: alagard;
		background: linear-gradient(rgba(5,4,8,0.6), rgba(5,4,8,0.9));
        pointer-events: all;

		.panel {
			flex-direction: column;
			align-items: center;
		}

		.title {
			font-size: 96px;
			color: rgba(255,220,80,1);
			text-shadow: 6px 6px 0px black;
			margin-bottom: 40px;
		}

		.buttons {
			flex-direction: column;
			align-items: center;

			.button {
				min-width: 320px;
				padding: 14px 24px;
				margin-bottom: 12px;
				font-size: 36px;
				color: white;
				text-align: center;
				text-shadow: 3px 3px 0px black;
				background-color: rgba(255,255,255,0.06);
				border: 2px solid rgba(255,255,255,0.15);

				&:hover { background-color: rgba(255,220,80,0.15); cursor: pointer; }
				&.highlight { border-color: rgba(255,220,80,0.6); }
			}
		}

		.credits {
			margin-top: 24px;
			flex-direction: column;
			align-items: center;
			color: white;
			font-size: 24px;
			text-shadow: 2px 2px 0px black;

			.line { margin-bottom: 6px; }
			.dim { color: rgba(180,180,180,1); }
		}
	}
</style>