Index.razor

@page "/"
@using System.Net.Http
@using Homestead.Client.ViewModels
@using Homestead.Shared;
@using Microsoft.AspNetCore.SignalR.Client
@inject HttpClient Http
@inject NavigationManager NavManager
@inject Blazored.LocalStorage.ILocalStorageService localStorage
@inject LobbyVm Lobby;
@inject HubConnection hubConnection

<PageTitle>Homestead game by IntelliTect</PageTitle>
<h1 class="pinewood">
    Homestead Games
</h1>
<div>
    <button class="btn btn-success" @onclick="CreateGame" type="button">Create a New Game</button>
    <button class="btn btn-primary" @onclick="GetGames" type="button">Refresh Games</button>
</div>
<hr />

<div class="container-fluid">
    @if (games is null || !games.Any())
    {
        <p>No games found.</p>
    }
    else
    {
        <div class="row">
            @{
                int counter = 0;
            }
            @foreach (var game in games)
            {
                counter++;
                <div class="col-12 col-sm-12 col-md-6 col-lg-4 col-xl-3">
                    <div class="card">
                        <div class="card-header tree-background" style="padding-top: 15px;">
                            <button class="btn btn-success" style="float:right;" disabled="@(GetHumanPlayerCount(game) > 3)" type="button" @onclick="()=>JoinGame(game.GameId)">
                                @if (game.Players.Any(f => f.PlayerId == Lobby.PlayerId))
                                {
                                    <span>Rejoin</span>
                                }
                                else
                                {
                                    <span>Join </span>
                                }
                            </button>
                            <h2>Game #@counter</h2>
                        </div>
                        <div class="card-body green-background">
                            <div class="row">
                                <div class="col-12">
                                    <div style="float:right">
                                        @if (game.State == Game.GameState.Playing)
                                        {
                                            <span>In Progress</span>
                                        }
                                        else
                                        {
                                            <span>Looking for Players</span>
                                        }
                                    </div>
                                    <h3>Players</h3>
                                    <ul class="list-group">
                                        @foreach (var player in game.Players)
                                        {
                                            <li class="list-group-item">
                                                <img class="player" src="@PlayerVm.GetImageUrl(player)" />
                                                @player.Name
                                                @if (player.PlayerId == Lobby.PlayerId)
                                                {
                                                    <span> (You)</span>
                                                }

                                                <span style="padding-top:7px;float: right;">
                                                @if (player.IsBot)
                                                {
                                                    <span>🤖</span>
                                                }
                                                else
                                                {
                                                    <span>😃</span>
                                                }
                                                </span>
                                            </li>
                                        }
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <div class="card-footer">
                            Last Play: @(Math.Round((DateTime.UtcNow - game.LastPlayDate).TotalMinutes, 1)) minutes ago
                        </div>
                    </div>
                </div>
            }
        </div>
    }
</div>

@code {
    private Game[]? games;

    private int GetHumanPlayerCount(Game game) => game.Players.Where(x => !x.IsBot).Count();

    protected override async Task OnInitializedAsync()
    {
        Lobby.PlayerId = await localStorage.GetItemAsync<string>("PlayerId") ?? string.Empty;
        if (string.IsNullOrEmpty(Lobby.PlayerId))
        {
            Lobby.PlayerId = Guid.NewGuid().ToString();
            await localStorage.SetItemAsync("PlayerId", Lobby.PlayerId);
        }
        Console.WriteLine($"Player's Id: {Lobby.PlayerId}");
        await GetGames();
    }

    private async Task GetGames()
    {
        games = await Http.GetFromJsonAsync<Game[]>("Lobby");
    }

    private async Task CreateGame()
    {
        await Lobby.CreateGame(Http);
        await hubConnection.InvokeAsync("SubscribeToGame", Lobby.Board.GameId);
        NavManager.NavigateTo("/gameboardpage");
    }

    private void DisplayInstructions()
    {
        NavManager.NavigateTo("/instructions");
    }

    private async Task JoinGame(string gameId)
    {
        var result = await Lobby.JoinGame(gameId, Http);
        await hubConnection.InvokeAsync("SubscribeToGame", Lobby.Board.GameId);
        if (result) NavManager.NavigateTo("/gameboardpage");

    }
}