Implement NewsCard

osu.Game.Tests/Visual/Online/TestSceneNewsCard.cs

@@ -0,0 +1,52 @@
+// 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.Graphics.Containers;
+using osu.Framework.Graphics;
+using osu.Game.Overlays.News;
+using osu.Game.Online.API.Requests.Responses;
+using osu.Framework.Allocation;
+using osu.Game.Overlays;
+using osuTK;
+using System;
+
+namespace osu.Game.Tests.Visual.Online
+{
+    public class TestSceneNewsCard : OsuTestScene
+    {
+        [Cached]
+        private readonly OverlayColourProvider overlayColour = new OverlayColourProvider(OverlayColourScheme.Purple);
+
+        public TestSceneNewsCard()
+        {
+            Add(new FillFlowContainer<NewsCard>
+            {
+                Anchor = Anchor.Centre,
+                Origin = Anchor.Centre,
+                Direction = FillDirection.Vertical,
+                Width = 500,
+                AutoSizeAxes = Axes.Y,
+                Spacing = new Vector2(0, 20),
+                Children = new[]
+                {
+                    new NewsCard(new NewsPost
+                    {
+                        Title = "This post has an image which starts with \"/\" and has many authors!",
+                        Preview = "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
+                        Author = "someone, someone1, someone2, someone3, someone4",
+                        FirstImage = "/help/wiki/shared/news/banners/monthly-beatmapping-contest.png",
+                        PublishedAt = DateTime.Now
+                    }),
+                    new NewsCard(new NewsPost
+                    {
+                        Title = "This post has a full-url image!",
+                        Preview = "boom",
+                        Author = "user",
+                        FirstImage = "https://assets.ppy.sh/artists/88/header.jpg",
+                        PublishedAt = DateTime.Now
+                    })
+                }
+            });
+        }
+    }
+}

osu.Game/Online/API/Requests/Responses/NewsPost.cs

@@ -21,10 +21,10 @@ namespace osu.Game.Online.API.Requests.Responses
         public string FirstImage { get; set; }
 
         [JsonProperty(@"published_at")]
-        public DateTimeOffset PublishedAt { get; set; }
+        public DateTime PublishedAt { get; set; }
 
         [JsonProperty(@"updated_at")]
-        public DateTimeOffset UpdatedAt { get; set; }
+        public DateTime UpdatedAt { get; set; }
 
         [JsonProperty(@"slug")]
         public string Slug { get; set; }

osu.Game/Overlays/News/NewsCard.cs

