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

22
Shogi.UI/Layout/NavMenu.razor
View File

@@ -29,33 +29,11 @@
@code { @code {
async Task CreateSession() async Task CreateSession()
{ {
var sessionId = await Api.PostSession(); var sessionId = await Api.PostSession();
if (!string.IsNullOrEmpty(sessionId)) if (!string.IsNullOrEmpty(sessionId))
{ {
navigator.NavigateTo($"play/{sessionId}"); navigator.NavigateTo($"play/{sessionId}");
} }
} }
} }

70
Shogi.UI/Pages/Play/GameBoard/GameBoardPresentation.razor
View File

@@ -5,24 +5,17 @@
<!-- Game board --> <!-- Game board -->
<section class="board" data-perspective="@Perspective" style="grid-area: board"> <section class="board" data-perspective="@Perspective" style="grid-area: board">
@for (var rank = 1; rank < 10; rank++) @for (var rank = 1; rank < 10; rank++)
{ {
foreach (var file in Files) foreach (var file in Files)
{ {
var position = $"{file}{rank}"; var position = $"{file}{rank}";
var piece = Session?.BoardState.Board[position]; var piece = Session?.BoardState.Board[position];
var isSelected = piece != null && SelectedPosition == position; var isSelected = piece != null && SelectedPosition == position;
<div class="tile" @onclick="OnClickTileInternal(position)" <div class="tile" @onclick="OnClickTileInternal(position)"
data-position="@(position)" data-position="@(position)"
data-selected="@(isSelected)" data-selected="@(isSelected)"
style="grid-area: @position"> style="grid-area: @position">
@if (piece != null) @if (piece != null)
{ {
<GamePiece Piece="piece" Perspective="Perspective" /> <GamePiece Piece="piece" Perspective="Perspective" />
} }
@@ -56,9 +49,8 @@
<!-- Side board --> <!-- Side board -->
@if (Session != null && UseSideboard == true) @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()) @if (opponentHand.Any())
{ {
@foreach (var piece in opponentHand) @foreach (var piece in opponentHand)
@@ -70,39 +62,47 @@
} }
</aside> </aside>
<div class="player-info" style="grid-area: player-info"> <div class="player-info" style="grid-area: opponent-info">
<OpponentName Name="@opponentName" <OpponentName Name="@opponentName"
IsTurn="!IsMyTurn" IsTurn="!IsMyTurn"
InCheck="IsOpponentInCheck" InCheck="IsOpponentInCheck"
IsVictor="IsOpponentVictor" /> IsVictor="IsOpponentVictor" />
</div>
<div class="player-info" style="grid-area: player-info">
<PlayerName Name="@userName" <PlayerName Name="@userName"
IsTurn="IsMyTurn" IsTurn="IsMyTurn"
InCheck="IsPlayerInCheck" InCheck="IsPlayerInCheck"
IsVictor="IsPlayerVictor" /> IsVictor="IsPlayerVictor" />
</div> </div>
<aside class="side-board PrimaryTheme ThemeVariant--Contrast" style="grid-area: player-side-board"> <AuthorizeView>
@if (Perspective == WhichPlayer.Player2 && string.IsNullOrEmpty(Session.Player2)) <Authorized>
{ <aside class="side-board PrimaryTheme ThemeVariant--Contrast" style="grid-area: player-side-board">
<AuthorizeView> @if (Perspective == WhichPlayer.Player2 && string.IsNullOrEmpty(Session.Player2))
<div class="place-self-center"> {
<button @onclick="OnClickJoinGameInternal">Join Game</button> <div class="place-self-center">
</div> <button @onclick="OnClickJoinGameInternal">Join Game</button>
</AuthorizeView> </div>
} }
else if (userHand.Any()) else if (userHand.Any())
{ {
@foreach (var piece in userHand) @foreach (var piece in userHand)
{
{ <div @onclick="OnClickHandInternal(piece)"
<div @onclick="OnClickHandInternal(piece)" class="tile"
class="tile" data-selected="@(piece.WhichPiece == SelectedPieceFromHand)">
data-selected="@(piece.WhichPiece == SelectedPieceFromHand)"> <GamePiece Piece="piece" Perspective="Perspective" />
<GamePiece Piece="piece" Perspective="Perspective" /> </div>
</div> }
} }
} </aside>
</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> </article>

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

@@ -3,11 +3,12 @@
display: grid; display: grid;
grid-template-areas: grid-template-areas:
"rank board opponent-side-board" "rank board opponent-side-board"
"rank board opponent-info"
"rank board player-info" "rank board player-info"
"rank board player-side-board" "rank board player-side-board"
". file ."; ". file .";
grid-template-columns: auto 1fr auto; grid-template-columns: auto 1fr auto;
grid-template-rows: repeat(3, 1fr) auto; grid-template-rows: 3fr 1fr 1fr 3fr auto;
background-color: #444; background-color: #444;
gap: 5px; gap: 5px;
place-self: center; place-self: center;
@@ -103,18 +104,29 @@
align-content: stretch; align-content: stretch;
} }
.login-to-play {
background: linear-gradient(45deg, beige, white);
display: grid;
place-content: center;
}
@media all and (max-width: 900px) { @media all and (max-width: 900px) {
.game-board { .game-board {
grid-template-areas: grid-template-areas:
". opponent-side-board ." ". opponent-side-board"
"rank board player-info" ". opponent-info"
". file ." "rank board"
". player-side-board ."; ". file"
grid-template-rows: auto 1fr auto auto; ". player-info"
gap: 1rem; ". player-side-board";
grid-template-rows: repeat(2, auto) 1fr repeat(3, auto);
gap: 0.25rem;
} }
.side-board { .side-board {
min-height: 2rem; 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)) @if (string.IsNullOrEmpty(Name))
{ {
<div>Empty Seat</div> <p>Empty Seat</p>
} }
else else
{ {
<div>@Name</div> <p>@Name</p>
} }
</div> </div>

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

@@ -1,13 +1,13 @@
@using Shogi.Contracts.Types @using Shogi.Contracts.Types
<div style="margin: 0" class="PrimaryTheme"> <div style="margin: 0" class="PrimaryTheme PlayerName">
@if (string.IsNullOrEmpty(Name)) @if (string.IsNullOrEmpty(Name))
{ {
<div>Empty Seat</div> <p>Empty Seat</p>
} }
else else
{ {
<div>@Name</div> <p>@Name</p>
} }
@if (IsTurn) @if (IsTurn)