Merge pull request #24 from AkaiiKitsune/profile-visualizer

Added scoreboard visualizer

TaikoWebUI/Pages/Profile.razor

@@ -73,8 +73,7 @@
                                     }
                                 </MudGrid>
 
-                                <MudSelect @bind-Value="@response.AchievementDisplayDifficulty"
-                                           Label="Achievement Panel Difficulty">
+                                <MudSelect T="Difficulty" ValueChanged=@UpdateScoreboard Value=@response.AchievementDisplayDifficulty Label="Achievement Panel Difficulty">
                                     @foreach (var item in Enum.GetValues<Difficulty>())
                                     {
                                         <MudSelectItem Value="@item" />
@@ -310,25 +309,27 @@
 
             <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>
+                    <MudPaper Elevation="0" Outlined="true">
+                        <MudTabs Rounded="true" Border="true" PanelClass="pa-8">
+                            <MudTabPanel Text="Player">
+                                <MudItem style="height: auto">
                                     @* 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: relative; top: 0; left: 0; filter: {CostumeColorFilters[response.BodyColor]}") Src=@CostumeOrDefault("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=@CostumeOrDefault("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; filter: {CostumeColorFilters[response.BodyColor]}") Src=@CostumeOrDefault("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=@CostumeOrDefault("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: relative; top: 0; left: 0; filter: {CostumeColorFilters[response.BodyColor]}") Src=@CostumeOrDefault("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=@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-0000.png'" Src=@($"images/Costumes/puchi/puchi-{response.Puchi.ToString().PadLeft(4, '0')}.png") />
@@ -359,8 +360,76 @@
                                             <MudImage Fluid="true" Style="position:absolute; top: 0; left: 0; right: 0; margin: 0 auto;" Src="images/Nameplates/nameplate_dan.png" />
                                         }
                                     </MudItem>
-                        </MudCardContent>
-                    </MudCard>
+                                </MudItem>
+                            </MudTabPanel>
+
+                            @if (response.IsDisplayAchievement)
+                            {
+                                <MudTabPanel Text="Achievement Panel">
+                                    <MudItem style="text-align: center; position:relative;">
+                                        @* Achievement panel Text *@
+                                        <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;">
+                                            @* First row *@
+                                            <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>
+                                                </MudItem>
+                                            </MudItem>
+                                            @* Second row *@
+                                            <MudItem Style="position:absolute; height:18%; width:100%; top:30%">
+                                                <MudItem Class="nameplateTextLeft">
+                                                    <MudText Class="nameplateText nameplateTextOutline">@scoresArray[1]</MudText>
+                                                    <MudText Class="nameplateText">@scoresArray[1]</MudText>
+                                                </MudItem>
+                                                <MudItem Class="nameplateTextCenter">
+                                                    <MudText Class="nameplateText nameplateTextOutline">@scoresArray[2]</MudText>
+                                                    <MudText Class="nameplateText">@scoresArray[2]</MudText>
+                                                </MudItem>
+                                                <MudItem Class="nameplateTextRight">
+                                                    <MudText Class="nameplateText nameplateTextOutline">@scoresArray[3]</MudText>
+                                                    <MudText Class="nameplateText">@scoresArray[3]</MudText>
+                                                </MudItem>
+                                            </MudItem>
+                                            @* Third row *@
+                                            <MudItem Style="position:absolute; height:18%; width:100%; top:49%">
+                                                <MudItem Class="nameplateTextLeft">
+                                                    <MudText Class="nameplateText nameplateTextOutline">@scoresArray[4]</MudText>
+                                                    <MudText Class="nameplateText">@scoresArray[4]</MudText>
+                                                </MudItem>
+                                                <MudItem Class="nameplateTextCenter">
+                                                    <MudText Class="nameplateText nameplateTextOutline">@scoresArray[5]</MudText>
+                                                    <MudText Class="nameplateText">@scoresArray[5]</MudText>
+                                                </MudItem>
+                                                <MudItem Class="nameplateTextRight">
+                                                    <MudText Class="nameplateText nameplateTextOutline">@scoresArray[6]</MudText>
+                                                    <MudText Class="nameplateText">@scoresArray[6]</MudText>
+                                                </MudItem>
+                                            </MudItem>
+                                            @* Fourth row (Crowns) *@
+                                            <MudItem Style="position:absolute; height:18%; width:100%; top:69%">
+                                                <MudItem Class="nameplateTextLeft">
+                                                    <MudText Class="nameplateText nameplateTextOutline">@scoresArray[7]</MudText>
+                                                    <MudText Class="nameplateText">@scoresArray[7]</MudText>
+                                                </MudItem>
+                                                <MudItem Class="nameplateTextCenter">
+                                                    <MudText Class="nameplateText nameplateTextOutline">@scoresArray[8]</MudText>
+                                                    <MudText Class="nameplateText">@scoresArray[8]</MudText>
+                                                </MudItem>
+                                                <MudItem Class="nameplateTextRight">
+                                                    <MudText Class="nameplateText nameplateTextOutline">@scoresArray[9]</MudText>
+                                                    <MudText Class="nameplateText">@scoresArray[9]</MudText>
+                                                </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") />
+                                    </MudItem>
+                                </MudTabPanel>
+                            }
+                        </MudTabs>
+
+                    </MudPaper>
                     <MudButton Disabled="@isSavingOptions"
                                OnClick="SaveOptions"
                                Variant="Variant.Filled"
@@ -377,7 +446,6 @@
                         }
                     </MudButton>
                 </MudStack>
-
             </MudItem>
         </MudGrid>
     }
