From b0a611aaa5fd18df89c87a531950df4f1528baa2 Mon Sep 17 00:00:00 2001 From: Fatih20 <fnri39@protonmail.com> Date: Sat, 11 May 2024 10:58:38 +0700 Subject: [PATCH] feat: overhaul pet counter, healthbar, and shop --- Assets/UI/GeneralStyleSheet.uss | 18 ++-- Assets/UI/InGame/HealthBar/HealthBar.cs | 2 +- Assets/UI/InGame/HealthBar/HealthBar.uss | 38 +++++-- Assets/UI/InGame/HealthBar/HealthBar.uxml | 4 +- .../InGame/HealthBar/HealthBarController.cs | 2 - Assets/UI/InGame/HealthBar/PetCounter.cs | 2 +- Assets/UI/InGame/HealthBar/PetCounterCard.cs | 23 ++++- Assets/UI/InGame/Shop/CurrencyContainer.cs | 7 +- Assets/UI/InGame/Shop/PetCatalog.cs | 88 +++++++++++++++-- Assets/UI/InGame/Shop/Shop.uss | 98 ++++++++++++++++++- Assets/UI/InGame/Shop/Shop.uxml | 19 ++-- Assets/UI/InGame/Shop/ShopController.cs | 18 ++++ 12 files changed, 275 insertions(+), 44 deletions(-) diff --git a/Assets/UI/GeneralStyleSheet.uss b/Assets/UI/GeneralStyleSheet.uss index 3a4b0000..e1e8d302 100644 --- a/Assets/UI/GeneralStyleSheet.uss +++ b/Assets/UI/GeneralStyleSheet.uss @@ -42,10 +42,6 @@ translate: -100% 0; } -.has-text { - -unity-font-definition: url("project://database/Assets/TextMesh%20Pro/Examples%20&%20Extras/Fonts/Unity.ttf?fileID=12800000&guid=f4eec857a4fdf2f43be0e9f3d1a984e7&type=3#Unity"); -} - .entering { translate: 100% 0; } @@ -77,6 +73,10 @@ transition-duration: 0.2s; } +.has-text { + -unity-font-definition: url("project://database/Assets/TextMesh%20Pro/Examples%20&%20Extras/Fonts/Unity.ttf?fileID=12800000&guid=f4eec857a4fdf2f43be0e9f3d1a984e7&type=3#Unity"); +} + .cancel-button { background-color: rgb(198, 38, 46); color: rgb(255, 255, 255); @@ -132,11 +132,6 @@ margin-left: 0; } -.info-prompt-text { - font-size: 36px; - -unity-font-style: bold; -} - .spacer { width: initial; flex-grow: 1; @@ -180,6 +175,7 @@ background-color: rgba(13, 82, 191, 0.29); } -.has-text { - -unity-font-definition: url("project://database/Assets/TextMesh%20Pro/Examples%20&%20Extras/Fonts/Unity.ttf?fileID=12800000&guid=f4eec857a4fdf2f43be0e9f3d1a984e7&type=3#Unity"); +.info-prompt-text { + font-size: 36px; + -unity-font-style: bold; } diff --git a/Assets/UI/InGame/HealthBar/HealthBar.cs b/Assets/UI/InGame/HealthBar/HealthBar.cs index 1db80c1c..50de30f9 100644 --- a/Assets/UI/InGame/HealthBar/HealthBar.cs +++ b/Assets/UI/InGame/HealthBar/HealthBar.cs @@ -58,7 +58,7 @@ public partial class HealthBar : VisualElement void GenerateVisualContent(MeshGenerationContext context) { - m_HealthBar.style.width = Length.Percent(Health); + m_HealthBar.style.height = Length.Percent(Health); // m_HealthBarBackground.style.width = Length.Percent(Health); } } \ No newline at end of file diff --git a/Assets/UI/InGame/HealthBar/HealthBar.uss b/Assets/UI/InGame/HealthBar/HealthBar.uss index e8b34671..4d89d9f7 100644 --- a/Assets/UI/InGame/HealthBar/HealthBar.uss +++ b/Assets/UI/InGame/HealthBar/HealthBar.uss @@ -6,12 +6,12 @@ padding-bottom: 0; padding-left: 0; background-color: rgb(198, 38, 46); - width: 0; - height: 30px; + width: 30px; + height: auto; transition-duration: 0.25s; transition-delay: 0.25s; transition-timing-function: ease-in-out; - transition-property: width; + transition-property: height; border-top-left-radius: 6px; border-top-right-radius: 6px; border-bottom-right-radius: 6px; @@ -19,19 +19,20 @@ } .outer-bar { - align-items: flex-start; - justify-content: flex-start; + align-items: center; + justify-content: flex-end; background-color: rgb(70, 70, 70); padding-top: 12px; padding-right: 12px; padding-bottom: 12px; padding-left: 12px; - width: 600px; + width: auto; --outer-bar-width: 600px; border-top-left-radius: 12px; border-top-right-radius: 12px; border-bottom-right-radius: 12px; border-bottom-left-radius: 12px; + height: 300px; } .health-bar-background { @@ -46,10 +47,35 @@ border-top-right-radius: 6px; border-bottom-right-radius: 6px; border-bottom-left-radius: 6px; + flex-direction: row; + padding-top: 4px; + padding-right: 8px; + padding-bottom: 4px; + padding-left: 8px; + justify-content: center; + -unity-text-align: upper-center; + -unity-font-style: bold; + color: rgb(255, 255, 255); + margin-bottom: 12px; + background-color: rgba(0, 0, 0, 0); } .pet-counter-card-pet-name { + color: rgb(255, 255, 255); } .pet-counter-card-count { + color: rgb(255, 255, 255); +} + +.healer { + background-color: rgb(28, 193, 193); +} + +.damage-dealer { + background-color: rgb(223, 43, 43); +} + +.increaser { + background-color: rgb(106, 90, 205); } diff --git a/Assets/UI/InGame/HealthBar/HealthBar.uxml b/Assets/UI/InGame/HealthBar/HealthBar.uxml index bace5c62..6411ce62 100644 --- a/Assets/UI/InGame/HealthBar/HealthBar.uxml +++ b/Assets/UI/InGame/HealthBar/HealthBar.uxml @@ -1,8 +1,8 @@ <ui:UXML xmlns:ui="UnityEngine.UIElements" xmlns:uie="UnityEditor.UIElements" editor-extension-mode="False"> <Style src="project://database/Assets/UI/GeneralStyleSheet.uss?fileID=7433441132597879392&guid=103e7885a07d8d0b094c9b5affb02f2a&type=3#GeneralStyleSheet" /> <Style src="project://database/Assets/UI/InGame/HealthBar/HealthBar.uss?fileID=7433441132597879392&guid=b6eaa6fb0e438346baf729b40d0afa5f&type=3#HealthBar" /> - <ui:VisualElement name="Container" style="flex-grow: 1; align-items: flex-start; justify-content: flex-start; flex-direction: column; padding-bottom: 24px; padding-top: 24px; padding-right: 24px; padding-left: 24px;"> - <HealthBar name="HealthBar" health="100" style="align-self: flex-start; align-items: flex-start; flex-direction: column; justify-content: flex-start; margin-bottom: 16px;"> + <ui:VisualElement name="Container" style="flex-grow: 1; align-items: flex-start; justify-content: flex-start; flex-direction: row; padding-bottom: 24px; padding-top: 24px; padding-right: 24px; padding-left: 24px;"> + <HealthBar name="HealthBar" health="100" style="align-self: flex-start; align-items: flex-start; flex-direction: column; justify-content: flex-start; margin-bottom: 16px; margin-right: 24px;"> <Bindings> <ui:DataBinding property="Health" binding-mode="ToTarget" data-source-type="Player, Assembly-CSharp" data-source-path="health" /> </Bindings> diff --git a/Assets/UI/InGame/HealthBar/HealthBarController.cs b/Assets/UI/InGame/HealthBar/HealthBarController.cs index b82e1ef3..586ff8a3 100644 --- a/Assets/UI/InGame/HealthBar/HealthBarController.cs +++ b/Assets/UI/InGame/HealthBar/HealthBarController.cs @@ -15,8 +15,6 @@ public class HealthBarController : InGameUIScreenController player.OnCompanionAggregationChange += () => { - Debug.Log("Companion aggregation in health bar controller changed"); - Debug.Log(String.Format("[Health Bar controller] Companion Aggregation Count: {0}", player.CompanionAggregation.Keys.Count)); petCounter.CompanionAggregation = player.CompanionAggregation; }; } diff --git a/Assets/UI/InGame/HealthBar/PetCounter.cs b/Assets/UI/InGame/HealthBar/PetCounter.cs index 6d4fd4b3..757f01cd 100644 --- a/Assets/UI/InGame/HealthBar/PetCounter.cs +++ b/Assets/UI/InGame/HealthBar/PetCounter.cs @@ -35,7 +35,7 @@ public partial class PetCounter : VisualElement AddToClassList(PetCounterContainerUSSClassName); foreach (Companion.Type companionType in Enum.GetValues(typeof(Companion.Type))) { - CompanionAggregationCards.Add(companionType, new PetCounterCard(companionType, 0)); + CompanionAggregationCards.Add(companionType, new PetCounterCard(companionType, 5)); Add(CompanionAggregationCards.GetValueOrDefault(companionType)); } generateVisualContent += GenerateVisualContent; diff --git a/Assets/UI/InGame/HealthBar/PetCounterCard.cs b/Assets/UI/InGame/HealthBar/PetCounterCard.cs index 090fda0f..889a70a7 100644 --- a/Assets/UI/InGame/HealthBar/PetCounterCard.cs +++ b/Assets/UI/InGame/HealthBar/PetCounterCard.cs @@ -32,7 +32,18 @@ public partial class PetCounterCard : VisualElement private TextElementWithClassAndName petNameText; private TextElementWithClassAndName countText; + private Dictionary<Companion.Type, List<string>> companionUSSClassName = new() { + {Companion.Type.DAMAGE, new List<string> {"damage-dealer"}}, + {Companion.Type.HEALING, new List<string> {"healer"}}, + {Companion.Type.INCREASE, new List<string> {"increaser"}}, + }; + + private Dictionary<Companion.Type, string> companionEmoji = new() { + {Companion.Type.DAMAGE, "🤜"}, + {Companion.Type.HEALING, "💊"}, + {Companion.Type.INCREASE, "💪"}, + }; public PetCounterCard() { @@ -48,10 +59,20 @@ public partial class PetCounterCard : VisualElement CompanionType = type; count = initialCount; + if (companionUSSClassName.GetValueOrDefault(type) is not null) + { + foreach (string className in companionUSSClassName.GetValueOrDefault(type)) + { + AddToClassList(className); + + } + } + + petNameText = new(String.Format("PetCounterCardPetName-{0}", type.ToString()), new List<string> { "pet-counter-card-pet-name" }); countText = new(String.Format("PetCounterCardCount-{0}", type.ToString()), new List<string> { "pet-counter-card-count" }); - petNameText.text = Companion.GetCompanionTypeNameFromEnum(type); + petNameText.text = companionEmoji.GetValueOrDefault(type); countText.text = initialCount.ToString(); Add(petNameText); diff --git a/Assets/UI/InGame/Shop/CurrencyContainer.cs b/Assets/UI/InGame/Shop/CurrencyContainer.cs index 7a32d691..c6e0a177 100644 --- a/Assets/UI/InGame/Shop/CurrencyContainer.cs +++ b/Assets/UI/InGame/Shop/CurrencyContainer.cs @@ -13,6 +13,8 @@ public partial class CurrencyContainer : VisualElement public TextElementWithClassAndName currencyLabel = new("CurrencyLabel", new List<string> { "currency-label" }); + public TextElementWithClassAndName currencyLabelIcon = new("CurrencyLabelIcon", new List<string> { "currency-label-icon" }); + public int m_currency; [UxmlAttribute, CreateProperty] @@ -31,6 +33,8 @@ public partial class CurrencyContainer : VisualElement name = "CurrencyContainer"; currencyLabel.text = 0.ToString(); + currencyLabelIcon.text = "🪙"; + Add(currencyLabelIcon); Add(currencyLabel); generateVisualContent += GenerateVisualContent; @@ -40,13 +44,14 @@ public partial class CurrencyContainer : VisualElement { if (GameController.Instance != null && GameController.Instance.cheatController.MOTHERLODE) { - currencyLabel.text = "MOTHERLODE!! " + Currency.ToString(); + currencyLabel.text = "♾ï¸"; return; } currencyLabel.text = Currency.ToString(); } + void GenerateVisualContent(MeshGenerationContext context) { } diff --git a/Assets/UI/InGame/Shop/PetCatalog.cs b/Assets/UI/InGame/Shop/PetCatalog.cs index b0d4e841..aa466635 100644 --- a/Assets/UI/InGame/Shop/PetCatalog.cs +++ b/Assets/UI/InGame/Shop/PetCatalog.cs @@ -9,12 +9,31 @@ public partial class PetCatalog : GroupBox public static readonly string PetCatalogContainerUSSClassName = "pet-catalog-container"; - public static readonly string PetCatalogRadioButtonUSSClassName = "pet-catalog-radio-button"; + public static readonly string PetCatalogOptionUSSClassName = "pet-catalog-option"; + public static readonly string PetCatalogOptionTitleUSSClassName = "pet-catalog-option-title"; + + public static readonly string PetCatalogOptionDescriptionUSSClassName = "pet-catalog-option-description"; + + public static readonly string PetCatalogOptionSelectedUSSClassName = "pet-catalog-option-selected"; + + public Companion.Type? selectedCompanionType = Companion.Type.DAMAGE; + + public event Action<Companion.Type?> OnSelectedCompanionTypeChange; + + public List<Button> petOptions = new(); + + public Dictionary<Companion.Type, string> petDescription = new() { + {Companion.Type.DAMAGE, "Damage enemies. Come with a mini AK47."}, + {Companion.Type.HEALING, "Heals you during combat"}, + }; + + public Dictionary<Companion.Type, List<string>> petOptionUSSClassNames = new() { + {Companion.Type.DAMAGE, new() {"damage-dealer-option"}}, + {Companion.Type.HEALING, new() {"healer-option"}}, + }; - public Dictionary<Companion.Type, RadioButton> radioButtons = new(); - public Companion.Type? selectedCompanionType; public PetCatalog() { @@ -23,17 +42,41 @@ public partial class PetCatalog : GroupBox foreach (Companion.Type type in new List<Companion.Type> { Companion.Type.DAMAGE, Companion.Type.HEALING }) { - RadioButton radioButton = new(Companion.GetCompanionTypeNameFromEnum(type)); - radioButtons.Add(type, radioButton); - radioButton.RegisterCallback((ClickEvent evt) => + Button petOptionButton = new Button() + { + name = $"PetOptionButton-{type}" + }; + TextElementWithClassAndName petOptionButtonTitle = new($"PetOptionButtonTitle-{type}", new List<string> { PetCatalogOptionTitleUSSClassName }) + { + text = Companion.GetCompanionTypeNameFromEnum(type) + }; + TextElementWithClassAndName petOptionButtonDescription = new($"PetOptionButtonDescription-{type}", new List<string> { PetCatalogOptionDescriptionUSSClassName }) + { + text = petDescription.GetValueOrDefault(type) + }; + + foreach (string className in petOptionUSSClassNames.GetValueOrDefault(type)) + { + petOptionButton.AddToClassList(className); + } + + petOptionButton.Add(petOptionButtonTitle); + petOptionButton.Add(petOptionButtonDescription); + + petOptions.Add(petOptionButton); + Add(petOptionButton); + + petOptionButton.AddToClassList(PetCatalogOptionUSSClassName); + petOptionButton.RegisterCallback((ClickEvent evt) => { selectedCompanionType = type; + OnSelectedCompanionTypeChange?.Invoke(type); }); - radioButton.AddToClassList(PetCatalogRadioButtonUSSClassName); - Add(radioButtons.GetValueOrDefault(type)); } + RerenderCatalogOption(selectedCompanionType); + OnSelectedCompanionTypeChange += RerenderCatalogOption; generateVisualContent += GenerateVisualContent; } @@ -42,4 +85,33 @@ public partial class PetCatalog : GroupBox { } + + public void RerenderCatalogOption(Companion.Type? type) + { + foreach (Button petOptionButton in petOptions) + { + Enum.TryParse(petOptionButton.name.Split("-")[1], out Companion.Type buttonType); + + if (buttonType == type) + { + petOptionButton.AddToClassList(PetCatalogOptionSelectedUSSClassName); + foreach (string className in petOptionUSSClassNames.GetValueOrDefault(buttonType)) + { + petOptionButton.RemoveFromClassList(className); + + } + } + else + { + petOptionButton.RemoveFromClassList(PetCatalogOptionSelectedUSSClassName); + foreach (string className in petOptionUSSClassNames.GetValueOrDefault(buttonType)) + { + petOptionButton.AddToClassList(className); + + } + } + + } + + } } \ No newline at end of file diff --git a/Assets/UI/InGame/Shop/Shop.uss b/Assets/UI/InGame/Shop/Shop.uss index c645b241..533c123b 100644 --- a/Assets/UI/InGame/Shop/Shop.uss +++ b/Assets/UI/InGame/Shop/Shop.uss @@ -1,18 +1,110 @@ +.has-text { + -unity-font-definition: url("project://database/Assets/TextMesh%20Pro/Examples%20&%20Extras/Fonts/Unity.ttf?fileID=12800000&guid=f4eec857a4fdf2f43be0e9f3d1a984e7&type=3#Unity"); +} + .pet-catalog-container { } .pet-catalog-radio-button { } -.currency-container { +.currency-label { } -.currency-label { +.pet-counter-container { } .pet-counter-card { + border-top-left-radius: 6px; + border-top-right-radius: 6px; + border-bottom-right-radius: 6px; + border-bottom-left-radius: 6px; + flex-direction: row; + padding-top: 4px; + padding-right: 8px; + padding-bottom: 4px; + padding-left: 8px; + justify-content: center; + -unity-text-align: upper-center; + -unity-font-style: bold; color: rgb(255, 255, 255); + margin-bottom: 12px; + background-color: rgba(0, 0, 0, 0); + rotate: -10deg; } -.pet-counter-container { +.pet-counter-card-pet-name { + color: rgb(255, 255, 255); +} + +.pet-counter-card-count { + color: rgb(255, 255, 255); +} + +.healer { + background-color: rgb(28, 193, 193); +} + +.damage-dealer { + background-color: rgb(223, 43, 43); +} + +.increaser { + background-color: rgb(106, 90, 205); +} + +.currency-container { + flex-direction: row; + padding-top: 4px; + padding-right: 8px; + padding-bottom: 4px; + padding-left: 8px; + rotate: -10deg; +} + +.pet-catalog-option { + width: 25%; + white-space: normal; + border-top-left-radius: 12px; + border-top-right-radius: 12px; + border-bottom-right-radius: 12px; + border-bottom-left-radius: 12px; + margin-right: 12px; + margin-left: 12px; + rotate: -10deg; + transition-property: all; + transition-duration: 0.2s; + border-left-color: rgba(0, 0, 0, 0); + border-right-color: rgba(0, 0, 0, 0); + border-top-color: rgba(0, 0, 0, 0); + border-bottom-color: rgba(0, 0, 0, 0); +} + +.pet-catalog-option-title { + -unity-font-style: bold; + font-size: 18px; +} + +.pet-catalog-option-description { + white-space: normal; +} + +.pet-catalog-option-selected { + scale: 1.2 1.2; + background-color: rgb(212, 212, 212); + color: rgb(39, 52, 69); + rotate: 0; +} + +.pet-catalog-option:hover { + rotate: 0; + scale: 1.2 1.2; +} + +.damage-dealer-option { + background-color: rgb(223, 43, 43); +} + +.healer-option { + background-color: rgb(28, 193, 193); } diff --git a/Assets/UI/InGame/Shop/Shop.uxml b/Assets/UI/InGame/Shop/Shop.uxml index 196fb1fa..662ec8ee 100644 --- a/Assets/UI/InGame/Shop/Shop.uxml +++ b/Assets/UI/InGame/Shop/Shop.uxml @@ -1,19 +1,22 @@ <ui:UXML xmlns:ui="UnityEngine.UIElements" xmlns:uie="UnityEditor.UIElements" editor-extension-mode="False"> <Style src="project://database/Assets/UI/GeneralStyleSheet.uss?fileID=7433441132597879392&guid=103e7885a07d8d0b094c9b5affb02f2a&type=3#GeneralStyleSheet" /> <Style src="project://database/Assets/UI/InGame/Shop/Shop.uss?fileID=7433441132597879392&guid=32cb86584eff2bc8ca1d9d1eb86a7980&type=3#Shop" /> - <ui:VisualElement name="Container" class="overlay" style="flex-grow: 1; flex-direction: row; padding-top: 24px; padding-right: 24px; padding-bottom: 24px; padding-left: 24px; color: rgb(255, 255, 255);"> - <PetCounter /> - <ui:VisualElement name="ShopContainer" style="flex-grow: 1; align-items: flex-end; flex-direction: column;"> - <CurrencyContainer> + <ui:VisualElement name="Container" class="overlay" style="flex-grow: 1; flex-direction: row; padding-top: 24px; padding-right: 24px; padding-bottom: 24px; padding-left: 24px; color: rgb(255, 255, 255); align-items: flex-start; justify-content: flex-start; align-self: auto;"> + <ui:VisualElement name="PetCounterContainer" style="flex-grow: 0; align-items: flex-start; align-self: flex-end;"> + <CurrencyContainer name="CurrencyContainer" class="currency-container" style="flex-direction: row; margin-bottom: 12px; border-top-left-radius: 6px; border-top-right-radius: 6px; border-bottom-right-radius: 6px; border-bottom-left-radius: 6px; -unity-font-style: bold; background-color: rgb(250, 250, 250); color: rgb(0, 0, 0);"> <Bindings> <ui:DataBinding property="Currency" binding-mode="ToTarget" data-source-type="_Scripts.Core.Game.Data.Currency.CurrencyData, Assembly-CSharp" data-source-path="balance" /> </Bindings> </CurrencyContainer> - <PetCatalog /> - <ui:VisualElement name="ButtonContainer" style="flex-grow: 1; justify-content: flex-end;"> + <PetCounter /> + </ui:VisualElement> + <ui:VisualElement name="ShopContainer" style="flex-grow: 1; align-items: center; flex-direction: column; align-self: stretch; padding-top: 48px;"> + <ui:Label text="Companion Store" name="ShopTitle" class="info-prompt-text rotated has-text" /> + <PetCatalog class="has-text" style="flex-direction: row; flex-grow: 1; align-items: center; justify-content: center; align-self: stretch;" /> + <ui:VisualElement name="ButtonContainer" style="flex-grow: 0; justify-content: flex-end; align-items: stretch; align-self: auto;"> <ui:Label text="No Pet Selected!" name="NoPetSelectedLabel" style="align-items: flex-end; -unity-text-align: upper-right; visibility: hidden;" /> - <ui:Button text="Buy" name="BuyPetButton" class="button" /> - <ui:Button text="Exit Shop" name="ExitShopButton" class="button" /> + <ui:Button text="Buy" name="BuyPetButton" class="button has-texr rotated rounded do-button bottom-above-spaced" /> + <ui:Button text="Exit Store" name="ExitShopButton" class="button has-texr rotated rounded cancel-button" /> </ui:VisualElement> </ui:VisualElement> </ui:VisualElement> diff --git a/Assets/UI/InGame/Shop/ShopController.cs b/Assets/UI/InGame/Shop/ShopController.cs index 54cdf374..1ad08d96 100644 --- a/Assets/UI/InGame/Shop/ShopController.cs +++ b/Assets/UI/InGame/Shop/ShopController.cs @@ -80,5 +80,23 @@ public class ShopController : InGameUIScreenController PetCounter.CompanionAggregation = player.CompanionAggregation; }; + PetCatalog.OnSelectedCompanionTypeChange += ToggleBuyButtonActive; + + } + + void ToggleBuyButtonActive(Companion.Type? selectedType) + { + BuyButton.SetEnabled(selectedType is not null); + + if (selectedType is null) + { + BuyButton.RemoveFromClassList("do-button"); + BuyButton.AddToClassList("disabled"); + } + else + { + BuyButton.AddToClassList("do-button"); + BuyButton.RemoveFromClassList("disabled"); + } } } -- GitLab