Apply various visual and usability improvements to tournament ladder editor

osu.Game.Tournament.Tests/Components/TestSceneDrawableTournamentMatch.cs

@@ -1,69 +1,79 @@
 // 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 System.Linq;
+using NUnit.Framework;
 using osu.Framework.Graphics;
 using osu.Framework.Graphics.Containers;
+using osu.Framework.Testing;
 using osu.Game.Tournament.Models;
 using osu.Game.Tournament.Screens.Ladder.Components;
 
 namespace osu.Game.Tournament.Tests.Components
 {
     public partial class TestSceneDrawableTournamentMatch : TournamentTestScene
     {
-        public TestSceneDrawableTournamentMatch()
+        [Test]
+        public void TestBasic()
         {
-            Container<DrawableTournamentMatch> level1;
-            Container<DrawableTournamentMatch> level2;
+            Container<DrawableTournamentMatch> level1 = null!;
+            Container<DrawableTournamentMatch> level2 = null!;
 
-            var match1 = new TournamentMatch(
-                new TournamentTeam { FlagName = { Value = "AU" }, FullName = { Value = "Australia" }, },
-                new TournamentTeam { FlagName = { Value = "JP" }, FullName = { Value = "Japan" }, Acronym = { Value = "JPN" } })
-            {
-                Team1Score = { Value = 4 },
-                Team2Score = { Value = 1 },
-            };
+            TournamentMatch match1 = null!;
+            TournamentMatch match2 = null!;
 
-            var match2 = new TournamentMatch(
-                new TournamentTeam
+            AddStep("setup test", () =>
+            {
+                match1 = new TournamentMatch(
+                    new TournamentTeam { FlagName = { Value = "AU" }, FullName = { Value = "Australia" }, },
+                    new TournamentTeam { FlagName = { Value = "JP" }, FullName = { Value = "Japan" }, Acronym = { Value = "JPN" } })
                 {
-                    FlagName = { Value = "RO" },
-                    FullName = { Value = "Romania" },
-                }
-            );
+                    Team1Score = { Value = 4 },
+                    Team2Score = { Value = 1 },
+                };
 
-            Child = new FillFlowContainer
-            {
-                RelativeSizeAxes = Axes.Both,
-                Direction = FillDirection.Horizontal,
-                Children = new Drawable[]
+                match2 = new TournamentMatch(
+                    new TournamentTeam
+                    {
+                        FlagName = { Value = "RO" },
+                        FullName = { Value = "Romania" },
+                    }
+                );
+
+                Child = new FillFlowContainer
                 {
-                    level1 = new FillFlowContainer<DrawableTournamentMatch>
+                    RelativeSizeAxes = Axes.Both,
+                    Direction = FillDirection.Horizontal,
+                    Children = new Drawable[]
                     {
-                        AutoSizeAxes = Axes.X,
-                        Direction = FillDirection.Vertical,
-                        Children = new[]
+                        level1 = new FillFlowContainer<DrawableTournamentMatch>
                         {
-                            new DrawableTournamentMatch(match1),
-                            new DrawableTournamentMatch(match2),
-                            new DrawableTournamentMatch(new TournamentMatch()),
-                        }
-                    },
-                    level2 = new FillFlowContainer<DrawableTournamentMatch>
-                    {
-                        AutoSizeAxes = Axes.X,
-                        Direction = FillDirection.Vertical,
-                        Margin = new MarginPadding(20),
-                        Children = new[]
+                            AutoSizeAxes = Axes.X,
+                            Direction = FillDirection.Vertical,
+                            Children = new[]
+                            {
+                                new DrawableTournamentMatch(match1),
+                                new DrawableTournamentMatch(match2),
+                                new DrawableTournamentMatch(new TournamentMatch()),
+                            }
+                        },
+                        level2 = new FillFlowContainer<DrawableTournamentMatch>
                         {
-                            new DrawableTournamentMatch(new TournamentMatch()),
-                            new DrawableTournamentMatch(new TournamentMatch())
+                            AutoSizeAxes = Axes.X,
+                            Direction = FillDirection.Vertical,
+                            Margin = new MarginPadding(20),
+                            Children = new[]
+                            {
+                                new DrawableTournamentMatch(new TournamentMatch()),
+                                new DrawableTournamentMatch(new TournamentMatch())
+                            }
                         }
                     }
-                }
-            };
+                };
 
-            level1.Children[0].Match.Progression.Value = level2.Children[0].Match;
-            level1.Children[1].Match.Progression.Value = level2.Children[0].Match;
+                level1.Children[0].Match.Progression.Value = level2.Children[0].Match;
+                level1.Children[1].Match.Progression.Value = level2.Children[0].Match;
+            });
 
             AddRepeatStep("change scores", () => match1.Team2Score.Value++, 4);
             AddStep("add new team", () => match2.Team2.Value = new TournamentTeam { FlagName = { Value = "PT" }, FullName = { Value = "Portugal" } });
@@ -78,6 +88,9 @@ public TestSceneDrawableTournamentMatch()
             AddRepeatStep("change scores", () => level2.Children[0].Match.Team1Score.Value++, 5);
 
             AddRepeatStep("change scores", () => level2.Children[0].Match.Team2Score.Value++, 4);
+
+            AddStep("select as current", () => match1.Current.Value = true);
+            AddStep("select as editing", () => this.ChildrenOfType<DrawableTournamentMatch>().Last().Selected = true);
         }
     }
 }

osu.Game.Tournament/Screens/Editors/LadderEditorScreen.cs

@@ -14,6 +14,7 @@
 using osu.Framework.Input.Events;
 using osu.Framework.Input.States;
 using osu.Game.Graphics.UserInterface;
+using osu.Game.Screens.Edit.Compose.Components;
 using osu.Game.Tournament.Components;
 using osu.Game.Tournament.Models;
 using osu.Game.Tournament.Screens.Ladder;
@@ -26,6 +27,8 @@ namespace osu.Game.Tournament.Screens.Editors
     [Cached]
     public partial class LadderEditorScreen : LadderScreen, IHasContextMenu
     {
+        public const float GRID_SPACING = 10;
+
         [Cached]
         private LadderEditorInfo editorInfo = new LadderEditorInfo();
 
@@ -43,6 +46,13 @@ private void load()
 
             AddInternal(rightClickMessage = new WarningBox("Right click to place and link matches"));
 
+            ScrollContent.Add(new RectangularPositionSnapGrid(Vector2.Zero)
+            {
+                Spacing = new Vector2(GRID_SPACING),
+                RelativeSizeAxes = Axes.Both,
+                Depth = float.MaxValue
+            });
+
             LadderInfo.Matches.CollectionChanged += (_, _) => updateMessage();
             updateMessage();
         }
