TaikoLocalServer/TaikoWebUI/Components/Song/PlayHistoryCard.razor

@using TaikoWebUI.Utilities;

<MudCard Outlined="true" Elevation="0">
    <MudCardHeader>
        <MudGrid Spacing="2">
            <MudItem xs="12" md="4">
                <MudText Typo="Typo.h6">@Localizer["Play History"]</MudText>
            </MudItem>
            <MudItem xs="12" md="8">
                <MudText Typo="Typo.h6">@Localizer["Total Credits Played"]:@Items.Count</MudText>
            </MudItem>
        </MudGrid>
    </MudCardHeader>
    @if (Items.Count > 0)
    {
        <MudCardContent Class="p-0">
            <MudTable Items="Items" Elevation="0" Striped="true">
                <HeaderContent>
                    <MudTh>
                        <MudTableSortLabel InitialDirection="SortDirection.Descending" T="SongHistoryData" SortBy="x => x.PlayTime">
                            @Localizer["Play Time"]
                        </MudTableSortLabel>
                    </MudTh>
                    <MudTh>
                        <MudTableSortLabel T="SongHistoryData" SortBy="x => x.Difficulty">
                            @Localizer["Difficulty"]
                        </MudTableSortLabel>
                    </MudTh>
                    <MudTh>
                        <MudTableSortLabel T="SongHistoryData" SortBy="x => x.Crown">
                            @Localizer["Crown"]
                        </MudTableSortLabel>
                    </MudTh>
                    <MudTh>
                        <MudTableSortLabel T="SongHistoryData" SortBy="x => x.ScoreRank">
                            @Localizer["Rank"]
                        </MudTableSortLabel>
                    </MudTh>
                    <MudTh>
                        <MudTableSortLabel T="SongHistoryData" SortBy="x => x.Score">
                            @Localizer["Score"]
                        </MudTableSortLabel>
                    </MudTh>
                    <MudTh>
                        <MudTableSortLabel T="SongHistoryData" SortBy="x => x.GoodCount">
                            @Localizer["Good"]
                        </MudTableSortLabel>
                    </MudTh>
                    <MudTh>
                        <MudTableSortLabel T="SongHistoryData" SortBy="x => x.OkCount">
                            @Localizer["OK"]
                        </MudTableSortLabel>
                    </MudTh>
                    <MudTh>
                        <MudTableSortLabel T="SongHistoryData" SortBy="x => x.MissCount">
                            @Localizer["Bad"]
                        </MudTableSortLabel>
                    </MudTh>
                    <MudTh>
                        <MudTableSortLabel T="SongHistoryData" SortBy="x => x.DrumrollCount">
                            @Localizer["Drumroll"]
                        </MudTableSortLabel>
                    </MudTh>
                    <MudTh>
                        <MudTableSortLabel T="SongHistoryData" SortBy="x => x.ComboCount">
                            @Localizer["MAX Combo"]
                        </MudTableSortLabel>
                    </MudTh>
                </HeaderContent>
                <RowTemplate>
                    <MudTd>@context.PlayTime.ToString(Localizer["DateFormat"])</MudTd>
                    <MudTd>
                        <img src="@ScoreUtils.GetDifficultyIcon(context.Difficulty)" alt="@context.Difficulty" title="@context.Difficulty" style="@IconStyle"/>
                    </MudTd>
                    <MudTd>
                        <img src="@($"/images/crown_{context.Crown}.png")" alt="@(ScoreUtils.GetCrownText(context.Crown))" title="@(ScoreUtils.GetCrownText(context.Crown))" style="@IconStyle"/>
                    </MudTd>
                    <MudTd>
                        @if (context.ScoreRank is not ScoreRank.None)
                        {
                            <img src="@($"/images/rank_{context.ScoreRank}.png")" alt="@(ScoreUtils.GetRankText(context.ScoreRank))" title="@(ScoreUtils.GetRankText(context.ScoreRank))" style="@IconStyle"/>
                        }
                    </MudTd>
                    <MudTd>@context.Score</MudTd>
                    <MudTd>@context.GoodCount</MudTd>
                    <MudTd>@context.OkCount</MudTd>
                    <MudTd>@context.MissCount</MudTd>
                    <MudTd>@context.DrumrollCount</MudTd>
                    <MudTd>@context.ComboCount</MudTd>
                </RowTemplate>
            </MudTable>
        </MudCardContent>
    }
    else
    {
        <MudCardContent>
            <MudText Typo="Typo.body2" Class="pt-4 pb-8" Color="Color.Surface" Align="Align.Center">
                @Localizer["No Play History Found"]
            </MudText>
        </MudCardContent>
    }
</MudCard>

@code {
    [Parameter] public List<SongHistoryData> Items { get; set; } = new();
    private const string IconStyle = "width:25px; height:25px;";
}