Style boost

This commit is contained in:
2024-11-16 21:39:17 -06:00
parent 48ab8f7964
commit b5c6b8244d
5 changed files with 59 additions and 69 deletions

View File

@@ -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>