1
0
mirror of synced 2024-12-19 09:55:55 +01:00
TaikoLocalServer/TaikoWebUI/Pages/Profile.razor

396 lines
28 KiB
Plaintext
Raw Normal View History

@page "/Users/{baid:int}/Profile"
@inject HttpClient Client
2022-09-15 07:18:50 +02:00
@inject IGameDataService GameDataService
2022-09-15 11:47:46 +02:00
@inject IDialogService DialogService
2023-10-16 11:38:27 +02:00
@inject LoginService LoginService
@inject IJSRuntime Js
2022-09-05 06:52:29 +02:00
2022-09-06 16:32:36 +02:00
<MudBreadcrumbs Items="breadcrumbs" Class="px-0"></MudBreadcrumbs>
2022-09-05 23:42:13 +02:00
<h1>Profile</h1>
<MudText Typo="Typo.caption">User: @Baid</MudText>
2022-09-05 06:52:29 +02:00
@if (response is not null)
{
@if (LoginService.LoginRequired && (!LoginService.IsLoggedIn || (LoginService.GetLoggedInUser().Baid != Baid && !LoginService.IsAdmin)))
2023-10-16 11:38:27 +02:00
{
<MudItem xs="12">
<MudText Align="Align.Center" Class="my-8">
Please log in by clicking on "Users" tab first.
2023-10-16 11:38:27 +02:00
</MudText>
</MudItem>
}
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="Profile">
<MudStack Spacing="4">
<h2>Profile Options</h2>
<MudGrid>
<MudItem xs="12" md="8">
<MudTextField TextChanged="UpdateMyDonName" @bind-Value="@response.MyDonName" Label="Name"></MudTextField>
2023-10-16 11:38:27 +02:00
</MudItem>
<MudItem xs="12" md="4">
<MudSelect @bind-Value="@response.MyDonNameLanguage" Label="Language">
@for (uint i = 0; i < LanguageStrings.Length; i++)
{
var index = i;
2023-10-16 11:38:27 +02:00
<MudSelectItem Value="@i">@LanguageStrings[index]</MudSelectItem>
}
</MudSelect>
2023-10-16 11:38:27 +02:00
</MudItem>
</MudGrid>
2023-10-16 11:38:27 +02:00
<MudGrid>
<MudItem xs="12" md="8">
@if (LoginService.AllowFreeProfileEditing)
{
<MudTextField TextChanged="UpdateTitle" @bind-Value="@response.Title" Label="Title"/>
}
else
{
<MudTextField ReadOnly="true" @bind-Value="@response.Title" Label="Title"/>
}
<MudButton Color="Color.Primary" Class="mt-1" Size="Size.Small" OnClick="@((_) => OpenChooseTitleDialog())">
2023-10-16 11:38:27 +02:00
Select a Title
</MudButton>
</MudItem>
@if (LoginService.AllowFreeProfileEditing)
{
<MudItem xs="12" md="4">
<MudSelect @bind-Value="@response.TitlePlateId" Label="Title Plate">
@for (uint i = 0; i < TitlePlateStrings.Length; i++)
{
var index = i;
<MudSelectItem Value="@i">@TitlePlateStrings[index]</MudSelectItem>
}
</MudSelect>
</MudItem>
}
2023-10-16 11:38:27 +02:00
</MudGrid>
2023-10-16 11:38:27 +02:00
<MudSelect @bind-Value="@response.AchievementDisplayDifficulty"
Label="Achievement Panel Difficulty">
@foreach (var item in Enum.GetValues<Difficulty>())
{
2023-10-16 11:38:27 +02:00
<MudSelectItem Value="@item" />
}
2022-09-15 07:18:50 +02:00
</MudSelect>
2023-10-16 11:38:27 +02:00
<MudGrid>
<MudItem xs="12" md="4">
<MudStack Spacing="4">
<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" />
2023-10-16 11:38:27 +02:00
</MudStack>
</MudItem>
<MudItem xs="12" md="8">
<MudStack Spacing="4">
<MudSelect @bind-Value="@response.DifficultySettingCourse" Label="Difficulty Setting Course">
@for (uint i = 0; i < DifficultySettingCourseStrings.Length; i++)
{
var index = i;
<MudSelectItem Value="@i">@DifficultySettingCourseStrings[index]</MudSelectItem>
}
</MudSelect>
2023-10-16 11:38:27 +02:00
<MudSelect @bind-Value="@response.DifficultySettingStar" Label="Difficulty Setting Star">
@for (uint i = 0; i < DifficultySettingStarStrings.Length; i++)
{
var index = i;
<MudSelectItem Value="@i">@DifficultySettingStarStrings[index]</MudSelectItem>
}
</MudSelect>
2023-10-16 11:38:27 +02:00
<MudSelect @bind-Value="@response.DifficultySettingSort" Label="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>
2023-10-16 11:38:27 +02:00
<MudTabPanel Text="Costume">
<MudStack Spacing="4">
<h2>Costume Options</h2>
<MudGrid>
<MudItem xs="12">
<MudStack Spacing="4" Class="mb-8">
@if (LoginService.AllowFreeProfileEditing)
{
<MudSelect @bind-Value="@response.Head" Label="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="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="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="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="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="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="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="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="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="Puchi">
@foreach (var i in unlockedPuchiCostumes)
{
var index = i;
var costumeTitle = GameDataService.GetPuchiTitle(index);
<MudSelectItem Value="@index">@index - @costumeTitle</MudSelectItem>
}
</MudSelect>
}
2023-10-16 11:38:27 +02:00
</MudStack>
2023-10-16 11:38:27 +02:00
<MudStack Row="true">
<MudSelect @bind-Value="@response.BodyColor" Label="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="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="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>
2023-10-16 11:38:27 +02:00
<MudTabPanel Text="Song Options">
<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 < SpeedStrings.Length; i++)
{
var index = i;
<MudSelectItem Value="@i">@SpeedStrings[index]</MudSelectItem>
}
</MudSelect>
2023-10-16 11:38:27 +02:00
<MudSelect @bind-Value="@response.PlaySetting.RandomType"
Label="Random">
@foreach (var item in Enum.GetValues<RandomType>())
{
<MudSelectItem Value="@item" />
}
</MudSelect>
2023-10-16 11:38:27 +02:00
<MudSelect @bind-Value="@response.ToneId" Label="Tone">
@for (uint i = 0; i < ToneStrings.Length; i++)
{
var index = i;
<MudSelectItem Value="@i">@ToneStrings[index]</MudSelectItem>
}
</MudSelect>
2023-10-16 11:38:27 +02:00
<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>
</MudTabPanel>
</MudTabs>
</MudPaper>
</MudItem>
<MudItem md="4" xs="12" Class="py-3 px-3">
2023-10-16 11:38:27 +02:00
<MudStack Spacing="4" Class="sticky" Style="top:100px">
<MudCard style="height: auto" Outlined="true">
2023-10-16 11:38:27 +02:00
<MudCardContent>
@* 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=@ImageOrDefault("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=@ImageOrDefault("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=@ImageOrDefault("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=@ImageOrDefault("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=@ImageOrDefault("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=@ImageOrDefault("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>
2022-09-15 07:18:50 +02:00
@* 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)
2023-10-16 11:38:27 +02:00
{
<MudImage Fluid="true" Style="position:absolute; top: 0; left: 0; right: 0; margin: 0 auto;" Src="images/Nameplates/nameplate_dan.png" />
2023-10-16 11:38:27 +02:00
}
</MudItem>
2023-10-16 11:38:27 +02:00
</MudCardContent>
</MudCard>
<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>Save</MudText>
}
</MudButton>
</MudStack>
2023-10-16 11:38:27 +02:00
</MudItem>
</MudGrid>
}
}
@code {
private async Task UpdateMyDonName()
{
@if (response is not null) await Js.InvokeVoidAsync("updateMyDonName", response.MyDonName);
}
private async Task UpdateTitle()
{
@if (response is not null) await Js.InvokeVoidAsync("updateTitle", response.Title);
}
2022-09-05 06:52:29 +02:00
}