Merge pull request #26340 from stanriders/user-rank-card

Add user card with global/country ranks to login overlay

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

@@ -9,8 +9,10 @@ using osu.Framework.Allocation;
 using osu.Framework.Bindables;
 using osu.Framework.Graphics;
 using osu.Framework.Graphics.Containers;
+using osu.Framework.Utils;
 using osu.Game.Beatmaps;
 using osu.Game.Online.API.Requests.Responses;
+using osu.Game.Overlays;
 using osu.Game.Rulesets;
 using osu.Game.Rulesets.Osu;
 using osu.Game.Scoring;
@@ -29,6 +31,9 @@ namespace osu.Game.Tests.Visual.Online
         private UserGridPanel boundPanel1;
         private TestUserListPanel boundPanel2;
 
+        [Cached]
+        private OverlayColourProvider colourProvider = new OverlayColourProvider(OverlayColourScheme.Purple);
+
         [Resolved]
         private IRulesetStore rulesetStore { get; set; }
 
@@ -85,8 +90,25 @@ namespace osu.Game.Tests.Visual.Online
                         CoverUrl = @"https://assets.ppy.sh/user-profile-covers/8195163/4a8e2ad5a02a2642b631438cfa6c6bd7e2f9db289be881cb27df18331f64144c.jpeg",
                         IsOnline = false,
                         LastVisit = DateTimeOffset.Now
-                    })
+                    }),
-                },
+                    new UserRankPanel(new APIUser
+                    {
+                        Username = @"flyte",
+                        Id = 3103765,
+                        CountryCode = CountryCode.JP,
+                        CoverUrl = @"https://osu.ppy.sh/images/headers/profile-covers/c6.jpg",
+                        Statistics = new UserStatistics { GlobalRank = 12345, CountryRank = 1234 }
+                    }) { Width = 300 },
+                    new UserRankPanel(new APIUser
+                    {
+                        Username = @"peppy",
+                        Id = 2,
+                        Colour = "99EB47",
+                        CountryCode = CountryCode.AU,
+                        CoverUrl = @"https://osu.ppy.sh/images/headers/profile-covers/c3.jpg",
+                        Statistics = new UserStatistics { GlobalRank = null, CountryRank = null }
+                    }) { Width = 300 }
+                }
             };
 
             boundPanel1.Status.BindTo(status);
@@ -136,6 +158,23 @@ namespace osu.Game.Tests.Visual.Online
             AddAssert("visit message is not visible", () => !boundPanel2.LastVisitMessage.IsPresent);
         }
 
+        [Test]
+        public void TestUserStatisticsChange()
+        {
+            AddStep("update statistics", () =>
+            {
+                API.UpdateStatistics(new UserStatistics
+                {
+                    GlobalRank = RNG.Next(100000),
+                    CountryRank = RNG.Next(100000)
+                });
+            });
+            AddStep("set statistics to empty", () =>
+            {
+                API.UpdateStatistics(new UserStatistics());
+            });
+        }
+
         private UserActivity soloGameStatusForRuleset(int rulesetId) => new UserActivity.InSoloGame(new BeatmapInfo(), rulesetStore.GetRuleset(rulesetId)!);
 
         private ScoreInfo createScore(string name) => new ScoreInfo(new TestBeatmap(Ruleset.Value).BeatmapInfo)

osu.Game/Overlays/Login/LoginPanel.cs

@@ -30,7 +30,6 @@ namespace osu.Game.Overlays.Login
         [Resolved]
         private OsuColour colours { get; set; } = null!;
 
-        private UserGridPanel panel = null!;
         private UserDropdown dropdown = null!;
 
         /// <summary>
@@ -39,6 +38,7 @@ namespace osu.Game.Overlays.Login
         public Action? RequestHide;
 
         private readonly IBindable<APIState> apiState = new Bindable<APIState>();
+        private readonly Bindable<UserStatus?> userStatus = new Bindable<UserStatus?>();
 
         [Resolved]
         private IAPIProvider api { get; set; } = null!;
@@ -131,7 +131,7 @@ namespace osu.Game.Overlays.Login
                                 Text = LoginPanelStrings.SignedIn,
                                 Font = OsuFont.GetFont(size: 18, weight: FontWeight.Bold),
                             },
