Implement RankingsHeader component for rankings overlay (#6082)

Implement RankingsHeader component for rankings overlay

Co-authored-by: Dean Herbert <pe@ppy.sh>

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

@@ -0,0 +1,70 @@
+// 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.Collections.Generic;
+using osu.Framework.Bindables;
+using osu.Framework.Graphics;
+using osu.Game.Overlays.Rankings;
+using osu.Game.Rulesets;
+using osu.Game.Users;
+
+namespace osu.Game.Tests.Visual.Online
+{
+    public class TestSceneRankingsHeader : OsuTestScene
+    {
+        public override IReadOnlyList<Type> RequiredTypes => new[]
+        {
+            typeof(DismissableFlag),
+            typeof(HeaderTitle),
+            typeof(RankingsRulesetSelector),
+            typeof(RankingsScopeSelector),
+            typeof(RankingsHeader),
+        };
+
+        public TestSceneRankingsHeader()
+        {
+            var countryBindable = new Bindable<Country>();
+            var ruleset = new Bindable<RulesetInfo>();
+            var scope = new Bindable<RankingsScope>();
+
+            Add(new RankingsHeader
+            {
+                Anchor = Anchor.Centre,
+                Origin = Anchor.Centre,
+                Scope = { BindTarget = scope },
+                Country = { BindTarget = countryBindable },
+                Ruleset = { BindTarget = ruleset },
+                Spotlights = new[]
+                {
+                    new Spotlight
+                    {
+                        Id = 1,
+                        Text = "Spotlight 1"
+                    },
+                    new Spotlight
+                    {
+                        Id = 2,
+                        Text = "Spotlight 2"
+                    },
+                    new Spotlight
+                    {
+                        Id = 3,
+                        Text = "Spotlight 3"
+                    }
+                }
+            });
+
+            var country = new Country
+            {
+                FlagName = "BY",
+                FullName = "Belarus"
+            };
+
+            AddStep("Set country", () => countryBindable.Value = country);
+            AddAssert("Check scope is Performance", () => scope.Value == RankingsScope.Performance);
+            AddStep("Set scope to Score", () => scope.Value = RankingsScope.Score);
+            AddAssert("Check country is Null", () => countryBindable.Value == null);
+        }
+    }
+}

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

@@ -1,4 +1,4 @@
-// Copyright (c) ppy Pty Ltd <contact@ppy.sh>. Licensed under the MIT Licence.
+// 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;
@@ -35,7 +35,7 @@ namespace osu.Game.Tests.Visual.Online
                 {
                     Anchor = Anchor.Centre,
                     Origin = Anchor.Centre,
-                    Current = scope
+                    Current = scope,
                 }
             });
 

osu.Game/Graphics/UserInterface/GradientLineTabControl.cs

@@ -1,4 +1,4 @@
-// Copyright (c) ppy Pty Ltd <contact@ppy.sh>. Licensed under the MIT Licence.
+// 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.Graphics.UserInterface;

osu.Game/Overlays/Rankings/HeaderTitle.cs

@@ -91,8 +91,8 @@ namespace osu.Game.Overlays.Rankings
 
             Scope.Value = RankingsScope.Performance;
 
-            flag.Show();
             flag.Country = country.NewValue;
+            flag.Show();
         }
     }
 }

osu.Game/Overlays/Rankings/RankingsHeader.cs

