h1or4dme8/osu-lazer
1
0
Fork 0
mirror of https://github.com/ppy/osu.git synced 2025-02-13 19:53:23 +08:00
Code Issues Releases Wiki Activity

Merge pull request #9372 from smoogipoo/match-subscreen-redesign

Browse Source
This commit is contained in:
Dean Herbert 2020-07-07 19:22:54 +09:00 committed by GitHub
commit 9d7a0779b8
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
12 changed files with 204 additions and 242 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
osu.Game.Tests/Visual/Multiplayer/TestSceneMatchLeaderboardChatDisplay.cs
View File

@ -1,32 +0,0 @@
// 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.Graphics;
using osu.Framework.Graphics.Containers;
using osu.Game.Screens.Multi.Match.Components;
using osuTK;
namespace osu.Game.Tests.Visual.Multiplayer
{
public class TestSceneMatchLeaderboardChatDisplay : MultiplayerTestScene
{
protected override bool UseOnlineAPI => true;
public TestSceneMatchLeaderboardChatDisplay()
{
Room.RoomID.Value = 7;
Add(new Container
{
Anchor = Anchor.Centre,
Origin = Anchor.Centre,
Size = new Vector2(500),
Child = new LeaderboardChatDisplay
{
Anchor = Anchor.Centre,
Origin = Anchor.Centre,
}
});
}
}
}

17
osu.Game.Tests/Visual/Multiplayer/TestSceneMatchSubScreen.cs
View File

@ -58,6 +58,23 @@ namespace osu.Game.Tests.Visual.Multiplayer
AddUntilStep("wait for load", () => match.IsCurrentScreen()); AddUntilStep("wait for load", () => match.IsCurrentScreen());
} }
[Test]
public void TestLoadSimpleMatch()
{
AddStep("set room properties", () =>
{
Room.RoomID.Value = 1;
Room.Name.Value = "my awesome room";
Room.Host.Value = new User { Id = 2, Username = "peppy" };
Room.RecentParticipants.Add(Room.Host.Value);
Room.Playlist.Add(new PlaylistItem
{
Beatmap = { Value = new TestBeatmap(new OsuRuleset().RulesetInfo).BeatmapInfo },
Ruleset = { Value = new OsuRuleset().RulesetInfo }
});
});
}
[Test] [Test]
public void TestPlaylistItemSelectedOnCreate() public void TestPlaylistItemSelectedOnCreate()
{ {

19
osu.Game/Screens/Multi/Components/OverlinedDisplay.cs
View File

@ -35,6 +35,18 @@ namespace osu.Game.Screens.Multi.Components
} }
} }
private bool showLine = true;
public bool ShowLine
{
get => showLine;
set
{
showLine = value;
line.Alpha = value ? 1 : 0;
}
}
protected string Details protected string Details
{ {
set => details.Text = value; set => details.Text = value;
@ -72,9 +84,12 @@ namespace osu.Game.Screens.Multi.Components
new OsuSpriteText new OsuSpriteText
{ {
Text = title, Text = title,
Font = OsuFont.GetFont(size: 14) Font = OsuFont.GetFont(size: 14, weight: FontWeight.SemiBold)
},
details = new OsuSpriteText
{
Font = OsuFont.GetFont(size: 14, weight: FontWeight.SemiBold)
}, },
details = new OsuSpriteText { Font = OsuFont.GetFont(size: 14) },
} }
}, },
}, },

2
osu.Game/Screens/Multi/Components/ParticipantsList.cs
View File

@ -79,7 +79,7 @@ namespace osu.Game.Screens.Multi.Components
Direction = Direction, Direction = Direction,
AutoSizeAxes = AutoSizeAxes, AutoSizeAxes = AutoSizeAxes,
RelativeSizeAxes = RelativeSizeAxes, RelativeSizeAxes = RelativeSizeAxes,
Spacing = new Vector2(10) Spacing = Vector2.One
}; };
for (int i = 0; i < RecentParticipants.Count; i++) for (int i = 0; i < RecentParticipants.Count; i++)

93
osu.Game/Screens/Multi/Header.cs
View File

