1
0
mirror of https://github.com/ppy/osu.git synced 2025-03-14 05:07:26 +08:00

Merge pull request #22266 from bdach/user-profile/update-design-stats

Update appearance of user statistics on profile overlay to match web
This commit is contained in:
Dan Balasescu 2023-01-18 07:53:40 +09:00 committed by GitHub
commit dddcc10ec6
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 324 additions and 194 deletions

View File

@ -0,0 +1,110 @@
// Copyright (c) ppy Pty Ltd <contact@ppy.sh>. Licensed under the MIT Licence.
// See the LICENCE file in the repository root for full licence text.
using osu.Framework.Allocation;
using osu.Framework.Bindables;
using osu.Framework.Extensions.LocalisationExtensions;
using osu.Framework.Graphics;
using osu.Framework.Graphics.Containers;
using osu.Framework.Graphics.Sprites;
using osu.Game.Graphics;
using osu.Game.Graphics.Sprites;
using osu.Game.Resources.Localisation.Web;
using osu.Game.Users;
using osuTK;
namespace osu.Game.Overlays.Profile.Header.Components
{
public partial class ExtendedDetails : CompositeDrawable
{
public Bindable<UserProfileData?> User { get; } = new Bindable<UserProfileData?>();
private SpriteText rankedScore = null!;
private SpriteText hitAccuracy = null!;
private SpriteText playCount = null!;
private SpriteText totalScore = null!;
private SpriteText totalHits = null!;
private SpriteText maximumCombo = null!;
private SpriteText replaysWatched = null!;
[BackgroundDependencyLoader]
private void load()
{
var font = OsuFont.Default.With(size: 12);
const float vertical_spacing = 4;
AutoSizeAxes = Axes.Both;
// this should really be a grid, but trying to avoid one to avoid the performance hit.
InternalChild = new FillFlowContainer
{
AutoSizeAxes = Axes.Both,
Direction = FillDirection.Horizontal,
Spacing = new Vector2(20, 0),
Children = new[]
{
new FillFlowContainer
{
Name = @"Labels",
AutoSizeAxes = Axes.Both,
Direction = FillDirection.Vertical,
Spacing = new Vector2(0, vertical_spacing),
Children = new Drawable[]
{
new OsuSpriteText { Font = font, Text = UsersStrings.ShowStatsRankedScore },
new OsuSpriteText { Font = font, Text = UsersStrings.ShowStatsHitAccuracy },
new OsuSpriteText { Font = font, Text = UsersStrings.ShowStatsPlayCount },
new OsuSpriteText { Font = font, Text = UsersStrings.ShowStatsTotalScore },
new OsuSpriteText { Font = font, Text = UsersStrings.ShowStatsTotalHits },
new OsuSpriteText { Font = font, Text = UsersStrings.ShowStatsMaximumCombo },
new OsuSpriteText { Font = font, Text = UsersStrings.ShowStatsReplaysWatchedByOthers },
}
},
new FillFlowContainer
{
Name = @"Values",
AutoSizeAxes = Axes.Both,
Direction = FillDirection.Vertical,
Spacing = new Vector2(0, vertical_spacing),
Children = new Drawable[]
{
rankedScore = new OsuSpriteText { Font = font },
hitAccuracy = new OsuSpriteText { Font = font },
playCount = new OsuSpriteText { Font = font },
totalScore = new OsuSpriteText { Font = font },
totalHits = new OsuSpriteText { Font = font },
maximumCombo = new OsuSpriteText { Font = font },
replaysWatched = new OsuSpriteText { Font = font },
}
},
}
};
}
protected override void LoadComplete()
{
base.LoadComplete();
User.BindValueChanged(user => updateStatistics(user.NewValue?.User.Statistics), true);
}
private void updateStatistics(UserStatistics? statistics)
{
if (statistics == null)
{
Alpha = 0;
return;
}
Alpha = 1;
rankedScore.Text = statistics.RankedScore.ToLocalisableString(@"N0");
hitAccuracy.Text = statistics.DisplayAccuracy;
playCount.Text = statistics.PlayCount.ToLocalisableString(@"N0");
totalScore.Text = statistics.TotalScore.ToLocalisableString(@"N0");
totalHits.Text = statistics.TotalHits.ToLocalisableString(@"N0");
maximumCombo.Text = statistics.MaxCombo.ToLocalisableString(@"N0");
replaysWatched.Text = statistics.ReplaysWatched.ToLocalisableString(@"N0");
}
}
}

