Merge pull request #16974 from bdach/mod-overlay/panel

Implement mod panel for new mod select design

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

@@ -0,0 +1,81 @@
+// 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 NUnit.Framework;
+using osu.Framework.Allocation;
+using osu.Framework.Graphics;
+using osu.Framework.Graphics.Containers;
+using osu.Game.Overlays;
+using osu.Game.Overlays.Mods;
+using osu.Game.Rulesets.Mods;
+using osu.Game.Rulesets.Osu.Mods;
+using osuTK;
+using osuTK.Input;
+
+namespace osu.Game.Tests.Visual.UserInterface
+{
+    [TestFixture]
+    public class TestSceneModPanel : OsuManualInputManagerTestScene
+    {
+        [Cached]
+        private OverlayColourProvider colourProvider = new OverlayColourProvider(OverlayColourScheme.Green);
+
+        [Test]
+        public void TestVariousPanels()
+        {
+            AddStep("create content", () => Child = new FillFlowContainer
+            {
+                Width = 300,
+                AutoSizeAxes = Axes.Y,
+                Anchor = Anchor.Centre,
+                Origin = Anchor.Centre,
+                Spacing = new Vector2(0, 5),
+                Children = new[]
+                {
+                    new ModPanel(new OsuModHalfTime()),
+                    new ModPanel(new OsuModFlashlight()),
+                    new ModPanel(new OsuModAutoplay()),
+                    new ModPanel(new OsuModAlternate()),
+                    new ModPanel(new OsuModApproachDifferent())
+                }
+            });
+        }
+
+        [Test]
+        public void TestIncompatibilityDisplay()
+        {
+            IncompatibilityDisplayingModPanel panel = null;
+
+            AddStep("create panel with DT", () => Child = panel = new IncompatibilityDisplayingModPanel(new OsuModDoubleTime())
+            {
+                Anchor = Anchor.Centre,
+                Origin = Anchor.Centre,
+                RelativeSizeAxes = Axes.None,
+                Width = 300
+            });
+
+            clickPanel();
+            AddAssert("panel active", () => panel.Active.Value);
+
+            clickPanel();
+            AddAssert("panel not active", () => !panel.Active.Value);
+
+            AddStep("set incompatible mod", () => SelectedMods.Value = new[] { new OsuModHalfTime() });
+
+            clickPanel();
+            AddAssert("panel not active", () => !panel.Active.Value);
+
+            AddStep("reset mods", () => SelectedMods.Value = Array.Empty<Mod>());
+
+            clickPanel();
+            AddAssert("panel active", () => panel.Active.Value);
+
+            void clickPanel() => AddStep("click panel", () =>
+            {
+                InputManager.MoveMouseTo(panel);
+                InputManager.Click(MouseButton.Left);
+            });
+        }
+    }
+}

osu.Game/Overlays/Mods/IncompatibilityDisplayingModButton.cs

@@ -8,11 +8,7 @@ using osu.Framework.Bindables;
 using osu.Framework.Graphics;
 using osu.Framework.Graphics.Containers;
 using osu.Framework.Graphics.Cursor;
-using osu.Game.Graphics;
-using osu.Game.Graphics.Sprites;
-using osu.Game.Rulesets;
 using osu.Game.Rulesets.Mods;
-using osu.Game.Screens.Play.HUD;
 using osu.Game.Utils;
 using osuTK;
 
@@ -66,52 +62,5 @@ namespace osu.Game.Overlays.Mods
         }
 
         public override ITooltip<Mod> GetCustomTooltip() => new IncompatibilityDisplayingTooltip();
-
-        private class IncompatibilityDisplayingTooltip : ModButtonTooltip
-        {
-            private readonly OsuSpriteText incompatibleText;
-
-            private readonly Bindable<IReadOnlyList<Mod>> incompatibleMods = new Bindable<IReadOnlyList<Mod>>();
-
-            [Resolved]
-            private Bindable<RulesetInfo> ruleset { get; set; }
-
-            public IncompatibilityDisplayingTooltip()
-            {
-                AddRange(new Drawable[]
-                {
-                    incompatibleText = new OsuSpriteText
-                    {
-                        Margin = new MarginPadding { Top = 5 },
-                        Font = OsuFont.GetFont(weight: FontWeight.Regular),
-                        Text = "Incompatible with:"
-                    },
-                    new ModDisplay
-                    {
-                        Current = incompatibleMods,
-                        ExpansionMode = ExpansionMode.AlwaysExpanded,
-                        Scale = new Vector2(0.7f)
-                    }
-                });
-            }
-
-            [BackgroundDependencyLoader]
-            private void load(OsuColour colours)
-            {
-                incompatibleText.Colour = colours.BlueLight;
-            }
-
-            protected override void UpdateDisplay(Mod mod)
-            {
-                base.UpdateDisplay(mod);
-
-                var incompatibleTypes = mod.IncompatibleMods;
-
-                var allMods = ruleset.Value.CreateInstance().AllMods;
-
-                incompatibleMods.Value = allMods.Where(m => m.GetType() != mod.GetType() && incompatibleTypes.Any(t => t.IsInstanceOfType(m))).Select(m => m.CreateInstance()).ToList();
-                incompatibleText.Text = incompatibleMods.Value.Any() ? "Incompatible with:" : "Compatible with all mods";
-            }
-        }
     }
 }

