Merge pull request #2407 from jorolf/profile-badges

Add badges to ProfileHeader

osu.Game.Tests/Visual/TestCaseBadgeContainer.cs

@@ -0,0 +1,62 @@
+// 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 System.Collections.Generic;
+using System.Linq;
+using NUnit.Framework;
+using osu.Framework.Graphics;
+using osu.Game.Overlays.Profile.Header;
+using osu.Game.Users;
+
+namespace osu.Game.Tests.Visual
+{
+    [TestFixture]
+    public class TestCaseBadgeContainer : OsuTestCase
+    {
+        public override IReadOnlyList<Type> RequiredTypes => new[] { typeof(BadgeContainer) };
+
+        public TestCaseBadgeContainer()
+        {
+            BadgeContainer badgeContainer;
+
+            Child = badgeContainer = new BadgeContainer
+            {
+                RelativeSizeAxes = Axes.Both
+            };
+
+            AddStep("Show 1 badge", () => badgeContainer.ShowBadges(new[]
+            {
+                new Badge
+                {
+                    AwardedAt = DateTimeOffset.Now,
+                    Description = "Appreciates compasses",
+                    ImageUrl = "https://assets.ppy.sh/profile-badges/mg2018-1star.png",
+                }
+            }));
+
+            AddStep("Show 2 badges", () => badgeContainer.ShowBadges(new[]
+            {
+                new Badge
+                {
+                    AwardedAt = DateTimeOffset.Now,
+                    Description = "Contributed to osu!lazer testing",
+                    ImageUrl = "https://assets.ppy.sh/profile-badges/contributor.png",
+                },
+                new Badge
+                {
+                    AwardedAt = DateTimeOffset.Now,
+                    Description = "Appreciates compasses",
+                    ImageUrl = "https://assets.ppy.sh/profile-badges/mg2018-1star.png",
+                }
+            }));
+
+            AddStep("Show many badges", () => badgeContainer.ShowBadges(Enumerable.Range(1, 20).Select(i => new Badge
+            {
+                AwardedAt = DateTimeOffset.Now,
+                Description = $"Contributed to osu!lazer testing {i} times",
+                ImageUrl = "https://assets.ppy.sh/profile-badges/contributor.jpg",
+            }).ToArray()));
+        }
+    }
+}

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()
@@ -53,6 +55,15 @@ namespace osu.Game.Tests.Visual
                 {
                     Mode = @"osu",
                     Data = Enumerable.Range(2345, 45).Concat(Enumerable.Range(2109, 40)).ToArray()
+                },
+                Badges = new[]
+                {
+                    new Badge
+                    {
+                        AwardedAt = DateTimeOffset.FromUnixTimeSeconds(1505741569),
+                        Description = "Outstanding help by being a voluntary test subject.",
+                        ImageUrl = "https://assets.ppy.sh/profile-badges/contributor.jpg"
+                    }
                 }
             }, false));
 

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

@@ -0,0 +1,195 @@
+// 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 static readonly Vector2 badge_size = new Vector2(86, 40);
+        private static readonly MarginPadding outer_padding = new MarginPadding(3);
+
+        private OsuSpriteText badgeCountText;
+        private FillFlowContainer badgeFlowContainer;
+        private FillFlowContainer outerBadgeContainer;
+
+        [BackgroundDependencyLoader]
+        private void load(OsuColour colours)
+        {
+            Child = new Container
+            {
+                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 = outer_padding,
+                        Width = DrawableBadge.DRAWABLE_BADGE_SIZE.X + outer_padding.TotalHorizontal,
+                        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(-DrawableBadge.DRAWABLE_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;
+
+            badgeFlowContainer.Clear();
+            foreach (var badge in badges)
+            {
+                LoadComponentAsync(new DrawableBadge(badge)
+                {
+                    Anchor = Anchor.TopCentre,
+                    Origin = Anchor.TopCentre,
+                }, 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()
+        {
+            badgeFlowContainer.X = -DrawableBadge.DRAWABLE_BADGE_SIZE.X * visibleBadge;
+            badgeFlowContainer.Direction = FillDirection.Horizontal;
+            outerBadgeContainer.AutoSizeAxes = Axes.Y;
+            outerBadgeContainer.Width = DrawableBadge.DRAWABLE_BADGE_SIZE.X + outer_padding.TotalHorizontal;
+        }
+
+        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
+        {
+            public static readonly Vector2 DRAWABLE_BADGE_SIZE = badge_size + outer_padding.Total;
+
+            private readonly Badge badge;
+
+            public DrawableBadge(Badge badge)
+            {
+                this.badge = badge;
+                Padding = outer_padding;
+                Size = DRAWABLE_BADGE_SIZE;
+            }
+
+            [BackgroundDependencyLoader]
+            private void load(TextureStore textures)
+            {
+                Child = new Sprite
+                {
+                    FillMode = FillMode.Fit,
+                    RelativeSizeAxes = Axes.Both,
+                    Texture = textures.Get(badge.ImageUrl),
+                };
+            }
+
+            protected override void LoadComplete()
+            {
+                base.LoadComplete();
+                Child.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,15 @@ namespace osu.Game.Overlays.Profile
                                             Height = 20
                                         }
                                     }
-                                }
+                                },
+                                badgeContainer = new BadgeContainer
+                                {
+                                    RelativeSizeAxes = Axes.X,
+                                    AutoSizeAxes = Axes.Y,
+                                    Origin = Anchor.BottomLeft,
+                                    Margin = new MarginPadding { Bottom = 5 },
+                                    Alpha = 0,
+                                },
                             }
                         },
                         colourBar = new Box
@@ -156,7 +167,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 +428,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
 {