Merge pull request #8176 from peppy/tournament-design-gameplay

Implement 2020 gameplay design

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

@@ -3,6 +3,7 @@
 
 using System;
 using System.Collections.Generic;
+using osu.Framework.Bindables;
 using osu.Framework.Graphics;
 using osu.Game.Tests.Visual;
 using osu.Game.Tournament.Components;
@@ -113,7 +114,7 @@ namespace osu.Game.Tournament.Tests.Components
             Cell(i).AddRange(new Drawable[]
             {
                 new TournamentSpriteText { Text = "TeamDisplay" },
-                new TeamDisplay(team, TournamentGame.COLOUR_RED, false)
+                new TeamDisplay(team, TeamColour.Red, new Bindable<int?>(2), 6)
                 {
                     Anchor = Anchor.Centre,
                     Origin = Anchor.Centre,

osu.Game.Tournament.Tests/Screens/TestSceneGameplayScreen.cs

@@ -1,16 +1,31 @@
 // 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;
+using System.Collections.Generic;
 using osu.Framework.Allocation;
 using osu.Game.Tournament.Components;
+using osu.Game.Tournament.Screens;
 using osu.Game.Tournament.Screens.Gameplay;
+using osu.Game.Tournament.Screens.Gameplay.Components;
 
 namespace osu.Game.Tournament.Tests.Screens
 {
     public class TestSceneGameplayScreen : TournamentTestScene
     {
         [Cached]
-        private TournamentMatchChatDisplay chat = new TournamentMatchChatDisplay();
+        private TournamentMatchChatDisplay chat = new TournamentMatchChatDisplay { Width = 0.5f };
+
+        public override IReadOnlyList<Type> RequiredTypes => new[]
+        {
+            typeof(TeamScore),
+            typeof(TeamScoreDisplay),
+            typeof(TeamDisplay),
+            typeof(MatchHeader),
+            typeof(MatchScoreDisplay),
+            typeof(BeatmapInfoScreen),
+            typeof(SongBar),
+        };
 
         [BackgroundDependencyLoader]
         private void load()

osu.Game.Tournament/Components/SongBar.cs

@@ -4,10 +4,8 @@
 using System;
 using osu.Framework.Allocation;
 using osu.Framework.Bindables;
-using osu.Framework.Extensions.Color4Extensions;
 using osu.Framework.Graphics;
 using osu.Framework.Graphics.Containers;
-using osu.Framework.Graphics.Effects;
 using osu.Framework.Graphics.Shapes;
 using osu.Framework.Graphics.Sprites;
 using osu.Game.Beatmaps;
@@ -24,6 +22,8 @@ namespace osu.Game.Tournament.Components
     {
         private BeatmapInfo beatmap;
 
+        private const float height = 145;
+
         [Resolved]
         private IBindable<RulesetInfo> ruleset { get; set; }
 
@@ -52,15 +52,7 @@ namespace osu.Game.Tournament.Components
             }
         }
 
-        private Container panelContents;
+        private FillFlowContainer flow;
-        private Container innerPanel;
-        private Container outerPanel;
-        private TournamentBeatmapPanel panel;
-
-        private float panelWidth => expanded ? 0.6f : 1;
-
-        private const float main_width = 0.97f;
-        private const float inner_panel_width = 0.7f;
 
         private bool expanded;
 
@@ -70,86 +62,27 @@ namespace osu.Game.Tournament.Components
             set
             {
                 expanded = value;
-                panel?.ResizeWidthTo(panelWidth, 800, Easing.OutQuint);
+                flow.Direction = expanded ? FillDirection.Full : FillDirection.Vertical;
-
-                if (expanded)
-                {
-                    innerPanel.ResizeWidthTo(inner_panel_width, 800, Easing.OutQuint);
-                    outerPanel.ResizeWidthTo(main_width, 800, Easing.OutQuint);
-                }
-                else
-                {
-                    innerPanel.ResizeWidthTo(1, 800, Easing.OutQuint);
-                    outerPanel.ResizeWidthTo(0.25f, 800, Easing.OutQuint);
-                }
             }
         }
 
         [BackgroundDependencyLoader]
         private void load()
         {
-            RelativeSizeAxes = Axes.Both;
+            RelativeSizeAxes = Axes.X;
+            AutoSizeAxes = Axes.Y;
 
             InternalChildren = new Drawable[]
             {
-                outerPanel = new Container
+                flow = new FillFlowContainer
                 {
-                    Masking = true,
-                    EdgeEffect = new EdgeEffectParameters
-                    {
-                        Colour = Color4.Black.Opacity(0.2f),
-                        Type = EdgeEffectType.Shadow,
-                        Radius = 5,
-                    },
                     RelativeSizeAxes = Axes.X,
+                    AutoSizeAxes = Axes.Y,
+                    LayoutDuration = 500,
+                    LayoutEasing = Easing.OutQuint,
+                    Direction = FillDirection.Full,
                     Anchor = Anchor.BottomRight,
                     Origin = Anchor.BottomRight,
-                    RelativePositionAxes = Axes.X,
-                    X = -(1 - main_width) / 2,
-                    Y = -10,
-                    Width = main_width,
-                    Height = TournamentBeatmapPanel.HEIGHT,
-                    CornerRadius = TournamentBeatmapPanel.HEIGHT / 2,
-                    CornerExponent = 2,
-                    Children = new Drawable[]
-                    {
-                        new Box
-                        {
-                            RelativeSizeAxes = Axes.Both,
-                            Colour = OsuColour.Gray(0.93f),
-                        },
-                        new OsuLogo
-                        {
-                            Triangles = false,
-                            Colour = OsuColour.Gray(0.33f),
-                            Scale = new Vector2(0.08f),
-                            Margin = new MarginPadding(50),
-                            Anchor = Anchor.CentreRight,
-                            Origin = Anchor.CentreRight,
-                        },
-                        innerPanel = new Container
-                        {
-                            Masking = true,
-                            CornerRadius = TournamentBeatmapPanel.HEIGHT / 2,
-                            CornerExponent = 2,
-                            Anchor = Anchor.Centre,
-                            Origin = Anchor.Centre,
-                            RelativeSizeAxes = Axes.Both,
-                            Width = inner_panel_width,
-                            Children = new Drawable[]
-                            {
-                                new Box
-                                {
-                                    RelativeSizeAxes = Axes.Both,
-                                    Colour = OsuColour.Gray(0.86f),
-                                },
-                                panelContents = new Container
-                                {
-                                    RelativeSizeAxes = Axes.Both,
-                                }
-                            }
-                        }
-                    }
                 }
             };
 
@@ -160,7 +93,7 @@ namespace osu.Game.Tournament.Components
         {
             if (beatmap == null)
             {
-                panelContents.Clear();
+                flow.Clear();
                 return;
             }
 
@@ -219,34 +152,86 @@ namespace osu.Game.Tournament.Components
                     break;
             }
 
-            panelContents.Children = new Drawable[]
+            flow.Children = new Drawable[]
             {
-                new DiffPiece(("Length", TimeSpan.FromMilliseconds(length).ToString(@"mm\:ss")))
+                new Container
                 {
-                    Anchor = Anchor.CentreLeft,
+                    RelativeSizeAxes = Axes.X,
-                    Origin = Anchor.BottomLeft,
+                    Height = height / 2,
+                    Width = 0.5f,
+                    Anchor = Anchor.BottomRight,
+                    Origin = Anchor.BottomRight,
+
+                    Children = new Drawable[]
+                    {
+                        new GridContainer
+                        {
+                            RelativeSizeAxes = Axes.Both,
+
+                            Content = new[]
+                            {
+                                new Drawable[]
+                                {
+                                    new FillFlowContainer
+                                    {
+                                        RelativeSizeAxes = Axes.X,
+                                        AutoSizeAxes = Axes.Y,
+                                        Anchor = Anchor.Centre,
+                                        Origin = Anchor.Centre,
+                                        Direction = FillDirection.Vertical,
+                                        Children = new Drawable[]
+                                        {
+                                            new DiffPiece(stats),
+                                            new DiffPiece(("Star Rating", $"{beatmap.StarDifficulty:0.#}{srExtra}"))
+                                        }
+                                    },
+                                    new FillFlowContainer
+                                    {
+                                        RelativeSizeAxes = Axes.X,
+                                        AutoSizeAxes = Axes.Y,
+                                        Anchor = Anchor.Centre,
+                                        Origin = Anchor.Centre,
+                                        Direction = FillDirection.Vertical,
+                                        Children = new Drawable[]
+                                        {
+                                            new DiffPiece(("Length", TimeSpan.FromMilliseconds(length).ToString(@"mm\:ss"))),
+                                            new DiffPiece(("BPM", $"{bpm:0.#}"))
+                                        }
+                                    },
+                                    new Container
+                                    {
+                                        RelativeSizeAxes = Axes.Both,
+                                        Children = new Drawable[]
+                                        {
+                                            new Box
+                                            {
+                                                Colour = Color4.Black,
+                                                RelativeSizeAxes = Axes.Both,
+                                                Alpha = 0.1f,
+                                            },
+                                            new OsuLogo
+                                            {
+                                                Triangles = false,
+                                                Scale = new Vector2(0.08f),
+                                                Margin = new MarginPadding(50),
+                                                X = -10,
+                                                Anchor = Anchor.CentreRight,
+                                                Origin = Anchor.CentreRight,
+                                            },
+                                        }
+                                    },
+                                },
+                            }
+                        }
+                    }
                 },
-                new DiffPiece(("BPM", $"{bpm:0.#}"))
+                new TournamentBeatmapPanel(beatmap)
                 {
-                    Anchor = Anchor.CentreLeft,
+                    RelativeSizeAxes = Axes.X,
-                    Origin = Anchor.TopLeft
+                    Width = 0.5f,
-                },
+                    Height = height / 2,
-                new DiffPiece(stats)
+                    Anchor = Anchor.BottomRight,
-                {
+                    Origin = Anchor.BottomRight,
-                    Anchor = Anchor.CentreRight,
-                    Origin = Anchor.BottomRight
-                },
-                new DiffPiece(("Star Rating", $"{beatmap.StarDifficulty:0.#}{srExtra}"))
-                {
-                    Anchor = Anchor.CentreRight,
-                    Origin = Anchor.TopRight
-                },
-                panel = new TournamentBeatmapPanel(beatmap)
-                {
-                    Anchor = Anchor.Centre,
-                    Origin = Anchor.Centre,
-                    RelativeSizeAxes = Axes.Both,
-                    Size = new Vector2(panelWidth, 1)
                 }
             };
         }
@@ -258,10 +243,9 @@ namespace osu.Game.Tournament.Components
                 Margin = new MarginPadding { Horizontal = 15, Vertical = 1 };
                 AutoSizeAxes = Axes.Both;
 
-                static void cp(SpriteText s, Color4 colour)
+                static void cp(SpriteText s, bool bold)
                 {
-                    s.Colour = colour;
+                    s.Font = OsuFont.Torus.With(weight: bold ? FontWeight.Bold : FontWeight.Regular, size: 15);
-                    s.Font = OsuFont.Torus.With(weight: FontWeight.Bold, size: 15);
                 }
 
                 for (var i = 0; i < tuples.Length; i++)
@@ -272,14 +256,14 @@ namespace osu.Game.Tournament.Components
                     {
                         AddText(" / ", s =>
                         {
-                            cp(s, OsuColour.Gray(0.33f));
+                            cp(s, false);
                             s.Spacing = new Vector2(-2, 0);
                         });
                     }
 
-                    AddText(new TournamentSpriteText { Text = heading }, s => cp(s, OsuColour.Gray(0.33f)));
+                    AddText(new TournamentSpriteText { Text = heading }, s => cp(s, false));
-                    AddText(" ", s => cp(s, OsuColour.Gray(0.33f)));
+                    AddText(" ", s => cp(s, false));
-                    AddText(new TournamentSpriteText { Text = content }, s => cp(s, OsuColour.Gray(0.5f)));
+                    AddText(new TournamentSpriteText { Text = content }, s => cp(s, true));
                 }
             }
         }