@@ -0,0 +1,196 @@
+// 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;
+using osu.Framework.Allocation;
+using osu.Framework.Extensions.Color4Extensions;
+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.Events;
+using osu.Game.Graphics;
+using osu.Game.Graphics.Sprites;
+using osu.Game.Graphics.UserInterface;
+using osu.Game.Online.API.Requests.Responses;
+
+namespace osu.Game.Overlays.News
+{
+    public class NewsCard : CompositeDrawable
+    {
+        [Resolved]
+        private OverlayColourProvider colourProvider { get; set; }
+
+        private readonly NewsPost post;
+
+        private Box background;
+        private TextFlowContainer main;
+
+        public NewsCard(NewsPost post)
+        {
+            this.post = post;
+        }
+
+        [BackgroundDependencyLoader]
+        private void load()
+        {
+            RelativeSizeAxes = Axes.X;
+            AutoSizeAxes = Axes.Y;
+            Masking = true;
+            CornerRadius = 6;
+
+            NewsBackground bg;
+
+            InternalChildren = new Drawable[]
+            {
+                background = new Box
+                {
+                    RelativeSizeAxes = Axes.Both,
+                    Colour = colourProvider.Background4
+                },
+                new FillFlowContainer
+                {
+                    RelativeSizeAxes = Axes.X,
+                    AutoSizeAxes = Axes.Y,
+                    Direction = FillDirection.Vertical,
+                    Children = new Drawable[]
+                    {
+                        new Container
+                        {
+                            RelativeSizeAxes = Axes.X,
+                            Height = 160,
+                            Masking = true,
+                            CornerRadius = 6,
+                            Children = new Drawable[]
+                            {
+                                new DelayedLoadWrapper(bg = new NewsBackground(post.FirstImage)
+                                {
+                                    RelativeSizeAxes = Axes.Both,
+                                    FillMode = FillMode.Fill,
+                                    Anchor = Anchor.Centre,
+                                    Origin = Anchor.Centre,
+                                    Alpha = 0
+                                })
+                                {
+                                    RelativeSizeAxes = Axes.Both
+                                },
+                                new DateContainer(post.PublishedAt)
+                                {
+                                    Anchor = Anchor.TopRight,
+                                    Origin = Anchor.TopRight,
+                                    Margin = new MarginPadding
+                                    {
+                                        Top = 10,
+                                        Right = 15
+                                    }
+                                }
+                            }
+                        },
+                        new Container
+                        {
+                            RelativeSizeAxes = Axes.X,
+                            AutoSizeAxes = Axes.Y,
+                            Padding = new MarginPadding
+                            {
+                                Horizontal = 15,
+                                Vertical = 10
+                            },
+                            Child = main = new TextFlowContainer
+                            {
+                                RelativeSizeAxes = Axes.X,
+                                AutoSizeAxes = Axes.Y
+                            }
+                        }
+                    }
+                },
+                new HoverClickSounds()
+            };
+
+            bg.OnLoadComplete += d => d.FadeIn(250, Easing.In);
+
+            main.AddParagraph(post.Title, t => t.Font = OsuFont.GetFont(size: 20, weight: FontWeight.SemiBold));
+            main.AddParagraph(post.Preview, t => t.Font = OsuFont.GetFont(size: 12)); // Should use sans-serif font
+            main.AddParagraph("by ", t => t.Font = OsuFont.GetFont(size: 12));
+            main.AddText(post.Author, t => t.Font = OsuFont.GetFont(size: 12, weight: FontWeight.SemiBold));
+        }
+
+        protected override bool OnHover(HoverEvent e)
+        {
+            background.FadeColour(colourProvider.Background3, 200, Easing.OutQuint);
+            return true;
+        }
+
+        protected override void OnHoverLost(HoverLostEvent e)
+        {
+            background.FadeColour(colourProvider.Background4, 200, Easing.OutQuint);
+            base.OnHoverLost(e);
+        }
+
+        [LongRunningLoad]
+        private class NewsBackground : Sprite
+        {
+            private readonly string sourceUrl;
+
+            public NewsBackground(string sourceUrl)
+            {
+                this.sourceUrl = sourceUrl;
+            }
+
+            [BackgroundDependencyLoader]
+            private void load(LargeTextureStore store)
+            {
+                Texture = store.Get(createUrl(sourceUrl));
+            }
+
+            private string createUrl(string source)
+            {
+                if (string.IsNullOrEmpty(source))
+                    return "Headers/news";
+
+                if (source.StartsWith('/'))
+                    return "https://osu.ppy.sh" + source;
+
+                return source;
+            }
+        }
+
+        private class DateContainer : CircularContainer, IHasTooltip
+        {
+            public string TooltipText => date.ToString("d MMMM yyyy hh:mm:ss UTCz");
+
+            private readonly DateTime date;
+
+            public DateContainer(DateTime date)
+            {
+                this.date = date;
+            }
+
+            [BackgroundDependencyLoader]
+            private void load(OverlayColourProvider colourProvider)
+            {
+                AutoSizeAxes = Axes.Both;
+                Masking = true;
+                Children = new Drawable[]
+                {
+                    new Box
+                    {
+                        RelativeSizeAxes = Axes.Both,
+                        Colour = colourProvider.Background6.Opacity(0.5f)
+                    },
+                    new OsuSpriteText
+                    {
+                        Text = date.ToString("d MMM yyyy").ToUpper(),
+                        Font = OsuFont.GetFont(size: 12, weight: FontWeight.SemiBold),
+                        Margin = new MarginPadding
+                        {
+                            Horizontal = 20,
+                            Vertical = 5
+                        }
+                    }
+                };
+            }
+        }
+    }
+}