Add ModFlowDisplay and consume in ContractedPanelMiddleContent

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

@@ -0,0 +1,49 @@
+// 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.Graphics;
+using osu.Game.Rulesets.Osu;
+using osu.Game.Screens.Play.HUD;
+
+namespace osu.Game.Tests.Visual.UserInterface
+{
+    public class TestSceneModFlowDisplay : OsuTestScene
+    {
+        private ModFlowDisplay modFlow;
+
+        [SetUp]
+        public void SetUp() => Schedule(() =>
+        {
+            Child = modFlow = new ModFlowDisplay
+            {
+                Anchor = Anchor.Centre,
+                Origin = Anchor.Centre,
+                AutoSizeAxes = Axes.Y,
+                RelativeSizeAxes = Axes.None,
+                Width = 200,
+                Current =
+                {
+                    Value = new OsuRuleset().GetAllMods().ToArray(),
+                }
+            };
+        });
+
+        [Test]
+        public void TestWrapping()
+        {
+            AddSliderStep("icon size", 0.1f, 2, 1, val =>
+            {
+                if (modFlow != null)
+                    modFlow.IconScale = val;
+            });
+
+            AddSliderStep("flow width", 100, 500, 200, val =>
+            {
+                if (modFlow != null)
+                    modFlow.Width = val;
+            });
+        }
+    }
+}

osu.Game/Screens/Play/HUD/ModDisplay.cs

@@ -16,7 +16,7 @@ using osuTK;
 namespace osu.Game.Screens.Play.HUD
 {
     /// <summary>
-    /// Displays a single-line horizontal auto-sized flow of mods.
+    /// Displays a single-line horizontal auto-sized flow of mods. For cases where wrapping is required, use <see cref="ModFlowDisplay"/> instead.
     /// </summary>
     public class ModDisplay : CompositeDrawable, IHasCurrentValue<IReadOnlyList<Mod>>
     {

osu.Game/Screens/Play/HUD/ModFlowDisplay.cs

@@ -0,0 +1,83 @@
+// Copyright (c) ppy Pty Ltd <contact@ppy.sh>. Licensed under the MIT Licence.
+// See the LICENCE file in the repository root for full licence text.
+
+using System;
+using System.Collections.Generic;
+using osu.Framework.Bindables;
+using osu.Framework.Graphics;
+using osu.Framework.Graphics.Containers;
+using osu.Framework.Graphics.UserInterface;
+using osu.Game.Graphics.Containers;
+using osu.Game.Rulesets.Mods;
+using osu.Game.Rulesets.UI;
+using osuTK;
+
+namespace osu.Game.Screens.Play.HUD
+{
+    /// <summary>
+    /// A horizontally wrapping display of mods. For cases where wrapping is not required, use <see cref="ModDisplay"/> instead.
+    /// </summary>
+    public class ModFlowDisplay : ReverseChildIDFillFlowContainer<ModIcon>, IHasCurrentValue<IReadOnlyList<Mod>>
+    {
+        private const int fade_duration = 1000;
+
+        private readonly BindableWithCurrent<IReadOnlyList<Mod>> current = new BindableWithCurrent<IReadOnlyList<Mod>>();
+
+        public Bindable<IReadOnlyList<Mod>> Current
+        {
+            get => current.Current;
+            set
+            {
+                if (value == null)
+                    throw new ArgumentNullException(nameof(value));
+
+                current.Current = value;
+            }
+        }
+
+        private float iconScale = 1;
+
+        public float IconScale
+        {
+            get => iconScale;
+            set
+            {
+                iconScale = value;
+                updateDisplay();
+            }
+        }
+
+        public ModFlowDisplay()
+        {
+            Direction = FillDirection.Full;
+        }
+
+        protected override void LoadComplete()
+        {
+            base.LoadComplete();
+
+            Current.BindValueChanged(_ => updateDisplay(), true);
+
+            this.FadeInFromZero(fade_duration, Easing.OutQuint);
+        }
+
+        private void updateDisplay()
+        {
+            Clear();
+
+            if (current.Value == null) return;
+
+            Spacing = new Vector2(0, -12 * iconScale);
+
+            foreach (Mod mod in current.Value)
+            {
+                Add(new ModIcon(mod)
+                {
+                    Scale = new Vector2(0.6f * iconScale),
+                    Anchor = Anchor.TopCentre,
+                    Origin = Anchor.TopCentre,
+                });
+            }
+        }
+    }
+}

osu.Game/Screens/Ranking/Contracted/ContractedPanelMiddleContent.cs

@@ -131,13 +131,14 @@ namespace osu.Game.Screens.Ranking.Contracted
                                                 createStatistic("Accuracy", $"{score.Accuracy.FormatAccuracy()}"),
                                             }
                                         },
-                                        new ModDisplay
+                                        new ModFlowDisplay
                                         {
                                             Anchor = Anchor.TopCentre,
                                             Origin = Anchor.TopCentre,
-                                            ExpansionMode = ExpansionMode.AlwaysExpanded,
+                                            AutoSizeAxes = Axes.Y,
+                                            RelativeSizeAxes = Axes.X,
                                             Current = { Value = score.Mods },
-                                            Scale = new Vector2(0.5f),
+                                            IconScale = 0.5f,
                                         }
                                     }
                                 }