View File

@ -0,0 +1,186 @@
// Copyright (c) ppy Pty Ltd <contact@ppy.sh>. Licensed under the MIT Licence.
// See the LICENCE file in the repository root for full licence text.
using System.Collections.Generic;
using osu.Framework.Allocation;
using osu.Framework.Bindables;
using osu.Framework.Extensions.LocalisationExtensions;
using osu.Framework.Graphics;
using osu.Framework.Graphics.Containers;
using osu.Framework.Localisation;
using osu.Game.Graphics;
using osu.Game.Graphics.Sprites;
using osu.Game.Online.Leaderboards;
using osu.Game.Resources.Localisation.Web;
using osu.Game.Scoring;
using osuTK;
namespace osu.Game.Overlays.Profile.Header.Components
{
public partial class MainDetails : CompositeDrawable
{
private readonly Dictionary<ScoreRank, ScoreRankInfo> scoreRankInfos = new Dictionary<ScoreRank, ScoreRankInfo>();
private ProfileValueDisplay medalInfo = null!;
private ProfileValueDisplay ppInfo = null!;
private ProfileValueDisplay detailGlobalRank = null!;
private ProfileValueDisplay detailCountryRank = null!;
private RankGraph rankGraph = null!;
public readonly Bindable<UserProfileData?> User = new Bindable<UserProfileData?>();
[BackgroundDependencyLoader]
private void load()
{
AutoSizeAxes = Axes.Y;
InternalChild = new FillFlowContainer
{
RelativeSizeAxes = Axes.X,
AutoSizeAxes = Axes.Y,
AutoSizeDuration = 200,
AutoSizeEasing = Easing.OutQuint,
Masking = true,
Direction = FillDirection.Vertical,
Spacing = new Vector2(0, 15),
Children = new Drawable[]
{
new FillFlowContainer
{
RelativeSizeAxes = Axes.X,
AutoSizeAxes = Axes.Y,
Direction = FillDirection.Horizontal,
Spacing = new Vector2(20),
Children = new Drawable[]
{
detailGlobalRank = new ProfileValueDisplay(true)
{
Title = UsersStrings.ShowRankGlobalSimple,
},
detailCountryRank = new ProfileValueDisplay(true)
{
Title = UsersStrings.ShowRankCountrySimple,
},
}
},
new Container
{
RelativeSizeAxes = Axes.X,
Height = 60,
Children = new Drawable[]
{
rankGraph = new RankGraph
{
RelativeSizeAxes = Axes.Both,
},
}
},
new Container
{
RelativeSizeAxes = Axes.X,
AutoSizeAxes = Axes.Y,
Children = new Drawable[]
{
new FillFlowContainer
{
AutoSizeAxes = Axes.Both,
Anchor = Anchor.CentreLeft,
Origin = Anchor.CentreLeft,
Direction = FillDirection.Horizontal,
Spacing = new Vector2(10, 0),
Children = new Drawable[]
{
medalInfo = new ProfileValueDisplay
{
Title = UsersStrings.ShowStatsMedals,
},
ppInfo = new ProfileValueDisplay
{
Title = "pp",
},
new TotalPlayTime
{
User = { BindTarget = User }
},
}
},
new FillFlowContainer
{
AutoSizeAxes = Axes.Both,
Anchor = Anchor.CentreRight,
Origin = Anchor.CentreRight,
Direction = FillDirection.Horizontal,
Spacing = new Vector2(5),
Children = new[]
{
scoreRankInfos[ScoreRank.XH] = new ScoreRankInfo(ScoreRank.XH),
scoreRankInfos[ScoreRank.X] = new ScoreRankInfo(ScoreRank.X),
scoreRankInfos[ScoreRank.SH] = new ScoreRankInfo(ScoreRank.SH),
scoreRankInfos[ScoreRank.S] = new ScoreRankInfo(ScoreRank.S),
scoreRankInfos[ScoreRank.A] = new ScoreRankInfo(ScoreRank.A),
}
}
}
},
}
};
}
protected override void LoadComplete()
{
base.LoadComplete();
User.BindValueChanged(e => updateDisplay(e.NewValue), true);
}
private void updateDisplay(UserProfileData? data)
{
var user = data?.User;
medalInfo.Content = user?.Achievements?.Length.ToString() ?? "0";
ppInfo.Content = user?.Statistics?.PP?.ToLocalisableString("#,##0") ?? (LocalisableString)"0";
foreach (var scoreRankInfo in scoreRankInfos)
scoreRankInfo.Value.RankCount = user?.Statistics?.GradesCount[scoreRankInfo.Key] ?? 0;
detailGlobalRank.Content = user?.Statistics?.GlobalRank?.ToLocalisableString("\\##,##0") ?? (LocalisableString)"-";
detailCountryRank.Content = user?.Statistics?.CountryRank?.ToLocalisableString("\\##,##0") ?? (LocalisableString)"-";
rankGraph.Statistics.Value = user?.Statistics;
}
private partial class ScoreRankInfo : CompositeDrawable
{
private readonly OsuSpriteText rankCount;
public int RankCount
{
set => rankCount.Text = value.ToLocalisableString("#,##0");
}
public ScoreRankInfo(ScoreRank rank)
{
AutoSizeAxes = Axes.Both;
InternalChild = new FillFlowContainer
{
AutoSizeAxes = Axes.Y,
Width = 44,
Direction = FillDirection.Vertical,
Children = new Drawable[]
{
new DrawableRank(rank)
{
RelativeSizeAxes = Axes.X,
Height = 22,
},
rankCount = new OsuSpriteText
{
Font = OsuFont.GetFont(size: 12, weight: FontWeight.Bold),
Anchor = Anchor.TopCentre,
Origin = Anchor.TopCentre
}
}
};
}
}
}
}

