TaikoLocalServer/TaikoWebUI/Pages/Profile.razor

@page "/Users/{baid:int}/Profile"
@inject HttpClient Client
@inject IGameDataService GameDataService
@inject IDialogService DialogService
@inject AuthService AuthService
@inject IJSRuntime JsRuntime
@inject NavigationManager NavigationManager
@inject BreadcrumbsStateContainer BreadcrumbsStateContainer

@if (response is not null)
{
    @if (AuthService.LoginRequired && (!AuthService.IsLoggedIn || (AuthService.GetLoggedInBaid() != Baid && !AuthService.IsAdmin)))
    {
        if (!AuthService.IsLoggedIn)
        {
            NavigationManager.NavigateTo("/Login");
        }
        else
        {
            NavigationManager.NavigateTo("/");
        }
    }
    else
    {
        <MudGrid Class="my-4 pb-10">
            <MudItem xs="12" md="8">
                <MudPaper Elevation="0" Outlined="true">
                    <MudTabs Rounded="true" Border="true" PanelClass="pa-8">
                        <MudTabPanel Text="@Localizer["Profile"]">
                            <MudStack Spacing="4">
                                <MudText Typo="Typo.h6">@Localizer["Profile Options"]</MudText>
                                <MudGrid>
                                    <MudItem xs="12" md="8">
                                        <MudTextField TextChanged="UpdateMyDonName" Required="true" @bind-Value="@response.MyDonName" Label=@Localizer["Name"]></MudTextField>
                                    </MudItem>
                                    <MudItem xs="12" md="4">
                                        <MudSelect @bind-Value="@response.MyDonNameLanguage" Label=@Localizer["Language"] AnchorOrigin="Origin.BottomCenter">
                                            @for (uint i = 0; i < LanguageStrings.Length; i++)
                                            {
                                                var index = i;
                                                <MudSelectItem Value="@i">@Localizer[LanguageStrings[index]]</MudSelectItem>
                                            }
                                        </MudSelect>
                                    </MudItem>
                                </MudGrid>

                                <MudGrid>
                                    <MudItem xs="12" md="8">
                                        @if (AuthService.AllowFreeProfileEditing)
                                        {
                                            <MudTextField TextChanged="UpdateTitle" @bind-Value="@response.Title" Label=@Localizer["Title"] />
                                        }
                                        else
                                        {
                                            <MudTextField ReadOnly="true" @bind-Value="@response.Title" Label=@Localizer["Title"] />
                                        }
                                        <MudButton Color="Color.Primary" Class="mt-1" Size="Size.Small" OnClick="@(_ => OpenChooseTitleDialog())">
                                            @Localizer["Select a Title"]
                                        </MudButton>
                                    </MudItem>
                                    @if (AuthService.AllowFreeProfileEditing)
                                    {
                                        <MudItem xs="12" md="4">
                                            <MudSelect @bind-Value="@response.TitlePlateId" Label=@Localizer["Title Plate"] AnchorOrigin="Origin.BottomCenter">
                                                @foreach (var index in titlePlateIdList)
                                                {
                                                    <MudSelectItem Value="@index">@TitlePlateStrings[index]</MudSelectItem>
                                                }
                                            </MudSelect>
                                        </MudItem>
                                    }
                                </MudGrid>

                                <MudSelect T="Difficulty" ValueChanged=@UpdateScoreboard Value=@response.AchievementDisplayDifficulty Label=@Localizer["Achievement Panel Difficulty"] AnchorOrigin="Origin.BottomCenter">
                                    @foreach (var item in Enum.GetValues<Difficulty>())
                                    {
                                        <MudSelectItem Value="@item">@Localizer[item.ToString()]</MudSelectItem>
                                    }
                                </MudSelect>

                                <MudGrid>
                                    <MudItem xs="12" md="4">
                                        <MudStack Spacing="4">
                                            <MudSwitch @bind-Value="@response.IsDisplayAchievement" Label=@Localizer["Display Achievement Panel"] Color="Color.Primary" />
                                            <MudSwitch @bind-Value="@response.IsDisplayDanOnNamePlate" Label=@Localizer["Display Dan Rank on Name Plate"] Color="Color.Primary" />
                                        </MudStack>
                                    </MudItem>
                                    <MudItem xs="12" md="8">
                                        <MudStack Spacing="4">
                                            <MudSelect @bind-Value="@response.DifficultySettingCourse" Label=@Localizer["Difficulty Setting Course"] AnchorOrigin="Origin.BottomCenter">
                                                @for (uint i = 0; i < DifficultySettingCourseStrings.Length; i++)
                                                {
                                                    var index = i;
                                                    <MudSelectItem Value="@i">@Localizer[DifficultySettingCourseStrings[index]]</MudSelectItem>
                                                }
                                            </MudSelect>

                                            <MudSelect @bind-Value="@response.DifficultySettingStar" Label=@Localizer["Difficulty Setting Star"] AnchorOrigin="Origin.BottomCenter">
                                                @for (uint i = 0; i < DifficultySettingStarStrings.Length; i++)
                                                {
                                                    var index = i;
                                                    <MudSelectItem Value="@i">@Localizer[DifficultySettingStarStrings[index]]</MudSelectItem>
                                                }
                                            </MudSelect>

                                            <MudSelect @bind-Value="@response.DifficultySettingSort" Label=@Localizer["Difficulty Setting Sort"] AnchorOrigin="Origin.BottomCenter">
                                                @for (uint i = 0; i < DifficultySettingSortStrings.Length; i++)
                                                {
                                                    var index = i;
                                                    <MudSelectItem Value="@i">@Localizer[DifficultySettingSortStrings[index]]</MudSelectItem>
                                                }
                                            </MudSelect>
                                        </MudStack>
                                    </MudItem>
                                </MudGrid>
                            </MudStack>
                        </MudTabPanel>

                        <MudTabPanel Text="@Localizer["Costume"]">
                            <MudStack Spacing="4">
                                <MudText Typo="Typo.h6">@Localizer["Costume Options"]</MudText>
                                <MudGrid>
                                    <MudItem xs="12">
                                        <MudStack Spacing="4" Class="mb-8">
                                            <MudSelect @bind-Value="@response.Head" Label=@Localizer["Head"] AnchorOrigin="Origin.BottomCenter">
                                                @foreach (var index in headUniqueIdList)
                                                {
                                                    var costumeTitle = GameDataService.GetHeadTitle(costumeList, index);
                                                    <MudSelectItem Value="@index">@index - @costumeTitle</MudSelectItem>
                                                }
                                            </MudSelect>
                                            <MudSelect @bind-Value="@response.Body" Label=@Localizer["Body"] AnchorOrigin="Origin.BottomCenter">
                                                @foreach (var index in bodyUniqueIdList)
                                                {
                                                    var costumeTitle = GameDataService.GetBodyTitle(costumeList, index);
                                                    <MudSelectItem Value="@index">@index - @costumeTitle</MudSelectItem>
                                                }
                                            </MudSelect>
                                            <MudSelect @bind-Value="@response.Face" Label=@Localizer["Face"] AnchorOrigin="Origin.BottomCenter">
                                                @foreach (var index in faceUniqueIdList)
                                                {
                                                    var costumeTitle = GameDataService.GetFaceTitle(costumeList, index);
                                                    <MudSelectItem Value="@index">@index - @costumeTitle</MudSelectItem>
                                                }
                                            </MudSelect>
                                            <MudSelect @bind-Value="@response.Kigurumi" Label=@Localizer["Kigurumi"] AnchorOrigin="Origin.BottomCenter">
                                                @foreach (var index in kigurumiUniqueIdList)
                                                {
                                                    var costumeTitle = GameDataService.GetKigurumiTitle(costumeList, index);
                                                    <MudSelectItem Value="@index">@index - @costumeTitle</MudSelectItem>
                                                }
                                            </MudSelect>
                                            <MudSelect @bind-Value="@response.Puchi" Label=@Localizer["Puchi"] AnchorOrigin="Origin.BottomCenter">
                                                @foreach (var index in puchiUniqueIdList)
                                                {
                                                    var costumeTitle = GameDataService.GetPuchiTitle(costumeList, index);
                                                    <MudSelectItem Value="@index">@index - @costumeTitle</MudSelectItem>
                                                }
                                            </MudSelect>
                                        </MudStack>

                                        <MudStack Row="true">
                                            <MudSelect @bind-Value="@response.BodyColor" Label=@Localizer["Body Color"] AnchorOrigin="Origin.BottomCenter">
                                                @for (uint i = 0; i < Constants.COSTUME_COLOR_MAX; i++)
                                                {
                                                    var index = i;
                                                    <MudSelectItem Value="@index">
                                                        <div class="color-box" style=@($"background: {CostumeColors[index]}")></div>
                                                        @index
                                                    </MudSelectItem>
                                                }
                                            </MudSelect>
                                            <MudSelect @bind-Value="@response.FaceColor" Label=@Localizer["Face Color"] AnchorOrigin="Origin.BottomCenter">
                                                @for (uint i = 0; i < Constants.COSTUME_COLOR_MAX; i++)
                                                {
                                                    var index = i;
                                                    <MudSelectItem Value="@index">
                                                        <div class="color-box" style=@($"background: {CostumeColors[index]}")></div>
                                                        @index
                                                    </MudSelectItem>
                                                }
                                            </MudSelect>
                                            <MudSelect @bind-Value="@response.LimbColor" Label=@Localizer["Limb Color"] AnchorOrigin="Origin.BottomCenter">
                                                @for (uint i = 0; i < Constants.COSTUME_COLOR_MAX; i++)
                                                {
                                                    var index = i;
                                                    <MudSelectItem Value="@index">
                                                        <div class="color-box" style=@($"background: {CostumeColors[index]}")></div>
                                                        @index
                                                    </MudSelectItem>
                                                }
                                            </MudSelect>
                                        </MudStack>
                                    </MudItem>
                                </MudGrid>
                            </MudStack>
                        </MudTabPanel>

                        <MudTabPanel Text="@Localizer["Song Options"]">
                            <MudStack Spacing="4">
                                <MudText Typo="Typo.h6">@Localizer["Song Options"]</MudText>
                                <MudGrid>
                                    <MudItem xs="12" md="4">
                                        <MudStack Spacing="4">
                                            <MudSwitch @bind-Value="@response.PlaySetting.IsVanishOn" Label=@Localizer["Vanish"] Color="Color.Primary" />
                                            <MudSwitch @bind-Value="@response.PlaySetting.IsInverseOn" Label=@Localizer["Inverse"] Color="Color.Primary" />
                                            <MudSwitch @bind-Value="@response.IsSkipOn" Label=@Localizer["Skip Song"] Color="Color.Primary" />
                                            <MudSwitch @bind-Value="@response.IsVoiceOn" Label=@Localizer["Voice"] Color="Color.Primary" />
                                        </MudStack>
                                    </MudItem>
                                    <MudItem xs="12" md="8">
                                        <MudStack Spacing="4">
                                            <MudSelect @bind-Value="@response.PlaySetting.Speed" Label=@Localizer["Speed"] AnchorOrigin="Origin.BottomCenter">
                                                @for (uint i = 0; i < SpeedStrings.Length; i++)
                                                {
                                                    var index = i;
                                                    <MudSelectItem Value="@i">@SpeedStrings[index]</MudSelectItem>
                                                }
                                            </MudSelect>

                                            <MudSelect @bind-Value="@response.PlaySetting.RandomType" Label=@Localizer["Random"] AnchorOrigin="Origin.BottomCenter">
                                                @foreach (var item in Enum.GetValues<RandomType>())
                                                {
                                                    <MudSelectItem Value="@item">@Localizer[item.ToString()]</MudSelectItem>
                                                }
                                            </MudSelect>

                                            <MudSelect @bind-Value="@response.ToneId" Label=@Localizer["Tone"] AnchorOrigin="Origin.BottomCenter">
                                                @for (uint i = 0; i < ToneStrings.Length; i++)
                                                {
                                                    var index = i;
                                                    <MudSelectItem Value="@i">@Localizer[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">@Localizer["Notes Position"]</MudText>
                                            </MudSlider>
                                        </MudStack>
                                    </MudItem>
                                </MudGrid>
                            </MudStack>
                        </MudTabPanel>
                    </MudTabs>
                </MudPaper>
            </MudItem>

            <MudItem md="4" xs="12" Class="py-3 px-3">
                <MudStack Spacing="4" Class="sticky" Style="top:100px">
                    <MudPaper Elevation="0" Outlined="true">
                        <MudTabs Rounded="true" Border="true" PanelClass="pa-8">
                            <MudTabPanel Text=@Localizer["Player"]>
                                <MudItem style="height: auto">
                                    @* Player Visualizer *@
                                    <MudItem style="text-align: center;">
                                        <MudItem style="position:relative">
                                            @if (response.Kigurumi == 0)
                                            {
                                                <MudImage Fluid="true" style=@($"position: relative; top: 0; left: 0; filter: {CostumeColorFilters[response.BodyColor]}") Src=@CostumeOrDefault("masks/body-bodymask", response.Body, "masks/body-bodymask-0000") />
                                                <MudImage Fluid="true" style=@($"position:absolute; top: 0; left: 0; right: 0; margin: 0 auto; filter: {CostumeColorFilters[response.FaceColor]}") Src=@CostumeOrDefault("masks/body-facemask", response.Body, "masks/body-facemask-0000") />
                                                <MudImage Fluid="true" style="position:absolute; top: 0; left: 0; right: 0; margin: 0 auto;" onerror="this.src='images/Costumes/body/body-0000.png'" Src=@($"images/Costumes/body/body-{response.Body.ToString().PadLeft(4, '0')}.png") />
                                                <MudImage Fluid="true" style="position:absolute; top: 0; left: 0; right: 0; margin: 0 auto;" onerror="this.src='images/Costumes/face/face-0000.png'" Src=@($"images/Costumes/face/face-{response.Face.ToString().PadLeft(4, '0')}.png") />
                                                <MudImage Fluid="true" style=@($"position:absolute; top: 0; left: 0; right: 0; margin: 0 auto; filter: {CostumeColorFilters[response.BodyColor]}") Src=@CostumeOrDefault("masks/head-bodymask", response.Head, "head/head-0000") />
                                                <MudImage Fluid="true" style=@($"position:absolute; top: 0; left: 0; right: 0; margin: 0 auto; filter: {CostumeColorFilters[response.FaceColor]}") Src=@CostumeOrDefault("masks/head-facemask", response.Head, "head/head-0000") />
                                                <MudImage Fluid="true" style="position:absolute; top: 0; left: 0; right: 0; margin: 0 auto;" onerror="this.src='images/Costumes/head/head-0000.png'" Src=@($"images/Costumes/head/head-{response.Head.ToString().PadLeft(4, '0')}.png") />
                                            }
                                            else
                                            {
                                                <MudImage Fluid="true" style=@($"position: relative; top: 0; left: 0; filter: {CostumeColorFilters[response.BodyColor]}") Src=@CostumeOrDefault("masks/kigurumi-bodymask", response.Kigurumi, "masks/body-bodymask-0000") />
                                                <MudImage Fluid="true" style=@($"position:absolute; top: 0; left: 0; right: 0; margin: 0 auto; filter: {CostumeColorFilters[response.FaceColor]}") Src=@CostumeOrDefault("masks/kigurumi-facemask", response.Kigurumi, "masks/body-facemask-0000") />
                                                <MudImage Fluid="true" style="position:absolute; top: 0; left: 0; right: 0; margin: 0 auto;" onerror="this.src='images/Costumes/kigurumi/kigurumi-0000.png'" Src=@($"images/Costumes/kigurumi/kigurumi-{response.Kigurumi.ToString().PadLeft(4, '0')}.png") />
                                            }
                                            <MudImage Fluid="true" style="position:absolute; top: 0; left: 0; right: 0; margin: 0 auto;" onerror="this.src='images/Costumes/puchi/puchi-9999.webp'" Src=@($"images/Costumes/puchi/puchi-{response.Puchi.ToString().PadLeft(4, '0')}.webp") />
                                        </MudItem>
                                    </MudItem>


                                    @* Player Nameplate *@
                                    <MudItem style="text-align: center; position:relative;">
                                        @* Title text *@
                                        <MudItem style="position:absolute; top: 5.5%; left:0; right:1.1%; height:38%; width:min(96%, 320px); margin: 0 auto; z-index:2; vertical-align: middle;">
                                            <MudItem Style=@($"position:absolute; height:100%; {(response.TitlePlateId <= 7 ? "width:80%; right: 10%;" : "width:68%; right: 26%;")}")>
                                                <MudText Id="nameplate-title" Style="position:absolute; height:100%; top: 0; left: 0; right: 0; margin: auto auto; font-family: 'Nijiiro', sans-serif; color:black">@response.Title</MudText>
                                            </MudItem>
                                        </MudItem>
                                        @* Name text *@
                                        <MudItem Style="position:absolute; top: 42.5%; left:0; right:1.1%; height:41%; width:min(96%, 320px); margin: 0 auto; z-index:2">
                                            @* Name textoffset to the right for Dan Rank *@
                                            <MudItem Style=@($"position:absolute; height:100%; right: 10%; {(response.IsDisplayDanOnNamePlate ? "width:46%;" : "width:80%;")}")>
                                                <MudText Id="nameplate-name-outline" Style="position:absolute; height:100%; top: 0; left: 0; right: 0; margin: auto auto; font-family: 'Nijiiro', sans-serif; -webkit-text-stroke-width: 5px; -webkit-text-stroke-color: black">@response.MyDonName</MudText>
                                                <MudText Id="nameplate-name" Style="position:absolute; height:100%; top: 0; left: 0; right: 0; margin: auto auto; font-family: 'Nijiiro', sans-serif; color:white">@response.MyDonName</MudText>
                                            </MudItem>
                                        </MudItem>
                                        <MudImage onload="nameplateLoaded()" Id="nameplate" Fluid="true" Style="position: relative; bottom: 0; left: 0;" Src="images/Nameplates/nameplate.png" />
                                        @* Check if image does not exist, use nameplate_Wood.png *@
                                        <MudImage Fluid="true" Style="position:absolute; bottom: 6px; left: 0; right: 0; margin: 0 auto;" onerror="this.src='images/Nameplates/nameplate_Wood.png'" Src=@($"images/Nameplates/nameplate_{TitlePlateStrings[response.TitlePlateId].Replace(' ', '_')}.png") />
                                        @if (response.IsDisplayDanOnNamePlate)
                                        {
                                            <MudImage Fluid="true" Style="position:absolute; top: 0; left: 0; right: 0; margin: 0 auto;" Src="images/Nameplates/nameplate_dan.png" />
                                        }
                                    </MudItem>
                                </MudItem>
                            </MudTabPanel>

                            @if (response.IsDisplayAchievement)
                            {
                                <MudTabPanel Text="@Localizer["Achievement Panel"]">
                                    <MudItem style="text-align: center; position:relative;">
                                        @* Achievement panel Text *@
                                        <MudItem Id="scoreboard" Style="position:absolute; top: 0; left:0; right:0; height:100%; width:min(96%, 320px); margin: 0 auto; z-index:2; vertical-align: middle;">
                                            @* First row *@
                                            <MudItem Style="position:absolute; height:18%; width:100%; top:11%">
                                                <MudItem Class="nameplateTextRight">
                                                    <MudText Class="nameplateText nameplateTextOutline">@scoresArray[0]</MudText>
                                                    <MudText Class="nameplateText">@scoresArray[0]</MudText>
                                                </MudItem>
                                            </MudItem>
                                            @* Second row *@
                                            <MudItem Style="position:absolute; height:18%; width:100%; top:30%">
                                                <MudItem Class="nameplateTextLeft">
                                                    <MudText Class="nameplateText nameplateTextOutline">@scoresArray[1]</MudText>
                                                    <MudText Class="nameplateText">@scoresArray[1]</MudText>
                                                </MudItem>
                                                <MudItem Class="nameplateTextCenter">
                                                    <MudText Class="nameplateText nameplateTextOutline">@scoresArray[2]</MudText>
                                                    <MudText Class="nameplateText">@scoresArray[2]</MudText>
                                                </MudItem>
                                                <MudItem Class="nameplateTextRight">
                                                    <MudText Class="nameplateText nameplateTextOutline">@scoresArray[3]</MudText>
                                                    <MudText Class="nameplateText">@scoresArray[3]</MudText>
                                                </MudItem>
                                            </MudItem>
                                            @* Third row *@
                                            <MudItem Style="position:absolute; height:18%; width:100%; top:49%">
                                                <MudItem Class="nameplateTextLeft">
                                                    <MudText Class="nameplateText nameplateTextOutline">@scoresArray[4]</MudText>
                                                    <MudText Class="nameplateText">@scoresArray[4]</MudText>
                                                </MudItem>
                                                <MudItem Class="nameplateTextCenter">
                                                    <MudText Class="nameplateText nameplateTextOutline">@scoresArray[5]</MudText>
                                                    <MudText Class="nameplateText">@scoresArray[5]</MudText>
                                                </MudItem>
                                                <MudItem Class="nameplateTextRight">
                                                    <MudText Class="nameplateText nameplateTextOutline">@scoresArray[6]</MudText>
                                                    <MudText Class="nameplateText">@scoresArray[6]</MudText>
                                                </MudItem>
                                            </MudItem>
                                            @* Fourth row (Crowns) *@
                                            <MudItem Style="position:absolute; height:18%; width:100%; top:69%">
                                                <MudItem Class="nameplateTextLeft">
                                                    <MudText Class="nameplateText nameplateTextOutline">@scoresArray[7]</MudText>
                                                    <MudText Class="nameplateText">@scoresArray[7]</MudText>
                                                </MudItem>
                                                <MudItem Class="nameplateTextCenter">
                                                    <MudText Class="nameplateText nameplateTextOutline">@scoresArray[8]</MudText>
                                                    <MudText Class="nameplateText">@scoresArray[8]</MudText>
                                                </MudItem>
                                                <MudItem Class="nameplateTextRight">
                                                    <MudText Class="nameplateText nameplateTextOutline">@scoresArray[9]</MudText>
                                                    <MudText Class="nameplateText">@scoresArray[9]</MudText>
                                                </MudItem>
                                            </MudItem>
                                        </MudItem>
                                        @* Forbidden one-liner : Changes the AchievementDisplayDifficulty image asset. When "Difficulty.None" is selected, Defaults to highest difficulty the player currently has crowns / Ranks for. *@
                                        <MudImage Fluid="true" style="position: relative; top: 0;" Src=@($"images/rank_panel_{DifficultySettingCourseStrings[response.AchievementDisplayDifficulty != Difficulty.None ? (int)response.AchievementDisplayDifficulty + 1 : (int)highestDifficulty + 1].Replace(' ', '_')}.png") />
                                    </MudItem>
                                </MudTabPanel>
                            }
                        </MudTabs>

                    </MudPaper>
                    <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.Material.Filled.Save" Class="mx-2"></MudIcon>
                            <MudText>@Localizer["Save"]</MudText>
                        }
                    </MudButton>
                </MudStack>
            </MudItem>
        </MudGrid>
    }
}
else
{
    <MudContainer Style="display:flex;margin:50px 0;align-items:center;justify-content:center;">
        <MudProgressCircular Indeterminate="true" Size="Size.Large" Color="Color.Primary" />
    </MudContainer>
}

@code {
    private async Task UpdateMyDonName()
    {
        @if (response is not null) await JsRuntime.InvokeVoidAsync("updateMyDonNameText", response.MyDonName);
    }

    private async Task UpdateTitle()
    {
        @if (response is not null) await JsRuntime.InvokeVoidAsync("updateTitleText", response.Title);
    }

    private async Task UpdateScoreboard(Difficulty difficulty)
    {
        UpdateScores(difficulty);
        await JsRuntime.InvokeVoidAsync("updateScoreboardText", scoresArray);
    }
}