h1or4dme8/osu-lazer
1
0
Fork 0
mirror of https://github.com/ppy/osu.git synced 2025-02-13 12:02:54 +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());
}
[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]
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
{
set => details.Text = value;
@ -72,9 +84,12 @@ namespace osu.Game.Screens.Multi.Components
new OsuSpriteText
{
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,
AutoSizeAxes = AutoSizeAxes,
RelativeSizeAxes = RelativeSizeAxes,
Spacing = new Vector2(10)
Spacing = Vector2.One
};
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.
// See the LICENCE file in the repository root for full licence text.
using Humanizer;
using osu.Framework.Allocation;
using osu.Framework.Extensions.Color4Extensions;
using osu.Framework.Graphics;
using osu.Framework.Graphics.Containers;
using osu.Framework.Graphics.Shapes;
using osu.Framework.Graphics.Sprites;
using osu.Framework.Graphics.UserInterface;
using osu.Framework.Screens;
using osu.Game.Graphics;
using osu.Game.Graphics.UserInterface;
@ -19,41 +20,41 @@ namespace osu.Game.Screens.Multi
{
public class Header : Container
{
public const float HEIGHT = 121;
private readonly HeaderBreadcrumbControl breadcrumbs;
public const float HEIGHT = 80;
public Header(ScreenStack stack)
{
MultiHeaderTitle title;
RelativeSizeAxes = Axes.X;
Height = HEIGHT;
HeaderBreadcrumbControl breadcrumbs;
MultiHeaderTitle title;
Children = new Drawable[]
{
new Box
{
RelativeSizeAxes = Axes.Both,
Colour = Color4Extensions.FromHex(@"2f2043"),
Colour = Color4Extensions.FromHex(@"#1f1921"),
},
new Container
{
Anchor = Anchor.CentreLeft,
Origin = Anchor.CentreLeft,
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[]
{
title = new MultiHeaderTitle
{
Anchor = Anchor.CentreLeft,
Origin = Anchor.BottomLeft,
X = -MultiHeaderTitle.ICON_WIDTH,
},
breadcrumbs = new HeaderBreadcrumbControl(stack)
{
Anchor = Anchor.BottomLeft,
Origin = Anchor.BottomLeft,
RelativeSizeAxes = Axes.X,
},
Origin = Anchor.BottomLeft
}
},
},
};
@ -67,32 +68,16 @@ namespace osu.Game.Screens.Multi
breadcrumbs.Current.TriggerChange();
}
[BackgroundDependencyLoader]
private void load(OsuColour colours)
private class MultiHeaderTitle : CompositeDrawable
{
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 int text_offset = 2;
private readonly SpriteIcon iconSprite;
private readonly OsuSpriteText title, pageText;
private readonly OsuSpriteText dot;
private readonly OsuSpriteText pageTitle;
public IMultiplayerSubScreen Screen
{
set => pageText.Text = value.ShortTitle.ToLowerInvariant();
}
public Color4 AccentColour
{
get => pageText.Colour;
set => pageText.Colour = value;
set => pageTitle.Text = value.ShortTitle.Titleize();
}
public MultiHeaderTitle()
@ -108,32 +93,26 @@ namespace osu.Game.Screens.Multi
Direction = FillDirection.Horizontal,
Children = new Drawable[]
{
iconSprite = new SpriteIcon
{
Size = new Vector2(icon_size),
Anchor = Anchor.Centre,
Origin = Anchor.Centre
},
title = new OsuSpriteText
new OsuSpriteText
{
Anchor = Anchor.Centre,
Origin = Anchor.Centre,
Font = OsuFont.GetFont(size: 20, weight: FontWeight.Bold),
Margin = new MarginPadding { Bottom = text_offset }
Font = OsuFont.GetFont(size: 24),
Text = "Multiplayer"
},
new Circle
dot = new OsuSpriteText
{
Anchor = Anchor.Centre,
Origin = Anchor.Centre,
Size = new Vector2(4),
Colour = Color4.Gray,
Font = OsuFont.GetFont(size: 24),
Text = "·"
},
pageText = new OsuSpriteText
pageTitle = new OsuSpriteText
{
Anchor = Anchor.Centre,
Origin = Anchor.Centre,
Font = OsuFont.GetFont(size: 20),
Margin = new MarginPadding { Bottom = text_offset }
Font = OsuFont.GetFont(size: 24),
Text = "Lounge"
}
}
},
@ -143,9 +122,7 @@ namespace osu.Game.Screens.Multi
[BackgroundDependencyLoader]
private void load(OsuColour colours)
{
title.Text = "multi";
iconSprite.Icon = OsuIcon.Multi;
AccentColour = colours.Yellow;
pageTitle.Colour = dot.Colour = colours.Yellow;
}
}
@ -154,12 +131,28 @@ namespace osu.Game.Screens.Multi
public HeaderBreadcrumbControl(ScreenStack stack)
: base(stack)
{
RelativeSizeAxes = Axes.X;
StripColour = Color4.Transparent;
}
protected override void 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 const float HEIGHT = 100;
public const float HEIGHT = 50;
public Action OnStart;
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),
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,
Direction = FillDirection.Horizontal,
@ -71,7 +71,7 @@ namespace osu.Game.Screens.Multi.Match.Components
if (host.NewValue != null)
{
hostText.AddText("hosted by ");
hostText.AddUserLink(host.NewValue);
hostText.AddUserLink(host.NewValue, s => s.Font = s.Font.With(weight: FontWeight.SemiBold));
}
}, 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();
}
}

131
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>();
private LeaderboardChatDisplay leaderboardChatDisplay;
private MatchSettingsOverlay settingsOverlay;
private OverlinedLeaderboard leaderboard;
private IBindable<WeakReference<BeatmapSetInfo>> managerUpdated;
@ -87,82 +87,107 @@ namespace osu.Game.Screens.Multi.Match
RelativeSizeAxes = Axes.Both,
Content = new[]
{
new Drawable[] { new Components.Header() },
new Drawable[]
{
new Components.Header()
},
new Drawable[]
{
new Container
{
RelativeSizeAxes = Axes.Both,
Padding = new MarginPadding { Top = 65 },
Child = new GridContainer
RelativeSizeAxes = Axes.X,
AutoSizeAxes = Axes.Y,
Margin = new MarginPadding { Top = 10 },
Child = new OverlinedParticipants(Direction.Horizontal)
{
ColumnDimensions = new[]
RelativeSizeAxes = Axes.X,
AutoSizeAxes = Axes.Y,
ShowLine = false
}
}
},
new Drawable[]
{
new GridContainer
{
RelativeSizeAxes = Axes.Both,
Content = new[]
{
new Drawable[]
{
new Dimension(minSize: 160),
new Dimension(minSize: 360),
new Dimension(minSize: 400),
},
RelativeSizeAxes = Axes.Both,
Content = new[]
{
new Drawable[]
new Container
{
new Container
RelativeSizeAxes = Axes.Both,
Padding = new MarginPadding { Right = 5 },
Child = new GridContainer
{
RelativeSizeAxes = Axes.Both,
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
Content = new[]
{
RelativeSizeAxes = Axes.Both,
Content = new[]
new Drawable[]
{
new Drawable[]
new OverlinedPlaylist(true) // Temporarily always allow selection
{
new OverlinedPlaylist(true) // Temporarily always allow selection
{
RelativeSizeAxes = Axes.Both,
SelectedItem = { BindTarget = SelectedItem }
}
},
null,
new Drawable[]
{
new TriangleButton
{
RelativeSizeAxes = Axes.X,
Text = "Show beatmap results",
Action = showBeatmapResults
}
RelativeSizeAxes = Axes.Both,
SelectedItem = { BindTarget = SelectedItem }
}
},
RowDimensions = new[]
null,
new Drawable[]
{
new Dimension(),
new Dimension(GridSizeMode.Absolute, 5),
new Dimension(GridSizeMode.AutoSize)
new TriangleButton
{
RelativeSizeAxes = Axes.X,
Text = "Show beatmap results",
Action = showBeatmapResults
}
}
},
RowDimensions = new[]
{
new Dimension(),
new Dimension(GridSizeMode.Absolute, 5),
new Dimension(GridSizeMode.AutoSize)
}
},
new Container
{
RelativeSizeAxes = Axes.Both,
Padding = new MarginPadding { Left = 5 },
Child = leaderboardChatDisplay = new LeaderboardChatDisplay()
}
},
}
null,
new GridContainer
{
RelativeSizeAxes = Axes.Both,
Content = new[]
{
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[]
{
new Dimension(GridSizeMode.AutoSize),
new Dimension(GridSizeMode.AutoSize),
new Dimension(),
}
@ -261,7 +286,7 @@ namespace osu.Game.Screens.Multi.Match
case GameTypeTimeshift _:
multiplayer?.Push(new PlayerLoader(() => new TimeshiftPlayer(SelectedItem.Value)
{
Exited = () => leaderboardChatDisplay.RefreshScores()
Exited = () => leaderboard.RefreshScores()
}));
break;
}

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

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