Merge pull request #4211 from EVAST9919/update-beatmap-scores-design

Update beatmap scores design

Co-authored-by: Dan Balasescu <smoogipoo@smgi.me>
Co-authored-by: Dean Herbert <pe@ppy.sh>

osu.Game.Tests/Visual/Online/TestCaseBeatmapSetOverlay.cs

@@ -1,9 +1,6 @@
 // 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;
-using System.Collections.Generic;
-using System.Linq;
 using NUnit.Framework;
 using osu.Framework.Allocation;
 using osu.Game.Beatmaps;
@@ -13,6 +10,9 @@ using osu.Game.Overlays.BeatmapSet.Buttons;
 using osu.Game.Overlays.BeatmapSet.Scores;
 using osu.Game.Rulesets;
 using osu.Game.Users;
+using System;
+using System.Collections.Generic;
+using System.Linq;
 
 namespace osu.Game.Tests.Visual.Online
 {
@@ -24,8 +24,8 @@ namespace osu.Game.Tests.Visual.Online
         public override IReadOnlyList<Type> RequiredTypes => new[]
         {
             typeof(Header),
-            typeof(ClickableUsername),
+            typeof(ScoreTable),
-            typeof(DrawableScore),
+            typeof(ScoreTableRowBackground),
             typeof(DrawableTopScore),
             typeof(ScoresContainer),
             typeof(AuthorInfo),

osu.Game.Tests/Visual/Online/TestCaseScoresContainer.cs

@@ -0,0 +1,185 @@
+// 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;
+using System.Collections.Generic;
+using osu.Framework.Allocation;
+using osu.Framework.Graphics;
+using osu.Framework.Graphics.Containers;
+using osu.Framework.Graphics.Shapes;
+using osu.Framework.MathUtils;
+using osu.Game.Graphics;
+using osu.Game.Overlays.BeatmapSet.Scores;
+using osu.Game.Rulesets.Mods;
+using osu.Game.Rulesets.Osu.Mods;
+using osu.Game.Rulesets.Scoring;
+using osu.Game.Scoring;
+using osu.Game.Users;
+
+namespace osu.Game.Tests.Visual.Online
+{
+    public class TestCaseScoresContainer : OsuTestCase
+    {
+        public override IReadOnlyList<Type> RequiredTypes => new[]
+        {
+            typeof(DrawableTopScore),
+            typeof(TopScoreUserSection),
+            typeof(TopScoreStatisticsSection),
+            typeof(ScoreTable),
+            typeof(ScoreTableRowBackground),
+        };
+
+        private readonly Box background;
+
+        public TestCaseScoresContainer()
+        {
+            ScoresContainer scoresContainer;
+
+            Child = new Container
+            {
+                Anchor = Anchor.TopCentre,
+                Origin = Anchor.TopCentre,
+                AutoSizeAxes = Axes.Y,
+                RelativeSizeAxes = Axes.X,
+                Width = 0.8f,
+                Children = new Drawable[]
+                {
+                    background = new Box { RelativeSizeAxes = Axes.Both },
+                    scoresContainer = new ScoresContainer(),
+                }
+            };
+
+            var scores = new List<ScoreInfo>
+            {
+                new ScoreInfo
+                {
+                    User = new User
+                    {
+                        Id = 6602580,
+                        Username = @"waaiiru",
+                        Country = new Country
+                        {
+                            FullName = @"Spain",
+                            FlagName = @"ES",
+                        },
+                    },
+                    Mods = new Mod[]
+                    {
+                        new OsuModDoubleTime(),
+                        new OsuModHidden(),
+                        new OsuModFlashlight(),
+                        new OsuModHardRock(),
+                    },
+                    Rank = ScoreRank.XH,
+                    PP = 200,
+                    MaxCombo = 1234,
+                    TotalScore = 1234567890,
+                    Accuracy = 1,
+                },
+                new ScoreInfo
+                {
+                    User = new User
+                    {
+                        Id = 4608074,
+                        Username = @"Skycries",
+                        Country = new Country
+                        {
+                            FullName = @"Brazil",
+                            FlagName = @"BR",
+                        },
+                    },
+                    Mods = new Mod[]
+                    {
+                        new OsuModDoubleTime(),
+                        new OsuModHidden(),
+                        new OsuModFlashlight(),
+                    },
+                    Rank = ScoreRank.S,
+                    PP = 190,
+                    MaxCombo = 1234,
+                    TotalScore = 1234789,
+                    Accuracy = 0.9997,
+                },
+                new ScoreInfo
+                {
+                    User = new User
+                    {
+                        Id = 1014222,
+                        Username = @"eLy",
+                        Country = new Country
+                        {
+                            FullName = @"Japan",
+                            FlagName = @"JP",
+                        },
+                    },
+                    Mods = new Mod[]
+                    {
+                        new OsuModDoubleTime(),
+                        new OsuModHidden(),
+                    },
+                    Rank = ScoreRank.B,
+                    PP = 180,
+                    MaxCombo = 1234,
+                    TotalScore = 12345678,
+                    Accuracy = 0.9854,
+                },
+                new ScoreInfo
+                {
+                    User = new User
+                    {
+                        Id = 1541390,
+                        Username = @"Toukai",
+                        Country = new Country
+                        {
+                            FullName = @"Canada",
+                            FlagName = @"CA",
+                        },
+                    },
+                    Mods = new Mod[]
+                    {
+                        new OsuModDoubleTime(),
+                    },
+                    Rank = ScoreRank.C,
+                    PP = 170,
+                    MaxCombo = 1234,
+                    TotalScore = 1234567,
+                    Accuracy = 0.8765,
+                },
+                new ScoreInfo
+                {
+                    User = new User
+                    {
+                        Id = 7151382,
+                        Username = @"Mayuri Hana",
+                        Country = new Country
+                        {
+                            FullName = @"Thailand",
+                            FlagName = @"TH",
+                        },
+                    },
+                    Rank = ScoreRank.F,
+                    PP = 160,
+                    MaxCombo = 1234,
+                    TotalScore = 123456,
+                    Accuracy = 0.6543,
+                },
+            };
+
+            foreach (var s in scores)
+            {
+                s.Statistics.Add(HitResult.Great, RNG.Next(2000));
+                s.Statistics.Add(HitResult.Good, RNG.Next(2000));
+                s.Statistics.Add(HitResult.Meh, RNG.Next(2000));
+                s.Statistics.Add(HitResult.Miss, RNG.Next(2000));
+            }
+
+            scoresContainer.Scores = scores;
+        }
+
+        [BackgroundDependencyLoader]
+        private void load(OsuColour colours)
+        {
+            background.Colour = colours.Gray2;
+        }
+    }
+}

osu.Game.Tests/Visual/SongSelect/TestCaseBeatmapScoresContainer.cs

@@ -1,312 +0,0 @@
-// 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.Graphics;
-using osu.Framework.Graphics.Containers;
-using osu.Framework.Graphics.Shapes;
-using osu.Framework.MathUtils;
-using osu.Game.Beatmaps;
-using osu.Game.Graphics;
-using osu.Game.Overlays.BeatmapSet.Scores;
-using osu.Game.Rulesets.Mods;
-using osu.Game.Rulesets.Osu;
-using osu.Game.Rulesets.Osu.Mods;
-using osu.Game.Rulesets.Scoring;
-using osu.Game.Scoring;
-using osu.Game.Users;
-
-namespace osu.Game.Tests.Visual.SongSelect
-{
-    [System.ComponentModel.Description("in BeatmapOverlay")]
-    public class TestCaseBeatmapScoresContainer : OsuTestCase
-    {
-        private readonly Box background;
-
-        public TestCaseBeatmapScoresContainer()
-        {
-            Container container;
-            ScoresContainer scoresContainer;
-
-            Child = container = new Container
-            {
-                Anchor = Anchor.TopCentre,
-                Origin = Anchor.TopCentre,
-                AutoSizeAxes = Axes.Y,
-                RelativeSizeAxes = Axes.X,
-                Width = 0.8f,
-                Children = new Drawable[]
-                {
-                    background = new Box { RelativeSizeAxes = Axes.Both },
-                    scoresContainer = new ScoresContainer(),
-                }
-            };
-
-            IEnumerable<ScoreInfo> scores = new[]
-            {
-                new ScoreInfo
-                {
-                    User = new User
-                    {
-                        Id = 6602580,
-                        Username = @"waaiiru",
-                        Country = new Country
-                        {
-                            FullName = @"Spain",
-                            FlagName = @"ES",
-                        },
-                    },
-                    Mods = new Mod[]
-                    {
-                        new OsuModDoubleTime(),
-                        new OsuModHidden(),
-                        new OsuModFlashlight(),
-                        new OsuModHardRock(),
-                    },
-                    Rank = ScoreRank.XH,
-                    TotalScore = 1234567890,
-                    Accuracy = 1,
-                },
-                new ScoreInfo
-                {
-                    User = new User
-                    {
-                        Id = 4608074,
-                        Username = @"Skycries",
-                        Country = new Country
-                        {
-                            FullName = @"Brazil",
-                            FlagName = @"BR",
-                        },
-                    },
-                    Mods = new Mod[]
-                    {
-                        new OsuModDoubleTime(),
-                        new OsuModHidden(),
-                        new OsuModFlashlight(),
-                    },
-                    Rank = ScoreRank.S,
-                    TotalScore = 1234789,
-                    Accuracy = 0.9997,
-                },
-                new ScoreInfo
-                {
-                    User = new User
-                    {
-                        Id = 1014222,
-                        Username = @"eLy",
-                        Country = new Country
-                        {
-                            FullName = @"Japan",
-                            FlagName = @"JP",
-                        },
-                    },
-                    Mods = new Mod[]
-                    {
-                        new OsuModDoubleTime(),
-                        new OsuModHidden(),
-                    },
-                    Rank = ScoreRank.B,
-                    TotalScore = 12345678,
-                    Accuracy = 0.9854,
-                },
-                new ScoreInfo
-                {
-                    User = new User
-                    {
-                        Id = 1541390,
-                        Username = @"Toukai",
-                        Country = new Country
-                        {
-                            FullName = @"Canada",
-                            FlagName = @"CA",
-                        },
-                    },
-                    Mods = new Mod[]
-                    {
-                        new OsuModDoubleTime(),
-                    },
-                    Rank = ScoreRank.C,
-                    TotalScore = 1234567,
-                    Accuracy = 0.8765,
-                },
-                new ScoreInfo
-                {
-                    User = new User
-                    {
-                        Id = 7151382,
-                        Username = @"Mayuri Hana",
-                        Country = new Country
-                        {
-                            FullName = @"Thailand",
-                            FlagName = @"TH",
-                        },
-                    },
-                    Rank = ScoreRank.F,
-                    TotalScore = 123456,
-                    Accuracy = 0.6543,
-                },
-            };
-
-            foreach (var s in scores)
-            {
-                s.Statistics.Add(HitResult.Great, RNG.Next(2000));
-                s.Statistics.Add(HitResult.Good, RNG.Next(2000));
-                s.Statistics.Add(HitResult.Meh, RNG.Next(2000));
-            }
-
-            IEnumerable<ScoreInfo> anotherScores = new[]
-            {
-                new ScoreInfo
-                {
-                    User = new User
-                    {
-                        Id = 4608074,
-                        Username = @"Skycries",
-                        Country = new Country
-                        {
-                            FullName = @"Brazil",
-                            FlagName = @"BR",
-                        },
-                    },
-                    Mods = new Mod[]
-                    {
-                        new OsuModDoubleTime(),
-                        new OsuModHidden(),
-                        new OsuModFlashlight(),
-                    },
-                    Rank = ScoreRank.S,
-                    TotalScore = 1234789,
-                    Accuracy = 0.9997,
-                },
-                new ScoreInfo
-                {
-                    User = new User
-                    {
-                        Id = 6602580,
-                        Username = @"waaiiru",
-                        Country = new Country
-                        {
-                            FullName = @"Spain",
-                            FlagName = @"ES",
-                        },
-                    },
-                    Mods = new Mod[]
-                    {
-                        new OsuModDoubleTime(),
-                        new OsuModHidden(),
-                        new OsuModFlashlight(),
-                        new OsuModHardRock(),
-                    },
-                    Rank = ScoreRank.XH,
-                    TotalScore = 1234567890,
-                    Accuracy = 1,
-                },
-                new ScoreInfo
-                {
-                    User = new User
-                    {
-                        Id = 7151382,
-                        Username = @"Mayuri Hana",
-                        Country = new Country
-                        {
-                            FullName = @"Thailand",
-                            FlagName = @"TH",
-                        },
-                    },
-                    Rank = ScoreRank.F,
-                    TotalScore = 123456,
-                    Accuracy = 0.6543,
-                },
-                new ScoreInfo
-                {
-                    User = new User
-                    {
-                        Id = 1014222,
-                        Username = @"eLy",
-                        Country = new Country
-                        {
-                            FullName = @"Japan",
-                            FlagName = @"JP",
-                        },
-                    },
-                    Mods = new Mod[]
-                    {
-                        new OsuModDoubleTime(),
-                        new OsuModHidden(),
-                    },
-                    Rank = ScoreRank.B,
-                    TotalScore = 12345678,
-                    Accuracy = 0.9854,
-                },
-                new ScoreInfo
-                {
-                    User = new User
-                    {
-                        Id = 1541390,
-                        Username = @"Toukai",
-                        Country = new Country
-                        {
-                            FullName = @"Canada",
-                            FlagName = @"CA",
-                        },
-                    },
-                    Mods = new Mod[]
-                    {
-                        new OsuModDoubleTime(),
-                    },
-                    Rank = ScoreRank.C,
-                    TotalScore = 1234567,
-                    Accuracy = 0.8765,
-                },
-            };
-            foreach (var s in anotherScores)
-            {
-                s.Statistics.Add(HitResult.Great, RNG.Next(2000));
-                s.Statistics.Add(HitResult.Good, RNG.Next(2000));
-                s.Statistics.Add(HitResult.Meh, RNG.Next(2000));
-            }
-
-            var topScoreInfo = new ScoreInfo
-            {
-                User = new User
-                {
-                    Id = 2705430,
-                    Username = @"Mooha",
-                    Country = new Country
-                    {
-                        FullName = @"France",
-                        FlagName = @"FR",
-                    },
-                },
-                Mods = new Mod[]
-                {
-                    new OsuModDoubleTime(),
-                    new OsuModFlashlight(),
-                    new OsuModHardRock(),
-                },
-                Rank = ScoreRank.B,
-                TotalScore = 987654321,
-                Accuracy = 0.8487,
-            };
-            topScoreInfo.Statistics.Add(HitResult.Great, RNG.Next(2000));
-            topScoreInfo.Statistics.Add(HitResult.Good, RNG.Next(2000));
-            topScoreInfo.Statistics.Add(HitResult.Meh, RNG.Next(2000));
-
-            AddStep("scores pack 1", () => scoresContainer.Scores = scores);
-            AddStep("scores pack 2", () => scoresContainer.Scores = anotherScores);
-            AddStep("only top score", () => scoresContainer.Scores = new[] { topScoreInfo });
-            AddStep("remove scores", () => scoresContainer.Scores = null);
-            AddStep("resize to big", () => container.ResizeWidthTo(1, 300));
-            AddStep("resize to normal", () => container.ResizeWidthTo(0.8f, 300));
-            AddStep("online scores", () => scoresContainer.Beatmap = new BeatmapInfo { OnlineBeatmapID = 75, Ruleset = new OsuRuleset().RulesetInfo });
-        }
-
-        [BackgroundDependencyLoader]
-        private void load(OsuColour colours)
-        {
-            background.Colour = colours.Gray2;
-        }
-    }
-}

osu.Game/Graphics/Containers/LinkFlowContainer.cs

@@ -11,6 +11,7 @@ using osu.Framework.Graphics;
 using osu.Framework.Logging;
 using osu.Game.Overlays;
 using osu.Game.Overlays.Notifications;
+using osu.Game.Users;
 
 namespace osu.Game.Graphics.Containers
 {
@@ -75,6 +76,9 @@ namespace osu.Game.Graphics.Containers
             return createLink(text, null, url, linkType, linkArgument, tooltipText);
         }
 
+        public IEnumerable<Drawable> AddUserLink(User user, Action<SpriteText> creationParameters = null)
+            => createLink(AddText(user.Username, creationParameters), user.Username, null, LinkAction.OpenUserProfile, user.Id.ToString(), "View profile");
+
         private IEnumerable<Drawable> createLink(IEnumerable<Drawable> drawables, string text, string url = null, LinkAction linkType = LinkAction.External, string linkArgument = null, string tooltipText = null, Action action = null)
         {
             AddInternal(new DrawableLinkCompiler(drawables.OfType<SpriteText>().ToList())

osu.Game/Graphics/Containers/OsuHoverContainer.cs

@@ -1,17 +1,19 @@
 // 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 osuTK.Graphics;
 using osu.Framework.Allocation;
 using osu.Framework.Extensions.IEnumerableExtensions;
 using osu.Framework.Graphics;
 using osu.Framework.Input.Events;
+using osuTK.Graphics;
+using System.Collections.Generic;
 
 namespace osu.Game.Graphics.Containers
 {
     public class OsuHoverContainer : OsuClickableContainer
     {
+        protected const float FADE_DURATION = 500;
+
         protected Color4 HoverColour;
 
         protected Color4 IdleColour = Color4.White;
@@ -20,13 +22,13 @@ namespace osu.Game.Graphics.Containers
 
         protected override bool OnHover(HoverEvent e)
         {
-            EffectTargets.ForEach(d => d.FadeColour(HoverColour, 500, Easing.OutQuint));
+            EffectTargets.ForEach(d => d.FadeColour(HoverColour, FADE_DURATION, Easing.OutQuint));
             return base.OnHover(e);
         }
 
         protected override void OnHoverLost(HoverLostEvent e)
         {
-            EffectTargets.ForEach(d => d.FadeColour(IdleColour, 500, Easing.OutQuint));
+            EffectTargets.ForEach(d => d.FadeColour(IdleColour, FADE_DURATION, Easing.OutQuint));
             base.OnHoverLost(e);
         }
 

osu.Game/Online/API/Requests/Responses/APILegacyScores.cs

@@ -9,6 +9,6 @@ namespace osu.Game.Online.API.Requests.Responses
     public class APILegacyScores
     {
         [JsonProperty(@"scores")]
-        public IEnumerable<APILegacyScoreInfo> Scores;
+        public List<APILegacyScoreInfo> Scores;
     }
 }

osu.Game/Overlays/BeatmapSet/Scores/ClickableUsername.cs

@@ -1,58 +0,0 @@
-// 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.Graphics;
-using osu.Framework.Input.Events;
-using osu.Game.Graphics;
-using osu.Game.Graphics.Containers;
-using osu.Game.Graphics.Sprites;
-using osu.Game.Users;
-
-namespace osu.Game.Overlays.BeatmapSet.Scores
-{
-    public class ClickableUsername : OsuHoverContainer
-    {
-        private readonly OsuSpriteText text;
-        private UserProfileOverlay profile;
-
-        private User user;
-
-        public User User
-        {
-            get => user;
-            set
-            {
-                if (user == value) return;
-
-                user = value;
-
-                text.Text = user.Username;
-            }
-        }
-
-        public float TextSize
-        {
-            get => text.Font.Size;
-            set => text.Font = text.Font.With(size: value);
-        }
-
-        public ClickableUsername()
-        {
-            AutoSizeAxes = Axes.Both;
-            Child = text = new OsuSpriteText { Font = OsuFont.GetFont(weight: FontWeight.Bold, italics: true) };
-        }
-
-        [BackgroundDependencyLoader(true)]
-        private void load(UserProfileOverlay profile)
-        {
-            this.profile = profile;
-        }
-
-        protected override bool OnClick(ClickEvent e)
-        {
-            profile?.ShowUser(user);
-            return true;
-        }
-    }
-}

osu.Game/Overlays/BeatmapSet/Scores/DrawableScore.cs

@@ -1,141 +0,0 @@
-// 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 osuTK;
-using osu.Framework.Allocation;
-using osu.Framework.Graphics;
-using osu.Framework.Graphics.Containers;
-using osu.Framework.Graphics.Shapes;
-using osu.Framework.Input.Events;
-using osu.Game.Graphics;
-using osu.Game.Graphics.Sprites;
-using osu.Game.Online.Leaderboards;
-using osu.Game.Overlays.Profile.Sections.Ranks;
-using osu.Game.Rulesets.Mods;
-using osu.Game.Rulesets.Scoring;
-using osu.Game.Rulesets.UI;
-using osu.Game.Scoring;
-using osu.Game.Users;
-
-namespace osu.Game.Overlays.BeatmapSet.Scores
-{
-    public class DrawableScore : Container
-    {
-        private const int fade_duration = 100;
-        private const float side_margin = 20;
-
-        private readonly Box background;
-
-        public DrawableScore(int index, ScoreInfo score)
-        {
-            ScoreModsContainer modsContainer;
-
-            RelativeSizeAxes = Axes.X;
-            Height = 30;
-            CornerRadius = 3;
-            Masking = true;
-            Children = new Drawable[]
-            {
-                background = new Box
-                {
-                    RelativeSizeAxes = Axes.Both,
-                    Alpha = 0,
-                },
-                new OsuSpriteText
-                {
-                    Anchor = Anchor.CentreLeft,
-                    Origin = Anchor.CentreLeft,
-                    Text = $"#{index + 1}",
-                    Font = OsuFont.GetFont(weight: FontWeight.Regular, italics: true),
-                    Margin = new MarginPadding { Left = side_margin }
-                },
-                new DrawableFlag(score.User.Country)
-                {
-                    Anchor = Anchor.CentreLeft,
-                    Origin = Anchor.CentreLeft,
-                    Size = new Vector2(30, 20),
-                    Margin = new MarginPadding { Left = 60 }
-                },
-                new ClickableUsername
-                {
-                    Anchor = Anchor.CentreLeft,
-                    Origin = Anchor.CentreLeft,
-                    User = score.User,
-                    Margin = new MarginPadding { Left = 100 }
-                },
-                modsContainer = new ScoreModsContainer
-                {
-                    Anchor = Anchor.CentreLeft,
-                    Origin = Anchor.CentreLeft,
-                    AutoSizeAxes = Axes.Y,
-                    RelativeSizeAxes = Axes.X,
-                    Width = 0.06f,
-                    RelativePositionAxes = Axes.X,
-                    X = 0.42f
-                },
-                new DrawableRank(score.Rank)
-                {
-                    Anchor = Anchor.CentreLeft,
-                    Origin = Anchor.CentreLeft,
-                    Size = new Vector2(30, 20),
-                    FillMode = FillMode.Fit,
-                    RelativePositionAxes = Axes.X,
-                    X = 0.55f
-                },
-                new OsuSpriteText
-                {
-                    Anchor = Anchor.CentreLeft,
-                    Origin = Anchor.CentreRight,
-                    Text = $@"{score.TotalScore:N0}",
-                    Font = OsuFont.Numeric.With(fixedWidth: true),
-                    RelativePositionAxes = Axes.X,
-                    X = 0.75f,
-                },
-                new OsuSpriteText
-                {
-                    Anchor = Anchor.CentreLeft,
-                    Origin = Anchor.CentreRight,
-                    Text = $@"{score.Accuracy:P2}",
-                    Font = OsuFont.GetFont(weight: FontWeight.Regular, italics: true),
-                    RelativePositionAxes = Axes.X,
-                    X = 0.85f
-                },
-                new OsuSpriteText
-                {
-                    Anchor = Anchor.CentreRight,
-                    Origin = Anchor.CentreRight,
-                    Text = $"{score.Statistics[HitResult.Great]}/{score.Statistics[HitResult.Good]}/{score.Statistics[HitResult.Meh]}",
-                    Font = OsuFont.GetFont(weight: FontWeight.Regular, italics: true),
-                    Margin = new MarginPadding { Right = side_margin }
-                },
-            };
-
-            foreach (Mod mod in score.Mods)
-                modsContainer.Add(new ModIcon(mod)
-                {
-                    AutoSizeAxes = Axes.Both,
-                    Scale = new Vector2(0.35f),
-                });
-        }
-
-        [BackgroundDependencyLoader]
-        private void load(OsuColour colours)
-        {
-            background.Colour = colours.Gray4;
-        }
-
-        protected override bool OnHover(HoverEvent e)
-        {
-            background.FadeIn(fade_duration, Easing.OutQuint);
-            return base.OnHover(e);
-        }
-
-        protected override void OnHoverLost(HoverLostEvent e)
-        {
-            background.FadeOut(fade_duration, Easing.OutQuint);
-            base.OnHoverLost(e);
-        }
-
-        protected override bool OnClick(ClickEvent e) => true;
-    }
-}

osu.Game/Overlays/BeatmapSet/Scores/DrawableTopScore.cs

@@ -1,8 +1,6 @@
 // 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 osuTK;
-using osuTK.Graphics;
 using osu.Framework.Allocation;
 using osu.Framework.Extensions.Color4Extensions;
 using osu.Framework.Graphics;
@@ -10,230 +8,117 @@ using osu.Framework.Graphics.Containers;
 using osu.Framework.Graphics.Shapes;
 using osu.Framework.Input.Events;
 using osu.Game.Graphics;
-using osu.Game.Graphics.Sprites;
-using osu.Game.Online.Leaderboards;
-using osu.Game.Overlays.Profile.Sections.Ranks;
-using osu.Game.Rulesets.Mods;
-using osu.Game.Rulesets.Scoring;
-using osu.Game.Rulesets.UI;
 using osu.Game.Scoring;
-using osu.Game.Users;
+using osuTK;
+using osuTK.Graphics;
 
 namespace osu.Game.Overlays.BeatmapSet.Scores
 {
-    public class DrawableTopScore : Container
+    public class DrawableTopScore : CompositeDrawable
     {
         private const float fade_duration = 100;
-        private const float height = 200;
+
-        private const float avatar_size = 80;
+        private Color4 backgroundIdleColour;
-        private const float margin = 10;
+        private Color4 backgroundHoveredColour;
 
         private readonly Box background;
-        private readonly Box bottomBackground;
+        private readonly TopScoreUserSection userSection;
-        private readonly Box middleLine;
+        private readonly TopScoreStatisticsSection statisticsSection;
-        private readonly UpdateableAvatar avatar;
-        private readonly DrawableFlag flag;
-        private readonly ClickableUsername username;
-        private readonly OsuSpriteText rankText;
-        private readonly OsuSpriteText date;
-        private readonly DrawableRank rank;
-        private readonly InfoColumn totalScore;
-        private readonly InfoColumn accuracy;
-        private readonly InfoColumn statistics;
-        private readonly ScoreModsContainer modsContainer;
-
-        private ScoreInfo score;
-
-        public ScoreInfo Score
-        {
-            get => score;
-            set
-            {
-                if (score == value) return;
-
-                score = value;
-
-                avatar.User = username.User = score.User;
-                flag.Country = score.User.Country;
-                date.Text = $@"achieved {score.Date:MMM d, yyyy}";
-                rank.UpdateRank(score.Rank);
-
-                totalScore.Value = $@"{score.TotalScore:N0}";
-                accuracy.Value = $@"{score.Accuracy:P2}";
-                statistics.Value = $"{score.Statistics[HitResult.Great]}/{score.Statistics[HitResult.Good]}/{score.Statistics[HitResult.Meh]}";
-
-                modsContainer.Clear();
-                foreach (Mod mod in score.Mods)
-                    modsContainer.Add(new ModIcon(mod)
-                    {
-                        AutoSizeAxes = Axes.Both,
-                        Scale = new Vector2(0.45f),
-                    });
-            }
-        }
 
         public DrawableTopScore()
         {
             RelativeSizeAxes = Axes.X;
-            Height = height;
+            AutoSizeAxes = Axes.Y;
-            CornerRadius = 5;
+
-            BorderThickness = 4;
             Masking = true;
-            Children = new Drawable[]
+            CornerRadius = 10;
+            EdgeEffect = new EdgeEffectParameters
+            {
+                Type = EdgeEffectType.Shadow,
+                Colour = Color4.Black.Opacity(0.2f),
+                Radius = 1,
+                Offset = new Vector2(0, 1),
+            };
+
+            InternalChildren = new Drawable[]
             {
                 background = new Box
                 {
                     RelativeSizeAxes = Axes.Both,
-                    Alpha = 0,
-                    AlwaysPresent = true, //used for correct border representation
-                },
-                avatar = new UpdateableAvatar
-                {
-                    Size = new Vector2(avatar_size),
-                    Masking = true,
-                    CornerRadius = 5,
-                    EdgeEffect = new EdgeEffectParameters
-                    {
-                        Type = EdgeEffectType.Shadow,
-                        Colour = Color4.Black.Opacity(0.25f),
-                        Offset = new Vector2(0, 2),
-                        Radius = 1,
-                    },
-                    Margin = new MarginPadding { Top = margin, Left = margin }
-                },
-                flag = new DrawableFlag
-                {
-                    Size = new Vector2(30, 20),
-                    Position = new Vector2(margin * 2 + avatar_size, height / 4),
-                },
-                username = new ClickableUsername
-                {
-                    Origin = Anchor.BottomLeft,
-                    TextSize = 30,
-                    Position = new Vector2(margin * 2 + avatar_size, height / 4),
-                    Margin = new MarginPadding { Bottom = 4 }
-                },
-                rankText = new OsuSpriteText
-                {
-                    Anchor = Anchor.TopRight,
-                    Origin = Anchor.BottomRight,
-                    Text = "#1",
-                    Font = OsuFont.GetFont(size: 40, weight: FontWeight.Bold, italics: true),
-                    Y = height / 4,
-                    Margin = new MarginPadding { Right = margin }
-                },
-                date = new OsuSpriteText
-                {
-                    Anchor = Anchor.TopRight,
-                    Origin = Anchor.TopRight,
-                    Y = height / 4,
-                    Margin = new MarginPadding { Right = margin }
                 },
                 new Container
                 {
-                    Anchor = Anchor.BottomCentre,
+                    RelativeSizeAxes = Axes.X,
-                    Origin = Anchor.BottomCentre,
+                    AutoSizeAxes = Axes.Y,
-                    RelativeSizeAxes = Axes.Both,
+                    Padding = new MarginPadding(10),
-                    Height = 0.5f,
                     Children = new Drawable[]
                     {
-                        bottomBackground = new Box { RelativeSizeAxes = Axes.Both },
+                        new AutoSizingGrid
-                        middleLine = new Box
                         {
                             RelativeSizeAxes = Axes.X,
-                            Height = 1,
+                            Content = new[]
-                        },
-                        rank = new DrawableRank(ScoreRank.F)
                             {
-                            Origin = Anchor.BottomLeft,
+                                new Drawable[]
-                            Size = new Vector2(avatar_size, 40),
-                            FillMode = FillMode.Fit,
-                            Y = height / 4,
-                            Margin = new MarginPadding { Left = margin }
-                        },
-                        new FillFlowContainer<InfoColumn>
                                 {
-                            Origin = Anchor.BottomLeft,
+                                    userSection = new TopScoreUserSection
-                            AutoSizeAxes = Axes.Both,
-                            Position = new Vector2(height / 2, height / 4),
-                            Direction = FillDirection.Horizontal,
-                            Spacing = new Vector2(15, 0),
-                            Children = new[]
                                     {
-                                totalScore = new InfoColumn("Score"),
+                                        Anchor = Anchor.CentreLeft,
-                                accuracy = new InfoColumn("Accuracy"),
+                                        Origin = Anchor.CentreLeft,
-                                statistics = new InfoColumn("300/100/50"),
                                     },
-                        },
+                                    null,
-                        modsContainer = new ScoreModsContainer
+                                    statisticsSection = new TopScoreStatisticsSection
                                     {
-                            AutoSizeAxes = Axes.Y,
+                                        Anchor = Anchor.CentreRight,
-                            Width = 80,
+                                        Origin = Anchor.CentreRight,
-                            Position = new Vector2(height / 2, height / 4),
-                        }
                                     }
                                 },
+                            },
+                            ColumnDimensions = new[] { new Dimension(GridSizeMode.AutoSize), new Dimension(GridSizeMode.Absolute, 20) },
+                            RowDimensions = new[] { new Dimension(GridSizeMode.AutoSize) },
+                        }
+                    }
+                }
             };
         }
 
         [BackgroundDependencyLoader]
         private void load(OsuColour colours)
         {
-            background.Colour = bottomBackground.Colour = colours.Gray4;
+            backgroundIdleColour = colours.Gray3;
-            middleLine.Colour = colours.Gray2;
+            backgroundHoveredColour = colours.Gray4;
-            date.Colour = colours.Gray9;
+
-            BorderColour = rankText.Colour = colours.Yellow;
+            background.Colour = backgroundIdleColour;
+        }
+
+        /// <summary>
+        /// Sets the score to be displayed.
+        /// </summary>
+        public ScoreInfo Score
+        {
+            set
+            {
+                userSection.Score = value;
+                statisticsSection.Score = value;
+            }
         }
 
         protected override bool OnHover(HoverEvent e)
         {
-            background.FadeIn(fade_duration, Easing.OutQuint);
+            background.FadeColour(backgroundHoveredColour, fade_duration, Easing.OutQuint);
             return base.OnHover(e);
         }
 
         protected override void OnHoverLost(HoverLostEvent e)
         {
-            background.FadeOut(fade_duration, Easing.OutQuint);
+            background.FadeColour(backgroundIdleColour, fade_duration, Easing.OutQuint);
             base.OnHoverLost(e);
         }
 
-        private class InfoColumn : FillFlowContainer
+        private class AutoSizingGrid : GridContainer
         {
-            private readonly OsuSpriteText headerText;
+            public AutoSizingGrid()
-            private readonly OsuSpriteText valueText;
-
-            public string Value
             {
-                set
+                AutoSizeAxes = Axes.Y;
-                {
-                    if (valueText.Text == value)
-                        return;
-
-                    valueText.Text = value;
-                }
-                get => valueText.Text;
-            }
-
-            public InfoColumn(string header)
-            {
-                AutoSizeAxes = Axes.Both;
-                Direction = FillDirection.Vertical;
-                Spacing = new Vector2(0, 3);
-                Children = new Drawable[]
-                {
-                    headerText = new OsuSpriteText
-                    {
-                        Text = header,
-                        Font = OsuFont.GetFont(size: 14, weight: FontWeight.Bold)
-                    },
-                    valueText = new OsuSpriteText { Font = OsuFont.GetFont(size: 25, weight: FontWeight.Regular, italics: true) }
-                };
-            }
-
-            [BackgroundDependencyLoader]
-            private void load(OsuColour colours)
-            {
-                headerText.Colour = colours.Gray9;
             }
         }
     }

osu.Game/Overlays/BeatmapSet/Scores/ScoreTable.cs

@@ -0,0 +1,192 @@
+// 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.Graphics;
+using osu.Framework.Graphics.Containers;
+using System.Collections.Generic;
+using System.Linq;
+using osu.Framework.Allocation;
+using osu.Framework.Extensions;
+using osu.Game.Graphics;
+using osu.Game.Graphics.Containers;
+using osu.Game.Graphics.Sprites;
+using osu.Game.Online.Leaderboards;
+using osu.Game.Rulesets.UI;
+using osu.Game.Scoring;
+using osu.Game.Users;
+using osuTK;
+using osuTK.Graphics;
+
+namespace osu.Game.Overlays.BeatmapSet.Scores
+{
+    public class ScoreTable : TableContainer
+    {
+        private const float horizontal_inset = 20;
+        private const float row_height = 25;
+        private const int text_size = 14;
+
+        private readonly FillFlowContainer backgroundFlow;
+
+        private Color4 highAccuracyColour;
+
+        public ScoreTable()
+        {
+            RelativeSizeAxes = Axes.X;
+            AutoSizeAxes = Axes.Y;
+
+            Padding = new MarginPadding { Horizontal = horizontal_inset };
+            RowSize = new Dimension(GridSizeMode.Absolute, row_height);
+
+            AddInternal(backgroundFlow = new FillFlowContainer
+            {
+                RelativeSizeAxes = Axes.Both,
+                Depth = 1f,
+                Padding = new MarginPadding { Horizontal = -horizontal_inset },
+                Margin = new MarginPadding { Top = row_height }
+            });
+        }
+
+        [BackgroundDependencyLoader]
+        private void load(OsuColour colours)
+        {
+            highAccuracyColour = colours.GreenLight;
+        }
+
+        public IReadOnlyList<ScoreInfo> Scores
+        {
+            set
+            {
+                Content = null;
+                backgroundFlow.Clear();
+
+                if (value == null || !value.Any())
+                    return;
+
+                for (int i = 0; i < value.Count; i++)
+                    backgroundFlow.Add(new ScoreTableRowBackground(i));
+
+                Columns = createHeaders(value[0]);
+                Content = value.Select((s, i) => createContent(i, s)).ToArray().ToRectangular();
+            }
+        }
+
+        private TableColumn[] createHeaders(ScoreInfo score)
+        {
+            var columns = new List<TableColumn>
+            {
+                new TableColumn("rank", Anchor.CentreRight, new Dimension(GridSizeMode.AutoSize)),
+                new TableColumn("", Anchor.Centre, new Dimension(GridSizeMode.Absolute, 70)), // grade
+                new TableColumn("score", Anchor.CentreLeft, new Dimension(GridSizeMode.AutoSize)),
+                new TableColumn("accuracy", Anchor.CentreLeft, new Dimension(GridSizeMode.AutoSize)),
+                new TableColumn("player", Anchor.CentreLeft, new Dimension(GridSizeMode.Distributed, minSize: 150)),
+                new TableColumn("max combo", Anchor.CentreLeft, new Dimension(GridSizeMode.Distributed, minSize: 70, maxSize: 90))
+            };
+
+            foreach (var statistic in score.Statistics)
+                columns.Add(new TableColumn(statistic.Key.GetDescription(), Anchor.CentreLeft, new Dimension(GridSizeMode.Distributed, minSize: 50, maxSize: 70)));
+
+            columns.AddRange(new[]
+            {
+                new TableColumn("pp", Anchor.CentreLeft, new Dimension(GridSizeMode.Distributed, minSize: 40, maxSize: 70)),
+                new TableColumn("mods", Anchor.CentreLeft, new Dimension(GridSizeMode.AutoSize)),
+            });
+
+            return columns.ToArray();
+        }
+
+        private Drawable[] createContent(int index, ScoreInfo score)
+        {
+            var content = new List<Drawable>
+            {
+                new OsuSpriteText
+                {
+                    Text = $"#{index + 1}",
+                    Font = OsuFont.GetFont(size: text_size, weight: FontWeight.Bold)
+                },
+                new DrawableRank(score.Rank)
+                {
+                    Size = new Vector2(30, 20)
+                },
+                new OsuSpriteText
+                {
+                    Margin = new MarginPadding { Right = horizontal_inset },
+                    Text = $@"{score.TotalScore:N0}",
+                    Font = OsuFont.GetFont(size: text_size, weight: index == 0 ? FontWeight.Bold : FontWeight.Medium)
+                },
+                new OsuSpriteText
+                {
+                    Margin = new MarginPadding { Right = horizontal_inset },
+                    Text = $@"{score.Accuracy:P2}",
+                    Font = OsuFont.GetFont(size: text_size),
+                    Colour = score.Accuracy == 1 ? highAccuracyColour : Color4.White
+                },
+            };
+
+            var username = new LinkFlowContainer(t => t.Font = OsuFont.GetFont(size: text_size)) { AutoSizeAxes = Axes.Both };
+            username.AddUserLink(score.User);
+
+            content.AddRange(new Drawable[]
+            {
+                new FillFlowContainer
+                {
+                    AutoSizeAxes = Axes.Both,
+                    Direction = FillDirection.Horizontal,
+                    Margin = new MarginPadding { Right = horizontal_inset },
+                    Spacing = new Vector2(5, 0),
+                    Children = new Drawable[]
+                    {
+                        new DrawableFlag(score.User.Country) { Size = new Vector2(20, 13) },
+                        username
+                    }
+                },
+                new OsuSpriteText
+                {
+                    Text = $@"{score.MaxCombo:N0}x",
+                    Font = OsuFont.GetFont(size: text_size)
+                }
+            });
+
+            foreach (var kvp in score.Statistics)
+            {
+                content.Add(new OsuSpriteText
+                {
+                    Text = $"{kvp.Value}",
+                    Font = OsuFont.GetFont(size: text_size),
+                    Colour = kvp.Value == 0 ? Color4.Gray : Color4.White
+                });
+            }
+
+            content.AddRange(new Drawable[]
+            {
+                new OsuSpriteText
+                {
+                    Text = $@"{score.PP:N0}",
+                    Font = OsuFont.GetFont(size: text_size)
+                },
+                new FillFlowContainer
+                {
+                    Direction = FillDirection.Horizontal,
+                    AutoSizeAxes = Axes.Both,
+                    ChildrenEnumerable = score.Mods.Select(m => new ModIcon(m)
+                    {
+                        AutoSizeAxes = Axes.Both,
+                        Scale = new Vector2(0.3f)
+                    })
+                },
+            });
+
+            return content.ToArray();
+        }
+
+        protected override Drawable CreateHeader(int index, TableColumn column) => new HeaderText(column?.Header ?? string.Empty);
+
+        private class HeaderText : OsuSpriteText
+        {
+            public HeaderText(string text)
+            {
+                Text = text.ToUpper();
+                Font = OsuFont.GetFont(size: 12, weight: FontWeight.Black);
+            }
+        }
+    }
+}

osu.Game/Overlays/BeatmapSet/Scores/ScoreTableRowBackground.cs

@@ -0,0 +1,64 @@
+// 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.Graphics;
+using osu.Framework.Graphics.Containers;
+using osu.Framework.Graphics.Shapes;
+using osu.Framework.Input.Events;
+using osu.Game.Graphics;
+
+namespace osu.Game.Overlays.BeatmapSet.Scores
+{
+    public class ScoreTableRowBackground : CompositeDrawable
+    {
+        private const int fade_duration = 100;
+
+        private readonly Box hoveredBackground;
+        private readonly Box background;
+
+        public ScoreTableRowBackground(int index)
+        {
+            RelativeSizeAxes = Axes.X;
+            Height = 25;
+
+            CornerRadius = 3;
+            Masking = true;
+
+            InternalChildren = new Drawable[]
+            {
+                background = new Box
+                {
+                    RelativeSizeAxes = Axes.Both,
+                },
+                hoveredBackground = new Box
+                {
+                    RelativeSizeAxes = Axes.Both,
+                    Alpha = 0,
+                },
+            };
+
+            if (index % 2 != 0)
+                background.Alpha = 0;
+        }
+
+        [BackgroundDependencyLoader]
+        private void load(OsuColour colours)
+        {
+            hoveredBackground.Colour = colours.Gray4;
+            background.Colour = colours.Gray3;
+        }
+
+        protected override bool OnHover(HoverEvent e)
+        {
+            hoveredBackground.FadeIn(fade_duration, Easing.OutQuint);
+            return base.OnHover(e);
+        }
+
+        protected override void OnHoverLost(HoverLostEvent e)
+        {
+            hoveredBackground.FadeOut(fade_duration, Easing.OutQuint);
+            base.OnHoverLost(e);
+        }
+    }
+}

osu.Game/Overlays/BeatmapSet/Scores/ScoresContainer.cs

@@ -1,38 +1,91 @@
 // 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 osuTK;
+using osu.Framework.Allocation;
 using osu.Framework.Graphics;
 using osu.Framework.Graphics.Containers;
+using osu.Framework.Graphics.Shapes;
+using osu.Game.Beatmaps;
+using osu.Game.Graphics;
 using osu.Game.Graphics.UserInterface;
+using osu.Game.Online.API;
 using osu.Game.Online.API.Requests;
+using osuTK;
 using System.Collections.Generic;
 using System.Linq;
-using osu.Framework.Allocation;
-using osu.Game.Beatmaps;
-using osu.Game.Online.API;
 using osu.Game.Scoring;
 
 namespace osu.Game.Overlays.BeatmapSet.Scores
 {
-    public class ScoresContainer : Container
+    public class ScoresContainer : CompositeDrawable
     {
         private const int spacing = 15;
         private const int fade_duration = 200;
 
-        private readonly FillFlowContainer flow;
+        private readonly Box background;
+        private readonly ScoreTable scoreTable;
+
         private readonly DrawableTopScore topScore;
         private readonly LoadingAnimation loadingAnimation;
 
+        [Resolved]
+        private IAPIProvider api { get; set; }
+
+        public ScoresContainer()
+        {
+            RelativeSizeAxes = Axes.X;
+            AutoSizeAxes = Axes.Y;
+
+            InternalChildren = new Drawable[]
+            {
+                background = new Box
+                {
+                    RelativeSizeAxes = Axes.Both,
+                },
+                new FillFlowContainer
+                {
+                    Anchor = Anchor.TopCentre,
+                    Origin = Anchor.TopCentre,
+                    RelativeSizeAxes = Axes.X,
+                    AutoSizeAxes = Axes.Y,
+                    Width = 0.95f,
+                    Direction = FillDirection.Vertical,
+                    Spacing = new Vector2(0, spacing),
+                    Margin = new MarginPadding { Vertical = spacing },
+                    Children = new Drawable[]
+                    {
+                        topScore = new DrawableTopScore(),
+                        scoreTable = new ScoreTable
+                        {
+                            Anchor = Anchor.TopCentre,
+                            Origin = Anchor.TopCentre,
+                        }
+                    }
+                },
+                loadingAnimation = new LoadingAnimation
+                {
+                    Alpha = 0,
+                    Margin = new MarginPadding(20)
+                },
+            };
+        }
+
+        [BackgroundDependencyLoader]
+        private void load(OsuColour colours)
+        {
+            background.Colour = colours.Gray2;
+            updateDisplay();
+        }
+
         private bool loading
         {
             set => loadingAnimation.FadeTo(value ? 1 : 0, fade_duration);
         }
 
-        private IEnumerable<ScoreInfo> scores;
+        private GetScoresRequest getScoresRequest;
-        private BeatmapInfo beatmap;
+        private IReadOnlyList<ScoreInfo> scores;
 
-        public IEnumerable<ScoreInfo> Scores
+        public IReadOnlyList<ScoreInfo> Scores
         {
             get => scores;
             set
@@ -44,8 +97,7 @@ namespace osu.Game.Overlays.BeatmapSet.Scores
             }
         }
 
-        private GetScoresRequest getScoresRequest;
+        private BeatmapInfo beatmap;
-        private IAPIProvider api;
 
         public BeatmapInfo Beatmap
         {
@@ -71,68 +123,15 @@ namespace osu.Game.Overlays.BeatmapSet.Scores
         {
             loading = false;
 
-            var scoreCount = scores?.Count() ?? 0;
+            scoreTable.Scores = scores?.Count > 1 ? scores : new List<ScoreInfo>();
 
-            if (scoreCount == 0)
+            if (scores?.Any() == true)
             {
-                topScore.Hide();
-                flow.Clear();
-                return;
-            }
-
                 topScore.Score = scores.FirstOrDefault();
                 topScore.Show();
-
-            flow.Clear();
-
-            if (scoreCount < 2)
-                return;
-
-            for (int i = 1; i < scoreCount; i++)
-                flow.Add(new DrawableScore(i, scores.ElementAt(i)));
             }
-
+            else
-        public ScoresContainer()
+                topScore.Hide();
-        {
-            RelativeSizeAxes = Axes.X;
-            AutoSizeAxes = Axes.Y;
-            Children = new Drawable[]
-            {
-                new FillFlowContainer
-                {
-                    Anchor = Anchor.TopCentre,
-                    Origin = Anchor.TopCentre,
-                    RelativeSizeAxes = Axes.X,
-                    AutoSizeAxes = Axes.Y,
-                    Width = 0.95f,
-                    Direction = FillDirection.Vertical,
-                    Spacing = new Vector2(0, spacing),
-                    Margin = new MarginPadding { Vertical = spacing },
-                    Children = new Drawable[]
-                    {
-                        topScore = new DrawableTopScore(),
-                        flow = new FillFlowContainer
-                        {
-                            RelativeSizeAxes = Axes.X,
-                            AutoSizeAxes = Axes.Y,
-                            Direction = FillDirection.Vertical,
-                            Spacing = new Vector2(0, 1),
-                        },
-                    }
-                },
-                loadingAnimation = new LoadingAnimation
-                {
-                    Alpha = 0,
-                    Margin = new MarginPadding(20)
-                },
-            };
-        }
-
-        [BackgroundDependencyLoader]
-        private void load(IAPIProvider api)
-        {
-            this.api = api;
-            updateDisplay();
         }
 
         protected override void Dispose(bool isDisposing)

osu.Game/Overlays/BeatmapSet/Scores/TopScoreStatisticsSection.cs

@@ -0,0 +1,204 @@
+// 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 System.Linq;
+using osu.Framework.Allocation;
+using osu.Framework.Extensions;
+using osu.Framework.Graphics;
+using osu.Framework.Graphics.Containers;
+using osu.Framework.Graphics.Shapes;
+using osu.Framework.Graphics.Sprites;
+using osu.Framework.Localisation;
+using osu.Game.Graphics;
+using osu.Game.Graphics.Sprites;
+using osu.Game.Rulesets.Mods;
+using osu.Game.Rulesets.Scoring;
+using osu.Game.Rulesets.UI;
+using osu.Game.Scoring;
+using osuTK;
+
+namespace osu.Game.Overlays.BeatmapSet.Scores
+{
+    public class TopScoreStatisticsSection : CompositeDrawable
+    {
+        private const float margin = 10;
+
+        private readonly FontUsage smallFont = OsuFont.GetFont(size: 20);
+        private readonly FontUsage largeFont = OsuFont.GetFont(size: 25);
+
+        private readonly TextColumn totalScoreColumn;
+        private readonly TextColumn accuracyColumn;
+        private readonly TextColumn maxComboColumn;
+        private readonly TextColumn ppColumn;
+
+        private readonly FillFlowContainer<InfoColumn> statisticsColumns;
+        private readonly ModsInfoColumn modsColumn;
+
+        public TopScoreStatisticsSection()
+        {
+            RelativeSizeAxes = Axes.X;
+            AutoSizeAxes = Axes.Y;
+
+            InternalChild = new FillFlowContainer
+            {
+                RelativeSizeAxes = Axes.X,
+                AutoSizeAxes = Axes.Y,
+                Spacing = new Vector2(10, 0),
+                Children = new Drawable[]
+                {
+                    new FillFlowContainer
+                    {
+                        Anchor = Anchor.TopRight,
+                        Origin = Anchor.TopRight,
+                        AutoSizeAxes = Axes.Both,
+                        Direction = FillDirection.Horizontal,
+                        Spacing = new Vector2(margin, 0),
+                        Children = new Drawable[]
+                        {
+                            statisticsColumns = new FillFlowContainer<InfoColumn>
+                            {
+                                AutoSizeAxes = Axes.Both,
+                                Direction = FillDirection.Horizontal,
+                                Spacing = new Vector2(margin, 0),
+                            },
+                            ppColumn = new TextColumn("pp", smallFont),
+                            modsColumn = new ModsInfoColumn(),
+                        }
+                    },
+                    new FillFlowContainer
+                    {
+                        Anchor = Anchor.TopRight,
+                        Origin = Anchor.TopRight,
+                        AutoSizeAxes = Axes.Both,
+                        Direction = FillDirection.Horizontal,
+                        Spacing = new Vector2(margin, 0),
+                        Children = new Drawable[]
+                        {
+                            totalScoreColumn = new TextColumn("total score", largeFont),
+                            accuracyColumn = new TextColumn("accuracy", largeFont),
+                            maxComboColumn = new TextColumn("max combo", largeFont)
+                        }
+                    },
+                }
+            };
+        }
+
+        /// <summary>
+        /// Sets the score to be displayed.
+        /// </summary>
+        public ScoreInfo Score
+        {
+            set
+            {
+                totalScoreColumn.Text = $@"{value.TotalScore:N0}";
+                accuracyColumn.Text = $@"{value.Accuracy:P2}";
+                maxComboColumn.Text = $@"{value.MaxCombo:N0}x";
+                ppColumn.Text = $@"{value.PP:N0}";
+
+                statisticsColumns.ChildrenEnumerable = value.Statistics.Select(kvp => createStatisticsColumn(kvp.Key, kvp.Value));
+                modsColumn.Mods = value.Mods;
+            }
+        }
+
+        private TextColumn createStatisticsColumn(HitResult hitResult, int count) => new TextColumn(hitResult.GetDescription(), smallFont)
+        {
+            Text = count.ToString()
+        };
+
+        private class InfoColumn : CompositeDrawable
+        {
+            private readonly Box separator;
+
+            public InfoColumn(string title, Drawable content)
+            {
+                AutoSizeAxes = Axes.Both;
+
+                InternalChild = new FillFlowContainer
+                {
+                    AutoSizeAxes = Axes.Both,
+                    Direction = FillDirection.Vertical,
+                    Spacing = new Vector2(0, 2),
+                    Children = new[]
+                    {
+                        new OsuSpriteText
+                        {
+                            Font = OsuFont.GetFont(size: 12, weight: FontWeight.Black),
+                            Text = title.ToUpper()
+                        },
+                        separator = new Box
+                        {
+                            RelativeSizeAxes = Axes.X,
+                            Height = 2
+                        },
+                        content
+                    }
+                };
+            }
+
+            [BackgroundDependencyLoader]
+            private void load(OsuColour colours)
+            {
+                separator.Colour = colours.Gray5;
+            }
+        }
+
+        private class TextColumn : InfoColumn
+        {
+            private readonly SpriteText text;
+
+            public TextColumn(string title, FontUsage font)
+                : this(title, new OsuSpriteText { Font = font })
+            {
+            }
+
+            private TextColumn(string title, SpriteText text)
+                : base(title, text)
+            {
+                this.text = text;
+            }
+
+            public LocalisedString Text
+            {
+                set => text.Text = value;
+            }
+        }
+
+        private class ModsInfoColumn : InfoColumn
+        {
+            private readonly FillFlowContainer modsContainer;
+
+            public ModsInfoColumn()
+                : this(new FillFlowContainer
+                {
+                    AutoSizeAxes = Axes.Both,
+                    Direction = FillDirection.Horizontal
+                })
+            {
+            }
+
+            private ModsInfoColumn(FillFlowContainer modsContainer)
+                : base("mods", modsContainer)
+            {
+                this.modsContainer = modsContainer;
+            }
+
+            public IEnumerable<Mod> Mods
+            {
+                set
+                {
+                    modsContainer.Clear();
+
+                    foreach (Mod mod in value)
+                    {
+                        modsContainer.Add(new ModIcon(mod)
+                        {
+                            AutoSizeAxes = Axes.Both,
+                            Scale = new Vector2(0.3f),
+                        });
+                    }
+                }
+            }
+        }
+    }
+}

osu.Game/Overlays/BeatmapSet/Scores/TopScoreUserSection.cs

@@ -0,0 +1,127 @@
+// 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 Humanizer;
+using osu.Framework.Allocation;
+using osu.Framework.Extensions.Color4Extensions;
+using osu.Framework.Graphics;
+using osu.Framework.Graphics.Containers;
+using osu.Framework.Graphics.Sprites;
+using osu.Game.Graphics;
+using osu.Game.Graphics.Containers;
+using osu.Game.Graphics.Sprites;
+using osu.Game.Online.Leaderboards;
+using osu.Game.Scoring;
+using osu.Game.Users;
+using osuTK;
+using osuTK.Graphics;
+
+namespace osu.Game.Overlays.BeatmapSet.Scores
+{
+    public class TopScoreUserSection : CompositeDrawable
+    {
+        private readonly SpriteText rankText;
+        private readonly DrawableRank rank;
+        private readonly UpdateableAvatar avatar;
+        private readonly LinkFlowContainer usernameText;
+        private readonly SpriteText date;
+        private readonly DrawableFlag flag;
+
+        public TopScoreUserSection()
+        {
+            AutoSizeAxes = Axes.Both;
+
+            InternalChild = new FillFlowContainer
+            {
+                AutoSizeAxes = Axes.Both,
+                Direction = FillDirection.Horizontal,
+                Spacing = new Vector2(10, 0),
+                Children = new Drawable[]
+                {
+                    rankText = new OsuSpriteText
+                    {
+                        Anchor = Anchor.Centre,
+                        Origin = Anchor.Centre,
+                        Text = "#1",
+                        Font = OsuFont.GetFont(size: 30, weight: FontWeight.Bold, italics: true)
+                    },
+                    rank = new DrawableRank(ScoreRank.F)
+                    {
+                        Anchor = Anchor.Centre,
+                        Origin = Anchor.Centre,
+                        Size = new Vector2(40),
+                        FillMode = FillMode.Fit,
+                    },
+                    avatar = new UpdateableAvatar
+                    {
+                        Anchor = Anchor.Centre,
+                        Origin = Anchor.Centre,
+                        Size = new Vector2(80),
+                        Masking = true,
+                        CornerRadius = 5,
+                        EdgeEffect = new EdgeEffectParameters
+                        {
+                            Type = EdgeEffectType.Shadow,
+                            Colour = Color4.Black.Opacity(0.25f),
+                            Offset = new Vector2(0, 2),
+                            Radius = 1,
+                        },
+                    },
+                    new FillFlowContainer
+                    {
+                        Anchor = Anchor.Centre,
+                        Origin = Anchor.Centre,
+                        AutoSizeAxes = Axes.Both,
+                        Direction = FillDirection.Vertical,
+                        Spacing = new Vector2(0, 3),
+                        Children = new Drawable[]
+                        {
+                            usernameText = new LinkFlowContainer(s => s.Font = OsuFont.GetFont(size: 20, weight: FontWeight.Bold, italics: true))
+                            {
+                                Anchor = Anchor.CentreLeft,
+                                Origin = Anchor.CentreLeft,
+                                AutoSizeAxes = Axes.Both,
+                            },
+                            date = new SpriteText
+                            {
+                                Anchor = Anchor.CentreLeft,
+                                Origin = Anchor.CentreLeft,
+                                Font = OsuFont.GetFont(size: 15, weight: FontWeight.Bold)
+                            },
+                            flag = new DrawableFlag
+                            {
+                                Anchor = Anchor.CentreLeft,
+                                Origin = Anchor.CentreLeft,
+                                Size = new Vector2(20, 13),
+                            },
+                        }
+                    }
+                }
+            };
+        }
+
+        [BackgroundDependencyLoader]
+        private void load(OsuColour colours)
+        {
+            rankText.Colour = colours.Yellow;
+        }
+
+        /// <summary>
+        /// Sets the score to be displayed.
+        /// </summary>
+        public ScoreInfo Score
+        {
+            set
+            {
+                avatar.User = value.User;
+                flag.Country = value.User.Country;
+                date.Text = $@"achieved {value.Date.Humanize()}";
+
+                usernameText.Clear();
+                usernameText.AddUserLink(value.User);
+
+                rank.UpdateRank(value.Rank);
+            }
+        }
+    }
+}

osu.Game/Screens/Multi/Components/BeatmapTypeInfo.cs

@@ -6,7 +6,6 @@ using osu.Framework.Graphics;
 using osu.Framework.Graphics.Containers;
 using osu.Game.Graphics;
 using osu.Game.Graphics.Containers;
-using osu.Game.Online.Chat;
 using osuTK;
 
 namespace osu.Game.Screens.Multi.Components
@@ -60,7 +59,7 @@ namespace osu.Game.Screens.Multi.Components
                 if (beatmap != null)
                 {
                     beatmapAuthor.AddText("mapped by ", s => s.Colour = OsuColour.Gray(0.8f));
-                    beatmapAuthor.AddLink(beatmap.Metadata.Author.Username, null, LinkAction.OpenUserProfile, beatmap.Metadata.Author.Id.ToString(), "View Profile");
+                    beatmapAuthor.AddUserLink(beatmap.Metadata.Author);
                 }
             }, true);
         }

osu.Game/Screens/Multi/Lounge/Components/ParticipantInfo.cs

@@ -8,7 +8,6 @@ using osu.Framework.Graphics.Containers;
 using osu.Game.Graphics;
 using osu.Game.Graphics.Containers;
 using osu.Game.Graphics.Sprites;
-using osu.Game.Online.Chat;
 using osu.Game.Users;
 using osuTK;
 
@@ -95,8 +94,8 @@ namespace osu.Game.Screens.Multi.Lounge.Components
                 if (host.NewValue != null)
                 {
                     hostText.AddText("hosted by ");
-                    hostText.AddLink(host.NewValue.Username, null, LinkAction.OpenUserProfile, host.NewValue.Id.ToString(), "Open profile",
+                    hostText.AddUserLink(host.NewValue, s => s.Font = s.Font.With(Typeface.Exo, weight: FontWeight.Bold, italics: true));
-                        s => s.Font = s.Font.With(Typeface.Exo, weight: FontWeight.Bold, italics: true));
+
                     flagContainer.Child = new DrawableFlag(host.NewValue.Country) { RelativeSizeAxes = Axes.Both };
                 }
             }, true);

