add badges to ProfileHeader

osu.Game.Tests/Visual/TestCaseRankGraph.cs

@@ -1,7 +1,6 @@
 // Copyright (c) 2007-2018 ppy Pty Ltd <contact@ppy.sh>.
 // Licensed under the MIT Licence - https://raw.githubusercontent.com/ppy/osu/master/LICENCE
 
-using osu.Game.Overlays.Profile;
 using osu.Framework.Graphics;
 using osu.Framework.Graphics.Containers;
 using OpenTK;
@@ -11,6 +10,7 @@ using System.Collections.Generic;
 using System;
 using NUnit.Framework;
 using osu.Game.Graphics.UserInterface;
+using osu.Game.Overlays.Profile.Header;
 using osu.Game.Users;
 
 namespace osu.Game.Tests.Visual

osu.Game.Tests/Visual/TestCaseUserProfile.cs

@@ -8,6 +8,7 @@ using NUnit.Framework;
 using osu.Game.Graphics.UserInterface;
 using osu.Game.Overlays;
 using osu.Game.Overlays.Profile;
+using osu.Game.Overlays.Profile.Header;
 using osu.Game.Users;
 
 namespace osu.Game.Tests.Visual
@@ -23,6 +24,7 @@ namespace osu.Game.Tests.Visual
             typeof(UserProfileOverlay),
             typeof(RankGraph),
             typeof(LineGraph),
+            typeof(BadgeContainer)
         };
 
         public TestCaseUserProfile()
@@ -34,27 +36,24 @@ namespace osu.Game.Tests.Visual
         {
             base.LoadComplete();
 
-            AddStep("Show offline dummy", () => profile.ShowUser(new User
+            AddStep("Show offline dummy", () => profile.ShowUser(createDummyUser(new Badge[0]), false));
+
+            AddStep("Show with badge", () => profile.ShowUser(createDummyUser(new[]
             {
-                Username = @"Somebody",
+                new Badge
-                Id = 1,
-                Country = new Country { FullName = @"Alien" },
-                CoverUrl = @"https://osu.ppy.sh/images/headers/profile-covers/c1.jpg",
-                JoinDate = DateTimeOffset.Now.AddDays(-1),
-                LastVisit = DateTimeOffset.Now,
-                Age = 1,
-                ProfileOrder = new[] { "me" },
-                Statistics = new UserStatistics
                 {
-                    Ranks = new UserStatistics.UserRanks { Global = 2148, Country = 1 },
+                    AwardedAt = DateTimeOffset.FromUnixTimeSeconds(1505741569),
-                    PP = 4567.89m,
+                    Description = "Outstanding help by being a voluntary test subject.",
-                },
+                    ImageUrl = "https://assets.ppy.sh/profile-badges/contributor.jpg"
-                RankHistory = new User.RankHistoryData
-                {
-                    Mode = @"osu",
-                    Data = Enumerable.Range(2345, 45).Concat(Enumerable.Range(2109, 40)).ToArray()
                 }
-            }, false));
+            }), false));
+
+            AddStep("Show many badges", () => profile.ShowUser(createDummyUser(Enumerable.Range(0, 10).Select(i => new Badge
+            {
+                AwardedAt = DateTimeOffset.Now,
+                Description = i.ToString(),
+                ImageUrl = "Flags/__"
+            }).ToArray()), false));
 
             checkSupporterTag(false);
 
@@ -95,6 +94,32 @@ namespace osu.Game.Tests.Visual
                 AddAssert("no supporter", () => profile.Header.SupporterTag.Alpha == 0);
         }
 