@ -1,12 +1,13 @@
// Copyright (c) ppy Pty Ltd <contact@ppy.sh>. Licensed under the MIT Licence. // 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. // See the LICENCE file in the repository root for full licence text.
using Humanizer;
using osu.Framework.Allocation; using osu.Framework.Allocation;
using osu.Framework.Extensions.Color4Extensions; using osu.Framework.Extensions.Color4Extensions;
using osu.Framework.Graphics; using osu.Framework.Graphics;
using osu.Framework.Graphics.Containers; using osu.Framework.Graphics.Containers;
using osu.Framework.Graphics.Shapes; using osu.Framework.Graphics.Shapes;
using osu.Framework.Graphics.Sprites; using osu.Framework.Graphics.UserInterface;
using osu.Framework.Screens; using osu.Framework.Screens;
using osu.Game.Graphics; using osu.Game.Graphics;
using osu.Game.Graphics.UserInterface; using osu.Game.Graphics.UserInterface;
@ -19,41 +20,41 @@ namespace osu.Game.Screens.Multi
{ {
public class Header : Container public class Header : Container
{ {
public const float HEIGHT = 121; public const float HEIGHT = 80;
private readonly HeaderBreadcrumbControl breadcrumbs;
public Header(ScreenStack stack) public Header(ScreenStack stack)
{ {
MultiHeaderTitle title;
RelativeSizeAxes = Axes.X; RelativeSizeAxes = Axes.X;
Height = HEIGHT; Height = HEIGHT;
HeaderBreadcrumbControl breadcrumbs;
MultiHeaderTitle title;
Children = new Drawable[] Children = new Drawable[]
{ {
new Box new Box
{ {
RelativeSizeAxes = Axes.Both, RelativeSizeAxes = Axes.Both,
Colour = Color4Extensions.FromHex(@"2f2043"), Colour = Color4Extensions.FromHex(@"#1f1921"),
}, },
new Container new Container
{ {
Anchor = Anchor.CentreLeft,
Origin = Anchor.CentreLeft,
RelativeSizeAxes = Axes.Both, RelativeSizeAxes = Axes.Both,
Padding = new MarginPadding { Horizontal = SearchableListOverlay.WIDTH_PADDING + OsuScreen.HORIZONTAL_OVERFLOW_PADDING }, Padding = new MarginPadding { Left = SearchableListOverlay.WIDTH_PADDING + OsuScreen.HORIZONTAL_OVERFLOW_PADDING },
Children = new Drawable[] Children = new Drawable[]
{ {
title = new MultiHeaderTitle title = new MultiHeaderTitle
{ {
Anchor = Anchor.CentreLeft, Anchor = Anchor.CentreLeft,
Origin = Anchor.BottomLeft, Origin = Anchor.BottomLeft,
X = -MultiHeaderTitle.ICON_WIDTH,
}, },
breadcrumbs = new HeaderBreadcrumbControl(stack) breadcrumbs = new HeaderBreadcrumbControl(stack)
{ {
Anchor = Anchor.BottomLeft, Anchor = Anchor.BottomLeft,
Origin = Anchor.BottomLeft, Origin = Anchor.BottomLeft
RelativeSizeAxes = Axes.X, }
},
}, },
}, },
}; };
@ -67,32 +68,16 @@ namespace osu.Game.Screens.Multi
breadcrumbs.Current.TriggerChange(); breadcrumbs.Current.TriggerChange();
} }
[BackgroundDependencyLoader] private class MultiHeaderTitle : CompositeDrawable
private void load(OsuColour colours)
{ {
breadcrumbs.StripColour = colours.Green;
}
private class MultiHeaderTitle : CompositeDrawable, IHasAccentColour
{
public const float ICON_WIDTH = icon_size + spacing;
private const float icon_size = 25;
private const float spacing = 6; private const float spacing = 6;
private const int text_offset = 2;
private readonly SpriteIcon iconSprite; private readonly OsuSpriteText dot;
private readonly OsuSpriteText title, pageText; private readonly OsuSpriteText pageTitle;
public IMultiplayerSubScreen Screen public IMultiplayerSubScreen Screen
{ {
set => pageText.Text = value.ShortTitle.ToLowerInvariant(); set => pageTitle.Text = value.ShortTitle.Titleize();
}
public Color4 AccentColour
{
get => pageText.Colour;
set => pageText.Colour = value;
} }
public MultiHeaderTitle() public MultiHeaderTitle()
@ -108,32 +93,26 @@ namespace osu.Game.Screens.Multi
Direction = FillDirection.Horizontal, Direction = FillDirection.Horizontal,
Children = new Drawable[] Children = new Drawable[]
{ {
iconSprite = new SpriteIcon new OsuSpriteText
{
Size = new Vector2(icon_size),
Anchor = Anchor.Centre,
Origin = Anchor.Centre
},
title = new OsuSpriteText
{ {
Anchor = Anchor.Centre, Anchor = Anchor.Centre,
Origin = Anchor.Centre, Origin = Anchor.Centre,
Font = OsuFont.GetFont(size: 20, weight: FontWeight.Bold), Font = OsuFont.GetFont(size: 24),
Margin = new MarginPadding { Bottom = text_offset } Text = "Multiplayer"
}, },
new Circle dot = new OsuSpriteText
{ {
Anchor = Anchor.Centre, Anchor = Anchor.Centre,
Origin = Anchor.Centre, Origin = Anchor.Centre,
Size = new Vector2(4), Font = OsuFont.GetFont(size: 24),
Colour = Color4.Gray, Text = "·"
}, },
pageText = new OsuSpriteText pageTitle = new OsuSpriteText
{ {
Anchor = Anchor.Centre, Anchor = Anchor.Centre,
Origin = Anchor.Centre, Origin = Anchor.Centre,
Font = OsuFont.GetFont(size: 20), Font = OsuFont.GetFont(size: 24),
Margin = new MarginPadding { Bottom = text_offset } Text = "Lounge"
} }
} }
}, },
@ -143,9 +122,7 @@ namespace osu.Game.Screens.Multi
[BackgroundDependencyLoader] [BackgroundDependencyLoader]
private void load(OsuColour colours) private void load(OsuColour colours)
{ {
title.Text = "multi"; pageTitle.Colour = dot.Colour = colours.Yellow;
iconSprite.Icon = OsuIcon.Multi;
AccentColour = colours.Yellow;
} }
} }
@ -154,12 +131,28 @@ namespace osu.Game.Screens.Multi
public HeaderBreadcrumbControl(ScreenStack stack) public HeaderBreadcrumbControl(ScreenStack stack)
: base(stack) : base(stack)
{ {
RelativeSizeAxes = Axes.X;
StripColour = Color4.Transparent;
} }
protected override void LoadComplete() protected override void LoadComplete()
{ {
base.LoadComplete(); base.LoadComplete();
AccentColour = Color4.White; AccentColour = Color4Extensions.FromHex("#e35c99");
}
protected override TabItem<IScreen> CreateTabItem(IScreen value) => new HeaderBreadcrumbTabItem(value)
{
AccentColour = AccentColour
};
private class HeaderBreadcrumbTabItem : BreadcrumbTabItem
{
public HeaderBreadcrumbTabItem(IScreen value)
: base(value)
{
Bar.Colour = Color4.Transparent;
}
} }
} }
} }

2
osu.Game/Screens/Multi/Match/Components/Footer.cs
View File

@ -16,7 +16,7 @@ namespace osu.Game.Screens.Multi.Match.Components
{ {
public class Footer : CompositeDrawable public class Footer : CompositeDrawable
{ {
public const float HEIGHT = 100; public const float HEIGHT = 50;
public Action OnStart; public Action OnStart;
public readonly Bindable<PlaylistItem> SelectedItem = new Bindable<PlaylistItem>(); public readonly Bindable<PlaylistItem> SelectedItem = new Bindable<PlaylistItem>();

4
osu.Game/Screens/Multi/Match/Components/Header.cs
View File

@ -52,7 +52,7 @@ namespace osu.Game.Screens.Multi.Match.Components
Font = OsuFont.GetFont(size: 30), Font = OsuFont.GetFont(size: 30),
Current = { BindTarget = RoomName } Current = { BindTarget = RoomName }
}, },
hostText = new LinkFlowContainer(s => s.Font = OsuFont.GetFont(size: 20, weight: FontWeight.SemiBold)) hostText = new LinkFlowContainer(s => s.Font = OsuFont.GetFont(size: 20))
{ {
AutoSizeAxes = Axes.Both, AutoSizeAxes = Axes.Both,
Direction = FillDirection.Horizontal, Direction = FillDirection.Horizontal,
@ -71,7 +71,7 @@ namespace osu.Game.Screens.Multi.Match.Components
if (host.NewValue != null) if (host.NewValue != null)
{ {
hostText.AddText("hosted by "); hostText.AddText("hosted by ");
hostText.AddUserLink(host.NewValue); hostText.AddUserLink(host.NewValue, s => s.Font = s.Font.With(weight: FontWeight.SemiBold));
} }
}, true); }, true);
} }

