Merge pull request #11191 from frenzibyte/gameplay-leaderboard-update

Update gameplay leaderboard scores in-line with the new design

osu.Game.Tests/Visual/Gameplay/TestSceneGameplayLeaderboard.cs

@@ -6,6 +6,7 @@ using NUnit.Framework;
 using osu.Framework.Bindables;
 using osu.Framework.Graphics;
 using osu.Framework.Testing;
+using osu.Framework.Utils;
 using osu.Game.Screens.Play.HUD;
 using osu.Game.Users;
 using osuTK;
@@ -26,7 +27,6 @@ namespace osu.Game.Tests.Visual.Gameplay
                 Anchor = Anchor.Centre,
                 Origin = Anchor.Centre,
                 Scale = new Vector2(2),
-                RelativeSizeAxes = Axes.X,
             });
         }
 
@@ -39,7 +39,7 @@ namespace osu.Game.Tests.Visual.Gameplay
                 playerScore.Value = 1222333;
             });
 
-            AddStep("add player user", () => leaderboard.AddPlayer(playerScore, new User { Username = "You" }));
+            AddStep("add local player", () => createLeaderboardScore(playerScore, new User { Username = "You", Id = 3 }, true));
             AddSliderStep("set player score", 50, 5000000, 1222333, v => playerScore.Value = v);
         }
 
@@ -49,8 +49,8 @@ namespace osu.Game.Tests.Visual.Gameplay
             var player2Score = new BindableDouble(1234567);
             var player3Score = new BindableDouble(1111111);
 
-            AddStep("add player 2", () => leaderboard.AddPlayer(player2Score, new User { Username = "Player 2" }));
+            AddStep("add player 2", () => createLeaderboardScore(player2Score, new User { Username = "Player 2" }));
-            AddStep("add player 3", () => leaderboard.AddPlayer(player3Score, new User { Username = "Player 3" }));
+            AddStep("add player 3", () => createLeaderboardScore(player3Score, new User { Username = "Player 3" }));
 
             AddAssert("is player 2 position #1", () => leaderboard.CheckPositionByUsername("Player 2", 1));
             AddAssert("is player position #2", () => leaderboard.CheckPositionByUsername("You", 2));
@@ -67,6 +67,30 @@ namespace osu.Game.Tests.Visual.Gameplay
             AddAssert("is player 2 position #3", () => leaderboard.CheckPositionByUsername("Player 2", 3));
         }
 
+        [Test]
+        public void TestRandomScores()
+        {
+            int playerNumber = 1;
+            AddRepeatStep("add player with random score", () => createRandomScore(new User { Username = $"Player {playerNumber++}" }), 10);
+        }
+
+        [Test]
+        public void TestExistingUsers()
+        {
+            AddStep("add peppy", () => createRandomScore(new User { Username = "peppy", Id = 2 }));
+            AddStep("add smoogipoo", () => createRandomScore(new User { Username = "smoogipoo", Id = 1040328 }));
+            AddStep("add flyte", () => createRandomScore(new User { Username = "flyte", Id = 3103765 }));
+            AddStep("add frenzibyte", () => createRandomScore(new User { Username = "frenzibyte", Id = 14210502 }));
+        }
+
+        private void createRandomScore(User user) => createLeaderboardScore(new BindableDouble(RNG.Next(0, 5_000_000)), user);
+
+        private void createLeaderboardScore(BindableDouble score, User user, bool isTracked = false)
+        {
+            var leaderboardScore = leaderboard.AddPlayer(user, isTracked);
+            leaderboardScore.TotalScore.BindTo(score);
+        }
+
         private class TestGameplayLeaderboard : GameplayLeaderboard
         {
             public bool CheckPositionByUsername(string username, int? expectedPosition)

osu.Game/Online/Leaderboards/LeaderboardScore.cs

@@ -24,8 +24,8 @@ using osu.Game.Scoring;
 using osu.Game.Users.Drawables;
 using osuTK;
 using osuTK.Graphics;
-using Humanizer;
 using osu.Game.Online.API;
+using osu.Game.Utils;
 
 namespace osu.Game.Online.Leaderboards
 {
@@ -358,7 +358,7 @@ namespace osu.Game.Online.Leaderboards
                     Anchor = Anchor.Centre,
                     Origin = Anchor.Centre,
                     Font = OsuFont.GetFont(size: 20, italics: true),
-                    Text = rank == null ? "-" : rank.Value.ToMetric(decimals: rank < 100000 ? 1 : 0),
+                    Text = rank == null ? "-" : rank.Value.FormatRank()
                 };
             }
 