osu.Game/Overlays/Mods/IncompatibilityDisplayingModPanel.cs

@@ -0,0 +1,88 @@
+// 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 osu.Framework.Allocation;
+using osu.Framework.Bindables;
+using osu.Framework.Graphics;
+using osu.Framework.Graphics.Colour;
+using osu.Framework.Graphics.Cursor;
+using osu.Framework.Input.Events;
+using osu.Game.Rulesets.Mods;
+using osu.Game.Utils;
+
+namespace osu.Game.Overlays.Mods
+{
+    public class IncompatibilityDisplayingModPanel : ModPanel, IHasCustomTooltip<Mod>
+    {
+        private readonly BindableBool incompatible = new BindableBool();
+
+        [Resolved]
+        private Bindable<IReadOnlyList<Mod>> selectedMods { get; set; }
+
+        public IncompatibilityDisplayingModPanel(Mod mod)
+            : base(mod)
+        {
+        }
+
+        protected override void LoadComplete()
+        {
+            selectedMods.BindValueChanged(_ => updateIncompatibility(), true);
+            incompatible.BindValueChanged(_ => Scheduler.AddOnce(UpdateState));
+            // base call will run `UpdateState()` first time and finish transforms.
+            base.LoadComplete();
+        }
+
+        private void updateIncompatibility()
+        {
+            incompatible.Value = selectedMods.Value.Count > 0 && !selectedMods.Value.Contains(Mod) && !ModUtils.CheckCompatibleSet(selectedMods.Value.Append(Mod));
+        }
+
+        protected override void UpdateState()
+        {
+            Action = incompatible.Value ? () => { } : (Action)Active.Toggle;
+
+            if (incompatible.Value)
+            {
+                Colour4 backgroundColour = ColourProvider.Background5;
+                Colour4 textBackgroundColour = ColourProvider.Background4;
+
+                Content.TransformTo(nameof(BorderColour), ColourInfo.GradientVertical(backgroundColour, textBackgroundColour), TRANSITION_DURATION, Easing.OutQuint);
+                Background.FadeColour(backgroundColour, TRANSITION_DURATION, Easing.OutQuint);
+
+                SwitchContainer.ResizeWidthTo(IDLE_SWITCH_WIDTH, TRANSITION_DURATION, Easing.OutQuint);
+                SwitchContainer.FadeColour(Colour4.Gray, TRANSITION_DURATION, Easing.OutQuint);
+                MainContentContainer.TransformTo(nameof(Padding), new MarginPadding
+                {
+                    Left = IDLE_SWITCH_WIDTH,
+                    Right = CORNER_RADIUS
+                }, TRANSITION_DURATION, Easing.OutQuint);
+
+                TextBackground.FadeColour(textBackgroundColour, TRANSITION_DURATION, Easing.OutQuint);
+                TextFlow.FadeColour(Colour4.White.Opacity(0.5f), TRANSITION_DURATION, Easing.OutQuint);
+                return;
+            }
+
+            SwitchContainer.FadeColour(Colour4.White, TRANSITION_DURATION, Easing.OutQuint);
+            base.UpdateState();
+        }
+
+        protected override bool OnMouseDown(MouseDownEvent e)
+        {
+            if (incompatible.Value)
+                return true; // bypasses base call purposely in order to not play out the intermediate state animation.
+
+            return base.OnMouseDown(e);
+        }
+
+        #region IHasCustomTooltip
+
+        public ITooltip<Mod> GetCustomTooltip() => new IncompatibilityDisplayingTooltip();
+
+        public Mod TooltipContent => Mod;
+
+        #endregion
+    }
+}

osu.Game/Overlays/Mods/IncompatibilityDisplayingTooltip.cs

