Shogi/Shogi.UI/Pages/Home/GameBoard/GameBoardPresentation.razor

@using Shogi.Contracts.Types;
@inject PromotePrompt PromotePrompt;
@inject AccountState AccountState;

<article class="game-board">
    @if (IsSpectating)
    {
        <aside class="icons">
            <div class="spectating" title="You are spectating.">
                <svg width="32" height="32" fill="currentColor">
                    <use xlink:href="css/bootstrap/bootstrap-icons.svg#camera-reels" />
                </svg>
            </div>
        </aside>
    }
    <!-- 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="player-area">
                <div class="hand">
                    @if (opponentHand.Any())
                    {

                        @foreach (var piece in opponentHand)
                        {
                            <div class="tile">
                                <GamePiece Piece="piece" Perspective="Perspective" />
                            </div>
                        }
                    }
                    else
                    {
                        <i class="place-self-center">Hand is empty.</i>
                    }
                </div>
            </div>

            <div class="spacer place-self-center">
                <p>@opponentName</p>
                <p>@userName</p>
            </div>

            <div class="player-area">
                @if (Session.Player2 == null && Session.Player1 != AccountState.User?.Id)
                {
                    <div class="place-self-center">
                        <p>Seat is Empty</p>
                        <button @onclick="OnClickJoinGameInternal">Join Game</button>
                    </div>
                }
                else
                {
                    <div class="hand">
                        @if (userHand.Any())
                        {
                            @foreach (var piece in userHand)
                            {
                                <div class="title" @onclick="OnClickHandInternal(piece)">
                                    <GamePiece Piece="piece" Perspective="Perspective" />
                                </div>
                            }
                        }
                        else
                        {
                            <i class="place-self-center">Hand is empty.</i>
                        }
                    </div>
                }
            </div>

        </aside>
    }
</article>

@code {
    static readonly string[] Files = new[] { "A", "B", "C", "D", "E", "F", "G", "H", "I" };

    /// <summary>
    /// When true, an icon is displayed indicating that the user is spectating.
    /// </summary>
    [Parameter] public bool IsSpectating { get; set; } = false;
    [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 Func<Piece?, string, Task>? OnClickTile { get; set; }
    [Parameter] public Func<Piece, Task>? OnClickHand { get; set; }
    [Parameter] public Func<Task>? OnClickJoinGame { get; set; }

    private IReadOnlyCollection<Piece> opponentHand;
    private IReadOnlyCollection<Piece> userHand;
    private string? userName;
    private string? opponentName;

    public GameBoardPresentation()
    {
        opponentHand = Array.Empty<Piece>();
        userHand = Array.Empty<Piece>();
        userName = string.Empty;
        opponentName = string.Empty;
    }

    protected override void OnParametersSet()
    {
        Console.WriteLine("Params changed. SelectedPosition = {0}", SelectedPosition);
        base.OnParametersSet();
        if (Session == null)
        {
            opponentHand = Array.Empty<Piece>();
            userHand = Array.Empty<Piece>();
            userName = string.Empty;
            opponentName = string.Empty;
        }
        else
        {
            opponentHand = Perspective == WhichPlayer.Player1
                ? this.Session.BoardState.Player2Hand
                : this.Session.BoardState.Player1Hand;
            userHand = Perspective == WhichPlayer.Player1
                ? this.Session.BoardState.Player1Hand
                : this.Session.BoardState.Player2Hand;
            userName = Perspective == WhichPlayer.Player1
                ? this.Session.Player1
                : this.Session.Player2;
            opponentName = Perspective == WhichPlayer.Player1
                ? this.Session.Player2
                : this.Session.Player1;
        }
    }

    private Action OnClickTileInternal(Piece? piece, string position) => () => OnClickTile?.Invoke(piece, position);
    private Action OnClickHandInternal(Piece piece) => () => OnClickHand?.Invoke(piece);
    private void OnClickJoinGameInternal() => OnClickJoinGame?.Invoke();
}