osu.Game/Screens/Play/HUD/GameplayLeaderboard.cs

@@ -1,9 +1,8 @@
 // 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.Linq;
-using JetBrains.Annotations;
-using osu.Framework.Bindables;
 using osu.Framework.Graphics;
 using osu.Framework.Graphics.Containers;
 using osu.Game.Users;
@@ -15,8 +14,7 @@ namespace osu.Game.Screens.Play.HUD
     {
         public GameplayLeaderboard()
         {
-            RelativeSizeAxes = Axes.X;
+            Width = GameplayLeaderboardScore.EXTENDED_WIDTH + GameplayLeaderboardScore.SHEAR_WIDTH;
-            AutoSizeAxes = Axes.Y;
 
             Direction = FillDirection.Vertical;
 
@@ -29,32 +27,35 @@ namespace osu.Game.Screens.Play.HUD
         /// <summary>
         /// Adds a player to the leaderboard.
         /// </summary>
-        /// <param name="currentScore">The bindable current score of the player.</param>
         /// <param name="user">The player.</param>
-        public void AddPlayer([NotNull] BindableDouble currentScore, [NotNull] User user)
+        /// <param name="isTracked">
+        /// Whether the player should be tracked on the leaderboard.
+        /// Set to <c>true</c> for the local player or a player whose replay is currently being played.
+        /// </param>
+        public ILeaderboardScore AddPlayer(User user, bool isTracked)
         {
-            var scoreItem = addScore(currentScore.Value, user);
+            var drawable = new GameplayLeaderboardScore(user, isTracked)
-            currentScore.ValueChanged += s => scoreItem.TotalScore = s.NewValue;
-        }
-
-        private GameplayLeaderboardScore addScore(double totalScore, User user)
             {
-            var scoreItem = new GameplayLeaderboardScore
+                Anchor = Anchor.TopRight,
-            {
+                Origin = Anchor.TopRight,
-                User = user,
-                TotalScore = totalScore,
-                OnScoreChange = updateScores,
             };
 
-            Add(scoreItem);
+            base.Add(drawable);
-            updateScores();
+            drawable.TotalScore.BindValueChanged(_ => Scheduler.AddOnce(sort), true);
 
-            return scoreItem;
+            Height = Count * (GameplayLeaderboardScore.PANEL_HEIGHT + Spacing.Y);
+
+            return drawable;
         }
 
-        private void updateScores()
+        public sealed override void Add(GameplayLeaderboardScore drawable)
         {
-            var orderedByScore = this.OrderByDescending(i => i.TotalScore).ToList();
+            throw new NotSupportedException($"Use {nameof(AddPlayer)} instead.");
+        }
+
+        private void sort()
+        {
+            var orderedByScore = this.OrderByDescending(i => i.TotalScore.Value).ToList();
 
             for (int i = 0; i < Count; i++)
             {

osu.Game/Screens/Play/HUD/GameplayLeaderboardScore.cs

@@ -1,25 +1,39 @@
 // 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 Humanizer;
 using osu.Framework.Allocation;
+using osu.Framework.Bindables;
 using osu.Framework.Extensions.Color4Extensions;
 using osu.Framework.Graphics;
 using osu.Framework.Graphics.Containers;
+using osu.Framework.Graphics.Shapes;
 using osu.Game.Graphics;
 using osu.Game.Graphics.Sprites;
 using osu.Game.Users;
+using osu.Game.Users.Drawables;
+using osu.Game.Utils;
 using osuTK;
+using osuTK.Graphics;
 
 namespace osu.Game.Screens.Play.HUD
 {
-    public class GameplayLeaderboardScore : CompositeDrawable
+    public class GameplayLeaderboardScore : CompositeDrawable, ILeaderboardScore
     {
-        private readonly OsuSpriteText positionText, positionSymbol, userString;
+        public const float EXTENDED_WIDTH = 255f;
-        private readonly GlowingSpriteText scoreText;
 
-        public Action OnScoreChange;
+        private const float regular_width = 235f;
+
+        public const float PANEL_HEIGHT = 35f;
+
+        public const float SHEAR_WIDTH = PANEL_HEIGHT * panel_shear;
+
+        private const float panel_shear = 0.15f;
+
+        private OsuSpriteText positionText, scoreText, accuracyText, comboText, usernameText;
+
+        public BindableDouble TotalScore { get; } = new BindableDouble();
+        public BindableDouble Accuracy { get; } = new BindableDouble(1);
+        public BindableInt Combo { get; } = new BindableInt();
 
         private int? scorePosition;
 
@@ -28,109 +42,249 @@ namespace osu.Game.Screens.Play.HUD
             get => scorePosition;
             set
             {
+                if (value == scorePosition)
+                    return;
+
                 scorePosition = value;
 
                 if (scorePosition.HasValue)
-                    positionText.Text = $"#{scorePosition.Value.ToMetric(decimals: scorePosition < 100000 ? 1 : 0)}";
+                    positionText.Text = $"#{scorePosition.Value.FormatRank()}";
 
                 positionText.FadeTo(scorePosition.HasValue ? 1 : 0);
-                positionSymbol.FadeTo(scorePosition.HasValue ? 1 : 0);
+                updateColour();
             }
         }
 
-        private double totalScore;
+        public User User { get; }
 
-        public double TotalScore
+        private readonly bool trackedPlayer;
-        {
-            get => totalScore;
-            set
-            {
-                totalScore = value;
-                scoreText.Text = totalScore.ToString("N0");
 
-                OnScoreChange?.Invoke();
+        private Container mainFillContainer;
-            }
+        private Box centralFill;
-        }
 
-        private User user;
+        /// <summary>
+        /// Creates a new <see cref="GameplayLeaderboardScore"/>.
+        /// </summary>
+        /// <param name="user">The score's player.</param>
+        /// <param name="trackedPlayer">Whether the player is the local user or a replay player.</param>
+        public GameplayLeaderboardScore(User user, bool trackedPlayer)
+        {
+            User = user;
+            this.trackedPlayer = trackedPlayer;
 
-        public User User
+            Size = new Vector2(EXTENDED_WIDTH, PANEL_HEIGHT);
-        {
-            get => user;
-            set
-            {
-                user = value;
-                userString.Text = user?.Username;
-            }
-        }
-
-        public GameplayLeaderboardScore()
-        {
-            RelativeSizeAxes = Axes.X;
-            AutoSizeAxes = Axes.Y;
-
-            InternalChild = new Container
-            {
-                Masking = true,
-                Anchor = Anchor.TopCentre,
-                Origin = Anchor.TopCentre,
-                AutoSizeAxes = Axes.Both,
-                Children = new Drawable[]
-                {
-                    new FillFlowContainer
-                    {
-                        Anchor = Anchor.TopCentre,
-                        Origin = Anchor.TopRight,
-                        AutoSizeAxes = Axes.Both,
-                        Direction = FillDirection.Horizontal,
-                        Margin = new MarginPadding { Right = 2.5f },
-                        Spacing = new Vector2(2.5f),
-                        Children = new[]
-                        {
-                            positionText = new OsuSpriteText
-                            {
-                                Alpha = 0,
-                                Font = OsuFont.GetFont(size: 14, weight: FontWeight.Bold),
-                            },
-                            positionSymbol = new OsuSpriteText
-                            {
-                                Alpha = 0,
-                                Font = OsuFont.GetFont(size: 14, weight: FontWeight.SemiBold),
-                                Text = ">",
-                            },
-                        }
-                    },
-                    new FillFlowContainer
-                    {
-                        Anchor = Anchor.TopCentre,
-                        Origin = Anchor.TopLeft,
-                        AutoSizeAxes = Axes.Both,
-                        Direction = FillDirection.Horizontal,
-                        Margin = new MarginPadding { Left = 2.5f },
-                        Spacing = new Vector2(2.5f),
-                        Children = new Drawable[]
-                        {
-                            userString = new OsuSpriteText
-                            {
-                                Size = new Vector2(80, 16),
-                                Font = OsuFont.GetFont(size: 14, weight: FontWeight.Bold, italics: true),
-                            },
-                            scoreText = new GlowingSpriteText
-                            {
-                                GlowColour = Color4Extensions.FromHex(@"83ccfa"),
-                                Font = OsuFont.Numeric.With(size: 14),
-                            }
-                        }
-                    },
-                },
-            };
         }
 
         [BackgroundDependencyLoader]
         private void load(OsuColour colours)
         {
-            positionText.Colour = colours.YellowLight;
+            InternalChildren = new Drawable[]
-            positionSymbol.Colour = colours.Yellow;
+            {
+                mainFillContainer = new Container
+                {
+                    Width = regular_width,
+                    RelativeSizeAxes = Axes.Y,
+                    Anchor = Anchor.TopRight,
+                    Origin = Anchor.TopRight,
+                    Masking = true,
+                    CornerRadius = 5f,
+                    Shear = new Vector2(panel_shear, 0f),
+                    Child = new Box
+                    {
+                        Alpha = 0.5f,
+                        RelativeSizeAxes = Axes.Both,
+                    }
+                },
+                new GridContainer
+                {
+                    Width = regular_width,
+                    RelativeSizeAxes = Axes.Y,
+                    Anchor = Anchor.TopRight,
+                    Origin = Anchor.TopRight,
+                    ColumnDimensions = new[]
+                    {
+                        new Dimension(GridSizeMode.Absolute, 35f),
+                        new Dimension(),
+                        new Dimension(GridSizeMode.Absolute, 85f),
+                    },
+                    Content = new[]
+                    {
+                        new Drawable[]
+                        {
+                            positionText = new OsuSpriteText
+                            {
+                                Padding = new MarginPadding { Right = SHEAR_WIDTH / 2 },
+                                Anchor = Anchor.Centre,
+                                Origin = Anchor.Centre,
+                                Colour = Color4.White,
+                                Font = OsuFont.Torus.With(size: 14, weight: FontWeight.Bold),
+                                Shadow = false,
+                            },
+                            new Container
+                            {
+                                Padding = new MarginPadding { Horizontal = SHEAR_WIDTH / 3 },
+                                RelativeSizeAxes = Axes.Both,
+                                Children = new Drawable[]
+                                {
+                                    new Container
+                                    {
+                                        Masking = true,
+                                        CornerRadius = 5f,
+                                        Shear = new Vector2(panel_shear, 0f),
+                                        RelativeSizeAxes = Axes.Both,
+                                        Children = new[]
+                                        {
+                                            centralFill = new Box
+                                            {
+                                                Alpha = 0.5f,
+                                                RelativeSizeAxes = Axes.Both,
+                                                Colour = Color4Extensions.FromHex("3399cc"),
+                                            },
+                                        }
+                                    },
+                                    new FillFlowContainer
+                                    {
+                                        Padding = new MarginPadding { Left = SHEAR_WIDTH },
+                                        Anchor = Anchor.CentreLeft,
+                                        Origin = Anchor.CentreLeft,
+                                        RelativeSizeAxes = Axes.Both,
+                                        Direction = FillDirection.Horizontal,
+                                        Spacing = new Vector2(4f, 0f),
+                                        Children = new Drawable[]
+                                        {
+                                            new CircularContainer
+                                            {
+                                                Masking = true,
+                                                Anchor = Anchor.CentreLeft,
+                                                Origin = Anchor.CentreLeft,
+                                                Size = new Vector2(25f),
+                                                Children = new Drawable[]
+                                                {
+                                                    new Box
+                                                    {
+                                                        Name = "Placeholder while avatar loads",
+                                                        Alpha = 0.3f,
+                                                        RelativeSizeAxes = Axes.Both,
+                                                        Colour = colours.Gray4,
+                                                    },
+                                                    new UpdateableAvatar(User)
+                                                    {
+                                                        RelativeSizeAxes = Axes.Both,
+                                                    },
+                                                }
+                                            },
+                                            usernameText = new OsuSpriteText
+                                            {
+                                                RelativeSizeAxes = Axes.X,
+                                                Width = 0.8f,
+                                                Anchor = Anchor.CentreLeft,
+                                                Origin = Anchor.CentreLeft,
+                                                Colour = Color4.White,
+                                                Font = OsuFont.Torus.With(size: 14, weight: FontWeight.SemiBold),
+                                                Text = User.Username,
+                                                Truncate = true,
+                                                Shadow = false,
+                                            }
+                                        }
+                                    },
+                                }
+                            },
+                            new Container
+                            {
+                                Padding = new MarginPadding { Top = 2f, Right = 17.5f, Bottom = 5f },
+                                RelativeSizeAxes = Axes.Both,
+                                Anchor = Anchor.CentreLeft,
+                                Origin = Anchor.CentreLeft,
+                                Colour = Color4.White,
+                                Children = new Drawable[]
+                                {
+                                    scoreText = new OsuSpriteText
+                                    {
+                                        Spacing = new Vector2(-1f, 0f),
+                                        Font = OsuFont.Torus.With(size: 16, weight: FontWeight.SemiBold, fixedWidth: true),
+                                        Shadow = false,
+                                    },
+                                    accuracyText = new OsuSpriteText
+                                    {
+                                        Anchor = Anchor.BottomLeft,
+                                        Origin = Anchor.BottomLeft,
+                                        Font = OsuFont.Torus.With(size: 12, weight: FontWeight.SemiBold, fixedWidth: true),
+                                        Spacing = new Vector2(-1f, 0f),
+                                        Shadow = false,
+                                    },
+                                    comboText = new OsuSpriteText
+                                    {
+                                        Anchor = Anchor.BottomRight,
+                                        Origin = Anchor.BottomRight,
+                                        Spacing = new Vector2(-1f, 0f),
+                                        Font = OsuFont.Torus.With(size: 12, weight: FontWeight.SemiBold, fixedWidth: true),
+                                        Shadow = false,
+                                    },
+                                },
+                            }
+                        }
+                    }
+                }
+            };
+
+            TotalScore.BindValueChanged(v => scoreText.Text = v.NewValue.ToString("N0"), true);
+            Accuracy.BindValueChanged(v => accuracyText.Text = v.NewValue.FormatAccuracy(), true);
+            Combo.BindValueChanged(v => comboText.Text = $"{v.NewValue}x", true);
+        }
+
+        protected override void LoadComplete()
+        {
+            base.LoadComplete();
+
+            updateColour();
+            FinishTransforms(true);
+        }
+
+        private const double panel_transition_duration = 500;
+
+        private void updateColour()
+        {
+            if (scorePosition == 1)
+            {
+                mainFillContainer.ResizeWidthTo(EXTENDED_WIDTH, panel_transition_duration, Easing.OutElastic);
+                panelColour = Color4Extensions.FromHex("7fcc33");
+                textColour = Color4.White;
+            }
+            else if (trackedPlayer)
+            {
+                mainFillContainer.ResizeWidthTo(EXTENDED_WIDTH, panel_transition_duration, Easing.OutElastic);
+                panelColour = Color4Extensions.FromHex("ffd966");
+                textColour = Color4Extensions.FromHex("2e576b");
+            }
+            else
+            {
+                mainFillContainer.ResizeWidthTo(regular_width, panel_transition_duration, Easing.OutElastic);
+                panelColour = Color4Extensions.FromHex("3399cc");
+                textColour = Color4.White;
+            }
+        }
+
+        private Color4 panelColour
+        {
+            set
+            {
+                mainFillContainer.FadeColour(value, panel_transition_duration, Easing.OutQuint);
+                centralFill.FadeColour(value, panel_transition_duration, Easing.OutQuint);
+            }
+        }
+
+        private const double text_transition_duration = 200;
+
+        private Color4 textColour
+        {
+            set
+            {
+                scoreText.FadeColour(value, text_transition_duration, Easing.OutQuint);
+                accuracyText.FadeColour(value, text_transition_duration, Easing.OutQuint);
+                comboText.FadeColour(value, text_transition_duration, Easing.OutQuint);
+                usernameText.FadeColour(value, text_transition_duration, Easing.OutQuint);
+                positionText.FadeColour(value, text_transition_duration, Easing.OutQuint);
+            }
         }
     }
 }

osu.Game/Screens/Play/HUD/ILeaderboardScore.cs

@@ -0,0 +1,14 @@
+// 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.Bindables;
+
+namespace osu.Game.Screens.Play.HUD
+{
+    public interface ILeaderboardScore
+    {
+        BindableDouble TotalScore { get; }
+        BindableDouble Accuracy { get; }
+        BindableInt Combo { get; }
+    }
+}

osu.Game/Utils/FormatUtils.cs

@@ -1,6 +1,8 @@
 // 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;
+
 namespace osu.Game.Utils
 {
     public static class FormatUtils
@@ -18,5 +20,11 @@ namespace osu.Game.Utils
         /// <param name="accuracy">The accuracy to be formatted</param>
         /// <returns>formatted accuracy in percentage</returns>
         public static string FormatAccuracy(this decimal accuracy) => $"{accuracy:0.00}%";
+
+        /// <summary>
+        /// Formats the supplied rank/leaderboard position in a consistent, simplified way.
+        /// </summary>
+        /// <param name="rank">The rank/position to be formatted.</param>
+        public static string FormatRank(this int rank) => rank.ToMetric(decimals: rank < 100_000 ? 1 : 0);
     }
 }