diff --git a/osu.Desktop.VisualTests/Tests/TestCaseUserPanel.cs b/osu.Desktop.VisualTests/Tests/TestCaseUserPanel.cs new file mode 100644 index 0000000000..513bf24e0d --- /dev/null +++ b/osu.Desktop.VisualTests/Tests/TestCaseUserPanel.cs @@ -0,0 +1,57 @@ +// Copyright (c) 2007-2017 ppy Pty Ltd . +// Licensed under the MIT Licence - https://raw.githubusercontent.com/ppy/osu/master/LICENCE + +using osu.Framework.Testing; +using osu.Framework.Graphics; +using osu.Game.Users; +using osu.Framework.Graphics.Containers; +using OpenTK; + +namespace osu.Desktop.VisualTests.Tests +{ + internal class TestCaseUserPanel : TestCase + { + public override string Description => @"Panels for displaying a user's status"; + + public override void Reset() + { + base.Reset(); + + UserPanel flyte; + UserPanel peppy; + Add(new FillFlowContainer + { + Anchor = Anchor.Centre, + Origin = Anchor.Centre, + AutoSizeAxes = Axes.Both, + Spacing = new Vector2(10f), + Children = new[] + { + flyte = new UserPanel(new User + { + Username = @"flyte", + Id = 3103765, + Country = new Country { FlagName = @"JP" }, + CoverUrl = @"https://assets.ppy.sh/user-profile-covers/3103765/5b012e13611d5761caa7e24fecb3d3a16e1cf48fc2a3032cfd43dd444af83d82.jpeg" + }) { Width = 300 }, + peppy = new UserPanel(new User + { + Username = @"peppy", + Id = 2, + Country = new Country { FlagName = @"AU" }, + CoverUrl = @"https://assets.ppy.sh/user-profile-covers/2/08cad88747c235a64fca5f1b770e100f120827ded1ffe3b66bfcd19c940afa65.jpeg" + }) { Width = 300 }, + }, + }); + + flyte.Status.Value = new UserStatusOnline(); + peppy.Status.Value = new UserStatusSoloGame(); + + AddStep(@"spectating", () => { flyte.Status.Value = new UserStatusSpectating(); }); + AddStep(@"multiplaying", () => { flyte.Status.Value = new UserStatusMultiplayerGame(); }); + AddStep(@"modding", () => { flyte.Status.Value = new UserStatusModding(); }); + AddStep(@"offline", () => { flyte.Status.Value = new UserStatusOffline(); }); + AddStep(@"null status", () => { flyte.Status.Value = null; }); + } + } +} diff --git a/osu.Desktop.VisualTests/osu.Desktop.VisualTests.csproj b/osu.Desktop.VisualTests/osu.Desktop.VisualTests.csproj index 8ec0fc83db..68dc8bb7b8 100644 --- a/osu.Desktop.VisualTests/osu.Desktop.VisualTests.csproj +++ b/osu.Desktop.VisualTests/osu.Desktop.VisualTests.csproj @@ -220,6 +220,7 @@ + diff --git a/osu.Game/Overlays/Settings/Sections/General/LoginSettings.cs b/osu.Game/Overlays/Settings/Sections/General/LoginSettings.cs index 86a47d8a95..d94388ed87 100644 --- a/osu.Game/Overlays/Settings/Sections/General/LoginSettings.cs +++ b/osu.Game/Overlays/Settings/Sections/General/LoginSettings.cs @@ -12,6 +12,7 @@ using osu.Game.Graphics.UserInterface; using osu.Game.Online.API; using OpenTK; using osu.Framework.Input; +using osu.Game.Users; namespace osu.Game.Overlays.Settings.Sections.General { @@ -73,9 +74,9 @@ namespace osu.Game.Overlays.Settings.Sections.General case APIState.Online: Children = new Drawable[] { - new OsuSpriteText + new UserPanel(api.LocalUser.Value) { - Text = $"Connected as {api.Username}!", + RelativeSizeAxes = Axes.X, }, new OsuButton { diff --git a/osu.Game/Users/UserPanel.cs b/osu.Game/Users/UserPanel.cs new file mode 100644 index 0000000000..c78a69dac8 --- /dev/null +++ b/osu.Game/Users/UserPanel.cs @@ -0,0 +1,209 @@ +// Copyright (c) 2007-2017 ppy Pty Ltd . +// Licensed under the MIT Licence - https://raw.githubusercontent.com/ppy/osu/master/LICENCE + +using OpenTK; +using OpenTK.Graphics; +using osu.Framework.Allocation; +using osu.Framework.Configuration; +using osu.Framework.Extensions.Color4Extensions; +using osu.Framework.Graphics; +using osu.Framework.Graphics.Containers; +using osu.Framework.Graphics.Sprites; +using osu.Framework.Graphics.Textures; +using osu.Game.Graphics; +using osu.Game.Graphics.Sprites; + +namespace osu.Game.Users +{ + public class UserPanel : Container + { + private const float height = 100; + private const float content_padding = 10; + private const float status_height = 30; + + private OsuColour colours; + + private readonly Container statusBar; + private readonly Box statusBg; + private readonly OsuSpriteText statusMessage; + + public readonly Bindable Status = new Bindable(); + + public UserPanel(User user) + { + Height = height - status_height; + Masking = true; + CornerRadius = 5; + EdgeEffect = new EdgeEffect + { + Type = EdgeEffectType.Shadow, + Colour = Color4.Black.Opacity(0.25f), + Radius = 4, + }; + + Children = new Drawable[] + { + new AsyncLoadWrapper(new CoverBackgroundSprite(user) + { + Anchor = Anchor.Centre, + Origin = Anchor.Centre, + FillMode = FillMode.Fill, + OnLoadComplete = d => d.FadeInFromZero(200), + }) { RelativeSizeAxes = Axes.Both }, + new Box + { + RelativeSizeAxes = Axes.Both, + Colour = Color4.Black.Opacity(0.7f), + }, + new Container + { + RelativeSizeAxes = Axes.X, + AutoSizeAxes = Axes.Y, + Padding = new MarginPadding { Top = content_padding, Left = content_padding, Right = content_padding }, + Children = new Drawable[] + { + new UpdateableAvatar + { + Size = new Vector2(height - status_height - content_padding * 2), + User = user, + Masking = true, + CornerRadius = 5, + EdgeEffect = new EdgeEffect + { + Type = EdgeEffectType.Shadow, + Colour = Color4.Black.Opacity(0.25f), + Radius = 4, + }, + }, + new Container + { + RelativeSizeAxes = Axes.Both, + Padding = new MarginPadding { Left = height - status_height - content_padding }, + Children = new Drawable[] + { + new OsuSpriteText + { + Text = user.Username, + TextSize = 18, + Font = @"Exo2.0-SemiBoldItalic", + }, + new FillFlowContainer + { + Anchor = Anchor.BottomLeft, + Origin = Anchor.BottomLeft, + AutoSizeAxes = Axes.X, + Height = 20f, + Direction = FillDirection.Horizontal, + Spacing = new Vector2(5f, 0f), + Children = new Drawable[] + { + new DrawableFlag(user.Country?.FlagName ?? @"__") + { + Width = 30f, + RelativeSizeAxes = Axes.Y, + }, + new Container + { + Width = 40f, + RelativeSizeAxes = Axes.Y, + }, + new CircularContainer + { + Width = 20f, + RelativeSizeAxes = Axes.Y, + }, + }, + }, + }, + }, + }, + }, + statusBar = new Container + { + Anchor = Anchor.BottomLeft, + Origin = Anchor.BottomLeft, + RelativeSizeAxes = Axes.X, + Alpha = 0f, + Children = new Drawable[] + { + statusBg = new Box + { + RelativeSizeAxes = Axes.Both, + Alpha = 0.5f, + }, + new FillFlowContainer + { + Anchor = Anchor.Centre, + Origin = Anchor.Centre, + AutoSizeAxes = Axes.Both, + Spacing = new Vector2(5f, 0f), + Children = new[] + { + new TextAwesome + { + Anchor = Anchor.CentreLeft, + Origin = Anchor.CentreLeft, + Icon = FontAwesome.fa_circle_o, + Shadow = true, + TextSize = 14, + }, + statusMessage = new OsuSpriteText + { + Anchor = Anchor.CentreLeft, + Origin = Anchor.CentreLeft, + Font = @"Exo2.0-Semibold", + }, + }, + }, + }, + }, + }; + + Status.ValueChanged += displayStatus; + } + + [BackgroundDependencyLoader] + private void load(OsuColour colours) + { + this.colours = colours; + } + + private void displayStatus(UserStatus status) + { + const float transition_duration = 500; + + if (status == null) + { + statusBar.ResizeHeightTo(0f, transition_duration, EasingTypes.OutQuint); + statusBar.FadeOut(transition_duration, EasingTypes.OutQuint); + ResizeHeightTo(height - status_height, transition_duration, EasingTypes.OutQuint); + } + else + { + statusBar.ResizeHeightTo(status_height, transition_duration, EasingTypes.OutQuint); + statusBar.FadeIn(transition_duration, EasingTypes.OutQuint); + ResizeHeightTo(height, transition_duration, EasingTypes.OutQuint); + + statusBg.FadeColour(status.GetAppropriateColour(colours), 500, EasingTypes.OutQuint); + statusMessage.Text = status.Message; + } + } + + private class CoverBackgroundSprite : Sprite + { + private readonly User user; + + public CoverBackgroundSprite(User user) + { + this.user = user; + } + + [BackgroundDependencyLoader] + private void load(TextureStore textures) + { + if (!string.IsNullOrEmpty(user.CoverUrl)) + Texture = textures.Get(user.CoverUrl); + } + } + } +} diff --git a/osu.Game/Users/UserStatus.cs b/osu.Game/Users/UserStatus.cs new file mode 100644 index 0000000000..dcb5ccbd8f --- /dev/null +++ b/osu.Game/Users/UserStatus.cs @@ -0,0 +1,61 @@ +// Copyright (c) 2007-2017 ppy Pty Ltd . +// Licensed under the MIT Licence - https://raw.githubusercontent.com/ppy/osu/master/LICENCE + +using OpenTK.Graphics; +using osu.Game.Graphics; + +namespace osu.Game.Users +{ + public abstract class UserStatus + { + public abstract string Message { get; } + public abstract Color4 GetAppropriateColour(OsuColour colours); + } + + public abstract class UserStatusAvailable : UserStatus + { + public override Color4 GetAppropriateColour(OsuColour colours) => colours.BlueDarker; + } + + public abstract class UserStatusBusy : UserStatus + { + public override Color4 GetAppropriateColour(OsuColour colours) => colours.YellowDark; + } + + public class UserStatusOffline : UserStatus + { + public override string Message => @"Offline"; + public override Color4 GetAppropriateColour(OsuColour colours) => colours.Gray7; + } + + public class UserStatusOnline : UserStatusAvailable + { + public override string Message => @"Online"; + } + + public class UserStatusSpectating : UserStatusAvailable + { + public override string Message => @"Spectating a game"; + } + + public class UserStatusInLobby : UserStatusAvailable + { + public override string Message => @"in Multiplayer Lobby"; + } + + public class UserStatusSoloGame : UserStatusBusy + { + public override string Message => @"Solo Game"; + } + + public class UserStatusMultiplayerGame: UserStatusBusy + { + public override string Message => @"Multiplaying"; + } + + public class UserStatusModding : UserStatus + { + public override string Message => @"Modding a map"; + public override Color4 GetAppropriateColour(OsuColour colours) => colours.PurpleDark; + } +} diff --git a/osu.Game/osu.Game.csproj b/osu.Game/osu.Game.csproj index 84ccec8763..98fb4b9707 100644 --- a/osu.Game/osu.Game.csproj +++ b/osu.Game/osu.Game.csproj @@ -432,6 +432,8 @@ + +