@@ -0,0 +1,64 @@
+// 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 System.Linq;
+using osu.Framework.Allocation;
+using osu.Framework.Bindables;
+using osu.Framework.Graphics;
+using osu.Game.Graphics;
+using osu.Game.Graphics.Sprites;
+using osu.Game.Rulesets;
+using osu.Game.Rulesets.Mods;
+using osu.Game.Screens.Play.HUD;
+using osuTK;
+
+namespace osu.Game.Overlays.Mods
+{
+    internal class IncompatibilityDisplayingTooltip : ModButtonTooltip
+    {
+        private readonly OsuSpriteText incompatibleText;
+
+        private readonly Bindable<IReadOnlyList<Mod>> incompatibleMods = new Bindable<IReadOnlyList<Mod>>();
+
+        [Resolved]
+        private Bindable<RulesetInfo> ruleset { get; set; }
+
+        public IncompatibilityDisplayingTooltip()
+        {
+            AddRange(new Drawable[]
+            {
+                incompatibleText = new OsuSpriteText
+                {
+                    Margin = new MarginPadding { Top = 5 },
+                    Font = OsuFont.GetFont(weight: FontWeight.Regular),
+                    Text = "Incompatible with:"
+                },
+                new ModDisplay
+                {
+                    Current = incompatibleMods,
+                    ExpansionMode = ExpansionMode.AlwaysExpanded,
+                    Scale = new Vector2(0.7f)
+                }
+            });
+        }
+
+        [BackgroundDependencyLoader]
+        private void load(OsuColour colours)
+        {
+            incompatibleText.Colour = colours.BlueLight;
+        }
+
+        protected override void UpdateDisplay(Mod mod)
+        {
+            base.UpdateDisplay(mod);
+
+            var incompatibleTypes = mod.IncompatibleMods;
+
+            var allMods = ruleset.Value.CreateInstance().AllMods;
+
+            incompatibleMods.Value = allMods.Where(m => m.GetType() != mod.GetType() && incompatibleTypes.Any(t => t.IsInstanceOfType(m))).Select(m => m.CreateInstance()).ToList();
+            incompatibleText.Text = incompatibleMods.Value.Any() ? "Incompatible with:" : "Compatible with all mods";
+        }
+    }
+}

osu.Game/Overlays/Mods/ModPanel.cs

