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&amp;guid=103e7885a07d8d0b094c9b5affb02f2a&amp;type=3#GeneralStyleSheet" />
     <Style src="project://database/Assets/UI/InGame/HealthBar/HealthBar.uss?fileID=7433441132597879392&amp;guid=b6eaa6fb0e438346baf729b40d0afa5f&amp;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&amp;guid=103e7885a07d8d0b094c9b5affb02f2a&amp;type=3#GeneralStyleSheet" />
     <Style src="project://database/Assets/UI/InGame/Shop/Shop.uss?fileID=7433441132597879392&amp;guid=32cb86584eff2bc8ca1d9d1eb86a7980&amp;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