@@ -386,11 +454,18 @@
 @code {
     private async Task UpdateMyDonName()
     {
-        @if (response is not null) await Js.InvokeVoidAsync("updateMyDonName", response.MyDonName);
+        @if (response is not null) await Js.InvokeVoidAsync("updateMyDonNameText", response.MyDonName);
     }
 
     private async Task UpdateTitle()
     {
-        @if (response is not null) await Js.InvokeVoidAsync("updateTitle", response.Title);
+        @if (response is not null) await 
+    Js.InvokeVoidAsync("updateTitleText", response.Title);
+    }
+
+    private async Task UpdateScoreboard(Difficulty difficulty)
+    {
+        UpdateScores(difficulty);
+        await Js.InvokeVoidAsync("updateScoreboardText", scoresArray);
     }
 }

TaikoWebUI/Pages/Profile.razor.cs

@@ -1,6 +1,8 @@
 using Microsoft.AspNetCore.Http;
+using SharedProject.Enums;
 using System.Linq;
 using TaikoWebUI.Pages.Dialogs;
+using static MudBlazor.CategoryTypes;
 
 namespace TaikoWebUI.Pages;
 
@@ -9,6 +11,8 @@ public partial class Profile
     [Parameter]
     public int Baid { get; set; }
 
+    private SongBestResponse? songresponse;
+
     private UserSetting? response;
 
     private bool isSavingOptions;
@@ -169,6 +173,10 @@ public partial class Profile
         new BreadcrumbItem("Users", href: "/Users"),
     };
 
+    private Dictionary<Difficulty, List<SongBestData>> songBestDataMap = new();
+
+    private Difficulty highestDifficulty = Difficulty.Easy;
+
     private List<int> costumeFlagArraySizes = new();
 
     private List<uint> unlockedHeadCostumes = new();
@@ -177,11 +185,14 @@ public partial class Profile
     private List<uint> unlockedKigurumiCostumes = new();
     private List<uint> unlockedPuchiCostumes = new();
 
+    private int[] scoresArray = new int[10];
+
     protected override async Task OnInitializedAsync()
     {
         await base.OnInitializedAsync();
         isSavingOptions = false;
         response = await Client.GetFromJsonAsync<UserSetting>($"api/UserSettings/{Baid}");
+        response.ThrowIfNull();
 
         breadcrumbs.Add(new BreadcrumbItem($"User: {Baid}", href: null, disabled: true));
         breadcrumbs.Add(new BreadcrumbItem("Profile", href: $"/Users/{Baid}/Profile", disabled: false));
@@ -196,6 +207,35 @@ public partial class Profile
         }
 
         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)));
+        }
+
+        for (int i = 0; i < (int)Difficulty.UraOni; i++)
+            if (songBestDataMap.TryGetValue((Difficulty)i, out var values))
+            {
+                highestDifficulty = (Difficulty)i;
+            }
+
+
+        UpdateScores(response.AchievementDisplayDifficulty);
     }
 
     private async Task SaveOptions()
@@ -205,7 +245,63 @@ public partial class Profile
         isSavingOptions = false;
     }
 
-    public static string ImageOrDefault(string file, uint id, string defaultfile)
+    private void UpdateScores(Difficulty difficulty)
+    {
+        //Console.WriteLine("Updating difficulty : " + (int)difficulty);
+        response.ThrowIfNull();
+        response.AchievementDisplayDifficulty = difficulty;
+        scoresArray = new int[10];
+
+        if (difficulty is Difficulty.None) difficulty = highestDifficulty;
+
+        if (songBestDataMap.TryGetValue(difficulty, out var values))
+        {
+            foreach (var value in values)
+            {
+                //Console.WriteLine("Updating for songId : " + value.SongId);
+                switch (value.BestScoreRank)
+                {
+                    case ScoreRank.Dondaful:
+                        scoresArray[0]++;
+                        break;
+                    case ScoreRank.Gold:
+                        scoresArray[1]++;
+                        break;
+                    case ScoreRank.Sakura:
+                        scoresArray[2]++;
+                        break;
+                    case ScoreRank.Purple:
+                        scoresArray[3]++;
+                        break;
+                    case ScoreRank.White:
+                        scoresArray[4]++;
+                        break;
+                    case ScoreRank.Bronze:
+                        scoresArray[5]++;
+                        break;
+                    case ScoreRank.Silver:
+                        scoresArray[6]++;
+                        break;
+                }
+
+                switch (value.BestCrown)
+                {
+                    case CrownType.Clear:
+                        scoresArray[7]++;
+                        break;
+                    case CrownType.Gold:
+                        scoresArray[8]++;
+                        break;
+                    case CrownType.Dondaful:
+                        scoresArray[9]++;
+                        break;
+                }
+            }
+
+        }
+    }
+
+    public static string CostumeOrDefault(string file, uint id, string defaultfile)
     {
         var path = "/images/Costumes/";
         var filename = file + "-" + id.ToString().PadLeft(4, '0');

TaikoWebUI/wwwroot/css/app.css

@@ -104,4 +104,42 @@ a, .btn-link {
     .loading-progress-text:after {
         content: var(--blazor-load-percentage-text, "Loading");
     }
-    /* Change text to "Ok" when loading is complete */
+
+.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;
+}
+
+.nameplateTextLeft {
+    position: absolute;
+    height: 100%;
+    width: 15%;
+    left: 19%
+}
+
+.nameplateTextCenter {
+    position: absolute;
+    height: 100%;
+    width: 15%;
+    left: 48%
+}
+
+.nameplateTextRight {
+    position: absolute;
+    height: 100%;
+    width: 15%;
+    left: 78%
+}