View File

@ -1,33 +1,17 @@
// Copyright (c) ppy Pty Ltd <contact@ppy.sh>. Licensed under the MIT Licence.
// See the LICENCE file in the repository root for full licence text.
using System.Collections.Generic;
using osu.Framework.Allocation;
using osu.Framework.Bindables;
using osu.Framework.Extensions.LocalisationExtensions;
using osu.Framework.Graphics;
using osu.Framework.Graphics.Containers;
using osu.Framework.Graphics.Shapes;
using osu.Framework.Localisation;
using osu.Game.Graphics;
using osu.Game.Graphics.Sprites;
using osu.Game.Online.Leaderboards;
using osu.Game.Overlays.Profile.Header.Components;
using osu.Game.Resources.Localisation.Web;
using osu.Game.Scoring;
using osuTK;
namespace osu.Game.Overlays.Profile.Header
{
public partial class DetailHeaderContainer : CompositeDrawable
{
private readonly Dictionary<ScoreRank, ScoreRankInfo> scoreRankInfos = new Dictionary<ScoreRank, ScoreRankInfo>();
private ProfileValueDisplay medalInfo = null!;
private ProfileValueDisplay ppInfo = null!;
private ProfileValueDisplay detailGlobalRank = null!;
private ProfileValueDisplay detailCountryRank = null!;
private RankGraph rankGraph = null!;
public readonly Bindable<UserProfileData?> User = new Bindable<UserProfileData?>();
[BackgroundDependencyLoader]
@ -35,8 +19,6 @@ namespace osu.Game.Overlays.Profile.Header
{
AutoSizeAxes = Axes.Y;
User.ValueChanged += e => updateDisplay(e.NewValue);
InternalChildren = new Drawable[]
{
new Box
@ -44,149 +26,52 @@ namespace osu.Game.Overlays.Profile.Header
RelativeSizeAxes = Axes.Both,
Colour = colourProvider.Background5,
},
new FillFlowContainer
new Container
{
RelativeSizeAxes = Axes.X,
AutoSizeAxes = Axes.Y,
AutoSizeDuration = 200,
AutoSizeEasing = Easing.OutQuint,
Masking = true,
Padding = new MarginPadding { Horizontal = UserProfileOverlay.CONTENT_X_MARGIN, Vertical = 10 },
Direction = FillDirection.Vertical,
Spacing = new Vector2(0, 15),
Children = new Drawable[]
Child = new GridContainer
{
new FillFlowContainer
RelativeSizeAxes = Axes.X,
AutoSizeAxes = Axes.Y,
RowDimensions = new[]
{
RelativeSizeAxes = Axes.X,
AutoSizeAxes = Axes.Y,
Direction = FillDirection.Horizontal,
Spacing = new Vector2(20),
Children = new Drawable[]
{
detailGlobalRank = new ProfileValueDisplay(true)
{
Title = UsersStrings.ShowRankGlobalSimple,
},
detailCountryRank = new ProfileValueDisplay(true)
{
Title = UsersStrings.ShowRankCountrySimple,
},
}
new Dimension(GridSizeMode.AutoSize),
},
new Container
ColumnDimensions = new[]
{
RelativeSizeAxes = Axes.X,
Height = 60,
Children = new Drawable[]
{
rankGraph = new RankGraph
{
RelativeSizeAxes = Axes.Both,
},
}
new Dimension(),
new Dimension(GridSizeMode.AutoSize),
new Dimension(GridSizeMode.AutoSize),
},
new Container
Content = new[]
{
RelativeSizeAxes = Axes.X,
AutoSizeAxes = Axes.Y,
Children = new Drawable[]
new Drawable[]
{
new FillFlowContainer
new MainDetails
{
RelativeSizeAxes = Axes.X,
User = { BindTarget = User }
},
new Box
{
RelativeSizeAxes = Axes.Y,
Width = 2,
Colour = colourProvider.Background6,
Margin = new MarginPadding { Horizontal = 15 }
},
new ExtendedDetails
{
AutoSizeAxes = Axes.Both,
Anchor = Anchor.CentreLeft,
Origin = Anchor.CentreLeft,
Direction = FillDirection.Horizontal,
Spacing = new Vector2(10, 0),
Children = new Drawable[]
{
medalInfo = new ProfileValueDisplay
{
Title = UsersStrings.ShowStatsMedals,
},
ppInfo = new ProfileValueDisplay
{
Title = "pp",
},
new TotalPlayTime
{
User = { BindTarget = User }
},
}
},
new FillFlowContainer
{
AutoSizeAxes = Axes.Both,
Anchor = Anchor.CentreRight,
Origin = Anchor.CentreRight,
Direction = FillDirection.Horizontal,
Spacing = new Vector2(5),
Children = new[]
{
scoreRankInfos[ScoreRank.XH] = new ScoreRankInfo(ScoreRank.XH),
scoreRankInfos[ScoreRank.X] = new ScoreRankInfo(ScoreRank.X),
scoreRankInfos[ScoreRank.SH] = new ScoreRankInfo(ScoreRank.SH),
scoreRankInfos[ScoreRank.S] = new ScoreRankInfo(ScoreRank.S),
scoreRankInfos[ScoreRank.A] = new ScoreRankInfo(ScoreRank.A),
}
User = { BindTarget = User }
}
}
},
}
},
};
}
private void updateDisplay(UserProfileData? data)
{
var user = data?.User;
medalInfo.Content = user?.Achievements?.Length.ToString() ?? "0";
ppInfo.Content = user?.Statistics?.PP?.ToLocalisableString("#,##0") ?? (LocalisableString)"0";
foreach (var scoreRankInfo in scoreRankInfos)
scoreRankInfo.Value.RankCount = user?.Statistics?.GradesCount[scoreRankInfo.Key] ?? 0;
detailGlobalRank.Content = user?.Statistics?.GlobalRank?.ToLocalisableString("\\##,##0") ?? (LocalisableString)"-";
detailCountryRank.Content = user?.Statistics?.CountryRank?.ToLocalisableString("\\##,##0") ?? (LocalisableString)"-";
rankGraph.Statistics.Value = user?.Statistics;
}
private partial class ScoreRankInfo : CompositeDrawable
{
private readonly OsuSpriteText rankCount;
public int RankCount
{
set => rankCount.Text = value.ToLocalisableString("#,##0");
}
public ScoreRankInfo(ScoreRank rank)
{
AutoSizeAxes = Axes.Both;
InternalChild = new FillFlowContainer
{
AutoSizeAxes = Axes.Y,
Width = 44,
Direction = FillDirection.Vertical,
Children = new Drawable[]
{
new DrawableRank(rank)
{
RelativeSizeAxes = Axes.X,
Height = 22,
},
rankCount = new OsuSpriteText
{
Font = OsuFont.GetFont(size: 12, weight: FontWeight.Bold),
Anchor = Anchor.TopCentre,
Origin = Anchor.TopCentre
}
}
};
}
}
};
}
}
}