osu.Game.Tournament/Components/TournamentBeatmapPanel.cs

@@ -68,7 +68,9 @@ namespace osu.Game.Tournament.Components
                 new FillFlowContainer
                 {
                     AutoSizeAxes = Axes.Both,
-                    Padding = new MarginPadding(vertical_padding),
+                    Anchor = Anchor.CentreLeft,
+                    Origin = Anchor.CentreLeft,
+                    Padding = new MarginPadding(15),
                     Direction = FillDirection.Vertical,
                     Children = new Drawable[]
                     {
@@ -128,8 +130,8 @@ namespace osu.Game.Tournament.Components
                     Texture = textures.Get($"mods/{mods}"),
                     Anchor = Anchor.CentreRight,
                     Origin = Anchor.CentreRight,
-                    Margin = new MarginPadding(20),
+                    Margin = new MarginPadding(10),
-                    Scale = new Vector2(0.5f)
+                    Scale = new Vector2(0.8f)
                 });
             }
         }

osu.Game.Tournament/Components/TournamentMatchChatDisplay.cs

@@ -9,8 +9,6 @@ using osu.Game.Online.Chat;
 using osu.Game.Overlays.Chat;
 using osu.Game.Tournament.IPC;
 using osu.Game.Tournament.Models;
-using osuTK;
-using osuTK.Graphics;
 
 namespace osu.Game.Tournament.Components
 {
@@ -23,11 +21,11 @@ namespace osu.Game.Tournament.Components
         public TournamentMatchChatDisplay()
         {
             RelativeSizeAxes = Axes.X;
-            Y = 100;
+            Height = 144;
-            Size = new Vector2(0.45f, 112);
+            Anchor = Anchor.BottomLeft;
-            Margin = new MarginPadding(10);
+            Origin = Anchor.BottomLeft;
-            Anchor = Anchor.BottomCentre;
+
-            Origin = Anchor.BottomCentre;
+            CornerRadius = 0;
         }
 
         [BackgroundDependencyLoader(true)]
@@ -79,19 +77,15 @@ namespace osu.Game.Tournament.Components
             {
             }
 
-            [BackgroundDependencyLoader]
             private void load(LadderInfo info)
             {
-                //if (info.CurrentMatch.Value.Team1.Value.Players.Any(u => u.Id == Message.Sender.Id))
+                // if (info.CurrentMatch.Value.Team1.Value.Players.Any(u => u.Id == Message.Sender.Id))
-                //    ColourBox.Colour = red;
+                //     SenderText.Colour = TournamentGame.COLOUR_RED;
-                //else if (info.CurrentMatch.Value.Team2.Value.Players.Any(u => u.Id == Message.Sender.Id))
+                // else if (info.CurrentMatch.Value.Team2.Value.Players.Any(u => u.Id == Message.Sender.Id))
-                //    ColourBox.Colour = blue;
+                //     SenderText.Colour = TournamentGame.COLOUR_BLUE;
-                //else if (Message.Sender.Colour != null)
+                // else if (Message.Sender.Colour != null)
-                //    SenderText.Colour = ColourBox.Colour = OsuColour.FromHex(Message.Sender.Colour);
+                //     SenderText.Colour = ColourBox.Colour = OsuColour.FromHex(Message.Sender.Colour);
             }
-
-            private readonly Color4 red = new Color4(186, 0, 18, 255);
-            private readonly Color4 blue = new Color4(17, 136, 170, 255);
         }
     }
 }

