TaikoLocalServer/TaikoWebUI/Pages/HighScores.razor

@inject IGameDataService GameDataService
@inject HttpClient Client
@inject LoginService LoginService

@page "/Users/{baid:int}/HighScores"

<MudBreadcrumbs Items="breadcrumbs" Class="px-0"></MudBreadcrumbs>

<h1>High Scores</h1>
<MudText Typo="Typo.caption">User: @Baid</MudText>


<MudGrid Class="my-8">
    @if (response is null)
    {
        <MudItem xs="12">
            <MudText Align="Align.Center">
                No data.
            </MudText>
        </MudItem>
    }
    else
    {
        @if (LoginService.LoginRequired && (!LoginService.IsLoggedIn || (LoginService.GetLoggedInUser().Baid != Baid && !LoginService.IsAdmin)))
        {
            <MudItem xs="12">
                <MudText Align="Align.Center" Class="my-8">
                    Please log in by clicking on "Users" tab first.
                </MudText>
            </MudItem>
        }
        else
        {
            <MudItem xs="12">
                <MudTabs Elevation="0" Border="true" Rounded="true" ApplyEffectsToContainer="true" Outlined="true" Class="mb-10">
                    @foreach (var difficulty in Enum.GetValues<Difficulty>())
                    {
                        @if (difficulty is not Difficulty.None)
                        {
                            <MudTabPanel Text="@GetDifficultyTitle(difficulty)"
                                         Icon="@GetDifficultyIcon(difficulty)">
                                @if (songBestDataMap.TryGetValue(difficulty, out var value))
                                {
                                    <MudDataGrid Items="@value"
                                                 ColumnResizeMode="ResizeMode.None" RowsPerPage="25" Elevation="0">
                                        <Columns>
                                            <TemplateColumn T="SongBestData" Title="Song" StickyLeft="true">
                                                <CellTemplate>
                                                    <MudStack Row="true" Justify="Justify.SpaceBetween" AlignItems="AlignItems.Center">
                                                        <div style="width:300px">
                                                            <MudText Typo="Typo.body2" Style="font-weight:bold">@context.Item.MusicName</MudText>
                                                            <MudText Typo="Typo.caption">@context.Item.MusicArtist</MudText>
                                                        </div>
                                                        <div>
                                                            <MudToggleIconButton Toggled="@context.Item.IsFavorite"
                                                                                 ToggledChanged="@(async () => await OnFavoriteToggled(context.Item))"
                                                                                 Icon="@Icons.Material.Filled.FavoriteBorder" Color="@Color.Secondary"
                                                                                 ToggledIcon="@Icons.Material.Filled.Favorite" ToggledColor="@Color.Secondary"
                                                                                 Size="Size.Small"
                                                                                 ToggledSize="Size.Small"
                                                                                 Title="Add to favorites" ToggledTitle="Remove from favorites"/>
                                                        </div>
                                                    </MudStack>
                                                </CellTemplate>
                                            </TemplateColumn>
                                            <TemplateColumn T="SongBestData" Title="Level" Sortable="false">
                                                <CellTemplate>
                                                    <MudStack Row="true" Spacing="1" AlignItems="AlignItems.Center">
                                                        <MudIcon Icon="@Icons.Material.Filled.Star" Size="Size.Small" />
                                                        <MudText Typo="Typo.caption" Style="line-height:1;margin-top:2px;margin-right:2px;">@GameDataService.GetMusicStarLevel(@context.Item.SongId, difficulty)</MudText>
                                                    </MudStack>
                                                </CellTemplate>
                                            </TemplateColumn>
                                            <TemplateColumn T="SongBestData" Title="Genre"
                                                            Sortable="false" Filterable="true">
                                                <CellTemplate>
                                                    <MudChip Style="@GetGenreStyle(context.Item.Genre)"
                                                             Size="Size.Small">
                                                        @GetGenreTitle(context.Item.Genre)
                                                    </MudChip>
                                                </CellTemplate>
                                            </TemplateColumn>
                                            <PropertyColumn Property="data => data.BestScore" Title="Best Score" />
                                            <TemplateColumn T="SongBestData" Title="Best Crown">
                                                <CellTemplate>
                                                    <img src="@($"/images/crown_{context.Item.BestCrown}.png")" alt="@(GetCrownText(context.Item.BestCrown))" title="@(GetCrownText(context.Item.BestCrown))" style="@IconStyle" />
                                                </CellTemplate>
                                            </TemplateColumn>
                                            <TemplateColumn T="SongBestData" Title="Best Rank" Sortable="false">
                                                <CellTemplate>
                                                    @if (context.Item.BestScoreRank is not ScoreRank.None)
                                                    {
                                                        <img src="@($"/images/rank_{context.Item.BestScoreRank}.png")" alt="@(GetRankText(context.Item.BestScoreRank))" title="@(GetRankText(context.Item.BestScoreRank))" style="@IconStyle" />
                                                    }
                                                </CellTemplate>
                                            </TemplateColumn>
                                            <PropertyColumn Property="data => data.GoodCount" Title="Good" Sortable="false" />
                                            <PropertyColumn Property="data => data.OkCount" Title="OK" Sortable="false" />
                                            <PropertyColumn Property="data => data.MissCount" Title="Bad" Sortable="false" />
                                            <PropertyColumn Property="data => data.DrumrollCount" Title="Drumroll" Sortable="false"/>
                                            <PropertyColumn Property="data => data.ComboCount" Title="MAX Combo" Sortable="false" />
                                            <TemplateColumn T="SongBestData" Title="AI Battle Data">
                                                <CellTemplate>
                                                    <MudButton Variant="Variant.Outlined" Size="Size.Small" 
                                                               OnClick="@(() => ToggleShowAiData(context.Item))" 
                                                               Disabled="@(!IsAiDataPresent(context.Item))">
                                                        @(context.Item.ShowAiData ? "Hide" : "Show")
                                                    </MudButton>
                                                </CellTemplate>
                                            </TemplateColumn>
                                            <PropertyColumn Property="data => data.LastPlayTime" Title="Last Played" Hideable="true" />
                                            <PropertyColumn Property="data => data.PlayCount" Title="Total Plays" Hideable="true" />
                                            <PropertyColumn Property="data => data.ClearCount" Title="Total Clears" Hideable="true" />
                                            <PropertyColumn Property="data => data.FullComboCount" Title="Total Full Combos" Hideable="true" />
                                            <PropertyColumn Property="data => data.PerfectCount" Title="Total Donderful Combos" Hideable="true" />
                                        </Columns>
                                        <ChildRowContent>
                                            @if (context.Item.ShowAiData)
                                            {
                                                <tr>
                                                    <td colspan="1" class="pa-3 ai-battle-td">
                                                        <MudText Typo="Typo.body2" Style="font-weight: bold">
                                                            AI Battle Data
                                                        </MudText>
                                                    </td>
                                                    <td colspan="16">
                                                        <MudTable Elevation="0" ReadOnly="true"
                                                                  Items="@context.Item.AiSectionBestData" Context="aiSectionContext">
                                                            <HeaderContent>
                                                                <MudTh>Section No.</MudTh>
                                                                <MudTh>Result</MudTh>
                                                                <MudTh>Score</MudTh>
                                                                <MudTh>Crown</MudTh>
                                                                <MudTh>Good</MudTh>
                                                                <MudTh>OK</MudTh>
                                                                <MudTh>Bad</MudTh>
                                                                <MudTh>Drumroll</MudTh>
                                                            </HeaderContent>
                                                            <RowTemplate>
                                                                <MudTd>@(aiSectionContext.SectionIndex + 1)</MudTd>
                                                                <MudTd>
                                                                    @if (@aiSectionContext.IsWin) {
                                                                        <img src="@($"/images/ai_Win.png")" alt="Win" title="Win" style="@IconStyle" />
                                                                    }
                                                                    else
                                                                    {
                                                                        <img src="@($"/images/ai_Lose.png")" alt="Lose" title="Lose" style="@IconStyle" />
                                                                    }
                                                                </MudTd>
                                                                <MudTd>@aiSectionContext.Score</MudTd>
                                                                <MudTd>
                                                                    <img src="@($"/images/ai_crown_{aiSectionContext.Crown}.png")" alt="@(GetCrownText(aiSectionContext.Crown))" title="@(GetCrownText(aiSectionContext.Crown))" style="@IconStyle" />
                                                                </MudTd>
                                                                <MudTd>@aiSectionContext.GoodCount</MudTd>
                                                                <MudTd>@aiSectionContext.OkCount</MudTd>
                                                                <MudTd>@aiSectionContext.MissCount</MudTd>
                                                                <MudTd>@aiSectionContext.DrumrollCount</MudTd>
                                                            </RowTemplate>
                                                        </MudTable>
                                                    </td>
                                                </tr>
                                            }
                                        </ChildRowContent>
                                        <PagerContent>
                                            <MudDataGridPager T="SongBestData"/>
                                        </PagerContent>
                                    </MudDataGrid>
                                }
                                else
                                {
                                    <MudGrid>
                                        <MudItem xs="12">
                                            <MudText Align="Align.Center" Class="my-16">
                                                No data for selected difficulty.
                                            </MudText>
                                        </MudItem>
                                    </MudGrid>
                                }
                            </MudTabPanel>
                        }
                    }
                </MudTabs>
            </MudItem>
        }
    }
</MudGrid>