-                            panel = new UserGridPanel(api.LocalUser.Value)
+                            new UserRankPanel(api.LocalUser.Value)
                             {
                                 RelativeSizeAxes = Axes.X,
                                 Action = RequestHide
@@ -140,10 +140,8 @@ namespace osu.Game.Overlays.Login
                         },
                     };
 
-                    panel.Status.BindTo(api.LocalUser.Value.Status);
+                    userStatus.BindTo(api.LocalUser.Value.Status);
-                    panel.Activity.BindTo(api.LocalUser.Value.Activity);
+                    userStatus.BindValueChanged(e => updateDropdownCurrent(e.NewValue), true);
-
-                    panel.Status.BindValueChanged(_ => updateDropdownCurrent(), true);
 
                     dropdown.Current.BindValueChanged(action =>
                     {
@@ -176,9 +174,9 @@ namespace osu.Game.Overlays.Login
                 ScheduleAfterChildren(() => GetContainingInputManager()?.ChangeFocus(form));
         });
 
-        private void updateDropdownCurrent()
+        private void updateDropdownCurrent(UserStatus? status)
         {
-            switch (panel.Status.Value)
+            switch (status)
             {
                 case UserStatus.Online:
                     dropdown.Current.Value = UserAction.Online;

osu.Game/Users/ExtendedUserPanel.cs

@@ -3,7 +3,6 @@
 
 #nullable disable
 
-using osuTK;
 using osu.Framework.Allocation;
 using osu.Framework.Bindables;
 using osu.Framework.Extensions;
@@ -53,14 +52,6 @@ namespace osu.Game.Users
             statusIcon.FinishTransforms();
         }
 
-        protected UpdateableAvatar CreateAvatar() => new UpdateableAvatar(User, false);
-
-        protected UpdateableFlag CreateFlag() => new UpdateableFlag(User.CountryCode)
-        {
-            Size = new Vector2(36, 26),
-            Action = Action,
-        };
-
         protected Container CreateStatusIcon() => statusIcon = new StatusIcon();
 
         protected FillFlowContainer CreateStatusMessage(bool rightAlignedChildren)

osu.Game/Users/UserGridPanel.cs

@@ -91,6 +91,7 @@ namespace osu.Game.Users
                                                 Children = new Drawable[]
                                                 {
                                                     CreateFlag(),
+                                                    // supporter icon is being added later
                                                 }
                                             }
                                         },
@@ -108,6 +109,7 @@ namespace osu.Game.Users
                         },
                         new[]
                         {
+                            // padding
                             Empty(),
                             Empty()
                         },

osu.Game/Users/UserPanel.cs

@@ -23,6 +23,8 @@ using osu.Game.Localisation;
 using osu.Game.Online.Multiplayer;
 using osu.Game.Screens;
 using osu.Game.Screens.Play;
