Implement basic card appearance

osu.Game.Tests/Visual/Beatmaps/TestSceneBeatmapCard.cs

@@ -4,11 +4,13 @@
 using System;
 using System.Collections.Generic;
 using System.Linq;
+using NUnit.Framework;
 using osu.Framework.Allocation;
 using osu.Framework.Graphics;
 using osu.Framework.Graphics.Containers;
 using osu.Framework.Graphics.Shapes;
 using osu.Game.Beatmaps;
+using osu.Game.Beatmaps.Drawables.Cards;
 using osu.Game.Online.API.Requests.Responses;
 using osu.Game.Overlays;
 using osu.Game.Users;
@@ -18,7 +20,7 @@ namespace osu.Game.Tests.Visual.Beatmaps
 {
     public class TestSceneBeatmapCard : OsuTestScene
     {
-        private IBeatmapSetInfo[] testCases;
+        private APIBeatmapSet[] testCases;
 
         #region Test case generation
 
@@ -30,7 +32,13 @@ namespace osu.Game.Tests.Visual.Beatmaps
             normal.HasStoryboard = true;
 
             var undownloadable = getUndownloadableBeatmapSet();
-            var manyDifficulties = getManyDifficultiesBeatmapSet();
+
+            var someDifficulties = getManyDifficultiesBeatmapSet(11);
+            someDifficulties.Title = someDifficulties.TitleUnicode = "some difficulties";
+            someDifficulties.Status = BeatmapSetOnlineStatus.Qualified;
+
+            var manyDifficulties = getManyDifficultiesBeatmapSet(100);
+            manyDifficulties.Status = BeatmapSetOnlineStatus.Pending;
 
             var explicitMap = CreateAPIBeatmapSet(Ruleset.Value);
             explicitMap.HasExplicitContent = true;
@@ -42,14 +50,22 @@ namespace osu.Game.Tests.Visual.Beatmaps
             explicitFeaturedMap.HasExplicitContent = true;
             explicitFeaturedMap.TrackId = 2;
 
-            testCases = new IBeatmapSetInfo[]
+            var longName = CreateAPIBeatmapSet(Ruleset.Value);
+            longName.Title = longName.TitleUnicode = "this track has an incredibly and implausibly long title";
+            longName.Artist = longName.ArtistUnicode = "and this artist! who would have thunk it. it's really such a long name.";
+            longName.HasExplicitContent = true;
+            longName.TrackId = 444;
+
+            testCases = new[]
             {
                 normal,
                 undownloadable,
+                someDifficulties,
                 manyDifficulties,
                 explicitMap,
                 featuredMap,
-                explicitFeaturedMap
+                explicitFeaturedMap,
+                longName
             };
         }
 
@@ -86,11 +102,11 @@ namespace osu.Game.Tests.Visual.Beatmaps
             }
         };
 
