TaikoLocalServer/TaikoWebUI/Pages/Profile.razor

@page "/Cards/{baid:int}/Profile"
@using SharedProject.Enums
@using SharedProject.Models
@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>
        </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>

    <MudScrollToTop>
        <MudFab Color="Color.Secondary" Icon="@Icons.Filled.ArrowCircleUp"/>
    </MudScrollToTop>
}

@code {

    [Parameter]
    public int Baid { get; set; }

    private UserSetting? response;

    private bool isSavingOptions;

    private readonly string[] speedStrings =
    {
        "1.0", "1.1", "1.2", "1.3", "1.4",
        "1.5", "1.6", "1.7", "1.8", "1.9",
        "2.0", "2.5", "3.0", "3.5", "4.0"
    };

    private readonly string[] notePositionStrings = { "-5", "-4", "-3", "-2", "-1", "0", "+1", "+2", "+3", "+4", "+5" };

    private readonly string[] toneStrings =
    {
        "Taiko", "Festival", "Dogs & Cats", "Deluxe",
        "Drumset", "Tambourine", "Don Wada", "Clapping",
        "Conga", "8-Bit", "Heave-ho", "Mecha",
        "Bujain", "Rap", "Hosogai", "Akemi",
        "Synth Drum", "Shuriken", "Bubble Pop", "Electric Guitar"
    };

    private readonly string[] titlePlateStrings =
    {
        "Wood", "Rainbow", "Gold", "Purple",
        "AI 1", "AI 2", "AI 3", "AI 4"
    };

    private List<BreadcrumbItem> breadcrumbs = new()
    {
        new BreadcrumbItem("Cards", href: "/Cards"),
    };

    protected override async Task OnInitializedAsync()
    {
        await base.OnInitializedAsync();
        isSavingOptions = false;
        response = await Client.GetFromJsonAsync<UserSetting>($"api/UserSettings/{Baid}");

        breadcrumbs.Add(new BreadcrumbItem($"Card: {Baid}", href: null, disabled: true));
        breadcrumbs.Add(new BreadcrumbItem("Profile", href: $"/Cards/{Baid}/Profile", disabled: false));
    }

    private async Task SaveOptions()
    {
        isSavingOptions = true;
        await Client.PostAsJsonAsync($"api/UserSettings/{Baid}", response);
        isSavingOptions = false;
    }

}