Leaderboard card in progress

TaikoLocalServer/Controllers/Api/SongLeaderboardData.cs

@@ -34,7 +34,7 @@ public class SongLeaderboardData(ISongLeaderboardService songLeaderboardService,
         }
 
         var leaderboard = await songLeaderboardService.GetSongLeaderboard(songId, (Difficulty)difficulty, (int)baid);
-
+        
         return Ok(new SongLeaderboardResponse
         {
             Leaderboard = leaderboard

TaikoLocalServer/Services/SongLeaderboardService.cs

@@ -79,6 +79,12 @@ public class SongLeaderboardService : ISongLeaderboardService
                 });
             }
         }
+        Console.WriteLine("Leaderboard:");
+        // log the leaderboard to the console
+        foreach (var entry in leaderboard)
+        {
+            Console.WriteLine($"Rank: {entry.Rank}, Baid: {entry.Baid}, UserName: {entry.UserName}, BestScore: {entry.BestScore}, BestRate: {entry.BestRate}, BestCrown: {entry.BestCrown}, BestScoreRank: {entry.BestScoreRank}");
+        }
 
         return leaderboard;
     }

TaikoWebUI/Components/Song/SongLeaderboardCard.razor

@@ -1,12 +1,67 @@
 @inject HttpClient Client;
+@inject Blazored.LocalStorage.ILocalStorageService LocalStorage;
+
 @using TaikoWebUI.Utilities;
 
 <MudCard Outlined="true" Elevation="0">
     <MudCardHeader>
-        <MudGrid Spacing="2">
-            <MudItem xs="12">
+        <MudGrid Spacing="2" Class="align-center">
+            <MudItem xs="12" md="6">
                 <MudText Typo="Typo.h6">@Localizer["Leaderboard"]</MudText>
             </MudItem>
+
+            <MudItem xs="12" md="6">
+                <MudSelect Dense="true" T="string" Label="@Localizer["Difficulty"]" Variant="Variant.Outlined" Margin="Margin.Dense" ValueChanged="(value) => OnDifficultyChange(value)" Value="SelectedDifficulty">
+                    @foreach (var difficulty in Enum.GetValues(typeof(Difficulty)))
+                    {
+                        var difficultyValue = (Difficulty)difficulty;
+                        <MudSelectItem Value="@difficultyValue.ToString()">
+                            @ScoreUtils.GetDifficultyTitle(difficultyValue)
+                        </MudSelectItem>
+                    }
+                </MudSelect>
+            </MudItem>
         </MudGrid>
     </MudCardHeader>
+    <MudCardContent>
+        @if (response == null)
+        {
+            <MudCircularProgress />
+        }
+        else
+        {
+            <MudTable Items="@response.Leaderboard" Class="leaderboard-table" Elevation="0" Outlined="false" Dense="true" Striped="true">
+                <HeaderContent>
+                    <MudTh>@Localizer["Rank"]</MudTh>
+                    <MudTh>@Localizer["Player"]</MudTh>
+                    <MudTh>@Localizer["Score"]</MudTh>
+                    <MudTh>@Localizer["Rank"]</MudTh>
+                    <MudTh>@Localizer["Crown"]</MudTh>
+                </HeaderContent>
+                <RowTemplate>
+                    <MudTd>@context.Rank</MudTd>
+                    <MudTd>
+                        <MudStack Row="true" AlignItems="AlignItems.Baseline">
+                            <MudText Typo="Typo.body1">@context.UserName</MudText>
+                            <MudText Typo="Typo.caption">(@Localizer["ID"]: @context.Baid)</MudText>
+                        </MudStack>
+                    </MudTd>
+                    <MudTd>@context.BestScore</MudTd>
+                    <MudTd>
+                        @if (context.BestScoreRank is not ScoreRank.None)
+                        {
+                        <img src="@($"/images/rank_{context.BestScoreRank}.png")" alt="@(ScoreUtils.GetRankText(context.BestScoreRank))" title="@(ScoreUtils.GetRankText(context.BestScoreRank))" style="@IconStyle"/>
+                        }
+                        else
+                        {
+                            <MudText Typo="Typo.body1">—</MudText>
+                        }  
+                    </MudTd>
+                    <MudTd>
+                        <img src="@($"/images/crown_{context.BestCrown}.png")" alt="@(ScoreUtils.GetCrownText(context.BestCrown))" title="@(ScoreUtils.GetCrownText(context.BestCrown))" style="@IconStyle"/>
+                    </MudTd>
+                </RowTemplate>
+            </MudTable>
+        }
+    </MudCardContent>
 </MudCard>

