Merge pull request #17014 from bdach/mod-overlay/columns

Implement column display for new mod design

osu.Game.Tests/Visual/UserInterface/TestSceneModColumn.cs

@@ -0,0 +1,187 @@
+// 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.Linq;
+using NUnit.Framework;
+using osu.Framework.Allocation;
+using osu.Framework.Extensions.IEnumerableExtensions;
+using osu.Framework.Graphics;
+using osu.Framework.Graphics.Containers;
+using osu.Framework.Testing;
+using osu.Game.Graphics.UserInterface;
+using osu.Game.Overlays;
+using osu.Game.Overlays.Mods;
+using osu.Game.Rulesets.Catch;
+using osu.Game.Rulesets.Mania;
+using osu.Game.Rulesets.Mods;
+using osu.Game.Rulesets.Osu;
+using osu.Game.Rulesets.Taiko;
+using osuTK.Input;
+
+namespace osu.Game.Tests.Visual.UserInterface
+{
+    [TestFixture]
+    public class TestSceneModColumn : OsuManualInputManagerTestScene
+    {
+        [Cached]
+        private OverlayColourProvider colourProvider = new OverlayColourProvider(OverlayColourScheme.Green);
+
+        [TestCase(ModType.DifficultyReduction)]
+        [TestCase(ModType.DifficultyIncrease)]
+        [TestCase(ModType.Conversion)]
+        [TestCase(ModType.Automation)]
+        [TestCase(ModType.Fun)]
+        public void TestBasic(ModType modType)
+        {
+            AddStep("create content", () => Child = new Container
+            {
+                RelativeSizeAxes = Axes.Both,
+                Padding = new MarginPadding(30),
+                Child = new ModColumn(modType, false)
+                {
+                    Anchor = Anchor.Centre,
+                    Origin = Anchor.Centre
+                }
+            });
+
+            AddStep("change ruleset to osu!", () => Ruleset.Value = new OsuRuleset().RulesetInfo);
+            AddStep("change ruleset to taiko", () => Ruleset.Value = new TaikoRuleset().RulesetInfo);
+            AddStep("change ruleset to catch", () => Ruleset.Value = new CatchRuleset().RulesetInfo);
+            AddStep("change ruleset to mania", () => Ruleset.Value = new ManiaRuleset().RulesetInfo);
+        }
+
+        [Test]
+        public void TestMultiSelection()
+        {
+            ModColumn column = null;
+            AddStep("create content", () => Child = new Container
+            {
+                RelativeSizeAxes = Axes.Both,
+                Padding = new MarginPadding(30),
+                Child = column = new ModColumn(ModType.DifficultyIncrease, true)
+                {
+                    Anchor = Anchor.Centre,
+                    Origin = Anchor.Centre
+                }
+            });
+
+            AddUntilStep("wait for panel load", () => column.IsLoaded && column.ItemsLoaded);
+
+            clickToggle();
+            AddUntilStep("all panels selected", () => this.ChildrenOfType<ModPanel>().All(panel => panel.Active.Value));
+
+            clickToggle();
+            AddUntilStep("all panels deselected", () => this.ChildrenOfType<ModPanel>().All(panel => !panel.Active.Value));
+
+            AddStep("manually activate all panels", () => this.ChildrenOfType<ModPanel>().ForEach(panel => panel.Active.Value = true));
+            AddUntilStep("checkbox selected", () => this.ChildrenOfType<OsuCheckbox>().Single().Current.Value);
+
+            AddStep("deselect first panel", () => this.ChildrenOfType<ModPanel>().First().Active.Value = false);
+            AddUntilStep("checkbox not selected", () => !this.ChildrenOfType<OsuCheckbox>().Single().Current.Value);
+
+            void clickToggle() => AddStep("click toggle", () =>
+            {
+                var checkbox = this.ChildrenOfType<OsuCheckbox>().Single();
+                InputManager.MoveMouseTo(checkbox);
+                InputManager.Click(MouseButton.Left);
+            });
+        }
+
+        [Test]
+        public void TestFiltering()
+        {
+            TestModColumn column = null;
+
+            AddStep("create content", () => Child = new Container
+            {
+                RelativeSizeAxes = Axes.Both,
+                Padding = new MarginPadding(30),
+                Child = column = new TestModColumn(ModType.Fun, true)
+                {
+                    Anchor = Anchor.Centre,
+                    Origin = Anchor.Centre
+                }
+            });
+
+            AddStep("set filter", () => column.Filter = mod => mod.Name.Contains("Wind", StringComparison.CurrentCultureIgnoreCase));
+            AddUntilStep("two panels visible", () => column.ChildrenOfType<ModPanel>().Count(panel => !panel.Filtered.Value) == 2);
+
+            clickToggle();
+            AddUntilStep("wait for animation", () => !column.SelectionAnimationRunning);
+            AddAssert("only visible items selected", () => column.ChildrenOfType<ModPanel>().Where(panel => panel.Active.Value).All(panel => !panel.Filtered.Value));
+
+            AddStep("unset filter", () => column.Filter = null);
+            AddUntilStep("all panels visible", () => column.ChildrenOfType<ModPanel>().All(panel => !panel.Filtered.Value));
+            AddAssert("checkbox not selected", () => !column.ChildrenOfType<OsuCheckbox>().Single().Current.Value);
+
+            AddStep("set filter", () => column.Filter = mod => mod.Name.Contains("Wind", StringComparison.CurrentCultureIgnoreCase));
+            AddUntilStep("two panels visible", () => column.ChildrenOfType<ModPanel>().Count(panel => !panel.Filtered.Value) == 2);
+            AddAssert("checkbox selected", () => column.ChildrenOfType<OsuCheckbox>().Single().Current.Value);
+
+            AddStep("filter out everything", () => column.Filter = _ => false);
+            AddUntilStep("no panels visible", () => column.ChildrenOfType<ModPanel>().All(panel => panel.Filtered.Value));
+            AddUntilStep("checkbox hidden", () => !column.ChildrenOfType<OsuCheckbox>().Single().IsPresent);
+
+            AddStep("inset filter", () => column.Filter = null);
+            AddUntilStep("all panels visible", () => column.ChildrenOfType<ModPanel>().All(panel => !panel.Filtered.Value));
+            AddUntilStep("checkbox visible", () => column.ChildrenOfType<OsuCheckbox>().Single().IsPresent);
+
+            void clickToggle() => AddStep("click toggle", () =>
+            {
+                var checkbox = this.ChildrenOfType<OsuCheckbox>().Single();
+                InputManager.MoveMouseTo(checkbox);
+                InputManager.Click(MouseButton.Left);
+            });
+        }
+
+        [Test]
+        public void TestKeyboardSelection()
+        {
+            ModColumn column = null;
+            AddStep("create content", () => Child = new Container
+            {
+                RelativeSizeAxes = Axes.Both,
+                Padding = new MarginPadding(30),
+                Child = column = new ModColumn(ModType.DifficultyReduction, true, new[] { Key.Q, Key.W, Key.E, Key.R, Key.T, Key.Y, Key.U, Key.I, Key.O, Key.P })
+                {
+                    Anchor = Anchor.Centre,
+                    Origin = Anchor.Centre
+                }
+            });
+
+            AddUntilStep("wait for panel load", () => column.IsLoaded && column.ItemsLoaded);
+
+            AddStep("press W", () => InputManager.Key(Key.W));
+            AddAssert("NF panel selected", () => this.ChildrenOfType<ModPanel>().Single(panel => panel.Mod.Acronym == "NF").Active.Value);
+
+            AddStep("press W again", () => InputManager.Key(Key.W));
+            AddAssert("NF panel deselected", () => !this.ChildrenOfType<ModPanel>().Single(panel => panel.Mod.Acronym == "NF").Active.Value);
+
+            AddStep("set filter to NF", () => column.Filter = mod => mod.Acronym == "NF");
+
+            AddStep("press W", () => InputManager.Key(Key.W));
+            AddAssert("NF panel selected", () => this.ChildrenOfType<ModPanel>().Single(panel => panel.Mod.Acronym == "NF").Active.Value);
+
+            AddStep("press W again", () => InputManager.Key(Key.W));
+            AddAssert("NF panel deselected", () => !this.ChildrenOfType<ModPanel>().Single(panel => panel.Mod.Acronym == "NF").Active.Value);
+
+            AddStep("filter out everything", () => column.Filter = _ => false);
+
+            AddStep("press W", () => InputManager.Key(Key.W));
+            AddAssert("NF panel not selected", () => !this.ChildrenOfType<ModPanel>().Single(panel => panel.Mod.Acronym == "NF").Active.Value);
+
+            AddStep("clear filter", () => column.Filter = null);
+        }
+
+        private class TestModColumn : ModColumn
+        {
+            public new bool SelectionAnimationRunning => base.SelectionAnimationRunning;
+
+            public TestModColumn(ModType modType, bool allowBulkSelection)
+                : base(modType, allowBulkSelection)
+            {
+            }
+        }
+    }
+}

