TaikoLocalServer/TaikoWebUI/Pages/Profile.razor

@page "/Cards/{baid:int}/Profile"
@inject HttpClient Client

<MudBreadcrumbs Items="breadcrumbs" Class="px-0"></MudBreadcrumbs>

<h1>Profile</h1>
<MudText Typo="Typo.caption">Card: @Baid</MudText>

@if (response is not null)
{
    <MudGrid>
        <MudItem xs="12" md="8">
            <MudPaper Class="py-8 px-8 my-8" Outlined="true">
                <MudStack Spacing="4">
                    <h2>Profile Options</h2>

                    <MudTextField @bind-Value="@response.MyDonName" Label="Name"></MudTextField>

                    <MudGrid>
                        <MudItem xs="12" md="8">
                            <MudTextField @bind-Value="@response.Title" Label="Title"></MudTextField>
                        </MudItem>
                        <MudItem xs="12" md="4">
                            <MudSelect @bind-Value="@response.TitlePlateId" Label="Title Plate">
                                @for (uint i = 0; i < 8; i++)
                                {
                                    var index = i;
                                    <MudSelectItem Value="@i">@titlePlateStrings[index]</MudSelectItem>
                                }
                            </MudSelect>
                        </MudItem>
                    </MudGrid>

                    <MudSelect @bind-Value="@response.AchievementDisplayDifficulty"
                               Label="Achievement Panel Difficulty">
                        @foreach (var item in Enum.GetValues<Difficulty>())
                        {
                            <MudSelectItem Value="@item"/>
                        }
                    </MudSelect>

                    <MudSwitch @bind-Checked="@response.IsDisplayAchievement" Label="Display Achievement Panel" Color="Color.Primary"/>
                    <MudSwitch @bind-Checked="@response.IsDisplayDanOnNamePlate" Label="Display Dan Rank on Name Plate" Color="Color.Primary"/>
                </MudStack>
            </MudPaper>

            <MudPaper Class="py-8 px-8 my-8" Outlined="true">
                <MudStack Spacing="4">
                    <h2>Song Options</h2>
                    <MudGrid>
                        <MudItem xs="12" md="4">
                            <MudStack Spacing="4">
                                <MudSwitch @bind-Checked="@response.PlaySetting.IsVanishOn" Label="Vanish" Color="Color.Primary"/>
                                <MudSwitch @bind-Checked="@response.PlaySetting.IsInverseOn" Label="Inverse" Color="Color.Primary"/>
                                <MudSwitch @bind-Checked="@response.IsSkipOn" Label="Give Up" Color="Color.Primary"/>
                                <MudSwitch @bind-Checked="@response.IsVoiceOn" Label="Voice" Color="Color.Primary"/>
                            </MudStack>
                        </MudItem>
                        <MudItem xs="12" md="8">
                            <MudStack Spacing="4">
                                <MudSelect @bind-Value="@response.PlaySetting.Speed" Label="Speed">
                                    @for (uint i = 0; i < 15; i++)
                                    {
                                        var index = i;
                                        <MudSelectItem Value="@i">@speedStrings[index]</MudSelectItem>
                                    }
                                </MudSelect>

                                <MudSelect @bind-Value="@response.PlaySetting.RandomType"
                                           Label="Random">
                                    @foreach (var item in Enum.GetValues<RandomType>())
                                    {
                                        <MudSelectItem Value="@item"/>
                                    }
                                </MudSelect>

                                <MudSelect @bind-Value="@response.ToneId" Label="Tone">
                                    @for (uint i = 0; i < 19; i++)
                                    {
                                        var index = i;
                                        <MudSelectItem Value="@i">@toneStrings[index]</MudSelectItem>
                                    }
                                </MudSelect>

                                <MudSlider Class="mb-8" @bind-Value="@response.NotesPosition" Size="Size.Medium" Min="-5" Max="5" Step="1" TickMarks="true" TickMarkLabels="@notePositionStrings">
                                    <MudText Typo="Typo.caption">Notes Position</MudText>
                                </MudSlider>
                            </MudStack>
                        </MudItem>
                    </MudGrid>
                </MudStack>
            </MudPaper>

            <MudPaper Class="py-8 px-8 my-8" Outlined="true">
                <MudStack Spacing="4">
                    <MudText Typo="Typo.h2">Costume Options</MudText>
                    <MudGrid>
                        <MudItem xs="12" md="4">
                            <MudStack Spacing="4">
                                <MudTextField @bind-Value="@response.Kigurumi" Label="Kigurumi"/>
                                <MudTextField @bind-Value="@response.Head" Label="Head"/>
                                <MudTextField @bind-Value="@response.Face" Label="Face"/>
                                <MudTextField @bind-Value="@response.Body" Label="Body"/>
                                <MudTextField @bind-Value="@response.Puchi" Label="Puchi"/>
                            </MudStack>
                        </MudItem>
                        <MudItem xs="12" md="4">
                            <MudStack Spacing="4">
                                <MudTextField @bind-Value="@response.BodyColor" Label="BodyColor"/>
                                <MudTextField @bind-Value="@response.FaceColor" Label="FaceColor"/>
                                <MudTextField @bind-Value="@response.LimbColor" Label="LimbColor"/>
                            </MudStack>
                        </MudItem>
                    </MudGrid>
                </MudStack>

            </MudPaper>
        </MudItem>
        <MudItem md="4" xs="12" Class="py-8 px-8 my-4 pt-8">
            <MudStack Spacing="4" Style="top:100px" Class="sticky">
                <MudButton Disabled="@isSavingOptions"
                           OnClick="SaveOptions"
                           Variant="Variant.Filled"
                           Color="Color.Primary">
                    @if (isSavingOptions)
                    {
                        <MudProgressCircular Class="ms-n1" Size="Size.Small" Indeterminate="true"/>
                        <MudText Class="ms-2">Saving...</MudText>
                    }
                    else
                    {
                        <MudIcon Icon="@Icons.Filled.Save" Class="mx-2"></MudIcon>
                        <MudText>Save</MudText>
                    }
                </MudButton>
            </MudStack>
        </MudItem>
    </MudGrid>
}