+using osu.Game.Users.Drawables;
+using osuTK;
 
 namespace osu.Game.Users
 {
@@ -77,23 +79,18 @@ namespace osu.Game.Users
         {
             Masking = true;
 
-            AddRange(new[]
+            Add(new Box
             {
-                new Box
+                RelativeSizeAxes = Axes.Both,
-                {
+                Colour = ColourProvider?.Background5 ?? Colours.Gray1
-                    RelativeSizeAxes = Axes.Both,
-                    Colour = ColourProvider?.Background5 ?? Colours.Gray1
-                },
-                Background = new UserCoverBackground
-                {
-                    RelativeSizeAxes = Axes.Both,
-                    Anchor = Anchor.Centre,
-                    Origin = Anchor.Centre,
-                    User = User,
-                },
-                CreateLayout()
             });
 
+            var background = CreateBackground();
+            if (background != null)
+                Add(background);
+
+            Add(CreateLayout());
+
             base.Action = ViewProfile = () =>
             {
                 Action?.Invoke();
@@ -101,8 +98,21 @@ namespace osu.Game.Users
             };
         }
 
+        // TODO: this whole api is messy. half these Create methods are expected to by the implementation and half are implictly called.
+
         protected abstract Drawable CreateLayout();
 
+        /// <summary>
+        /// Panel background container. Can be null if a panel doesn't want a background under it's layout
+        /// </summary>
+        protected virtual Drawable? CreateBackground() => Background = new UserCoverBackground
+        {
+            RelativeSizeAxes = Axes.Both,
+            Anchor = Anchor.Centre,
+            Origin = Anchor.Centre,
+            User = User
+        };
+
         protected OsuSpriteText CreateUsername() => new OsuSpriteText
         {
             Font = OsuFont.GetFont(size: 16, weight: FontWeight.Bold),
@@ -110,6 +120,14 @@ namespace osu.Game.Users
             Text = User.Username,
         };
 
+        protected UpdateableAvatar CreateAvatar() => new UpdateableAvatar(User, false);
+
+        protected UpdateableFlag CreateFlag() => new UpdateableFlag(User.CountryCode)
+        {
+            Size = new Vector2(36, 26),
+            Action = Action,
+        };
+
         public MenuItem[] ContextMenuItems
         {
             get

osu.Game/Users/UserRankPanel.cs

@@ -0,0 +1,228 @@
+// Copyright (c) ppy Pty Ltd <contact@ppy.sh>. Licensed under the MIT Licence.
+// See the LICENCE file in the repository root for full licence text.
+
+using osu.Framework.Allocation;
+using osu.Framework.Bindables;
+using osu.Framework.Extensions.LocalisationExtensions;
+using osu.Framework.Graphics;
+using osu.Framework.Graphics.Containers;
+using osu.Framework.Input.Events;
+using osu.Game.Online.API;
+using osu.Game.Online.API.Requests.Responses;
+using osu.Game.Overlays.Profile.Header.Components;
+using osu.Game.Resources.Localisation.Web;
+using osuTK;
+
+namespace osu.Game.Users
+{
+    /// <summary>
+    /// User card that shows user's global and country ranks in the bottom.
+    /// Meant to be used in the toolbar login overlay.
+    /// </summary>
+    public partial class UserRankPanel : UserPanel
+    {
+        private const int padding = 10;
+        private const int main_content_height = 80;
+
+        [Resolved]
+        private IAPIProvider api { get; set; } = null!;
+
+        private ProfileValueDisplay globalRankDisplay = null!;
+        private ProfileValueDisplay countryRankDisplay = null!;
+
+        private readonly IBindable<UserStatistics?> statistics = new Bindable<UserStatistics?>();
+
+        public UserRankPanel(APIUser user)
+            : base(user)
+        {
+            AutoSizeAxes = Axes.Y;
+            CornerRadius = 10;
+        }
+
+        [BackgroundDependencyLoader]
+        private void load()
+        {
+            BorderColour = ColourProvider?.Light1 ?? Colours.GreyVioletLighter;
+
+            statistics.BindTo(api.Statistics);
+            statistics.BindValueChanged(stats =>
+            {
+                globalRankDisplay.Content = stats.NewValue?.GlobalRank?.ToLocalisableString("\\##,##0") ?? "-";
+                countryRankDisplay.Content = stats.NewValue?.CountryRank?.ToLocalisableString("\\##,##0") ?? "-";
+            }, true);
+        }
+
+        protected override Drawable CreateLayout()
+        {
+            FillFlowContainer details;
+
+            var layout = new Container
+            {
+                RelativeSizeAxes = Axes.X,
+                AutoSizeAxes = Axes.Y,
+                Children = new Drawable[]
+                {
+                    new Container
+                    {
+                        Name = "Main content",
+                        RelativeSizeAxes = Axes.X,
+                        Height = main_content_height,
+                        CornerRadius = 10,
+                        Masking = true,
+                        Children = new Drawable[]
+                        {
+                            new UserCoverBackground
+                            {
+                                RelativeSizeAxes = Axes.Both,
+                                Anchor = Anchor.Centre,
+                                Origin = Anchor.Centre,
+                                User = User,
+                                Alpha = 0.3f
+                            },
+                            new GridContainer
+                            {
+                                AutoSizeAxes = Axes.Y,
+                                RelativeSizeAxes = Axes.X,
+                                ColumnDimensions = new[]
+                                {
+                                    new Dimension(GridSizeMode.Absolute, padding),
+                                    new Dimension(GridSizeMode.AutoSize),
+                                    new Dimension(),
+                                    new Dimension(GridSizeMode.Absolute, padding),
+                                },
+                                RowDimensions = new[]
+                                {
+                                    new Dimension(GridSizeMode.Absolute, padding),
+                                    new Dimension(GridSizeMode.AutoSize),
+                                },
+                                Content = new[]
+                                {
+                                    new[]
+                                    {
+                                        // padding
+                                        Empty(),
+                                        Empty(),
+                                        Empty(),
+                                        Empty()
+                                    },
+                                    new[]
+                                    {
+                                        Empty(), // padding
+                                        CreateAvatar().With(avatar =>
+                                        {
+                                            avatar.Size = new Vector2(60);
+                                            avatar.Masking = true;
+                                            avatar.CornerRadius = 6;
+                                        }),
+                                        new Container
+                                        {
+                                            RelativeSizeAxes = Axes.Both,
+                                            Padding = new MarginPadding { Left = padding },
+                                            Child = new GridContainer
+                                            {
+                                                RelativeSizeAxes = Axes.Both,
+                                                ColumnDimensions = new[]
+                                                {
+                                                    new Dimension()
+                                                },
+                                                RowDimensions = new[]
+                                                {
+                                                    new Dimension(GridSizeMode.AutoSize),
+                                                    new Dimension()
+                                                },
+                                                Content = new[]
+                                                {
+                                                    new Drawable[]
+                                                    {
+                                                        details = new FillFlowContainer
+                                                        {
+                                                            AutoSizeAxes = Axes.Both,
+                                                            Direction = FillDirection.Horizontal,
+                                                            Spacing = new Vector2(6),
+                                                            Children = new Drawable[]
+                                                            {
+                                                                CreateFlag(),
+                                                                // supporter icon is being added later
+                                                            }
+                                                        }
+                                                    },
+                                                    new Drawable[]
+                                                    {
+                                                        CreateUsername().With(username =>
+                                                        {
+                                                            username.Anchor = Anchor.CentreLeft;
+                                                            username.Origin = Anchor.CentreLeft;
+                                                        })
+                                                    }
+                                                }
+                                            }
+                                        },
+                                        Empty() // padding
+                                    }
+                                }
+                            }
+                        }
+                    },
+                    new Container
+                    {
+                        Name = "Bottom content",
+                        Margin = new MarginPadding { Top = main_content_height },
+                        RelativeSizeAxes = Axes.X,
+                        AutoSizeAxes = Axes.Y,
+                        Padding = new MarginPadding { Left = 80, Vertical = padding },
+                        Child = new GridContainer
+                        {
+                            RelativeSizeAxes = Axes.X,
+                            AutoSizeAxes = Axes.Y,
+                            ColumnDimensions = new[]
+                            {
+                                new Dimension(),
+                                new Dimension()
+                            },
+                            RowDimensions = new[] { new Dimension(GridSizeMode.AutoSize) },
+                            Content = new[]
+                            {
+                                new Drawable[]
+                                {
+                                    globalRankDisplay = new ProfileValueDisplay(true)
+                                    {
+                                        Title = UsersStrings.ShowRankGlobalSimple,
+                                    },
+                                    countryRankDisplay = new ProfileValueDisplay(true)
+                                    {
+                                        Title = UsersStrings.ShowRankCountrySimple,
+                                    }
+                                }
+                            }
+                        }
+                    }
+                }
+            };
+
+            if (User.IsSupporter)
+            {
+                details.Add(new SupporterIcon
+                {
+                    Height = 26,
+                    SupportLevel = User.SupportLevel
+                });
+            }
+
+            return layout;
+        }
+
+        protected override bool OnHover(HoverEvent e)
+        {
+            BorderThickness = 2;
+            return base.OnHover(e);
+        }
+
+        protected override void OnHoverLost(HoverLostEvent e)
+        {
+            BorderThickness = 0;
+            base.OnHoverLost(e);
+        }
+
+        protected override Drawable? CreateBackground() => null;
+    }
+}