1
0
mirror of https://github.com/ppy/osu.git synced 2025-03-18 04:49:34 +08:00

Update DrawableRoom design.

This commit is contained in:
DrabWeb 2017-06-24 05:05:48 -03:00
parent 7e5b920c92
commit 0de55776c0
3 changed files with 254 additions and 89 deletions

View File

@ -8,6 +8,7 @@ using osu.Game.Screens.Multiplayer;
using osu.Game.Online.Multiplayer;
using osu.Game.Users;
using osu.Game.Database;
using osu.Framework.Allocation;
namespace osu.Desktop.VisualTests.Tests
{
@ -15,74 +16,105 @@ namespace osu.Desktop.VisualTests.Tests
{
public override string Description => @"Select your favourite room";
private RulesetDatabase rulesets;
public override void Reset()
{
base.Reset();
DrawableRoom first;
DrawableRoom second;
Add(new FillFlowContainer
{
Anchor = Anchor.Centre,
Origin = Anchor.Centre,
AutoSizeAxes = Axes.Y,
Width = 500f,
Width = 580f,
Direction = FillDirection.Vertical,
Children = new Drawable[]
{
first = new DrawableRoom(new Room()),
second = new DrawableRoom(new Room()),
first = new DrawableRoom(new Room
{
Name = { Value = @"Great Room Right Here" },
Host = { Value = new User { Username = @"Naeferith", Id = 9492835, Country = new Country { FlagName = @"FR" } } },
Status = { Value = new RoomStatusOpen() },
Type = { Value = new GameTypeTeamVersus() },
Beatmap =
{
Value = new BeatmapInfo
{
StarDifficulty = 4.65,
Ruleset = rulesets.GetRuleset(3),
Metadata = new BeatmapMetadata
{
Title = @"Critical Crystal",
Artist = @"Seiryu",
},
OnlineInfo = new BeatmapOnlineInfo
{
Covers = new[] { @"https://assets.ppy.sh//beatmaps/376340/covers/cover.jpg?1456478455" },
},
},
},
Participants =
{
Value = new[]
{
new User { GlobalRank = 1355 },
new User { GlobalRank = 8756 },
},
},
}),
new DrawableRoom(new Room
{
Name = { Value = @"Relax It's The Weekend" },
Host = { Value = new User { Username = @"peppy", Id = 2, Country = new Country { FlagName = @"AU" } } },
Status = { Value = new RoomStatusPlaying() },
Type = { Value = new GameTypeTagTeam() },
Beatmap =
{
Value = new BeatmapInfo
{
StarDifficulty = 1.96,
Ruleset = rulesets.GetRuleset(0),
Metadata = new BeatmapMetadata
{
Title = @"Serendipity",
Artist = @"ZAQ",
},
OnlineInfo = new BeatmapOnlineInfo
{
Covers = new[] { @"https://assets.ppy.sh//beatmaps/526839/covers/cover.jpg?1493815706" },
},
},
},
Participants =
{
Value = new[]
{
new User { GlobalRank = 578975 },
new User { GlobalRank = 24554 },
},
},
}),
}
});
first.Room.Name.Value = @"Great Room Right Here";
first.Room.Host.Value = new User { Username = @"Naeferith", Id = 9492835, Country = new Country { FlagName = @"FR" } };
first.Room.Status.Value = new RoomStatusOpen();
first.Room.Beatmap.Value = new BeatmapInfo
AddStep(@"change title", () => first.Room.Name.Value = @"I Changed Name");
AddStep(@"change host", () => first.Room.Host.Value = new User { Username = @"DrabWeb", Id = 6946022, Country = new Country { FlagName = @"CA" } });
AddStep(@"change status", () => first.Room.Status.Value = new RoomStatusPlaying());
AddStep(@"change type", () => first.Room.Type.Value = new GameTypeVersus());
AddStep(@"change beatmap", () => first.Room.Beatmap.Value = null);
AddStep(@"change participants", () => first.Room.Participants.Value = new[]
{
Metadata = new BeatmapMetadata
{
Title = @"Seiryu",
Artist = @"Critical Crystal",
},
};
second.Room.Name.Value = @"Relax It's The Weekend";
second.Room.Host.Value = new User { Username = @"peppy", Id = 2, Country = new Country { FlagName = @"AU" } };
second.Room.Status.Value = new RoomStatusPlaying();
second.Room.Beatmap.Value = new BeatmapInfo
{
Metadata = new BeatmapMetadata
{
Title = @"Serendipity",
Artist = @"ZAQ",
},
};
AddStep(@"change state", () =>
{
first.Room.Status.Value = new RoomStatusPlaying();
new User { GlobalRank = 1254 },
new User { GlobalRank = 123189 },
});
}
AddStep(@"change name", () =>
{
first.Room.Name.Value = @"I Changed Name";
});
AddStep(@"change host", () =>
{
first.Room.Host.Value = new User { Username = @"DrabWeb", Id = 6946022, Country = new Country { FlagName = @"CA" } };
});
AddStep(@"change beatmap", () =>
{
first.Room.Beatmap.Value = null;
});
AddStep(@"change state", () =>
{
first.Room.Status.Value = new RoomStatusOpen();
});
[BackgroundDependencyLoader]
private void load(RulesetDatabase rulesets)
{
this.rulesets = rulesets;
}
}
}

View File

@ -1,14 +1,18 @@
// Copyright (c) 2007-2017 ppy Pty Ltd <contact@ppy.sh>.
// Licensed under the MIT Licence - https://raw.githubusercontent.com/ppy/osu/master/LICENCE
using System.Linq;
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.Shapes;
using osu.Framework.Graphics.Textures;
using osu.Framework.Localisation;
using osu.Game.Beatmaps.Drawables;
using osu.Game.Database;
using osu.Game.Graphics;
using osu.Game.Graphics.Sprites;
@ -19,22 +23,36 @@ namespace osu.Game.Screens.Multiplayer
{
public class DrawableRoom : ClickableContainer
{
private const float content_padding = 5;
private const float height = 90;
private const float transition_duration = 100;
private const float content_padding = 10;
private const float height = 100;
private const float side_strip_width = 5;
private const float cover_width = 145;
private const float ruleset_height = 30;
private readonly Box sideStrip;
private readonly UpdateableAvatar avatar;
private readonly Container coverContainer, rulesetContainer, gameTypeContainer;
private readonly OsuSpriteText name;
private readonly Container flagContainer;
private readonly OsuSpriteText host;
private readonly OsuSpriteText rankBounds;
private readonly FillFlowContainer levelRangeContainer;
private readonly OsuSpriteText levelRangeLower;
private readonly OsuSpriteText levelRangeHigher;
private readonly OsuSpriteText status;
private readonly FillFlowContainer<OsuSpriteText> beatmapInfoFlow;
private readonly OsuSpriteText beatmapTitle;
private readonly OsuSpriteText beatmapDash;
private readonly OsuSpriteText beatmapArtist;
private readonly Bindable<string> nameBind = new Bindable<string>();
private readonly Bindable<User> hostBind = new Bindable<User>();
private readonly Bindable<RoomStatus> statusBind = new Bindable<RoomStatus>();
private readonly Bindable<GameType> typeBind = new Bindable<GameType>();
private readonly Bindable<BeatmapInfo> beatmapBind = new Bindable<BeatmapInfo>();
private readonly Bindable<User[]> participantsBind = new Bindable<User[]>();
private OsuColour colours;
private TextureStore textures;
private LocalisationEngine localisation;
public readonly Room Room;
@ -59,24 +77,36 @@ namespace osu.Game.Screens.Multiplayer
new Box
{
RelativeSizeAxes = Axes.Both,
Colour = OsuColour.Gray(34),
Colour = OsuColour.FromHex(@"212121"),
},
sideStrip = new Box
{
RelativeSizeAxes = Axes.Y,
Width = content_padding,
Width = side_strip_width,
},
avatar = new UpdateableAvatar
new Container
{
Size = new Vector2(Height - content_padding * 2),
Width = cover_width,
RelativeSizeAxes = Axes.Y,
Masking = true,
CornerRadius = 5f,
Margin = new MarginPadding { Left = content_padding * 2, Top = content_padding },
Margin = new MarginPadding { Left = side_strip_width },
Children = new Drawable[]
{
new Box
{
RelativeSizeAxes = Axes.Both,
Colour = Color4.Black,
},
coverContainer = new Container
{
RelativeSizeAxes = Axes.Both,
},
},
},
new Container
{
RelativeSizeAxes = Axes.Both,
Padding = new MarginPadding { Top = content_padding, Bottom = content_padding, Left = Height + content_padding * 2, Right = content_padding },
Padding = new MarginPadding { Top = content_padding, Bottom = content_padding, Left = side_strip_width + cover_width + content_padding, Right = content_padding },
Children = new Drawable[]
{
new FillFlowContainer
@ -100,20 +130,30 @@ namespace osu.Game.Screens.Multiplayer
new FillFlowContainer
{
AutoSizeAxes = Axes.X,
RelativeSizeAxes = Axes.Y,
Height = 15f,
Direction = FillDirection.Horizontal,
Spacing = new Vector2(5f, 0f),
Children = new Drawable[]
{
flagContainer = new Container
{
Width = 30f,
Width = 22f,
RelativeSizeAxes = Axes.Y,
},
new Container
new Container //todo: team banners
{
Width = 40f,
Width = 38f,
RelativeSizeAxes = Axes.Y,
CornerRadius = 2f,
Masking = true,
Children = new[]
{
new Box
{
RelativeSizeAxes = Axes.Both,
Colour = OsuColour.FromHex(@"ad387e"),
},
},
},
new OsuSpriteText
{
@ -131,13 +171,40 @@ namespace osu.Game.Screens.Multiplayer
},
},
},
rankBounds = new OsuSpriteText
levelRangeContainer = new FillFlowContainer
{
Anchor = Anchor.CentreRight,
Origin = Anchor.CentreRight,
Text = "#0 - #0",
TextSize = 14,
Margin = new MarginPadding { Right = 10 },
AutoSizeAxes = Axes.Both,
Direction = FillDirection.Horizontal,
Children = new[]
{
new OsuSpriteText
{
Text = "#",
TextSize = 14,
},
levelRangeLower = new OsuSpriteText
{
TextSize = 14,
Font = @"Exo2.0-Bold",
},
new OsuSpriteText
{
Text = " - ",
TextSize = 14,
},
new OsuSpriteText
{
Text = "#",
TextSize = 14,
},
levelRangeHigher = new OsuSpriteText
{
TextSize = 14,
Font = @"Exo2.0-Bold",
},
},
},
},
},
@ -150,7 +217,6 @@ namespace osu.Game.Screens.Multiplayer
RelativeSizeAxes = Axes.X,
AutoSizeAxes = Axes.Y,
Direction = FillDirection.Vertical,
Margin = new MarginPadding { Bottom = content_padding },
Children = new Drawable[]
{
status = new OsuSpriteText
@ -173,7 +239,7 @@ namespace osu.Game.Screens.Multiplayer
beatmapDash = new OsuSpriteText
{
TextSize = 14,
Font = @"Exo2.0-RegularItalic",
Font = @"Exo2.0-BoldItalic",
},
beatmapArtist = new OsuSpriteText
{
@ -184,26 +250,64 @@ namespace osu.Game.Screens.Multiplayer
},
},
},
new FillFlowContainer
{
Anchor = Anchor.BottomRight,
Origin = Anchor.BottomRight,
Height = ruleset_height,
Direction = FillDirection.Horizontal,
LayoutDuration = transition_duration,
Spacing = new Vector2(5f, 0f),
Children = new[]
{
rulesetContainer = new Container
{
Anchor = Anchor.TopRight,
Origin = Anchor.TopRight,
AutoSizeAxes = Axes.Both,
},
gameTypeContainer = new Container
{
Anchor = Anchor.TopRight,
Origin = Anchor.TopRight,
AutoSizeAxes = Axes.Both,
},
},
},
},
},
};
Room.Name.ValueChanged += displayName;
Room.Host.ValueChanged += displayUser;
Room.Status.ValueChanged += displayStatus;
Room.Beatmap.ValueChanged += displayBeatmap;
nameBind.ValueChanged += displayName;
hostBind.ValueChanged += displayUser;
participantsBind.ValueChanged += displayParticipants;
nameBind.BindTo(Room.Name);
hostBind.BindTo(Room.Host);
statusBind.BindTo(Room.Status);
typeBind.BindTo(Room.Type);
beatmapBind.BindTo(Room.Beatmap);
participantsBind.BindTo(Room.Participants);
}
[BackgroundDependencyLoader]
private void load(OsuColour colours, LocalisationEngine localisation)
private void load(OsuColour colours, TextureStore textures, LocalisationEngine localisation)
{
this.localisation = localisation;
this.textures = textures;
this.colours = colours;
beatmapInfoFlow.Colour = rankBounds.Colour = colours.Gray9;
beatmapInfoFlow.Colour = levelRangeContainer.Colour = colours.Gray9;
host.Colour = colours.Blue;
displayStatus(Room.Status.Value);
//binded here instead of ctor because dependencies are needed
statusBind.ValueChanged += displayStatus;
typeBind.ValueChanged += displayGameType;
beatmapBind.ValueChanged += displayBeatmap;
statusBind.TriggerChange();
typeBind.TriggerChange();
beatmapBind.TriggerChange();
}
private void displayName(string value)
@ -213,7 +317,6 @@ namespace osu.Game.Screens.Multiplayer
private void displayUser(User value)
{
avatar.User = value;
host.Text = value.Username;
flagContainer.Children = new[] { new DrawableFlag(value.Country?.FlagName ?? @"__") { RelativeSizeAxes = Axes.Both } };
}
@ -227,33 +330,64 @@ namespace osu.Game.Screens.Multiplayer
d.FadeColour(value.GetAppropriateColour(colours), 100);
}
private void displayGameType(GameType value)
{
gameTypeContainer.Children = new[]
{
new DrawableGameType(value)
{
Size = new Vector2(ruleset_height),
},
};
}
private void displayBeatmap(BeatmapInfo value)
{
if (value != null)
{
coverContainer.FadeIn(transition_duration);
coverContainer.Children = new[]
{
new AsyncLoadWrapper(new BeatmapBackgroundSprite(new OnlineWorkingBeatmap(value, textures, null))
{
Anchor = Anchor.Centre,
Origin = Anchor.Centre,
FillMode = FillMode.Fill,
OnLoadComplete = d => d.FadeInFromZero(400, EasingTypes.Out),
}) { RelativeSizeAxes = Axes.Both }
};
rulesetContainer.FadeIn(transition_duration);
rulesetContainer.Children = new[]
{
new DifficultyIcon(value)
{
Size = new Vector2(ruleset_height),
}
};
beatmapTitle.Current = localisation.GetUnicodePreference(value.Metadata.TitleUnicode, value.Metadata.Title);
beatmapDash.Text = @" - ";
beatmapArtist.Current = localisation.GetUnicodePreference(value.Metadata.ArtistUnicode, value.Metadata.Artist);
}
else
{
coverContainer.FadeOut(transition_duration);
rulesetContainer.FadeOut(transition_duration);
beatmapTitle.Current = null;
beatmapArtist.Current = null;
beatmapTitle.Text = @"Changing map";
beatmapDash.Text = string.Empty;
beatmapArtist.Text = string.Empty;
beatmapTitle.Text = "Changing map";
beatmapDash.Text = beatmapArtist.Text = string.Empty;
}
}
protected override void Dispose(bool isDisposing)
private void displayParticipants(User[] value)
{
Room.Name.ValueChanged -= displayName;
Room.Host.ValueChanged -= displayUser;
Room.Status.ValueChanged -= displayStatus;
Room.Beatmap.ValueChanged -= displayBeatmap;
base.Dispose(isDisposing);
var ranks = value.Select(u => u.GlobalRank);
levelRangeLower.Text = ranks.Min().ToString();
levelRangeHigher.Text = ranks.Max().ToString();
}
}
}

View File

@ -331,7 +331,6 @@ namespace osu.Game.Screens.Multiplayer
},
levelRangeHigher = new OsuSpriteText
{
Text = "6251",
TextSize = 14,
Font = @"Exo2.0-Bold",
},