From c35782ce9cb04f3480e5dc35d3dea8cb7355c2f5 Mon Sep 17 00:00:00 2001 From: Dan Balasescu Date: Fri, 24 Apr 2026 23:36:14 +0900 Subject: [PATCH] Improve visual appearance and animation of ranked play match history (#37501) master: https://github.com/user-attachments/assets/d96c7cf1-4f80-46f8-8c72-427aaf7f965d This PR: https://github.com/user-attachments/assets/d8c3467e-810d-4473-9078-0e858782cfa5 --------- Co-authored-by: Dean Herbert --- .../Matchmaking/Queue/RankedPlayMatchPanel.cs | 33 ++++++++++------ .../Matchmaking/Queue/ScreenQueue.cs | 38 +++++++++++++------ 2 files changed, 48 insertions(+), 23 deletions(-) diff --git a/osu.Game/Screens/OnlinePlay/Matchmaking/Queue/RankedPlayMatchPanel.cs b/osu.Game/Screens/OnlinePlay/Matchmaking/Queue/RankedPlayMatchPanel.cs index c8c21f0907..2550104688 100644 --- a/osu.Game/Screens/OnlinePlay/Matchmaking/Queue/RankedPlayMatchPanel.cs +++ b/osu.Game/Screens/OnlinePlay/Matchmaking/Queue/RankedPlayMatchPanel.cs @@ -26,7 +26,6 @@ using osuTK.Graphics; namespace osu.Game.Screens.OnlinePlay.Matchmaking.Queue { - [LongRunningLoad] public partial class RankedPlayMatchPanel : CompositeDrawable { [Resolved] @@ -58,7 +57,7 @@ namespace osu.Game.Screens.OnlinePlay.Matchmaking.Queue { Masking = true; CornerRadius = 10; - BorderThickness = 3; + BorderThickness = 2; BorderColour = colours.YellowDarker; (int UserId, RankedPlayUserInfo Info)[] users = state.Users.Select(kvp => (kvp.Key, kvp.Value)).ToArray(); @@ -66,6 +65,9 @@ namespace osu.Game.Screens.OnlinePlay.Matchmaking.Queue Task rightUser = userLookupCache.GetUserAsync(users[1].UserId); Task.WhenAll(leftUser, rightUser).WaitSafely(); + FillFlowContainer userLeft; + FillFlowContainer userRight; + InternalChildren = new Drawable[] { new Box @@ -144,7 +146,7 @@ namespace osu.Game.Screens.OnlinePlay.Matchmaking.Queue Text = "vs", Font = OsuFont.GetFont(size: 50, weight: FontWeight.Bold), UseFullGlyphHeight = false, - Colour = colourProvider.Foreground1, + Colour = colourProvider.Light3, }, new FillFlowContainer { @@ -153,11 +155,12 @@ namespace osu.Game.Screens.OnlinePlay.Matchmaking.Queue Direction = FillDirection.Vertical, Children = new Drawable[] { - new FillFlowContainer + userLeft = new FillFlowContainer { RelativeSizeAxes = Axes.X, AutoSizeAxes = Axes.Y, Direction = FillDirection.Horizontal, + Colour = Color4.White.Opacity(0.4f), Padding = new MarginPadding(5), Spacing = new Vector2(5), Children = new Drawable[] @@ -183,11 +186,12 @@ namespace osu.Game.Screens.OnlinePlay.Matchmaking.Queue }, } }, - new FillFlowContainer + userRight = new FillFlowContainer { RelativeSizeAxes = Axes.X, AutoSizeAxes = Axes.Y, Direction = FillDirection.Horizontal, + Colour = Color4.White.Opacity(0.4f), Padding = new MarginPadding(5), Spacing = new Vector2(5), Children = new Drawable[] @@ -261,7 +265,7 @@ namespace osu.Game.Screens.OnlinePlay.Matchmaking.Queue { Anchor = Anchor.Centre, Origin = Anchor.CentreRight, - X = -20, + X = -15, Colour = colourProvider.Foreground1, Text = users[0].Info.Life.ToString("N0"), UseFullGlyphHeight = false, @@ -270,7 +274,7 @@ namespace osu.Game.Screens.OnlinePlay.Matchmaking.Queue { Anchor = Anchor.Centre, Origin = Anchor.CentreLeft, - X = 20, + X = 15, Colour = colourProvider.Foreground1, Text = users[1].Info.Life.ToString("N0"), UseFullGlyphHeight = false, @@ -296,7 +300,7 @@ namespace osu.Game.Screens.OnlinePlay.Matchmaking.Queue { Anchor = Anchor.Centre, Origin = Anchor.CentreRight, - X = -20, + X = -15, Colour = colourProvider.Foreground1, Text = users[0].Info.RoundsWon.ToString(), UseFullGlyphHeight = false, @@ -305,7 +309,7 @@ namespace osu.Game.Screens.OnlinePlay.Matchmaking.Queue { Anchor = Anchor.Centre, Origin = Anchor.CentreLeft, - X = 20, + X = 15, Colour = colourProvider.Foreground1, Text = users[1].Info.RoundsWon.ToString(), UseFullGlyphHeight = false, @@ -323,6 +327,7 @@ namespace osu.Game.Screens.OnlinePlay.Matchmaking.Queue AutoSizeAxes = Axes.Both, Masking = true, CornerRadius = 10, + CornerExponent = 6, Padding = new MarginPadding { Left = 10, Bottom = 10 }, Margin = new MarginPadding { Left = -10, Bottom = -10 }, Children = new Drawable[] @@ -364,7 +369,7 @@ namespace osu.Game.Screens.OnlinePlay.Matchmaking.Queue leftResultLight.Colour = colours.Green; rightResultLight.Colour = colours.Red; - leftLifeText.Colour = Color4.White; + leftLifeText.Colour = userLeft.Colour = Color4.White; leftLifeText.Font = OsuFont.GetFont(weight: FontWeight.SemiBold); } else if (rightWin) @@ -372,11 +377,17 @@ namespace osu.Game.Screens.OnlinePlay.Matchmaking.Queue leftResultLight.Colour = colours.Red; rightResultLight.Colour = colours.Green; - rightLifeText.Colour = Color4.White; + rightLifeText.Colour = userRight.Colour = Color4.White; rightLifeText.Font = OsuFont.GetFont(weight: FontWeight.SemiBold); } } + protected override void LoadComplete() + { + base.LoadComplete(); + this.FadeInFromZero(750, Easing.OutQuint); + } + private partial class IconWithTooltip : SpriteIcon, IHasTooltip { public LocalisableString TooltipText { get; set; } diff --git a/osu.Game/Screens/OnlinePlay/Matchmaking/Queue/ScreenQueue.cs b/osu.Game/Screens/OnlinePlay/Matchmaking/Queue/ScreenQueue.cs index 827e5f7a92..305ce5eecc 100644 --- a/osu.Game/Screens/OnlinePlay/Matchmaking/Queue/ScreenQueue.cs +++ b/osu.Game/Screens/OnlinePlay/Matchmaking/Queue/ScreenQueue.cs @@ -370,25 +370,39 @@ namespace osu.Game.Screens.OnlinePlay.Matchmaking.Queue ratingGraph.SetData(status.RatingDistribution, userRating); - foreach (var state in status.RecentMatches.OfType()) - { - resultPanelContainer.Insert(-resultPanelContainer.Count, new DelayedLoadWrapper(new RankedPlayMatchPanel(state) - { - RelativeSizeAxes = Axes.X, - Width = 1 - }, 0) - { - RelativeSizeAxes = Axes.X, - Width = 0.48f - }); - } + loadRecentMatches(status.RecentMatches.OfType().ToArray()).FireAndForget(); }); + private async Task loadRecentMatches(RankedPlayRoomState[] matches) + { + await userLookupCache.GetUsersAsync(matches.SelectMany(m => m.Users.Keys).ToArray()).ConfigureAwait(false); + + Scheduler.Add(() => + { + foreach (var match in matches) + { + resultPanelContainer.Insert(-resultPanelContainer.Count, new RankedPlayMatchPanel(match) + { + RelativeSizeAxes = Axes.X, + Width = 0.48f + }); + } + + if (resultPanelContainer.Any(c => c.Position != Vector2.Zero)) + { + resultPanelContainer.LayoutDuration = 400; + resultPanelContainer.LayoutEasing = Easing.OutQuint; + } + }); + } + private void onSelectedPoolChanged(ValueChangedEvent e) { userRating = null; ratingGraph.SetData([], null); + resultPanelContainer.Clear(); + resultPanelContainer.LayoutDuration = 0; if (e.NewValue == null) {