@page "/Users/{baid:int}/Profile" @inject HttpClient Client @inject IGameDataService GameDataService @inject IDialogService DialogService @inject LoginService LoginService @inject IJSRuntime Js @inject NavigationManager NavigationManager @if (response is not null) { @if (LoginService.LoginRequired && (!LoginService.IsLoggedIn || (LoginService.GetLoggedInUser().Baid != Baid && !LoginService.IsAdmin))) { if (!LoginService.IsLoggedIn) { NavigationManager.NavigateTo("/Login"); } else { NavigationManager.NavigateTo("/"); } } else { <MudBreadcrumbs Items="breadcrumbs" Class="p-0 mb-2"></MudBreadcrumbs> <MudText Typo="Typo.h4">@Localizer["Profile"]</MudText> <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"]> @for (uint i = 0; i < LanguageStrings.Length; i++) { var index = i; <MudSelectItem Value="@i">@LanguageStrings[index]</MudSelectItem> } </MudSelect> </MudItem> </MudGrid> <MudGrid> <MudItem xs="12" md="8"> @if (LoginService.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 (LoginService.AllowFreeProfileEditing) { <MudItem xs="12" md="4"> <MudSelect @bind-Value="@response.TitlePlateId" Label=@Localizer["Title Plate"]> @for (uint i = 0; i < TitlePlateStrings.Length; i++) { var index = i; <MudSelectItem Value="@i">@TitlePlateStrings[index]</MudSelectItem> } </MudSelect> </MudItem> } </MudGrid> <MudSelect T="Difficulty" ValueChanged=@UpdateScoreboard Value=@response.AchievementDisplayDifficulty Label=@Localizer["Achievement Panel Difficulty"]> @foreach (var item in Enum.GetValues<Difficulty>()) { <MudSelectItem Value="@item" /> } </MudSelect> <MudGrid> <MudItem xs="12" md="4"> <MudStack Spacing="4"> <MudSwitch @bind-Checked="@response.IsDisplayAchievement" Label=@Localizer["Display Achievement Panel"] Color="Color.Primary" /> <MudSwitch @bind-Checked="@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"]> @for (uint i = 0; i < DifficultySettingCourseStrings.Length; i++) { var index = i; <MudSelectItem Value="@i">@DifficultySettingCourseStrings[index]</MudSelectItem> } </MudSelect> <MudSelect @bind-Value="@response.DifficultySettingStar" Label=@Localizer["Difficulty Setting Star"]> @for (uint i = 0; i < DifficultySettingStarStrings.Length; i++) { var index = i; <MudSelectItem Value="@i">@DifficultySettingStarStrings[index]</MudSelectItem> } </MudSelect> <MudSelect @bind-Value="@response.DifficultySettingSort" Label=@Localizer["Difficulty Setting Sort"]> @for (uint i = 0; i < DifficultySettingSortStrings.Length; i++) { var index = i; <MudSelectItem Value="@i">@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"> @if (LoginService.AllowFreeProfileEditing) { <MudSelect @bind-Value="@response.Head" Label=@Localizer["Head"]> @for (var i = 0; i < costumeFlagArraySizes[1]; i++) { var index = (uint)i; var costumeTitle = GameDataService.GetHeadTitle(index); <MudSelectItem Value="@index">@index - @costumeTitle</MudSelectItem> } </MudSelect> <MudSelect @bind-Value="@response.Body" Label=@Localizer["Body"]> @for (var i = 0; i < costumeFlagArraySizes[2]; i++) { var index = (uint)i; var costumeTitle = GameDataService.GetBodyTitle(index); <MudSelectItem Value="@index">@index - @costumeTitle</MudSelectItem> } </MudSelect> <MudSelect @bind-Value="@response.Face" Label=@Localizer["Face"]> @for (var i = 0; i < costumeFlagArraySizes[3]; i++) { var index = (uint)i; var costumeTitle = GameDataService.GetFaceTitle(index); <MudSelectItem Value="@index">@index - @costumeTitle</MudSelectItem> } </MudSelect> <MudSelect @bind-Value="@response.Kigurumi" Label=@Localizer["Kigurumi"]> @for (var i = 0; i < costumeFlagArraySizes[0]; i++) { var index = (uint)i; var costumeTitle = GameDataService.GetKigurumiTitle(index); <MudSelectItem Value="@index">@index - @costumeTitle</MudSelectItem> } </MudSelect> <MudSelect @bind-Value="@response.Puchi" Label=@Localizer["Puchi"]> @for (var i = 0; i < costumeFlagArraySizes[4]; i++) { var index = (uint)i; var costumeTitle = GameDataService.GetPuchiTitle(index); <MudSelectItem Value="@index">@index - @costumeTitle</MudSelectItem> } </MudSelect> } else { <MudSelect @bind-Value="@response.Head" Label=@Localizer["Head"]> @foreach (var i in unlockedHeadCostumes) { var index = i; var costumeTitle = GameDataService.GetHeadTitle(index); <MudSelectItem Value="@index">@index - @costumeTitle</MudSelectItem> } </MudSelect> <MudSelect @bind-Value="@response.Body" Label=@Localizer["Body"]> @foreach (var i in unlockedBodyCostumes) { var index = i; var costumeTitle = GameDataService.GetBodyTitle(index); <MudSelectItem Value="@index">@index - @costumeTitle</MudSelectItem> } </MudSelect> <MudSelect @bind-Value="@response.Face" Label=@Localizer["Face"]> @foreach (var i in unlockedFaceCostumes) { var index = i; var costumeTitle = GameDataService.GetFaceTitle(index); <MudSelectItem Value="@index">@index - @costumeTitle</MudSelectItem> } </MudSelect> <MudSelect @bind-Value="@response.Kigurumi" Label=@Localizer["Kigurumi"]> @foreach (var i in unlockedKigurumiCostumes) { var index = i; var costumeTitle = GameDataService.GetKigurumiTitle(index); <MudSelectItem Value="@index">@index - @costumeTitle</MudSelectItem> } </MudSelect> <MudSelect @bind-Value="@response.Puchi" Label=@Localizer["Puchi"]> @foreach (var i in unlockedPuchiCostumes) { var index = i; var costumeTitle = GameDataService.GetPuchiTitle(index); <MudSelectItem Value="@index">@index - @costumeTitle</MudSelectItem> } </MudSelect> } </MudStack> <MudStack Row="true"> <MudSelect @bind-Value="@response.BodyColor" Label=@Localizer["Body Color"]> @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"]> @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"]> @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-Checked="@response.PlaySetting.IsVanishOn" Label=@Localizer["Vanish"] Color="Color.Primary" /> <MudSwitch @bind-Checked="@response.PlaySetting.IsInverseOn" Label=@Localizer["Inverse"] Color="Color.Primary" /> <MudSwitch @bind-Checked="@response.IsSkipOn" Label=@Localizer["Give Up"] Color="Color.Primary" /> <MudSwitch @bind-Checked="@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"]> @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"]> @foreach (var item in Enum.GetValues<RandomType>()) { <MudSelectItem Value="@item" /> } </MudSelect> <MudSelect @bind-Value="@response.ToneId" Label=@Localizer["Tone"]> @for (uint i = 0; i < ToneStrings.Length; 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">@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-0000.png'" Src=@($"images/Costumes/puchi/puchi-{response.Puchi.ToString().PadLeft(4, '0')}.png") /> </MudItem> </MudItem> @* Player Nameplate *@ <MudItem style="text-align: center; position:relative;"> @* Title text *@ <MudItem style="position:absolute; top: 7%; 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%; width:80%; right: 10%;"> <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: 47%; 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: 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; top: 0; left: 0;" Src="images/Nameplates/nameplate.png" /> <MudImage Fluid="true" Style="position:absolute; top: 0; left: 0; right: 0; margin: 0 auto;" 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 Js.InvokeVoidAsync("updateMyDonNameText", response.MyDonName); } private async Task UpdateTitle() { @if (response is not null) await Js.InvokeVoidAsync("updateTitleText", response.Title); } private async Task UpdateScoreboard(Difficulty difficulty) { UpdateScores(difficulty); await Js.InvokeVoidAsync("updateScoreboardText", scoresArray); } }