Skip to content

Extract score and statistics components from BeatmapLeaderboardScore#37056

Closed
LiquidPL wants to merge 2 commits intoppy:masterfrom
LiquidPL:leaderboard-score-component
Closed

Extract score and statistics components from BeatmapLeaderboardScore#37056
LiquidPL wants to merge 2 commits intoppy:masterfrom
LiquidPL:leaderboard-score-component

Conversation

@LiquidPL
Copy link
Copy Markdown
Contributor

@LiquidPL LiquidPL commented Mar 21, 2026

To be (re)used on the playlists leaderboard score component.

The current playlists score shows three statistics (acc, playcount, completed maps), which is an amount that wouldn't fit on the non-full display mode, especially when the statistics are stacked on top of each other.

To avoid this, I've used the space normally used for mods on the beatmap score for one of the statistics. With that in mind, this commit also includes some minor changes to the statistic componennt to allow the label and value to be laid out horizontally.

BeatmapLeaderboardScore is unchanged:

image

Here's how the LeaderboardScoreDisplay looks with a statistic under the score:

image

And here's the same component haphazardly inserted into BeatmapLeaderboardScore since I don't have the playlists component ready yet:

image

The final one will probably need the padding between the score section and the stats section to be larger, but that's a thing for later.

To be (re)used on the playlists leaderboard score component.

The current playlists score shows three statistics (acc, playcount, completed maps), which is an amount that wouldn't fit on the non-full display mode where the statistics are stacked on top of each other.

To avoid this, I've used the space normally used for mods on the beatmap score for one of the statistics. With that in mind, this commit also includes some minor changes to the statistic componennt to allow the label and value to be laid out horizontally.
Copy link
Copy Markdown
Collaborator

@bdach bdach left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Part of me wonders whether this isn't premature / overeager code sharing and whether it wouldn't be better to start with a full 100% copy pasta approach to begin with. Especially so that the end result of the refactor is not yet in sight even as a proof of concept. That said at least this is appearing to go the composition route rather than conjuring abstract entities so I'm more partial to just nod along.

That said, visually, something's off with the horizontal variant of the statistic display. The baselines are all out of alignment.

Image

UseFullGlyphHeight = false kinda works but I'm not sure that's a reliable fix because it will stop working as soon as the label uses any characters which go below glyph baseline.

Comment on lines +85 to +86
// We don't want the value setting the horizontal size, since it leads to wonky accuracy container length,
// since the accuracy is sometimes longer than its name.
Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
// We don't want the value setting the horizontal size, since it leads to wonky accuracy container length,
// since the accuracy is sometimes longer than its name.
// We don't want the value setting the horizontal size, since it leads to wonky overall length,
// since the value is sometimes longer than its label.

@LiquidPL
Copy link
Copy Markdown
Contributor Author

The baselines are all out of alignment.

Well this is frustrating. The drawables themselves are both bottom aligned, so I guess this is because of some rendering issues in OsuSpriteText. Do I have any other ways of aligning those properly without resorting to UseFullGlyphHeight or straight up using a text flow container?

Although I don't think we'd have issues with stuff going below the baseline if the label is always upper cased.

@LiquidPL
Copy link
Copy Markdown
Contributor Author

LiquidPL commented Mar 23, 2026

Especially so that the end result of the refactor is not yet in sight even as a proof of concept.

I've been working on one last night, alongside another work-in-progress PR that's supposed to extract the profile picture, user, and date into another component.

image

(don't mind the score text not being right, haven't plugged in that properly yet)

@bdach
Copy link
Copy Markdown
Collaborator

bdach commented Mar 23, 2026

Do I have any other ways of aligning those properly without resorting to UseFullGlyphHeight or straight up using a text flow container?

Other than throwing arbitrary paddings at it probably not.

Although I don't think we'd have issues with stuff going below the baseline if the label is always upper cased.

Wouldn't be sure about that, think localisation. Languages like Vietnamese are especially egregious with this with the amount of accent marks, but something like French could break just as well (Ç)

@bdach
Copy link
Copy Markdown
Collaborator

bdach commented Mar 23, 2026

image (don't mind the score text not being right, haven't plugged in that properly yet)

Also I gotta say I'm not super sold on this. The "completed beatmaps" text being under the score doesn't look super great to me. I'd rather see it next to the other stats. That said that is a @peppy call ultimately.

@peppy
Copy link
Copy Markdown
Member

peppy commented Mar 23, 2026

Completed beatmap looks weird (the number isn't the right size for the heading). Can agree with @bdach. Maybe change "plays" to "attempts" and "completed beatmaps" to "completed", or similarly short terms.

@LiquidPL
Copy link
Copy Markdown
Contributor Author

image

What I'm the most worried about here is that we're not going to fit three statistics in a single row when stacked vertically in the more narrow configurations. I tried placing one of the stats separately from the two stacked ones and it just feels awkward (though it might just be me):

image

@LiquidPL
Copy link
Copy Markdown
Contributor Author

Either way I'll reduce this PR to extracting just the statistic component I think.

@bdach
Copy link
Copy Markdown
Collaborator

bdach commented Mar 23, 2026

Could just completely switch directions into something like this?

Untitled 32

LiquidPL added a commit to LiquidPL/osu that referenced this pull request Mar 23, 2026
This is done to avoid any baseline alignment issues that occur when the
name/label are laid out horizontally, as mentioned in
ppy#37056.

Also extracts it to a separate component, to be reused on the playlists
leaderboard.

Supersedes ppy#37056.
@LiquidPL
Copy link
Copy Markdown
Contributor Author

Superseded by #37069.

@LiquidPL LiquidPL closed this Mar 23, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants