Update DrawableRoom design.

osu.Desktop.VisualTests/Tests/TestCaseDrawableRoom.cs

@@ -8,6 +8,7 @@ using osu.Game.Screens.Multiplayer;
 using osu.Game.Online.Multiplayer;
 using osu.Game.Users;
 using osu.Game.Database;
+using osu.Framework.Allocation;
 
 namespace osu.Desktop.VisualTests.Tests
 {
@@ -15,74 +16,105 @@ namespace osu.Desktop.VisualTests.Tests
     {
         public override string Description => @"Select your favourite room";
 
+        private RulesetDatabase rulesets;
+
         public override void Reset()
         {
             base.Reset();
 
             DrawableRoom first;
-            DrawableRoom second;
             Add(new FillFlowContainer
             {
                 Anchor = Anchor.Centre,
                 Origin = Anchor.Centre,
                 AutoSizeAxes = Axes.Y,
-                Width = 500f,
+                Width = 580f,
                 Direction = FillDirection.Vertical,
                 Children = new Drawable[]
                 {
-                    first = new DrawableRoom(new Room()),
+                    first = new DrawableRoom(new Room
-                    second = new DrawableRoom(new Room()),
+                    {
+                        Name = { Value = @"Great Room Right Here" },
+                        Host = { Value = new User { Username = @"Naeferith", Id = 9492835, Country = new Country { FlagName = @"FR" } } },
+                        Status = { Value = new RoomStatusOpen() },
+                        Type = { Value = new GameTypeTeamVersus() },
+                        Beatmap =
+                        {
+                            Value = new BeatmapInfo
+                            {
+                                StarDifficulty = 4.65,
+                                Ruleset = rulesets.GetRuleset(3),
+                                Metadata = new BeatmapMetadata
+                                {
+                                    Title = @"Critical Crystal",
+                                    Artist = @"Seiryu",
+                                },
+                                OnlineInfo = new BeatmapOnlineInfo
+                                {
+                                    Covers = new[] { @"https://assets.ppy.sh//beatmaps/376340/covers/cover.jpg?1456478455" },
+                                },
+                            },
+                        },
+                        Participants =
+                        {
+                            Value = new[]
+                            {
+                                new User { GlobalRank = 1355 },
+                                new User { GlobalRank = 8756 },
+                            },
+                        },
+                    }),
+                    new DrawableRoom(new Room
+                    {
+                        Name = { Value = @"Relax It's The Weekend" },
+                        Host = { Value = new User { Username = @"peppy", Id = 2, Country = new Country { FlagName = @"AU" } } },
+                        Status = { Value = new RoomStatusPlaying() },
+                        Type = { Value = new GameTypeTagTeam() },
+                        Beatmap =
+                        {
+                            Value = new BeatmapInfo
+                            {
+                                StarDifficulty = 1.96,
+                                Ruleset = rulesets.GetRuleset(0),
+                                Metadata = new BeatmapMetadata
+                                {
+                                    Title = @"Serendipity",
+                                    Artist = @"ZAQ",
+                                },
+                                OnlineInfo = new BeatmapOnlineInfo
+                                {
+                                    Covers = new[] { @"https://assets.ppy.sh//beatmaps/526839/covers/cover.jpg?1493815706" },
+                                },
+                            },
+                        },
+                        Participants =
+                        {
+                            Value =  new[]
+                            {
+                                new User { GlobalRank = 578975 },
+                                new User { GlobalRank = 24554 },
+                            },
+                        },
+                    }),
                 }
             });
 
-            first.Room.Name.Value = @"Great Room Right Here";
+            AddStep(@"change title", () => first.Room.Name.Value = @"I Changed Name");
-            first.Room.Host.Value = new User { Username = @"Naeferith", Id = 9492835, Country = new Country { FlagName = @"FR" } };
+            AddStep(@"change host", () => first.Room.Host.Value = new User { Username = @"DrabWeb", Id = 6946022, Country = new Country { FlagName = @"CA" } });
-            first.Room.Status.Value = new RoomStatusOpen();
+            AddStep(@"change status", () => first.Room.Status.Value = new RoomStatusPlaying());
-            first.Room.Beatmap.Value = new BeatmapInfo
+            AddStep(@"change type", () => first.Room.Type.Value = new GameTypeVersus());
+            AddStep(@"change beatmap", () => first.Room.Beatmap.Value = null);
+            AddStep(@"change participants", () => first.Room.Participants.Value = new[]
             {
-                Metadata = new BeatmapMetadata
+                new User { GlobalRank = 1254 },
-                {
+                new User { GlobalRank = 123189 },
-                    Title = @"Seiryu",
-                    Artist = @"Critical Crystal",
-                },
-            };
-
-            second.Room.Name.Value = @"Relax It's The Weekend";
-            second.Room.Host.Value = new User { Username = @"peppy", Id = 2, Country = new Country { FlagName = @"AU" } };
-            second.Room.Status.Value = new RoomStatusPlaying();
-            second.Room.Beatmap.Value = new BeatmapInfo
-            {
-                Metadata = new BeatmapMetadata
-                {
-                    Title = @"Serendipity",
-                    Artist = @"ZAQ",
-                },
-            };
-
-            AddStep(@"change state", () =>
-            {
-                first.Room.Status.Value = new RoomStatusPlaying();
             });
+        }
 
-            AddStep(@"change name", () =>
+        [BackgroundDependencyLoader]
-            {
+        private void load(RulesetDatabase rulesets)
-                first.Room.Name.Value = @"I Changed Name";
+        {
-            });
+            this.rulesets = rulesets;
-
-            AddStep(@"change host", () =>
-            {
-                first.Room.Host.Value = new User { Username = @"DrabWeb", Id = 6946022, Country = new Country { FlagName = @"CA" } };
-            });
-
-            AddStep(@"change beatmap", () =>
-            {
-                first.Room.Beatmap.Value = null;
-            });
-
-            AddStep(@"change state", () =>
-            {
-                first.Room.Status.Value = new RoomStatusOpen();
-            });
         }
     }
 }

osu.Game/Screens/Multiplayer/DrawableRoom.cs

@@ -1,14 +1,18 @@
 // Copyright (c) 2007-2017 ppy Pty Ltd <contact@ppy.sh>.
 // Licensed under the MIT Licence - https://raw.githubusercontent.com/ppy/osu/master/LICENCE
 
+using System.Linq;
 using OpenTK;
 using OpenTK.Graphics;
 using osu.Framework.Allocation;
+using osu.Framework.Configuration;
 using osu.Framework.Extensions.Color4Extensions;
 using osu.Framework.Graphics;
 using osu.Framework.Graphics.Containers;
 using osu.Framework.Graphics.Shapes;
+using osu.Framework.Graphics.Textures;
 using osu.Framework.Localisation;
+using osu.Game.Beatmaps.Drawables;
 using osu.Game.Database;
 using osu.Game.Graphics;
 using osu.Game.Graphics.Sprites;
@@ -19,22 +23,36 @@ namespace osu.Game.Screens.Multiplayer
 {
     public class DrawableRoom : ClickableContainer
     {
-        private const float content_padding = 5;
+        private const float transition_duration = 100;
-        private const float height = 90;
+        private const float content_padding = 10;
+        private const float height = 100;
+        private const float side_strip_width = 5;
+        private const float cover_width = 145;
+        private const float ruleset_height = 30;
 
         private readonly Box sideStrip;
-        private readonly UpdateableAvatar avatar;
+        private readonly Container coverContainer, rulesetContainer, gameTypeContainer;
         private readonly OsuSpriteText name;
         private readonly Container flagContainer;
         private readonly OsuSpriteText host;
-        private readonly OsuSpriteText rankBounds;
+        private readonly FillFlowContainer levelRangeContainer;
+        private readonly OsuSpriteText levelRangeLower;
+        private readonly OsuSpriteText levelRangeHigher;
         private readonly OsuSpriteText status;
         private readonly FillFlowContainer<OsuSpriteText> beatmapInfoFlow;
         private readonly OsuSpriteText beatmapTitle;
         private readonly OsuSpriteText beatmapDash;
         private readonly OsuSpriteText beatmapArtist;
 
+        private readonly Bindable<string> nameBind = new Bindable<string>();
+        private readonly Bindable<User> hostBind = new Bindable<User>();
+        private readonly Bindable<RoomStatus> statusBind = new Bindable<RoomStatus>();
+        private readonly Bindable<GameType> typeBind = new Bindable<GameType>();
+        private readonly Bindable<BeatmapInfo> beatmapBind = new Bindable<BeatmapInfo>();
+        private readonly Bindable<User[]> participantsBind = new Bindable<User[]>();
+
         private OsuColour colours;
+        private TextureStore textures;
         private LocalisationEngine localisation;
 
         public readonly Room Room;
@@ -59,24 +77,36 @@ namespace osu.Game.Screens.Multiplayer
                 new Box
                 {
                     RelativeSizeAxes = Axes.Both,
-                    Colour = OsuColour.Gray(34),
+                    Colour = OsuColour.FromHex(@"212121"),
                 },
                 sideStrip = new Box
                 {
                     RelativeSizeAxes = Axes.Y,
-                    Width = content_padding,
+                    Width = side_strip_width,
                 },
-                avatar = new UpdateableAvatar
+                new Container
                 {
-                    Size = new Vector2(Height - content_padding * 2),
+                    Width = cover_width,
+                    RelativeSizeAxes = Axes.Y,
                     Masking = true,
-                    CornerRadius = 5f,
+                    Margin = new MarginPadding { Left = side_strip_width },
-                    Margin = new MarginPadding { Left = content_padding * 2, Top = content_padding },
+                    Children = new Drawable[]
+                    {
+                        new Box
+                        {
+                            RelativeSizeAxes = Axes.Both,
+                            Colour = Color4.Black,
+                        },
+                        coverContainer = new Container
+                        {
+                            RelativeSizeAxes = Axes.Both,
+                        },
+                    },
                 },
                 new Container
                 {
                     RelativeSizeAxes = Axes.Both,
-                    Padding = new MarginPadding { Top = content_padding, Bottom = content_padding, Left = Height + content_padding * 2, Right = content_padding },
+                    Padding = new MarginPadding { Top = content_padding, Bottom = content_padding, Left = side_strip_width + cover_width + content_padding, Right = content_padding },
                     Children = new Drawable[]
                     {
                         new FillFlowContainer
@@ -100,20 +130,30 @@ namespace osu.Game.Screens.Multiplayer
                                         new FillFlowContainer
                                         {
                                             AutoSizeAxes = Axes.X,
-                                            RelativeSizeAxes = Axes.Y,
+                                            Height = 15f,
                                             Direction = FillDirection.Horizontal,
                                             Spacing = new Vector2(5f, 0f),
                                             Children = new Drawable[]
                                             {
                                                 flagContainer = new Container
                                                 {
-                                                    Width = 30f,
+                                                    Width = 22f,
                                                     RelativeSizeAxes = Axes.Y,
                                                 },
-                                                new Container
+                                                new Container //todo: team banners
                                                 {
-                                                    Width = 40f,
+                                                    Width = 38f,
                                                     RelativeSizeAxes = Axes.Y,
+                                                    CornerRadius = 2f,
+                                                    Masking = true,
+                                                    Children = new[]
+                                                    {
+                                                        new Box
+                                                        {
+                                                            RelativeSizeAxes = Axes.Both,
+                                                            Colour = OsuColour.FromHex(@"ad387e"),
+                                                        },
+                                                    },
                                                 },
                                                 new OsuSpriteText
                                                 {
@@ -131,13 +171,40 @@ namespace osu.Game.Screens.Multiplayer
                                                 },
                                             },
                                         },
-                                        rankBounds = new OsuSpriteText
+                                        levelRangeContainer = new FillFlowContainer
                                         {
                                             Anchor = Anchor.CentreRight,
                                             Origin = Anchor.CentreRight,
-                                            Text = "#0 - #0",
+                                            AutoSizeAxes = Axes.Both,
-                                            TextSize = 14,
+                                            Direction = FillDirection.Horizontal,
-                                            Margin = new MarginPadding { Right = 10 },
+                                            Children = new[]
+                                            {
+                                                new OsuSpriteText
+                                                {
+                                                    Text = "#",
+                                                    TextSize = 14,
+                                                },
+                                                levelRangeLower = new OsuSpriteText
+                                                {
+                                                    TextSize = 14,
+                                                    Font = @"Exo2.0-Bold",
+                                                },
+                                                new OsuSpriteText
+                                                {
+                                                    Text = " - ",
+                                                    TextSize = 14,
+                                                },
+                                                new OsuSpriteText
+                                                {
+                                                    Text = "#",
+                                                    TextSize = 14,
+                                                },
+                                                levelRangeHigher = new OsuSpriteText
+                                                {
+                                                    TextSize = 14,
+                                                    Font = @"Exo2.0-Bold",
+                                                },
+                                            },
                                         },
                                     },
                                 },
@@ -150,7 +217,6 @@ namespace osu.Game.Screens.Multiplayer
                             RelativeSizeAxes = Axes.X,
                             AutoSizeAxes = Axes.Y,
                             Direction = FillDirection.Vertical,
-                            Margin = new MarginPadding { Bottom = content_padding },
                             Children = new Drawable[]
                             {
                                 status = new OsuSpriteText
@@ -173,7 +239,7 @@ namespace osu.Game.Screens.Multiplayer
                                         beatmapDash = new OsuSpriteText
                                         {
                                             TextSize = 14,
-                                            Font = @"Exo2.0-RegularItalic",
+                                            Font = @"Exo2.0-BoldItalic",
                                         },
                                         beatmapArtist = new OsuSpriteText
                                         {
@@ -184,26 +250,64 @@ namespace osu.Game.Screens.Multiplayer
                                 },
                             },
                         },
+                        new FillFlowContainer
+                        {
+                            Anchor = Anchor.BottomRight,
+                            Origin = Anchor.BottomRight,
+                            Height = ruleset_height,
+                            Direction = FillDirection.Horizontal,
+                            LayoutDuration = transition_duration,
+                            Spacing = new Vector2(5f, 0f),
+                            Children = new[]
+                            {
+                                rulesetContainer = new Container
+                                {
+                                    Anchor = Anchor.TopRight,
+                                    Origin = Anchor.TopRight,
+                                    AutoSizeAxes = Axes.Both,
+                                },
+                                gameTypeContainer = new Container
+                                {
+                                    Anchor = Anchor.TopRight,
+                                    Origin = Anchor.TopRight,
+                                    AutoSizeAxes = Axes.Both,
+                                },
+                            },
+                        },
                     },
                 },
             };
 
-            Room.Name.ValueChanged += displayName;
+            nameBind.ValueChanged += displayName;
-            Room.Host.ValueChanged += displayUser;
+            hostBind.ValueChanged += displayUser;
-            Room.Status.ValueChanged += displayStatus;
+            participantsBind.ValueChanged += displayParticipants;
-            Room.Beatmap.ValueChanged += displayBeatmap;
+
+            nameBind.BindTo(Room.Name);
+            hostBind.BindTo(Room.Host);
+            statusBind.BindTo(Room.Status);
+            typeBind.BindTo(Room.Type);
+            beatmapBind.BindTo(Room.Beatmap);
+            participantsBind.BindTo(Room.Participants);
         }
 
         [BackgroundDependencyLoader]
-        private void load(OsuColour colours, LocalisationEngine localisation)
+        private void load(OsuColour colours, TextureStore textures, LocalisationEngine localisation)
         {
             this.localisation = localisation;
+            this.textures = textures;
             this.colours = colours;
 
-            beatmapInfoFlow.Colour = rankBounds.Colour = colours.Gray9;
+            beatmapInfoFlow.Colour = levelRangeContainer.Colour = colours.Gray9;
             host.Colour = colours.Blue;
 
-            displayStatus(Room.Status.Value);
+            //binded here instead of ctor because dependencies are needed
+            statusBind.ValueChanged += displayStatus;
+            typeBind.ValueChanged += displayGameType;
+            beatmapBind.ValueChanged += displayBeatmap;
+
+            statusBind.TriggerChange();
+            typeBind.TriggerChange();
+            beatmapBind.TriggerChange();
         }
 
         private void displayName(string value)
