Skip to content

Minor design improvements to the extended result screen #37144

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
stanriders wants to merge 5 commits into
base: master
Choose a base branch
from
Open

Minor design improvements to the extended result screen #37144

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
a3b6c96
Minor design improvements to the result screen statistics
stanriders Mar 29, 2026
41acf6a
()
stanriders Mar 29, 2026
fe72402
Use font from style
peppy Mar 30, 2026
dac9993
Simplify pp breakdown design
stanriders Apr 2, 2026
9dee73d
Merge branch 'result-screen-minor-improvements' of https://github.com…
stanriders Apr 2, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion osu.Game/Screens/Ranking/ResultsScreen.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@ namespace osu.Game.Screens.Ranking
[Cached]
public abstract partial class ResultsScreen : ScreenWithBeatmapBackground, IKeyBindingHandler<GlobalAction>
{
protected const float BACKGROUND_BLUR = 20;
protected const float BACKGROUND_BLUR = 10;
private static readonly float screen_height = 768 - TwoLayerButton.SIZE_EXTENDED.Y;

public override bool DisallowExternalBeatmapRulesetChanges => true;
Expand Down
6 changes: 3 additions & 3 deletions osu.Game/Screens/Ranking/ScorePanel.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,7 @@ public partial class ScorePanel : CompositeDrawable, IStateful<PanelState>
/// <summary>
/// Height of the top layer when the panel is expanded.
/// </summary>
private const float expanded_top_layer_height = 53;
public const float EXPANDED_TOP_LAYER_HEIGHT = 53;

/// <summary>
/// Height of the top layer when the panel is contracted.
Expand Down Expand Up @@ -286,8 +286,8 @@ private void updateState()
switch (state)
{
case PanelState.Expanded:
topLayerContainer.MoveToY(-expanded_top_layer_height / 2, top_layer_expand_duration, Easing.OutQuint);
middleLayerContainer.MoveToY(expanded_top_layer_height / 2, top_layer_expand_duration, Easing.OutQuint);
topLayerContainer.MoveToY(-EXPANDED_TOP_LAYER_HEIGHT / 2, top_layer_expand_duration, Easing.OutQuint);
middleLayerContainer.MoveToY(EXPANDED_TOP_LAYER_HEIGHT / 2, top_layer_expand_duration, Easing.OutQuint);
break;

case PanelState.Contracted:
Expand Down
131 changes: 69 additions & 62 deletions osu.Game/Screens/Ranking/Statistics/PerformanceBreakdownChart.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,6 @@
using osu.Game.Graphics.UserInterface;
using osu.Game.Rulesets.Difficulty;
using osu.Game.Scoring;
using osuTK;
using osuTK.Graphics;

namespace osu.Game.Screens.Ranking.Statistics
Expand Down Expand Up @@ -54,86 +53,94 @@ private void load()
Origin = Anchor.Centre,
Anchor = Anchor.Centre
},
content = new FillFlowContainer
content = new GridContainer
{
Alpha = 0,
RelativeSizeAxes = Axes.X,
AutoSizeAxes = Axes.Y,
Width = 0.6f,
Origin = Anchor.TopCentre,
Anchor = Anchor.TopCentre,
Spacing = new Vector2(15, 15),
Children = new Drawable[]
RowDimensions = new[] { new Dimension(GridSizeMode.AutoSize) },
ColumnDimensions = new[]
{
new GridContainer
new Dimension(),
new Dimension(GridSizeMode.Absolute, 50),
new Dimension()
},
Content = new[]
{
new Drawable[]
{
RelativeSizeAxes = Axes.X,
Width = 0.8f,
AutoSizeAxes = Axes.Y,
Origin = Anchor.TopCentre,
Anchor = Anchor.TopCentre,
ColumnDimensions = new[]
{
new Dimension(),
new Dimension(GridSizeMode.AutoSize)
},
RowDimensions = new[]
chart = new GridContainer
{
new Dimension(GridSizeMode.AutoSize),
new Dimension(GridSizeMode.AutoSize)
RelativeSizeAxes = Axes.X,
AutoSizeAxes = Axes.Y,
Origin = Anchor.Centre,
Anchor = Anchor.Centre,
ColumnDimensions = new[]
{
new Dimension(GridSizeMode.AutoSize),
new Dimension(),
new Dimension(GridSizeMode.AutoSize)
}
},
Content = new[]
new SimpleStatisticTable.Spacer(),
new GridContainer
{
new Drawable[]
RelativeSizeAxes = Axes.X,
AutoSizeAxes = Axes.Y,
Origin = Anchor.Centre,
Anchor = Anchor.Centre,
ColumnDimensions = new[]
{
new OsuSpriteText
{
Origin = Anchor.CentreLeft,
Anchor = Anchor.CentreLeft,
Font = OsuFont.GetFont(weight: FontWeight.Regular, size: StatisticItem.FONT_SIZE),
Text = "Achieved PP",
Colour = Color4Extensions.FromHex("#66FFCC")
},
achievedPerformance = new OsuSpriteText
{
Origin = Anchor.CentreRight,
Anchor = Anchor.CentreRight,
Font = OsuFont.GetFont(weight: FontWeight.SemiBold, size: StatisticItem.FONT_SIZE),
Colour = Color4Extensions.FromHex("#66FFCC")
}
new Dimension(),
new Dimension(GridSizeMode.AutoSize)
},
RowDimensions = new[]
{
new Dimension(GridSizeMode.AutoSize),
new Dimension(GridSizeMode.AutoSize)
},
new Drawable[]
Content = new[]
{
new OsuSpriteText
new Drawable[]
{
Origin = Anchor.CentreLeft,
Anchor = Anchor.CentreLeft,
Font = OsuFont.GetFont(weight: FontWeight.Regular, size: StatisticItem.FONT_SIZE),
Text = "Maximum",
Colour = OsuColour.Gray(0.7f)
new OsuSpriteText
{
Origin = Anchor.CentreLeft,
Anchor = Anchor.CentreLeft,
Font = OsuFont.GetFont(weight: FontWeight.Regular, size: StatisticItem.FONT_SIZE),
Text = "Achieved PP",
Colour = Color4Extensions.FromHex("#66FFCC")
},
achievedPerformance = new OsuSpriteText
{
Origin = Anchor.CentreRight,
Anchor = Anchor.CentreRight,
Font = OsuFont.GetFont(weight: FontWeight.Regular, size: StatisticItem.FONT_SIZE),
Colour = Color4Extensions.FromHex("#66FFCC")
}
},
maximumPerformance = new OsuSpriteText
new Drawable[]
{
Origin = Anchor.CentreLeft,
Anchor = Anchor.CentreLeft,
Font = OsuFont.GetFont(weight: FontWeight.Regular, size: StatisticItem.FONT_SIZE),
Colour = OsuColour.Gray(0.7f)
new OsuSpriteText
{
Origin = Anchor.CentreLeft,
Anchor = Anchor.CentreLeft,
Font = OsuFont.GetFont(weight: FontWeight.Regular, size: StatisticItem.FONT_SIZE),
Text = "Maximum",
Colour = OsuColour.Gray(0.7f)
},
maximumPerformance = new OsuSpriteText
{
Origin = Anchor.CentreLeft,
Anchor = Anchor.CentreLeft,
Font = OsuFont.GetFont(weight: FontWeight.Regular, size: StatisticItem.FONT_SIZE),
Colour = OsuColour.Gray(0.7f)
}
}
}
}
},
chart = new GridContainer
{
RelativeSizeAxes = Axes.X,
AutoSizeAxes = Axes.Y,
Origin = Anchor.TopCentre,
Anchor = Anchor.TopCentre,
ColumnDimensions = new[]
{
new Dimension(GridSizeMode.AutoSize),
new Dimension(),
new Dimension(GridSizeMode.AutoSize)
}
},
}
}
}
Expand Down
10 changes: 5 additions & 5 deletions osu.Game/Screens/Ranking/Statistics/StatisticItemContainer.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
// 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.Extensions.Color4Extensions;
using osu.Framework.Graphics;
using osu.Framework.Graphics.Colour;
using osu.Framework.Graphics.Containers;
Expand Down Expand Up @@ -31,16 +32,15 @@ public StatisticItemContainer(StatisticItem item)
RelativeSizeAxes = Axes.X,
AutoSizeAxes = Axes.Y,
Masking = true,
CornerRadius = 6,
CornerRadius = 10,
Children = new Drawable[]
{
new Box
{
Colour = ColourInfo.GradientVertical(
OsuColour.Gray(0.25f),
OsuColour.Gray(0.18f)
OsuColour.Gray(0.25f).Opacity(0.8f),
OsuColour.Gray(0.18f).Opacity(0.95f)
),
Alpha = 0.95f,
RelativeSizeAxes = Axes.Both,
},
new Container
Expand All @@ -57,7 +57,7 @@ public StatisticItemContainer(StatisticItem item)
{
RelativeSizeAxes = Axes.X,
AutoSizeAxes = Axes.Y,
Padding = new MarginPadding(10) { Top = 30 },
Padding = new MarginPadding(20) { Top = 45 },
Child = item.CreateContent()
}
}
Expand Down
35 changes: 18 additions & 17 deletions osu.Game/Screens/Ranking/Statistics/StatisticItemHeader.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,6 @@
using osu.Framework.Localisation;
using osu.Game.Graphics;
using osu.Game.Graphics.Sprites;
using osuTK;

