Merge pull request #25287 from frenzibyte/fix-user-profile-support-banners

Update user profile overlay to show more than one tournament banner

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

@@ -5,8 +5,10 @@ using System;
 using System.Linq;
 using NUnit.Framework;
 using osu.Framework.Allocation;
+using osu.Framework.Graphics;
 using osu.Framework.Testing;
 using osu.Game.Configuration;
+using osu.Game.Graphics.Containers;
 using osu.Game.Online.API.Requests.Responses;
 using osu.Game.Overlays;
 using osu.Game.Overlays.Profile;
@@ -28,7 +30,14 @@ namespace osu.Game.Tests.Visual.Online
         [SetUpSteps]
         public void SetUpSteps()
         {
-            AddStep("create header", () => Child = header = new ProfileHeader());
+            AddStep("create header", () =>
+            {
+                Child = new OsuScrollContainer(Direction.Vertical)
+                {
+                    RelativeSizeAxes = Axes.Both,
+                    Child = header = new ProfileHeader()
+                };
+            });
         }
 
         [Test]
@@ -136,5 +145,260 @@ namespace osu.Game.Tests.Visual.Online
                 PreviousUsernames = new[] { "tsrk.", "quoicoubeh", "apagnan", "epita" }
             }, new OsuRuleset().RulesetInfo));
         }
