Implement CountryFilter component for RankingsOverlay (#7479)

Implement CountryFilter component for RankingsOverlay

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

@@ -0,0 +1,76 @@
+// 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.Containers;
+using osu.Game.Overlays.Rankings;
+using osu.Game.Users;
+using osu.Framework.Graphics;
+using osu.Framework.Graphics.Shapes;
+using osuTK.Graphics;
+using osu.Game.Graphics.Sprites;
+
+namespace osu.Game.Tests.Visual.Online
+{
+    public class TestSceneRankingsCountryFilter : OsuTestScene
+    {
+        public override IReadOnlyList<Type> RequiredTypes => new[]
+        {
+            typeof(CountryFilter),
+            typeof(CountryPill)
+        };
+
+        public TestSceneRankingsCountryFilter()
+        {
+            var countryBindable = new Bindable<Country>();
+
+            AddRange(new Drawable[]
+            {
+                new Box
+                {
+                    RelativeSizeAxes = Axes.Both,
+                    Colour = Color4.Gray,
+                },
+                new FillFlowContainer
+                {
+                    RelativeSizeAxes = Axes.X,
+                    AutoSizeAxes = Axes.Y,
+                    Direction = FillDirection.Vertical,
+                    Children = new Drawable[]
+                    {
+                        new CountryFilter
+                        {
+                            Anchor = Anchor.TopCentre,
+                            Origin = Anchor.TopCentre,
+                            Current = { BindTarget = countryBindable }
+                        },
+                        new OsuSpriteText
+                        {
+                            Anchor = Anchor.TopCentre,
+                            Origin = Anchor.TopCentre,
+                            Text = "Some content",
+                            Margin = new MarginPadding { Vertical = 20 }
+                        }
+                    }
+                }
+            });
+
+            var country = new Country
+            {
+                FlagName = "BY",
+                FullName = "Belarus"
+            };
+            var unknownCountry = new Country
+            {
+                FlagName = "CK",
+                FullName = "Cook Islands"
+            };
+
+            AddStep("Set country", () => countryBindable.Value = country);
+            AddStep("Set null country", () => countryBindable.Value = null);
+            AddStep("Set country with no flag", () => countryBindable.Value = unknownCountry);
+        }
+    }
+}

osu.Game/Overlays/Rankings/CountryFilter.cs

@@ -0,0 +1,105 @@
+// 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.Graphics;
+using osu.Framework.Graphics.Containers;
+using osu.Framework.Graphics.Shapes;
+using osu.Framework.Graphics.UserInterface;
+using osu.Game.Graphics;
+using osu.Game.Graphics.Sprites;
+using osu.Game.Users;
+using osuTK;
+
+namespace osu.Game.Overlays.Rankings
+{
+    public class CountryFilter : CompositeDrawable, IHasCurrentValue<Country>
+    {
+        private const int duration = 200;
+        private const int height = 50;
+
+        private readonly BindableWithCurrent<Country> current = new BindableWithCurrent<Country>();
+
+        public Bindable<Country> Current
+        {
+            get => current.Current;
+            set => current.Current = value;
+        }
+
+        private readonly Box background;
+        private readonly CountryPill countryPill;
+        private readonly Container content;
+
+        public CountryFilter()
+        {
+            RelativeSizeAxes = Axes.X;
+
+            InternalChild = content = new Container
+            {
+                RelativeSizeAxes = Axes.X,
+                Height = height,
+                Alpha = 0,
+                Children = new Drawable[]
+                {
+                    background = new Box
+                    {
+                        RelativeSizeAxes = Axes.Both
+                    },
+                    new FillFlowContainer
+                    {
+                        Anchor = Anchor.CentreLeft,
+                        Origin = Anchor.CentreLeft,
+                        Direction = FillDirection.Horizontal,
+                        Spacing = new Vector2(10, 0),
+                        Margin = new MarginPadding { Left = UserProfileOverlay.CONTENT_X_MARGIN },
+                        Children = new Drawable[]
+                        {
+                            new OsuSpriteText
+                            {
+                                Anchor = Anchor.CentreLeft,
+                                Origin = Anchor.CentreLeft,
+                                Text = @"filtered by country:",
+                                Font = OsuFont.GetFont(size: 14)
+                            },
+                            countryPill = new CountryPill
+                            {
+                                Anchor = Anchor.CentreLeft,
+                                Origin = Anchor.CentreLeft,
+                                Alpha = 0,
+                                Current = Current
+                            }
+                        }
+                    }
+                }
+            };
+        }
+
+        [BackgroundDependencyLoader]
+        private void load(OsuColour colours)
+        {
+            background.Colour = colours.GreySeafoam;
+        }
+
+        protected override void LoadComplete()
+        {
+            base.LoadComplete();
+            Current.BindValueChanged(onCountryChanged, true);
+        }
+
+        private void onCountryChanged(ValueChangedEvent<Country> country)
+        {
+            if (country.NewValue == null)
+            {
+                countryPill.Collapse();
+                this.ResizeHeightTo(0, duration, Easing.OutQuint);
+                content.FadeOut(duration, Easing.OutQuint);
+                return;
+            }
+
+            this.ResizeHeightTo(height, duration, Easing.OutQuint);
+            content.FadeIn(duration, Easing.OutQuint);
+            countryPill.Expand();
+        }
+    }
+}

osu.Game/Overlays/Rankings/CountryPill.cs

@@ -0,0 +1,164 @@
+// 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.Collections.Generic;
+using osu.Framework.Allocation;
+using osu.Framework.Bindables;
+using osu.Framework.Graphics;
+using osu.Framework.Graphics.Containers;
+using osu.Framework.Graphics.Shapes;
+using osu.Framework.Graphics.Sprites;
+using osu.Framework.Graphics.UserInterface;
+using osu.Game.Graphics;
+using osu.Game.Graphics.Containers;
+using osu.Game.Graphics.Sprites;
+using osu.Game.Users;
+using osu.Game.Users.Drawables;
+using osuTK;
+using osuTK.Graphics;
+
+namespace osu.Game.Overlays.Rankings
+{
+    public class CountryPill : CompositeDrawable, IHasCurrentValue<Country>
+    {
+        private const int duration = 200;
+
+        private readonly BindableWithCurrent<Country> current = new BindableWithCurrent<Country>();
+
+        public Bindable<Country> Current
+        {
+            get => current.Current;
+            set => current.Current = value;
+        }
+
+        private readonly Container content;
+        private readonly Box background;
+        private readonly UpdateableFlag flag;
+        private readonly OsuSpriteText countryName;
+
+        public CountryPill()
+        {
+            AutoSizeAxes = Axes.Both;
+
+            InternalChild = content = new CircularContainer
+            {
+                Height = 25,
+                AutoSizeDuration = duration,
+                AutoSizeEasing = Easing.OutQuint,
+                Masking = true,
+                Children = new Drawable[]
+                {
+                    background = new Box
+                    {
+                        RelativeSizeAxes = Axes.Both
+                    },
+                    new FillFlowContainer
+                    {
+                        Anchor = Anchor.Centre,
+                        Origin = Anchor.Centre,
+                        RelativeSizeAxes = Axes.Y,
+                        AutoSizeAxes = Axes.X,
+                        Margin = new MarginPadding { Horizontal = 10 },
+                        Direction = FillDirection.Horizontal,
+                        Spacing = new Vector2(8, 0),
+                        Children = new Drawable[]
+                        {
+                            new FillFlowContainer
+                            {
+                                RelativeSizeAxes = Axes.Y,
+                                AutoSizeAxes = Axes.X,
+                                Anchor = Anchor.Centre,
+                                Origin = Anchor.Centre,
+                                Direction = FillDirection.Horizontal,
+                                Spacing = new Vector2(3, 0),
+                                Children = new Drawable[]
+                                {
+                                    flag = new UpdateableFlag
+                                    {
+                                        Anchor = Anchor.Centre,
+                                        Origin = Anchor.Centre,
+                                        Size = new Vector2(22, 15)
+                                    },
+                                    countryName = new OsuSpriteText
+                                    {
+                                        Anchor = Anchor.Centre,
+                                        Origin = Anchor.Centre,
+                                        Font = OsuFont.GetFont(size: 14)
+                                    }
+                                }
+                            },
+                            new CloseButton
+                            {
+                                Anchor = Anchor.Centre,
+                                Origin = Anchor.Centre,
+                                Action = () => Current.Value = null
+                            }
+                        }
+                    }
+                }
+            };
+        }
+
+        [BackgroundDependencyLoader]
+        private void load(OsuColour colours)
+        {
+            background.Colour = colours.GreySeafoamDarker;
+        }
+
+        protected override void LoadComplete()
+        {
+            base.LoadComplete();
+            Current.BindValueChanged(onCountryChanged, true);
+        }
+
+        public void Expand()
+        {
+            content.ClearTransforms();
+            content.AutoSizeAxes = Axes.X;
+
+            this.FadeIn(duration, Easing.OutQuint);
+        }
+
+        public void Collapse()
+        {
+            content.ClearTransforms();
+            content.AutoSizeAxes = Axes.None;
+            content.ResizeWidthTo(0, duration, Easing.OutQuint);
+
+            this.FadeOut(duration, Easing.OutQuint);
+        }
+
+        private void onCountryChanged(ValueChangedEvent<Country> country)
+        {
+            if (country.NewValue == null)
+                return;
+
+            flag.Country = country.NewValue;
+            countryName.Text = country.NewValue.FullName;
+        }
+
+        private class CloseButton : OsuHoverContainer
+        {
+            private readonly SpriteIcon icon;
+
+            protected override IEnumerable<Drawable> EffectTargets => new[] { icon };
+
+            public CloseButton()
+            {
+                AutoSizeAxes = Axes.Both;
+                Add(icon = new SpriteIcon
+                {
+                    Size = new Vector2(8),
+                    Icon = FontAwesome.Solid.Times
+                });
+            }
+
+            [BackgroundDependencyLoader]
+            private void load(OsuColour colours)
+            {
+                IdleColour = colours.GreySeafoamLighter;
+                HoverColour = Color4.White;
+            }
+        }
+    }
+}