View File

@ -5,18 +5,15 @@ using osu.Framework.Allocation;
using osu.Framework.Bindables;
using osu.Framework.Extensions;
using osu.Framework.Extensions.Color4Extensions;
using osu.Framework.Extensions.LocalisationExtensions;
using osu.Framework.Graphics;
using osu.Framework.Graphics.Containers;
using osu.Framework.Graphics.Shapes;
using osu.Framework.Localisation;
using osu.Game.Graphics;
using osu.Game.Graphics.Sprites;
using osu.Game.Graphics.Cursor;
using osu.Game.Graphics.UserInterface;
using osu.Game.Online.API;
using osu.Game.Overlays.Profile.Header.Components;
using osu.Game.Resources.Localisation.Web;
using osu.Game.Users.Drawables;
using osuTK;
@ -38,7 +35,6 @@ namespace osu.Game.Overlays.Profile.Header
private OsuSpriteText titleText = null!;
private UpdateableFlag userFlag = null!;
private OsuSpriteText userCountryText = null!;
private FillFlowContainer userStats = null!;
private GroupBadgeFlow groupBadgeFlow = null!;
[BackgroundDependencyLoader]
@ -164,16 +160,6 @@ namespace osu.Game.Overlays.Profile.Header
}
}
},
userStats = new FillFlowContainer
{
Anchor = Anchor.TopRight,
Origin = Anchor.TopRight,
AutoSizeAxes = Axes.Y,
Width = 300,
Margin = new MarginPadding { Right = UserProfileOverlay.CONTENT_X_MARGIN },
Padding = new MarginPadding { Vertical = 15 },
Spacing = new Vector2(0, 2)
}
};
User.BindValueChanged(user => updateUser(user.NewValue));
@ -192,43 +178,6 @@ namespace osu.Game.Overlays.Profile.Header
titleText.Text = user?.Title ?? string.Empty;
titleText.Colour = Color4Extensions.FromHex(user?.Colour ?? "fff");
groupBadgeFlow.User.Value = user;
userStats.Clear();
if (user?.Statistics != null)
{
userStats.Add(new UserStatsLine(UsersStrings.ShowStatsRankedScore, user.Statistics.RankedScore.ToLocalisableString("#,##0")));
userStats.Add(new UserStatsLine(UsersStrings.ShowStatsHitAccuracy, user.Statistics.DisplayAccuracy));
userStats.Add(new UserStatsLine(UsersStrings.ShowStatsPlayCount, user.Statistics.PlayCount.ToLocalisableString("#,##0")));
userStats.Add(new UserStatsLine(UsersStrings.ShowStatsTotalScore, user.Statistics.TotalScore.ToLocalisableString("#,##0")));
userStats.Add(new UserStatsLine(UsersStrings.ShowStatsTotalHits, user.Statistics.TotalHits.ToLocalisableString("#,##0")));
userStats.Add(new UserStatsLine(UsersStrings.ShowStatsMaximumCombo, user.Statistics.MaxCombo.ToLocalisableString("#,##0")));
userStats.Add(new UserStatsLine(UsersStrings.ShowStatsReplaysWatchedByOthers, user.Statistics.ReplaysWatched.ToLocalisableString("#,##0")));
}
}
private partial class UserStatsLine : Container
{
public UserStatsLine(LocalisableString left, LocalisableString right)
{
RelativeSizeAxes = Axes.X;
AutoSizeAxes = Axes.Y;
Children = new Drawable[]
{
new OsuSpriteText
{
Font = OsuFont.GetFont(size: 15),
Text = left,
},
new OsuSpriteText
{
Anchor = Anchor.TopRight,
Origin = Anchor.TopRight,
Font = OsuFont.GetFont(size: 15, weight: FontWeight.Bold),
Text = right,
},
};
}
}
}
}