Taiko_Stuff/TaikoLocalServer
1
0
Fork 0
mirror of synced 2024-11-27 16:10:53 +01:00
Code Releases Activity

Editing table styling, added search on highscores

Browse Source
This commit is contained in:
Farewell_ 2024-10-31 12:40:30 +01:00
parent 2c0f43717b
commit 499312a02e
8 changed files with 161 additions and 132 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
TaikoWebUI/Components/MainLayout.razor
View File

@ -2,6 +2,7 @@
@inject Blazored.LocalStorage.ILocalStorageService LocalStorage
@inject AuthService AuthService
@inject BreadcrumbsStateContainer BreadcrumbsStateContainer
@inject IOptions<WebUiSettings> Settings
@using Microsoft.Extensions.Options;
@using TaikoWebUI.Settings;
@ -29,7 +30,7 @@
<NavMenu />
</MudDrawer>
<MudMainContent>
<MudContainer MaxWidth="MaxWidth.ExtraLarge" Class="my-8 pb-8">
<MudContainer MaxWidth=Settings.Value.MaxWidth Class="my-8 pb-8">
@Body
<MudScrollToTop>

2
TaikoWebUI/Pages/DaniDojo.razor
View File

@ -27,7 +27,7 @@ else
<MudGrid Class="my-4 pb-10">
<MudItem xs="12">
<MudPaper Elevation="0" Outlined="true">
<MudTabs ActivePanelIndex="0" Rounded="true" Border="true" PanelClass="pa-8">
<MudTabs ActivePanelIndex="0" Rounded="true" Border="true" MinimumTabWidth="100px" PanelClass="pa-8">
@foreach (var danId in danMap.Keys)
{
var danData = danMap[danId];

198
TaikoWebUI/Pages/HighScores.razor
View File

@ -25,7 +25,7 @@
else
{
<MudItem xs="12">
<MudTabs Elevation="0" Border="true" Rounded="true" ApplyEffectsToContainer="true" Outlined="true" ActivePanelIndexChanged="@(async (index) => await OnTabChanged(index))" ActivePanelIndex="@selectedDifficultyTab">
<MudTabs Elevation="0" Border="true" MinimumTabWidth="100px" Rounded="true" ApplyEffectsToContainer="true" Outlined="true" ActivePanelIndexChanged="@(async (index) => await OnTabChanged(index))" ActivePanelIndex="@selectedDifficultyTab">
@foreach (var difficulty in Enum.GetValues<Difficulty>())
{
@if (difficulty is not Difficulty.None)
@ -35,99 +35,99 @@
@if (songBestDataMap.TryGetValue(difficulty, out var value))
{
// Rows per page 25
<MudTable Items="@value" Elevation="0" Striped="false" Outlined="true" RowsPerPage="25" Breakpoint=Breakpoint.None >
<MudTable Items="@value" Elevation="0" Striped="false" Outlined="true" RowsPerPage="25" Breakpoint=Breakpoint.None Filter="@FilterSongs">
<ToolBarContent>
<MudGrid Spacing="2">
<MudItem xs="12" md="8">
<MudTextField @bind-Value="Search"
Placeholder="@Localizer["Search by Title or Artist"]"
Variant="Variant.Outlined"
Clearable="true"
Immediate="true"
Margin="Margin.Dense"
Adornment="Adornment.Start"
AdornmentIcon="@Icons.Material.Filled.Search"
IconSize="Size.Medium" />
</MudItem>
<MudItem xs="12" md="4">
<MudSelect @bind-Value="GenreFilter" T="string" Label="@Localizer["Filter by Genre"]" Variant="Variant.Outlined" Margin="Margin.Dense" Clearable="true">
@foreach (var genre in Enum.GetValues(typeof(SongGenre)))
{
var genreValue = (SongGenre)genre;
<MudSelectItem Value="@genreValue.ToString()" Label="@Localizer[$"Key_{genreValue}"]">
@ScoreUtils.GetGenreTitle(genreValue)
</MudSelectItem>
}
</MudSelect>
</MudItem>
</MudGrid>
</ToolBarContent>
<HeaderContent>
<MudTh>
<MudTh Style="width: 400px">
<MudTableSortLabel T="SongBestData" SortBy="x => GameDataService.GetMusicNameBySongId(musicDetailDictionary, x.SongId, CultureInfo.CurrentCulture.ToString())">
<MudText>@Localizer["Song Name"]</MudText>
</MudTableSortLabel>
</MudTh>
<MudTh>
<MudTableSortLabel T="SongBestData" SortBy="x => GameDataService.GetMusicStarLevel(musicDetailDictionary, x.SongId, difficulty) * 1000000 + x.BestScore">
<MudText>@Localizer["Level"]</MudText>
<MudText Typo="Typo.body2">@Localizer["Song Title / Artist"]</MudText>
</MudTableSortLabel>
</MudTh>
<MudTh>
<MudTableSortLabel T="SongBestData" SortBy="x => (int)x.Genre * 1000000 + x.BestScore">
<MudText>@Localizer["Genre"]</MudText>
<MudText Typo="Typo.body2">@Localizer["Genre"]</MudText>
</MudTableSortLabel>
</MudTh>
<MudTh>
<MudTableSortLabel T="SongBestData" SortBy="x => GameDataService.GetMusicStarLevel(musicDetailDictionary, x.SongId, difficulty) * 1000000 + x.BestScore">
<MudText Typo="Typo.body2">@Localizer["Level"]</MudText>
</MudTableSortLabel>
</MudTh>
<MudTh>
<MudTableSortLabel T="SongBestData" SortBy="x => x.BestScore">
<MudText>@Localizer["Best Score"]</MudText>
<MudText Typo="Typo.body2">@Localizer["Best Score"]</MudText>
</MudTableSortLabel>
</MudTh>
<MudTh>
<MudTableSortLabel T="SongBestData" SortBy="x => (int)x.BestCrown * 1000000 + x.BestScore">
<MudText>@Localizer["Best Crown"]</MudText>
<MudText Typo="Typo.body2">@Localizer["Best Crown"]</MudText>
</MudTableSortLabel>
</MudTh>
<MudTh>
<MudTableSortLabel T="SongBestData" SortBy="x => (int)x.BestScoreRank * 1000000 + x.BestScore">
<MudText>@Localizer["Best Rank"]</MudText>
</MudTableSortLabel>
</MudTh>
<MudTh>
<MudTableSortLabel T="SongBestData" SortBy="x => x.GoodCount">
<MudText>@Localizer["Good"]</MudText>
</MudTableSortLabel>
</MudTh>
<MudTh>
<MudTableSortLabel T="SongBestData" SortBy="x => x.OkCount">
<MudText>@Localizer["OK"]</MudText>
</MudTableSortLabel>
</MudTh>
<MudTh>
<MudTableSortLabel T="SongBestData" SortBy="x => x.MissCount">
<MudText>@Localizer["Bad"]</MudText>
</MudTableSortLabel>
</MudTh>
<MudTh>
<MudTableSortLabel T="SongBestData" SortBy="x => x.DrumrollCount">
<MudText>@Localizer["Drumroll"]</MudText>
</MudTableSortLabel>
</MudTh>
<MudTh>
<MudTableSortLabel T="SongBestData" SortBy="x => x.ComboCount">
<MudText>@Localizer["MAX Combo"]</MudText>
<MudText Typo="Typo.body2">@Localizer["Best Rank"]</MudText>
</MudTableSortLabel>
</MudTh>
@* <MudTh>
<MudTableSortLabel T="SongBestData" SortBy="x => x.GoodCount">
<MudText Typo="Typo.body2">@Localizer["Good"]</MudText>
</MudTableSortLabel>
</MudTh>
<MudTh>
<MudTableSortLabel T="SongBestData" SortBy="x => x.OkCount">
<MudText Typo="Typo.body2">@Localizer["OK"]</MudText>
</MudTableSortLabel>
</MudTh>
<MudTh>
<MudTableSortLabel T="SongBestData" SortBy="x => x.MissCount">
<MudText Typo="Typo.body2">@Localizer["Bad"]</MudText>
</MudTableSortLabel>
</MudTh>
<MudTh>
<MudTableSortLabel T="SongBestData" SortBy="x => x.DrumrollCount">
<MudText Typo="Typo.body2">@Localizer["Drumroll"]</MudText>
</MudTableSortLabel>
</MudTh>
<MudTh>
<MudTableSortLabel T="SongBestData" SortBy="x => x.ComboCount">
<MudText Typo="Typo.body2">@Localizer["MAX Combo"]</MudText>
</MudTableSortLabel>
</MudTh> *@
<MudTh>
<MudTableSortLabel T="SongBestData" InitialDirection="SortDirection.Descending" SortBy="x => x.PlayTime">
<MudText>@Localizer["Played"]</MudText>
<MudText Typo="Typo.body2">@Localizer["Played"]</MudText>
</MudTableSortLabel>
</MudTh>
@* <MudTh>
<MudTableSortLabel T="SongBestData" SortBy="x => x.PlayCount">
<MudText>@Localizer["Total Credits Played"]</MudText>
</MudTableSortLabel>
</MudTh>
<MudTh>
<MudTableSortLabel T="SongBestData" SortBy="x => x.ClearCount">
<MudText>@Localizer["Total Clears"]</MudText>
</MudTableSortLabel>
</MudTh>
<MudTh>
<MudTableSortLabel T="SongBestData" SortBy="x => x.FullComboCount">
<MudText>@Localizer["Total Full Combos"]</MudText>
</MudTableSortLabel>
</MudTh>
<MudTh>
<MudTableSortLabel T="SongBestData" SortBy="x => x.PerfectCount">
<MudText>@Localizer["Total Donderful Combos"]</MudText>
</MudTableSortLabel>
</MudTh> *@
</HeaderContent>
<RowTemplate>
<MudTd Style="text-align: initial !important;">
<MudStack Row="true" Justify="Justify.SpaceBetween" AlignItems="AlignItems.Center">
<div style="width:400px">
<a href="@($"/Users/{Baid}/Songs/{context.SongId}")">
<MudText Typo="Typo.body2" Style="font-weight:bold">@context.MusicName</MudText>
<MudText Typo="Typo.caption">@context.MusicArtist</MudText>
</a>
</div>
@* <div>
<div>
<MudToggleIconButton Toggled="@context.IsFavorite"
ToggledChanged="@(async () => await OnFavoriteToggled(context))"
Icon="@Icons.Material.Filled.FavoriteBorder" Color="@Color.Secondary"
@ -135,9 +135,21 @@
Size="Size.Small"
ToggledSize="Size.Small"
Title="Add to favorites" ToggledTitle="Remove from favorites" />
</div> *@
</div>
<div style="width:400px">
<a href="@($"/Users/{Baid}/Songs/{context.SongId}")">
<MudText Typo="Typo.body2" Style="font-weight:bold">@context.MusicName</MudText>
<MudText Typo="Typo.caption">@context.MusicArtist</MudText>
</a>
</div>
</MudStack>
</MudTd>
<MudTd Style="width: 150px;">
<MudChip Style="@ScoreUtils.GetGenreStyle(context.Genre)"
Size="Size.Small">
@ScoreUtils.GetGenreTitle(context.Genre)
</MudChip>
</MudTd>
<MudTd>
<MudStack Row="true" Spacing="1" AlignItems="AlignItems.Center">
<MudIcon Icon="@Icons.Material.Filled.Star" Size="Size.Small" />
@ -145,13 +157,7 @@
</MudStack>
</MudTd>
<MudTd>
<MudChip Style="@ScoreUtils.GetGenreStyle(context.Genre)"
Size="Size.Small">
@ScoreUtils.GetGenreTitle(context.Genre)
</MudChip>
</MudTd>
<MudTd>
<MudText>@context.BestScore</MudText>
<MudText Typo="Typo.body2">@context.BestScore</MudText>
</MudTd>
<MudTd>
<img src="@($"/images/crown_{context.BestCrown}.webp")" alt="@(ScoreUtils.GetCrownText(context.BestCrown))" title="@(ScoreUtils.GetCrownText(context.BestCrown))" style="@Constants.ICON_STYLE" />
@ -162,36 +168,24 @@
<img src="@($"/images/rank_{context.BestScoreRank}.webp")" alt="@(ScoreUtils.GetRankText(context.BestScoreRank))" title="@(ScoreUtils.GetRankText(context.BestScoreRank))" style="@Constants.ICON_STYLE" />
}
</MudTd>
@* <MudTd>
<MudText Typo="Typo.body2">@context.GoodCount</MudText>
</MudTd>
<MudTd>
<MudText Typo="Typo.body2">@context.OkCount</MudText>
</MudTd>
<MudTd>
<MudText Typo="Typo.body2">@context.MissCount</MudText>
</MudTd>
<MudTd>
<MudText Typo="Typo.body2">@context.DrumrollCount</MudText>
</MudTd>
<MudTd>
<MudText Typo="Typo.body2">@context.ComboCount</MudText>
</MudTd> *@
<MudTd>
<MudText>@context.GoodCount</MudText>
<MudText Typo="Typo.body2">@context.PlayTime</MudText>
</MudTd>
<MudTd>
<MudText>@context.OkCount</MudText>
</MudTd>
<MudTd>
<MudText>@context.MissCount</MudText>
</MudTd>
<MudTd>
<MudText>@context.DrumrollCount</MudText>
</MudTd>
<MudTd>
<MudText>@context.ComboCount</MudText>
</MudTd>
<MudTd>
<MudText>@context.PlayTime</MudText>
</MudTd>
@* <MudTd>
<MudText>@context.PlayCount</MudText>
</MudTd>
<MudTd>
<MudText>@context.ClearCount</MudText>
</MudTd>
<MudTd>
<MudText>@context.FullComboCount</MudText>
</MudTd>
<MudTd>
<MudText>@context.PerfectCount</MudText>
</MudTd> *@
</RowTemplate>
<PagerContent>
<MudTablePager RowsPerPageString=@Localizer["Rows Per Page:"] />

28
TaikoWebUI/Pages/HighScores.razor.cs
View File

@ -11,6 +11,9 @@ public partial class HighScores
private int selectedDifficultyTab;
private Dictionary<uint, MusicDetail> musicDetailDictionary = new();
private string Search { get; set; } = string.Empty;
private string GenreFilter { get; set; } = string.Empty;
protected override async Task OnInitializedAsync()
{
await base.OnInitializedAsync();
@ -90,4 +93,29 @@ public partial class HighScores
selectedDifficultyTab = index;
await LocalStorage.SetItemAsync($"highScoresTab", selectedDifficultyTab);
}
private bool FilterSongs(SongBestData songData)
{
var stringsToCheck = new List<string>
{
songData.MusicName,
songData.MusicArtist,
songData.BestScore.ToString(),
songData.PlayTime.ToString(),
};
if (songData.IsFavorite) stringsToCheck.Add("Favorite");
if (!string.IsNullOrEmpty(Search) && !stringsToCheck.Any(s => s.Contains(Search, StringComparison.OrdinalIgnoreCase)))
{
return false;
}
if (!string.IsNullOrEmpty(GenreFilter) && songData.Genre != Enum.Parse<SongGenre>(GenreFilter))
{
return false;
}
return true;
}
}

29
TaikoWebUI/Pages/PlayHistory.razor
View File

@ -69,10 +69,10 @@
<ChildRowContent>
<MudTable Items="@context" T="SongHistoryData" Context="songHistoryData" Elevation="0" Striped="false" Hover="false" ReadOnly="true" Outlined="true" Class="mb-8" Breakpoint=Breakpoint.None>
<HeaderContent>
<MudTh Style="width:400px">@Localizer["Song Title / Artist"]</MudTh>
<MudTh>@Localizer["Genre"]</MudTh>
<MudTh>@Localizer["Difficulty"]</MudTh>
<MudTh>@Localizer["Level"]</MudTh>
<MudTh Style="width:500px">@Localizer["Song Name"]</MudTh>
<MudTh>@Localizer["Genre"]</MudTh>
<MudTh>@Localizer["Score"]</MudTh>
<MudTh>@Localizer["Crown"]</MudTh>
<MudTh>@Localizer["Rank"]</MudTh>
@ -83,20 +83,10 @@
<MudTh>@Localizer["MAX Combo"]</MudTh>
</HeaderContent>
<RowTemplate>
@* Difficulty rating *@
<MudTd DataLabel="Difficulty" Style="text-align:center"><MudIcon Style=@IconStyle Icon="@GetDifficultyIcon(songHistoryData.Difficulty)" /></MudTd>
@* Star rating *@
<MudTd DataLabel="Stars" Style="text-align:center">
<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;">@songHistoryData.Stars</MudText>
</MudStack>
</MudTd>
@* Song title *@
<MudTd DataLabel="Song" Style="text-align: initial !important;">
<MudStack Row="true" Spacing="1" AlignItems="AlignItems.Center" Justify="Justify.SpaceBetween">
<div>
<div style="width:400px">
<a href="@($"/Users/{Baid}/Songs/{songHistoryData.SongId}")">
<MudText Typo="Typo.body2" Style="font-weight:bold">@songHistoryData.MusicName</MudText>
<MudText Typo="Typo.caption">@songHistoryData.MusicArtist</MudText>
@ -106,10 +96,21 @@
</MudTd>
@* Genre display *@
<MudTd DataLabel="Genre">
<MudTd DataLabel="Genre" Style="width: 150px;">
<MudChip Style=@GetGenreStyle(songHistoryData.Genre) Size="Size.Small">@GetGenreTitle(songHistoryData.Genre)</MudChip>
</MudTd>
@* Difficulty rating *@
<MudTd DataLabel="Difficulty" Style="text-align:center"><MudIcon Style=@IconStyle Icon="@GetDifficultyIcon(songHistoryData.Difficulty)" /></MudTd>
@* Star rating *@
<MudTd DataLabel="Stars" Style="text-align:center">
<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;">@songHistoryData.Stars</MudText>
</MudStack>
</MudTd>
<MudTd>@(songHistoryData.Score)</MudTd>
<MudTd Style="text-align:center"><img src="@($"/images/crown_{songHistoryData.Crown}.webp")" alt="@(GetCrownText(songHistoryData.Crown))" title="@(GetCrownText(songHistoryData.Crown))" style=@IconStyle /></MudTd>
<MudTd Style="text-align:center">

24
TaikoWebUI/Pages/SongList.razor
View File

@ -54,12 +54,12 @@
</MudGrid>
</ToolBarContent>
<HeaderContent>
<MudTh>
<MudTh Style="width: 400px">
<MudTableSortLabel T="MusicDetail" SortBy="context => GameDataService.GetMusicNameBySongId(musicDetailDictionary, context.SongId, SongNameLanguage)">
@Localizer["Song Title / Artist"]
</MudTableSortLabel>
</MudTh>
<MudTh>
<MudTh Style="width: 150px;">
<MudTableSortLabel T="MusicDetail" SortBy="context => context.Genre">
@Localizer["Genre"]
</MudTableSortLabel>
@ -77,18 +77,8 @@
}
</HeaderContent>
<RowTemplate>
<MudTd Style="width:400px; text-align: initial !important;">
<MudTd Style="text-align: initial !important;">
<MudStack Row="true" Justify="Justify.SpaceBetween" AlignItems="AlignItems.Center">
<div>
<a href="@($"/Users/{Baid}/Songs/{context.SongId}")">
<MudText Typo="Typo.body2" Style="font-weight:bold">
@GameDataService.GetMusicNameBySongId(musicDetailDictionary, context.SongId, SongNameLanguage)
</MudText>
<MudText Typo="Typo.caption">
@GameDataService.GetMusicArtistBySongId(musicDetailDictionary, context.SongId, SongNameLanguage)
</MudText>
</a>
</div>
<div>
<MudToggleIconButton Toggled="@context.IsFavorite"
ToggledChanged="@(async () => await OnFavoriteToggled(context))"
@ -98,6 +88,12 @@
ToggledSize="Size.Small"
Title="Add to favorites" ToggledTitle="Remove from favorites" />
</div>
<div style="width:400px">
<a href="@($"/Users/{Baid}/Songs/{context.SongId}")">
<MudText Typo="Typo.body2" Style="font-weight:bold">@GameDataService.GetMusicNameBySongId(musicDetailDictionary, context.SongId, SongNameLanguage)</MudText>
<MudText Typo="Typo.caption">@GameDataService.GetMusicArtistBySongId(musicDetailDictionary, context.SongId, SongNameLanguage)</MudText>
</a>
</div>
</MudStack>
</MudTd>
<MudTd>
@ -113,7 +109,7 @@
<MudTd>
@if (starLevel > 0)
{
<MudStack Row="true" Spacing="1" AlignItems="AlignItems.Center">
<MudStack Style="display: inline-flex !important;" 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;">@starLevel</MudText>
</MudStack>

2
TaikoWebUI/Settings/WebUiSettings.cs
View File

@ -9,6 +9,8 @@ public class WebUiSettings
public bool RegisterWithLastPlayTime { get; set; }
public bool AllowUserDelete { get; set; }
public bool AllowFreeProfileEditing { get; set; }
public MaxWidth MaxWidth { get; set; }
public SongLeaderboardSettings SongLeaderboardSettings { get; set; } = new SongLeaderboardSettings();
public Language[] SupportedLanguages { get; set; } = Array.Empty<Language>();

7
TaikoWebUI/wwwroot/css/app.css
View File

@ -318,6 +318,13 @@ tr.is-current-user p {
}
}
@media only screen and (max-width: 599px) {
.mud-button-root {
padding-left: 4px;
padding-right: 4px;
}
}
.mud-breadcrumb-item {
font-size: 14px;
}