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 20:02:56 -06:00
parent 0a62eb7582
commit 48ab8f7964
24 changed files with 278 additions and 203 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -3,102 +3,105 @@
<article class="game-board">
<!-- Game board -->
<section class="board" data-perspective="@Perspective">
<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" />
}
</div>
}
}
<div class="ruler vertical" style="grid-area: rank">
<span>9</span>
<span>8</span>
<span>7</span>
<span>6</span>
<span>5</span>
<span>4</span>
<span>3</span>
<span>2</span>
<span>1</span>
</div>
<div class="ruler" style="grid-area: file">
<span>A</span>
<span>B</span>
<span>C</span>
<span>D</span>
<span>E</span>
<span>F</span>
<span>G</span>
<span>H</span>
<span>I</span>
</div>
</section>
<div class="ruler vertical" style="grid-area: rank">
<span>9</span>
<span>8</span>
<span>7</span>
<span>6</span>
<span>5</span>
<span>4</span>
<span>3</span>
<span>2</span>
<span>1</span>
</div>
<div class="ruler" style="grid-area: file">
<span>A</span>
<span>B</span>
<span>C</span>
<span>D</span>
<span>E</span>
<span>F</span>
<span>G</span>
<span>H</span>
<span>I</span>
</div>
<!-- Side board -->
@if (Session != null && UseSideboard == true)
{
<aside class="side-board PrimaryTheme ThemeVariant--Contrast">
<div class="player-area">
<div class="hand">
@if (opponentHand.Any())
{
@foreach (var piece in opponentHand)
{
<div class="tile">
<GamePiece Piece="piece" Perspective="Perspective" />
</div>
}
}
</div>
<p class="text-center">Opponent's Hand</p>
</div>
<div class="place-self-center">
<PlayerName Name="@opponentName" IsTurn="!IsMyTurn" InCheck="IsOpponentInCheck" IsVictor="IsOpponentVictor" />
<hr />
<PlayerName Name="@userName" IsTurn="IsMyTurn" InCheck="IsPlayerInCheck" IsVictor="IsPlayerVictor" />
</div>
<div class="player-area">
@if (Perspective == WhichPlayer.Player2 && string.IsNullOrEmpty(Session.Player2))
<aside class="side-board opponent PrimaryTheme ThemeVariant--Contrast" style="grid-area: opponent-side-board">
@if (opponentHand.Any())
{
@foreach (var piece in opponentHand)
{
<AuthorizeView>
<div class="place-self-center">
<button @onclick="OnClickJoinGameInternal">Join Game</button>
</div>
</AuthorizeView>
}
else
{
<p class="text-center">Your Hand</p>
<div class="hand">
@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>
}
}
<div class="tile">
<GamePiece Piece="piece" Perspective="Perspective" />
</div>
}
</div>
}
</aside>
<div class="player-info" style="grid-area: player-info">
<OpponentName Name="@opponentName"
IsTurn="!IsMyTurn"
InCheck="IsOpponentInCheck"
IsVictor="IsOpponentVictor" />
<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>
}
</article>
@@ -119,12 +122,10 @@
[Parameter] public EventCallback<Piece> OnClickHand { get; set; }
[Parameter] public EventCallback OnClickJoinGame { get; set; }
[Parameter] public bool UseSideboard { get; set; } = true;
private IReadOnlyCollection<Piece> opponentHand;
private IReadOnlyCollection<Piece> userHand;
private string? userName;
private string? opponentName;
public GameBoardPresentation()
{
opponentHand = Array.Empty<Piece>();
@@ -136,6 +137,7 @@
protected override void OnParametersSet()
{
base.OnParametersSet();
if (Session == null)
{
opponentHand = Array.Empty<Piece>();
@@ -161,16 +163,10 @@
}
private bool IsMyTurn => Session?.BoardState.WhoseTurn == Perspective;
private bool IsPlayerInCheck => Session?.BoardState.PlayerInCheck == Perspective;
private bool IsOpponentInCheck => Session?.BoardState.PlayerInCheck != null && Session.BoardState.PlayerInCheck != Perspective;
private bool IsPlayerVictor => Session?.BoardState.Victor == Perspective;
private bool IsOpponentVictor => Session?.BoardState.Victor != null && Session.BoardState.Victor != Perspective;
private Func<Task> OnClickTileInternal(string position) => () =>
{
if (IsMyTurn)
@@ -179,7 +175,6 @@
}
return Task.CompletedTask;
};
private Func<Task> OnClickHandInternal(Piece piece) => () =>
{
if (IsMyTurn)