Merge pull request #28849 from frenzibyte/custom-profile-colour

Add custom hue support to user profile overlay

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

@@ -111,6 +111,87 @@ namespace osu.Game.Tests.Visual.Online
             AddStep("complete request", () => pendingRequest.TriggerSuccess(TEST_USER));
         }
 
+        [Test]
+        public void TestCustomColourScheme()
+        {
+            int hue = 0;
+
+            AddSliderStep("hue", 0, 360, 222, h => hue = h);
+
+            AddStep("set up request handling", () =>
+            {
+                dummyAPI.HandleRequest = req =>
+                {
+                    if (req is GetUserRequest getUserRequest)
+                    {
+                        getUserRequest.TriggerSuccess(new APIUser
+                        {
+                            Username = $"Colorful #{hue}",
+                            Id = 1,
+                            CountryCode = CountryCode.JP,
+                            CoverUrl = @"https://osu.ppy.sh/images/headers/profile-covers/c2.jpg",
+                            ProfileHue = hue,
+                        });
+                        return true;
+                    }
+
+                    return false;
+                };
+            });
+
+            AddStep("show user", () => profile.ShowUser(new APIUser { Id = 1 }));
+        }
+
+        [Test]
+        public void TestCustomColourSchemeWithReload()
+        {
+            int hue = 0;
+            GetUserRequest pendingRequest = null!;
+
+            AddSliderStep("hue", 0, 360, 222, h => hue = h);
+
+            AddStep("set up request handling", () =>
+            {
+                dummyAPI.HandleRequest = req =>
+                {
+                    if (req is GetUserRequest getUserRequest)
+                    {
+                        pendingRequest = getUserRequest;
+                        return true;
+                    }
+
+                    return false;
+                };
+            });
+
+            AddStep("show user", () => profile.ShowUser(new APIUser { Id = 1 }));
+
+            AddWaitStep("wait some", 3);
+            AddStep("complete request", () => pendingRequest.TriggerSuccess(new APIUser
+            {
+                Username = $"Colorful #{hue}",
+                Id = 1,
+                CountryCode = CountryCode.JP,
+                CoverUrl = @"https://osu.ppy.sh/images/headers/profile-covers/c2.jpg",
+                ProfileHue = hue,
+            }));
+
+            int hue2 = 0;
+
+            AddSliderStep("hue 2", 0, 360, 50, h => hue2 = h);
+            AddStep("show user", () => profile.ShowUser(new APIUser { Id = 1 }));
+            AddWaitStep("wait some", 3);
+
+            AddStep("complete request", () => pendingRequest.TriggerSuccess(new APIUser
+            {
+                Username = $"Colorful #{hue2}",
+                Id = 1,
+                CountryCode = CountryCode.JP,
+                CoverUrl = @"https://osu.ppy.sh/images/headers/profile-covers/c2.jpg",
+                ProfileHue = hue2,
+            }));
+        }
+
         public static readonly APIUser TEST_USER = new APIUser
         {
             Username = @"Somebody",

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

@@ -201,6 +201,9 @@ namespace osu.Game.Online.API.Requests.Responses
         [JsonProperty(@"playmode")]
         public string PlayMode;
 
+        [JsonProperty(@"profile_hue")]
+        public int? ProfileHue;
+
         [JsonProperty(@"profile_order")]
         public string[] ProfileOrder;
 

osu.Game/Overlays/FullscreenOverlay.cs

@@ -1,6 +1,7 @@
 // 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.Diagnostics.CodeAnalysis;
 using osu.Framework.Allocation;
 using osu.Framework.Extensions.Color4Extensions;
 using osu.Framework.Graphics;
@@ -22,7 +23,7 @@ namespace osu.Game.Overlays
         public virtual LocalisableString Title => Header.Title.Title;
         public virtual LocalisableString Description => Header.Title.Description;
 
-        public T Header { get; }
+        public T Header { get; private set; }
 
         protected virtual Color4 BackgroundColour => ColourProvider.Background5;
 
@@ -34,11 +35,12 @@ namespace osu.Game.Overlays
 
         protected override Container<Drawable> Content => content;
 
+        private readonly Box background;
         private readonly Container content;
 
         protected FullscreenOverlay(OverlayColourScheme colourScheme)
         {
-            Header = CreateHeader();
+            RecreateHeader();
 
             ColourProvider = new OverlayColourProvider(colourScheme);
 
@@ -60,10 +62,9 @@ namespace osu.Game.Overlays
 
             base.Content.AddRange(new Drawable[]
             {
-                new Box
+                background = new Box
                 {
                     RelativeSizeAxes = Axes.Both,
-                    Colour = BackgroundColour
                 },
                 content = new Container
                 {
@@ -75,14 +76,17 @@ namespace osu.Game.Overlays
         [BackgroundDependencyLoader]
         private void load()
         {
-            Waves.FirstWaveColour = ColourProvider.Light4;
+            UpdateColours();
-            Waves.SecondWaveColour = ColourProvider.Light3;
-            Waves.ThirdWaveColour = ColourProvider.Dark4;
-            Waves.FourthWaveColour = ColourProvider.Dark3;
         }
 
         protected abstract T CreateHeader();
 
+        [MemberNotNull(nameof(Header))]
+        protected void RecreateHeader()
+        {
+            Header = CreateHeader();
+        }
+
         public override void Show()
         {
             if (State.Value == Visibility.Visible)
@@ -96,6 +100,18 @@ namespace osu.Game.Overlays
             }
         }
 
+        /// <summary>
+        /// Updates the colours of the background and the top waves with the latest colour shades provided by <see cref="ColourProvider"/>.
+        /// </summary>
+        protected void UpdateColours()
+        {
+            Waves.FirstWaveColour = ColourProvider.Light4;
+            Waves.SecondWaveColour = ColourProvider.Light3;
+            Waves.ThirdWaveColour = ColourProvider.Dark4;
+            Waves.FourthWaveColour = ColourProvider.Dark3;
+            background.Colour = BackgroundColour;
+        }
+
         protected override void PopIn()
         {
             base.PopIn();

osu.Game/Overlays/OverlayColourProvider.cs

@@ -1,19 +1,25 @@
 // 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 osuTK;
 using osuTK.Graphics;
 
 namespace osu.Game.Overlays
 {
     public class OverlayColourProvider
     {
-        public OverlayColourScheme ColourScheme { get; private set; }
+        /// <summary>
+        /// The hue degree associated with the colour shades provided by this <see cref="OverlayColourProvider"/>.
+        /// </summary>
+        public int Hue { get; private set; }
 
         public OverlayColourProvider(OverlayColourScheme colourScheme)
+            : this(colourScheme.GetHue())
         {
-            ColourScheme = colourScheme;
+        }
+
+        public OverlayColourProvider(int hue)
+        {
+            Hue = hue;
         }
 
         // Note that the following five colours are also defined in `OsuColour` as `{colourScheme}{0,1,2,3,4}`.
@@ -48,65 +54,19 @@ namespace osu.Game.Overlays
         public Color4 Background6 => getColour(0.1f, 0.1f);
 
         /// <summary>
-        /// Changes the value of <see cref="ColourScheme"/> to a different colour scheme.
+        /// Changes the <see cref="Hue"/> to a different degree.
         /// Note that this does not trigger any kind of signal to any drawable that received colours from here, all drawables need to be updated manually.
         /// </summary>
         /// <param name="colourScheme">The proposed colour scheme.</param>
-        public void ChangeColourScheme(OverlayColourScheme colourScheme)
+        public void ChangeColourScheme(OverlayColourScheme colourScheme) => ChangeColourScheme(colourScheme.GetHue());
-        {
-            ColourScheme = colourScheme;
-        }
 
-        private Color4 getColour(float saturation, float lightness) => Color4.FromHsl(new Vector4(getBaseHue(ColourScheme), saturation, lightness, 1));
+        /// <summary>
+        /// Changes the <see cref="Hue"/> to a different degree.
+        /// Note that this does not trigger any kind of signal to any drawable that received colours from here, all drawables need to be updated manually.
+        /// </summary>
+        /// <param name="hue">The proposed hue degree.</param>
+        public void ChangeColourScheme(int hue) => Hue = hue;
 
-        // See https://github.com/ppy/osu-web/blob/5a536d217a21582aad999db50a981003d3ad5659/app/helpers.php#L1620-L1628
+        private Color4 getColour(float saturation, float lightness) => Framework.Graphics.Colour4.FromHSL(Hue / 360f, saturation, lightness);
-        private static float getBaseHue(OverlayColourScheme colourScheme)
-        {
-            switch (colourScheme)
-            {
-                default:
-                    throw new ArgumentException($@"{colourScheme} colour scheme does not provide a hue value in {nameof(getBaseHue)}.");
-
-                case OverlayColourScheme.Red:
-                    return 0;
-
-                case OverlayColourScheme.Pink:
-                    return 333 / 360f;
-
-                case OverlayColourScheme.Orange:
-                    return 45 / 360f;
-
-                case OverlayColourScheme.Lime:
-                    return 90 / 360f;
-
-                case OverlayColourScheme.Green:
-                    return 125 / 360f;
-
-                case OverlayColourScheme.Aquamarine:
-                    return 160 / 360f;
-
-                case OverlayColourScheme.Purple:
-                    return 255 / 360f;
-
-                case OverlayColourScheme.Blue:
-                    return 200 / 360f;
-
-                case OverlayColourScheme.Plum:
-                    return 320 / 360f;
-            }
-        }
-    }
-
-    public enum OverlayColourScheme
-    {
-        Red,
-        Pink,
-        Orange,
-        Lime,
-        Green,
-        Purple,
-        Blue,
-        Plum,
-        Aquamarine
     }
 }

osu.Game/Overlays/OverlayColourScheme.cs

@@ -0,0 +1,60 @@
+// 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;
+
+namespace osu.Game.Overlays
+{
+    public enum OverlayColourScheme
+    {
+        Red,
+        Orange,
+        Lime,
+        Green,
+        Aquamarine,
+        Blue,
+        Purple,
+        Plum,
+        Pink,
+    }
+
+    public static class OverlayColourSchemeExtensions
+    {
+        public static int GetHue(this OverlayColourScheme colourScheme)
+        {
+            // See https://github.com/ppy/osu-web/blob/5a536d217a21582aad999db50a981003d3ad5659/app/helpers.php#L1620-L1628
+            switch (colourScheme)
+            {
+                default:
+                    throw new ArgumentOutOfRangeException(nameof(colourScheme));
+
+                case OverlayColourScheme.Red:
+                    return 0;
+
+                case OverlayColourScheme.Orange:
+                    return 45;
+
+                case OverlayColourScheme.Lime:
+                    return 90;
+
+                case OverlayColourScheme.Green:
+                    return 125;
+
+                case OverlayColourScheme.Aquamarine:
+                    return 160;
+
+                case OverlayColourScheme.Blue:
+                    return 200;
+
+                case OverlayColourScheme.Purple:
+                    return 255;
+
+                case OverlayColourScheme.Plum:
+                    return 320;
+
+                case OverlayColourScheme.Pink:
+                    return 333;
+            }
+        }
+    }
+}

osu.Game/Overlays/UserProfileOverlay.cs

@@ -103,7 +103,6 @@ namespace osu.Game.Overlays
                 sectionsContainer.ExpandableHeader = null;
 
             userReq?.Cancel();
-            Clear();
             lastSection = null;
 
             sections = !user.IsBot
@@ -119,20 +118,67 @@ namespace osu.Game.Overlays
                 }
                 : Array.Empty<ProfileSection>();
 
-            tabs = new ProfileSectionTabControl
+            changeOverlayColours(OverlayColourScheme.Pink.GetHue());
-            {
+            recreateBaseContent();
-                RelativeSizeAxes = Axes.X,
-                Anchor = Anchor.TopCentre,
-                Origin = Anchor.TopCentre,
-            };
 
-            Add(new OsuContextMenuContainer
+            if (API.State.Value != APIState.Offline)
+            {
+                userReq = user.OnlineID > 1 ? new GetUserRequest(user.OnlineID, ruleset) : new GetUserRequest(user.Username, ruleset);
+                userReq.Success += u => userLoadComplete(u, ruleset);
+
+                API.Queue(userReq);
+                loadingLayer.Show();
+            }
+        }
+
+        private void userLoadComplete(APIUser loadedUser, IRulesetInfo? userRuleset)
+        {
+            Debug.Assert(sections != null && sectionsContainer != null && tabs != null);
+
+            // reuse header and content if same colour scheme, otherwise recreate both.
+            int profileHue = loadedUser.ProfileHue ?? OverlayColourScheme.Pink.GetHue();
+
+            if (changeOverlayColours(profileHue))
+                recreateBaseContent();
+
+            var actualRuleset = rulesets.GetRuleset(userRuleset?.ShortName ?? loadedUser.PlayMode).AsNonNull();
+
+            var userProfile = new UserProfileData(loadedUser, actualRuleset);
+            Header.User.Value = userProfile;
+
+            if (loadedUser.ProfileOrder != null)
+            {
+                foreach (string id in loadedUser.ProfileOrder)
+                {
+                    var sec = sections.FirstOrDefault(s => s.Identifier == id);
+
+                    if (sec != null)
+                    {
+                        sec.User.Value = userProfile;
+
+                        sectionsContainer.Add(sec);
+                        tabs.AddItem(sec);
+                    }
+                }
+            }
+
+            loadingLayer.Hide();
+        }
+
+        private void recreateBaseContent()
+        {
+            Child = new OsuContextMenuContainer
             {
                 RelativeSizeAxes = Axes.Both,
                 Child = sectionsContainer = new ProfileSectionsContainer
                 {
                     ExpandableHeader = Header,
-                    FixedHeader = tabs,
+                    FixedHeader = tabs = new ProfileSectionTabControl
+                    {
+                        RelativeSizeAxes = Axes.X,
+                        Anchor = Anchor.TopCentre,
+                        Origin = Anchor.TopCentre,
+                    },
                     HeaderBackground = new Box
                     {
                         // this is only visible as the ProfileTabControl background
@@ -140,7 +186,7 @@ namespace osu.Game.Overlays
                         RelativeSizeAxes = Axes.Both
                     },
                 }
-            });
+            };
 
             sectionsContainer.SelectedSection.ValueChanged += section =>
             {
@@ -167,45 +213,18 @@ namespace osu.Game.Overlays
                     sectionsContainer.ScrollTo(lastSection);
                 }
             };
-
-            sectionsContainer.ScrollToTop();
-
-            if (API.State.Value != APIState.Offline)
-            {
-                userReq = user.OnlineID > 1 ? new GetUserRequest(user.OnlineID, ruleset) : new GetUserRequest(user.Username, ruleset);
-                userReq.Success += u => userLoadComplete(u, ruleset);
-
-                API.Queue(userReq);
-                loadingLayer.Show();
-            }
         }
 
-        private void userLoadComplete(APIUser loadedUser, IRulesetInfo? userRuleset)
+        private bool changeOverlayColours(int hue)
         {
-            Debug.Assert(sections != null && sectionsContainer != null && tabs != null);
+            if (hue == ColourProvider.Hue)
+                return false;
 
-            var actualRuleset = rulesets.GetRuleset(userRuleset?.ShortName ?? loadedUser.PlayMode).AsNonNull();
+            ColourProvider.ChangeColourScheme(hue);
 
-            var userProfile = new UserProfileData(loadedUser, actualRuleset);
+            RecreateHeader();
-            Header.User.Value = userProfile;
+            UpdateColours();
-
+            return true;
-            if (loadedUser.ProfileOrder != null)
-            {
-                foreach (string id in loadedUser.ProfileOrder)
-                {
-                    var sec = sections.FirstOrDefault(s => s.Identifier == id);
-
-                    if (sec != null)
-                    {
-                        sec.User.Value = userProfile;
-
-                        sectionsContainer.Add(sec);
-                        tabs.AddItem(sec);
-                    }
-                }
-            }
-
-            loadingLayer.Hide();
         }
 
         private partial class ProfileSectionTabControl : OsuTabControl<ProfileSection>

osu.Game/Screens/Footer/ScreenFooter.cs

@@ -219,7 +219,7 @@ namespace osu.Game.Screens.Footer
 
             var targetPosition = targetButton?.ToSpaceOfOtherDrawable(targetButton.LayoutRectangle.TopRight, this) ?? fallbackPosition;
 
-            updateColourScheme(overlay.ColourProvider.ColourScheme);
+            updateColourScheme(overlay.ColourProvider.Hue);
 
             footerContent = overlay.CreateFooterContent();
 
@@ -256,16 +256,16 @@ namespace osu.Game.Screens.Footer
 
             temporarilyHiddenButtons.Clear();
 
-            updateColourScheme(OverlayColourScheme.Aquamarine);
+            updateColourScheme(OverlayColourScheme.Aquamarine.GetHue());
 
             contentContainer.Delay(timeUntilRun).Expire();
             contentContainer = null;
             activeOverlay = null;
         }
 
-        private void updateColourScheme(OverlayColourScheme colourScheme)
+        private void updateColourScheme(int hue)
         {
-            colourProvider.ChangeColourScheme(colourScheme);
+            colourProvider.ChangeColourScheme(hue);
 
             background.FadeColour(colourProvider.Background5, 150, Easing.OutQuint);