osu.Game/Screens/Multi/Match/Components/HostInfo.cs

@@ -6,7 +6,6 @@ using osu.Framework.Graphics;
 using osu.Framework.Graphics.Containers;
 using osu.Game.Graphics;
 using osu.Game.Graphics.Containers;
-using osu.Game.Online.Chat;
 using osu.Game.Users;
 using osuTK;
 
@@ -54,8 +53,7 @@ namespace osu.Game.Screens.Multi.Match.Components
             {
                 linkContainer.AddText("hosted by");
                 linkContainer.NewLine();
-                linkContainer.AddLink(host.Username, null, LinkAction.OpenUserProfile, host.Id.ToString(), "View Profile",
+                linkContainer.AddUserLink(host, s => s.Font = s.Font.With(Typeface.Exo, weight: FontWeight.Bold, italics: true));
-                    s => s.Font = s.Font.With(Typeface.Exo, weight: FontWeight.Bold, italics: true));
             }
         }
     }

osu.Game/osu.Game.csproj

@@ -16,7 +16,7 @@
     <PackageReference Include="Microsoft.EntityFrameworkCore.Sqlite.Core" Version="2.2.3" />
     <PackageReference Include="Newtonsoft.Json" Version="12.0.1" />
     <PackageReference Include="ppy.osu.Game.Resources" Version="2019.128.0" />
