AspNetCoreLearnOfficial/ConnectFour/Components/Board.razor

@using ConnectFour.Logics
@inject GameState State

<HeadContent>
    <style>
        :root {
            --board-bg: yellow; /** the color of the board **/
            --player1: red; /** Player 1's piece color **/
            --player2: blue; /** Player 2's piece color **/
        }
    </style>
</HeadContent>

<nav>
    @for (byte i = 0; i < 7; i++)
    {
        var col = i;
        <span title="Click to play a piece" @onclick="() => PlayPiece(col)">🔽</span>
    }
</nav>

<article>
    @winnerMessage <button style="@ResetStyle" @onclick="ResetGame">Reset the game</button>
    <br />
    <span class="alert-danger">@errorMessage</span>
    <span class="alert-info">@CurrentTurn</span>
</article>

<div>
    <div class="board">
        @for (var i = 0; i < 42; i++)
        {
            <span class="container">
                <span></span>
            </span>
        }
    </div>
    @for (var i = 0; i < 42; i++)
    {
        <span class="@pieces[i]"></span>
    }
</div>

@code {
    private string[] pieces = new string[42];
    private string winnerMessage = string.Empty;
    private string errorMessage = string.Empty;

    private string CurrentTurn => (winnerMessage == string.Empty) ? $"Player {State.PlayerTurn}'s Turn" : "";
    private string ResetStyle => (winnerMessage == string.Empty) ? "display: none;" : "";

    protected override void OnInitialized()
    {
        State.ResetBoard();
    }

    private void PlayPiece(byte col)
    {
        errorMessage = string.Empty;
        try
        {
            var player = State.PlayerTurn;
            var turn = State.CurrentTurn;
            var landingRow = State.PlayPiece(col);
            pieces[turn] = $"player{player} col{col} drop{landingRow}";
        }
        catch (ArgumentException ex)
        {
            errorMessage = ex.Message;
        }

        winnerMessage = State.CheckForWin() switch
        {
            GameState.WinState.Player1_Wins => "Player 1 Wins!",
            GameState.WinState.Player2_Wins => "Player 2 Wins!",
            GameState.WinState.Tie => "It's a tie!",
            _ => ""
        };
    }

    private void ResetGame()
    {
        State.ResetBoard();
        winnerMessage = string.Empty;
        errorMessage = string.Empty;
        pieces = new string[42];
    }
}