update top score design

osu.Game/Graphics/Containers/OsuHoverContainer.cs

@@ -1,12 +1,12 @@
 // 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 osuTK.Graphics;
 using osu.Framework.Allocation;
 using osu.Framework.Extensions.IEnumerableExtensions;
 using osu.Framework.Graphics;
 using osu.Framework.Input.Events;
+using osuTK.Graphics;
+using System.Collections.Generic;
 
 namespace osu.Game.Graphics.Containers
 {
@@ -16,17 +16,19 @@ namespace osu.Game.Graphics.Containers
 
         protected Color4 IdleColour = Color4.White;
 
+        protected const float FADE_DURATION = 500;
+
         protected virtual IEnumerable<Drawable> EffectTargets => new[] { Content };
 
         protected override bool OnHover(HoverEvent e)
         {
-            EffectTargets.ForEach(d => d.FadeColour(HoverColour, 500, Easing.OutQuint));
+            EffectTargets.ForEach(d => d.FadeColour(HoverColour, FADE_DURATION, Easing.OutQuint));
             return base.OnHover(e);
         }
 
         protected override void OnHoverLost(HoverLostEvent e)
         {
-            EffectTargets.ForEach(d => d.FadeColour(IdleColour, 500, Easing.OutQuint));
+            EffectTargets.ForEach(d => d.FadeColour(IdleColour, FADE_DURATION, Easing.OutQuint));
             base.OnHoverLost(e);
         }
 

osu.Game/Overlays/BeatmapSet/Scores/ClickableUsername.cs

@@ -3,16 +3,20 @@
 
 using osu.Framework.Allocation;
 using osu.Framework.Graphics;
+using osu.Framework.Graphics.Sprites;
 using osu.Framework.Input.Events;
 using osu.Game.Graphics.Containers;
 using osu.Game.Graphics.Sprites;
 using osu.Game.Users;
+using System.Collections.Generic;
 
 namespace osu.Game.Overlays.BeatmapSet.Scores
 {
     public class ClickableUsername : OsuHoverContainer
     {
-        private readonly OsuSpriteText text;
+        private readonly SpriteText text;
+        protected override IEnumerable<Drawable> EffectTargets => new[] { text };
+
         private UserProfileOverlay profile;
 
         private User user;
@@ -24,7 +28,7 @@ namespace osu.Game.Overlays.BeatmapSet.Scores
                 if (user == value) return;
                 user = value;
 
-                text.Text = user.Username;
+                OnUserUpdate(user);
             }
         }
 
@@ -41,12 +45,17 @@ namespace osu.Game.Overlays.BeatmapSet.Scores
         public ClickableUsername()
         {
             AutoSizeAxes = Axes.Both;
-            Child = text = new OsuSpriteText
+            Child = text = new SpriteText
             {
                 Font = @"Exo2.0-BoldItalic",
             };
         }
 
+        protected virtual void OnUserUpdate(User user)
+        {
+            text.Text = user.Username;
+        }
+
         [BackgroundDependencyLoader(true)]
         private void load(UserProfileOverlay profile)
         {

osu.Game/Overlays/BeatmapSet/Scores/DrawableScore.cs

@@ -1,7 +1,6 @@
 // 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 osuTK;
 using osu.Framework.Allocation;
 using osu.Framework.Graphics;
 using osu.Framework.Graphics.Containers;
@@ -16,6 +15,7 @@ using osu.Game.Rulesets.Mods;
 using osu.Game.Rulesets.Scoring;
 using osu.Game.Rulesets.UI;
 using osu.Game.Users;
+using osuTK;
 
 namespace osu.Game.Overlays.BeatmapSet.Scores
 {
@@ -56,13 +56,13 @@ namespace osu.Game.Overlays.BeatmapSet.Scores
                     Size = new Vector2(30, 20),
                     Margin = new MarginPadding { Left = 60 }
                 },
-                new ClickableUsername
+                //new ClickableUsername
-                {
+                //{
-                    Anchor = Anchor.CentreLeft,
+                //    Anchor = Anchor.CentreLeft,
-                    Origin = Anchor.CentreLeft,
+                //    Origin = Anchor.CentreLeft,
-                    User = score.User,
+                //    User = score.User,
-                    Margin = new MarginPadding { Left = 100 }
+                //    Margin = new MarginPadding { Left = 100 }
-                },
+                //},
                 modsContainer = new ScoreModsContainer
                 {
                     Anchor = Anchor.CentreLeft,

osu.Game/Overlays/BeatmapSet/Scores/DrawableTopScore.cs

@@ -1,13 +1,13 @@
 // 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 osuTK;
+using Humanizer;
-using osuTK.Graphics;
 using osu.Framework.Allocation;
 using osu.Framework.Extensions.Color4Extensions;
 using osu.Framework.Graphics;
 using osu.Framework.Graphics.Containers;
 using osu.Framework.Graphics.Shapes;
+using osu.Framework.Graphics.Sprites;
 using osu.Framework.Input.Events;
 using osu.Game.Graphics;
 using osu.Game.Graphics.Sprites;
@@ -19,29 +19,38 @@ using osu.Game.Rulesets.Scoring;
 using osu.Game.Rulesets.UI;
 using osu.Game.Scoring;
 using osu.Game.Users;
+using osuTK;
+using osuTK.Graphics;
+using System.Collections.Generic;
 
 namespace osu.Game.Overlays.BeatmapSet.Scores
 {
     public class DrawableTopScore : Container
     {
         private const float fade_duration = 100;
-        private const float height = 200;
+        private const float height = 100;
         private const float avatar_size = 80;
         private const float margin = 10;
 
         private readonly Box background;
-        private readonly Box bottomBackground;
-        private readonly Box middleLine;
         private readonly UpdateableAvatar avatar;
         private readonly DrawableFlag flag;
         private readonly ClickableUsername username;
-        private readonly OsuSpriteText rankText;
+        private readonly SpriteText rankText;
-        private readonly OsuSpriteText date;
+        private readonly SpriteText date;
         private readonly DrawableRank rank;
-        private readonly InfoColumn totalScore;
+
-        private readonly InfoColumn accuracy;
+        private readonly AutoSizeInfoColumn totalScore;
-        private readonly InfoColumn statistics;
+        private readonly MediumInfoColumn accuracy;
-        private readonly ScoreModsContainer modsContainer;
+        private readonly MediumInfoColumn maxCombo;
+
+        private readonly SmallInfoColumn hitGreat;
+        private readonly SmallInfoColumn hitGood;
+        private readonly SmallInfoColumn hitMeh;
+        private readonly SmallInfoColumn hitMiss;
+        private readonly SmallInfoColumn pp;
+
+        private readonly ModsInfoColumn modsInfo;
 
         private APIScoreInfo score;
         public APIScoreInfo Score
@@ -54,40 +63,90 @@ namespace osu.Game.Overlays.BeatmapSet.Scores
 
                 avatar.User = username.User = score.User;
                 flag.Country = score.User.Country;
-                date.Text = $@"achieved {score.Date:MMM d, yyyy}";
+                date.Text = $@"achieved {score.Date.Humanize()}";
                 rank.UpdateRank(score.Rank);
 
                 totalScore.Value = $@"{score.TotalScore:N0}";
                 accuracy.Value = $@"{score.Accuracy:P2}";
-                statistics.Value = $"{score.Statistics[HitResult.Great]}/{score.Statistics[HitResult.Good]}/{score.Statistics[HitResult.Meh]}";
+                maxCombo.Value = $@"{score.MaxCombo:N0}x";
 
-                modsContainer.Clear();
+                hitGreat.Value = $"{score.Statistics[HitResult.Great]}";
-                foreach (Mod mod in score.Mods)
+                hitGood.Value = $"{score.Statistics[HitResult.Good]}";
-                    modsContainer.Add(new ModIcon(mod)
+                hitMeh.Value = $"{score.Statistics[HitResult.Meh]}";
-                    {
+                hitMiss.Value = $"{score.Statistics[HitResult.Miss]}";
-                        AutoSizeAxes = Axes.Both,
+                pp.Value = $@"{score.PP:N0}";
-                        Scale = new Vector2(0.45f),
+
-                    });
+                modsInfo.ClearMods();
+                modsInfo.Mods = score.Mods;
             }
         }
 
         public DrawableTopScore()
         {
             RelativeSizeAxes = Axes.X;
-            Height = height;
+            AutoSizeAxes = Axes.Y;
-            CornerRadius = 5;
+            CornerRadius = 3;
-            BorderThickness = 4;
             Masking = true;
+            EdgeEffect = new EdgeEffectParameters
+            {
+                Type = EdgeEffectType.Shadow,
+                Colour = Color4.Black.Opacity(0.2f),
+                Radius = 1,
+                Offset = new Vector2(0, 1),
+            };
             Children = new Drawable[]
             {
                 background = new Box
                 {
                     RelativeSizeAxes = Axes.Both,
-                    Alpha = 0,
+                    Colour = Color4.White,
-                    AlwaysPresent = true, //used for correct border representation
+                },
+                new Container
+                {
+                    RelativeSizeAxes = Axes.X,
+                    AutoSizeAxes = Axes.Y,
+                    Padding = new MarginPadding(margin),
+                    Children = new Drawable[]
+                    {
+                        new FillFlowContainer
+                        {
+                            Anchor = Anchor.CentreLeft,
+                            Origin = Anchor.CentreLeft,
+                            AutoSizeAxes = Axes.Both,
+                            Direction = FillDirection.Horizontal,
+                            Spacing = new Vector2(margin, 0),
+                            Children = new Drawable[]
+                            {
+                                new FillFlowContainer
+                                {
+                                    Anchor = Anchor.Centre,
+                                    Origin = Anchor.Centre,
+                                    AutoSizeAxes = Axes.Both,
+                                    Direction = FillDirection.Vertical,
+                                    Spacing = new Vector2(0, 2),
+                                    Children = new Drawable[]
+                                    {
+                                        rankText = new SpriteText
+                                        {
+                                            Anchor = Anchor.CentreRight,
+                                            Origin = Anchor.CentreRight,
+                                            Text = "#1",
+                                            TextSize = 20,
+                                            Font = @"Exo2.0-BoldItalic",
+                                        },
+                                        rank = new DrawableRank(ScoreRank.F)
+                                        {
+                                            Anchor = Anchor.CentreRight,
+                                            Origin = Anchor.CentreRight,
+                                            Size = new Vector2(30),
+                                            FillMode = FillMode.Fit,
+                                        },
+                                    }
                                 },
                                 avatar = new UpdateableAvatar
                                 {
+                                    Anchor = Anchor.Centre,
+                                    Origin = Anchor.Centre,
                                     Size = new Vector2(avatar_size),
                                     Masking = true,
                                     CornerRadius = 5,
@@ -98,109 +157,202 @@ namespace osu.Game.Overlays.BeatmapSet.Scores
                                         Offset = new Vector2(0, 2),
                                         Radius = 1,
                                     },
-                    Margin = new MarginPadding { Top = margin, Left = margin }
+                                },
+                                new FillFlowContainer
+                                {
+                                    Anchor = Anchor.Centre,
+                                    Origin = Anchor.Centre,
+                                    AutoSizeAxes = Axes.Both,
+                                    Direction = FillDirection.Vertical,
+                                    Spacing = new Vector2(0, 3),
+                                    Children = new Drawable[]
+                                    {
+                                        username = new ClickableTopScoreUsername
+                                        {
+                                            Anchor = Anchor.CentreLeft,
+                                            Origin = Anchor.CentreLeft,
+                                            TextSize = 20,
+                                        },
+                                        date = new SpriteText
+                                        {
+                                            Anchor = Anchor.CentreLeft,
+                                            Origin = Anchor.CentreLeft,
+                                            TextSize = 10,
                                         },
                                         flag = new DrawableFlag
                                         {
-                    Size = new Vector2(30, 20),
+                                            Anchor = Anchor.CentreLeft,
-                    Position = new Vector2(margin * 2 + avatar_size, height / 4),
+                                            Origin = Anchor.CentreLeft,
+                                            Size = new Vector2(20, 13),
                                         },
-                username = new ClickableUsername
+                                    }
-                {
+                                }
-                    Origin = Anchor.BottomLeft,
+                            }
-                    TextSize = 30,
-                    Position = new Vector2(margin * 2 + avatar_size, height / 4),
-                    Margin = new MarginPadding { Bottom = 4 }
-                },
-                rankText = new OsuSpriteText
-                {
-                    Anchor = Anchor.TopRight,
-                    Origin = Anchor.BottomRight,
-                    Text = "#1",
-                    TextSize = 40,
-                    Font = @"Exo2.0-BoldItalic",
-                    Y = height / 4,
-                    Margin = new MarginPadding { Right = margin }
-                },
-                date = new OsuSpriteText
-                {
-                    Anchor = Anchor.TopRight,
-                    Origin = Anchor.TopRight,
-                    Y = height / 4,
-                    Margin = new MarginPadding { Right = margin }
                         },
                         new Container
                         {
-                    Anchor = Anchor.BottomCentre,
+                            Anchor = Anchor.CentreRight,
-                    Origin = Anchor.BottomCentre,
+                            Origin = Anchor.CentreRight,
-                    RelativeSizeAxes = Axes.Both,
+                            AutoSizeAxes = Axes.Both,
-                    Height = 0.5f,
+                            Child = new FillFlowContainer
+                            {
+                                AutoSizeAxes = Axes.Both,
+                                Direction = FillDirection.Horizontal,
+                                Spacing = new Vector2(margin, 0),
                                 Children = new Drawable[]
                                 {
-                        bottomBackground = new Box { RelativeSizeAxes = Axes.Both },
+                                    totalScore = new AutoSizeInfoColumn("Total Score"),
-                        middleLine = new Box
+                                    accuracy = new MediumInfoColumn("Accuracy"),
-                        {
+                                    maxCombo = new MediumInfoColumn("Max Combo"),
-                            RelativeSizeAxes = Axes.X,
+                                    hitGreat = new SmallInfoColumn("300", 20),
-                            Height = 1,
+                                    hitGood = new SmallInfoColumn("100", 20),
-                        },
+                                    hitMeh = new SmallInfoColumn("50", 20),
-                        rank = new DrawableRank(ScoreRank.F)
+                                    hitMiss = new SmallInfoColumn("miss", 20),
-                        {
+                                    pp = new SmallInfoColumn("pp", 20),
-                            Origin = Anchor.BottomLeft,
+                                    modsInfo = new ModsInfoColumn("mods"),
-                            Size = new Vector2(avatar_size, 40),
+                                }
-                            FillMode = FillMode.Fit,
+                            }
-                            Y = height / 4,
+                        }
-                            Margin = new MarginPadding { Left = margin }
-                        },
-                        new FillFlowContainer<InfoColumn>
-                        {
-                            Origin = Anchor.BottomLeft,
-                            AutoSizeAxes = Axes.Both,
-                            Position = new Vector2(height / 2, height / 4),
-                            Direction = FillDirection.Horizontal,
-                            Spacing = new Vector2(15, 0),
-                            Children = new[]
-                            {
-                                totalScore = new InfoColumn("Score"),
-                                accuracy = new InfoColumn("Accuracy"),
-                                statistics = new InfoColumn("300/100/50"),
-                            },
-                        },
-                        modsContainer = new ScoreModsContainer
-                        {
-                            AutoSizeAxes = Axes.Y,
-                            Width = 80,
-                            Position = new Vector2(height / 2, height / 4),
                     }
                 }
-                },
             };
         }
 
         [BackgroundDependencyLoader]
         private void load(OsuColour colours)
         {
-            background.Colour = bottomBackground.Colour = colours.Gray4;
+            date.Colour = rankText.Colour = colours.ContextMenuGray;
-            middleLine.Colour = colours.Gray2;
-            date.Colour = colours.Gray9;
-            BorderColour = rankText.Colour = colours.Yellow;
         }
 
         protected override bool OnHover(HoverEvent e)
         {
-            background.FadeIn(fade_duration, Easing.OutQuint);
+            background.FadeColour(Color4.WhiteSmoke, fade_duration, Easing.OutQuint);
             return base.OnHover(e);
         }
 
         protected override void OnHoverLost(HoverLostEvent e)
         {
-            background.FadeOut(fade_duration, Easing.OutQuint);
+            background.FadeColour(Color4.White, fade_duration, Easing.OutQuint);
             base.OnHoverLost(e);
         }
 
-        private class InfoColumn : FillFlowContainer
+        private class ClickableTopScoreUsername : ClickableUsername
         {
-            private readonly OsuSpriteText headerText;
+            private Box underscore;
-            private readonly OsuSpriteText valueText;
+
+            public ClickableTopScoreUsername()
+            {
+                Add(new Container
+                {
+                    Anchor = Anchor.Centre,
+                    Origin = Anchor.Centre,
+                    RelativeSizeAxes = Axes.X,
+                    Height = 1,
+                    Position = new Vector2(0, TextSize / 2 + 1.5f),
+                    Depth = 1,
+                    Child = underscore = new Box
+                    {
+                        RelativeSizeAxes = Axes.Both,
+                        Alpha = 0,
+                    }
+                });
+            }
+
+            [BackgroundDependencyLoader]
+            private void load(OsuColour colours)
+            {
+                IdleColour = colours.ContextMenuGray;
+                HoverColour = underscore.Colour = colours.Blue;
+            }
+
+            protected override bool OnHover(HoverEvent e)
+            {
+                underscore.FadeIn(FADE_DURATION, Easing.OutQuint);
+                return base.OnHover(e);
+            }
+
+            protected override void OnHoverLost(HoverLostEvent e)
+            {
+                underscore.FadeOut(FADE_DURATION, Easing.OutQuint);
+                base.OnHoverLost(e);
+            }
+        }
+
+        private class DrawableInfoColumn : FillFlowContainer
+        {
+            private readonly SpriteText headerText;
+            private const float header_text_size = 12;
+
+            public DrawableInfoColumn(string header)
+            {
+                AutoSizeAxes = Axes.Y;
+                Direction = FillDirection.Vertical;
+                Spacing = new Vector2(0, 2);
+                Children = new Drawable[]
+                {
+                    new Container
+                    {
+                        AutoSizeAxes = Axes.X,
+                        Height = header_text_size,
+                        Child = headerText = new SpriteText
+                        {
+                            TextSize = 12,
+                            Text = header.ToUpper(),
+                        }
+                    },
+                    new Container
+                    {
+                        RelativeSizeAxes = Axes.X,
+                        Height = 3,
+                        Child = new Box
+                        {
+                            RelativeSizeAxes = Axes.Both,
+                            Colour = Color4.LightGray,
+                        }
+                    }
+                };
+            }
+
+            [BackgroundDependencyLoader]
+            private void load(OsuColour colours)
+            {
+                headerText.Colour = colours.ContextMenuGray;
+            }
+        }
+
+        private class ModsInfoColumn : DrawableInfoColumn
+        {
+            private readonly FillFlowContainer modsContainer;
+
+            public IEnumerable<Mod> Mods
+            {
+                set
+                {
+                    foreach (Mod mod in value)
+                        modsContainer.Add(new ModIcon(mod)
+                        {
+                            AutoSizeAxes = Axes.Both,
+                            Scale = new Vector2(0.3f),
+                        });
+                }
+            }
+
+            public ModsInfoColumn(string header) : base(header)
+            {
+                AutoSizeAxes = Axes.Both;
+                Add(modsContainer = new FillFlowContainer
+                {
+                    AutoSizeAxes = Axes.Both,
+                    Direction = FillDirection.Horizontal,
+                });
+            }
+
+            public void ClearMods() => modsContainer.Clear();
+        }
+
+        private class TextInfoColumn : DrawableInfoColumn
+        {
+            private readonly SpriteText valueText;
 
             public string Value
             {
@@ -213,31 +365,47 @@ namespace osu.Game.Overlays.BeatmapSet.Scores
                 get { return valueText.Text; }
             }
 
-            public InfoColumn(string header)
+            public TextInfoColumn(string header, float valueTextSize = 25) : base(header)
             {
-                AutoSizeAxes = Axes.Both;
+                Add(valueText = new SpriteText
-                Direction = FillDirection.Vertical;
-                Spacing = new Vector2(0, 3);
-                Children = new Drawable[]
                 {
-                    headerText = new OsuSpriteText
+                    TextSize = valueTextSize,
-                    {
+                    Font = @"Exo2.0-Light",
-                        TextSize = 14,
+                });
-                        Text = header,
-                        Font = @"Exo2.0-Bold",
-                    },
-                    valueText = new OsuSpriteText
-                    {
-                        TextSize = 25,
-                        Font = @"Exo2.0-RegularItalic",
-                    }
-                };
             }
 
             [BackgroundDependencyLoader]
             private void load(OsuColour colours)
             {
-                headerText.Colour = colours.Gray9;
+                valueText.Colour = colours.ContextMenuGray;
+            }
+        }
+
+        private class AutoSizeInfoColumn : TextInfoColumn
+        {
+            public AutoSizeInfoColumn(string header, float valueTextSize = 25) : base(header, valueTextSize)
+            {
+                AutoSizeAxes = Axes.Both;
+            }
+        }
+
+        private class MediumInfoColumn : TextInfoColumn
+        {
+            private const float width = 70;
+
+            public MediumInfoColumn(string header, float valueTextSize = 25) : base(header, valueTextSize)
+            {
+                Width = width;
+            }
+        }
+
+        private class SmallInfoColumn : TextInfoColumn
+        {
+            private const float width = 40;
+
+            public SmallInfoColumn(string header, float valueTextSize = 25) : base(header, valueTextSize)
+            {
+                Width = width;
             }
         }
     }

osu.Game/Overlays/BeatmapSet/Scores/ScoresContainer.cs

@@ -12,6 +12,8 @@ using osu.Framework.Allocation;
 using osu.Game.Beatmaps;
 using osu.Game.Online.API;
 using osu.Game.Online.API.Requests.Responses;
+using osu.Framework.Graphics.Shapes;
+using osuTK.Graphics;
 
 namespace osu.Game.Overlays.BeatmapSet.Scores
 {
@@ -98,6 +100,11 @@ namespace osu.Game.Overlays.BeatmapSet.Scores
             AutoSizeAxes = Axes.Y;
             Children = new Drawable[]
             {
+                new Box
+                {
+                    RelativeSizeAxes = Axes.Both,
+                    Colour = Color4.White,
+                },
                 new FillFlowContainer
                 {
                     Anchor = Anchor.TopCentre,