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

TaikoWebUI/Pages/Profile.razor

@@ -70,8 +70,7 @@ else
                                     </MudItem>
                                 </MudGrid>
 
-                                <MudSelect @bind-Value="@response.AchievementDisplayDifficulty"
+                                <MudSelect T="Difficulty" ValueChanged=@UpdateScores Value=@response.AchievementDisplayDifficulty Label="Achievement Panel Difficulty">
-                                           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") />

TaikoWebUI/Pages/Profile.razor.cs

@@ -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;
@@ -169,9 +172,11 @@ 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()
     {
@@ -183,6 +188,27 @@ public partial class Profile
         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/";

TaikoWebUI/wwwroot/css/app.css

@@ -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;
+}

TaikoWebUI/wwwroot/js/updateTextFit.js

@@ -2,10 +2,18 @@
 var title;
 var myDonName;
 var myDonNameOutline;
+var scoreboard;
 var init = false
-const observer = new ResizeObserver(handleResize);
+
-function handleResize() {
+const nameplateObserver = new ResizeObserver(handleNameplateResize);
-    updateFit()
+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();
 }