osu.Game.Tournament/Screens/BeatmapInfoScreen.cs

@@ -21,6 +21,7 @@ namespace osu.Game.Tournament.Screens
             {
                 Anchor = Anchor.BottomRight,
                 Origin = Anchor.BottomRight,
+                Depth = float.MinValue,
             });
         }
 

osu.Game.Tournament/Screens/Gameplay/Components/MatchHeader.cs

@@ -6,14 +6,27 @@ using osu.Framework.Bindables;
 using osu.Framework.Graphics;
 using osu.Framework.Graphics.Containers;
 using osu.Framework.Input.Events;
+using osu.Game.Tournament.Components;
 using osu.Game.Tournament.Models;
-using osu.Game.Tournament.Screens.Showcase;
+using osuTK;
 using osuTK.Input;
 
 namespace osu.Game.Tournament.Screens.Gameplay.Components
 {
     public class MatchHeader : Container
     {
+        private TeamScoreDisplay teamDisplay1;
+        private TeamScoreDisplay teamDisplay2;
+
+        public bool ShowScores
+        {
+            set
+            {
+                teamDisplay1.ShowScore = value;
+                teamDisplay2.ShowScore = value;
+            }
+        }
+
         [BackgroundDependencyLoader]
         private void load()
         {
@@ -21,19 +34,33 @@ namespace osu.Game.Tournament.Screens.Gameplay.Components
             Height = 95;
             Children = new Drawable[]
             {
-                new TournamentLogo(),
+                new FillFlowContainer
-                new RoundDisplay
                 {
-                    Y = 5,
+                    RelativeSizeAxes = Axes.Both,
-                    Anchor = Anchor.BottomCentre,
+                    Direction = FillDirection.Vertical,
-                    Origin = Anchor.TopCentre,
+                    Spacing = new Vector2(5),
+                    Children = new Drawable[]
+                    {
+                        new DrawableTournamentTitleText
+                        {
+                            Anchor = Anchor.Centre,
+                            Origin = Anchor.Centre,
+                            Scale = new Vector2(1.2f)
+                        },
+                        new RoundDisplay
+                        {
+                            Anchor = Anchor.Centre,
+                            Origin = Anchor.Centre,
+                            Scale = new Vector2(0.4f)
+                        },
+                    }
                 },
-                new TeamScoreDisplay(TeamColour.Red)
+                teamDisplay1 = new TeamScoreDisplay(TeamColour.Red)
                 {
                     Anchor = Anchor.TopLeft,
                     Origin = Anchor.TopLeft,
                 },
-                new TeamScoreDisplay(TeamColour.Blue)
+                teamDisplay2 = new TeamScoreDisplay(TeamColour.Blue)
                 {
                     Anchor = Anchor.TopRight,
                     Origin = Anchor.TopRight,
@@ -50,28 +77,35 @@ namespace osu.Game.Tournament.Screens.Gameplay.Components
         private readonly Bindable<TournamentTeam> currentTeam = new Bindable<TournamentTeam>();
         private readonly Bindable<int?> currentTeamScore = new Bindable<int?>();
 
+        private TeamDisplay teamDisplay;
+
+        public bool ShowScore { set => teamDisplay.ShowScore = value; }
+
         public TeamScoreDisplay(TeamColour teamColour)
         {
             this.teamColour = teamColour;
 
             RelativeSizeAxes = Axes.Y;
-            Width = 300;
+            AutoSizeAxes = Axes.X;
         }
 
         [BackgroundDependencyLoader]
         private void load(LadderInfo ladder)
         {
-            currentMatch.BindValueChanged(matchChanged);
             currentMatch.BindTo(ladder.CurrentMatch);
+            currentMatch.BindValueChanged(matchChanged, true);
         }
 
         private void matchChanged(ValueChangedEvent<TournamentMatch> match)
         {
             currentTeamScore.UnbindBindings();
-            currentTeamScore.BindTo(teamColour == TeamColour.Red ? match.NewValue.Team1Score : match.NewValue.Team2Score);
-
             currentTeam.UnbindBindings();
-            currentTeam.BindTo(teamColour == TeamColour.Red ? match.NewValue.Team1 : match.NewValue.Team2);
+
+            if (match.NewValue != null)
+            {
+                currentTeamScore.BindTo(teamColour == TeamColour.Red ? match.NewValue.Team1Score : match.NewValue.Team2Score);
+                currentTeam.BindTo(teamColour == TeamColour.Red ? match.NewValue.Team1 : match.NewValue.Team2);
+            }
 
             // team may change to same team, which means score is not in a good state.
             // thus we handle this manually.
@@ -98,16 +132,9 @@ namespace osu.Game.Tournament.Screens.Gameplay.Components
 
         private void teamChanged(TournamentTeam team)
         {
-            var colour = teamColour == TeamColour.Red ? TournamentGame.COLOUR_RED : TournamentGame.COLOUR_BLUE;
-            var flip = teamColour == TeamColour.Red;
-
             InternalChildren = new Drawable[]
             {
-                new TeamDisplay(team, colour, flip),
+                teamDisplay = new TeamDisplay(team, teamColour, currentTeamScore, currentMatch.Value?.PointsToWin ?? 0),
-                new TeamScore(currentTeamScore, flip, currentMatch.Value.PointsToWin)
-                {
-                    Colour = colour
-                }
             };
         }
     }

osu.Game.Tournament/Screens/Gameplay/Components/MatchScoreDisplay.cs

@@ -11,16 +11,12 @@ using osu.Game.Graphics;
 using osu.Game.Graphics.UserInterface;
 using osu.Game.Tournament.IPC;
 using osu.Game.Tournament.Models;
-using osuTK.Graphics;
 
 namespace osu.Game.Tournament.Screens.Gameplay.Components
 {
     public class MatchScoreDisplay : CompositeDrawable
     {
-        private readonly Color4 red = new Color4(186, 0, 18, 255);
+        private const float bar_height = 18;
-        private readonly Color4 blue = new Color4(17, 136, 170, 255);
-
-        private const float bar_height = 20;
 
         private readonly BindableInt score1 = new BindableInt();
         private readonly BindableInt score2 = new BindableInt();
@@ -28,45 +24,63 @@ namespace osu.Game.Tournament.Screens.Gameplay.Components
         private readonly MatchScoreCounter score1Text;
         private readonly MatchScoreCounter score2Text;
 
-        private readonly Circle score1Bar;
+        private readonly Drawable score1Bar;
-        private readonly Circle score2Bar;
+        private readonly Drawable score2Bar;
 
         public MatchScoreDisplay()
         {
             RelativeSizeAxes = Axes.X;
             AutoSizeAxes = Axes.Y;
 
-            InternalChildren = new Drawable[]
+            InternalChildren = new[]
             {
-                score1Bar = new Circle
+                new Box
+                {
+                    Name = "top bar red (static)",
+                    RelativeSizeAxes = Axes.X,
+                    Height = bar_height / 4,
+                    Width = 0.5f,
+                    Colour = TournamentGame.COLOUR_RED,
+                    Anchor = Anchor.TopCentre,
+                    Origin = Anchor.TopRight
+                },
+                new Box
+                {
+                    Name = "top bar blue (static)",
+                    RelativeSizeAxes = Axes.X,
+                    Height = bar_height / 4,
+                    Width = 0.5f,
+                    Colour = TournamentGame.COLOUR_BLUE,
+                    Anchor = Anchor.TopCentre,
+                    Origin = Anchor.TopLeft
+                },
+                score1Bar = new Box
                 {
                     Name = "top bar red",
                     RelativeSizeAxes = Axes.X,
                     Height = bar_height,
                     Width = 0,
-                    Colour = red,
+                    Colour = TournamentGame.COLOUR_RED,
                     Anchor = Anchor.TopCentre,
                     Origin = Anchor.TopRight
                 },
                 score1Text = new MatchScoreCounter
                 {
-                    Colour = red,
                     Anchor = Anchor.TopCentre,
                     Origin = Anchor.TopCentre
                 },
-                score2Bar = new Circle
+                score2Bar = new Box
                 {
                     Name = "top bar blue",
                     RelativeSizeAxes = Axes.X,
                     Height = bar_height,
                     Width = 0,
-                    Colour = blue,
+                    Colour = TournamentGame.COLOUR_BLUE,
                     Anchor = Anchor.TopCentre,
                     Origin = Anchor.TopLeft
                 },
                 score2Text = new MatchScoreCounter
                 {
-                    Colour = blue,
                     Anchor = Anchor.TopCentre,
                     Origin = Anchor.TopCentre
                 },
@@ -103,10 +117,9 @@ namespace osu.Game.Tournament.Screens.Gameplay.Components
             winningBar.ResizeWidthTo(Math.Min(0.4f, MathF.Pow(diff / 1500000f, 0.5f) / 2), 400, Easing.OutQuint);
         }
 
-        protected override void Update()
+        protected override void UpdateAfterChildren()
         {
-            base.Update();
+            base.UpdateAfterChildren();
-
             score1Text.X = -Math.Max(5 + score1Text.DrawWidth / 2, score1Bar.DrawWidth);
             score2Text.X = Math.Max(5 + score2Text.DrawWidth / 2, score2Bar.DrawWidth);
         }
@@ -115,7 +128,7 @@ namespace osu.Game.Tournament.Screens.Gameplay.Components
         {
             public MatchScoreCounter()
             {
-                Margin = new MarginPadding { Top = bar_height + 5, Horizontal = 10 };
+                Margin = new MarginPadding { Top = bar_height, Horizontal = 10 };
 
                 Winning = false;
             }
@@ -123,8 +136,8 @@ namespace osu.Game.Tournament.Screens.Gameplay.Components
             public bool Winning
             {
                 set => DisplayedCountSpriteText.Font = value
-                    ? OsuFont.Torus.With(weight: FontWeight.Regular, size: 60)
+                    ? OsuFont.Torus.With(weight: FontWeight.Bold, size: 50)
-                    : OsuFont.Torus.With(weight: FontWeight.Light, size: 40);
+                    : OsuFont.Torus.With(weight: FontWeight.Regular, size: 40);
             }
         }
     }

osu.Game.Tournament/Screens/Gameplay/Components/RoundDisplay.cs

@@ -3,46 +3,15 @@
 
 using osu.Framework.Allocation;
 using osu.Framework.Bindables;
-using osu.Framework.Graphics;
+using osu.Game.Tournament.Components;
-using osu.Framework.Graphics.Containers;
-using osu.Framework.Graphics.Shapes;
-using osu.Game.Graphics;
 using osu.Game.Tournament.Models;
-using osuTK.Graphics;
 
 namespace osu.Game.Tournament.Screens.Gameplay.Components
 {
-    public class RoundDisplay : CompositeDrawable
+    public class RoundDisplay : TournamentSpriteTextWithBackground
     {
         private readonly Bindable<TournamentMatch> currentMatch = new Bindable<TournamentMatch>();
 
-        private readonly TournamentSpriteText text;
-
-        public RoundDisplay()
-        {
-            Width = 200;
-            Height = 20;
-
-            Masking = true;
-            CornerRadius = 10;
-
-            InternalChildren = new Drawable[]
-            {
-                new Box
-                {
-                    Colour = OsuColour.Gray(0.18f),
-                    RelativeSizeAxes = Axes.Both,
-                },
-                text = new TournamentSpriteText
-                {
-                    Anchor = Anchor.Centre,
-                    Origin = Anchor.Centre,
-                    Colour = Color4.White,
-                    Font = OsuFont.Torus.With(weight: FontWeight.Regular, size: 16),
-                },
-            };
-        }
-
         [BackgroundDependencyLoader]
         private void load(LadderInfo ladder)
         {
@@ -51,6 +20,6 @@ namespace osu.Game.Tournament.Screens.Gameplay.Components
         }
 
         private void matchChanged(ValueChangedEvent<TournamentMatch> match) =>
-            text.Text = match.NewValue.Round.Value?.Name.Value ?? "Unknown Round";
+            Text.Text = match.NewValue.Round.Value?.Name.Value ?? "Unknown Round";
     }
 }

osu.Game.Tournament/Screens/Gameplay/Components/TeamDisplay.cs

@@ -1,47 +1,88 @@
 // 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.Bindables;
 using osu.Framework.Graphics;
 using osu.Framework.Graphics.Containers;
-using osu.Game.Graphics;
 using osu.Game.Tournament.Components;
 using osu.Game.Tournament.Models;
 using osuTK;
-using osuTK.Graphics;
 
 namespace osu.Game.Tournament.Screens.Gameplay.Components
 {
     public class TeamDisplay : DrawableTournamentTeam
     {
-        public TeamDisplay(TournamentTeam team, Color4 colour, bool flip)
+        private readonly TeamScore score;
+
+        public bool ShowScore { set => score.FadeTo(value ? 1 : 0, 200); }
+
+        public TeamDisplay(TournamentTeam team, TeamColour colour, Bindable<int?> currentTeamScore, int pointsToWin)
             : base(team)
         {
-            RelativeSizeAxes = Axes.Both;
+            AutoSizeAxes = Axes.Both;
 
-            var anchor = flip ? Anchor.CentreRight : Anchor.CentreLeft;
+            bool flip = colour == TeamColour.Red;
 
-            Anchor = Origin = anchor;
+            var anchor = flip ? Anchor.TopLeft : Anchor.TopRight;
 
-            Flag.Anchor = Flag.Origin = anchor;
             Flag.RelativeSizeAxes = Axes.None;
             Flag.Size = new Vector2(60, 40);
-            Flag.Margin = new MarginPadding(20);
+            Flag.Origin = anchor;
+            Flag.Anchor = anchor;
+
+            Margin = new MarginPadding(20);
 
             InternalChild = new Container
             {
-                RelativeSizeAxes = Axes.Both,
+                AutoSizeAxes = Axes.Both,
                 Children = new Drawable[]
                 {
-                    Flag,
+                    new FillFlowContainer
-                    new TournamentSpriteText
                     {
-                        Text = team?.FullName.Value.ToUpper() ?? "???",
+                        AutoSizeAxes = Axes.Both,
-                        X = (flip ? -1 : 1) * 90,
+                        Direction = FillDirection.Horizontal,
-                        Y = -10,
+                        Spacing = new Vector2(5),
-                        Colour = colour,
+                        Children = new Drawable[]
-                        Font = OsuFont.Torus.With(weight: FontWeight.Regular, size: 20),
+                        {
-                        Origin = anchor,
+                            Flag,
-                        Anchor = anchor,
+                            new FillFlowContainer
+                            {
+                                AutoSizeAxes = Axes.Both,
+                                Direction = FillDirection.Vertical,
+                                Origin = anchor,
+                                Anchor = anchor,
+                                Spacing = new Vector2(5),
+                                Children = new Drawable[]
+                                {
+                                    new FillFlowContainer
+                                    {
+                                        AutoSizeAxes = Axes.Both,
+                                        Direction = FillDirection.Horizontal,
+                                        Spacing = new Vector2(5),
+                                        Children = new Drawable[]
+                                        {
+                                            new DrawableTeamHeader(colour)
+                                            {
+                                                Scale = new Vector2(0.75f),
+                                                Origin = anchor,
+                                                Anchor = anchor,
+                                            },
+                                            score = new TeamScore(currentTeamScore, colour, pointsToWin)
+                                            {
+                                                Origin = anchor,
+                                                Anchor = anchor,
+                                            }
+                                        }
+                                    },
+                                    new TournamentSpriteTextWithBackground(team?.FullName.Value ?? "???")
+                                    {
+                                        Scale = new Vector2(0.5f),
+                                        Origin = anchor,
+                                        Anchor = anchor,
+                                    },
+                                }
+                            },
+                        }
                     },
                 }
             };

osu.Game.Tournament/Screens/Gameplay/Components/TeamScore.cs

@@ -2,10 +2,16 @@
 // See the LICENCE file in the repository root for full licence text.
 
 using osu.Framework.Bindables;
+using osu.Framework.Extensions.Color4Extensions;
 using osu.Framework.Graphics;
 using osu.Framework.Graphics.Containers;
+using osu.Framework.Graphics.Effects;
+using osu.Framework.Graphics.Shapes;
+using osu.Game.Graphics;
 using osu.Game.Graphics.UserInterface;
+using osu.Game.Tournament.Models;
 using osuTK;
+using osuTK.Graphics;
 
 namespace osu.Game.Tournament.Screens.Gameplay.Components
 {
@@ -14,18 +20,16 @@ namespace osu.Game.Tournament.Screens.Gameplay.Components
         private readonly Bindable<int?> currentTeamScore = new Bindable<int?>();
         private readonly StarCounter counter;
 
-        public TeamScore(Bindable<int?> score, bool flip, int count)
+        public TeamScore(Bindable<int?> score, TeamColour colour, int count)
         {
-            var anchor = flip ? Anchor.CentreRight : Anchor.CentreLeft;
+            bool flip = colour == TeamColour.Blue;
+            var anchor = flip ? Anchor.TopRight : Anchor.TopLeft;
 
-            Anchor = anchor;
+            AutoSizeAxes = Axes.Both;
-            Origin = anchor;
 
-            InternalChild = counter = new StarCounter(count)
+            InternalChild = counter = new TeamScoreStarCounter(count)
             {
                 Anchor = anchor,
-                X = (flip ? -1 : 1) * 90,
-                Y = 5,
                 Scale = flip ? new Vector2(-1, 1) : Vector2.One,
             };
 
@@ -34,5 +38,66 @@ namespace osu.Game.Tournament.Screens.Gameplay.Components
         }
 
         private void scoreChanged(ValueChangedEvent<int?> score) => counter.Current = score.NewValue ?? 0;
+
+        public class TeamScoreStarCounter : StarCounter
+        {
+            public TeamScoreStarCounter(int count)
+                : base(count)
+            {
+            }
+
+            public override Star CreateStar() => new LightSquare();
+
+            public class LightSquare : Star
+            {
+                private readonly Box box;
+
+                public LightSquare()
+                {
+                    Size = new Vector2(22.5f);
+
+                    InternalChildren = new Drawable[]
+                    {
+                        new Container
+                        {
+                            RelativeSizeAxes = Axes.Both,
+                            Masking = true,
+                            BorderColour = OsuColour.Gray(0.5f),
+                            BorderThickness = 3,
+                            Children = new Drawable[]
+                            {
+                                new Box
+                                {
+                                    Colour = Color4.Transparent,
+                                    RelativeSizeAxes = Axes.Both,
+                                    AlwaysPresent = true,
+                                },
+                            }
+                        },
+                        box = new Box
+                        {
+                            Colour = OsuColour.FromHex("#FFE8AD"),
+                            RelativeSizeAxes = Axes.Both,
+                        },
+                    };
+
+                    Masking = true;
+                    EdgeEffect = new EdgeEffectParameters
+                    {
+                        Type = EdgeEffectType.Glow,
+                        Colour = OsuColour.FromHex("#FFE8AD").Opacity(0.1f),
+                        Hollow = true,
+                        Radius = 20,
+                        Roundness = 10,
+                    };
+                }
+
+                public override void DisplayAt(float scale)
+                {
+                    box.FadeTo(scale, 500, Easing.OutQuint);
+                    FadeEdgeEffectTo(0.2f * scale, 500, Easing.OutQuint);
+                }
+            }
+        }
     }
 }

osu.Game.Tournament/Screens/Gameplay/GameplayScreen.cs

@@ -15,7 +15,6 @@ using osu.Game.Tournament.Models;
 using osu.Game.Tournament.Screens.Gameplay.Components;
 using osu.Game.Tournament.Screens.MapPool;
 using osu.Game.Tournament.Screens.TeamWin;
-using osuTK;
 using osuTK.Graphics;
 
 namespace osu.Game.Tournament.Screens.Gameplay
@@ -30,9 +29,6 @@ namespace osu.Game.Tournament.Screens.Gameplay
         private OsuButton warmupButton;
         private MatchIPCInfo ipc;
 
-        private readonly Color4 red = new Color4(186, 0, 18, 255);
-        private readonly Color4 blue = new Color4(17, 136, 170, 255);
-
         [Resolved(canBeNull: true)]
         private TournamentSceneManager sceneManager { get; set; }
 
@@ -51,14 +47,14 @@ namespace osu.Game.Tournament.Screens.Gameplay
                     Loop = true,
                     RelativeSizeAxes = Axes.Both,
                 },
-                new MatchHeader(),
+                header = new MatchHeader(),
                 new Container
                 {
                     RelativeSizeAxes = Axes.X,
                     AutoSizeAxes = Axes.Y,
-                    Y = 5,
+                    Y = 110,
-                    Anchor = Anchor.Centre,
+                    Anchor = Anchor.TopCentre,
-                    Origin = Anchor.Centre,
+                    Origin = Anchor.TopCentre,
                     Children = new Drawable[]
                     {
                         new Box
@@ -66,44 +62,18 @@ namespace osu.Game.Tournament.Screens.Gameplay
                             // chroma key area for stable gameplay
                             Name = "chroma",
                             RelativeSizeAxes = Axes.X,
+                            Anchor = Anchor.TopCentre,
+                            Origin = Anchor.TopCentre,
                             Height = 512,
                             Colour = new Color4(0, 255, 0, 255),
                         },
-                        new Container
-                        {
-                            RelativeSizeAxes = Axes.X,
-                            AutoSizeAxes = Axes.Y,
-                            Y = -4,
-                            Children = new Drawable[]
-                            {
-                                new Circle
-                                {
-                                    Name = "top bar red",
-                                    RelativeSizeAxes = Axes.X,
-                                    Height = 8,
-                                    Width = 0.5f,
-                                    Colour = red,
-                                },
-                                new Circle
-                                {
-                                    Name = "top bar blue",
-                                    RelativeSizeAxes = Axes.X,
-                                    Height = 8,
-                                    Width = 0.5f,
-                                    Colour = blue,
-                                    Anchor = Anchor.TopRight,
-                                    Origin = Anchor.TopRight,
-                                },
-                            }
-                        },
                     }
                 },
                 scoreDisplay = new MatchScoreDisplay
                 {
-                    Y = -60,
+                    Y = -147,
-                    Scale = new Vector2(0.8f),
                     Anchor = Anchor.BottomCentre,
-                    Origin = Anchor.BottomCentre,
+                    Origin = Anchor.TopCentre,
                 },
                 new ControlPanel
                 {
@@ -136,13 +106,18 @@ namespace osu.Game.Tournament.Screens.Gameplay
 
             currentMatch.BindTo(ladder.CurrentMatch);
 
-            warmup.BindValueChanged(w => warmupButton.Alpha = !w.NewValue ? 0.5f : 1, true);
+            warmup.BindValueChanged(w =>
+            {
+                warmupButton.Alpha = !w.NewValue ? 0.5f : 1;
+                header.ShowScores = !w.NewValue;
+            }, true);
         }
 
         private ScheduledDelegate scheduledOperation;
         private MatchScoreDisplay scoreDisplay;
 
         private TourneyState lastState;
+        private MatchHeader header;
 
         private void stateChanged(ValueChangedEvent<TourneyState> state)
         {

osu.Game.Tournament/TournamentSceneManager.cs

@@ -194,9 +194,14 @@ namespace osu.Game.Tournament
 
             switch (currentScreen)
             {
-                case GameplayScreen _:
                 case MapPoolScreen _:
                     chatContainer.FadeIn(TournamentScreen.FADE_DELAY);
+                    chatContainer.ResizeWidthTo(1, 500, Easing.OutQuint);
+                    break;
+
+                case GameplayScreen _:
+                    chatContainer.FadeIn(TournamentScreen.FADE_DELAY);
+                    chatContainer.ResizeWidthTo(0.5f, 500, Easing.OutQuint);
                     break;
 
                 default: