Merge pull request #1281 from andy840119/refactor-lyric-preview-compo…

…nent Refactor lyric preview component
karaoke-dev · Apr 23, 2022 · 1fbc464 · 1fbc464
2 parents a933451 + 8fe80ae
commit 1fbc464
Show file tree

Hide file tree

Showing 8 changed files with 178 additions and 33 deletions.
diff --git a/osu.Game.Rulesets.Karaoke/Edit/Translate/Components/TranslateLyricSpriteText.cs b/osu.Game.Rulesets.Karaoke/Edit/Translate/Components/TranslateLyricSpriteText.cs
@@ -2,8 +2,8 @@
 // See the LICENCE file in the repository root for full licence text.
 
 using osu.Framework.Graphics.Cursor;
-using osu.Game.Rulesets.Karaoke.Graphics;
 using osu.Game.Rulesets.Karaoke.Graphics.Cursor;
+using osu.Game.Rulesets.Karaoke.Graphics.Sprites;
 using osu.Game.Rulesets.Karaoke.Objects;
 
 namespace osu.Game.Rulesets.Karaoke.Edit.Translate.Components

diff --git a/osu.Game.Rulesets.Karaoke/Graphics/Cursor/LyricToolTip.cs b/osu.Game.Rulesets.Karaoke/Graphics/Cursor/LyricToolTip.cs
@@ -3,6 +3,7 @@
 
 using osu.Framework.Graphics;
 using osu.Framework.Graphics.Sprites;
+using osu.Game.Rulesets.Karaoke.Graphics.Sprites;
 using osu.Game.Rulesets.Karaoke.Objects;
 
 namespace osu.Game.Rulesets.Karaoke.Graphics.Cursor

diff --git a/...araoke/Graphics/PreviewLyricSpriteText.cs → ...raphics/Sprites/PreviewLyricSpriteText.cs b/...araoke/Graphics/PreviewLyricSpriteText.cs → ...raphics/Sprites/PreviewLyricSpriteText.cs
@@ -5,7 +5,7 @@
 using osu.Framework.Graphics.Sprites;
 using osu.Game.Rulesets.Karaoke.Objects;
 
-namespace osu.Game.Rulesets.Karaoke.Graphics
+namespace osu.Game.Rulesets.Karaoke.Graphics.Sprites
 {
     public class PreviewLyricSpriteText : LyricSpriteText
     {

diff --git a/osu.Game.Rulesets.Karaoke/Mods/KaraokeModPractice.cs b/osu.Game.Rulesets.Karaoke/Mods/KaraokeModPractice.cs
@@ -62,28 +62,5 @@ public void ApplyToOverlay(ISettingHUDOverlay overlay)
                 }
             });
         }
-
-        private class PracticeOverlay : SettingOverlay
-        {
-            public PracticeOverlay(IBeatmap beatmap)
-            {
-                Add(new PracticeSettings(beatmap)
-                {
-                    Expanded =
-                    {
-                        Value = true
-                    },
-                    Width = 400
-                });
-            }
-
-            public override SettingButton CreateToggleButton() => new()
-            {
-                Name = "Toggle Practice",
-                Text = "Practice",
-                TooltipText = "Open/Close practice overlay",
-                Action = ToggleVisibility
-            };
-        }
     }
 }
diff --git a/osu.Game.Rulesets.Karaoke/Statistics/SaitenResultGraph.cs b/osu.Game.Rulesets.Karaoke/Statistics/SaitenResultGraph.cs
@@ -4,17 +4,21 @@
 using System.Collections.Generic;
 using System.Linq;
 using osu.Framework.Allocation;
+using osu.Framework.Bindables;
+using osu.Framework.Extensions.IEnumerableExtensions;
 using osu.Framework.Graphics;
 using osu.Framework.Graphics.Containers;
 using osu.Framework.Graphics.Shapes;
 using osu.Framework.Graphics.Sprites;
 using osu.Game.Beatmaps;
 using osu.Game.Graphics;
-using osu.Game.Rulesets.Karaoke.Graphics;
+using osu.Game.Graphics.Containers;
+using osu.Game.Rulesets.Karaoke.Graphics.Sprites;
 using osu.Game.Rulesets.Karaoke.Objects;
 using osu.Game.Rulesets.Scoring;
 using osu.Game.Scoring;
 using osuTK;
+using osuTK.Graphics;
 
 namespace osu.Game.Rulesets.Karaoke.Statistics
 {
@@ -64,6 +68,138 @@ private void load(OsuColour colours)
             background.Colour = colours.ContextMenuGray;
         }
 
