Merge pull request #16951 from bdach/mod-overlay/switches

Implement mod switches for new mod select design

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

@@ -0,0 +1,85 @@
+// 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.Extensions.IEnumerableExtensions;
+using osu.Framework.Graphics;
+using osu.Framework.Graphics.Containers;
+using osu.Framework.Testing;
+using osu.Game.Overlays;
+using osu.Game.Rulesets;
+using osu.Game.Rulesets.Catch;
+using osu.Game.Rulesets.Mania;
+using osu.Game.Rulesets.Osu;
+using osu.Game.Rulesets.Taiko;
+using osu.Game.Rulesets.UI;
+using osuTK;
+
+namespace osu.Game.Tests.Visual.UserInterface
+{
+    [TestFixture]
+    public class TestSceneModSwitchSmall : OsuTestScene
+    {
+        [Test]
+        public void TestOsu() => createSwitchTestFor(new OsuRuleset());
+
+        [Test]
+        public void TestTaiko() => createSwitchTestFor(new TaikoRuleset());
+
+        [Test]
+        public void TestCatch() => createSwitchTestFor(new CatchRuleset());
+
+        [Test]
+        public void TestMania() => createSwitchTestFor(new ManiaRuleset());
+
+        private void createSwitchTestFor(Ruleset ruleset)
+        {
+            AddStep("no colour scheme", () => Child = createContent(ruleset, null));
+
+            foreach (var scheme in Enum.GetValues(typeof(OverlayColourScheme)).Cast<OverlayColourScheme>())
+            {
+                AddStep($"{scheme} colour scheme", () => Child = createContent(ruleset, scheme));
+            }
+
+            AddToggleStep("toggle active", active => this.ChildrenOfType<ModSwitchTiny>().ForEach(s => s.Active.Value = active));
+        }
+
+        private static Drawable createContent(Ruleset ruleset, OverlayColourScheme? colourScheme)
+        {
+            var switchFlow = new FillFlowContainer
+            {
+                RelativeSizeAxes = Axes.Both,
+                Direction = FillDirection.Vertical,
+                Spacing = new Vector2(10),
+                Padding = new MarginPadding(20),
+                ChildrenEnumerable = ruleset.CreateAllMods()
+                                            .GroupBy(mod => mod.Type)
+                                            .Select(group => new FillFlowContainer
+                                            {
+                                                RelativeSizeAxes = Axes.X,
+                                                AutoSizeAxes = Axes.Y,
+                                                Direction = FillDirection.Full,
+                                                Spacing = new Vector2(5),
+                                                ChildrenEnumerable = group.Select(mod => new ModSwitchSmall(mod))
+                                            })
+            };
+
+            if (colourScheme != null)
+            {
+                return new DependencyProvidingContainer
+                {
+                    RelativeSizeAxes = Axes.Both,
+                    CachedDependencies = new (Type, object)[]
+                    {
+                        (typeof(OverlayColourProvider), new OverlayColourProvider(colourScheme.Value))
+                    },
+                    Child = switchFlow
+                };
+            }
+
+            return switchFlow;
+        }
+    }
+}

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

@@ -0,0 +1,85 @@
+// 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.Extensions.IEnumerableExtensions;
+using osu.Framework.Graphics;
+using osu.Framework.Graphics.Containers;
+using osu.Framework.Testing;
+using osu.Game.Overlays;
+using osu.Game.Rulesets;
+using osu.Game.Rulesets.Catch;
+using osu.Game.Rulesets.Mania;
+using osu.Game.Rulesets.Osu;
+using osu.Game.Rulesets.Taiko;
+using osu.Game.Rulesets.UI;
+using osuTK;
+
+namespace osu.Game.Tests.Visual.UserInterface
+{
+    [TestFixture]
+    public class TestSceneModSwitchTiny : OsuTestScene
+    {
+        [Test]
+        public void TestOsu() => createSwitchTestFor(new OsuRuleset());
+
+        [Test]
+        public void TestTaiko() => createSwitchTestFor(new TaikoRuleset());
+
+        [Test]
+        public void TestCatch() => createSwitchTestFor(new CatchRuleset());
+
+        [Test]
+        public void TestMania() => createSwitchTestFor(new ManiaRuleset());
+
+        private void createSwitchTestFor(Ruleset ruleset)
+        {
+            AddStep("no colour scheme", () => Child = createContent(ruleset, null));
+
+            foreach (var scheme in Enum.GetValues(typeof(OverlayColourScheme)).Cast<OverlayColourScheme>())
+            {
+                AddStep($"{scheme} colour scheme", () => Child = createContent(ruleset, scheme));
+            }
+
+            AddToggleStep("toggle active", active => this.ChildrenOfType<ModSwitchTiny>().ForEach(s => s.Active.Value = active));
+        }
+
+        private static Drawable createContent(Ruleset ruleset, OverlayColourScheme? colourScheme)
+        {
+            var switchFlow = new FillFlowContainer
+            {
+                RelativeSizeAxes = Axes.Both,
+                Direction = FillDirection.Vertical,
+                Spacing = new Vector2(10),
+                Padding = new MarginPadding(20),
+                ChildrenEnumerable = ruleset.CreateAllMods()
+                                            .GroupBy(mod => mod.Type)
+                                            .Select(group => new FillFlowContainer
+                                            {
+                                                RelativeSizeAxes = Axes.X,
+                                                AutoSizeAxes = Axes.Y,
+                                                Direction = FillDirection.Full,
+                                                Spacing = new Vector2(5),
+                                                ChildrenEnumerable = group.Select(mod => new ModSwitchTiny(mod))
+                                            })
+            };
+
+            if (colourScheme != null)
+            {
+                return new DependencyProvidingContainer
+                {
+                    RelativeSizeAxes = Axes.Both,
+                    CachedDependencies = new (Type, object)[]
+                    {
+                        (typeof(OverlayColourProvider), new OverlayColourProvider(colourScheme.Value))
+                    },
+                    Child = switchFlow
+                };
+            }
+
+            return switchFlow;
+        }
+    }
+}