-    <PackageReference Include="ppy.osu.Framework" Version="2019.402.0" />
+    <PackageReference Include="ppy.osu.Framework" Version="2019.405.0" />
     <PackageReference Include="SharpCompress" Version="0.23.0" />
     <PackageReference Include="NUnit" Version="3.11.0" />
     <PackageReference Include="SharpRaven" Version="2.4.0" />

osu.iOS.props

@@ -105,8 +105,8 @@
     <PackageReference Include="Microsoft.EntityFrameworkCore.Sqlite.Core" Version="2.2.1" />
     <PackageReference Include="Newtonsoft.Json" Version="12.0.1" />
     <PackageReference Include="ppy.osu.Game.Resources" Version="2019.128.0" />
-    <PackageReference Include="ppy.osu.Framework" Version="2019.402.0" />
+    <PackageReference Include="ppy.osu.Framework" Version="2019.405.0" />
-    <PackageReference Include="ppy.osu.Framework.iOS" Version="2019.402.0" />
+    <PackageReference Include="ppy.osu.Framework.iOS" Version="2019.405.0" />
     <PackageReference Include="SharpCompress" Version="0.22.0" />
     <PackageReference Include="NUnit" Version="3.11.0" />
     <PackageReference Include="SharpRaven" Version="2.4.0" />