DEV Community

Cover image for Blazor: Main Game Menu with MudBlazor
PeterMilovcik
PeterMilovcik

Posted on

2

Blazor: Main Game Menu with MudBlazor

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.

Screenshot of Main Game 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>


Enter fullscreen mode Exit fullscreen mode

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.

Top comments (0)

Image of Bright Data

Maintain Seamless Data Collection – No more rotating IPs or server bans.

Avoid detection with our dynamic IP solutions. Perfect for continuous data scraping without interruptions.

Avoid Detection

👋 Kindness is contagious

Engage with a sea of insights in this enlightening article, highly esteemed within the encouraging DEV Community. Programmers of every skill level are invited to participate and enrich our shared knowledge.

A simple "thank you" can uplift someone's spirits. Express your appreciation in the comments section!

On DEV, sharing knowledge smooths our journey and strengthens our community bonds. Found this useful? A brief thank you to the author can mean a lot.

Okay