100
osu.Game/Screens/Multi/Match/Components/LeaderboardChatDisplay.cs
View File

@ -1,100 +0,0 @@
// 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.Allocation;
using osu.Framework.Bindables;
using osu.Framework.Graphics;
using osu.Framework.Graphics.Containers;
using osu.Framework.Graphics.UserInterface;
using osu.Game.Graphics;
using osu.Game.Graphics.UserInterface;
namespace osu.Game.Screens.Multi.Match.Components
{
public class LeaderboardChatDisplay : MultiplayerComposite
{
private const double fade_duration = 100;
private readonly OsuTabControl<DisplayMode> tabControl;
private readonly MatchLeaderboard leaderboard;
private readonly MatchChatDisplay chat;
public LeaderboardChatDisplay()
{
RelativeSizeAxes = Axes.Both;
InternalChild = new GridContainer
{
RelativeSizeAxes = Axes.Both,
Content = new[]
{
new Drawable[]
{
tabControl = new DisplayModeTabControl
{
RelativeSizeAxes = Axes.X,
Height = 24,
}
},
new Drawable[]
{
new Container
{
RelativeSizeAxes = Axes.Both,
Padding = new MarginPadding { Top = 10 },
Children = new Drawable[]
{
leaderboard = new MatchLeaderboard { RelativeSizeAxes = Axes.Both },
chat = new MatchChatDisplay
{
RelativeSizeAxes = Axes.Both,
Alpha = 0
}
}
}
},
},
RowDimensions = new[]
{
new Dimension(GridSizeMode.AutoSize),
}
};
}
[BackgroundDependencyLoader]
private void load(OsuColour colours)
{
tabControl.AccentColour = colours.Yellow;
}
protected override void LoadComplete()
{
base.LoadComplete();
tabControl.Current.BindValueChanged(changeTab);
}
public void RefreshScores() => leaderboard.RefreshScores();
private void changeTab(ValueChangedEvent<DisplayMode> mode)
{
chat.FadeTo(mode.NewValue == DisplayMode.Chat ? 1 : 0, fade_duration);
leaderboard.FadeTo(mode.NewValue == DisplayMode.Leaderboard ? 1 : 0, fade_duration);
}
private class DisplayModeTabControl : OsuTabControl<DisplayMode>
{
protected override TabItem<DisplayMode> CreateTabItem(DisplayMode value) => base.CreateTabItem(value).With(d =>
{
d.Anchor = Anchor.Centre;
d.Origin = Anchor.Centre;
});
}
private enum DisplayMode
{
Leaderboard,
Chat,
}
}
}

20
osu.Game/Screens/Multi/Match/Components/OverlinedChatDisplay.cs Normal file
View File

@ -0,0 +1,20 @@
// 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.Graphics;
using osu.Game.Screens.Multi.Components;
namespace osu.Game.Screens.Multi.Match.Components
{
public class OverlinedChatDisplay : OverlinedDisplay
{
public OverlinedChatDisplay()
: base("Chat")
{
Content.Add(new MatchChatDisplay
{
RelativeSizeAxes = Axes.Both
});
}
}
}

24
osu.Game/Screens/Multi/Match/Components/OverlinedLeaderboard.cs Normal file
View File

@ -0,0 +1,24 @@
// 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.Graphics;
using osu.Game.Screens.Multi.Components;
namespace osu.Game.Screens.Multi.Match.Components
{
public class OverlinedLeaderboard : OverlinedDisplay
{
private readonly MatchLeaderboard leaderboard;
public OverlinedLeaderboard()
: base("Leaderboard")
{
Content.Add(leaderboard = new MatchLeaderboard
{
RelativeSizeAxes = Axes.Both
});
}
public void RefreshScores() => leaderboard.RefreshScores();
}
}

65
osu.Game/Screens/Multi/Match/MatchSubScreen.cs
View File

@ -52,8 +52,8 @@ namespace osu.Game.Screens.Multi.Match
protected readonly Bindable<PlaylistItem> SelectedItem = new Bindable<PlaylistItem>(); protected readonly Bindable<PlaylistItem> SelectedItem = new Bindable<PlaylistItem>();
private LeaderboardChatDisplay leaderboardChatDisplay;
private MatchSettingsOverlay settingsOverlay; private MatchSettingsOverlay settingsOverlay;
private OverlinedLeaderboard leaderboard;
private IBindable<WeakReference<BeatmapSetInfo>> managerUpdated; private IBindable<WeakReference<BeatmapSetInfo>> managerUpdated;
@ -87,21 +87,29 @@ namespace osu.Game.Screens.Multi.Match
RelativeSizeAxes = Axes.Both, RelativeSizeAxes = Axes.Both,
Content = new[] Content = new[]
{ {
new Drawable[] { new Components.Header() }, new Drawable[]
{
new Components.Header()
},
new Drawable[] new Drawable[]
{ {
new Container new Container
{ {
RelativeSizeAxes = Axes.Both, RelativeSizeAxes = Axes.X,
Padding = new MarginPadding { Top = 65 }, AutoSizeAxes = Axes.Y,
Child = new GridContainer Margin = new MarginPadding { Top = 10 },
Child = new OverlinedParticipants(Direction.Horizontal)
{ {
ColumnDimensions = new[] RelativeSizeAxes = Axes.X,
{ AutoSizeAxes = Axes.Y,
new Dimension(minSize: 160), ShowLine = false
new Dimension(minSize: 360), }
new Dimension(minSize: 400), }
}, },
new Drawable[]
{
new GridContainer
{
RelativeSizeAxes = Axes.Both, RelativeSizeAxes = Axes.Both,
Content = new[] Content = new[]
{ {
@ -111,12 +119,6 @@ namespace osu.Game.Screens.Multi.Match
{ {
RelativeSizeAxes = Axes.Both, RelativeSizeAxes = Axes.Both,
Padding = new MarginPadding { Right = 5 }, Padding = new MarginPadding { Right = 5 },
Child = new OverlinedParticipants(Direction.Vertical) { RelativeSizeAxes = Axes.Both }
},
new Container
{
RelativeSizeAxes = Axes.Both,
Padding = new MarginPadding { Horizontal = 5 },
Child = new GridContainer Child = new GridContainer
{ {
RelativeSizeAxes = Axes.Both, RelativeSizeAxes = Axes.Both,
@ -149,20 +151,43 @@ namespace osu.Game.Screens.Multi.Match
} }
} }
}, },
new Container null,
new GridContainer
{ {
RelativeSizeAxes = Axes.Both, RelativeSizeAxes = Axes.Both,
Padding = new MarginPadding { Left = 5 }, Content = new[]
Child = leaderboardChatDisplay = new LeaderboardChatDisplay() {
new Drawable[]
{
leaderboard = new OverlinedLeaderboard { RelativeSizeAxes = Axes.Both },
},
new Drawable[]
{
new OverlinedChatDisplay { RelativeSizeAxes = Axes.Both }
} }
}, },
RowDimensions = new[]
{
new Dimension(),
new Dimension(GridSizeMode.Relative, size: 0.4f, minSize: 240),
} }
},
null
},
},
ColumnDimensions = new[]
{
new Dimension(GridSizeMode.Relative, size: 0.5f, maxSize: 400),
new Dimension(),
new Dimension(GridSizeMode.Relative, size: 0.5f, maxSize: 600),
new Dimension(),
} }
} }
} }
}, },
RowDimensions = new[] RowDimensions = new[]
{ {
new Dimension(GridSizeMode.AutoSize),
new Dimension(GridSizeMode.AutoSize), new Dimension(GridSizeMode.AutoSize),
new Dimension(), new Dimension(),
} }
@ -261,7 +286,7 @@ namespace osu.Game.Screens.Multi.Match
case GameTypeTimeshift _: case GameTypeTimeshift _:
multiplayer?.Push(new PlayerLoader(() => new TimeshiftPlayer(SelectedItem.Value) multiplayer?.Push(new PlayerLoader(() => new TimeshiftPlayer(SelectedItem.Value)
{ {
Exited = () => leaderboardChatDisplay.RefreshScores() Exited = () => leaderboard.RefreshScores()
})); }));
break; break;
} }

2
osu.Game/Screens/Multi/Multiplayer.cs
View File

@ -117,7 +117,7 @@ namespace osu.Game.Screens.Multi
Child = new Box Child = new Box
{ {
RelativeSizeAxes = Axes.Both, RelativeSizeAxes = Axes.Both,
Colour = ColourInfo.GradientVertical(backgroundColour.Opacity(0.7f), backgroundColour) Colour = ColourInfo.GradientVertical(backgroundColour.Opacity(0.5f), backgroundColour)
}, },
} }
} }