+
+        [Test]
+        public void TestManyTournamentBanners()
+        {
+            AddStep("Show user w/ many tournament banners", () => header.User.Value = new UserProfileData(new APIUser
+            {
+                Id = 728,
+                Username = "Certain Guy",
+                CoverUrl = @"https://osu.ppy.sh/images/headers/profile-covers/c2.jpg",
+                Statistics = new UserStatistics
+                {
+                    IsRanked = false,
+                    // web will sometimes return non-empty rank history even for unranked users.
+                    RankHistory = new APIRankHistory
+                    {
+                        Mode = @"osu",
+                        Data = Enumerable.Range(2345, 85).ToArray()
+                    },
+                },
+                TournamentBanners = new[]
+                {
+                    new TournamentBanner
+                    {
+                        Id = 15329,
+                        TournamentId = 41,
+                        ImageLowRes = "https://assets.ppy.sh/tournament-banners/official/owc2023/profile/supporter_HK.jpg",
+                        Image = "https://assets.ppy.sh/tournament-banners/official/owc2023/profile/supporter_HK@2x.jpg"
+                    },
+                    new TournamentBanner
+                    {
+                        Id = 15588,
+                        TournamentId = 41,
+                        ImageLowRes = "https://assets.ppy.sh/tournament-banners/official/owc2023/profile/supporter_CN.jpg",
+                        Image = "https://assets.ppy.sh/tournament-banners/official/owc2023/profile/supporter_CN@2x.jpg"
+                    },
+                    new TournamentBanner
+                    {
+                        Id = 15589,
+                        TournamentId = 41,
+                        ImageLowRes = "https://assets.ppy.sh/tournament-banners/official/owc2023/profile/supporter_PH.jpg",
+                        Image = "https://assets.ppy.sh/tournament-banners/official/owc2023/profile/supporter_PH@2x.jpg"
+                    },
+                    new TournamentBanner
+                    {
+                        Id = 15590,
+                        TournamentId = 41,
+                        ImageLowRes = "https://assets.ppy.sh/tournament-banners/official/owc2023/profile/supporter_CL.jpg",
+                        Image = "https://assets.ppy.sh/tournament-banners/official/owc2023/profile/supporter_CL@2x.jpg"
+                    },
+                    new TournamentBanner
+                    {
+                        Id = 15591,
+                        TournamentId = 41,
+                        ImageLowRes = "https://assets.ppy.sh/tournament-banners/official/owc2023/profile/supporter_JP.jpg",
+                        Image = "https://assets.ppy.sh/tournament-banners/official/owc2023/profile/supporter_JP@2x.jpg"
+                    },
+                    new TournamentBanner
+                    {
+                        Id = 15592,
+                        TournamentId = 41,
+                        ImageLowRes = "https://assets.ppy.sh/tournament-banners/official/owc2023/profile/supporter_RU.jpg",
+                        Image = "https://assets.ppy.sh/tournament-banners/official/owc2023/profile/supporter_RU@2x.jpg"
+                    },
+                    new TournamentBanner
+                    {
+                        Id = 15593,
+                        TournamentId = 41,
+                        ImageLowRes = "https://assets.ppy.sh/tournament-banners/official/owc2023/profile/supporter_KR.jpg",
+                        Image = "https://assets.ppy.sh/tournament-banners/official/owc2023/profile/supporter_KR@2x.jpg"
+                    },
+                    new TournamentBanner
+                    {
+                        Id = 15594,
+                        TournamentId = 41,
+                        ImageLowRes = "https://assets.ppy.sh/tournament-banners/official/owc2023/profile/supporter_NZ.jpg",
+                        Image = "https://assets.ppy.sh/tournament-banners/official/owc2023/profile/supporter_NZ@2x.jpg"
+                    },
+                    new TournamentBanner
+                    {
+                        Id = 15595,
+                        TournamentId = 41,
+                        ImageLowRes = "https://assets.ppy.sh/tournament-banners/official/owc2023/profile/supporter_TH.jpg",
+                        Image = "https://assets.ppy.sh/tournament-banners/official/owc2023/profile/supporter_TH@2x.jpg"
+                    },
+                    new TournamentBanner
+                    {
+                        Id = 15596,
+                        TournamentId = 41,
+                        ImageLowRes = "https://assets.ppy.sh/tournament-banners/official/owc2023/profile/supporter_TW.jpg",
+                        Image = "https://assets.ppy.sh/tournament-banners/official/owc2023/profile/supporter_TW@2x.jpg"
+                    },
+                    new TournamentBanner
+                    {
+                        Id = 15603,
+                        TournamentId = 41,
+                        ImageLowRes = "https://assets.ppy.sh/tournament-banners/official/owc2023/profile/supporter_ID.jpg",
+                        Image = "https://assets.ppy.sh/tournament-banners/official/owc2023/profile/supporter_ID@2x.jpg"
+                    },
+                    new TournamentBanner
+                    {
+                        Id = 15604,
+                        TournamentId = 41,
+                        ImageLowRes = "https://assets.ppy.sh/tournament-banners/official/owc2023/profile/supporter_KZ.jpg",
+                        Image = "https://assets.ppy.sh/tournament-banners/official/owc2023/profile/supporter_KZ@2x.jpg"
+                    },
+                    new TournamentBanner
+                    {
+                        Id = 15605,
+                        TournamentId = 41,
+                        ImageLowRes = "https://assets.ppy.sh/tournament-banners/official/owc2023/profile/supporter_AR.jpg",
+                        Image = "https://assets.ppy.sh/tournament-banners/official/owc2023/profile/supporter_AR@2x.jpg"
+                    },
+                    new TournamentBanner
+                    {
+                        Id = 15606,
+                        TournamentId = 41,
+                        ImageLowRes = "https://assets.ppy.sh/tournament-banners/official/owc2023/profile/supporter_BR.jpg",
+                        Image = "https://assets.ppy.sh/tournament-banners/official/owc2023/profile/supporter_BR@2x.jpg"
+                    },
+                    new TournamentBanner
+                    {
+                        Id = 15607,
+                        TournamentId = 41,
+                        ImageLowRes = "https://assets.ppy.sh/tournament-banners/official/owc2023/profile/supporter_PL.jpg",
+                        Image = "https://assets.ppy.sh/tournament-banners/official/owc2023/profile/supporter_PL@2x.jpg"
+                    },
+                    new TournamentBanner
+                    {
+                        Id = 15639,
+                        TournamentId = 41,
+                        ImageLowRes = "https://assets.ppy.sh/tournament-banners/official/owc2023/profile/supporter_MX.jpg",
+                        Image = "https://assets.ppy.sh/tournament-banners/official/owc2023/profile/supporter_MX@2x.jpg"
+                    },
+                    new TournamentBanner
+                    {
+                        Id = 15640,
+                        TournamentId = 41,
+                        ImageLowRes = "https://assets.ppy.sh/tournament-banners/official/owc2023/profile/supporter_AU.jpg",
+                        Image = "https://assets.ppy.sh/tournament-banners/official/owc2023/profile/supporter_AU@2x.jpg"
+                    },
+                    new TournamentBanner
+                    {
+                        Id = 15641,
+                        TournamentId = 41,
+                        ImageLowRes = "https://assets.ppy.sh/tournament-banners/official/owc2023/profile/supporter_IT.jpg",
+                        Image = "https://assets.ppy.sh/tournament-banners/official/owc2023/profile/supporter_IT@2x.jpg"
+                    },
+                    new TournamentBanner
+                    {
+                        Id = 15642,
+                        TournamentId = 41,
+                        ImageLowRes = "https://assets.ppy.sh/tournament-banners/official/owc2023/profile/supporter_UA.jpg",
+                        Image = "https://assets.ppy.sh/tournament-banners/official/owc2023/profile/supporter_UA@2x.jpg"
+                    },
+                    new TournamentBanner
+                    {
+                        Id = 15643,
+                        TournamentId = 41,
+                        ImageLowRes = "https://assets.ppy.sh/tournament-banners/official/owc2023/profile/supporter_NL.jpg",
+                        Image = "https://assets.ppy.sh/tournament-banners/official/owc2023/profile/supporter_NL@2x.jpg"
+                    },
+                    new TournamentBanner
+                    {
+                        Id = 15644,
+                        TournamentId = 41,
+                        ImageLowRes = "https://assets.ppy.sh/tournament-banners/official/owc2023/profile/supporter_FI.jpg",
+                        Image = "https://assets.ppy.sh/tournament-banners/official/owc2023/profile/supporter_FI@2x.jpg"
+                    },
+                    new TournamentBanner
+                    {
+                        Id = 15645,
+                        TournamentId = 41,
+                        ImageLowRes = "https://assets.ppy.sh/tournament-banners/official/owc2023/profile/supporter_RO.jpg",
+                        Image = "https://assets.ppy.sh/tournament-banners/official/owc2023/profile/supporter_RO@2x.jpg"
+                    },
+                    new TournamentBanner
+                    {
+                        Id = 15646,
+                        TournamentId = 41,
+                        ImageLowRes = "https://assets.ppy.sh/tournament-banners/official/owc2023/profile/supporter_SG.jpg",
+                        Image = "https://assets.ppy.sh/tournament-banners/official/owc2023/profile/supporter_SG@2x.jpg"
+                    },
+                    new TournamentBanner
+                    {
+                        Id = 15647,
+                        TournamentId = 41,
+                        ImageLowRes = "https://assets.ppy.sh/tournament-banners/official/owc2023/profile/supporter_DE.jpg",
+                        Image = "https://assets.ppy.sh/tournament-banners/official/owc2023/profile/supporter_DE@2x.jpg"
+                    },
+                    new TournamentBanner
+                    {
+                        Id = 15648,
+                        TournamentId = 41,
+                        ImageLowRes = "https://assets.ppy.sh/tournament-banners/official/owc2023/profile/supporter_ES.jpg",
+                        Image = "https://assets.ppy.sh/tournament-banners/official/owc2023/profile/supporter_ES@2x.jpg"
+                    },
+                    new TournamentBanner
+                    {
+                        Id = 15649,
+                        TournamentId = 41,
+                        ImageLowRes = "https://assets.ppy.sh/tournament-banners/official/owc2023/profile/supporter_SE.jpg",
+                        Image = "https://assets.ppy.sh/tournament-banners/official/owc2023/profile/supporter_SE@2x.jpg"
+                    },
+                    new TournamentBanner
+                    {
+                        Id = 15650,
+                        TournamentId = 41,
+                        ImageLowRes = "https://assets.ppy.sh/tournament-banners/official/owc2023/profile/supporter_CA.jpg",
+                        Image = "https://assets.ppy.sh/tournament-banners/official/owc2023/profile/supporter_CA@2x.jpg"
+                    },
+                    new TournamentBanner
+                    {
+                        Id = 15651,
+                        TournamentId = 41,
+                        ImageLowRes = "https://assets.ppy.sh/tournament-banners/official/owc2023/profile/supporter_NO.jpg",
+                        Image = "https://assets.ppy.sh/tournament-banners/official/owc2023/profile/supporter_NO@2x.jpg"
+                    },
+                    new TournamentBanner
+                    {
+                        Id = 15652,
+                        TournamentId = 41,
+                        ImageLowRes = "https://assets.ppy.sh/tournament-banners/official/owc2023/profile/supporter_GB.jpg",
+                        Image = "https://assets.ppy.sh/tournament-banners/official/owc2023/profile/supporter_GB@2x.jpg"
+                    },
+                    new TournamentBanner
+                    {
+                        Id = 15653,
+                        TournamentId = 41,
+                        ImageLowRes = "https://assets.ppy.sh/tournament-banners/official/owc2023/profile/supporter_US.jpg",
+                        Image = "https://assets.ppy.sh/tournament-banners/official/owc2023/profile/supporter_US@2x.jpg"
+                    },
+                    new TournamentBanner
+                    {
+                        Id = 15654,
+                        TournamentId = 41,
+                        ImageLowRes = "https://assets.ppy.sh/tournament-banners/official/owc2023/profile/supporter_PL.jpg",
+                        Image = "https://assets.ppy.sh/tournament-banners/official/owc2023/profile/supporter_PL@2x.jpg"
+                    },
+                    new TournamentBanner
+                    {
+                        Id = 15655,
+                        TournamentId = 41,
+                        ImageLowRes = "https://assets.ppy.sh/tournament-banners/official/owc2023/profile/supporter_FR.jpg",
+                        Image = "https://assets.ppy.sh/tournament-banners/official/owc2023/profile/supporter_FR@2x.jpg"
+                    },
+                    new TournamentBanner
+                    {
+                        Id = 15686,
+                        TournamentId = 41,
+                        ImageLowRes = "https://assets.ppy.sh/tournament-banners/official/owc2023/profile/supporter_HK.jpg",
+                        Image = "https://assets.ppy.sh/tournament-banners/official/owc2023/profile/supporter_HK@2x.jpg"
+                    }
+                }
+            }, new OsuRuleset().RulesetInfo));
+        }
     }
 }

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

