Merge pull request #17631 from bdach/mod-overlay/full-screen

Implement basic layout & behaviour of new mod select screen

osu.Android.props

@@ -52,7 +52,7 @@
   </ItemGroup>
   <ItemGroup>
     <PackageReference Include="ppy.osu.Game.Resources" Version="2022.405.0" />
-    <PackageReference Include="ppy.osu.Framework.Android" Version="2022.404.0" />
+    <PackageReference Include="ppy.osu.Framework.Android" Version="2022.405.0" />
   </ItemGroup>
   <ItemGroup Label="Transitive Dependencies">
     <!-- Realm needs to be directly referenced in all Xamarin projects, as it will not pull in its transitive dependencies otherwise. -->

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

@@ -0,0 +1,140 @@
+// 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.Linq;
+using NUnit.Framework;
+using osu.Framework.Allocation;
+using osu.Framework.Graphics;
+using osu.Framework.Graphics.Containers;
+using osu.Framework.Testing;
+using osu.Framework.Utils;
+using osu.Game.Graphics.UserInterface;
+using osu.Game.Overlays.Mods;
+using osu.Game.Rulesets;
+using osu.Game.Rulesets.Mods;
+using osu.Game.Rulesets.Osu.Mods;
+using osuTK.Input;
+
+namespace osu.Game.Tests.Visual.UserInterface
+{
+    [TestFixture]
+    public class TestSceneModSelectScreen : OsuManualInputManagerTestScene
+    {
+        [Resolved]
+        private RulesetStore rulesetStore { get; set; }
+
+        private ModSelectScreen modSelectScreen;
+
+        [SetUpSteps]
+        public void SetUpSteps()
+        {
+            AddStep("clear contents", Clear);
+            AddStep("reset ruleset", () => Ruleset.Value = rulesetStore.GetRuleset(0));
+            AddStep("reset mods", () => SelectedMods.SetDefault());
+        }
+
+        private void createScreen()
+        {
+            AddStep("create screen", () => Child = modSelectScreen = new ModSelectScreen
+            {
+                RelativeSizeAxes = Axes.Both,
+                State = { Value = Visibility.Visible },
+                SelectedMods = { BindTarget = SelectedMods }
+            });
+            waitForColumnLoad();
+        }
+
+        [Test]
+        public void TestStateChange()
+        {
+            createScreen();
+            AddStep("toggle state", () => modSelectScreen.ToggleVisibility());
+        }
+
+        [Test]
+        public void TestPreexistingSelection()
+        {
+            AddStep("set mods", () => SelectedMods.Value = new Mod[] { new OsuModAlternate(), new OsuModDaycore() });
+            createScreen();
+            AddUntilStep("two panels active", () => modSelectScreen.ChildrenOfType<ModPanel>().Count(panel => panel.Active.Value) == 2);
+            AddAssert("mod multiplier correct", () =>
+            {
+                double multiplier = SelectedMods.Value.Aggregate(1d, (m, mod) => m * mod.ScoreMultiplier);
+                return Precision.AlmostEquals(multiplier, modSelectScreen.ChildrenOfType<DifficultyMultiplierDisplay>().Single().Current.Value);
+            });
+            assertCustomisationToggleState(disabled: false, active: false);
+        }
+
+        [Test]
+        public void TestExternalSelection()
+        {
+            createScreen();
+            AddStep("set mods", () => SelectedMods.Value = new Mod[] { new OsuModAlternate(), new OsuModDaycore() });
+            AddUntilStep("two panels active", () => modSelectScreen.ChildrenOfType<ModPanel>().Count(panel => panel.Active.Value) == 2);
+            AddAssert("mod multiplier correct", () =>
+            {
+                double multiplier = SelectedMods.Value.Aggregate(1d, (m, mod) => m * mod.ScoreMultiplier);
+                return Precision.AlmostEquals(multiplier, modSelectScreen.ChildrenOfType<DifficultyMultiplierDisplay>().Single().Current.Value);
+            });
+            assertCustomisationToggleState(disabled: false, active: false);
+        }
+
+        [Test]
+        public void TestRulesetChange()
+        {
+            createScreen();
+            changeRuleset(0);
+            changeRuleset(1);
+            changeRuleset(2);
+            changeRuleset(3);
+        }
+
+        [Test]
+        public void TestCustomisationToggleState()
+        {
+            createScreen();
+            assertCustomisationToggleState(disabled: true, active: false);
+
+            AddStep("select customisable mod", () => SelectedMods.Value = new[] { new OsuModDoubleTime() });
+            assertCustomisationToggleState(disabled: false, active: false);
+
+            AddStep("select mod requiring configuration", () => SelectedMods.Value = new[] { new OsuModDifficultyAdjust() });
+            assertCustomisationToggleState(disabled: false, active: true);
+
+            AddStep("dismiss mod customisation", () =>
+            {
+                InputManager.MoveMouseTo(modSelectScreen.ChildrenOfType<ShearedToggleButton>().Single());
+                InputManager.Click(MouseButton.Left);
+            });
+
+            AddStep("append another mod not requiring config", () => SelectedMods.Value = SelectedMods.Value.Append(new OsuModFlashlight()).ToArray());
+            assertCustomisationToggleState(disabled: false, active: false);
+
+            AddStep("select mod without configuration", () => SelectedMods.Value = new[] { new OsuModAutoplay() });
+            assertCustomisationToggleState(disabled: true, active: false);
+
+            AddStep("select mod requiring configuration", () => SelectedMods.Value = new[] { new OsuModDifficultyAdjust() });
+            assertCustomisationToggleState(disabled: false, active: true);
+
+            AddStep("select mod without configuration", () => SelectedMods.Value = new[] { new OsuModAutoplay() });
+            assertCustomisationToggleState(disabled: true, active: false); // config was dismissed without explicit user action.
+        }
+
+        private void waitForColumnLoad() => AddUntilStep("all column content loaded",
+            () => modSelectScreen.ChildrenOfType<ModColumn>().Any() && modSelectScreen.ChildrenOfType<ModColumn>().All(column => column.IsLoaded && column.ItemsLoaded));
+
+        private void changeRuleset(int id)
+        {
+            AddStep($"set ruleset to {id}", () => Ruleset.Value = rulesetStore.GetRuleset(id));
+            waitForColumnLoad();
+        }
+
+        private void assertCustomisationToggleState(bool disabled, bool active)
+        {
+            ShearedToggleButton getToggle() => modSelectScreen.ChildrenOfType<ShearedToggleButton>().Single();
+
+            AddAssert($"customisation toggle is {(disabled ? "" : "not ")}disabled", () => getToggle().Active.Disabled == disabled);
+            AddAssert($"customisation toggle is {(active ? "" : "not ")}active", () => getToggle().Active.Value == active);
+        }
+    }
+}