TaikoWebUI/Components/Song/SongLeaderboardCard.razor.cs

@@ -1,10 +1,10 @@
 
-
 namespace TaikoWebUI.Components.Song;
 
 public partial class SongLeaderboardCard
 {
-    private SongLeaderboardResponse? response;
+    private SongLeaderboardResponse? response = null;
+    private const string IconStyle = "width:25px; height:25px;";
     
     [Parameter]
     public int SongId { get; set; }
@@ -13,7 +13,9 @@ public partial class SongLeaderboardCard
     public int Baid { get; set; }
 
     [Parameter] 
-    public Difficulty Difficulty { get; set; } = Difficulty.Easy;
+    public Difficulty Difficulty { get; set; } = Difficulty.Hard;
+
+    private string SelectedDifficulty { get; set; } = "Hard";
     
     protected override async Task OnInitializedAsync()
     {
@@ -21,8 +23,13 @@ public partial class SongLeaderboardCard
         
         response = await Client.GetFromJsonAsync<SongLeaderboardResponse>($"api/SongLeaderboardData/{(uint)Baid}/{(uint)SongId}/{(uint)Difficulty}");
         response.ThrowIfNull();
-        
-        // log the leaderboard
-        Console.WriteLine(response.Leaderboard);
+    }
+    
+    private async Task OnDifficultyChange(string difficulty)
+    {
+        SelectedDifficulty = difficulty;
+        Difficulty = Enum.Parse<Difficulty>(SelectedDifficulty);
+        response = await Client.GetFromJsonAsync<SongLeaderboardResponse>($"api/SongLeaderboardData/{(uint)Baid}/{(uint)SongId}/{(uint)Difficulty}");
+        response.ThrowIfNull();
     }
 }

TaikoWebUI/Components/UserCard.razor

@@ -26,7 +26,7 @@
                         <MudChip Variant="Variant.Outlined" Color="Color.Info" Size="Size.Small" Icon="@Icons.Material.TwoTone.AdminPanelSettings">@Localizer["Admin"]</MudChip>
                     }
                 </div>
-                <MudText Typo="Typo.caption">@Localizer["User"] BAID: @User?.Baid</MudText>
+                <MudText Typo="Typo.caption">@Localizer["User ID"]: @User?.Baid</MudText>
                 </CardHeaderContent>
                 <CardHeaderActions>
                     <MudMenu Icon="@Icons.Material.Filled.MoreVert" Dense="true" AnchorOrigin="Origin.BottomLeft"

TaikoWebUI/Pages/Song.razor

@@ -2,7 +2,6 @@
 
 @using Blazored.LocalStorage
 @using TaikoWebUI.Components.Song
-
 @inject IGameDataService GameDataService
 @inject HttpClient Client
 @inject AuthService AuthService
@@ -21,13 +20,12 @@ else
         <MudText Typo="Typo.h5">@songTitle</MudText>
         <MudText Typo="Typo.body2">@songArtist</MudText>
         <MudGrid Class="my-4 pb-10">
-            <MudItem xs="12">
-                <PlayHistoryCard Items="@songHistoryData" />
-            </MudItem>
-            
             <MudItem xs="12">
                 <SongLeaderboardCard SongId="@SongId" Baid="@Baid" />
             </MudItem>
+            <MudItem xs="12">
+                <PlayHistoryCard Items="@songHistoryData" />
+            </MudItem>
         </MudGrid>
     }
 }

TaikoWebUI/Pages/SongList.razor.cs

@@ -32,8 +32,6 @@ public partial class SongList
         musicDetailDictionary = await GameDataService.GetMusicDetailDictionary();
 
         SongNameLanguage = await LocalStorage.GetItemAsync<string>("songNameLanguage");
-        
-        Console.WriteLine("Language: " + SongNameLanguage);
 
         if (AuthService.IsLoggedIn && !AuthService.IsAdmin)
         {