-        private static APIBeatmapSet getManyDifficultiesBeatmapSet()
+        private static APIBeatmapSet getManyDifficultiesBeatmapSet(int count)
         {
             var beatmaps = new List<APIBeatmap>();
 
-            for (int i = 0; i < 100; i++)
+            for (int i = 0; i < count; i++)
             {
                 beatmaps.Add(new APIBeatmap
                 {
@@ -118,7 +134,7 @@ namespace osu.Game.Tests.Visual.Beatmaps
 
         #endregion
 
-        private Drawable createContent(OverlayColourScheme colourScheme, Func<IBeatmapSetInfo, Drawable> creationFunc)
+        private Drawable createContent(OverlayColourScheme colourScheme, Func<APIBeatmapSet, Drawable> creationFunc)
         {
             var colourProvider = new OverlayColourProvider(colourScheme);
 
@@ -153,10 +169,13 @@ namespace osu.Game.Tests.Visual.Beatmaps
             };
         }
 
-        private void createTestCase(Func<IBeatmapSetInfo, Drawable> creationFunc)
+        private void createTestCase(Func<APIBeatmapSet, Drawable> creationFunc)
         {
             foreach (var scheme in Enum.GetValues(typeof(OverlayColourScheme)).Cast<OverlayColourScheme>())
                 AddStep($"set {scheme} scheme", () => Child = createContent(scheme, creationFunc));
         }
+
+        [Test]
+        public void TestNormal() => createTestCase(beatmapSetInfo => new BeatmapCard(beatmapSetInfo));
     }
 }

osu.Game/Beatmaps/Drawables/Cards/BeatmapCard.cs

@@ -0,0 +1,248 @@
+// Copyright (c) ppy Pty Ltd <contact@ppy.sh>. Licensed under the MIT Licence.
+// See the LICENCE file in the repository root for full licence text.
+
+using osu.Framework.Allocation;
+using osu.Framework.Extensions.Color4Extensions;
+using osu.Framework.Graphics;
+using osu.Framework.Graphics.Colour;
+using osu.Framework.Graphics.Containers;
+using osu.Framework.Graphics.Shapes;
+using osu.Framework.Graphics.Sprites;
+using osu.Framework.Localisation;
+using osu.Game.Graphics;
+using osu.Game.Graphics.Containers;
+using osu.Game.Graphics.Sprites;
+using osu.Game.Graphics.UserInterface;
+using osu.Game.Online.API.Requests.Responses;
+using osu.Game.Overlays;
+using osu.Game.Overlays.BeatmapSet;
+using osuTK;
+using osu.Game.Overlays.BeatmapListing.Panels;
+using osu.Game.Resources.Localisation.Web;
+
+namespace osu.Game.Beatmaps.Drawables.Cards
+{
+    public class BeatmapCard : OsuClickableContainer
+    {
+        private const float width = 408;
+        private const float height = 100;
+        private const float corner_radius = 10;
+
+        private readonly APIBeatmapSet beatmapSet;
+        private FillFlowContainer iconArea;
+        private GridContainer titleContainer;
+        private GridContainer artistContainer;
+
+        [Resolved]
+        private OverlayColourProvider colourProvider { get; set; }
+
+        public BeatmapCard(APIBeatmapSet beatmapSet)
+            : base(HoverSampleSet.Submit)
+        {
+            this.beatmapSet = beatmapSet;
+        }
+
+        [BackgroundDependencyLoader]
+        private void load()
+        {
+            Width = width;
+            Height = height;
+            CornerRadius = corner_radius;
+            Masking = true;
+
+            InternalChildren = new Drawable[]
+            {
+                new Box
+                {
+                    RelativeSizeAxes = Axes.Both,
+                    Colour = colourProvider.Background3
+                },
+                new Container
+                {
+                    Name = @"Left (icon) area",
+                    Size = new Vector2(height),
+                    Children = new Drawable[]
+                    {
+                        new UpdateableOnlineBeatmapSetCover(BeatmapSetCoverType.List)
+                        {
+                            RelativeSizeAxes = Axes.Both,
+                            OnlineInfo = beatmapSet
+                        },
+                        iconArea = new FillFlowContainer
+                        {
+                            Margin = new MarginPadding(5),
+                            AutoSizeAxes = Axes.Both,
+                            Direction = FillDirection.Horizontal,
+                            Spacing = new Vector2(1)
+                        }
+                    }
+                },
+                new Container
+                {
+                    Name = @"Main content",
+                    X = height - corner_radius,
+                    Width = width - height,
+                    Height = height,
+                    CornerRadius = corner_radius,
+                    Masking = true,
+                    Children = new Drawable[]
+                    {
+                        new UpdateableOnlineBeatmapSetCover
+                        {
+                            RelativeSizeAxes = Axes.Both,
+                            OnlineInfo = beatmapSet,
+                        },
+                        new Box
+                        {
+                            RelativeSizeAxes = Axes.Both,
+                            Colour = ColourInfo.GradientHorizontal(colourProvider.Background2, colourProvider.Background2.Opacity(0.8f)),
+                        },
+                        new FillFlowContainer
+                        {
+                            RelativeSizeAxes = Axes.Both,
+                            Padding = new MarginPadding
+                            {
+                                Horizontal = 10,
+                                Vertical = 4
+                            },
+                            Direction = FillDirection.Vertical,
+                            Children = new Drawable[]
+                            {
+                                titleContainer = new GridContainer
+                                {
+                                    RelativeSizeAxes = Axes.X,
+                                    AutoSizeAxes = Axes.Y,
+                                    ColumnDimensions = new[]
+                                    {
+                                        new Dimension(),
+                                        new Dimension(GridSizeMode.AutoSize)
+                                    },
+                                    RowDimensions = new[]
+                                    {
+                                        new Dimension(GridSizeMode.AutoSize)
+                                    },
+                                    Content = new[]
+                                    {
+                                        new[]
+                                        {
+                                            new OsuSpriteText
+                                            {
+                                                Text = new RomanisableString(beatmapSet.TitleUnicode, beatmapSet.Title),
+                                                Font = OsuFont.Default.With(size: 22.5f, weight: FontWeight.SemiBold),
+                                                RelativeSizeAxes = Axes.X,
+                                                Truncate = true
+                                            },
+                                            Empty()
+                                        }
+                                    }
+                                },
+                                artistContainer = new GridContainer
+                                {
+                                    RelativeSizeAxes = Axes.X,
+                                    AutoSizeAxes = Axes.Y,
+                                    ColumnDimensions = new[]
+                                    {
+                                        new Dimension(),
+                                        new Dimension(GridSizeMode.AutoSize)
+                                    },
+                                    RowDimensions = new[]
+                                    {
+                                        new Dimension(GridSizeMode.AutoSize)
+                                    },
+                                    Content = new[]
+                                    {
+                                        new[]
+                                        {
+                                            new OsuSpriteText
+                                            {
+                                                Text = createArtistText(),
+                                                Font = OsuFont.Default.With(size: 17.5f, weight: FontWeight.SemiBold),
+                                                RelativeSizeAxes = Axes.X,
+                                                Truncate = true
+                                            },
+                                            Empty()
+                                        },
+                                    }
+                                },
+                                new LinkFlowContainer(s =>
+                                {
+                                    s.Shadow = false;
+                                    s.Font = OsuFont.GetFont(size: 14, weight: FontWeight.SemiBold);
+                                }).With(d =>
+                                {
+                                    d.AutoSizeAxes = Axes.Both;
+                                    d.Margin = new MarginPadding { Top = 2 };
+                                    d.AddText("mapped by ", t => t.Colour = colourProvider.Content2);
+                                    d.AddUserLink(beatmapSet.Author);
+                                }),
+                            }
+                        },
+                        new FillFlowContainer
+                        {
+                            Name = @"Bottom content",
+                            RelativeSizeAxes = Axes.X,
+                            AutoSizeAxes = Axes.Y,
+                            Direction = FillDirection.Horizontal,
+                            Padding = new MarginPadding
+                            {
+                                Horizontal = 10,
+                                Vertical = 4
+                            },
+                            Spacing = new Vector2(4, 0),
+                            Anchor = Anchor.BottomLeft,
+                            Origin = Anchor.BottomLeft,
+                            Children = new Drawable[]
+                            {
+                                new BeatmapSetOnlineStatusPill
+                                {
+                                    AutoSizeAxes = Axes.Both,
+                                    Status = beatmapSet.Status,
+                                    Anchor = Anchor.CentreLeft,
+                                    Origin = Anchor.CentreLeft
+                                },
+                                new DifficultySpectrumDisplay(beatmapSet)
+                                {
+                                    Anchor = Anchor.CentreLeft,
+                                    Origin = Anchor.CentreLeft,
+                                    DotSize = new Vector2(6, 12)
+                                }
+                            }
+                        }
+                    }
+                }
+            };
+
+            if (beatmapSet.HasVideo)
+                iconArea.Add(new IconPill(FontAwesome.Solid.Film));
+
+            if (beatmapSet.HasStoryboard)
+                iconArea.Add(new IconPill(FontAwesome.Solid.Image));
+
+            if (beatmapSet.HasExplicitContent)
+            {
+                titleContainer.Content[0][1] = new ExplicitContentBeatmapPill
+                {
+                    Anchor = Anchor.BottomRight,
+                    Origin = Anchor.BottomRight,
+                    Margin = new MarginPadding { Left = 5 }
+                };
+            }
+
+            if (beatmapSet.TrackId != null)
+            {
+                artistContainer.Content[0][1] = new FeaturedArtistBeatmapPill
+                {
+                    Anchor = Anchor.BottomRight,
+                    Origin = Anchor.BottomRight,
+                    Margin = new MarginPadding { Left = 5 }
+                };
+            }
+        }
+
+        private LocalisableString createArtistText()
+        {
+            var romanisableArtist = new RomanisableString(beatmapSet.ArtistUnicode, beatmapSet.Artist);
+            return BeatmapsetsStrings.ShowDetailsByArtist(romanisableArtist);
+        }
+    }
+}