osu.Game/Overlays/Mods/DifficultyMultiplierDisplay.cs

@@ -20,6 +20,8 @@ namespace osu.Game.Overlays.Mods
 {
     public class DifficultyMultiplierDisplay : CompositeDrawable, IHasCurrentValue<double>
     {
+        public const float HEIGHT = 42;
+
         public Bindable<double> Current
         {
             get => current.Current;
@@ -42,13 +44,12 @@ namespace osu.Game.Overlays.Mods
         [Resolved]
         private OverlayColourProvider colourProvider { get; set; }
 
-        private const float height = 42;
         private const float multiplier_value_area_width = 56;
         private const float transition_duration = 200;
 
         public DifficultyMultiplierDisplay()
         {
-            Height = height;
+            Height = HEIGHT;
             AutoSizeAxes = Axes.X;
 
             InternalChild = new Container
@@ -145,8 +146,9 @@ namespace osu.Game.Overlays.Mods
         protected override void LoadComplete()
         {
             base.LoadComplete();
+
             current.BindValueChanged(_ => updateState(), true);
-            FinishTransforms(true);
+
             // required to prevent the counter initially rolling up from 0 to 1
             // due to `Current.Value` having a nonstandard default value of 1.
             multiplierCounter.SetCountWithoutRolling(Current.Value);

osu.Game/Overlays/Mods/ModColumn.cs

@@ -31,6 +31,10 @@ namespace osu.Game.Overlays.Mods
 {
     public class ModColumn : CompositeDrawable
     {
+        public readonly Container TopLevelContent;
+
+        public readonly ModType ModType;
+
         private Func<Mod, bool>? filter;
 
         /// <summary>
@@ -48,7 +52,8 @@ namespace osu.Game.Overlays.Mods
             }
         }
 
-        private readonly ModType modType;
+        public Bindable<IReadOnlyList<Mod>> SelectedMods = new Bindable<IReadOnlyList<Mod>>(Array.Empty<Mod>());
+
         private readonly Key[]? toggleKeys;
 
         private readonly Bindable<Dictionary<ModType, IReadOnlyList<Mod>>> availableMods = new Bindable<Dictionary<ModType, IReadOnlyList<Mod>>>();
@@ -69,95 +74,103 @@ namespace osu.Game.Overlays.Mods
 
         public ModColumn(ModType modType, bool allowBulkSelection, Key[]? toggleKeys = null)
         {
-            this.modType = modType;
+            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
+                TopLevelContent = 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 },
+                    CornerRadius = ModPanel.CORNER_RADIUS,
-                    Child = contentContainer = new Container
+                    Masking = true,
+                    Children = new Drawable[]
                     {
-                        RelativeSizeAxes = Axes.Both,
+                        new Container
-                        Masking = true,
-                        CornerRadius = ModPanel.CORNER_RADIUS,
-                        BorderThickness = 3,
-                        Children = new Drawable[]
                         {
-                            contentBackground = new Box
+                            RelativeSizeAxes = Axes.X,
+                            Height = header_height + ModPanel.CORNER_RADIUS,
+                            Children = new Drawable[]
                             {
-                                RelativeSizeAxes = Axes.Both
+                                headerBackground = new Box
-                            },
+                                {
-                            new GridContainer
+                                    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,
-                                RowDimensions = new[]
+                                Masking = true,
+                                CornerRadius = ModPanel.CORNER_RADIUS,
+                                BorderThickness = 3,
+                                Children = new Drawable[]
                                 {
-                                    new Dimension(GridSizeMode.AutoSize),
+                                    contentBackground = new Box
-                                    new Dimension()
-                                },
-                                Content = new[]
-                                {
-                                    new Drawable[]
                                     {
-                                        controlContainer = new Container
+                                        RelativeSizeAxes = Axes.Both
-                                        {
-                                            RelativeSizeAxes = Axes.X,
-                                            Padding = new MarginPadding { Horizontal = 14 }
-                                        }
                                     },
-                                    new Drawable[]
+                                    new GridContainer
                                     {
-                                        new OsuScrollContainer
+                                        RelativeSizeAxes = Axes.Both,
+                                        RowDimensions = new[]
                                         {
-                                            RelativeSizeAxes = Axes.Both,
+                                            new Dimension(GridSizeMode.AutoSize),
-                                            ScrollbarOverlapsContent = false,
+                                            new Dimension()
-                                            Child = panelFlow = new FillFlowContainer<ModPanel>
+                                        },
+                                        Content = new[]
+                                        {
+                                            new Drawable[]
                                             {
-                                                RelativeSizeAxes = Axes.X,
+                                                controlContainer = new Container
-                                                AutoSizeAxes = Axes.Y,
+                                                {
-                                                Spacing = new Vector2(0, 7),
+                                                    RelativeSizeAxes = Axes.X,
-                                                Padding = new MarginPadding(7)
+                                                    Padding = new MarginPadding { Horizontal = 14 }
+                                                }
+                                            },
+                                            new Drawable[]
+                                            {
+                                                new NestedVerticalScrollContainer
+                                                {
+                                                    RelativeSizeAxes = Axes.Both,
+                                                    ClampExtension = 100,
+                                                    ScrollbarOverlapsContent = false,
+                                                    Child = panelFlow = new FillFlowContainer<ModPanel>
+                                                    {
+                                                        RelativeSizeAxes = Axes.X,
+                                                        AutoSizeAxes = Axes.Y,
+                                                        Spacing = new Vector2(0, 7),
+                                                        Padding = new MarginPadding(7)
+                                                    }
+                                                }
                                             }
                                         }
                                     }
@@ -193,7 +206,7 @@ namespace osu.Game.Overlays.Mods
 
         private void createHeaderText()
         {
-            IEnumerable<string> headerTextWords = modType.Humanize(LetterCasing.Title).Split(' ');
+            IEnumerable<string> headerTextWords = ModType.Humanize(LetterCasing.Title).Split(' ');
 
             if (headerTextWords.Count() > 1)
             {
@@ -209,7 +222,7 @@ namespace osu.Game.Overlays.Mods
         {
             availableMods.BindTo(game.AvailableMods);
 
-            headerBackground.Colour = accentColour = colours.ForModType(modType);
+            headerBackground.Colour = accentColour = colours.ForModType(ModType);
 
             if (toggleAllCheckbox != null)
             {
@@ -225,6 +238,12 @@ namespace osu.Game.Overlays.Mods
         {
             base.LoadComplete();
             availableMods.BindValueChanged(_ => Scheduler.AddOnce(updateMods));
+            SelectedMods.BindValueChanged(_ =>
+            {
+                // if a load is in progress, don't try to update the selection - the load flow will do so.
+                if (latestLoadTask == null)
+                    updateActiveState();
+            });
             updateMods();
         }
 
@@ -232,7 +251,7 @@ namespace osu.Game.Overlays.Mods
 
         private void updateMods()
         {
-            var newMods = ModUtils.FlattenMods(availableMods.Value.GetValueOrDefault(modType) ?? Array.Empty<Mod>()).ToList();
+            var newMods = ModUtils.FlattenMods(availableMods.Value.GetValueOrDefault(ModType) ?? Array.Empty<Mod>()).ToList();
 
             if (newMods.SequenceEqual(panelFlow.Children.Select(p => p.Mod)))
                 return;
@@ -250,11 +269,20 @@ namespace osu.Game.Overlays.Mods
             {
                 panelFlow.ChildrenEnumerable = loaded;
 
-                foreach (var panel in panelFlow)
+                updateActiveState();
-                    panel.Active.BindValueChanged(_ => updateToggleState());
+                updateToggleAllState();
-                updateToggleState();
-
                 updateFilter();
+
+                foreach (var panel in panelFlow)
+                {
+                    panel.Active.BindValueChanged(_ =>
+                    {
+                        updateToggleAllState();
+                        SelectedMods.Value = panel.Active.Value
+                            ? SelectedMods.Value.Append(panel.Mod).ToArray()
+                            : SelectedMods.Value.Except(new[] { panel.Mod }).ToArray();
+                    });
+                }
             }, (cancellationTokenSource = new CancellationTokenSource()).Token);
             loadTask.ContinueWith(_ =>
             {
@@ -263,6 +291,12 @@ namespace osu.Game.Overlays.Mods
             });
         }
 
+        private void updateActiveState()
+        {
+            foreach (var panel in panelFlow)
+                panel.Active.Value = SelectedMods.Value.Contains(panel.Mod, EqualityComparer<Mod>.Default);
+        }
+
         #region Bulk select / deselect
 
         private const double initial_multiple_selection_delay = 120;
@@ -297,7 +331,7 @@ namespace osu.Game.Overlays.Mods
             }
         }
 
-        private void updateToggleState()
+        private void updateToggleAllState()
         {
             if (toggleAllCheckbox != null && !SelectionAnimationRunning)
             {
@@ -399,7 +433,7 @@ namespace osu.Game.Overlays.Mods
             foreach (var modPanel in panelFlow)
                 modPanel.ApplyFilter(Filter);
 
-            updateToggleState();
+            updateToggleAllState();
         }
 
         #endregion

osu.Game/Overlays/Mods/ModSelectScreen.cs

@@ -0,0 +1,392 @@
+// 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.Diagnostics;
+using System.Linq;
+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.Input.Events;
+using osu.Framework.Layout;
+using osu.Game.Configuration;
+using osu.Game.Graphics.Containers;
+using osu.Game.Graphics.UserInterface;
+using osu.Game.Rulesets.Mods;
+using osuTK;
+using osuTK.Input;
+
+namespace osu.Game.Overlays.Mods
+{
+    public class ModSelectScreen : OsuFocusedOverlayContainer
+    {
+        [Cached]
+        private OverlayColourProvider colourProvider = new OverlayColourProvider(OverlayColourScheme.Green);
+
+        [Cached]
+        public Bindable<IReadOnlyList<Mod>> SelectedMods { get; private set; } = new Bindable<IReadOnlyList<Mod>>(Array.Empty<Mod>());
+
+        protected override bool StartHidden => true;
+
+        private readonly BindableBool customisationVisible = new BindableBool();
+
+        private DifficultyMultiplierDisplay multiplierDisplay;
+        private ModSettingsArea modSettingsArea;
+        private FillFlowContainer<ModColumn> columnFlow;
+        private GridContainer grid;
+        private Container mainContent;
+
+        private PopupScreenTitle header;
+        private Container footer;
+
+        [BackgroundDependencyLoader]
+        private void load()
+        {
+            RelativeSizeAxes = Axes.Both;
+            RelativePositionAxes = Axes.Both;
+
+            InternalChildren = new Drawable[]
+            {
+                mainContent = new Container
+                {
+                    Origin = Anchor.BottomCentre,
+                    Anchor = Anchor.BottomCentre,
+                    RelativeSizeAxes = Axes.Both,
+                    Children = new Drawable[]
+                    {
+                        grid = new GridContainer
+                        {
+                            RelativeSizeAxes = Axes.Both,
+                            RowDimensions = new[]
+                            {
+                                new Dimension(GridSizeMode.AutoSize),
+                                new Dimension(GridSizeMode.AutoSize),
+                                new Dimension(),
+                                new Dimension(GridSizeMode.Absolute, 75),
+                            },
+                            Content = new[]
+                            {
+                                new Drawable[]
+                                {
+                                    header = new PopupScreenTitle
+                                    {
+                                        Anchor = Anchor.TopCentre,
+                                        Origin = Anchor.TopCentre,
+                                        Title = "Mod Select",
+                                        Description = "Mods provide different ways to enjoy gameplay. Some have an effect on the score you can achieve during ranked play. Others are just for fun.",
+                                        Close = Hide
+                                    }
+                                },
+                                new Drawable[]
+                                {
+                                    new Container
+                                    {
+                                        Anchor = Anchor.Centre,
+                                        Origin = Anchor.Centre,
+                                        AutoSizeAxes = Axes.X,
+                                        RelativePositionAxes = Axes.X,
+                                        X = 0.3f,
+                                        Height = DifficultyMultiplierDisplay.HEIGHT,
+                                        Margin = new MarginPadding
+                                        {
+                                            Horizontal = 100,
+                                            Vertical = 10
+                                        },
+                                        Child = multiplierDisplay = new DifficultyMultiplierDisplay
+                                        {
+                                            Anchor = Anchor.Centre,
+                                            Origin = Anchor.Centre
+                                        }
+                                    }
+                                },
+                                new Drawable[]
+                                {
+                                    new Container
+                                    {
+                                        Depth = float.MaxValue,
+                                        RelativeSizeAxes = Axes.Both,
+                                        RelativePositionAxes = Axes.Both,
+                                        Children = new Drawable[]
+                                        {
+                                            new OsuScrollContainer(Direction.Horizontal)
+                                            {
+                                                RelativeSizeAxes = Axes.Both,
+                                                Masking = false,
+                                                ClampExtension = 100,
+                                                ScrollbarOverlapsContent = false,
+                                                Child = columnFlow = new ModColumnContainer
+                                                {
+                                                    Direction = FillDirection.Horizontal,
+                                                    RelativeSizeAxes = Axes.Y,
+                                                    AutoSizeAxes = Axes.X,
+                                                    Spacing = new Vector2(10, 0),
+                                                    Margin = new MarginPadding { Right = 70 },
+                                                    Children = new[]
+                                                    {
+                                                        new ModColumn(ModType.DifficultyReduction, false, new[] { Key.Q, Key.W, Key.E, Key.R, Key.T, Key.Y, Key.U, Key.I, Key.O, Key.P }),
+                                                        new ModColumn(ModType.DifficultyIncrease, false, new[] { Key.A, Key.S, Key.D, Key.F, Key.G, Key.H, Key.J, Key.K, Key.L }),
+                                                        new ModColumn(ModType.Automation, false, new[] { Key.Z, Key.X, Key.C, Key.V, Key.B, Key.N, Key.M }),
+                                                        new ModColumn(ModType.Conversion, false),
+                                                        new ModColumn(ModType.Fun, false)
+                                                    }
+                                                }
+                                            }
+                                        }
+                                    }
+                                },
+                                new[] { Empty() }
+                            }
+                        },
+                        footer = new Container
+                        {
+                            RelativeSizeAxes = Axes.X,
+                            AutoSizeAxes = Axes.Y,
+                            Anchor = Anchor.BottomCentre,
+                            Origin = Anchor.BottomCentre,
+                            Children = new Drawable[]
+                            {
+                                new Box
+                                {
+                                    RelativeSizeAxes = Axes.X,
+                                    Height = 50,
+                                    Anchor = Anchor.BottomCentre,
+                                    Origin = Anchor.BottomCentre,
+                                    Colour = colourProvider.Background5
+                                },
+                                new ShearedToggleButton(200)
+                                {
+                                    Anchor = Anchor.BottomLeft,
+                                    Origin = Anchor.BottomLeft,
+                                    Margin = new MarginPadding { Vertical = 14, Left = 70 },
+                                    Text = "Mod Customisation",
+                                    Active = { BindTarget = customisationVisible }
+                                }
+                            }
+                        },
+                        new ClickToReturnContainer
+                        {
+                            RelativeSizeAxes = Axes.Both,
+                            HandleMouse = { BindTarget = customisationVisible },
+                            OnClicked = () => customisationVisible.Value = false
+                        }
+                    }
+                },
+                modSettingsArea = new ModSettingsArea
+                {
+                    Anchor = Anchor.BottomCentre,
+                    Origin = Anchor.BottomCentre,
+                    Height = 0
+                }
+            };
+
+            columnFlow.Shear = new Vector2(ModPanel.SHEAR_X, 0);
+        }
+
+        protected override void LoadComplete()
+        {
+            base.LoadComplete();
+
+            ((IBindable<IReadOnlyList<Mod>>)modSettingsArea.SelectedMods).BindTo(SelectedMods);
+
+            SelectedMods.BindValueChanged(val =>
+            {
+                updateMultiplier();
+                updateCustomisation(val);
+                updateSelectionFromBindable();
+            }, true);
+
+            foreach (var column in columnFlow)
+            {
+                column.SelectedMods.BindValueChanged(_ => updateBindableFromSelection());
+            }
+
+            customisationVisible.BindValueChanged(_ => updateCustomisationVisualState(), true);
+        }
+
+        private void updateMultiplier()
+        {
+            double multiplier = 1.0;
+
+            foreach (var mod in SelectedMods.Value)
+                multiplier *= mod.ScoreMultiplier;
+
+            multiplierDisplay.Current.Value = multiplier;
+        }
+
+        private void updateCustomisation(ValueChangedEvent<IReadOnlyList<Mod>> valueChangedEvent)
+        {
+            bool anyCustomisableMod = false;
+            bool anyModWithRequiredCustomisationAdded = false;
+
+            foreach (var mod in SelectedMods.Value)
+            {
+                anyCustomisableMod |= mod.GetSettingsSourceProperties().Any();
+                anyModWithRequiredCustomisationAdded |= !valueChangedEvent.OldValue.Contains(mod) && mod.RequiresConfiguration;
+            }
+
+            if (anyCustomisableMod)
+            {
+                customisationVisible.Disabled = false;
+
+                if (anyModWithRequiredCustomisationAdded && !customisationVisible.Value)
+                    customisationVisible.Value = true;
+            }
+            else
+            {
+                if (customisationVisible.Value)
+                    customisationVisible.Value = false;
+
+                customisationVisible.Disabled = true;
+            }
+        }
+
+        private void updateCustomisationVisualState()
+        {
+            const double transition_duration = 300;
+
+            grid.FadeColour(customisationVisible.Value ? Colour4.Gray : Colour4.White, transition_duration, Easing.InOutCubic);
+
+            float modAreaHeight = customisationVisible.Value ? ModSettingsArea.HEIGHT : 0;
+
+            modSettingsArea.ResizeHeightTo(modAreaHeight, transition_duration, Easing.InOutCubic);
+            mainContent.TransformTo(nameof(Margin), new MarginPadding { Bottom = modAreaHeight }, transition_duration, Easing.InOutCubic);
+        }
+
+        private bool selectionBindableSyncInProgress;
+
+        private void updateSelectionFromBindable()
+        {
+            if (selectionBindableSyncInProgress)
+                return;
+
+            selectionBindableSyncInProgress = true;
+
+            foreach (var column in columnFlow)
+                column.SelectedMods.Value = SelectedMods.Value.Where(mod => mod.Type == column.ModType).ToArray();
+
+            selectionBindableSyncInProgress = false;
+        }
+
+        private void updateBindableFromSelection()
+        {
+            if (selectionBindableSyncInProgress)
+                return;
+
+            selectionBindableSyncInProgress = true;
+
+            SelectedMods.Value = columnFlow.SelectMany(column => column.SelectedMods.Value).ToArray();
+
+            selectionBindableSyncInProgress = false;
+        }
+
+        protected override void PopIn()
+        {
+            const double fade_in_duration = 400;
+
+            base.PopIn();
+            this.FadeIn(fade_in_duration, Easing.OutQuint);
+
+            header.MoveToY(0, fade_in_duration, Easing.OutQuint);
+            footer.MoveToY(0, fade_in_duration, Easing.OutQuint);
+
+            multiplierDisplay
+                .Delay(fade_in_duration * 0.65f)
+                .FadeIn(fade_in_duration / 2, Easing.OutQuint)
+                .ScaleTo(1, fade_in_duration, Easing.OutElastic);
+
+            for (int i = 0; i < columnFlow.Count; i++)
+            {
+                columnFlow[i].TopLevelContent
+                             .Delay(i * 30)
+                             .MoveToY(0, fade_in_duration, Easing.OutQuint)
+                             .FadeIn(fade_in_duration, Easing.OutQuint);
+            }
+        }
+
+        protected override void PopOut()
+        {
+            const double fade_out_duration = 500;
+
+            base.PopOut();
+            this.FadeOut(fade_out_duration, Easing.OutQuint);
+
+            multiplierDisplay
+                .FadeOut(fade_out_duration / 2, Easing.OutQuint)
+                .ScaleTo(0.75f, fade_out_duration, Easing.OutQuint);
+
+            header.MoveToY(-header.DrawHeight, fade_out_duration, Easing.OutQuint);
+            footer.MoveToY(footer.DrawHeight, fade_out_duration, Easing.OutQuint);
+
+            for (int i = 0; i < columnFlow.Count; i++)
+            {
+                const float distance = 700;
+
+                columnFlow[i].TopLevelContent
+                             .MoveToY(i % 2 == 0 ? -distance : distance, fade_out_duration, Easing.OutQuint)
+                             .FadeOut(fade_out_duration, Easing.OutQuint);
+            }
+        }
+
+        private class ModColumnContainer : FillFlowContainer<ModColumn>
+        {
+            private readonly LayoutValue drawSizeLayout = new LayoutValue(Invalidation.DrawSize);
+
+            public ModColumnContainer()
+            {
+                AddLayout(drawSizeLayout);
+            }
+
+            public override void Add(ModColumn column)
+            {
+                base.Add(column);
+
+                Debug.Assert(column != null);
+                column.Shear = Vector2.Zero;
+            }
+
+            protected override void Update()
+            {
+                base.Update();
+
+                if (!drawSizeLayout.IsValid)
+                {
+                    Padding = new MarginPadding
+                    {
+                        Left = DrawHeight * ModPanel.SHEAR_X,
+                        Bottom = 10
+                    };
+
+                    drawSizeLayout.Validate();
+                }
+            }
+        }
+
+        private class ClickToReturnContainer : Container
+        {
+            public BindableBool HandleMouse { get; } = new BindableBool();
+
+            public Action OnClicked { get; set; }
+
+            protected override bool Handle(UIEvent e)
+            {
+                if (!HandleMouse.Value)
+                    return base.Handle(e);
+
+                switch (e)
+                {
+                    case ClickEvent _:
+                        OnClicked?.Invoke();
+                        return true;
+
+                    case MouseEvent _:
+                        return true;
+                }
+
+                return base.Handle(e);
+            }
+        }
+    }
+}

osu.Game/Overlays/Mods/ModSettingsArea.cs

@@ -23,6 +23,8 @@ namespace osu.Game.Overlays.Mods
     {
         public Bindable<IReadOnlyList<Mod>> SelectedMods { get; } = new Bindable<IReadOnlyList<Mod>>();
 
+        public const float HEIGHT = 250;
+
         private readonly Box background;
         private readonly FillFlowContainer modSettingsFlow;
 
@@ -32,7 +34,7 @@ namespace osu.Game.Overlays.Mods
         public ModSettingsArea()
         {
             RelativeSizeAxes = Axes.X;
-            Height = 250;
+            Height = HEIGHT;
 
             Anchor = Anchor.BottomRight;
             Origin = Anchor.BottomRight;
@@ -52,6 +54,7 @@ namespace osu.Game.Overlays.Mods
                     {
                         RelativeSizeAxes = Axes.Both,
                         ScrollbarOverlapsContent = false,
+                        ClampExtension = 100,
                         Child = modSettingsFlow = new FillFlowContainer
                         {
                             AutoSizeAxes = Axes.X,
@@ -155,9 +158,10 @@ namespace osu.Game.Overlays.Mods
                         new[] { Empty() },
                         new Drawable[]
                         {
-                            new OsuScrollContainer(Direction.Vertical)
+                            new NestedVerticalScrollContainer
                             {
                                 RelativeSizeAxes = Axes.Both,
+                                ClampExtension = 100,
                                 Child = new FillFlowContainer
                                 {
                                     RelativeSizeAxes = Axes.X,

osu.Game/Overlays/Mods/NestedVerticalScrollContainer.cs

@@ -0,0 +1,48 @@
+// 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.
+
+#nullable enable
+
+using osu.Framework.Graphics;
+using osu.Framework.Input.Events;
+using osu.Game.Graphics.Containers;
+
+namespace osu.Game.Overlays.Mods
+{
+    /// <summary>
+    /// A scroll container that handles the case of vertically scrolling content inside a larger horizontally scrolling parent container.
+    /// </summary>
+    public class NestedVerticalScrollContainer : OsuScrollContainer
+    {
+        private OsuScrollContainer? parentScrollContainer;
+
+        protected override void LoadComplete()
+        {
+            base.LoadComplete();
+
+            parentScrollContainer = this.FindClosestParent<OsuScrollContainer>();
+        }
+
+        protected override bool OnScroll(ScrollEvent e)
+        {
+            if (parentScrollContainer == null)
+                return base.OnScroll(e);
+
+            bool topRightInView = parentScrollContainer.ScreenSpaceDrawQuad.Contains(ScreenSpaceDrawQuad.TopRight);
+            bool bottomLeftInView = parentScrollContainer.ScreenSpaceDrawQuad.Contains(ScreenSpaceDrawQuad.BottomLeft);
+
+            // If not completely on-screen, handle scroll but also allow parent to scroll at the same time (to hopefully bring our content into full view).
+            if (!topRightInView || !bottomLeftInView)
+                return false;
+
+            bool scrollingPastEnd = e.ScrollDelta.Y < 0 && IsScrolledToEnd();
+            bool scrollingPastStart = e.ScrollDelta.Y > 0 && Target <= 0;
+
+            // If at either of our extents, delegate scroll to the horizontal parent container.
+            if (scrollingPastStart || scrollingPastEnd)
+                return false;
+
+            return base.OnScroll(e);
+        }
+    }
+}

osu.Game/osu.Game.csproj

@@ -35,7 +35,7 @@
       <IncludeAssets>runtime; build; native; contentfiles; analyzers; buildtransitive</IncludeAssets>
     </PackageReference>
     <PackageReference Include="Realm" Version="10.10.0" />
-    <PackageReference Include="ppy.osu.Framework" Version="2022.404.0" />
+    <PackageReference Include="ppy.osu.Framework" Version="2022.405.0" />
     <PackageReference Include="ppy.osu.Game.Resources" Version="2022.405.0" />
     <PackageReference Include="Sentry" Version="3.14.1" />
     <PackageReference Include="SharpCompress" Version="0.30.1" />

osu.iOS.props

@@ -61,7 +61,7 @@
     <Reference Include="System.Net.Http" />
   </ItemGroup>
   <ItemGroup Label="Package References">
-    <PackageReference Include="ppy.osu.Framework.iOS" Version="2022.404.0" />
+    <PackageReference Include="ppy.osu.Framework.iOS" Version="2022.405.0" />
     <PackageReference Include="ppy.osu.Game.Resources" Version="2022.405.0" />
   </ItemGroup>
   <!-- See https://github.com/dotnet/runtime/issues/35988 (can be removed after Xamarin uses net6.0) -->
@@ -84,7 +84,7 @@
     <PackageReference Include="Microsoft.EntityFrameworkCore.Sqlite" Version="5.0.14" />
     <PackageReference Include="Microsoft.EntityFrameworkCore.Sqlite.Core" Version="5.0.14" />
     <PackageReference Include="Newtonsoft.Json" Version="13.0.1" />
-    <PackageReference Include="ppy.osu.Framework" Version="2022.404.0" />
+    <PackageReference Include="ppy.osu.Framework" Version="2022.405.0" />
     <PackageReference Include="SharpCompress" Version="0.30.1" />
     <PackageReference Include="NUnit" Version="3.13.2" />
     <PackageReference Include="System.ComponentModel.Annotations" Version="5.0.0" />