lucas/Shogi
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Style boost

Browse Source
This commit is contained in:
Lucas Morgan
2024-11-16 21:39:17 -06:00
parent 48ab8f7964
commit b5c6b8244d
5 changed files with 59 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files

70
Shogi.UI/Pages/Play/GameBoard/GameBoardPresentation.razor
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>

26
Shogi.UI/Pages/Play/GameBoard/GameboardPresentation.razor.css
View File

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

4
Shogi.UI/Pages/Play/GameBoard/OpponentName.razor
View File

@@ -21,11 +21,11 @@
@if (string.IsNullOrEmpty(Name))
{
<div>Empty Seat</div>
<p>Empty Seat</p>
}
else
{
<div>@Name</div>
<p>@Name</p>
}
</div>

6
Shogi.UI/Pages/Play/GameBoard/PlayerName.razor
View File

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