Skip to content

Commit

Permalink
Song Select footer redesign
Browse files Browse the repository at this point in the history
  • Loading branch information
@flustix
flustix committed Aug 12, 2023
1 parent b0441c6 commit 2c7cb36
Show file tree
Hide file tree
Showing 7 changed files with 313 additions and 74 deletions.
3 changes: 1 addition & 2 deletions fluXis.Game/Graphics/Gamepad/GamepadTooltipBar.cs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,8 +16,7 @@ public partial class GamepadTooltipBar : Container
[BackgroundDependencyLoader]
private void load()
{
RelativeSizeAxes = Axes.X;
Height = 50;
RelativeSizeAxes = Axes.Both;
Anchor = Origin = Anchor.BottomCentre;

if (ShowBackground)
Expand Down
132 changes: 132 additions & 0 deletions fluXis.Game/Screens/Select/Footer/FooterCornerButton.cs
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,132 @@
using System;
using fluXis.Game.Graphics;
using osu.Framework.Allocation;
using osu.Framework.Extensions.Color4Extensions;
using osu.Framework.Graphics;
using osu.Framework.Graphics.Containers;
using osu.Framework.Graphics.Effects;
using osu.Framework.Graphics.Shapes;
using osu.Framework.Graphics.Sprites;
using osu.Framework.Input.Events;
using osuTK;
using osuTK.Graphics;

namespace fluXis.Game.Screens.Select.Footer;

public partial class FooterCornerButton : Container
{
private const int corner_radius = 20;

public Action Action { get; set; }

protected virtual string ButtonText => "Button";
protected virtual IconUsage Icon => FontAwesome.Solid.Question;
protected virtual Colour4 ButtonColor => FluXisColors.Background4;

private Box hover;
private Box flash;

[BackgroundDependencyLoader]
private void load()
{
bool isRight = Anchor == Anchor.BottomRight;

Width = 250 + corner_radius;
Height = 80 + corner_radius;
Position = new Vector2(isRight ? 200 : -200, corner_radius);
Shear = new Vector2(isRight ? .1f : -.1f, 0);
CornerRadius = corner_radius;
Masking = true;
EdgeEffect = new EdgeEffectParameters
{
Type = EdgeEffectType.Shadow,
Colour = Color4.Black.Opacity(.25f),
Radius = 10
};

InternalChildren = new Drawable[]
{
new Box
{
RelativeSizeAxes = Axes.Both,
Colour = ButtonColor
},
hover = new Box
{
RelativeSizeAxes = Axes.Both,
Alpha = 0
},
flash = new Box
{
RelativeSizeAxes = Axes.Both,
Alpha = 0
},
new Container
{
RelativeSizeAxes = Axes.Both,
Shear = new Vector2(isRight ? -.1f : .1f, 0),
Padding = new MarginPadding
{
Left = isRight ? 0 : corner_radius,
Right = isRight ? corner_radius : 0,
Bottom = corner_radius
},
Child = new FillFlowContainer
{
AutoSizeAxes = Axes.Both,
Direction = FillDirection.Horizontal,
Anchor = Anchor.Centre,
Origin = Anchor.Centre,
Spacing = new Vector2(10),
Children = new Drawable[]
{
new SpriteIcon
{
Anchor = Anchor.CentreLeft,
Origin = Anchor.CentreLeft,
Icon = Icon,
Size = new Vector2(24)
},
new FluXisSpriteText
{
Anchor = Anchor.CentreLeft,
Origin = Anchor.CentreLeft,
FontSize = 24,
Text = ButtonText
}
}
}
}
};
}

protected override bool OnClick(ClickEvent e)
{
flash.FadeOutFromOne(500);
Action?.Invoke();
return true;
}

protected override bool OnHover(HoverEvent e)
{
hover.FadeTo(.2f, 200);
return true;
}

protected override void OnHoverLost(HoverLostEvent e)
{
hover.FadeOut(200);
}

protected override bool OnMouseDown(MouseDownEvent e)
{
this.ScaleTo(.9f, 1000, Easing.OutQuint);
return true;
}

protected override void OnMouseUp(MouseUpEvent e)
{
this.ScaleTo(1, 1000, Easing.OutElastic);
}
}

105 changes: 63 additions & 42 deletions fluXis.Game/Screens/Select/Footer/SelectFooter.cs
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,18 @@
using fluXis.Game.Graphics;
using fluXis.Game.Graphics.Gamepad;
using fluXis.Game.Input;
using fluXis.Game.Overlay.Notification;
using osu.Framework.Allocation;
using osu.Framework.Extensions.Color4Extensions;
using osu.Framework.Extensions.IEnumerableExtensions;
using osu.Framework.Graphics;
using osu.Framework.Graphics.Containers;
using osu.Framework.Graphics.Effects;
using osu.Framework.Graphics.Shapes;
using osu.Framework.Graphics.Sprites;
using osu.Framework.Input.Events;
using osu.Framework.Screens;
using osuTK.Graphics;

namespace fluXis.Game.Screens.Select.Footer;

Expand All @@ -16,24 +22,39 @@ public partial class SelectFooter : Container
public NotificationOverlay Notifications { get; private set; }

public SelectScreen Screen { get; init; }
public Container<SelectFooterButton> ButtonContainer { get; private set; }

private Container backgroundContainer;
private Container keyboardContainer;
private GamepadTooltipBar gamepadContainer;
private FooterCornerButton backButton;
private FooterCornerButton playButton;

[BackgroundDependencyLoader]
private void load()
{
RelativeSizeAxes = Axes.X;
Height = 50;
Height = 60;
Anchor = Origin = Anchor.BottomLeft;

Children = new Drawable[]
{
new Box
backgroundContainer = new Container
{
RelativeSizeAxes = Axes.Both,
Colour = Colour4.Black,
Alpha = .5f
Masking = true,
Y = 80,
EdgeEffect = new EdgeEffectParameters
{
Type = EdgeEffectType.Shadow,
Colour = Color4.Black.Opacity(.25f),
Radius = 10
},
Child = new Box
{
RelativeSizeAxes = Axes.Both,
Colour = FluXisColors.Background2
}
},
keyboardContainer = new Container
{
Expand All @@ -42,55 +63,49 @@ private void load()
Alpha = GamepadHandler.GamepadConnected ? 0 : 1,
Children = new Drawable[]
{
new FillFlowContainer
backButton = new SelectFooterBackButton { Action = Screen.Exit },
ButtonContainer = new Container<SelectFooterButton>
{
Direction = FillDirection.Horizontal,
RelativeSizeAxes = Axes.Y,
AutoSizeAxes = Axes.X,
Y = 100,
Anchor = Anchor.BottomLeft,
Origin = Anchor.BottomLeft,
Children = new Drawable[]
Padding = new MarginPadding { Left = 300 },
Children = new[]
{
new SelectFooterButton
/*new SelectModsButton
{
Text = "Back",
Action = Screen.Exit
},
new Container
ModSelector = Screen.ModSelector
},*/
new SelectFooterButton
{
RelativeSizeAxes = Axes.Y,
Width = 100,
Name = "Spacer"
Text = "Mods",
Icon = FontAwesome.Solid.LayerGroup,
AccentColor = Colour4.FromHex("#edbb98"),
Action = openModSelector
},
new SelectModsButton { ModSelector = Screen.ModSelector },
new SelectFooterButton
{
Text = "Random",
Action = randomMap
Icon = FontAwesome.Solid.Random,
AccentColor = Colour4.FromHex("#ed98a7"),
Action = randomMap,
Index = 1,
Margin = new MarginPadding { Left = 160 }
},
new SelectFooterButton
{
Text = "Options",
Action = OpenSettings
Icon = FontAwesome.Solid.Cog,
AccentColor = Colour4.FromHex("#98cbed"),
Action = OpenSettings,
Index = 2,
Margin = new MarginPadding { Left = 320 }
}
}
},
new FillFlowContainer
{
Direction = FillDirection.Horizontal,
RelativeSizeAxes = Axes.Y,
AutoSizeAxes = Axes.X,
Anchor = Anchor.BottomRight,
Origin = Anchor.BottomRight,
Children = new Drawable[]
{
new SelectFooterButton
{
Text = "Play",
Action = Screen.Accept
}
}
}
playButton = new SelectFooterPlayButton { Action = Screen.Accept }
}
},
gamepadContainer = new GamepadTooltipBar
Expand Down Expand Up @@ -156,20 +171,26 @@ protected override void Dispose(bool isDisposing)
GamepadHandler.OnGamepadStatusChanged -= updateGamepadStatus;
}

private void openModSelector()
public override void Show()
{
Screen.ModSelector.IsOpen.Value = true;
backButton.MoveToX(-20, 500, Easing.OutQuint);
playButton.MoveToX(20, 500, Easing.OutQuint);
backgroundContainer.MoveToY(0, 500, Easing.OutQuint);
ButtonContainer.MoveToY(0);
ButtonContainer.ForEach(b => b.Show());
}

private void randomMap()
public override void Hide()
{
Screen.RandomMap();
backButton.MoveToX(-200, 500, Easing.OutQuint);
playButton.MoveToX(200, 500, Easing.OutQuint);
backgroundContainer.MoveToY(80, 500, Easing.OutQuint);
ButtonContainer.MoveToY(100, 500, Easing.OutQuint);
}

public void OpenSettings()
{
Notifications.Post("This is still in development\nCome back later!");
}
private void openModSelector() => Screen.ModSelector.IsOpen.Toggle();
private void randomMap() => Screen.RandomMap();
public void OpenSettings() => Notifications.Post("This is still in development\nCome back later!");

protected override bool OnClick(ClickEvent e) => true; // Prevents the click from going through to the map list
}
16 changes: 16 additions & 0 deletions fluXis.Game/Screens/Select/Footer/SelectFooterBackButton.cs
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
using osu.Framework.Graphics;
using osu.Framework.Graphics.Sprites;

namespace fluXis.Game.Screens.Select.Footer;

public partial class SelectFooterBackButton : FooterCornerButton
{
protected override string ButtonText => "Back";
protected override IconUsage Icon => FontAwesome.Solid.ChevronLeft;

public SelectFooterBackButton()
{
Anchor = Anchor.BottomLeft;
Origin = Anchor.BottomLeft;
}
}
Loading

0 comments on commit 2c7cb36

Please sign in to comment.