1
0
mirror of https://github.com/ppy/osu.git synced 2024-11-11 12:57:36 +08:00

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

Add custom hue support to user profile overlay
This commit is contained in:
Bartłomiej Dach 2024-07-22 09:41:32 +02:00 committed by GitHub
commit dd8be62d07
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
7 changed files with 254 additions and 115 deletions

View File

@ -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",

View File

@ -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;

View File

@ -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;
Waves.SecondWaveColour = ColourProvider.Light3;
Waves.ThirdWaveColour = ColourProvider.Dark4;
Waves.FourthWaveColour = ColourProvider.Dark3;
UpdateColours();
}
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();

View File

@ -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)
{
ColourScheme = colourScheme;
}
public void ChangeColourScheme(OverlayColourScheme colourScheme) => ChangeColourScheme(colourScheme.GetHue());
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 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
private Color4 getColour(float saturation, float lightness) => Framework.Graphics.Colour4.FromHSL(Hue / 360f, saturation, lightness);
}
}

View File

@ -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;
}
}
}
}

View File

@ -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
{
RelativeSizeAxes = Axes.X,
Anchor = Anchor.TopCentre,
Origin = Anchor.TopCentre,
};
changeOverlayColours(OverlayColourScheme.Pink.GetHue());
recreateBaseContent();
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);
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();
RecreateHeader();
UpdateColours();
return true;
}
private partial class ProfileSectionTabControl : OsuTabControl<ProfileSection>

View File

@ -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);