Achievement Board now has numbers on it
Placement of each score has been done, It still doesn't update properly but the values are properly set. Just need to figure out a way to rerender the scoreboard
This commit is contained in:
parent
9bfae2a56c
commit
6f3052c69b
@ -70,8 +70,7 @@ else
|
||||
</MudItem>
|
||||
</MudGrid>
|
||||
|
||||
<MudSelect @bind-Value="@response.AchievementDisplayDifficulty"
|
||||
Label="Achievement Panel Difficulty">
|
||||
<MudSelect T="Difficulty" ValueChanged=@UpdateScores Value=@response.AchievementDisplayDifficulty Label="Achievement Panel Difficulty">
|
||||
@foreach (var item in Enum.GetValues<Difficulty>())
|
||||
{
|
||||
<MudSelectItem Value="@item" />
|
||||
@ -316,18 +315,54 @@ else
|
||||
<MudTabPanel Text="Achievement Panel">
|
||||
<MudItem style="text-align: center; position:relative;">
|
||||
@* Achievement panel Text *@
|
||||
<MudItem Style="position:absolute; top: 0; left:0; right:0; height:100%; width:min(96%, 320px); margin: 0 auto; z-index:2; vertical-align: middle;">
|
||||
<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;">
|
||||
<MudItem Style="position:absolute; height:18%; width:100%; top:11%">
|
||||
|
||||
<MudItem Style="position:absolute; height:100%; width:15%; left:78%">
|
||||
<MudText Class="nameplateText nameplateTextOutline">@scoresArray[0]</MudText>
|
||||
<MudText Class="nameplateText">@scoresArray[0]</MudText>
|
||||
</MudItem>
|
||||
</MudItem>
|
||||
<MudItem Style="position:absolute; height:18%; width:100%; top:30%">
|
||||
|
||||
<MudItem Style="position:absolute; height:100%; width:15%; left:19%">
|
||||
<MudText Class="nameplateText nameplateTextOutline">@scoresArray[1]</MudText>
|
||||
<MudText Class="nameplateText">@scoresArray[1]</MudText>
|
||||
</MudItem>
|
||||
<MudItem Style="position:absolute; height:100%; width:15%; left:48%">
|
||||
<MudText Class="nameplateText nameplateTextOutline">@scoresArray[2]</MudText>
|
||||
<MudText Class="nameplateText">@scoresArray[2]</MudText>
|
||||
</MudItem>
|
||||
<MudItem Style="position:absolute; height:100%; width:15%; left:78%">
|
||||
<MudText Class="nameplateText nameplateTextOutline">@scoresArray[3]</MudText>
|
||||
<MudText Class="nameplateText">@scoresArray[3]</MudText>
|
||||
</MudItem>
|
||||
</MudItem>
|
||||
<MudItem Style="position:absolute; height:18%; width:100%; top:49%">
|
||||
|
||||
<MudItem Style="position:absolute; height:100%; width:15%; left:19%">
|
||||
<MudText Class="nameplateText nameplateTextOutline">@scoresArray[4]</MudText>
|
||||
<MudText Class="nameplateText">@scoresArray[4]</MudText>
|
||||
</MudItem>
|
||||
<MudItem Style="position:absolute; height:100%; width:15%; left:48%">
|
||||
<MudText Class="nameplateText nameplateTextOutline">@scoresArray[5]</MudText>
|
||||
<MudText Class="nameplateText">@scoresArray[5]</MudText>
|
||||
</MudItem>
|
||||
<MudItem Style="position:absolute; height:100%; width:15%; left:78%">
|
||||
<MudText Class="nameplateText nameplateTextOutline">@scoresArray[6]</MudText>
|
||||
<MudText Class="nameplateText">@scoresArray[6]</MudText>
|
||||
</MudItem>
|
||||
</MudItem>
|
||||
<MudItem Style="position:absolute; height:18%; width:100%; top:69%">
|
||||
|
||||
<MudItem Style="position:absolute; height:100%; width:15%; left:19%">
|
||||
<MudText Class="nameplateText nameplateTextOutline">@scoresArray[7]</MudText>
|
||||
<MudText Class="nameplateText">@scoresArray[7]</MudText>
|
||||
</MudItem>
|
||||
<MudItem Style="position:absolute; height:100%; width:15%; left:48%">
|
||||
<MudText Class="nameplateText nameplateTextOutline">@scoresArray[8]</MudText>
|
||||
<MudText Class="nameplateText">@scoresArray[8]</MudText>
|
||||
</MudItem>
|
||||
<MudItem Style="position:absolute; height:100%; width:15%; left:78%">
|
||||
<MudText Class="nameplateText nameplateTextOutline">@scoresArray[9]</MudText>
|
||||
<MudText Class="nameplateText">@scoresArray[9]</MudText>
|
||||
</MudItem>
|
||||
</MudItem>
|
||||
</MudItem>
|
||||
<MudImage Fluid="true" style="position: relative; top: 0;" Src=@($"images/rank_panel_{DifficultySettingCourseStrings[(int) response.AchievementDisplayDifficulty + 1].Replace(' ', '_')}.png") />
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
using Microsoft.AspNetCore.Http;
|
||||
using System.Linq;
|
||||
using TaikoWebUI.Pages.Dialogs;
|
||||
using static MudBlazor.CategoryTypes;
|
||||
|
||||
namespace TaikoWebUI.Pages;
|
||||
|
||||
@ -9,6 +10,8 @@ public partial class Profile
|
||||
[Parameter]
|
||||
public int Baid { get; set; }
|
||||
|
||||
private SongBestResponse? songresponse;
|
||||
|
||||
private UserSetting? response;
|
||||
|
||||
private bool isSavingOptions;
|
||||
@ -40,7 +43,7 @@ public partial class Profile
|
||||
"masks/body-facemask-0090", "masks/body-facemask-0092", "masks/body-facemask-0136",
|
||||
"masks/body-facemask-0151", "masks/body-facemask-0152", "masks/body-facemask-0153",
|
||||
"masks/head-bodymask-0113", "masks/head-bodymask-0138",
|
||||
"masks/head-facemask-0003", "masks/head-facemask-0113", "masks/head-facemask-0137",
|
||||
"masks/head-facemask-0003", "masks/head-facemask-0113", "masks/head-facemask-0137",
|
||||
"masks/head-facemask-0138",
|
||||
"masks/kigurumi-bodymask-0052", "masks/kigurumi-bodymask-0109", "masks/kigurumi-bodymask-0110",
|
||||
"masks/kigurumi-bodymask-0115", "masks/kigurumi-bodymask-0123",
|
||||
@ -168,10 +171,12 @@ public partial class Profile
|
||||
{
|
||||
new BreadcrumbItem("Cards", href: "/Cards"),
|
||||
};
|
||||
|
||||
|
||||
private Dictionary<Difficulty, List<SongBestData>> songBestDataMap = new();
|
||||
|
||||
private List<int> costumeFlagArraySizes = new();
|
||||
|
||||
private int[] scoresArray = new int[9];
|
||||
private int[] scoresArray = new int[10];
|
||||
|
||||
protected override async Task OnInitializedAsync()
|
||||
{
|
||||
@ -181,8 +186,29 @@ public partial class Profile
|
||||
|
||||
breadcrumbs.Add(new BreadcrumbItem($"Card: {Baid}", href: null, disabled: true));
|
||||
breadcrumbs.Add(new BreadcrumbItem("Profile", href: $"/Cards/{Baid}/Profile", disabled: false));
|
||||
|
||||
|
||||
costumeFlagArraySizes = GameDataService.GetCostumeFlagArraySizes();
|
||||
|
||||
songresponse = await Client.GetFromJsonAsync<SongBestResponse>($"api/PlayData/{Baid}");
|
||||
songresponse.ThrowIfNull();
|
||||
|
||||
songresponse.SongBestData.ForEach(data =>
|
||||
{
|
||||
var songId = data.SongId;
|
||||
data.Genre = GameDataService.GetMusicGenreBySongId(songId);
|
||||
data.MusicName = GameDataService.GetMusicNameBySongId(songId);
|
||||
data.MusicArtist = GameDataService.GetMusicArtistBySongId(songId);
|
||||
});
|
||||
|
||||
songBestDataMap = songresponse.SongBestData.GroupBy(data => data.Difficulty)
|
||||
.ToDictionary(data => data.Key,
|
||||
data => data.ToList());
|
||||
foreach (var songBestDataList in songBestDataMap.Values)
|
||||
{
|
||||
songBestDataList.Sort((data1, data2) => GameDataService.GetMusicIndexBySongId(data1.SongId)
|
||||
.CompareTo(GameDataService.GetMusicIndexBySongId(data2.SongId)));
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
private async Task SaveOptions()
|
||||
@ -192,6 +218,27 @@ public partial class Profile
|
||||
isSavingOptions = false;
|
||||
}
|
||||
|
||||
private void UpdateScores(Difficulty difficulty)
|
||||
{
|
||||
Console.WriteLine("Updating difficulty : " + (int)difficulty);
|
||||
|
||||
response.AchievementDisplayDifficulty = difficulty;
|
||||
scoresArray = new int[10];
|
||||
|
||||
if (difficulty is not Difficulty.None)
|
||||
if (songBestDataMap.TryGetValue(difficulty, out var values))
|
||||
{
|
||||
foreach (var value in values)
|
||||
{
|
||||
Console.WriteLine("Updating for songId : " + value.SongId);
|
||||
if (value.BestCrown == CrownType.Clear) scoresArray[7]++;
|
||||
if (value.BestCrown == CrownType.Gold) scoresArray[8]++;
|
||||
if (value.BestCrown == CrownType.Dondaful) scoresArray[9]++;
|
||||
}
|
||||
StateHasChanged();
|
||||
}
|
||||
}
|
||||
|
||||
public static string CostumeOrDefault(string file, uint id, string defaultfile)
|
||||
{
|
||||
var path = "/images/Costumes/";
|
||||
|
||||
@ -104,3 +104,21 @@ a, .btn-link {
|
||||
.loading-progress-text:after {
|
||||
content: var(--blazor-load-percentage-text, "Loading");
|
||||
}
|
||||
|
||||
.nameplateTextOutline {
|
||||
-webkit-text-stroke: 5px;
|
||||
-webkit-text-stroke-color: black
|
||||
|
||||
}
|
||||
|
||||
.nameplateText {
|
||||
font-family: 'Nijiiro', sans-serif !important;
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
margin: 0 auto;
|
||||
color: white;
|
||||
margin: auto auto;
|
||||
}
|
||||
@ -2,10 +2,18 @@
|
||||
var title;
|
||||
var myDonName;
|
||||
var myDonNameOutline;
|
||||
var scoreboard;
|
||||
var init = false
|
||||
const observer = new ResizeObserver(handleResize);
|
||||
function handleResize() {
|
||||
updateFit()
|
||||
|
||||
const nameplateObserver = new ResizeObserver(handleNameplateResize);
|
||||
const scoreboardObserver = new ResizeObserver(handleScoreboardResize);
|
||||
|
||||
function handleNameplateResize() {
|
||||
updateNameplate();
|
||||
}
|
||||
|
||||
function handleScoreboardResize() {
|
||||
updateScoreboard();
|
||||
}
|
||||
|
||||
function waitForElm(selector) {
|
||||
@ -33,7 +41,8 @@ var pushState = history.pushState;
|
||||
history.pushState = function () {
|
||||
pushState.apply(history, arguments);
|
||||
init = false;
|
||||
observer.disconnect();
|
||||
nameplateObserver.disconnect();
|
||||
scoreboardObserver.disconnect();
|
||||
};
|
||||
|
||||
// Fetches all the relevant objects on the page so updateFit can reference them later
|
||||
@ -45,7 +54,7 @@ function initNameplate() {
|
||||
myDonName = elm
|
||||
waitForElm('#nameplate-name-outline').then((elm) => {
|
||||
myDonNameOutline = elm
|
||||
observer.observe(document.getElementById('nameplate'));
|
||||
nameplateObserver.observe(document.getElementById('nameplate'));
|
||||
init = true
|
||||
});
|
||||
});
|
||||
@ -53,7 +62,16 @@ function initNameplate() {
|
||||
}
|
||||
}
|
||||
|
||||
function updateFit() {
|
||||
function initScoreboard() {
|
||||
if (window.location.href.indexOf("Profile") > -1) {
|
||||
waitForElm('#scoreboard').then((elm) => {
|
||||
scoreboard = elm
|
||||
scoreboardObserver.observe(elm);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function updateNameplate() {
|
||||
if (title.offsetWidth > 0 && title.offsetHeight > 0) {
|
||||
textFit(title, { alignHoriz: true, alignVert: true });
|
||||
textFit(myDonName, { alignHoriz: true, alignVert: true });
|
||||
@ -61,23 +79,40 @@ function updateFit() {
|
||||
}
|
||||
}
|
||||
|
||||
function updateScoreboard() {
|
||||
if (scoreboard.offsetWidth > 0 && scoreboard.offsetHeight > 0) {
|
||||
var row = scoreboard.children;
|
||||
for (var i = 0; i < row.length; i++) {
|
||||
var column = row[i].children;
|
||||
for (var j = 0; j < column.length; j++) {
|
||||
var texts = column[j].children;
|
||||
for (var k = 0; k < texts.length; k++) {
|
||||
if (texts[k].offsetWidth > 0 && texts[k].offsetHeight > 0) {
|
||||
textFit(texts[k], { alignHoriz: true, alignVert: true });
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Used to individually update texts on the nameplate
|
||||
function updateMyDonName(elm) {
|
||||
if (init) {
|
||||
myDonName.textContent = elm
|
||||
myDonNameOutline.textContent = elm
|
||||
updateFit()
|
||||
updateNameplate()
|
||||
}
|
||||
}
|
||||
function updateTitle(elm) {
|
||||
if (init) {
|
||||
title.textContent = elm
|
||||
updateFit()
|
||||
updateNameplate()
|
||||
}
|
||||
}
|
||||
|
||||
// Called by html onload when the image of the nameplate is loaded (this ensures the first fit is properly done)
|
||||
function nameplateLoaded() {
|
||||
initNameplate()
|
||||
initNameplate();
|
||||
initScoreboard();
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user