Merge pull request #7900 from smoogipoo/room-inspector-redesign

Update the multiplayer room inspector design

osu.Game.Tests/Visual/Multiplayer/TestSceneLoungeRoomInfo.cs

@@ -0,0 +1,59 @@
+// 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 NUnit.Framework;
+using osu.Framework.Graphics;
+using osu.Game.Online.Multiplayer;
+using osu.Game.Online.Multiplayer.RoomStatuses;
+using osu.Game.Screens.Multi.Lounge.Components;
+using osu.Game.Users;
+
+namespace osu.Game.Tests.Visual.Multiplayer
+{
+    public class TestSceneLoungeRoomInfo : MultiplayerTestScene
+    {
+        public override IReadOnlyList<Type> RequiredTypes => new[]
+        {
+            typeof(RoomInfo)
+        };
+
+        [SetUp]
+        public void Setup() => Schedule(() =>
+        {
+            Room.CopyFrom(new Room());
+
+            Child = new RoomInfo
+            {
+                Anchor = Anchor.Centre,
+                Origin = Anchor.Centre,
+                Width = 500
+            };
+        });
+
+        public override void SetUpSteps()
+        {
+            // Todo: Temp
+        }
+
+        [Test]
+        public void TestNonSelectedRoom()
+        {
+            AddStep("set null room", () => Room.RoomID.Value = null);
+        }
+
+        [Test]
+        public void TestOpenRoom()
+        {
+            AddStep("set open room", () =>
+            {
+                Room.RoomID.Value = 0;
+                Room.Name.Value = "Room 0";
+                Room.Host.Value = new User { Username = "peppy", Id = 2 };
+                Room.EndDate.Value = DateTimeOffset.Now.AddMonths(1);
+                Room.Status.Value = new RoomStatusOpen();
+            });
+        }
+    }
+}

osu.Game/Screens/Multi/Components/ParticipantsList.cs

