sim1222/osukey
1
1
Fork 0
mirror of https://github.com/osukey/osukey.git synced 2025-07-02 08:49:59 +09:00
Code Issues Packages Projects Releases Wiki Activity

Initial redesign of DrawableRoom

Browse Source
This commit is contained in:
smoogipoo
2021-07-06 20:04:32 +09:00
parent 2ddfa15a80
commit 8929aa0ca7
2 changed files with 57 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
osu.Game.Tests/Visual/Multiplayer/TestSceneDrawableRoom.cs
View File

@ -8,6 +8,7 @@ using osu.Game.Graphics.UserInterface;
using osu.Game.Online.Rooms; using osu.Game.Online.Rooms;
using osu.Game.Online.Rooms.RoomStatuses; using osu.Game.Online.Rooms.RoomStatuses;
using osu.Game.Screens.OnlinePlay.Lounge.Components; using osu.Game.Screens.OnlinePlay.Lounge.Components;
using osuTK;
namespace osu.Game.Tests.Visual.Multiplayer namespace osu.Game.Tests.Visual.Multiplayer
{ {
@ -17,31 +18,34 @@ namespace osu.Game.Tests.Visual.Multiplayer
{ {
Child = new FillFlowContainer Child = new FillFlowContainer
{ {
Anchor = Anchor.Centre,
Origin = Anchor.Centre,
RelativeSizeAxes = Axes.Both, RelativeSizeAxes = Axes.Both,
Width = 0.5f, Size = new Vector2(0.9f),
Spacing = new Vector2(10),
Children = new Drawable[] Children = new Drawable[]
{ {
createDrawableRoom(new Room createDrawableRoom(new Room
{ {
Name = { Value = "Open - ending in 1 day" }, Name = { Value = "Room name: Open - ending in 1 day" },
Status = { Value = new RoomStatusOpen() }, Status = { Value = new RoomStatusOpen() },
EndDate = { Value = DateTimeOffset.Now.AddDays(1) } EndDate = { Value = DateTimeOffset.Now.AddDays(1) }
}), }),
createDrawableRoom(new Room createDrawableRoom(new Room
{ {
Name = { Value = "Playing - ending in 1 day" }, Name = { Value = "Room name: Playing - ending in 1 day" },
Status = { Value = new RoomStatusPlaying() }, Status = { Value = new RoomStatusPlaying() },
EndDate = { Value = DateTimeOffset.Now.AddDays(1) } EndDate = { Value = DateTimeOffset.Now.AddDays(1) }
}), }),
createDrawableRoom(new Room createDrawableRoom(new Room
{ {
Name = { Value = "Ended" }, Name = { Value = "Room name: Ended" },
Status = { Value = new RoomStatusEnded() }, Status = { Value = new RoomStatusEnded() },
EndDate = { Value = DateTimeOffset.Now } EndDate = { Value = DateTimeOffset.Now }
}), }),
createDrawableRoom(new Room createDrawableRoom(new Room
{ {
Name = { Value = "Open" }, Name = { Value = "Room name: Open" },
Status = { Value = new RoomStatusOpen() }, Status = { Value = new RoomStatusOpen() },
Category = { Value = RoomCategory.Realtime } Category = { Value = RoomCategory.Realtime }
}), }),

104
osu.Game/Screens/OnlinePlay/Lounge/Components/DrawableRoom.cs
View File

@ -8,6 +8,7 @@ using osu.Framework.Allocation;
using osu.Framework.Bindables; using osu.Framework.Bindables;
using osu.Framework.Extensions.Color4Extensions; using osu.Framework.Extensions.Color4Extensions;
using osu.Framework.Graphics; using osu.Framework.Graphics;
using osu.Framework.Graphics.Colour;
using osu.Framework.Graphics.Containers; using osu.Framework.Graphics.Containers;
using osu.Framework.Graphics.Cursor; using osu.Framework.Graphics.Cursor;
using osu.Framework.Graphics.Effects; using osu.Framework.Graphics.Effects;
@ -29,16 +30,13 @@ namespace osu.Game.Screens.OnlinePlay.Lounge.Components
public class DrawableRoom : OsuClickableContainer, IStateful<SelectionState>, IFilterable, IHasContextMenu public class DrawableRoom : OsuClickableContainer, IStateful<SelectionState>, IFilterable, IHasContextMenu
{ {
public const float SELECTION_BORDER_WIDTH = 4; public const float SELECTION_BORDER_WIDTH = 4;
private const float corner_radius = 5; private const float corner_radius = 10;
private const float transition_duration = 60; private const float transition_duration = 60;
private const float content_padding = 10; private const float height = 100;
private const float height = 110;
private const float side_strip_width = 5;
private const float cover_width = 145;
public event Action<SelectionState> StateChanged; public event Action<SelectionState> StateChanged;
private Box selectionBox; private Drawable selectionBox;
[Resolved(canBeNull: true)] [Resolved(canBeNull: true)]
private OnlinePlayScreen parentScreen { get; set; } private OnlinePlayScreen parentScreen { get; set; }
@ -108,23 +106,12 @@ namespace osu.Game.Screens.OnlinePlay.Lounge.Components
[BackgroundDependencyLoader] [BackgroundDependencyLoader]
private void load(OsuColour colours) private void load(OsuColour colours)
{ {
float stripWidth = side_strip_width * (Room.Category.Value == RoomCategory.Spotlight ? 2 : 1);
Children = new Drawable[] Children = new Drawable[]
{ {
new StatusColouredContainer(transition_duration)
{
RelativeSizeAxes = Axes.Both,
Child = selectionBox = new Box
{
RelativeSizeAxes = Axes.Both,
Alpha = state == SelectionState.Selected ? 1 : 0,
}
},
new Container new Container
{ {
Name = @"Room content",
RelativeSizeAxes = Axes.Both, RelativeSizeAxes = Axes.Both,
Padding = new MarginPadding(SELECTION_BORDER_WIDTH),
Child = new Container Child = new Container
{ {
RelativeSizeAxes = Axes.Both, RelativeSizeAxes = Axes.Both,
@ -141,68 +128,73 @@ namespace osu.Game.Screens.OnlinePlay.Lounge.Components
new Box new Box
{ {
RelativeSizeAxes = Axes.Both, RelativeSizeAxes = Axes.Both,
Colour = Color4Extensions.FromHex(@"212121"), Colour = Color4Extensions.FromHex(@"#27302E"),
},
new StatusColouredContainer(transition_duration)
{
RelativeSizeAxes = Axes.Y,
Width = stripWidth,
Child = new Box { RelativeSizeAxes = Axes.Both }
}, },
new Container new Container
{ {
RelativeSizeAxes = Axes.Y, Anchor = Anchor.CentreRight,
Width = cover_width, Origin = Anchor.CentreRight,
Masking = true, RelativeSizeAxes = Axes.Both,
Margin = new MarginPadding { Left = stripWidth }, FillMode = FillMode.Fill,
Child = new OnlinePlayBackgroundSprite(BeatmapSetCoverType.List) { RelativeSizeAxes = Axes.Both } Child = new OnlinePlayBackgroundSprite(BeatmapSetCoverType.List) { RelativeSizeAxes = Axes.Both }
}, },
new Box
{
RelativeSizeAxes = Axes.Both,
Colour = ColourInfo.GradientHorizontal(Color4Extensions.FromHex(@"#27302E"), Color4Extensions.FromHex(@"#27302E").Opacity(0.3f))
},
new Container new Container
{ {
Name = @"Left details",
RelativeSizeAxes = Axes.Both, RelativeSizeAxes = Axes.Both,
Padding = new MarginPadding Padding = new MarginPadding
{ {
Vertical = content_padding, Left = 20,
Left = stripWidth + cover_width + content_padding, Vertical = 5
Right = content_padding,
}, },
Children = new Drawable[] Children = new Drawable[]
{ {
new FillFlowContainer new RoomStatusInfo(),
new RoomName
{ {
RelativeSizeAxes = Axes.X, Anchor = Anchor.CentreLeft,
AutoSizeAxes = Axes.Y, Origin = Anchor.CentreLeft,
Direction = FillDirection.Vertical, Font = OsuFont.GetFont(size: 28)
Spacing = new Vector2(5f),
Children = new Drawable[]
{
new RoomName { Font = OsuFont.GetFont(size: 18) },
new ParticipantInfo(),
},
}, },
new FillFlowContainer new FillFlowContainer
{ {
Anchor = Anchor.BottomLeft, Anchor = Anchor.BottomLeft,
Origin = Anchor.BottomLeft, Origin = Anchor.BottomLeft,
RelativeSizeAxes = Axes.X, AutoSizeAxes = Axes.Both,
AutoSizeAxes = Axes.Y, Direction = FillDirection.Horizontal,
Direction = FillDirection.Vertical,
Spacing = new Vector2(0, 5),
Children = new Drawable[] Children = new Drawable[]
{ {
new RoomStatusInfo(), new StarRatingRangeDisplay { Scale = new Vector2(0.85f) }
new BeatmapTitle { TextSize = 14 }, }
}
}
}, },
}, },
new ModeTypeInfo },
},
new StatusColouredContainer(transition_duration)
{ {
Anchor = Anchor.BottomRight, RelativeSizeAxes = Axes.Both,
Origin = Anchor.BottomRight, Child = selectionBox = new Container
}, {
}, RelativeSizeAxes = Axes.Both,
}, Alpha = state == SelectionState.Selected ? 1 : 0,
}, Masking = true,
}, CornerRadius = corner_radius,
BorderThickness = SELECTION_BORDER_WIDTH,
BorderColour = Color4.White,
Child = new Box
{
RelativeSizeAxes = Axes.Both,
Alpha = 0,
AlwaysPresent = true
}
}
}, },
}; };
} }