+        private User createDummyUser(Badge[] badges)
+        {
+            return new User
+            {
+                Username = @"Somebody",
+                Id = 1,
+                Country = new Country { FullName = @"Alien" },
+                CoverUrl = @"https://osu.ppy.sh/images/headers/profile-covers/c1.jpg",
+                JoinDate = DateTimeOffset.Now.AddDays(-1),
+                LastVisit = DateTimeOffset.Now,
+                Age = 1,
+                ProfileOrder = new[] { "me" },
+                Statistics = new UserStatistics
+                {
+                    Ranks = new UserStatistics.UserRanks { Global = 2148, Country = 1 },
+                    PP = 4567.89m,
+                },
+                RankHistory = new User.RankHistoryData
+                {
+                    Mode = @"osu",
+                    Data = Enumerable.Range(2345, 45).Concat(Enumerable.Range(2109, 40)).ToArray()
+                },
+                Badges = badges
+            };
+        }
+
         private class TestUserProfileOverlay : UserProfileOverlay
         {
             public new ProfileHeader Header => base.Header;

osu.Game/Overlays/Profile/Header/BadgeContainer.cs

@@ -0,0 +1,190 @@
+// Copyright (c) 2007-2018 ppy Pty Ltd <contact@ppy.sh>.
+// Licensed under the MIT Licence - https://raw.githubusercontent.com/ppy/osu/master/LICENCE
+
+using System;
+using osu.Framework.Allocation;
+using osu.Framework.Graphics;
+using osu.Framework.Graphics.Containers;
+using osu.Framework.Graphics.Cursor;
+using osu.Framework.Graphics.Shapes;
+using osu.Framework.Graphics.Sprites;
+using osu.Framework.Graphics.Textures;
+using osu.Framework.Input;
+using osu.Game.Graphics;
+using osu.Game.Graphics.Sprites;
+using osu.Game.Users;
+using OpenTK;
+
+namespace osu.Game.Overlays.Profile.Header
+{
+    public class BadgeContainer : Container
+    {
+        private const float outer_container_width = 98;
+        private const float outer_container_padding = 3;
+        private static readonly Vector2 badge_size = new Vector2(outer_container_width - outer_container_padding * 2, 46);
+
+        private OsuSpriteText badgeCountText;
+        private FillFlowContainer badgeFlowContainer;
+        private FillFlowContainer outerBadgeContainer;
+
+        [BackgroundDependencyLoader]
+        private void load(OsuColour colours)
+        {
+            Child = new Container
+            {
+                Anchor = Anchor.BottomLeft,
+                Origin = Anchor.BottomLeft,
+                Masking = true,
+                CornerRadius = 4,
+                AutoSizeAxes = Axes.Both,
+                Children = new Drawable[]
+                {
+                    new Box
+                    {
+                        RelativeSizeAxes = Axes.Both,
+                        Colour = colours.Gray3
+                    },
+                    outerBadgeContainer = new OuterBadgeContainer(onOuterHover, onOuterHoverLost)
+                    {
+                        Anchor = Anchor.BottomLeft,
+                        Origin = Anchor.BottomLeft,
+                        Direction = FillDirection.Vertical,
+                        Padding = new MarginPadding(outer_container_padding),
+                        Width = outer_container_width,
+                        AutoSizeAxes = Axes.Y,
+                        Children = new Drawable[]
+                        {
+                            badgeCountText = new OsuSpriteText
+                            {
+                                Alpha = 0,
+                                TextSize = 12,
+                                Anchor = Anchor.BottomCentre,
+                                Origin = Anchor.BottomCentre,
+                                Font = "Exo2.0-Regular"
+                            },
+                            new Container
+                            {
+                                Anchor = Anchor.BottomLeft,
+                                Origin = Anchor.BottomLeft,
+                                AutoSizeAxes = Axes.Both,
+                                Child = badgeFlowContainer = new FillFlowContainer
+                                {
+                                    Direction = FillDirection.Horizontal,
+                                    AutoSizeAxes = Axes.Both,
+                                }
+                            }
+                        }
+                    },
+                }
+            };
+
+            Scheduler.AddDelayed(rotateBadges, 3000, true);
+        }
+
+        private void rotateBadges()
+        {
+            if (outerBadgeContainer.IsHovered) return;
+
+            visibleBadge = (visibleBadge + 1) % badgeCount;
+
+            badgeFlowContainer.MoveToX(-badge_size.X * visibleBadge, 500, Easing.InOutQuad);
+        }
+
+        private int visibleBadge;
+        private int badgeCount;
+
+        public void ShowBadges(Badge[] badges)
+        {
+            switch (badges.Length)
+            {
+                case 0:
+                    Hide();
+                    return;
+                case 1:
+                    badgeCountText.Hide();
+                    break;
+                default:
+                    badgeCountText.Show();
+                    badgeCountText.Text = $"{badges.Length} badges";
+                    break;
+            }
+
+            Show();
+            badgeCount = badges.Length;
+            visibleBadge = 0;
+
+            foreach (var badge in badges)
+            {
+                LoadComponentAsync(new DrawableBadge(badge)
+                {
+                    Size = badge_size,
+                }, badgeFlowContainer.Add);
+            }
+        }
+
+        private void onOuterHover()
+        {
+            badgeFlowContainer.ClearTransforms();
+            badgeFlowContainer.X = 0;
+            badgeFlowContainer.Direction = FillDirection.Full;
+            outerBadgeContainer.AutoSizeAxes = Axes.Both;
+
+            badgeFlowContainer.MaximumSize = new Vector2(ChildSize.X, float.MaxValue);
+        }
+
+        private void onOuterHoverLost()
+        {
+            rotateBadges();
+            badgeFlowContainer.Direction = FillDirection.Horizontal;
+            outerBadgeContainer.AutoSizeAxes = Axes.Y;
+            outerBadgeContainer.Width = outer_container_width;
+        }
+
+        private class OuterBadgeContainer : FillFlowContainer
+        {
+            private readonly Action hoverAction;
+            private readonly Action hoverLostAction;
+
+            public OuterBadgeContainer(Action hoverAction, Action hoverLostAction)
+            {
+                this.hoverAction = hoverAction;
+                this.hoverLostAction = hoverLostAction;
+            }
+
+            protected override bool OnHover(InputState state)
+            {
+                hoverAction();
+                return true;
+            }
+
+            protected override void OnHoverLost(InputState state) => hoverLostAction();
+        }
+
+        private class DrawableBadge : Container, IHasTooltip
+        {
+            private readonly Badge badge;
+
+            public DrawableBadge(Badge badge)
+            {
+                this.badge = badge;
+                Padding = new MarginPadding(3);
+            }
+
+            [BackgroundDependencyLoader]
+            private void load(TextureStore textures)
+            {
+                Child = new Sprite
+                {
+                    FillMode = FillMode.Fit,
+                    RelativeSizeAxes = Axes.Both,
+                    Texture = textures.Get(badge.ImageUrl),
+                    Anchor = Anchor.Centre,
+                    Origin = Anchor.Centre,
+                    OnLoadComplete = d => d.FadeInFromZero(200)
+                };
+            }
+
+            public string TooltipText => badge.Description;
+        }
+    }
+}

osu.Game/Overlays/Profile/Header/RankGraph.cs

@@ -2,9 +2,10 @@
 // Licensed under the MIT Licence - https://raw.githubusercontent.com/ppy/osu/master/LICENCE
 
 using System;
+using System.Collections.Generic;
 using System.Linq;
-using OpenTK;
 using osu.Framework.Allocation;
+using osu.Framework.Configuration;
 using osu.Framework.Graphics;
 using osu.Framework.Graphics.Containers;
 using osu.Framework.Graphics.Shapes;
@@ -14,10 +15,9 @@ using osu.Game.Graphics;
 using osu.Game.Graphics.Sprites;
 using osu.Game.Graphics.UserInterface;
 using osu.Game.Users;
-using System.Collections.Generic;
+using OpenTK;
-using osu.Framework.Configuration;
 
-namespace osu.Game.Overlays.Profile
+namespace osu.Game.Overlays.Profile.Header
 {
     public class RankGraph : Container
     {

osu.Game/Overlays/Profile/Header/SupporterIcon.cs

@@ -1,7 +1,6 @@
 // Copyright (c) 2007-2018 ppy Pty Ltd <contact@ppy.sh>.
 // Licensed under the MIT Licence - https://raw.githubusercontent.com/ppy/osu/master/LICENCE
 
-using OpenTK;
 using osu.Framework.Allocation;
 using osu.Framework.Graphics;
 using osu.Framework.Graphics.Containers;
@@ -9,8 +8,9 @@ using osu.Framework.Graphics.Cursor;
 using osu.Framework.Graphics.Shapes;
 using osu.Game.Graphics;
 using osu.Game.Graphics.Backgrounds;
+using OpenTK;
 
-namespace osu.Game.Overlays.Profile
+namespace osu.Game.Overlays.Profile.Header
 {
     public class SupporterIcon : CircularContainer, IHasTooltip
     {

osu.Game/Overlays/Profile/ProfileHeader.cs

@@ -17,6 +17,7 @@ using osu.Framework.Graphics.Textures;
 using osu.Game.Graphics;
 using osu.Game.Graphics.Containers;
 using osu.Game.Graphics.Sprites;
+using osu.Game.Overlays.Profile.Header;
 using osu.Game.Users;
 
 namespace osu.Game.Overlays.Profile
@@ -35,6 +36,7 @@ namespace osu.Game.Overlays.Profile
         private readonly GradeBadge gradeSSPlus, gradeSS, gradeSPlus, gradeS, gradeA;
         private readonly Box colourBar;
         private readonly DrawableFlag countryFlag;
+        private readonly BadgeContainer badgeContainer;
 
         private const float cover_height = 350;
         private const float info_height = 150;
@@ -42,6 +44,7 @@ namespace osu.Game.Overlays.Profile
         private const float avatar_size = 110;
         private const float level_position = 30;
         private const float level_height = 60;
+        private const float stats_width = 280;
 
         public ProfileHeader(User user)
         {
@@ -66,9 +69,9 @@ namespace osu.Game.Overlays.Profile
                         {
                             Anchor = Anchor.BottomLeft,
                             Origin = Anchor.BottomLeft,
-                            X = UserProfileOverlay.CONTENT_X_MARGIN,
+                            Padding = new MarginPadding { Left = UserProfileOverlay.CONTENT_X_MARGIN, Bottom = 20, Right = stats_width + UserProfileOverlay.CONTENT_X_MARGIN },
-                            Y = -20,
+                            AutoSizeAxes = Axes.Y,
-                            AutoSizeAxes = Axes.Both,
+                            RelativeSizeAxes = Axes.X,
                             Children = new Drawable[]
                             {
                                 new UpdateableAvatar
@@ -116,7 +119,14 @@ namespace osu.Game.Overlays.Profile
                                             Height = 20
                                         }
                                     }
-                                }
+                                },
+                                badgeContainer = new BadgeContainer
+                                {
+                                    RelativeSizeAxes = Axes.Both,
+                                    Origin = Anchor.BottomLeft,
+                                    Margin = new MarginPadding { Bottom = 5 },
+                                    Alpha = 0,
+                                },
                             }
                         },
                         colourBar = new Box
@@ -156,7 +166,7 @@ namespace osu.Game.Overlays.Profile
                 {
                     X = -UserProfileOverlay.CONTENT_X_MARGIN,
                     RelativeSizeAxes = Axes.Y,
-                    Width = 280,
+                    Width = stats_width,
                     Anchor = Anchor.TopRight,
                     Origin = Anchor.TopRight,
                     Children = new Drawable[]
@@ -417,6 +427,8 @@ namespace osu.Game.Overlays.Profile
 
                 rankGraph.User.Value = user;
             }
+
+            badgeContainer.ShowBadges(user.Badges);
         }
 
         private void tryAddInfoRightLine(FontAwesome icon, string str, string url = null)

osu.Game/Users/Badge.cs

@@ -0,0 +1,20 @@
+// Copyright (c) 2007-2018 ppy Pty Ltd <contact@ppy.sh>.
+// Licensed under the MIT Licence - https://raw.githubusercontent.com/ppy/osu/master/LICENCE
+
+using System;
+using Newtonsoft.Json;
+
+namespace osu.Game.Users
+{
+    public class Badge
+    {
+        [JsonProperty("awarded_at")]
+        public DateTimeOffset AwardedAt;
+
+        [JsonProperty("description")]
+        public string Description;
+
+        [JsonProperty("image_url")]
+        public string ImageUrl;
+    }
+}

osu.Game/Users/User.cs

@@ -137,6 +137,9 @@ namespace osu.Game.Users
         [JsonProperty(@"rankHistory")]
         public RankHistoryData RankHistory;
 
+        [JsonProperty("badges")]
+        public Badge[] Badges;
+
         public override string ToString() => Username;
     }
 }

osu.Game/Users/UserPanel.cs

@@ -17,7 +17,7 @@ using osu.Framework.Graphics.UserInterface;
 using osu.Game.Graphics.UserInterface;
 using osu.Framework.Graphics.Cursor;
 using osu.Game.Graphics.Containers;
-using osu.Game.Overlays.Profile;
+using osu.Game.Overlays.Profile.Header;
 
 namespace osu.Game.Users
 {