@@ -68,8 +78,12 @@ public MenuItem[] ContextMenuItems
                 {
                     new OsuMenuItem("Create new match", MenuItemType.Highlighted, () =>
                     {
-                        var pos = MatchesContainer.ToLocalSpace(GetContainingInputManager().CurrentState.Mouse.Position);
-                        LadderInfo.Matches.Add(new TournamentMatch { Position = { Value = new Point((int)pos.X, (int)pos.Y) } });
+                        Vector2 pos = MatchesContainer.ToLocalSpace(GetContainingInputManager().CurrentState.Mouse.Position);
+                        TournamentMatch newMatch = new TournamentMatch { Position = { Value = new Point((int)pos.X, (int)pos.Y) } };
+
+                        LadderInfo.Matches.Add(newMatch);
+
+                        editorInfo.Selected.Value = newMatch;
                     }),
                     new OsuMenuItem("Reset teams", MenuItemType.Destructive, () =>
                     {

osu.Game.Tournament/Screens/Ladder/Components/DrawableTournamentMatch.cs

@@ -13,6 +13,7 @@
 using osu.Framework.Graphics.Shapes;
 using osu.Framework.Input.Events;
 using osu.Game.Tournament.Models;
+using osu.Game.Tournament.Screens.Editors;
 using osuTK;
 using osuTK.Graphics;
 using osuTK.Input;
@@ -41,35 +42,60 @@ public DrawableTournamentMatch(TournamentMatch match, bool editor = false)
 
             AutoSizeAxes = Axes.Both;
 
-            Margin = new MarginPadding(5);
+            const float border_thickness = 5;
+            const float spacing = 2;
 
-            InternalChildren = new[]
+            Margin = new MarginPadding(10);
+
+            InternalChildren = new Drawable[]
             {
-                selectionBox = new Container
+                Flow = new FillFlowContainer<DrawableMatchTeam>
+                {
+                    AutoSizeAxes = Axes.Both,
+                    Direction = FillDirection.Vertical,
+                    Spacing = new Vector2(spacing)
+                },
+                new Container
                 {
-                    Scale = new Vector2(1.1f),
                     RelativeSizeAxes = Axes.Both,
+                    Padding = new MarginPadding(-10),
                     Anchor = Anchor.Centre,
                     Origin = Anchor.Centre,
-                    Alpha = 0,
-                    Colour = Color4.YellowGreen,
-                    Child = new Box { RelativeSizeAxes = Axes.Both }
+                    Child = selectionBox = new Container
+                    {
+                        RelativeSizeAxes = Axes.Both,
+                        Alpha = 0,
+                        Masking = true,
+                        BorderColour = Color4.YellowGreen,
+                        BorderThickness = border_thickness,
+                        Child = new Box
+                        {
+                            RelativeSizeAxes = Axes.Both,
+                            AlwaysPresent = true,
+                            Alpha = 0,
+                        }
+                    },
                 },
-                CurrentMatchSelectionBox = new Container
+                new Container
                 {
-                    Scale = new Vector2(1.05f, 1.1f),
                     RelativeSizeAxes = Axes.Both,
+                    Padding = new MarginPadding(-(spacing + border_thickness)),
                     Anchor = Anchor.Centre,
                     Origin = Anchor.Centre,
-                    Alpha = 0,
-                    Colour = Color4.White,
-                    Child = new Box { RelativeSizeAxes = Axes.Both }
-                },
-                Flow = new FillFlowContainer<DrawableMatchTeam>
-                {
-                    AutoSizeAxes = Axes.Both,
-                    Direction = FillDirection.Vertical,
-                    Spacing = new Vector2(2)
+                    Child = CurrentMatchSelectionBox = new Container
+                    {
+                        RelativeSizeAxes = Axes.Both,
+                        Alpha = 0,
+                        BorderColour = Color4.White,
+                        BorderThickness = border_thickness,
+                        Masking = true,
+                        Child = new Box
+                        {
+                            RelativeSizeAxes = Axes.Both,
+                            AlwaysPresent = true,
+                            Alpha = 0,
+                        }
+                    },
                 }
             };
 
@@ -97,7 +123,6 @@ public DrawableTournamentMatch(TournamentMatch match, bool editor = false)
                     Position = new Vector2(pos.NewValue.X, pos.NewValue.Y);
                 Changed?.Invoke();
             }, true);
-
             updateTeams();
         }
 
@@ -225,10 +250,7 @@ protected override void LoadComplete()
             if (editorInfo != null)
             {
                 globalSelection = editorInfo.Selected.GetBoundCopy();
-                globalSelection.BindValueChanged(s =>
-                {
-                    if (s.NewValue != Match) Selected = false;
-                });
+                globalSelection.BindValueChanged(s => Selected = s.NewValue == Match, true);
             }
         }
 
@@ -312,8 +334,8 @@ protected override void OnDrag(DragEvent e)
 
         private Vector2 snapToGrid(Vector2 pos) =>
             new Vector2(
-                (int)(pos.X / 10) * 10,
-                (int)(pos.Y / 10) * 10
+                (int)(pos.X / LadderEditorScreen.GRID_SPACING) * LadderEditorScreen.GRID_SPACING,
+                (int)(pos.Y / LadderEditorScreen.GRID_SPACING) * LadderEditorScreen.GRID_SPACING
             );
 
         public void Remove()