Ranked Play: Make cards draggable and reorderable by minetoblend · Pull Request #37157 · ppy/osu

minetoblend · 2026-03-30T23:53:44Z

Adds the ability to drag and reorder cards. Card order is preserved between rounds and is synchronized between both players (each player can see the other player drag around and reorder their cards).

To make this possible I had to rewrite the card layout algorithm to be stateless (e0a46fe), there wasn't really a way around that since I needed a way to calculate a layout position based on a card's index. Should hopefully be a lot easier to read now though.

Some noteworthy stuff:

I didn't really know what the best place to store the card order is, so I put it on RankedPlayCardWithPlaylistItem since that one will stay the same instance per round.
To prevent the opponent's cards from dragged into the middle of the playfield, only the x axis of the drag gets synchronized for the OpponentHandOfCards with a fixed y value.
I adjusted the replay recorder/player parameters a little. With the drag events happening every frame the replay recorder record new frames every 25ms and end up dropping half the replay frames per flush interval, so I increased the sample interval to 50ms so the buffer size matches the sample rate exactly (50ms -> 20 samples per flush every 1000ms).
I also increased the buffer size in the replay player a bit so slight fluctuations in latency won't make it start to drop frames.

2026-03-31.01-19-27.mp4

2026-03-31.01-17-28.mp4

… leaves bounds

With a 25ms sample interval the replay recorder would frequently run out of buffer space and start dropping frames, so sample interval was increased to 50ms. Also buffed HandReplayPlayer.MaxQueuedFrames so the player won't immediately start dropping if a replay event arrives a bit too early during a drag.

osu.Game/Screens/OnlinePlay/Matchmaking/RankedPlay/Hand/HandOfCards.HandCard.cs

peppy · 2026-03-31T19:36:44Z

osu.Game/Screens/OnlinePlay/Matchmaking/RankedPlay/Hand/HandOfCards.HandCard.cs


-                Card.Elevation = float.Lerp(CardHovered ? 1 : 0, Card.Elevation, (float)Math.Exp(-0.03f * Time.Elapsed));
+                if (MovementSpeed > 0)
+                    Position = positionSpring.Update(Time.Elapsed * MovementSpeed, LayoutTarget.Position);


Man, this API structure matches nothing anywhere in our framework and i don't like it.

An update method returning a value? An interpolation not housed within the Interpolation class?

A value being provided to elapsed which is multiplied by some variable and no longer conveying elapsed time?

aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa i dunnnno

Spring Update method API
It's an update method because the spring is stateful (required because it needs to keep track of it's velocity).
Without tracking it's velocity you essentially just arrive at Interpolation.DampContinuously and lose all of the "springiness".

Time.Elapsed being multiplied
Multipliplying Time.Elapsed like that is basically equivalent to applying the same operation on spring.NaturalFrequency so I replaced it with that in 32fe4f3.

Elevation interpolation formula
Turns out the interpolation for the card elevation was mathematically equivalent to Interpolation.DampContinuously so I replaced it with that now (cc02c6c).
The previous formula is equivalent to a halftime of ln(2) / 0.03 so I rounded that to 25ms.
fwiw I originally picked up that formula from SSV1's beatmapset panel, and it's still being used in ScrollContainer.

It's an update method because the spring is stateful (required because it needs to keep track of it's velocity).

This is fine, but having a return value in a method called Update goes against all my expectations.

osu.Game/Screens/OnlinePlay/Matchmaking/RankedPlay/DiscardScreen.cs

peppy · 2026-03-31T19:40:17Z

osu.Game/Screens/OnlinePlay/Matchmaking/RankedPlay/OpponentPickScreen.cs

                new HandReplayPlayer(matchInfo.OpponentId, opponentHand),
            ];

+            cardAddSample = audio.Samples.Get(@"Multiplayer/Matchmaking/Ranked/card-add-1");


Did this come from somewhere else?

This comes from the PickScreen. Noticed this was missing when going through both screens and making sure the screen-enter implementation for matches on both classes. Should have pointed this out, mb

There's a lot of copy waste in this system, seeing the same thing changes in 4 places is fun. And finding things missed like this is double the fun.

osu.Game/Screens/OnlinePlay/Matchmaking/RankedPlay/Hand/HandOfCards.cs

peppy · 2026-03-31T19:43:11Z

osu.Game/Screens/OnlinePlay/Matchmaking/RankedPlay/Hand/HandOfCards.HandCard.cs

+                positionSpring.Current = positionSpring.PreviousTarget = Position;
+                scaleSpring.Current = scaleSpring.PreviousTarget = 1;
+                rotationSpring.Current = rotationSpring.PreviousTarget = Rotation;


this feels super weird. i think this spring class needs more thought.

The previous target value is required so springs can "react" to input changes (controlled via the Response parameter).
The card doesn't know it's starting position at construction time yet so the spring needs to be "reset" when that happens.
Perhaps adding a spring.Reset(value) method would be appropriate for this?
Alternatively just delaying creation of the springs until constructor time would be a possibility.

Yes, I'd have preferred a Reset method (PreviousTarget being exposed for writing feels very wrong).

Delaying creation is also fine.

peppy · 2026-03-31T19:44:04Z

osu.Game/Screens/OnlinePlay/Matchmaking/RankedPlay/Hand/HandOfCards.HandCard.cs

+                    ? new SpringParameters(2f, 0.4f, 1.2f)
+                    : new SpringParameters(3f, 0.75f, 0.8f);


what does this mean? inline comment would be good

Adjusted in 35be2a2.
Expanded the whole thing so names for all parameters being assigned are visible, and also added comments.
But TLDR:

when card dragged -> rotation should be slow but springy to simulate sway

when not dragged -> rotation should be snappy and have more damping, so it doesn't wobble around

To visualize the difference, this is what it would look like if the card always had the same parameters as during drag:

2026-04-01.00-25-39.mp4

peppy · 2026-03-31T19:46:39Z

osu.Game/Screens/OnlinePlay/Matchmaking/RankedPlay/Hand/OpponentHandOfCards.cs

+        protected override CardLayout CalculateDraggedCardLayout(Vector2 dragPosition)
+        {
+            float maxExtent = TotalLayoutWidth / 2;
+
+            float x = float.Clamp(dragPosition.X, -maxExtent, maxExtent);
+            float arcRotation = GetArcRotation(x);
+
+            return new CardLayout
+            {
+                Position = GetArcPosition(x) + GetCardUpwardsDirection(arcRotation) * 60,
+                Rotation = 0,
+                Scale = HOVER_SCALE,
+            };


None of this really makes sense to my weary eyes.

Needs much more commenting so I can discern why this is virtual-override and what anything means.

Added comment in 35be2a2.
The purpose is so the opponent player cannot just drag his cards all over the screen.

Also replaced GetCardUpwardsDirection with just new Vector2(0, -60) since it just changes the x value by maybe 3 pixels while making the whole thing harder to understand. The original purpose of that was so the y offset is calculated the same way as in non-drag mode, where it actually matters since the card is rotated.

TLDR: it's to prevent this:

2026-04-01.00-30-30.mp4

and instead do this:

2026-04-01.00-31-54.mp4

peppy · 2026-04-01T09:21:32Z

I'm blind merging this.

At this poitn the code is so foreign and weird that this isn't going to make it worse. Let's just see if we can get something together.

minetoblend added 18 commits March 31, 2026 00:47

Add basic drag movement to cards

29d06b1

Ensure player cards are always drawn on top of opponent cards

d45a927

Add drag information to card state

be9809b

Ensure dragged card is treated as hovered even when mouse temporarily…

b7dce0f

… leaves bounds

Refactor card hand layout to be stateless

e0a46fe

Update card order when card is dragged

3400540

Ensure cards are drawn in the correct order

9483696

Make sure sorting algorithm for card draw order is stable

1a039f4

Persist card order between rounds

4ed73e6

ensure player card hand gets drawn on top of discard button

62bf8de

Fix using Count() on IReadOnlyList

6c4a1d5

Make card sway while being dragged

289c7c9

Fix reading from different array than the one being iterated over

82b7a22

Fix silly mistake from past me

6477b78

Rename order to drawOrder

6a5e510

Fix card upwards direction calculated with rotation of 0

9a94604

Ignore key events while card is being dragged

01f3ba0

pull-request-size bot added the size/L label Mar 30, 2026

minetoblend added 2 commits March 31, 2026 19:42

Fix song preview border being visible when card first loads

891c4a1

Use springs for card movement

d65ab0e

pull-request-size bot added size/XL and removed size/L labels Mar 31, 2026

github-advanced-security bot found potential problems Mar 31, 2026

View reviewed changes

osu.Game/Screens/OnlinePlay/Matchmaking/RankedPlay/Hand/HandOfCards.HandCard.cs Fixed Show fixed Hide fixed

peppy self-requested a review March 31, 2026 19:33

code aweioqqqfi

40155fe

peppy reviewed Mar 31, 2026

View reviewed changes

Remove unnecessary log statement

3563a2b

minetoblend force-pushed the rp-draggable-cards branch from c380a73 to b379f91 Compare March 31, 2026 22:11

Add xmldocs and comments

3cb87dd

minetoblend added 3 commits April 1, 2026 00:33

Don't use when syntax

39016b1

Get rid of MovementSpeed variable

32fe4f3

Cleanup code for card movement on screen enter

1cb0275

minetoblend force-pushed the rp-draggable-cards branch from b379f91 to 1cb0275 Compare March 31, 2026 22:34

Use Interpolation.DampContinuously instead of manual exponential lerp.

cc02c6c

peppy approved these changes Apr 1, 2026

View reviewed changes

peppy merged commit c4a49f6 into ppy:master Apr 1, 2026
5 of 9 checks passed

		? new SpringParameters(2f, 0.4f, 1.2f)
		: new SpringParameters(3f, 0.75f, 0.8f);

Uh oh!

Conversation

minetoblend commented Mar 30, 2026

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

minetoblend Mar 31, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

minetoblend Mar 31, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

peppy commented Apr 1, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

minetoblend Mar 31, 2026 •

edited

Loading

minetoblend Mar 31, 2026 •

edited

Loading