osu.Game/Overlays/Mods/ModColumn.cs

@@ -0,0 +1,426 @@
+// 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 System.Linq;
+using System.Threading;
+using System.Threading.Tasks;
+using Humanizer;
+using osu.Framework.Allocation;
+using osu.Framework.Bindables;
+using osu.Framework.Extensions.Color4Extensions;
+using osu.Framework.Graphics;
+using osu.Framework.Graphics.Colour;
+using osu.Framework.Graphics.Containers;
+using osu.Framework.Graphics.Shapes;
+using osu.Framework.Graphics.Sprites;
+using osu.Framework.Input.Events;
+using osu.Game.Graphics;
+using osu.Game.Graphics.Containers;
+using osu.Game.Graphics.UserInterface;
+using osu.Game.Rulesets.Mods;
+using osu.Game.Utils;
+using osuTK;
+using osuTK.Graphics;
+using osuTK.Input;
+
+#nullable enable
+
+namespace osu.Game.Overlays.Mods
+{
+    public class ModColumn : CompositeDrawable
+    {
+        private Func<Mod, bool>? filter;
+
+        /// <summary>
+        /// Function determining whether each mod in the column should be displayed.
+        /// A return value of <see langword="true"/> means that the mod is not filtered and therefore its corresponding panel should be displayed.
+        /// A return value of <see langword="false"/> means that the mod is filtered out and therefore its corresponding panel should be hidden.
+        /// </summary>
+        public Func<Mod, bool>? Filter
+        {
+            get => filter;
+            set
+            {
+                filter = value;
+                updateFilter();
+            }
+        }
+
+        private readonly ModType modType;
+        private readonly Key[]? toggleKeys;
+
+        private readonly Bindable<Dictionary<ModType, IReadOnlyList<Mod>>> availableMods = new Bindable<Dictionary<ModType, IReadOnlyList<Mod>>>();
+
+        private readonly TextFlowContainer headerText;
+        private readonly Box headerBackground;
+        private readonly Container contentContainer;
+        private readonly Box contentBackground;
+        private readonly FillFlowContainer<ModPanel> panelFlow;
+        private readonly ToggleAllCheckbox? toggleAllCheckbox;
+
+        private Colour4 accentColour;
+
+        private Task? latestLoadTask;
+        internal bool ItemsLoaded => latestLoadTask == null;
+
+        private const float header_height = 42;
+
+        public ModColumn(ModType modType, bool allowBulkSelection, Key[]? toggleKeys = null)
+        {
+            this.modType = modType;
+            this.toggleKeys = toggleKeys;
+
+            Width = 320;
+            RelativeSizeAxes = Axes.Y;
+            Shear = new Vector2(ModPanel.SHEAR_X, 0);
+            CornerRadius = ModPanel.CORNER_RADIUS;
+            Masking = true;
+
+            Container controlContainer;
+            InternalChildren = new Drawable[]
+            {
+                new Container
+                {
+                    RelativeSizeAxes = Axes.X,
+                    Height = header_height + ModPanel.CORNER_RADIUS,
+                    Children = new Drawable[]
+                    {
+                        headerBackground = new Box
+                        {
+                            RelativeSizeAxes = Axes.X,
+                            Height = header_height + ModPanel.CORNER_RADIUS
+                        },
+                        headerText = new OsuTextFlowContainer(t =>
+                        {
+                            t.Font = OsuFont.TorusAlternate.With(size: 17);
+                            t.Shadow = false;
+                            t.Colour = Colour4.Black;
+                        })
+                        {
+                            RelativeSizeAxes = Axes.X,
+                            AutoSizeAxes = Axes.Y,
+                            Anchor = Anchor.CentreLeft,
+                            Origin = Anchor.CentreLeft,
+                            Shear = new Vector2(-ModPanel.SHEAR_X, 0),
+                            Padding = new MarginPadding
+                            {
+                                Horizontal = 17,
+                                Bottom = ModPanel.CORNER_RADIUS
+                            }
+                        }
+                    }
+                },
+                new Container
+                {
+                    RelativeSizeAxes = Axes.Both,
+                    Padding = new MarginPadding { Top = header_height },
+                    Child = contentContainer = new Container
+                    {
+                        RelativeSizeAxes = Axes.Both,
+                        Masking = true,
+                        CornerRadius = ModPanel.CORNER_RADIUS,
+                        BorderThickness = 3,
+                        Children = new Drawable[]
+                        {
+                            contentBackground = new Box
+                            {
+                                RelativeSizeAxes = Axes.Both
+                            },
+                            new GridContainer
+                            {
+                                RelativeSizeAxes = Axes.Both,
+                                RowDimensions = new[]
+                                {
+                                    new Dimension(GridSizeMode.AutoSize),
+                                    new Dimension()
+                                },
+                                Content = new[]
+                                {
+                                    new Drawable[]
+                                    {
+                                        controlContainer = new Container
+                                        {
+                                            RelativeSizeAxes = Axes.X,
+                                            Padding = new MarginPadding { Horizontal = 14 }
+                                        }
+                                    },
+                                    new Drawable[]
+                                    {
+                                        new OsuScrollContainer
+                                        {
+                                            RelativeSizeAxes = Axes.Both,
+                                            ScrollbarOverlapsContent = false,
+                                            Child = panelFlow = new FillFlowContainer<ModPanel>
+                                            {
+                                                RelativeSizeAxes = Axes.X,
+                                                AutoSizeAxes = Axes.Y,
+                                                Spacing = new Vector2(0, 7),
+                                                Padding = new MarginPadding(7)
+                                            }
+                                        }
+                                    }
+                                }
+                            }
+                        }
+                    }
+                }
+            };
+
+            createHeaderText();
+
+            if (allowBulkSelection)
+            {
+                controlContainer.Height = 35;
+                controlContainer.Add(toggleAllCheckbox = new ToggleAllCheckbox(this)
+                {
+                    Anchor = Anchor.CentreLeft,
+                    Origin = Anchor.CentreLeft,
+                    Scale = new Vector2(0.8f),
+                    RelativeSizeAxes = Axes.X,
+                    LabelText = "Enable All",
+                    Shear = new Vector2(-ModPanel.SHEAR_X, 0)
+                });
+                panelFlow.Padding = new MarginPadding
+                {
+                    Top = 0,
+                    Bottom = 7,
+                    Horizontal = 7
+                };
+            }
+        }
+
+        private void createHeaderText()
+        {
+            IEnumerable<string> headerTextWords = modType.Humanize(LetterCasing.Title).Split(' ');
+
+            if (headerTextWords.Count() > 1)
+            {
+                headerText.AddText($"{headerTextWords.First()} ", t => t.Font = t.Font.With(weight: FontWeight.SemiBold));
+                headerTextWords = headerTextWords.Skip(1);
+            }
+
+            headerText.AddText(string.Join(' ', headerTextWords));
+        }
+
+        [BackgroundDependencyLoader]
+        private void load(OsuGameBase game, OverlayColourProvider colourProvider, OsuColour colours)
+        {
+            availableMods.BindTo(game.AvailableMods);
+
+            headerBackground.Colour = accentColour = colours.ForModType(modType);
+
+            if (toggleAllCheckbox != null)
+            {
+                toggleAllCheckbox.AccentColour = accentColour;
+                toggleAllCheckbox.AccentHoverColour = accentColour.Lighten(0.3f);
+            }
+
+            contentContainer.BorderColour = ColourInfo.GradientVertical(colourProvider.Background4, colourProvider.Background3);
+            contentBackground.Colour = colourProvider.Background4;
+        }
+
+        protected override void LoadComplete()
+        {
+            base.LoadComplete();
+            availableMods.BindValueChanged(_ => Scheduler.AddOnce(updateMods));
+            updateMods();
+        }
+
+        private CancellationTokenSource? cancellationTokenSource;
+
+        private void updateMods()
+        {
+            var newMods = ModUtils.FlattenMods(availableMods.Value.GetValueOrDefault(modType) ?? Array.Empty<Mod>()).ToList();
+
+            if (newMods.SequenceEqual(panelFlow.Children.Select(p => p.Mod)))
+                return;
+
+            cancellationTokenSource?.Cancel();
+
+            var panels = newMods.Select(mod => new ModPanel(mod)
+            {
+                Shear = new Vector2(-ModPanel.SHEAR_X, 0)
+            });
+
+            Task? loadTask;
+
+            latestLoadTask = loadTask = LoadComponentsAsync(panels, loaded =>
+            {
+                panelFlow.ChildrenEnumerable = loaded;
+
+                foreach (var panel in panelFlow)
+                    panel.Active.BindValueChanged(_ => updateToggleState());
+                updateToggleState();
+
+                updateFilter();
+            }, (cancellationTokenSource = new CancellationTokenSource()).Token);
+            loadTask.ContinueWith(_ =>
+            {
+                if (loadTask == latestLoadTask)
+                    latestLoadTask = null;
+            });
+        }
+
+        #region Bulk select / deselect
+
+        private const double initial_multiple_selection_delay = 120;
+
+        private double selectionDelay = initial_multiple_selection_delay;
+        private double lastSelection;
+
+        private readonly Queue<Action> pendingSelectionOperations = new Queue<Action>();
+
+        protected bool SelectionAnimationRunning => pendingSelectionOperations.Count > 0;
+
+        protected override void Update()
+        {
+            base.Update();
+
+            if (selectionDelay == initial_multiple_selection_delay || Time.Current - lastSelection >= selectionDelay)
+            {
+                if (pendingSelectionOperations.TryDequeue(out var dequeuedAction))
+                {
+                    dequeuedAction();
+
+                    // each time we play an animation, we decrease the time until the next animation (to ramp the visual and audible elements).
+                    selectionDelay = Math.Max(30, selectionDelay * 0.8f);
+                    lastSelection = Time.Current;
+                }
+                else
+                {
+                    // reset the selection delay after all animations have been completed.
+                    // this will cause the next action to be immediately performed.
+                    selectionDelay = initial_multiple_selection_delay;
+                }
+            }
+        }
+
+        private void updateToggleState()
+        {
+            if (toggleAllCheckbox != null && !SelectionAnimationRunning)
+            {
+                toggleAllCheckbox.Alpha = panelFlow.Any(panel => !panel.Filtered.Value) ? 1 : 0;
+                toggleAllCheckbox.Current.Value = panelFlow.Where(panel => !panel.Filtered.Value).All(panel => panel.Active.Value);
+            }
+        }
+
+        /// <summary>
+        /// Selects all mods.
+        /// </summary>
+        public void SelectAll()
+        {
+            pendingSelectionOperations.Clear();
+
+            foreach (var button in panelFlow.Where(b => !b.Active.Value && !b.Filtered.Value))
+                pendingSelectionOperations.Enqueue(() => button.Active.Value = true);
+        }
+
+        /// <summary>
+        /// Deselects all mods.
+        /// </summary>
+        public void DeselectAll()
+        {
+            pendingSelectionOperations.Clear();
+
+            foreach (var button in panelFlow.Where(b => b.Active.Value && !b.Filtered.Value))
+                pendingSelectionOperations.Enqueue(() => button.Active.Value = false);
+        }
+
+        private class ToggleAllCheckbox : OsuCheckbox
+        {
+            private Color4 accentColour;
+
+            public Color4 AccentColour
+            {
+                get => accentColour;
+                set
+                {
+                    accentColour = value;
+                    updateState();
+                }
+            }
+
+            private Color4 accentHoverColour;
+
+            public Color4 AccentHoverColour
+            {
+                get => accentHoverColour;
+                set
+                {
+                    accentHoverColour = value;
+                    updateState();
+                }
+            }
+
+            private readonly ModColumn column;
+
+            public ToggleAllCheckbox(ModColumn column)
+                : base(false)
+            {
+                this.column = column;
+            }
+
+            protected override void ApplyLabelParameters(SpriteText text)
+            {
+                base.ApplyLabelParameters(text);
+                text.Font = text.Font.With(weight: FontWeight.SemiBold);
+            }
+
+            [BackgroundDependencyLoader]
+            private void load()
+            {
+                updateState();
+            }
+
+            private void updateState()
+            {
+                Nub.AccentColour = AccentColour;
+                Nub.GlowingAccentColour = AccentHoverColour;
+                Nub.GlowColour = AccentHoverColour.Opacity(0.2f);
+            }
+
+            protected override void OnUserChange(bool value)
+            {
+                if (value)
+                    column.SelectAll();
+                else
+                    column.DeselectAll();
+            }
+        }
+
+        #endregion
+
+        #region Filtering support
+
+        private void updateFilter()
+        {
+            foreach (var modPanel in panelFlow)
+                modPanel.ApplyFilter(Filter);
+
+            updateToggleState();
+        }
+
+        #endregion
+
+        #region Keyboard selection support
+
+        protected override bool OnKeyDown(KeyDownEvent e)
+        {
+            if (e.ControlPressed || e.AltPressed) return false;
+            if (toggleKeys == null) return false;
+
+            int index = Array.IndexOf(toggleKeys, e.Key);
+            if (index < 0) return false;
+
+            var panel = panelFlow.ElementAtOrDefault(index);
+            if (panel == null || panel.Filtered.Value) return false;
+
+            panel.Active.Toggle();
+            return true;
+        }
+
+        #endregion
+    }
+}