@@ -213,7 +317,6 @@ namespace osu.Game.Screens.Multiplayer
 
         private void displayUser(User value)
         {
-            avatar.User = value;
             host.Text = value.Username;
             flagContainer.Children = new[] { new DrawableFlag(value.Country?.FlagName ?? @"__") { RelativeSizeAxes = Axes.Both } };
         }
@@ -227,33 +330,64 @@ namespace osu.Game.Screens.Multiplayer
                 d.FadeColour(value.GetAppropriateColour(colours), 100);
         }
 
+        private void displayGameType(GameType value)
+        {
+            gameTypeContainer.Children = new[]
+            {
+                new DrawableGameType(value)
+                {
+                    Size = new Vector2(ruleset_height),
+                },
+            };
+        }
+
         private void displayBeatmap(BeatmapInfo value)
         {
             if (value != null)
             {
+                coverContainer.FadeIn(transition_duration);
+                coverContainer.Children = new[]
+                {
+                    new AsyncLoadWrapper(new BeatmapBackgroundSprite(new OnlineWorkingBeatmap(value, textures, null))
+                    {
+                        Anchor = Anchor.Centre,
+                        Origin = Anchor.Centre,
+                        FillMode = FillMode.Fill,
+                        OnLoadComplete = d => d.FadeInFromZero(400, EasingTypes.Out),
+                    }) { RelativeSizeAxes = Axes.Both }
+                };
+
+                rulesetContainer.FadeIn(transition_duration);
+                rulesetContainer.Children = new[]
+                {
+                    new DifficultyIcon(value)
+                    {
+                        Size = new Vector2(ruleset_height),
+                    }
+                };
+
                 beatmapTitle.Current = localisation.GetUnicodePreference(value.Metadata.TitleUnicode, value.Metadata.Title);
                 beatmapDash.Text = @" - ";
                 beatmapArtist.Current = localisation.GetUnicodePreference(value.Metadata.ArtistUnicode, value.Metadata.Artist);
             }
             else
             {
+                coverContainer.FadeOut(transition_duration);
+                rulesetContainer.FadeOut(transition_duration);
+
                 beatmapTitle.Current = null;
                 beatmapArtist.Current = null;
 
-                beatmapTitle.Text = @"Changing map";
+                beatmapTitle.Text = "Changing map";
-                beatmapDash.Text = string.Empty;
+                beatmapDash.Text = beatmapArtist.Text = string.Empty;
-                beatmapArtist.Text = string.Empty;
             }
         }
 
-        protected override void Dispose(bool isDisposing)
+        private void displayParticipants(User[] value)
         {
-            Room.Name.ValueChanged -= displayName;
+            var ranks = value.Select(u => u.GlobalRank);
-            Room.Host.ValueChanged -= displayUser;
+            levelRangeLower.Text = ranks.Min().ToString();
-            Room.Status.ValueChanged -= displayStatus;
+            levelRangeHigher.Text = ranks.Max().ToString();
-            Room.Beatmap.ValueChanged -= displayBeatmap;
-
-            base.Dispose(isDisposing);
         }
     }
 }

osu.Game/Screens/Multiplayer/RoomInspector.cs

@@ -331,7 +331,6 @@ namespace osu.Game.Screens.Multiplayer
                                         },
                                         levelRangeHigher = new OsuSpriteText
                                         {
-                                            Text = "6251",
                                             TextSize = 14,
                                             Font = @"Exo2.0-Bold",
                                         },