Initial pass of gameplay screen design update

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,9 +1,12 @@
 // 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.Gameplay;
+using osu.Game.Tournament.Screens.Gameplay.Components;
 
 namespace osu.Game.Tournament.Tests.Screens
 {
@@ -12,6 +15,14 @@ namespace osu.Game.Tournament.Tests.Screens
         [Cached]
         private TournamentMatchChatDisplay chat = new TournamentMatchChatDisplay();
 
+        public override IReadOnlyList<Type> RequiredTypes => new[]
+        {
+            typeof(TeamScore),
+            typeof(TeamScoreDisplay),
+            typeof(TeamDisplay),
+            typeof(MatchHeader),
+        };
+
         [BackgroundDependencyLoader]
         private void load()
         {

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

@@ -6,8 +6,9 @@ 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
@@ -21,13 +22,28 @@ 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)
                 {
                     Anchor = Anchor.TopLeft,
@@ -55,7 +71,7 @@ namespace osu.Game.Tournament.Screens.Gameplay.Components
             this.teamColour = teamColour;
 
             RelativeSizeAxes = Axes.Y;
-            Width = 300;
+            AutoSizeAxes = Axes.X;
         }
 
         [BackgroundDependencyLoader]
@@ -98,16 +114,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),
+                new TeamDisplay(team, teamColour, currentTeamScore, currentMatch.Value.PointsToWin),
-                new TeamScore(currentTeamScore, flip, currentMatch.Value.PointsToWin)
-                {
-                    Colour = colour
-                }
             };
         }
     }

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,84 @@
 // 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)
+        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,
+                                            },
+                                            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,
             };
 
@@ -33,6 +37,67 @@ namespace osu.Game.Tournament.Screens.Gameplay.Components
             currentTeamScore.BindTo(score);
         }
 
-        private void scoreChanged(ValueChangedEvent<int?> score) => counter.CountStars = score.NewValue ?? 0;
+        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 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

@@ -30,9 +30,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; }
 
@@ -66,36 +63,11 @@ 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