@@ -121,12 +121,29 @@ namespace osu.Game.Tests.Visual.Online
                     Data = Enumerable.Range(2345, 45).Concat(Enumerable.Range(2109, 40)).ToArray()
                 },
             },
-            TournamentBanner = new TournamentBanner
+            TournamentBanners = new[]
             {
-                Id = 13926,
+                new TournamentBanner
-                TournamentId = 35,
+                {
-                ImageLowRes = "https://assets.ppy.sh/tournament-banners/official/owc2022/profile/winner_US.jpg",
+                    Id = 15588,
-                Image = "https://assets.ppy.sh/tournament-banners/official/owc2022/profile/winner_US@2x.jpg",
+                    TournamentId = 41,
+                    ImageLowRes = "https://assets.ppy.sh/tournament-banners/official/owc2023/profile/supporter_CN.jpg",
+                    Image = "https://assets.ppy.sh/tournament-banners/official/owc2023/profile/supporter_CN@2x.jpg"
+                },
+                new TournamentBanner
+                {
+                    Id = 15589,
+                    TournamentId = 41,
+                    ImageLowRes = "https://assets.ppy.sh/tournament-banners/official/owc2023/profile/supporter_PH.jpg",
+                    Image = "https://assets.ppy.sh/tournament-banners/official/owc2023/profile/supporter_PH@2x.jpg"
+                },
+                new TournamentBanner
+                {
+                    Id = 15590,
+                    TournamentId = 41,
+                    ImageLowRes = "https://assets.ppy.sh/tournament-banners/official/owc2023/profile/supporter_CL.jpg",
+                    Image = "https://assets.ppy.sh/tournament-banners/official/owc2023/profile/supporter_CL@2x.jpg"
+                }
             },
             Badges = new[]
             {

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

@@ -234,9 +234,8 @@ namespace osu.Game.Online.API.Requests.Responses
             set => Statistics.RankHistory = value;
         }
 
