1
0
mirror of synced 2024-12-11 06:16:01 +01:00
TaikoLocalServer/TaikoWebUI/Pages/Profile.razor
KIT! 9bb08e2892 Costume name localization
Costume name will now be selected from the right language in the wordlist.
In nijiiro, costume entries for all languages are in japanese, but that gives you the option to translate the fields manually in the wordlist and have it reflected on the webUI.
2024-10-25 15:51:42 +02:00

417 lines
32 KiB
Plaintext

@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, CultureInfo.CurrentCulture.ToString());
<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, CultureInfo.CurrentCulture.ToString());
<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, CultureInfo.CurrentCulture.ToString());
<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, CultureInfo.CurrentCulture.ToString());
<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, CultureInfo.CurrentCulture.ToString());
<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" Class="profile-image" style=@($"filter: {CostumeColorFilters[response.FaceColor]}") Src=@CostumeOrDefault("masks/body-facemask", response.Body, "masks/body-facemask-0000") />
<MudImage Fluid="true" Class="profile-image" onerror="this.src='images/Costumes/body/body-0000.webp'" Src=@($"images/Costumes/body/body-{response.Body.ToString().PadLeft(4, '0')}.webp") />
<MudImage Fluid="true" Class="profile-image" onerror="this.src='images/Costumes/face/face-0000.webp'" Src=@($"images/Costumes/face/face-{response.Face.ToString().PadLeft(4, '0')}.webp") />
<MudImage Fluid="true" Class="profile-image" style=@($"filter: {CostumeColorFilters[response.BodyColor]}") Src=@CostumeOrDefault("masks/head-bodymask", response.Head, "head/head-0000") />
<MudImage Fluid="true" Class="profile-image" style=@($"filter: {CostumeColorFilters[response.FaceColor]}") Src=@CostumeOrDefault("masks/head-facemask", response.Head, "head/head-0000") />
<MudImage Fluid="true" Class="profile-image" onerror="this.src='images/Costumes/head/head-0000.webp'" Src=@($"images/Costumes/head/head-{response.Head.ToString().PadLeft(4, '0')}.webp") />
}
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" Class="profile-image" style=@($"filter: {CostumeColorFilters[response.FaceColor]}") Src=@CostumeOrDefault("masks/kigurumi-facemask", response.Kigurumi, "masks/body-facemask-0000") />
<MudImage Fluid="true" Class="profile-image" onerror="this.src='images/Costumes/kigurumi/kigurumi-0000.webp'" Src=@($"images/Costumes/kigurumi/kigurumi-{response.Kigurumi.ToString().PadLeft(4, '0')}.webp") />
}
<MudItem Class="profile-image">
<MudImage Fluid="true" Class="puchi-floating" onerror="this.src='images/Costumes/puchi/puchi-9999.webp'" Src=@($"images/Costumes/puchi/puchi-{response.Puchi.ToString().PadLeft(4, '0')}.webp") />
</MudItem>
</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 Class="profile-image" Id="nameplate-title" Style="height:100%; 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" Class="profile-image" Style="height:100%; font-family: 'Nijiiro', sans-serif; -webkit-text-stroke-width: 5px; -webkit-text-stroke-color: black">@response.MyDonName</MudText>
<MudText Id="nameplate-name" Class="profile-image" Style="height:100%; 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.webp" />
@* Check if image does not exist, use nameplate_Wood.webp *@
<MudImage Fluid="true" Style="position:absolute; bottom: 6px; left: 0; right: 0; margin: 0 auto;" onerror="this.src='images/Nameplates/nameplate_Wood.webp'" Src=@($"images/Nameplates/nameplate_{TitlePlateStrings[response.TitlePlateId].Replace(' ', '_')}.webp") />
@if (response.IsDisplayDanOnNamePlate)
{
<MudImage Fluid="true" Class="profile-image" Src="images/Nameplates/nameplate_dan.webp" />
}
</MudItem>
</MudItem>
</MudTabPanel>
@if (response.IsDisplayAchievement)
{
<MudTabPanel Text="@Localizer["Achievement Panel"]">
<MudItem style="text-align: center; position:relative;">
@* Achievement panel Text *@
<MudItem Id="scoreboard" Class="profile-image" Style="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(' ', '_')}.webp") />
</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);
}
}