+        // todo: refactor needed.
+        public class LyricPreview : CompositeDrawable
+        {
+            public Bindable<Lyric> SelectedLyric { get; } = new();
+
+            private readonly FillFlowContainer<ClickableLyric> lyricTable;
+
+            public LyricPreview(IEnumerable<Lyric> lyrics)
+            {
+                InternalChild = new OsuScrollContainer
+                {
+                    RelativeSizeAxes = Axes.Both,
+                    Child = lyricTable = new FillFlowContainer<ClickableLyric>
+                    {
+                        AutoSizeAxes = Axes.Y,
+                        RelativeSizeAxes = Axes.X,
+                        Direction = FillDirection.Vertical,
+                        Children = lyrics.Select(x => CreateLyricContainer(x).With(c =>
+                        {
+                            c.Selected = false;
+                            c.Action = () => triggerLyric(x);
+                        })).ToList()
+                    }
+                };
+
+                SelectedLyric.BindValueChanged(value =>
+                {
+                    var oldValue = value.OldValue;
+                    if (oldValue != null)
+                        lyricTable.Where(x => x.HitObject == oldValue).ForEach(x => { x.Selected = false; });
+
+                    var newValue = value.NewValue;
+                    if (newValue != null)
+                        lyricTable.Where(x => x.HitObject == newValue).ForEach(x => { x.Selected = true; });
+                });
+            }
+
+            private void triggerLyric(Lyric lyric)
+            {
+                if (SelectedLyric.Value == lyric)
+                    SelectedLyric.TriggerChange();
+                else
+                    SelectedLyric.Value = lyric;
+            }
+
+            public Vector2 Spacing
+            {
+                get => lyricTable.Spacing;
+                set => lyricTable.Spacing = value;
+            }
+
+            protected virtual ClickableLyric CreateLyricContainer(Lyric lyric) => new(lyric);
+
+            public class ClickableLyric : ClickableContainer
+            {
+                private const float fade_duration = 100;
+
+                private Color4 hoverTextColour;
+                private Color4 idolTextColour;
+
+                private readonly Box background;
+                private readonly Drawable icon;
+                private readonly PreviewLyricSpriteText previewLyric;
+
+                public ClickableLyric(Lyric lyric)
+                {
+                    AutoSizeAxes = Axes.Y;
+                    RelativeSizeAxes = Axes.X;
+                    Masking = true;
+                    CornerRadius = 5;
+                    Children = new[]
+                    {
+                        background = new Box
+                        {
+                            RelativeSizeAxes = Axes.Both
+                        },
+                        icon = CreateIcon(),
+                        previewLyric = CreateLyric(lyric),
+                    };
+                }
+
+                protected virtual PreviewLyricSpriteText CreateLyric(Lyric lyric) => new(lyric)
+                {
+                    Font = new FontUsage(size: 25),
+                    RubyFont = new FontUsage(size: 10),
+                    RomajiFont = new FontUsage(size: 10),
+                    Margin = new MarginPadding { Left = 25 }
+                };
+
+                protected virtual Drawable CreateIcon() => new SpriteIcon
+                {
+                    Anchor = Anchor.CentreLeft,
+                    Origin = Anchor.CentreLeft,
+                    Size = new Vector2(15),
+                    Icon = FontAwesome.Solid.Play,
+                    Margin = new MarginPadding { Left = 5 }
+                };
+
+                private bool selected;
+
+                public bool Selected
+                {
+                    get => selected;
+                    set
+                    {
+                        if (value == selected) return;
+
+                        selected = value;
+
+                        background.FadeTo(Selected ? 1 : 0, fade_duration);
+                        icon.FadeTo(Selected ? 1 : 0, fade_duration);
+                        previewLyric.FadeColour(Selected ? hoverTextColour : idolTextColour, fade_duration);
+                    }
+                }
+
+                public Lyric HitObject => previewLyric.HitObject;
+
+                [BackgroundDependencyLoader]
+                private void load(OsuColour colours)
+                {
+                    hoverTextColour = colours.Yellow;
+                    idolTextColour = colours.Gray9;
+
+                    previewLyric.Colour = idolTextColour;
+                    background.Colour = colours.Blue;
+                    background.Alpha = 0;
+                    icon.Colour = hoverTextColour;
+                    icon.Alpha = 0;
+                }
+            }
+        }
+
         private class SaitenResultLyricPreview : LyricPreview
         {
             public SaitenResultLyricPreview(IBeatmap beatmap)

diff --git a/osu.Game.Rulesets.Karaoke/UI/HUD/PracticeOverlay.cs b/osu.Game.Rulesets.Karaoke/UI/HUD/PracticeOverlay.cs
@@ -0,0 +1,31 @@
+// Copyright (c) andy840119 <[email protected]>. Licensed under the GPL Licence.
+// See the LICENCE file in the repository root for full licence text.
+
+using osu.Game.Beatmaps;
+using osu.Game.Rulesets.Karaoke.UI.PlayerSettings;
+
+namespace osu.Game.Rulesets.Karaoke.UI.HUD
+{
+    public class PracticeOverlay : SettingOverlay
+    {
+        public PracticeOverlay(IBeatmap beatmap)
+        {
+            Add(new PracticeSettings(beatmap)
+            {
+                Expanded =
+                {
+                    Value = true
+                },
+                Width = 400
+            });
+        }
+
+        public override SettingButton CreateToggleButton() => new()
+        {
+            Name = "Toggle Practice",
+            Text = "Practice",
+            TooltipText = "Open/Close practice overlay",
+            Action = ToggleVisibility
+        };
+    }
+}
diff --git a/...Rulesets.Karaoke/Graphics/LyricPreview.cs → ...araoke/UI/PlayerSettings/LyricsPreview.cs b/...Rulesets.Karaoke/Graphics/LyricPreview.cs → ...araoke/UI/PlayerSettings/LyricsPreview.cs
@@ -12,19 +12,20 @@
 using osu.Framework.Graphics.Sprites;
 using osu.Game.Graphics;
 using osu.Game.Graphics.Containers;
+using osu.Game.Rulesets.Karaoke.Graphics.Sprites;
 using osu.Game.Rulesets.Karaoke.Objects;
 using osuTK;
 using osuTK.Graphics;
 
-namespace osu.Game.Rulesets.Karaoke.Graphics
+namespace osu.Game.Rulesets.Karaoke.UI.PlayerSettings
 {
-    public class LyricPreview : CompositeDrawable
+    public class LyricsPreview : CompositeDrawable
     {
         public Bindable<Lyric> SelectedLyric { get; } = new();
 
         private readonly FillFlowContainer<ClickableLyric> lyricTable;
 
-        public LyricPreview(IEnumerable<Lyric> lyrics)
+        public LyricsPreview(IEnumerable<Lyric> lyrics)
         {
             InternalChild = new OsuScrollContainer
             {

diff --git a/osu.Game.Rulesets.Karaoke/UI/PlayerSettings/PracticeSettings.cs b/osu.Game.Rulesets.Karaoke/UI/PlayerSettings/PracticeSettings.cs
@@ -9,7 +9,6 @@
 using osu.Game.Beatmaps;
 using osu.Game.Graphics.Sprites;
 using osu.Game.Rulesets.Karaoke.Configuration;
-using osu.Game.Rulesets.Karaoke.Graphics;
 using osu.Game.Rulesets.Karaoke.Objects;
 using osu.Game.Screens.Play.PlayerSettings;
 using osuTK;
@@ -19,7 +18,7 @@ namespace osu.Game.Rulesets.Karaoke.UI.PlayerSettings
     public class PracticeSettings : PlayerSettingsGroup, IKeyBindingHandler<KaraokeAction>
     {
         private readonly PlayerSliderBar<double> preemptTimeSliderBar;
-        private readonly LyricPreview lyricPreview;
+        private readonly LyricsPreview lyricsPreview;
 
         public PracticeSettings(IBeatmap beatmap)
             : base("Practice")
@@ -37,7 +36,7 @@ public PracticeSettings(IBeatmap beatmap)
                 {
                     Text = "Lyric:"
                 },
-                lyricPreview = new LyricPreview(lyrics)
+                lyricsPreview = new LyricsPreview(lyrics)
                 {
                     Height = 580,
                     RelativeSizeAxes = Axes.X,
@@ -81,7 +80,7 @@ public void OnReleased(KeyBindingReleaseEvent<KaraokeAction> e)
         private void load(KaraokeRulesetConfigManager config, KaraokeSessionStatics session)
         {
             preemptTimeSliderBar.Current = config.GetBindable<double>(KaraokeRulesetSetting.PracticePreemptTime);
-            session.BindWith(KaraokeRulesetSession.NowLyric, lyricPreview.SelectedLyric);
+            session.BindWith(KaraokeRulesetSession.NowLyric, lyricsPreview.SelectedLyric);
         }
     }
 }