Taiko_Stuff/TaikoLocalServer
1
0
Fork 0
mirror of synced 2025-02-17 19:19:18 +01:00
Code Releases Activity
TaikoLocalServer/TaikoWebUI/Pages/Profile.razor
Farewell_ 0010a3eb34 Added Profile visualizer 
Dan graphic still isn't displayed but disabling dan display on the nameplate updates the name disposition properly

Still haven't figured where the texture for AI 2, 3 and 4 are; useable in it's current state
2023-11-02 12:43:27 +01:00

343 lines
23 KiB
Plaintext
Raw Blame History

@page "/Cards/{baid:int}/Profile"
@inject HttpClient Client
@inject IGameDataService GameDataService
@inject IDialogService DialogService
@inject LoginService LoginService
@inject IJSRuntime JS
<MudBreadcrumbs Items="breadcrumbs" Class="px-0"></MudBreadcrumbs>
<h1>Profile</h1>
@if (LoginService.LoginRequired)
{
<MudText Typo="Typo.caption">Card: @LoginService.GetCardNum()</MudText>
}
else
{
<MudText Typo="Typo.caption">Card: @Baid</MudText>
}
@if (response is not null)
{
@if (LoginService.LoginRequired && (!LoginService.IsLoggedIn || (LoginService.Baid != Baid && !LoginService.IsAdmin)))
{
<MudItem xs="12">
<MudText Align="Align.Center" Class="my-8">
Please log in by clicking on "cards" tab first.
</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>
</MudItem>
<MudItem xs="12" md="4">
<MudSelect @bind-Value="@response.MyDonNameLanguage" Label="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">
<MudTextField TextChanged="UpdateTitle" @bind-Value="@response.Title" Label="Title" />
<MudButton Color="Color.Primary" Class="mt-1" Size="Size.Small" OnClick="@((_)=>OpenChooseTitleDialog())">
Select a Title
</MudButton>
</MudItem>
<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>
</MudGrid>
<MudSelect @bind-Value="@response.AchievementDisplayDifficulty"
Label="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="Display Achievement Panel" Color="Color.Primary" />
<MudSwitch @bind-Checked="@response.IsDisplayDanOnNamePlate" Label="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="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="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="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="Costume">
<MudStack Spacing="4">
<h2>Costume Options</h2>
<MudGrid>
<MudItem xs="12">
<MudStack Spacing="4" Class="mb-8">
<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>
</MudStack>
<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>
<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>
<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 < 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">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">
<MudCard style="height: auto" Outlined="true">
<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>
@* 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>
</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>
</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);
}
}
View Git Blame Copy Permalink