117 lines
3.9 KiB
Plaintext
117 lines
3.9 KiB
Plaintext
@using Shogi.Contracts.Types;
|
|
@inject PromotePrompt PromotePrompt;
|
|
|
|
<article class="game-board">
|
|
<!-- Game board -->
|
|
<section class="board" data-perspective="@Perspective">
|
|
@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(piece, position)"
|
|
data-position="@(position)"
|
|
data-selected="@(isSelected)"
|
|
style="grid-area: @position">
|
|
<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>
|
|
<!-- Promote prompt -->
|
|
<div class="promote-prompt" data-visible="@PromotePrompt.IsVisible">
|
|
<p>Do you wish to promote?</p>
|
|
<div>
|
|
<button type="button">Yes</button>
|
|
<button type="button">No</button>
|
|
<button type="button">Cancel</button>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<!-- Side board -->
|
|
@if (Session != null)
|
|
{
|
|
<aside class="side-board">
|
|
<div class="hand">
|
|
@foreach (var piece in OpponentHand)
|
|
{
|
|
<div class="tile">
|
|
<GamePiece Piece="piece" Perspective="Perspective" />
|
|
</div>
|
|
}
|
|
</div>
|
|
|
|
<div class="spacer" />
|
|
|
|
<div class="hand">
|
|
@foreach (var piece in UserHand)
|
|
{
|
|
<div class="title" @onclick="OnClickHandInternal(piece)">
|
|
<GamePiece Piece="piece" Perspective="Perspective" />
|
|
</div>
|
|
}
|
|
</div>
|
|
</aside>
|
|
}
|
|
</article>
|
|
|
|
@code {
|
|
[Parameter] public WhichPlayer Perspective { get; set; }
|
|
[Parameter] public Session? Session { get; set; }
|
|
[Parameter] public string? SelectedPosition { get; set; }
|
|
// TODO: Exchange these OnClick actions for events like "SelectionChangedEvent" and "MoveFromBoardEvent" and "MoveFromHandEvent".
|
|
[Parameter] public Action<Piece?, string>? OnClickTile { get; set; }
|
|
[Parameter] public Action<Piece>? OnClickHand { get; set; }
|
|
|
|
static readonly string[] Files = new[] { "A", "B", "C", "D", "E", "F", "G", "H", "I" };
|
|
|
|
private IReadOnlyCollection<Piece> OpponentHand
|
|
{
|
|
get
|
|
{
|
|
if (this.Session == null) return Array.Empty<Piece>();
|
|
|
|
return Perspective == WhichPlayer.Player1
|
|
? this.Session.BoardState.Player1Hand
|
|
: this.Session.BoardState.Player2Hand;
|
|
}
|
|
}
|
|
IReadOnlyCollection<Piece> UserHand
|
|
{
|
|
get
|
|
{
|
|
if (this.Session == null) return Array.Empty<Piece>();
|
|
|
|
return Perspective == WhichPlayer.Player1
|
|
? this.Session.BoardState.Player1Hand
|
|
: this.Session.BoardState.Player2Hand;
|
|
}
|
|
}
|
|
|
|
private Action OnClickTileInternal(Piece? piece, string position) => () => OnClickTile?.Invoke(piece, position);
|
|
private Action OnClickHandInternal(Piece piece) => () => OnClickHand?.Invoke(piece);
|
|
}
|