namespace osu.Game.Screens.Ranking.Statistics
{
Expand Down Expand Up @@ -38,28 +37,30 @@ private void load()
RelativeSizeAxes = Axes.X;
AutoSizeAxes = Axes.Y;

InternalChild = new FillFlowContainer
InternalChild = new Container
{
RelativeSizeAxes = Axes.X,
Height = 20,
Direction = FillDirection.Horizontal,
Spacing = new Vector2(5, 0),
AutoSizeAxes = Axes.Both,
Margin = new MarginPadding
{
Horizontal = 10,
Top = 5,
Bottom = 20,
},
Children = new Drawable[]
{
new Circle
{
Anchor = Anchor.CentreLeft,
Origin = Anchor.CentreLeft,
Height = 9,
Width = 4,
Colour = Color4Extensions.FromHex("#00FFAA")
},
spriteText = new OsuSpriteText
{
Anchor = Anchor.CentreLeft,
Origin = Anchor.CentreLeft,
Text = text,
Font = OsuFont.GetFont(size: StatisticItem.FONT_SIZE, weight: FontWeight.SemiBold),
Font = OsuFont.GetFont(size: 16, weight: FontWeight.Bold),
},
new Box
{
Anchor = Anchor.BottomCentre,
Origin = Anchor.TopCentre,
Margin = new MarginPadding { Top = 4 },
RelativeSizeAxes = Axes.X,
Height = 2,
Colour = Color4Extensions.FromHex("#66FFCC")
}
}
};
Expand Down
8 changes: 4 additions & 4 deletions osu.Game/Screens/Ranking/Statistics/StatisticsPanel.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -68,10 +68,10 @@ public StatisticsPanel()
RelativeSizeAxes = Axes.Both,
Padding = new MarginPadding
{
Left = ScorePanel.EXPANDED_WIDTH + SIDE_PADDING * 3,
Left = ScorePanel.EXPANDED_WIDTH + SIDE_PADDING * 2,
Right = SIDE_PADDING,
Top = SIDE_PADDING,
Bottom = 50 // Approximate padding to the bottom of the score panel.
Top = ScorePanel.EXPANDED_TOP_LAYER_HEIGHT,
Bottom = 15 // Approximate padding to the bottom of the score panel.
},
Children = new Drawable[]
{
Expand Down Expand Up @@ -156,7 +156,7 @@ private void populateStatistics(ValueChangedEvent<ScoreInfo?> score)
{
RelativeSizeAxes = Axes.X,
AutoSizeAxes = Axes.Y,
Spacing = new Vector2(30, 15),
Spacing = new Vector2(30, 10),
Direction = FillDirection.Full,
}
}
Expand Down
Loading