From b5c6b8244dafdd9354e8a43c5db3c18b403feab9 Mon Sep 17 00:00:00 2001
From: Lucas Morgan <hauth@live.com>
Date: Sat, 16 Nov 2024 21:39:17 -0600
Subject: [PATCH] Style boost

---
 Shogi.UI/Layout/NavMenu.razor                 | 22 ------
 .../GameBoard/GameBoardPresentation.razor     | 70 +++++++++----------
 .../GameBoard/GameboardPresentation.razor.css | 26 +++++--
 .../Pages/Play/GameBoard/OpponentName.razor   |  4 +-
 .../Pages/Play/GameBoard/PlayerName.razor     |  6 +-
 5 files changed, 59 insertions(+), 69 deletions(-)

diff --git a/Shogi.UI/Layout/NavMenu.razor b/Shogi.UI/Layout/NavMenu.razor
index 246c67d..31a1476 100644
--- a/Shogi.UI/Layout/NavMenu.razor
+++ b/Shogi.UI/Layout/NavMenu.razor
@@ -29,33 +29,11 @@
 @code {
 
 	async Task CreateSession()
-
-
-
 	{
-
-
-
 		var sessionId = await Api.PostSession();
-
-
-
 		if (!string.IsNullOrEmpty(sessionId))
-
-
-
 		{
-
-
-
 			navigator.NavigateTo($"play/{sessionId}");
-
-
-
 		}
-
-
-
 	}
-
 }
diff --git a/Shogi.UI/Pages/Play/GameBoard/GameBoardPresentation.razor b/Shogi.UI/Pages/Play/GameBoard/GameBoardPresentation.razor
index 9ecf4d7..516ff12 100644
--- a/Shogi.UI/Pages/Play/GameBoard/GameBoardPresentation.razor
+++ b/Shogi.UI/Pages/Play/GameBoard/GameBoardPresentation.razor
@@ -5,24 +5,17 @@
 	<!-- Game board -->
 	<section class="board" data-perspective="@Perspective" style="grid-area: board">
 		@for (var rank = 1; rank < 10; rank++)
