h1or4dme8/osu-lazer
1
0
Fork 0
mirror of https://github.com/ppy/osu.git synced 2024-11-12 01:47:24 +08:00
Code Issues Releases Wiki Activity

Merge pull request #17014 from bdach/mod-overlay/columns

Browse Source 
Implement column display for new mod design
This commit is contained in:
Dean Herbert 2022-03-03 06:55:24 +09:00 committed by GitHub
commit 7aaacdda3d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 633 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

187
osu.Game.Tests/Visual/UserInterface/TestSceneModColumn.cs Normal file
View File

@ -0,0 +1,187 @@
// 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 System;
using System.Linq;
using NUnit.Framework;
using osu.Framework.Allocation;
using osu.Framework.Extensions.IEnumerableExtensions;
using osu.Framework.Graphics;
using osu.Framework.Graphics.Containers;
using osu.Framework.Testing;
using osu.Game.Graphics.UserInterface;
using osu.Game.Overlays;
using osu.Game.Overlays.Mods;
using osu.Game.Rulesets.Catch;
using osu.Game.Rulesets.Mania;
using osu.Game.Rulesets.Mods;
using osu.Game.Rulesets.Osu;
using osu.Game.Rulesets.Taiko;
using osuTK.Input;
namespace osu.Game.Tests.Visual.UserInterface
{
[TestFixture]
public class TestSceneModColumn : OsuManualInputManagerTestScene
{
[Cached]
private OverlayColourProvider colourProvider = new OverlayColourProvider(OverlayColourScheme.Green);
[TestCase(ModType.DifficultyReduction)]
[TestCase(ModType.DifficultyIncrease)]
[TestCase(ModType.Conversion)]
[TestCase(ModType.Automation)]
[TestCase(ModType.Fun)]
public void TestBasic(ModType modType)
{
AddStep("create content", () => Child = new Container
{
RelativeSizeAxes = Axes.Both,
Padding = new MarginPadding(30),
Child = new ModColumn(modType, false)
{
Anchor = Anchor.Centre,
Origin = Anchor.Centre
}
});
AddStep("change ruleset to osu!", () => Ruleset.Value = new OsuRuleset().RulesetInfo);
AddStep("change ruleset to taiko", () => Ruleset.Value = new TaikoRuleset().RulesetInfo);
AddStep("change ruleset to catch", () => Ruleset.Value = new CatchRuleset().RulesetInfo);
AddStep("change ruleset to mania", () => Ruleset.Value = new ManiaRuleset().RulesetInfo);
}
[Test]
public void TestMultiSelection()
{
ModColumn column = null;
AddStep("create content", () => Child = new Container
{
RelativeSizeAxes = Axes.Both,
Padding = new MarginPadding(30),
Child = column = new ModColumn(ModType.DifficultyIncrease, true)
{
Anchor = Anchor.Centre,
Origin = Anchor.Centre
}
});
AddUntilStep("wait for panel load", () => column.IsLoaded && column.ItemsLoaded);
clickToggle();
AddUntilStep("all panels selected", () => this.ChildrenOfType<ModPanel>().All(panel => panel.Active.Value));
clickToggle();
AddUntilStep("all panels deselected", () => this.ChildrenOfType<ModPanel>().All(panel => !panel.Active.Value));
AddStep("manually activate all panels", () => this.ChildrenOfType<ModPanel>().ForEach(panel => panel.Active.Value = true));
AddUntilStep("checkbox selected", () => this.ChildrenOfType<OsuCheckbox>().Single().Current.Value);
AddStep("deselect first panel", () => this.ChildrenOfType<ModPanel>().First().Active.Value = false);
AddUntilStep("checkbox not selected", () => !this.ChildrenOfType<OsuCheckbox>().Single().Current.Value);
void clickToggle() => AddStep("click toggle", () =>
{
var checkbox = this.ChildrenOfType<OsuCheckbox>().Single();
InputManager.MoveMouseTo(checkbox);
InputManager.Click(MouseButton.Left);
});
}
[Test]
public void TestFiltering()
{
TestModColumn column = null;
AddStep("create content", () => Child = new Container
{
RelativeSizeAxes = Axes.Both,
Padding = new MarginPadding(30),
Child = column = new TestModColumn(ModType.Fun, true)
{
Anchor = Anchor.Centre,
Origin = Anchor.Centre
}
});
AddStep("set filter", () => column.Filter = mod => mod.Name.Contains("Wind", StringComparison.CurrentCultureIgnoreCase));
AddUntilStep("two panels visible", () => column.ChildrenOfType<ModPanel>().Count(panel => !panel.Filtered.Value) == 2);
clickToggle();
AddUntilStep("wait for animation", () => !column.SelectionAnimationRunning);
AddAssert("only visible items selected", () => column.ChildrenOfType<ModPanel>().Where(panel => panel.Active.Value).All(panel => !panel.Filtered.Value));
AddStep("unset filter", () => column.Filter = null);
AddUntilStep("all panels visible", () => column.ChildrenOfType<ModPanel>().All(panel => !panel.Filtered.Value));
AddAssert("checkbox not selected", () => !column.ChildrenOfType<OsuCheckbox>().Single().Current.Value);
AddStep("set filter", () => column.Filter = mod => mod.Name.Contains("Wind", StringComparison.CurrentCultureIgnoreCase));
AddUntilStep("two panels visible", () => column.ChildrenOfType<ModPanel>().Count(panel => !panel.Filtered.Value) == 2);
AddAssert("checkbox selected", () => column.ChildrenOfType<OsuCheckbox>().Single().Current.Value);
AddStep("filter out everything", () => column.Filter = _ => false);
AddUntilStep("no panels visible", () => column.ChildrenOfType<ModPanel>().All(panel => panel.Filtered.Value));
AddUntilStep("checkbox hidden", () => !column.ChildrenOfType<OsuCheckbox>().Single().IsPresent);
AddStep("inset filter", () => column.Filter = null);
AddUntilStep("all panels visible", () => column.ChildrenOfType<ModPanel>().All(panel => !panel.Filtered.Value));
AddUntilStep("checkbox visible", () => column.ChildrenOfType<OsuCheckbox>().Single().IsPresent);
void clickToggle() => AddStep("click toggle", () =>
{
var checkbox = this.ChildrenOfType<OsuCheckbox>().Single();
InputManager.MoveMouseTo(checkbox);
InputManager.Click(MouseButton.Left);
});
}
[Test]
public void TestKeyboardSelection()
{
ModColumn column = null;
AddStep("create content", () => Child = new Container
{
RelativeSizeAxes = Axes.Both,
Padding = new MarginPadding(30),
Child = column = new ModColumn(ModType.DifficultyReduction, true, new[] { Key.Q, Key.W, Key.E, Key.R, Key.T, Key.Y, Key.U, Key.I, Key.O, Key.P })
{
Anchor = Anchor.Centre,
Origin = Anchor.Centre
}
});
AddUntilStep("wait for panel load", () => column.IsLoaded && column.ItemsLoaded);
AddStep("press W", () => InputManager.Key(Key.W));
AddAssert("NF panel selected", () => this.ChildrenOfType<ModPanel>().Single(panel => panel.Mod.Acronym == "NF").Active.Value);
AddStep("press W again", () => InputManager.Key(Key.W));
AddAssert("NF panel deselected", () => !this.ChildrenOfType<ModPanel>().Single(panel => panel.Mod.Acronym == "NF").Active.Value);
AddStep("set filter to NF", () => column.Filter = mod => mod.Acronym == "NF");
AddStep("press W", () => InputManager.Key(Key.W));
AddAssert("NF panel selected", () => this.ChildrenOfType<ModPanel>().Single(panel => panel.Mod.Acronym == "NF").Active.Value);
AddStep("press W again", () => InputManager.Key(Key.W));
AddAssert("NF panel deselected", () => !this.ChildrenOfType<ModPanel>().Single(panel => panel.Mod.Acronym == "NF").Active.Value);
AddStep("filter out everything", () => column.Filter = _ => false);
AddStep("press W", () => InputManager.Key(Key.W));
AddAssert("NF panel not selected", () => !this.ChildrenOfType<ModPanel>().Single(panel => panel.Mod.Acronym == "NF").Active.Value);
AddStep("clear filter", () => column.Filter = null);
}
private class TestModColumn : ModColumn
{
public new bool SelectionAnimationRunning => base.SelectionAnimationRunning;
public TestModColumn(ModType modType, bool allowBulkSelection)
: base(modType, allowBulkSelection)
{
}
}
}
}

426
osu.Game/Overlays/Mods/ModColumn.cs Normal file
View File

@ -0,0 +1,426 @@
// 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 System;
using System.Collections.Generic;
using System.Linq;
using System.Threading;
using System.Threading.Tasks;
using Humanizer;
using osu.Framework.Allocation;
using osu.Framework.Bindables;
using osu.Framework.Extensions.Color4Extensions;
using osu.Framework.Graphics;
using osu.Framework.Graphics.Colour;
using osu.Framework.Graphics.Containers;
using osu.Framework.Graphics.Shapes;
using osu.Framework.Graphics.Sprites;
using osu.Framework.Input.Events;
using osu.Game.Graphics;
using osu.Game.Graphics.Containers;
using osu.Game.Graphics.UserInterface;
using osu.Game.Rulesets.Mods;
using osu.Game.Utils;
using osuTK;
using osuTK.Graphics;
using osuTK.Input;
#nullable enable
namespace osu.Game.Overlays.Mods
{
public class ModColumn : CompositeDrawable
{
private Func<Mod, bool>? filter;
/// <summary>
/// Function determining whether each mod in the column should be displayed.
/// A return value of <see langword="true"/> means that the mod is not filtered and therefore its corresponding panel should be displayed.
/// A return value of <see langword="false"/> means that the mod is filtered out and therefore its corresponding panel should be hidden.
/// </summary>
public Func<Mod, bool>? Filter
{
get => filter;
set
{
filter = value;
updateFilter();
}
}
private readonly ModType modType;
private readonly Key[]? toggleKeys;
private readonly Bindable<Dictionary<ModType, IReadOnlyList<Mod>>> availableMods = new Bindable<Dictionary<ModType, IReadOnlyList<Mod>>>();
private readonly TextFlowContainer headerText;
private readonly Box headerBackground;
private readonly Container contentContainer;
private readonly Box contentBackground;
private readonly FillFlowContainer<ModPanel> panelFlow;
private readonly ToggleAllCheckbox? toggleAllCheckbox;
private Colour4 accentColour;
private Task? latestLoadTask;
internal bool ItemsLoaded => latestLoadTask == null;
private const float header_height = 42;
public ModColumn(ModType modType, bool allowBulkSelection, Key[]? toggleKeys = null)
{
this.modType = modType;
this.toggleKeys = toggleKeys;
Width = 320;
RelativeSizeAxes = Axes.Y;
Shear = new Vector2(ModPanel.SHEAR_X, 0);
CornerRadius = ModPanel.CORNER_RADIUS;
Masking = true;
Container controlContainer;
InternalChildren = new Drawable[]
{
new Container
{
RelativeSizeAxes = Axes.X,
Height = header_height + ModPanel.CORNER_RADIUS,
Children = new Drawable[]
{
headerBackground = new Box
{
RelativeSizeAxes = Axes.X,
Height = header_height + ModPanel.CORNER_RADIUS
},
headerText = new OsuTextFlowContainer(t =>
{
t.Font = OsuFont.TorusAlternate.With(size: 17);
t.Shadow = false;
t.Colour = Colour4.Black;
})
{
RelativeSizeAxes = Axes.X,
AutoSizeAxes = Axes.Y,
Anchor = Anchor.CentreLeft,
Origin = Anchor.CentreLeft,
Shear = new Vector2(-ModPanel.SHEAR_X, 0),
Padding = new MarginPadding
{
Horizontal = 17,
Bottom = ModPanel.CORNER_RADIUS
}
}
}
},
new Container
{
RelativeSizeAxes = Axes.Both,
Padding = new MarginPadding { Top = header_height },
Child = contentContainer = new Container
{
RelativeSizeAxes = Axes.Both,
Masking = true,
CornerRadius = ModPanel.CORNER_RADIUS,
BorderThickness = 3,
Children = new Drawable[]
{
contentBackground = new Box
{
RelativeSizeAxes = Axes.Both
},
new GridContainer
{
RelativeSizeAxes = Axes.Both,
RowDimensions = new[]
{
new Dimension(GridSizeMode.AutoSize),
new Dimension()
},
Content = new[]
{
new Drawable[]
{
controlContainer = new Container
{
RelativeSizeAxes = Axes.X,
Padding = new MarginPadding { Horizontal = 14 }
}
},
new Drawable[]
{
new OsuScrollContainer
{
RelativeSizeAxes = Axes.Both,
ScrollbarOverlapsContent = false,
Child = panelFlow = new FillFlowContainer<ModPanel>
{
RelativeSizeAxes = Axes.X,
AutoSizeAxes = Axes.Y,
Spacing = new Vector2(0, 7),
Padding = new MarginPadding(7)
}
}
}
}
}
}
}
}
};
createHeaderText();
if (allowBulkSelection)
{
controlContainer.Height = 35;
controlContainer.Add(toggleAllCheckbox = new ToggleAllCheckbox(this)
{
Anchor = Anchor.CentreLeft,
Origin = Anchor.CentreLeft,
Scale = new Vector2(0.8f),
RelativeSizeAxes = Axes.X,
LabelText = "Enable All",
Shear = new Vector2(-ModPanel.SHEAR_X, 0)
});
panelFlow.Padding = new MarginPadding
{
Top = 0,
Bottom = 7,
Horizontal = 7
};
}
}
private void createHeaderText()
{
IEnumerable<string> headerTextWords = modType.Humanize(LetterCasing.Title).Split(' ');
if (headerTextWords.Count() > 1)
{
headerText.AddText($"{headerTextWords.First()} ", t => t.Font = t.Font.With(weight: FontWeight.SemiBold));
headerTextWords = headerTextWords.Skip(1);
}
headerText.AddText(string.Join(' ', headerTextWords));
}
[BackgroundDependencyLoader]
private void load(OsuGameBase game, OverlayColourProvider colourProvider, OsuColour colours)
{
availableMods.BindTo(game.AvailableMods);
headerBackground.Colour = accentColour = colours.ForModType(modType);
if (toggleAllCheckbox != null)
{
toggleAllCheckbox.AccentColour = accentColour;
toggleAllCheckbox.AccentHoverColour = accentColour.Lighten(0.3f);
}
contentContainer.BorderColour = ColourInfo.GradientVertical(colourProvider.Background4, colourProvider.Background3);
contentBackground.Colour = colourProvider.Background4;
}
protected override void LoadComplete()
{
base.LoadComplete();
availableMods.BindValueChanged(_ => Scheduler.AddOnce(updateMods));
updateMods();
}
private CancellationTokenSource? cancellationTokenSource;
private void updateMods()
{
var newMods = ModUtils.FlattenMods(availableMods.Value.GetValueOrDefault(modType) ?? Array.Empty<Mod>()).ToList();
if (newMods.SequenceEqual(panelFlow.Children.Select(p => p.Mod)))
return;
cancellationTokenSource?.Cancel();
var panels = newMods.Select(mod => new ModPanel(mod)
{
Shear = new Vector2(-ModPanel.SHEAR_X, 0)
});
Task? loadTask;
latestLoadTask = loadTask = LoadComponentsAsync(panels, loaded =>
{
panelFlow.ChildrenEnumerable = loaded;
foreach (var panel in panelFlow)
panel.Active.BindValueChanged(_ => updateToggleState());
updateToggleState();
updateFilter();
}, (cancellationTokenSource = new CancellationTokenSource()).Token);
loadTask.ContinueWith(_ =>
{
if (loadTask == latestLoadTask)
latestLoadTask = null;
});
}
#region Bulk select / deselect
private const double initial_multiple_selection_delay = 120;
private double selectionDelay = initial_multiple_selection_delay;
private double lastSelection;
private readonly Queue<Action> pendingSelectionOperations = new Queue<Action>();
protected bool SelectionAnimationRunning => pendingSelectionOperations.Count > 0;
protected override void Update()
{
base.Update();
if (selectionDelay == initial_multiple_selection_delay || Time.Current - lastSelection >= selectionDelay)
{
if (pendingSelectionOperations.TryDequeue(out var dequeuedAction))
{
dequeuedAction();
// each time we play an animation, we decrease the time until the next animation (to ramp the visual and audible elements).
selectionDelay = Math.Max(30, selectionDelay * 0.8f);
lastSelection = Time.Current;
}
else
{
// reset the selection delay after all animations have been completed.
// this will cause the next action to be immediately performed.
selectionDelay = initial_multiple_selection_delay;
}
}
}
private void updateToggleState()
{
if (toggleAllCheckbox != null && !SelectionAnimationRunning)
{
toggleAllCheckbox.Alpha = panelFlow.Any(panel => !panel.Filtered.Value) ? 1 : 0;
toggleAllCheckbox.Current.Value = panelFlow.Where(panel => !panel.Filtered.Value).All(panel => panel.Active.Value);
}
}
/// <summary>
/// Selects all mods.
/// </summary>
public void SelectAll()
{
pendingSelectionOperations.Clear();
foreach (var button in panelFlow.Where(b => !b.Active.Value && !b.Filtered.Value))
pendingSelectionOperations.Enqueue(() => button.Active.Value = true);
}
/// <summary>
/// Deselects all mods.
/// </summary>
public void DeselectAll()
{
pendingSelectionOperations.Clear();
foreach (var button in panelFlow.Where(b => b.Active.Value && !b.Filtered.Value))
pendingSelectionOperations.Enqueue(() => button.Active.Value = false);
}
private class ToggleAllCheckbox : OsuCheckbox
{
private Color4 accentColour;
public Color4 AccentColour
{
get => accentColour;
set
{
accentColour = value;
updateState();
}
}
private Color4 accentHoverColour;
public Color4 AccentHoverColour
{
get => accentHoverColour;
set
{
accentHoverColour = value;
updateState();
}
}
private readonly ModColumn column;
public ToggleAllCheckbox(ModColumn column)
: base(false)
{
this.column = column;
}
protected override void ApplyLabelParameters(SpriteText text)
{
base.ApplyLabelParameters(text);
text.Font = text.Font.With(weight: FontWeight.SemiBold);
}
[BackgroundDependencyLoader]
private void load()
{
updateState();
}
private void updateState()
{
Nub.AccentColour = AccentColour;
Nub.GlowingAccentColour = AccentHoverColour;
Nub.GlowColour = AccentHoverColour.Opacity(0.2f);
}
protected override void OnUserChange(bool value)
{
if (value)
column.SelectAll();
else
column.DeselectAll();
}
}
#endregion
#region Filtering support
private void updateFilter()
{
foreach (var modPanel in panelFlow)
modPanel.ApplyFilter(Filter);
updateToggleState();
}
#endregion
#region Keyboard selection support
protected override bool OnKeyDown(KeyDownEvent e)
{
if (e.ControlPressed || e.AltPressed) return false;
if (toggleKeys == null) return false;
int index = Array.IndexOf(toggleKeys, e.Key);
if (index < 0) return false;
var panel = panelFlow.ElementAtOrDefault(index);
if (panel == null || panel.Filtered.Value) return false;
panel.Active.Toggle();
return true;
}
#endregion
}
}

23
osu.Game/Overlays/Mods/ModPanel.cs
View File

@ -1,6 +1,7 @@
// 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 System;
using osu.Framework.Allocation;
using osu.Framework.Audio;
using osu.Framework.Audio.Sample;
@ -28,6 +29,7 @@ namespace osu.Game.Overlays.Mods
{
public Mod Mod { get; }
public BindableBool Active { get; } = new BindableBool();
public BindableBool Filtered { get; } = new BindableBool();
protected readonly Box Background;
protected readonly Container SwitchContainer;
@ -40,10 +42,10 @@ namespace osu.Game.Overlays.Mods
protected const double TRANSITION_DURATION = 150;
protected const float SHEAR_X = 0.2f;
public const float SHEAR_X = 0.2f;
public const float CORNER_RADIUS = 7;
protected const float HEIGHT = 42;
protected const float CORNER_RADIUS = 7;
protected const float IDLE_SWITCH_WIDTH = 54;
protected const float EXPANDED_SWITCH_WIDTH = 70;
@ -157,6 +159,7 @@ namespace osu.Game.Overlays.Mods
playStateChangeSamples();
UpdateState();
});
Filtered.BindValueChanged(_ => updateFilterState());
UpdateState();
FinishTransforms(true);
@ -190,7 +193,7 @@ namespace osu.Game.Overlays.Mods
mouseDown = true;
UpdateState();
return true;
return false;
}
protected override void OnMouseUp(MouseUpEvent e)
@ -235,5 +238,19 @@ namespace osu.Game.Overlays.Mods
TextBackground.FadeColour(textBackgroundColour, transitionDuration, Easing.OutQuint);
TextFlow.FadeColour(textColour, transitionDuration, Easing.OutQuint);
}
#region Filtering support
public void ApplyFilter(Func<Mod, bool>? filter)
{
Filtered.Value = filter != null && !filter.Invoke(Mod);
}
private void updateFilterState()
{
this.FadeTo(Filtered.Value ? 0 : 1);
}
#endregion
}
}