@@ -18,7 +18,7 @@ namespace osu.Game.Screens.Multi.Components
 {
     public class ParticipantsList : MultiplayerComposite
     {
-        public const float TILE_SIZE = 70;
+        public const float TILE_SIZE = 35;
 
         public override Axes RelativeSizeAxes
         {
@@ -113,7 +113,7 @@ namespace osu.Game.Screens.Multi.Components
             public UserTile(User user)
             {
                 this.user = user;
-                Size = new Vector2(70f);
+                Size = new Vector2(TILE_SIZE);
                 CornerRadius = 5f;
                 Masking = true;
 

osu.Game/Screens/Multi/DrawableRoomPlaylistItem.cs

@@ -52,7 +52,7 @@ namespace osu.Game.Screens.Multi
         private readonly bool allowEdit;
         private readonly bool allowSelection;
 
-        protected override bool ShouldBeConsideredForInput(Drawable child) => allowEdit || SelectedItem.Value == Model;
+        protected override bool ShouldBeConsideredForInput(Drawable child) => allowEdit || !allowSelection || SelectedItem.Value == Model;
 
         public DrawableRoomPlaylistItem(PlaylistItem item, bool allowEdit, bool allowSelection)
             : base(item)

osu.Game/Screens/Multi/Lounge/Components/RoomInfo.cs

@@ -0,0 +1,89 @@
+// 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 osu.Framework.Graphics;
+using osu.Framework.Graphics.Containers;
+using osu.Framework.Graphics.Sprites;
+using osu.Game.Graphics;
+using osu.Game.Graphics.Sprites;
+using osu.Game.Screens.Multi.Components;
+using osuTK;
+
+namespace osu.Game.Screens.Multi.Lounge.Components
+{
+    public class RoomInfo : MultiplayerComposite
+    {
+        private readonly List<Drawable> statusElements = new List<Drawable>();
+        private readonly SpriteText roomName;
+
+        public RoomInfo()
+        {
+            AutoSizeAxes = Axes.Y;
+
+            RoomStatusInfo statusInfo;
+            ModeTypeInfo typeInfo;
+            ParticipantInfo participantInfo;
+
+            InternalChild = new FillFlowContainer
+            {
+                RelativeSizeAxes = Axes.X,
+                AutoSizeAxes = Axes.Y,
+                Direction = FillDirection.Vertical,
+                Spacing = new Vector2(0, 4),
+                Children = new Drawable[]
+                {
+                    new Container
+                    {
+                        RelativeSizeAxes = Axes.X,
+                        AutoSizeAxes = Axes.Y,
+                        Children = new Drawable[]
+                        {
+                            new FillFlowContainer
+                            {
+                                Anchor = Anchor.CentreLeft,
+                                Origin = Anchor.CentreLeft,
+                                AutoSizeAxes = Axes.Both,
+                                Direction = FillDirection.Vertical,
+                                Children = new Drawable[]
+                                {
+                                    roomName = new OsuSpriteText { Font = OsuFont.GetFont(size: 30) },
+                                    statusInfo = new RoomStatusInfo(),
+                                }
+                            },
+                            typeInfo = new ModeTypeInfo
+                            {
+                                Anchor = Anchor.CentreRight,
+                                Origin = Anchor.CentreRight
+                            }
+                        }
+                    },
+                    participantInfo = new ParticipantInfo(),
+                }
+            };
+
+            statusElements.AddRange(new Drawable[] { statusInfo, typeInfo, participantInfo });
+        }
+
+        protected override void LoadComplete()
+        {
+            base.LoadComplete();
+
+            if (RoomID.Value == null)
+                statusElements.ForEach(e => e.FadeOut());
+
+            RoomID.BindValueChanged(id =>
+            {
+                if (id.NewValue == null)
+                    statusElements.ForEach(e => e.FadeOut(100));
+                else
+                    statusElements.ForEach(e => e.FadeIn(100));
+            }, true);
+
+            RoomName.BindValueChanged(name =>
+            {
+                roomName.Text = name.NewValue ?? "No room selected";
+            }, true);
+        }
+    }
+}

osu.Game/Screens/Multi/Lounge/Components/RoomInspector.cs

@@ -2,19 +2,12 @@
 // See the LICENCE file in the repository root for full licence text.
 
 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.Game.Beatmaps;
 using osu.Game.Graphics;
-using osu.Game.Graphics.Containers;
-using osu.Game.Graphics.Sprites;
-using osu.Game.Online.Multiplayer;
 using osu.Game.Screens.Multi.Components;
-using osuTK;
 using osuTK.Graphics;
 
 namespace osu.Game.Screens.Multi.Lounge.Components
@@ -25,16 +18,9 @@ namespace osu.Game.Screens.Multi.Lounge.Components
 
         private readonly MarginPadding contentPadding = new MarginPadding { Horizontal = 20, Vertical = 10 };
 
-        private ParticipantCountDisplay participantCount;
-        private OsuSpriteText name;
-        private BeatmapTypeInfo beatmapTypeInfo;
-        private ParticipantInfo participantInfo;
-
         [Resolved]
         private BeatmapManager beatmaps { get; set; }
 
-        private readonly Bindable<RoomStatus> status = new Bindable<RoomStatus>(new RoomStatusNoneSelected());
-
         [BackgroundDependencyLoader]
         private void load(OsuColour colours)
         {
@@ -43,185 +29,52 @@ namespace osu.Game.Screens.Multi.Lounge.Components
                 new Box
                 {
                     RelativeSizeAxes = Axes.Both,
-                    Colour = OsuColour.FromHex(@"343138"),
+                    Colour = Color4.Black,
+                    Alpha = 0.25f
                 },
-                new GridContainer
+                new Container
                 {
                     RelativeSizeAxes = Axes.Both,
-                    RowDimensions = new[]
+                    Padding = new MarginPadding { Horizontal = 30 },
+                    Child = new GridContainer
                     {
-                        new Dimension(GridSizeMode.AutoSize),
+                        RelativeSizeAxes = Axes.Both,
-                        new Dimension(GridSizeMode.Distributed),
+                        Content = new[]
-                    },
-                    Content = new[]
-                    {
-                        new Drawable[]
                         {
-                            new FillFlowContainer
+                            new Drawable[]
                             {
-                                RelativeSizeAxes = Axes.X,
+                                new FillFlowContainer
-                                AutoSizeAxes = Axes.Y,
-                                Direction = FillDirection.Vertical,
-                                Children = new Drawable[]
                                 {
-                                    new Container
+                                    RelativeSizeAxes = Axes.X,
+                                    AutoSizeAxes = Axes.Y,
+                                    Direction = FillDirection.Vertical,
+                                    Children = new Drawable[]
                                     {
-                                        RelativeSizeAxes = Axes.X,
+                                        new RoomInfo
-                                        Height = 200,
-                                        Masking = true,
-                                        Children = new Drawable[]
                                         {
-                                            new MultiplayerBackgroundSprite { RelativeSizeAxes = Axes.Both },
+                                            RelativeSizeAxes = Axes.X,
-                                            new Box
+                                            Margin = new MarginPadding { Vertical = 60 },
-                                            {
-                                                RelativeSizeAxes = Axes.Both,
-                                                Colour = ColourInfo.GradientVertical(Color4.Black.Opacity(0.5f), Color4.Black.Opacity(0)),
-                                            },
-                                            new Container
-                                            {
-                                                RelativeSizeAxes = Axes.Both,
-                                                Padding = new MarginPadding(20),
-                                                Children = new Drawable[]
-                                                {
-                                                    participantCount = new ParticipantCountDisplay
-                                                    {
-                                                        Anchor = Anchor.TopRight,
-                                                        Origin = Anchor.TopRight,
-                                                    },
-                                                    name = new OsuSpriteText
-                                                    {
-                                                        Anchor = Anchor.BottomLeft,
-                                                        Origin = Anchor.BottomLeft,
-                                                        Font = OsuFont.GetFont(size: 30),
-                                                        Current = RoomName
-                                                    },
-                                                },
-                                            },
                                         },
-                                    },
+                                        new OverlinedParticipants(Direction.Horizontal)
-                                    new StatusColouredContainer(transition_duration)
-                                    {
-                                        RelativeSizeAxes = Axes.X,
-                                        Height = 5,
-                                        Child = new Box { RelativeSizeAxes = Axes.Both }
-                                    },
-                                    new Container
-                                    {
-                                        RelativeSizeAxes = Axes.X,
-                                        AutoSizeAxes = Axes.Y,
-                                        Children = new Drawable[]
                                         {
-                                            new Box
+                                            RelativeSizeAxes = Axes.X,
-                                            {
+                                            AutoSizeAxes = Axes.Y
-                                                RelativeSizeAxes = Axes.Both,
-                                                Colour = OsuColour.FromHex(@"28242d"),
-                                            },
-                                            new FillFlowContainer
-                                            {
-                                                RelativeSizeAxes = Axes.X,
-                                                AutoSizeAxes = Axes.Y,
-                                                Direction = FillDirection.Vertical,
-                                                LayoutDuration = transition_duration,
-                                                Padding = contentPadding,
-                                                Spacing = new Vector2(0f, 5f),
-                                                Children = new Drawable[]
-                                                {
-                                                    new StatusColouredContainer(transition_duration)
-                                                    {
-                                                        AutoSizeAxes = Axes.Both,
-                                                        Child = new StatusText
-                                                        {
-                                                            Font = OsuFont.GetFont(weight: FontWeight.Bold, size: 14),
-                                                        }
-                                                    },
-                                                    beatmapTypeInfo = new BeatmapTypeInfo(),
-                                                },
-                                            },
                                         },
-                                    },
-                                    new Container
-                                    {
-                                        RelativeSizeAxes = Axes.X,
-                                        AutoSizeAxes = Axes.Y,
-                                        Padding = contentPadding,
-                                        Children = new Drawable[]
-                                        {
-                                            participantInfo = new ParticipantInfo(),
-                                        },
-                                    },
-                                },
-                            },
-                        },
-                        new Drawable[]
-                        {
-                            new Container
-                            {
-                                RelativeSizeAxes = Axes.Both,
-                                Padding = new MarginPadding { Horizontal = 10 },
-                                Child = new OsuScrollContainer
-                                {
-                                    RelativeSizeAxes = Axes.Both,
-                                    Child = new ParticipantsList
-                                    {
-                                        RelativeSizeAxes = Axes.X,
-                                        AutoSizeAxes = Axes.Y
                                     }
                                 }
-                            }
+                            },
+                            new Drawable[]
+                            {
+                                new OverlinedPlaylist(false) { RelativeSizeAxes = Axes.Both },
+                            },
+                        },
+                        RowDimensions = new[]
+                        {
+                            new Dimension(GridSizeMode.AutoSize),
                         }
                     }
                 }
             };
-
-            Status.BindValueChanged(_ => updateStatus(), true);
-            RoomID.BindValueChanged(_ => updateStatus(), true);
-        }
-
-        protected override IReadOnlyDependencyContainer CreateChildDependencies(IReadOnlyDependencyContainer parent)
-        {
-            var dependencies = new DependencyContainer(base.CreateChildDependencies(parent));
-            dependencies.CacheAs(status, new CacheInfo(nameof(Room.Status), typeof(Room)));
-            return dependencies;
-        }
-
-        private void updateStatus()
-        {
-            if (RoomID.Value == null)
-            {
-                status.Value = new RoomStatusNoneSelected();
-
-                participantCount.FadeOut(transition_duration);
-                beatmapTypeInfo.FadeOut(transition_duration);
-                name.FadeOut(transition_duration);
-                participantInfo.FadeOut(transition_duration);
-            }
-            else
-            {
-                status.Value = Status.Value;
-
-                participantCount.FadeIn(transition_duration);
-                beatmapTypeInfo.FadeIn(transition_duration);
-                name.FadeIn(transition_duration);
-                participantInfo.FadeIn(transition_duration);
-            }
-        }
-
-        private class RoomStatusNoneSelected : RoomStatus
-        {
-            public override string Message => @"No Room Selected";
-            public override Color4 GetAppropriateColour(OsuColour colours) => colours.Gray8;
-        }
-
-        private class StatusText : OsuSpriteText
-        {
-            [Resolved(typeof(Room), nameof(Room.Status))]
-            private Bindable<RoomStatus> status { get; set; }
-
-            [BackgroundDependencyLoader]
-            private void load()
-            {
-                status.BindValueChanged(s => Text = s.NewValue.Message, true);
-            }
         }
     }
 }