@@ -0,0 +1,239 @@
+// 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.Audio;
+using osu.Framework.Audio.Sample;
+using osu.Framework.Bindables;
+using osu.Framework.Graphics;
+using osu.Framework.Graphics.Colour;
+using osu.Framework.Graphics.Containers;
+using osu.Framework.Graphics.Shapes;
+using osu.Framework.Input.Events;
+using osu.Framework.Utils;
+using osu.Game.Graphics;
+using osu.Game.Graphics.Containers;
+using osu.Game.Graphics.Sprites;
+using osu.Game.Graphics.UserInterface;
+using osu.Game.Rulesets.Mods;
+using osu.Game.Rulesets.UI;
+using osuTK;
+using osuTK.Input;
+
+#nullable enable
+
+namespace osu.Game.Overlays.Mods
+{
+    public class ModPanel : OsuClickableContainer
+    {
+        public Mod Mod { get; }
+        public BindableBool Active { get; } = new BindableBool();
+
+        protected readonly Box Background;
+        protected readonly Container SwitchContainer;
+        protected readonly Container MainContentContainer;
+        protected readonly Box TextBackground;
+        protected readonly FillFlowContainer TextFlow;
+
+        [Resolved]
+        protected OverlayColourProvider ColourProvider { get; private set; } = null!;
+
+        protected const double TRANSITION_DURATION = 150;
+
+        protected const float SHEAR_X = 0.2f;
+
+        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;
+
+        private Colour4 activeColour;
+
+        private Sample? sampleOff;
+        private Sample? sampleOn;
+
+        public ModPanel(Mod mod)
+        {
+            Mod = mod;
+
+            RelativeSizeAxes = Axes.X;
+            Height = 42;
+
+            // all below properties are applied to `Content` rather than the `ModPanel` in its entirety
+            // to allow external components to set these properties on the panel without affecting
+            // its "internal" appearance.
+            Content.Masking = true;
+            Content.CornerRadius = CORNER_RADIUS;
+            Content.BorderThickness = 2;
+            Content.Shear = new Vector2(SHEAR_X, 0);
+
+            Children = new Drawable[]
+            {
+                Background = new Box
+                {
+                    RelativeSizeAxes = Axes.Both
+                },
+                SwitchContainer = new Container
+                {
+                    RelativeSizeAxes = Axes.Y,
+                    Child = new ModSwitchSmall(mod)
+                    {
+                        Anchor = Anchor.Centre,
+                        Origin = Anchor.Centre,
+                        Active = { BindTarget = Active },
+                        Shear = new Vector2(-SHEAR_X, 0),
+                        Scale = new Vector2(HEIGHT / ModSwitchSmall.DEFAULT_SIZE)
+                    }
+                },
+                MainContentContainer = new Container
+                {
+                    RelativeSizeAxes = Axes.Both,
+                    Child = new Container
+                    {
+                        RelativeSizeAxes = Axes.Both,
+                        Masking = true,
+                        CornerRadius = CORNER_RADIUS,
+                        Children = new Drawable[]
+                        {
+                            TextBackground = new Box
+                            {
+                                RelativeSizeAxes = Axes.Both
+                            },
+                            TextFlow = new FillFlowContainer
+                            {
+                                RelativeSizeAxes = Axes.Both,
+                                Padding = new MarginPadding
+                                {
+                                    Horizontal = 17.5f,
+                                    Vertical = 4
+                                },
+                                Direction = FillDirection.Vertical,
+                                Children = new[]
+                                {
+                                    new OsuSpriteText
+                                    {
+                                        Text = mod.Name,
+                                        Font = OsuFont.TorusAlternate.With(size: 18, weight: FontWeight.SemiBold),
+                                        Shear = new Vector2(-SHEAR_X, 0),
+                                        Margin = new MarginPadding
+                                        {
+                                            Left = -18 * SHEAR_X
+                                        }
+                                    },
+                                    new OsuSpriteText
+                                    {
+                                        Text = mod.Description,
+                                        Font = OsuFont.Default.With(size: 12),
+                                        RelativeSizeAxes = Axes.X,
+                                        Truncate = true,
+                                        Shear = new Vector2(-SHEAR_X, 0)
+                                    }
+                                }
+                            }
+                        }
+                    }
+                }
+            };
+
+            Action = Active.Toggle;
+        }
+
+        [BackgroundDependencyLoader]
+        private void load(AudioManager audio, OsuColour colours)
+        {
+            sampleOn = audio.Samples.Get(@"UI/check-on");
+            sampleOff = audio.Samples.Get(@"UI/check-off");
+
+            activeColour = colours.ForModType(Mod.Type);
+        }
+
+        protected override HoverSounds CreateHoverSounds(HoverSampleSet sampleSet) => new HoverSounds(sampleSet);
+
+        protected override void LoadComplete()
+        {
+            base.LoadComplete();
+            Active.BindValueChanged(_ =>
+            {
+                playStateChangeSamples();
+                UpdateState();
+            });
+
+            UpdateState();
+            FinishTransforms(true);
+        }
+
+        private void playStateChangeSamples()
+        {
+            if (Active.Value)
+                sampleOn?.Play();
+            else
+                sampleOff?.Play();
+        }
+
+        protected override bool OnHover(HoverEvent e)
+        {
+            UpdateState();
+            return base.OnHover(e);
+        }
+
+        protected override void OnHoverLost(HoverLostEvent e)
+        {
+            UpdateState();
+            base.OnHoverLost(e);
+        }
+
+        private bool mouseDown;
+
+        protected override bool OnMouseDown(MouseDownEvent e)
+        {
+            if (e.Button == MouseButton.Left)
+                mouseDown = true;
+
+            UpdateState();
+            return true;
+        }
+
+        protected override void OnMouseUp(MouseUpEvent e)
+        {
+            mouseDown = false;
+
+            UpdateState();
+            base.OnMouseUp(e);
+        }
+
+        protected virtual void UpdateState()
+        {
+            float targetWidth = Active.Value ? EXPANDED_SWITCH_WIDTH : IDLE_SWITCH_WIDTH;
+            double transitionDuration = TRANSITION_DURATION;
+
+            Colour4 textBackgroundColour = Active.Value ? activeColour : (Colour4)ColourProvider.Background2;
+            Colour4 mainBackgroundColour = Active.Value ? activeColour.Darken(0.3f) : (Colour4)ColourProvider.Background3;
+            Colour4 textColour = Active.Value ? (Colour4)ColourProvider.Background6 : Colour4.White;
+
+            // Hover affects colour of button background
+            if (IsHovered)
+            {
+                textBackgroundColour = textBackgroundColour.Lighten(0.1f);
+                mainBackgroundColour = mainBackgroundColour.Lighten(0.1f);
+            }
+
+            // Mouse down adds a halfway tween of the movement
+            if (mouseDown)
+            {
+                targetWidth = (float)Interpolation.Lerp(IDLE_SWITCH_WIDTH, EXPANDED_SWITCH_WIDTH, 0.5f);
+                transitionDuration *= 4;
+            }
+
+            Content.TransformTo(nameof(BorderColour), ColourInfo.GradientVertical(mainBackgroundColour, textBackgroundColour), transitionDuration, Easing.OutQuint);
+            Background.FadeColour(mainBackgroundColour, transitionDuration, Easing.OutQuint);
+            SwitchContainer.ResizeWidthTo(targetWidth, transitionDuration, Easing.OutQuint);
+            MainContentContainer.TransformTo(nameof(Padding), new MarginPadding
+            {
+                Left = targetWidth,
+                Right = CORNER_RADIUS
+            }, transitionDuration, Easing.OutQuint);
+            TextBackground.FadeColour(textBackgroundColour, transitionDuration, Easing.OutQuint);
+            TextFlow.FadeColour(textColour, transitionDuration, Easing.OutQuint);
+        }
+    }
+}