-        [JsonProperty(@"active_tournament_banner")]
+        [JsonProperty(@"active_tournament_banners")]
-        [CanBeNull]
+        public TournamentBanner[] TournamentBanners;
-        public TournamentBanner TournamentBanner;
 
         [JsonProperty("badges")]
         public Badge[] Badges;

osu.Game/Overlays/Profile/Header/BannerHeaderContainer.cs

@@ -11,7 +11,7 @@ using osu.Game.Overlays.Profile.Header.Components;
 
 namespace osu.Game.Overlays.Profile.Header
 {
-    public partial class BannerHeaderContainer : CompositeDrawable
+    public partial class BannerHeaderContainer : FillFlowContainer
     {
         public readonly Bindable<UserProfileData?> User = new Bindable<UserProfileData?>();
 
@@ -19,9 +19,9 @@ namespace osu.Game.Overlays.Profile.Header
         private void load()
         {
             Alpha = 0;
-            RelativeSizeAxes = Axes.Both;
+            RelativeSizeAxes = Axes.X;
-            FillMode = FillMode.Fit;
+            AutoSizeAxes = Axes.Y;
-            FillAspectRatio = 1000 / 60f;
+            Direction = FillDirection.Vertical;
         }
 
         protected override void LoadComplete()
@@ -40,13 +40,21 @@ namespace osu.Game.Overlays.Profile.Header
 
             ClearInternal();
 
-            var banner = user?.TournamentBanner;
+            var banners = user?.TournamentBanners;
 
-            if (banner != null)
+            if (banners?.Length > 0)
             {
                 Show();
 
-                LoadComponentAsync(new DrawableTournamentBanner(banner), AddInternal, cancellationTokenSource.Token);
+                for (int index = 0; index < banners.Length; index++)
+                {
+                    int displayIndex = index;
+                    LoadComponentAsync(new DrawableTournamentBanner(banners[index]), asyncBanner =>
+                    {
+                        // load in stable order regardless of async load order.
+                        Insert(displayIndex, asyncBanner);
+                    }, cancellationTokenSource.Token);
+                }
             }
             else
             {

osu.Game/Overlays/Profile/Header/Components/DrawableTournamentBanner.cs

@@ -15,12 +15,13 @@ namespace osu.Game.Overlays.Profile.Header.Components
     [LongRunningLoad]
     public partial class DrawableTournamentBanner : OsuClickableContainer
     {
+        private const float banner_aspect_ratio = 60 / 1000f;
         private readonly TournamentBanner banner;
 
         public DrawableTournamentBanner(TournamentBanner banner)
         {
             this.banner = banner;
-            RelativeSizeAxes = Axes.Both;
+            RelativeSizeAxes = Axes.X;
         }
 
         [BackgroundDependencyLoader]
@@ -41,6 +42,12 @@ namespace osu.Game.Overlays.Profile.Header.Components
             this.FadeInFromZero(200);
         }
 
+        protected override void Update()
+        {
+            base.Update();
+            Height = DrawWidth * banner_aspect_ratio;
+        }
+
         public override LocalisableString TooltipText => "view in browser";
     }
 }