osu.Game/Overlays/Mods/ModPanel.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;
 using osu.Framework.Allocation;
 using osu.Framework.Audio;
 using osu.Framework.Audio.Sample;
@@ -28,6 +29,7 @@ namespace osu.Game.Overlays.Mods
     {
         public Mod Mod { get; }
         public BindableBool Active { get; } = new BindableBool();
+        public BindableBool Filtered { get; } = new BindableBool();
 
         protected readonly Box Background;
         protected readonly Container SwitchContainer;
@@ -40,10 +42,10 @@ namespace osu.Game.Overlays.Mods
 
         protected const double TRANSITION_DURATION = 150;
 
-        protected const float SHEAR_X = 0.2f;
+        public const float SHEAR_X = 0.2f;
+        public const float CORNER_RADIUS = 7;
 
         protected const float HEIGHT = 42;
-        protected const float CORNER_RADIUS = 7;
         protected const float IDLE_SWITCH_WIDTH = 54;
         protected const float EXPANDED_SWITCH_WIDTH = 70;
 
@@ -157,6 +159,7 @@ namespace osu.Game.Overlays.Mods
                 playStateChangeSamples();
                 UpdateState();
             });
+            Filtered.BindValueChanged(_ => updateFilterState());
 
             UpdateState();
             FinishTransforms(true);
@@ -190,7 +193,7 @@ namespace osu.Game.Overlays.Mods
                 mouseDown = true;
 
             UpdateState();
-            return true;
+            return false;
         }
 
         protected override void OnMouseUp(MouseUpEvent e)
@@ -235,5 +238,19 @@ namespace osu.Game.Overlays.Mods
             TextBackground.FadeColour(textBackgroundColour, transitionDuration, Easing.OutQuint);
             TextFlow.FadeColour(textColour, transitionDuration, Easing.OutQuint);
         }
+
+        #region Filtering support
+
+        public void ApplyFilter(Func<Mod, bool>? filter)
+        {
+            Filtered.Value = filter != null && !filter.Invoke(Mod);
+        }
+
+        private void updateFilterState()
+        {
+            this.FadeTo(Filtered.Value ? 0 : 1);
+        }
+
+        #endregion
     }
 }