Merge pull request #17449 from smoogipoo/countdown-button-ux

Improve multiplayer ready button/countdown button UX

osu.Game.Tests/Visual/Multiplayer/TestSceneMatchStartControl.cs

@@ -67,7 +67,7 @@ namespace osu.Game.Tests.Visual.Multiplayer
                 {
                     Anchor = Anchor.Centre,
                     Origin = Anchor.Centre,
-                    Size = new Vector2(200, 50),
+                    Size = new Vector2(250, 50),
                 }
             };
         });
@@ -85,7 +85,6 @@ namespace osu.Game.Tests.Visual.Multiplayer
                 InputManager.Click(MouseButton.Left);
             });
 
-            AddAssert("countdown button not visible", () => !this.ChildrenOfType<MultiplayerCountdownButton>().Single().IsPresent);
             AddStep("finish countdown", () => MultiplayerClient.SkipToEndOfCountdown());
             AddUntilStep("match started", () => MultiplayerClient.LocalUser?.State == MultiplayerUserState.WaitingForLoad);
         }
@@ -103,7 +102,13 @@ namespace osu.Game.Tests.Visual.Multiplayer
                 InputManager.Click(MouseButton.Left);
             });
 
-            ClickButtonWhenEnabled<MultiplayerReadyButton>();
+            ClickButtonWhenEnabled<MultiplayerCountdownButton>();
+            AddStep("click the cancel button", () =>
+            {
+                var popoverButton = this.ChildrenOfType<Popover>().Single().ChildrenOfType<OsuButton>().Last();
+                InputManager.MoveMouseTo(popoverButton);
+                InputManager.Click(MouseButton.Left);
+            });
 
             AddStep("finish countdown", () => MultiplayerClient.SkipToEndOfCountdown());
             AddUntilStep("match not started", () => MultiplayerClient.LocalUser?.State == MultiplayerUserState.Ready);
@@ -128,43 +133,21 @@ namespace osu.Game.Tests.Visual.Multiplayer
         }
 
         [Test]
-        public void TestCountdownButtonEnablementAndVisibilityWhileSpectating()
+        public void TestCountdownWhileSpectating()
         {
             AddStep("set spectating", () => MultiplayerClient.ChangeUserState(API.LocalUser.Value.OnlineID, MultiplayerUserState.Spectating));
             AddUntilStep("local user is spectating", () => MultiplayerClient.LocalUser?.State == MultiplayerUserState.Spectating);
 
             AddAssert("countdown button is visible", () => this.ChildrenOfType<MultiplayerCountdownButton>().Single().IsPresent);
-            AddAssert("countdown button disabled", () => !this.ChildrenOfType<MultiplayerCountdownButton>().Single().Enabled.Value);
+            AddAssert("countdown button enabled", () => this.ChildrenOfType<MultiplayerCountdownButton>().Single().Enabled.Value);
 
             AddStep("add second user", () => MultiplayerClient.AddUser(new APIUser { Id = 2, Username = "Another user" }));
-            AddAssert("countdown button disabled", () => !this.ChildrenOfType<MultiplayerCountdownButton>().Single().Enabled.Value);
+            AddAssert("countdown button enabled", () => this.ChildrenOfType<MultiplayerCountdownButton>().Single().Enabled.Value);
 
             AddStep("set second user ready", () => MultiplayerClient.ChangeUserState(2, MultiplayerUserState.Ready));
             AddAssert("countdown button enabled", () => this.ChildrenOfType<MultiplayerCountdownButton>().Single().Enabled.Value);
         }
 
-        [Test]
-        public void TestReadyButtonEnabledWhileSpectatingDuringCountdown()
-        {
-            AddStep("add second user", () => MultiplayerClient.AddUser(new APIUser { Id = 2, Username = "Another user" }));
-            AddStep("set second user ready", () => MultiplayerClient.ChangeUserState(2, MultiplayerUserState.Ready));
-
-            ClickButtonWhenEnabled<MultiplayerReadyButton>();
-            AddUntilStep("countdown button shown", () => this.ChildrenOfType<MultiplayerCountdownButton>().SingleOrDefault()?.IsPresent == true);
-            ClickButtonWhenEnabled<MultiplayerCountdownButton>();
-            AddStep("click the first countdown button", () =>
-            {
-                var popoverButton = this.ChildrenOfType<Popover>().Single().ChildrenOfType<OsuButton>().First();
-                InputManager.MoveMouseTo(popoverButton);
-                InputManager.Click(MouseButton.Left);
-            });
-
-            AddStep("set spectating", () => MultiplayerClient.ChangeUserState(API.LocalUser.Value.OnlineID, MultiplayerUserState.Spectating));
-            AddUntilStep("local user is spectating", () => MultiplayerClient.LocalUser?.State == MultiplayerUserState.Spectating);
-
-            AddAssert("ready button enabled", () => this.ChildrenOfType<MultiplayerReadyButton>().Single().Enabled.Value);
-        }
-
         [Test]
         public void TestBecomeHostDuringCountdownAndReady()
         {

osu.Game/Screens/OnlinePlay/Multiplayer/Match/MatchStartControl.cs

@@ -30,7 +30,7 @@ namespace osu.Game.Screens.OnlinePlay.Multiplayer.Match
         private Sample sampleReadyAll;
         private Sample sampleUnready;
 
-        private readonly BindableBool enabled = new BindableBool();
+        private readonly MultiplayerReadyButton readyButton;
         private readonly MultiplayerCountdownButton countdownButton;
         private int countReady;
         private ScheduledDelegate readySampleDelegate;
@@ -50,12 +50,11 @@ namespace osu.Game.Screens.OnlinePlay.Multiplayer.Match
                 {
                     new Drawable[]
                     {
-                        new MultiplayerReadyButton
+                        readyButton = new MultiplayerReadyButton
                         {
                             RelativeSizeAxes = Axes.Both,
                             Size = Vector2.One,
                             Action = onReadyClick,
-                            Enabled = { BindTarget = enabled },
                         },
                         countdownButton = new MultiplayerCountdownButton
                         {
@@ -63,7 +62,7 @@ namespace osu.Game.Screens.OnlinePlay.Multiplayer.Match
                             Size = new Vector2(40, 1),
                             Alpha = 0,
                             Action = startCountdown,
-                            Enabled = { BindTarget = enabled }
+                            CancelAction = cancelCountdown
                         }
                     }
                 }
@@ -108,30 +107,15 @@ namespace osu.Game.Screens.OnlinePlay.Multiplayer.Match
             Debug.Assert(clickOperation == null);
             clickOperation = ongoingOperationTracker.BeginOperation();
 
-            // Ensure the current user becomes ready before being able to do anything else (start match, stop countdown, unready).
+            if (isReady() && Client.IsHost && Room.Countdown == null)
-            if (!isReady() || !Client.IsHost || Room.Settings.AutoStartEnabled)
+                startMatch();
-            {
+            else
                 toggleReady();
-                return;
-            }
-
-            // Local user is the room host and is in a ready state.
-            // The only action they can take is to stop a countdown if one's currently running.
-            if (Room.Countdown != null)
-            {
-                stopCountdown();
-                return;
-            }
-
-            // And if a countdown isn't running, start the match.
-            startMatch();
 
             bool isReady() => Client.LocalUser?.State == MultiplayerUserState.Ready || Client.LocalUser?.State == MultiplayerUserState.Spectating;
 
             void toggleReady() => Client.ToggleReady().ContinueWith(_ => endOperation());
 
-            void stopCountdown() => Client.SendMatchRequest(new StopCountdownRequest()).ContinueWith(_ => endOperation());
-
             void startMatch() => Client.StartMatch().ContinueWith(t =>
             {
                 // accessing Exception here silences any potential errors from the antecedent task
@@ -153,6 +137,14 @@ namespace osu.Game.Screens.OnlinePlay.Multiplayer.Match
             Client.SendMatchRequest(new StartMatchCountdownRequest { Duration = duration }).ContinueWith(_ => endOperation());
         }
 
+        private void cancelCountdown()
+        {
+            Debug.Assert(clickOperation == null);
+            clickOperation = ongoingOperationTracker.BeginOperation();
+
+            Client.SendMatchRequest(new StopCountdownRequest()).ContinueWith(_ => endOperation());
+        }
+
         private void endOperation()
         {
             clickOperation?.Dispose();
@@ -163,7 +155,8 @@ namespace osu.Game.Screens.OnlinePlay.Multiplayer.Match
         {
             if (Room == null)
             {
-                enabled.Value = false;
+                readyButton.Enabled.Value = false;
+                countdownButton.Enabled.Value = false;
                 return;
             }
 
@@ -172,7 +165,7 @@ namespace osu.Game.Screens.OnlinePlay.Multiplayer.Match
             int newCountReady = Room.Users.Count(u => u.State == MultiplayerUserState.Ready);
             int newCountTotal = Room.Users.Count(u => u.State != MultiplayerUserState.Spectating);
 
-            if (!Client.IsHost || Room.Countdown != null || Room.Settings.AutoStartEnabled)
+            if (!Client.IsHost || Room.Settings.AutoStartEnabled)
                 countdownButton.Hide();
             else
             {
@@ -182,6 +175,7 @@ namespace osu.Game.Screens.OnlinePlay.Multiplayer.Match
                         countdownButton.Hide();
                         break;
 
+                    case MultiplayerUserState.Idle:
                     case MultiplayerUserState.Spectating:
                     case MultiplayerUserState.Ready:
                         countdownButton.Show();
@@ -189,15 +183,15 @@ namespace osu.Game.Screens.OnlinePlay.Multiplayer.Match
                 }
             }
 
-            enabled.Value =
+            readyButton.Enabled.Value = countdownButton.Enabled.Value =
                 Room.State == MultiplayerRoomState.Open
                 && CurrentPlaylistItem.Value?.ID == Room.Settings.PlaylistItemId
                 && !Room.Playlist.Single(i => i.ID == Room.Settings.PlaylistItemId).Expired
                 && !operationInProgress.Value;
 
-            // When the local user is the host and spectating the match, the "start match" state should be enabled if any users are ready.
+            // When the local user is the host and spectating the match, the ready button should be enabled only if any users are ready.
             if (localUser?.State == MultiplayerUserState.Spectating)
-                enabled.Value &= Client.IsHost && newCountReady > 0;
+                readyButton.Enabled.Value &= Client.IsHost && newCountReady > 0 && Room.Countdown == null;
 
             if (newCountReady == countReady)
                 return;

osu.Game/Screens/OnlinePlay/Multiplayer/Match/MultiplayerCountdownButton.cs

@@ -14,6 +14,7 @@ using osu.Framework.Graphics.UserInterface;
 using osu.Game.Graphics;
 using osu.Game.Graphics.UserInterface;
 using osu.Game.Graphics.UserInterfaceV2;
+using osu.Game.Online.Multiplayer;
 using osuTK;
 
 namespace osu.Game.Screens.OnlinePlay.Multiplayer.Match
@@ -30,6 +31,14 @@ namespace osu.Game.Screens.OnlinePlay.Multiplayer.Match
 
         public new Action<TimeSpan> Action;
 
+        public Action CancelAction;
+
+        [Resolved]
+        private MultiplayerClient multiplayerClient { get; set; }
+
+        [Resolved]
+        private OsuColour colours { get; set; }
+
         private readonly Drawable background;
 
         public MultiplayerCountdownButton()
@@ -53,6 +62,38 @@ namespace osu.Game.Screens.OnlinePlay.Multiplayer.Match
             background.Colour = colours.Green;
         }
 
+        protected override void LoadComplete()
+        {
+            base.LoadComplete();
+
+            multiplayerClient.RoomUpdated += onRoomUpdated;
+        }
+
+        protected override void Dispose(bool isDisposing)
+        {
+            base.Dispose(isDisposing);
+            multiplayerClient.RoomUpdated -= onRoomUpdated;
+        }
+
+        private void onRoomUpdated() => Scheduler.AddOnce(() =>
+        {
+            bool countdownActive = multiplayerClient.Room?.Countdown != null;
+
+            if (countdownActive)
+            {
+                background
+                    .FadeColour(colours.YellowLight, 100, Easing.In)
+                    .Then()
+                    .FadeColour(colours.YellowDark, 900, Easing.OutQuint)
+                    .Loop();
+            }
+            else
+            {
+                background
+                    .FadeColour(colours.Green, 200, Easing.OutQuint);
+            }
+        });
+
         public Popover GetPopover()
         {
             var flow = new FillFlowContainer
@@ -69,7 +110,7 @@ namespace osu.Game.Screens.OnlinePlay.Multiplayer.Match
                 {
                     RelativeSizeAxes = Axes.X,
                     Text = $"Start match in {duration.Humanize()}",
-                    BackgroundColour = background.Colour,
+                    BackgroundColour = colours.Green,
                     Action = () =>
                     {
                         Action(duration);
@@ -78,6 +119,21 @@ namespace osu.Game.Screens.OnlinePlay.Multiplayer.Match
                 });
             }
 
+            if (multiplayerClient.Room?.Countdown != null && multiplayerClient.IsHost)
+            {
+                flow.Add(new OsuButton
+                {
+                    RelativeSizeAxes = Axes.X,
+                    Text = "Stop countdown",
+                    BackgroundColour = colours.Red,
+                    Action = () =>
+                    {
+                        CancelAction();
+                        this.HidePopover();
+                    }
+                });
+            }
+
             return new OsuPopover { Child = flow };
         }
     }