osu.Game/Graphics/OsuColour.cs

@@ -5,6 +5,7 @@ using System;
 using osu.Framework.Extensions.Color4Extensions;
 using osu.Game.Beatmaps;
 using osu.Game.Overlays;
+using osu.Game.Rulesets.Mods;
 using osu.Game.Rulesets.Scoring;
 using osu.Game.Scoring;
 using osu.Game.Utils;
@@ -157,6 +158,36 @@ namespace osu.Game.Graphics
             }
         }
 
+        /// <summary>
+        /// Retrieves the main accent colour for a <see cref="ModType"/>.
+        /// </summary>
+        public Color4 ForModType(ModType modType)
+        {
+            switch (modType)
+            {
+                case ModType.Automation:
+                    return Blue1;
+
+                case ModType.DifficultyIncrease:
+                    return Red1;
+
+                case ModType.DifficultyReduction:
+                    return Lime1;
+
+                case ModType.Conversion:
+                    return Purple1;
+
+                case ModType.Fun:
+                    return Pink1;
+
+                case ModType.System:
+                    return Gray7;
+
+                default:
+                    throw new ArgumentOutOfRangeException(nameof(modType), modType, "Unknown mod type");
+            }
+        }
+
         /// <summary>
         /// Returns a foreground text colour that is supposed to contrast well with
         /// the supplied <paramref name="backgroundColour"/>.

osu.Game/Rulesets/UI/ModSwitchSmall.cs

@@ -0,0 +1,109 @@
+// 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.Sprites;
+using osu.Framework.Utils;
+using osu.Game.Graphics;
+using osu.Game.Overlays;
+using osu.Game.Rulesets.Mods;
+using osuTK;
+using osuTK.Graphics;
+
+#nullable enable
+
+namespace osu.Game.Rulesets.UI
+{
+    public class ModSwitchSmall : CompositeDrawable
+    {
+        public BindableBool Active { get; } = new BindableBool();
+
+        public const float DEFAULT_SIZE = 60;
+
+        private readonly IMod mod;
+
+        private readonly SpriteIcon background;
+        private readonly SpriteIcon? modIcon;
+
+        private Color4 activeForegroundColour;
+        private Color4 inactiveForegroundColour;
+
+        private Color4 activeBackgroundColour;
+        private Color4 inactiveBackgroundColour;
+
+        public ModSwitchSmall(IMod mod)
+        {
+            this.mod = mod;
+
+            AutoSizeAxes = Axes.Both;
+
+            FillFlowContainer contentFlow;
+            ModSwitchTiny tinySwitch;
+
+            InternalChildren = new Drawable[]
+            {
+                background = new SpriteIcon
+                {
+                    Anchor = Anchor.Centre,
+                    Origin = Anchor.Centre,
+                    Size = new Vector2(DEFAULT_SIZE),
+                    Icon = OsuIcon.ModBg
+                },
+                contentFlow = new FillFlowContainer
+                {
+                    AutoSizeAxes = Axes.Both,
+                    Anchor = Anchor.Centre,
+                    Origin = Anchor.Centre,
+                    Spacing = new Vector2(0, 4),
+                    Direction = FillDirection.Vertical,
+                    Child = tinySwitch = new ModSwitchTiny(mod)
+                    {
+                        Anchor = Anchor.TopCentre,
+                        Origin = Anchor.TopCentre,
+                        Scale = new Vector2(0.6f),
+                        Active = { BindTarget = Active }
+                    }
+                }
+            };
+
+            if (mod.Icon != null)
+            {
+                contentFlow.Insert(-1, modIcon = new SpriteIcon
+                {
+                    Anchor = Anchor.TopCentre,
+                    Origin = Anchor.TopCentre,
+                    Size = new Vector2(21),
+                    Icon = mod.Icon.Value
+                });
+                tinySwitch.Scale = new Vector2(0.3f);
+            }
+        }
+
+        [BackgroundDependencyLoader(true)]
+        private void load(OsuColour colours, OverlayColourProvider? colourProvider)
+        {
+            inactiveForegroundColour = colourProvider?.Background5 ?? colours.Gray3;
+            activeForegroundColour = colours.ForModType(mod.Type);
+
+            inactiveBackgroundColour = colourProvider?.Background2 ?? colours.Gray5;
+            activeBackgroundColour = Interpolation.ValueAt<Colour4>(0.1f, Colour4.Black, activeForegroundColour, 0, 1);
+        }
+
+        protected override void LoadComplete()
+        {
+            base.LoadComplete();
+
+            Active.BindValueChanged(_ => updateState(), true);
+            FinishTransforms(true);
+        }
+
+        private void updateState()
+        {
+            modIcon?.FadeColour(Active.Value ? activeForegroundColour : inactiveForegroundColour, 200, Easing.OutQuint);
+            background.FadeColour(Active.Value ? activeBackgroundColour : inactiveBackgroundColour, 200, Easing.OutQuint);
+        }
+    }
+}

osu.Game/Rulesets/UI/ModSwitchTiny.cs

@@ -0,0 +1,93 @@
+// 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.Utils;
+using osu.Game.Graphics;
+using osu.Game.Graphics.Sprites;
+using osu.Game.Overlays;
+using osu.Game.Rulesets.Mods;
+using osuTK;
+using osuTK.Graphics;
+
+#nullable enable
+
+namespace osu.Game.Rulesets.UI
+{
+    public class ModSwitchTiny : CompositeDrawable
+    {
+        public BindableBool Active { get; } = new BindableBool();
+
+        public const float DEFAULT_HEIGHT = 30;
+
+        private readonly IMod mod;
+
+        private readonly Box background;
+        private readonly OsuSpriteText acronymText;
+
+        private Color4 activeForegroundColour;
+        private Color4 inactiveForegroundColour;
+
+        private Color4 activeBackgroundColour;
+        private Color4 inactiveBackgroundColour;
+
+        public ModSwitchTiny(IMod mod)
+        {
+            this.mod = mod;
+            Size = new Vector2(73, DEFAULT_HEIGHT);
+
+            InternalChild = new CircularContainer
+            {
+                RelativeSizeAxes = Axes.Both,
+                Masking = true,
+                Children = new Drawable[]
+                {
+                    background = new Box
+                    {
+                        RelativeSizeAxes = Axes.Both
+                    },
+                    acronymText = new OsuSpriteText
+                    {
+                        Anchor = Anchor.Centre,
+                        Origin = Anchor.Centre,
+                        Shadow = false,
+                        Font = OsuFont.Numeric.With(size: 24, weight: FontWeight.Black),
+                        Text = mod.Acronym,
+                        Margin = new MarginPadding
+                        {
+                            Top = 4
+                        }
+                    }
+                }
+            };
+        }
+
+        [BackgroundDependencyLoader(true)]
+        private void load(OsuColour colours, OverlayColourProvider? colourProvider)
+        {
+            inactiveBackgroundColour = colourProvider?.Background5 ?? colours.Gray3;
+            activeBackgroundColour = colours.ForModType(mod.Type);
+
+            inactiveForegroundColour = colourProvider?.Background2 ?? colours.Gray5;
+            activeForegroundColour = Interpolation.ValueAt<Colour4>(0.1f, Colour4.Black, activeForegroundColour, 0, 1);
+        }
+
+        protected override void LoadComplete()
+        {
+            base.LoadComplete();
+
+            Active.BindValueChanged(_ => updateState(), true);
+            FinishTransforms(true);
+        }
+
+        private void updateState()
+        {
+            acronymText.FadeColour(Active.Value ? activeForegroundColour : inactiveForegroundColour, 200, Easing.OutQuint);
+            background.FadeColour(Active.Value ? activeBackgroundColour : inactiveBackgroundColour, 200, Easing.OutQuint);
+        }
+    }
+}