@@ -0,0 +1,137 @@
+// 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.Graphics.Containers;
+using osu.Framework.Graphics;
+using osu.Framework.Allocation;
+using osu.Framework.Bindables;
+using osu.Game.Rulesets;
+using osu.Game.Users;
+using osu.Framework.Graphics.Sprites;
+using osu.Framework.Graphics.Textures;
+using osuTK;
+using osu.Game.Graphics.UserInterface;
+using System.Collections.Generic;
+
+namespace osu.Game.Overlays.Rankings
+{
+    public class RankingsHeader : CompositeDrawable
+    {
+        private const int content_height = 250;
+        private const int dropdown_height = 50;
+
+        public IEnumerable<Spotlight> Spotlights
+        {
+            get => dropdown.Items;
+            set => dropdown.Items = value;
+        }
+
+        public readonly Bindable<RankingsScope> Scope = new Bindable<RankingsScope>();
+        public readonly Bindable<RulesetInfo> Ruleset = new Bindable<RulesetInfo>();
+        public readonly Bindable<Country> Country = new Bindable<Country>();
+        public readonly Bindable<Spotlight> Spotlight = new Bindable<Spotlight>();
+
+        private readonly Container dropdownPlaceholder;
+        private readonly OsuDropdown<Spotlight> dropdown;
+
+        public RankingsHeader()
+        {
+            RelativeSizeAxes = Axes.X;
+            AutoSizeAxes = Axes.Y;
+
+            AddInternal(new FillFlowContainer
+            {
+                RelativeSizeAxes = Axes.X,
+                AutoSizeAxes = Axes.Y,
+                Children = new Drawable[]
+                {
+                    new RankingsRulesetSelector
+                    {
+                        Anchor = Anchor.TopCentre,
+                        Origin = Anchor.TopCentre,
+                        Current = Ruleset
+                    },
+                    new Container
+                    {
+                        Anchor = Anchor.TopCentre,
+                        Origin = Anchor.TopCentre,
+                        RelativeSizeAxes = Axes.X,
+                        Height = content_height,
+                        Children = new Drawable[]
+                        {
+                            new Container
+                            {
+                                RelativeSizeAxes = Axes.Both,
+                                Masking = true,
+                                Child = new HeaderBackground(),
+                            },
+                            new FillFlowContainer
+                            {
+                                AutoSizeAxes = Axes.Y,
+                                RelativeSizeAxes = Axes.X,
+                                Direction = FillDirection.Vertical,
+                                Spacing = new Vector2(0, 20),
+                                Children = new Drawable[]
+                                {
+                                    new RankingsScopeSelector
+                                    {
+                                        Margin = new MarginPadding { Top = 10 },
+                                        Current = Scope
+                                    },
+                                    new HeaderTitle
+                                    {
+                                        Anchor = Anchor.TopCentre,
+                                        Origin = Anchor.TopCentre,
+                                        Margin = new MarginPadding { Top = 10 },
+                                        Scope = { BindTarget = Scope },
+                                        Country = { BindTarget = Country },
+                                    },
+                                    dropdownPlaceholder = new Container
+                                    {
+                                        Anchor = Anchor.TopCentre,
+                                        Origin = Anchor.TopCentre,
+                                        RelativeSizeAxes = Axes.X,
+                                        Height = dropdown_height,
+                                        Width = 0.8f,
+                                        AlwaysPresent = true,
+                                        Child = dropdown = new OsuDropdown<Spotlight>
+                                        {
+                                            RelativeSizeAxes = Axes.X,
+                                            Current = Spotlight,
+                                        }
+                                    }
+                                }
+                            },
+                        }
+                    }
+                }
+            });
+        }
+
+        protected override void LoadComplete()
+        {
+            Scope.BindValueChanged(onScopeChanged, true);
+            base.LoadComplete();
+        }
+
+        private void onScopeChanged(ValueChangedEvent<RankingsScope> scope) =>
+            dropdownPlaceholder.FadeTo(scope.NewValue == RankingsScope.Spotlights ? 1 : 0, 200, Easing.OutQuint);
+
+        private class HeaderBackground : Sprite
+        {
+            public HeaderBackground()
+            {
+                Anchor = Anchor.Centre;
+                Origin = Anchor.Centre;
+                RelativeSizeAxes = Axes.Both;
+                FillMode = FillMode.Fill;
+            }
+
+            [BackgroundDependencyLoader]
+            private void load(TextureStore textures)
+            {
+                Texture = textures.Get(@"Headers/rankings");
+            }
+        }
+    }
+}

osu.Game/Overlays/Rankings/Spotlight.cs

@@ -0,0 +1,18 @@
+// 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 Newtonsoft.Json;
+
+namespace osu.Game.Overlays.Rankings
+{
+    public class Spotlight
+    {
+        [JsonProperty("id")]
+        public int Id;
+
+        [JsonProperty("text")]
+        public string Text;
+
+        public override string ToString() => Text;
+    }
+}