Taiko_Stuff/TaikoLocalServer
1
0
Fork 0
mirror of synced 2025-02-17 19:19:18 +01:00
Code Releases Activity

Fixed nameplate alignment and clean up

Browse Source 
Title text still doesn't scale properly when switching from simple nameplates to nameplates with small characters on the right (Text does get resized properly once edited or on page resize event or page reload)
This commit is contained in:
Farewell_ 2024-06-05 14:19:02 +02:00
parent 0b65b47e00
commit 741962d8bd
2 changed files with 28 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

55
TaikoWebUI/Pages/Profile.razor
View File

@ -49,11 +49,11 @@
<MudItem xs="12" md="8">
@if (AuthService.AllowFreeProfileEditing)
{
<MudTextField TextChanged="UpdateTitle" @bind-Value="@response.Title" Label=@Localizer["Title"]/>
<MudTextField TextChanged="UpdateTitle" @bind-Value="@response.Title" Label=@Localizer["Title"] />
}
else
{
<MudTextField ReadOnly="true" @bind-Value="@response.Title" Label=@Localizer["Title"]/>
<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"]
@ -82,8 +82,8 @@
<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" />
<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">
@ -126,36 +126,36 @@
<MudSelect @bind-Value="@response.Head" Label=@Localizer["Head"]>
@foreach (var index in headUniqueIdList)
{
var costumeTitle = GameDataService.GetHeadTitle(costumeList, index);
<MudSelectItem Value="@index">@index - @costumeTitle</MudSelectItem>
var costumeTitle = GameDataService.GetHeadTitle(costumeList, index);
<MudSelectItem Value="@index">@index - @costumeTitle</MudSelectItem>
}
</MudSelect>
<MudSelect @bind-Value="@response.Body" Label=@Localizer["Body"]>
@foreach (var index in bodyUniqueIdList)
{
var costumeTitle = GameDataService.GetBodyTitle(costumeList, index);
<MudSelectItem Value="@index">@index - @costumeTitle</MudSelectItem>
var costumeTitle = GameDataService.GetBodyTitle(costumeList, index);
<MudSelectItem Value="@index">@index - @costumeTitle</MudSelectItem>
}
</MudSelect>
<MudSelect @bind-Value="@response.Face" Label=@Localizer["Face"]>
@foreach (var index in faceUniqueIdList)
{
var costumeTitle = GameDataService.GetFaceTitle(costumeList, index);
<MudSelectItem Value="@index">@index - @costumeTitle</MudSelectItem>
var costumeTitle = GameDataService.GetFaceTitle(costumeList, index);
<MudSelectItem Value="@index">@index - @costumeTitle</MudSelectItem>
}
</MudSelect>
<MudSelect @bind-Value="@response.Kigurumi" Label=@Localizer["Kigurumi"]>
@foreach (var index in kigurumiUniqueIdList)
{
var costumeTitle = GameDataService.GetKigurumiTitle(costumeList, index);
<MudSelectItem Value="@index">@index - @costumeTitle</MudSelectItem>
var costumeTitle = GameDataService.GetKigurumiTitle(costumeList, index);
<MudSelectItem Value="@index">@index - @costumeTitle</MudSelectItem>
}
</MudSelect>
<MudSelect @bind-Value="@response.Puchi" Label=@Localizer["Puchi"]>
@foreach (var index in puchiUniqueIdList)
{
var costumeTitle = GameDataService.GetPuchiTitle(costumeList, index);
<MudSelectItem Value="@index">@index - @costumeTitle</MudSelectItem>
var costumeTitle = GameDataService.GetPuchiTitle(costumeList, index);
<MudSelectItem Value="@index">@index - @costumeTitle</MudSelectItem>
}
</MudSelect>
</MudStack>
@ -203,10 +203,10 @@
<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" />
<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["Give Up"] Color="Color.Primary" />
<MudSwitch @bind-Value="@response.IsVoiceOn" Label=@Localizer["Voice"] Color="Color.Primary" />
</MudStack>
</MudItem>
<MudItem xs="12" md="8">
@ -272,20 +272,21 @@
<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.png'" Src=@($"images/Costumes/puchi/puchi-{response.Puchi.ToString().PadLeft(4, '0')}.png") /> </MudItem>
<MudImage Fluid="true" style="position:absolute; top: 0; left: 0; right: 0; margin: 0 auto;" onerror="this.src='images/Costumes/puchi/puchi-9999.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%;">
<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: 47%; left:0; right:1.1%; height:41%; width:min(96%, 320px); margin: 0 auto; z-index:2">
<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>
@ -294,7 +295,7 @@
</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: 0%; left: 0; right: 0; margin: 0 auto;" onerror="this.src='images/Nameplates/nameplate_Wood.png'" Src=@($"images/Nameplates/nameplate_{TitlePlateStrings[response.TitlePlateId].Replace(' ', '_')}.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" />
@ -313,7 +314,7 @@
<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>
<MudText Class="nameplateText">@scoresArray[0]</MudText>
</MudItem>
</MudItem>
@* Second row *@
@ -362,8 +363,8 @@
</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") />
@* 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>
}
@ -392,7 +393,7 @@
}
else
{
<MudContainer Style="display:flex;margin:50px 0;align-items:center;justify-content:center;">
<MudContainer Style="display:flex;margin:50px 0;align-items:center;justify-content:center;">
<MudProgressCircular Indeterminate="true" Size="Size.Large" Color="Color.Primary" />
</MudContainer>
}

BIN
TaikoWebUI/wwwroot/images/Nameplates/nameplate_Onp_1.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 11 KiB

After

Width:  |  Height:  |  Size: 9.9 KiB