Blazor: Main Game Menu with MudBlazor

#blazor #mudblazor #tutorial

Here is a little tip for Blazor development using the MudBlazor component library for creating the main game menu for creating new and loading existing games.

This is the screenshot of the UI main menu.

And here is the code behind it:

<MudGrid Class="d-flex flex-wrap flex-grow-1 pa-4 gap-4 align-content-start">
    <MudCard Elevation="8" Style="width: 300px">
        <MudCardHeader>
            <CardHeaderContent>
                <MudText Typo="Typo.h6">New Game</MudText>
            </CardHeaderContent>
        </MudCardHeader>
        <MudCardContent>
            <MudPaper Style="height: 100px" Class="d-flex pa-4 justify-center" Elevation="0">
                <MudIcon Icon="@Icons.Filled.Add" Size="Size.Large" ></MudIcon>
            </MudPaper>
        </MudCardContent>
        <MudCardActions>
            <MudButton Variant="Variant.Filled" Color="Color.Primary" FullWidth="true" OnClick="HandleValidSubmit">NEW GAME</MudButton>
        </MudCardActions>
    </MudCard>
    @if (GameService.Games != null)
    {
        @foreach (var game in GameService.Games)
        {
            <MudCard Elevation="8" Style="width: 300px">
                <MudCardHeader>
                    <CardHeaderContent>
                        <MudText Typo="Typo.h6">@game.PlayerName</MudText>
                    </CardHeaderContent>
                    <CardHeaderActions>
                        <MudIconButton 
                            Icon="@Icons.Outlined.DeleteForever" 
                            Style="width: 40px; height: 40px"
                            Color="Color.Default" 
                            OnClick="() => DeleteGameAsync(game)" />
                    </CardHeaderActions>
                </MudCardHeader>
                <MudCardContent>
                    <MudPaper Style="height: 100px;" Class="d-flex align-content-space-between flex-wrap flex-grow-1 justify-end" Elevation="0">
                        <MudText Typo="Typo.body2">Play existing game in the procedurally generated world.</MudText>
                        <MudText Typo="Typo.caption">@game.CreatedAt</MudText>
                    </MudPaper>
                </MudCardContent>
                <MudCardActions>
                    <MudButton Variant="Variant.Filled" Color="Color.Primary" FullWidth="true" OnClick="() => PlayGame(game)">LOAD GAME</MudButton>
                </MudCardActions>
            </MudCard>
        }
    }
</MudGrid>

I hope it helps.
If you want to learn more about Blazor, visit this page.
If you want to learn more about the MudBlazor component library, visit this page.
It would be fantastic if you wanted to ask something or leave feedback. Write a comment below, and have a nice day.

Latest comments (0)

An Animated Guide to Node.js Event Loop

Node.js doesn’t stop from running other operations because of Libuv, a C++ library responsible for the event loop and asynchronously handling tasks such as network requests, DNS resolution, file system operations, data encryption, etc.

What happens under the hood when Node.js works on tasks such as database queries? We will explore it by following this piece of code step by step.