-
 		{
-
 			foreach (var file in Files)
-
 			{
-
 				var position = $"{file}{rank}";
-
 				var piece = Session?.BoardState.Board[position];
-
 				var isSelected = piece != null && SelectedPosition == position;
 				<div class="tile" @onclick="OnClickTileInternal(position)"
 						 data-position="@(position)"
 						 data-selected="@(isSelected)"
 						 style="grid-area: @position">
 					@if (piece != null)
-
 					{
 						<GamePiece Piece="piece" Perspective="Perspective" />
 					}
@@ -56,9 +49,8 @@
 
 	<!-- Side board -->
 	@if (Session != null && UseSideboard == true)
-
 	{
-		<aside class="side-board opponent PrimaryTheme ThemeVariant--Contrast" style="grid-area: opponent-side-board">
+		<aside class="side-board PrimaryTheme ThemeVariant--Contrast" style="grid-area: opponent-side-board">
 			@if (opponentHand.Any())
 			{
 				@foreach (var piece in opponentHand)
@@ -70,39 +62,47 @@
 			}
 		</aside>
 
-		<div class="player-info" style="grid-area: player-info">
+		<div class="player-info" style="grid-area: opponent-info">
 			<OpponentName Name="@opponentName"
-									IsTurn="!IsMyTurn"
-									InCheck="IsOpponentInCheck"
-									IsVictor="IsOpponentVictor" />
+										IsTurn="!IsMyTurn"
+										InCheck="IsOpponentInCheck"
+										IsVictor="IsOpponentVictor" />
+		</div>
+		<div class="player-info" style="grid-area: player-info">
 			<PlayerName Name="@userName"
 									IsTurn="IsMyTurn"
 									InCheck="IsPlayerInCheck"
 									IsVictor="IsPlayerVictor" />
 		</div>
 
-		<aside class="side-board PrimaryTheme ThemeVariant--Contrast" style="grid-area: player-side-board">
-			@if (Perspective == WhichPlayer.Player2 && string.IsNullOrEmpty(Session.Player2))
-			{
-				<AuthorizeView>
-					<div class="place-self-center">
-						<button @onclick="OnClickJoinGameInternal">Join Game</button>
-					</div>
-				</AuthorizeView>
-			}
-			else if (userHand.Any())
-			{
-				@foreach (var piece in userHand)
-
-				{
-					<div @onclick="OnClickHandInternal(piece)"
-								class="tile"
-								data-selected="@(piece.WhichPiece == SelectedPieceFromHand)">
-						<GamePiece Piece="piece" Perspective="Perspective" />
-					</div>
-				}
-			}
-		</aside>
+		<AuthorizeView>
+			<Authorized>
+				<aside class="side-board PrimaryTheme ThemeVariant--Contrast" style="grid-area: player-side-board">
+					@if (Perspective == WhichPlayer.Player2 && string.IsNullOrEmpty(Session.Player2))
+					{
+						<div class="place-self-center">
+							<button @onclick="OnClickJoinGameInternal">Join Game</button>
+						</div>
+					}
+					else if (userHand.Any())
+					{
+						@foreach (var piece in userHand)
+						{
+							<div @onclick="OnClickHandInternal(piece)"
+									 class="tile"
+									 data-selected="@(piece.WhichPiece == SelectedPieceFromHand)">
+								<GamePiece Piece="piece" Perspective="Perspective" />
+							</div>
+						}
+					}
+				</aside>
+			</Authorized>
+			<NotAuthorized>
+				<aside class="login-to-play PrimaryTheme ThemeVariant--Contrast" style="grid-area: player-side-board">
+					<p><a href="login">Log in</a> to play!</p>
+				</aside>
+			</NotAuthorized>
+		</AuthorizeView>
 	}
 </article>
 
diff --git a/Shogi.UI/Pages/Play/GameBoard/GameboardPresentation.razor.css b/Shogi.UI/Pages/Play/GameBoard/GameboardPresentation.razor.css
index 17fc627..d43ed4a 100644
--- a/Shogi.UI/Pages/Play/GameBoard/GameboardPresentation.razor.css
+++ b/Shogi.UI/Pages/Play/GameBoard/GameboardPresentation.razor.css
@@ -3,11 +3,12 @@
 	display: grid;
 	grid-template-areas:
 		"rank	board opponent-side-board"
+		"rank board opponent-info"
 		"rank board player-info"
 		"rank	board player-side-board"
 		".		file	.";
 	grid-template-columns: auto 1fr auto;
-	grid-template-rows: repeat(3, 1fr) auto;
+	grid-template-rows: 3fr 1fr 1fr 3fr auto;
 	background-color: #444;
 	gap: 5px;
 	place-self: center;
@@ -103,18 +104,29 @@
 	align-content: stretch;
 }
 
+.login-to-play {
+	background: linear-gradient(45deg, beige, white);
+	display: grid;
+	place-content: center;
+}
+
 @media all and (max-width: 900px) {
 	.game-board {
 		grid-template-areas:
-			".		opponent-side-board		."
-			"rank	board									player-info"
-			".		file									."
-			".		player-side-board			.";
-		grid-template-rows: auto 1fr auto auto;
-		gap: 1rem;
+			".		opponent-side-board"
+			".		opponent-info"
+			"rank	board"
+			".		file"
+			".		player-info"
+			".		player-side-board";
+		grid-template-rows: repeat(2, auto) 1fr repeat(3, auto);
+		gap: 0.25rem;
 	}
 
 	.side-board {
 		min-height: 2rem;
 	}
+	.player-info {
+		text-align: center;
+	}
 }
diff --git a/Shogi.UI/Pages/Play/GameBoard/OpponentName.razor b/Shogi.UI/Pages/Play/GameBoard/OpponentName.razor
index 9f80587..da3fc0c 100644
--- a/Shogi.UI/Pages/Play/GameBoard/OpponentName.razor
+++ b/Shogi.UI/Pages/Play/GameBoard/OpponentName.razor
@@ -21,11 +21,11 @@
 
 	@if (string.IsNullOrEmpty(Name))
 	{
-		<div>Empty Seat</div>
+		<p>Empty Seat</p>
 	}
 else
 	{
-		<div>@Name</div>
+		<p>@Name</p>
 	}
 
 </div>
diff --git a/Shogi.UI/Pages/Play/GameBoard/PlayerName.razor b/Shogi.UI/Pages/Play/GameBoard/PlayerName.razor
index c4abecb..05d961b 100644
--- a/Shogi.UI/Pages/Play/GameBoard/PlayerName.razor
+++ b/Shogi.UI/Pages/Play/GameBoard/PlayerName.razor
@@ -1,13 +1,13 @@
 @using Shogi.Contracts.Types
-<div style="margin: 0" class="PrimaryTheme">
+<div style="margin: 0" class="PrimaryTheme PlayerName">
 
 	@if (string.IsNullOrEmpty(Name))
 	{
-		<div>Empty Seat</div>
+		<p>Empty Seat</p>
 	}
 	else
 	{
-		<div>@Name</div>
+		<p>@Name</p>
 	}
 
 	@if (IsTurn)