Hiro Inventory - UI polish

Nakama+Hiro/definitions/dev1/base-inventory.json

@@ -10,7 +10,7 @@
       "consumable": false,
       "string_properties": {
         "equipment_slot": "right_hand",
-        "rarity": "legendary"
+        "rarity": "common"
       },
       "numeric_properties": {
         "rank": 1
@@ -25,7 +25,7 @@
       "stackable": true,
       "consumable": true,
       "string_properties": {
-        "rarity": "uncommon"
+        "rarity": "common"
       },
       "keep_zero": true,
       "consume_reward": {
@@ -46,7 +46,7 @@
       "stackable": true,
       "consumable": true,
       "string_properties": {
-        "rarity": "epic"
+        "rarity": "uncommon"
       },
       "keep_zero": true,
       "consume_reward": {
@@ -62,38 +62,190 @@
     "small_crafting_bag": {
       "name": "Small Crafting Bag",
       "description": "A small bag of miscellaneous crafting materials.",
-      "category": "loot_bags",
+      "category": "crafting_materials",
       "max_count": 99,
       "stackable": false,
       "consumable": true,
       "string_properties": {
-        "rarity": "common"
+        "rarity": "uncommon"
       },
       "consume_reward": {
         "max_rolls": 2,
         "weighted": [
           {
             "items": {
-              "leather_scraps": {
+              "ruby_gem": {
                 "min": 1,
-                "max": 5
+                "max": 3
               }
             },
-            "weight": 50
+            "weight": 40
           },
+          {
+            "currencies": {
+              "coins": {
+                "min": 50,
+                "max": 200,
+                "multiple": 10
+              }
+            },
+            "weight": 60
+          }
+        ]
+      }
+    },
+    "wooden_shield": {
+      "name": "Wooden Shield",
+      "description": "A basic shield made from reinforced wood.",
+      "category": "armor",
+      "item_sets": ["shield", "common_armor"],
+      "max_count": 99,
+      "stackable": false,
+      "consumable": false,
+      "string_properties": {
+        "equipment_slot": "left_hand",
+        "rarity": "common"
+      },
+      "numeric_properties": {
+        "defense": 15,
+        "block_chance": 10
+      },
+      "disabled": false
+    },
+    "mana_potion": {
+      "name": "Mana Potion",
+      "description": "A vial of blue liquid that restores magical energy.",
+      "category": "potions",
+      "item_sets": ["consumables"],
+      "max_count": 99,
+      "stackable": true,
+      "consumable": true,
+      "string_properties": {
+        "rarity": "uncommon"
+      },
+      "keep_zero": true,
+      "consume_reward": {
+        "guaranteed": {
+          "energies": {
+            "mana": {
+              "min": 30,
+              "max": 60
+            }
+          }
+        }
+      }
+    },
+    "iron_shield": {
+      "name": "Iron Shield",
+      "description": "A sturdy shield forged from iron. Provides solid protection.",
+      "category": "armor",
+      "item_sets": ["shield", "common_armor"],
+      "max_count": 99,
+      "stackable": false,
+      "consumable": false,
+      "string_properties": {
+        "rarity": "rare"
+      },
+      "numeric_properties": {
+        "defense": 25,
+        "rank": 1
+      },
+      "disabled": false
+    },
+    "magic_gem": {
+      "name": "Magic Gem",
+      "description": "A precious gemstone that radiates magical energy.",
+      "category": "crafting_materials",
+      "item_sets": ["materials", "gems"],
+      "max_count": 5,
+      "stackable": true,
+      "consumable": true,
+      "string_properties": {
+        "rarity": "epic"
+      }
+    },
+    "golden_key": {
+      "name": "Golden Key",
+      "description": "An ornate golden key that opens special treasure chests.",
+      "category": "keys",
+      "item_sets": ["special_items"],
+      "max_count": 9,
+      "stackable": false,
+      "consumable": true,
+      "string_properties": {
+        "rarity": "rare"
+      },
+      "keep_zero": true,
+      "consume_reward": {
+        "guaranteed": {
+          "currencies": {
+            "coins": {
+              "min": 500,
+              "max": 1000,
+              "multiple": 100
+            }
+          }
+        },
+        "max_rolls": 1,
+        "weighted": [
           {
             "items": {
-              "bronze_nails": {
-                "min": 5,
-                "max": 100,
+              "ruby_gem": {
+                "min": 1,
+                "max": 3
+              }
+            },
+            "weight": 50
+          },
+          {
+            "currencies": {
+              "gems": {
+                "min": 10,
+                "max": 25,
                 "multiple": 5
               }
             },
             "weight": 50
           }
         ]
       }
-    }
+    },
+    "lucky_charm": {
+      "name": "Lucky Charm",
+      "description": "A four-leaf clover that brings good fortune when used.",
+      "category": "artifacts",
+      "item_sets": ["consumables", "buffs"],
+      "max_count": 5,
+      "stackable": true,
+      "consumable": true,
+      "string_properties": {
+        "rarity": "epic"
+      },
+      "keep_zero": false,
+      "consume_reward": {
+        "guaranteed": {
+          "currencies": {
+            "coins": {
+              "min": 50,
+              "max": 150
+            }
+          }
+        }
+      }
+    },
+    "evil_eye": {
+        "name": "Eye of Sauron",
+        "description": "It is said to have the power to control the minds of others.",
+        "category": "artifacts",
+        "item_sets": ["special_items"],
+        "max_count": 1,
+        "stackable": false,
+        "consumable": false,
+        "string_properties": {
+          "rarity": "legendary"
+        },
+        "keep_zero": false
+      }
   },
   "limits": {
     "categories": {

UnityHiroInventory/Assets/UnityHiroInventory/Scenes/Main.unity

@@ -372,6 +372,20 @@ MonoBehaviour:
     icon: {fileID: 3183744519848866733, guid: 6556f306ccdfc46558bec4887327a115, type: 3}
   - itemId: bomb
     icon: {fileID: 1996048190166631823, guid: 239daefcee8c34448936bf5ec71b371e, type: 3}
+  - itemId: wooden_shield
+    icon: {fileID: -8020145047929140699, guid: 4ad4be2b759d24102a9b7575210ea2db, type: 3}
+  - itemId: mana_potion
+    icon: {fileID: 1188792238481573301, guid: 9c4eb9c4dee3149ebb37bdc0ada990b4, type: 3}
+  - itemId: iron_shield
+    icon: {fileID: 473728356293506998, guid: 0cf9f927f55bd443da92aad7ed15e7db, type: 3}
+  - itemId: magic_gem
+    icon: {fileID: 6521567286427641033, guid: 291bae5a918dd4ea3acba4ea98dc00d8, type: 3}
+  - itemId: golden_key
+    icon: {fileID: 1312465433301553684, guid: fb135d08768c24e41bfeb6807f9fca0a, type: 3}
+  - itemId: lucky_charm
+    icon: {fileID: -5502143058471085903, guid: 5ce489eb04a834e6a89e668e109041e2, type: 3}
+  - itemId: evil_eye
+    icon: {fileID: 6795985223779720529, guid: 20ee1762fea504e5bab4723bf295eb8e, type: 3}
   defaultIcon: {fileID: 4572200582248954793, guid: 0b0f45dc7e62c47689da39968a4415fa, type: 3}
 --- !u!1 &2121322951
 GameObject:

UnityHiroInventory/Assets/UnityHiroInventory/Scripts/HiroInventoryController.cs

@@ -170,6 +170,7 @@ private void InitializeUI()
 
             // Item tooltip
             itemTooltip = rootElement.Q<VisualElement>("item-tooltip");
+            itemTooltip.pickingMode = PickingMode.Ignore; // Prevent tooltip from intercepting mouse events
             tooltipNameLabel = rootElement.Q<Label>("tooltip-name");
             tooltipDescriptionLabel = rootElement.Q<Label>("tooltip-description");
             tooltipCategoryLabel = rootElement.Q<Label>("tooltip-category");
@@ -269,7 +270,7 @@ private void PopulateInventoryGrid()
 
                 // Update quantity label
                 var quantityLabel = slotRoot.Q<Label>("item-quantity");
-                quantityLabel.text = $"x{item.Count}";
+                quantityLabel.text = $"{item.Count}";
 
                 // Get rarity and set background color
                 var rarity = item.StringProperties.ContainsKey("rarity") 
@@ -292,7 +293,7 @@ private void PopulateInventoryGrid()
                 {
                     if (selectedItem != item)
                     {
-                        Color hoverColor = new Color(rarityColor.r, rarityColor.g, rarityColor.b, 0.5f);
+                        Color hoverColor = new Color(rarityColor.r, rarityColor.g, rarityColor.b, 0.8f);
                         slotRoot.style.backgroundColor = new StyleColor(hoverColor);
                         slotRoot.style.borderTopColor = new StyleColor(Color.white);
                         slotRoot.style.borderBottomColor = new StyleColor(Color.white);
@@ -323,11 +324,12 @@ private Color GetRarityColor(string rarity)
         {
             return rarity switch
             {
-                "common" => new Color(0.6f, 0.6f, 0.6f, 0.3f),      // Gray
-                "uncommon" => new Color(0.2f, 0.8f, 0.2f, 0.3f),    // Green
-                "epic" => new Color(0.6f, 0.3f, 0.9f, 0.3f),        // Purple
-                "legendary" => new Color(1f, 0.6f, 0f, 0.3f),       // Orange/Gold
-                _ => new Color(0.52f, 0.6f, 1f, 0.1f)               // Default blue
+                "common" => new Color(0.541f, 0.714f, 0.965f, 1.0f),  
+                "uncommon" => new Color(0.784f, 0.875f, 0.478f, 1.0f),
+                "rare" => new Color(0.647f, 0.533f, 0.965f, 1.0f),
+                "epic" => new Color(0.992f, 0.878f, 0.373f, 1.0f),
+                "legendary" => new Color(1f, 0.584f, 0.573f, 1.0f),
+                _ => new Color(0.745f, 0.722f, 0.855f, 1.0f) // Default color
             };
         }
 
@@ -376,11 +378,11 @@ private void SelectItem(IInventoryItem item, VisualElement slot)
             selectedItem = item;
             selectedSlot = slot;
 
-            // Highlight selected slot with gold border (keeping the rarity background)
-            slot.style.borderTopColor = new StyleColor(new Color(1f, 0.84f, 0f));
-            slot.style.borderBottomColor = new StyleColor(new Color(1f, 0.84f, 0f));
-            slot.style.borderLeftColor = new StyleColor(new Color(1f, 0.84f, 0f));
-            slot.style.borderRightColor = new StyleColor(new Color(1f, 0.84f, 0f));
+            // Highlight selected slot with turquoise border (keeping the rarity background)
+            slot.style.borderTopColor = new StyleColor(new Color(0.467f, 0.984f, 0.937f));
+            slot.style.borderBottomColor = new StyleColor(new Color(0.467f, 0.984f, 0.937f));
+            slot.style.borderLeftColor = new StyleColor(new Color(0.467f, 0.984f, 0.937f));
+            slot.style.borderRightColor = new StyleColor(new Color(0.467f, 0.984f, 0.937f));
 
             UpdateActionButtons();
 
@@ -396,28 +398,35 @@ private void ShowTooltip(IInventoryItem item, Vector2 mousePosition)
             tooltipCategoryLabel.text = $"Category: {item.Category ?? "Uncategorized"}";
             tooltipQuantityLabel.text = $"Quantity: {item.Count}";
 
-            // Display properties if any
+            // Build comprehensive properties text
             var propertiesText = "";
+
+            // Item Attributes
+            propertiesText += "Item Attributes:\n";
+            propertiesText += $"  • Stackable: {(item.Stackable ? "Yes" : "No")}\n";
+            propertiesText += $"  • Consumable: {(item.Consumable ? "Yes" : "No")}\n";
+            propertiesText += $"  • Max Stack: {item.MaxCount}\n";
+
+            // String Properties
             if (item.StringProperties != null && item.StringProperties.Count > 0)
             {
-                propertiesText += "String Properties:\n";
+                propertiesText += "\nString Properties:\n";
                 foreach (var prop in item.StringProperties)
                 {
                     propertiesText += $"  • {prop.Key}: {prop.Value}\n";
                 }
             }
+
+            // Numeric Properties
             if (item.NumericProperties != null && item.NumericProperties.Count > 0)
             {
-                if (propertiesText.Length > 0) propertiesText += "\n";
-                propertiesText += "Numeric Properties:\n";
+                propertiesText += "\nNumeric Properties:\n";
                 foreach (var prop in item.NumericProperties)
                 {
                     propertiesText += $"  • {prop.Key}: {prop.Value}\n";
                 }
             }
-            tooltipPropertiesLabel.text = string.IsNullOrEmpty(propertiesText) 
-                ? "No custom properties." 
-                : propertiesText;
+            tooltipPropertiesLabel.text = propertiesText;
 
             // Position tooltip near the mouse cursor, offset to the right
             var offsetX = 20f;

UnityHiroInventory/Assets/UnityHiroInventory/Scripts/InventoryItemView.cs

@@ -23,7 +23,7 @@ public void SetVisualElement(VisualElement visualElement)
         public void SetInventoryItem(IInventoryItem item)
         {
             nameLabel.text = item.Name;
-            quantityLabel.text = item.Count > 0 ? $"x{item.Count}" : "x0";
+            quantityLabel.text = item.Count > 0 ? $"{item.Count}" : "0";
             categoryLabel.text = item.Category ?? "Uncategorized";
 
             // Add visual indicator for consumable items

UnityHiroInventory/Assets/UnityHiroInventory/UI/Inventory.uxml

@@ -12,18 +12,18 @@
                 <ui:ScrollView horizontal-scroller-visibility="Hidden" style="flex-grow: 1; align-items: stretch; align-content: center; align-self: stretch; margin-top: 10px; margin-right: 10px; margin-bottom: 10px; margin-left: 10px;">
                     <ui:VisualElement name="inventory-grid" style="flex-direction: row; flex-wrap: wrap; justify-content: flex-start; align-content: flex-start; padding: 10px;" />
                 </ui:ScrollView>
-            </ui:VisualElement>
-            <ui:VisualElement name="action-buttons" style="flex-direction: row; justify-content: space-between; margin-bottom: 20px; height: auto; padding: 20px; background-color: rgba(132, 154, 255, 0.05); border-radius: 15px; flex-grow: 0; flex-shrink: 0;">
-                <ui:VisualElement style="flex-direction: column; width: 40%;">
-                    <ui:Button text="Consume Item" name="item-consume" class="heroic-button" style="margin-bottom: 10px; flex-grow: 1;" />
-                    <ui:Button text="Remove Item" name="item-remove" class="heroic-button" style="flex-grow: 1;" />
-                </ui:VisualElement>
-                <ui:VisualElement style="flex-direction: column; width: 40%; align-items: center; align-self: center; align-content: center;">
+                <ui:VisualElement style="flex-direction: row; width: 100%; align-items: center; align-self: center; align-content: center; padding-top: 0; padding-right: 0; padding-bottom: 0; padding-left: 10px;">
                     <ui:Button text="Refresh" name="inventory-refresh" class="heroic-button-square" style="align-self: center; margin-top: 10px;" />
                 </ui:VisualElement>
-                <ui:VisualElement style="flex-direction: column; width: 40%;">
-                    <ui:DropdownField name="grant-item-dropdown" style="margin-bottom: 10px; flex-grow: 1; border-color: rgb(132, 154, 255); border-width: 2px; border-radius: 10px; padding: 10px; font-size: 50%; min-height: 50px; border-left-color: rgb(255, 255, 255); border-right-color: rgb(255, 255, 255); border-top-color: rgb(255, 255, 255); border-bottom-color: rgb(255, 255, 255); border-top-width: 0; border-right-width: 0; border-bottom-width: 0; border-left-width: 0;" />
-                    <ui:Button text="Grant Item" name="item-grant" class="heroic-button" style="flex-grow: 1;" />
+            </ui:VisualElement>
+            <ui:VisualElement name="action-buttons" style="flex-direction: row; justify-content: space-between; margin-bottom: 20px; height: auto; padding: 20px; background-color: rgba(132, 154, 255, 0.05); border-radius: 15px; flex-grow: 0; flex-shrink: 0; width: 100%; align-items: center; padding-top: 20px; padding-right: 20px; padding-bottom: 20px; padding-left: 20px;">
+                <ui:VisualElement style="flex-direction: row; width: 40%; align-items: flex-start;">
+                    <ui:DropdownField name="grant-item-dropdown" style="margin-bottom: 10px; flex-grow: 1; border-color: rgb(132, 154, 255); border-width: 2px; border-radius: 10px; padding: 10px; font-size: 50%; min-height: 50px; border-left-color: rgb(255, 255, 255); border-right-color: rgb(255, 255, 255); border-top-color: rgb(255, 255, 255); border-bottom-color: rgb(255, 255, 255); border-top-width: 0; border-right-width: 0; border-bottom-width: 0; border-left-width: 0; flex-direction: row; width: 100px;" />
+                    <ui:Button text="Grant Item" name="item-grant" class="heroic-button" style="flex-grow: 1; flex-direction: row; width: 40px; padding-right: 10px; padding-left: 10px;" />
+                </ui:VisualElement>
+                <ui:VisualElement style="flex-direction: row; width: 40%; align-items: flex-start;">
+                    <ui:Button text="Remove Item" name="item-remove" class="heroic-button" style="flex-grow: 1; width: 40px; -unity-background-image-tint-color: rgb(85, 100, 153); padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px;" />
+                    <ui:Button text="Consume Item" name="item-consume" class="heroic-button" style="margin-bottom: 10px; flex-grow: 1; width: 40px; flex-direction: row; padding-right: 10px; padding-left: 10px; margin-left: 10px;" />
                 </ui:VisualElement>
             </ui:VisualElement>
         </ui:VisualElement>

UnityHiroInventory/Assets/UnityHiroInventory/UI/InventoryItemTemplate.uxml

@@ -1,7 +1,7 @@
 <ui:UXML xmlns:ui="UnityEngine.UIElements" editor-extension-mode="False">
     <Style src="project://database/Assets/UnityHiroInventory/HeroicUI/USS/HeroicUSS.uss?fileID=7433441132597879392&amp;guid=c85112b37ef124d80aa9b1b987d1c4d8&amp;type=3#HeroicUSS" />
-    <ui:VisualElement name="inventory-slot" class="inventory-slot" style="width: 200px; height: 200px; margin: 5px; border-width: 0; border-radius: 10px; align-items: center; justify-content: center; -unity-background-scale-mode: stretch-to-fill; margin-top: 10px; margin-right: 10px; margin-bottom: 10px; margin-left: 10px; border-top-width: 4px; border-right-width: 4px; border-bottom-width: 4px; border-left-width: 4px; 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); min-width: auto; min-height: auto; flex-shrink: 0; flex-grow: 0;">
+    <ui:VisualElement name="inventory-slot" class="inventory-slot" style="width: 200px; height: 200px; margin: 5px; border-width: 0; border-radius: 10px; align-items: center; justify-content: center; -unity-background-scale-mode: stretch-to-fill; margin-top: 10px; margin-right: 10px; margin-bottom: 10px; margin-left: 10px; border-top-width: 4px; border-right-width: 4px; border-bottom-width: 4px; border-left-width: 4px; 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); min-width: auto; min-height: auto; flex-shrink: 0; flex-grow: 0; border-top-left-radius: 15px; border-top-right-radius: 15px; border-bottom-right-radius: 15px; border-bottom-left-radius: 15px;">
         <ui:VisualElement name="item-icon" style="width: 60%; height: 60%; border-radius: 0; background-color: rgba(0, 0, 0, 0); align-items: center; justify-content: center; -unity-background-scale-mode: scale-to-fit;" />
-        <ui:Label name="item-quantity" text="x0" style="position: absolute; bottom: 5px; right: 5px; font-size: 50%; color: rgb(255, 255, 255); -unity-font-style: bold; padding: 2px 6px; border-radius: 5px; text-shadow: 3px 3px 3px rgb(0, 0, 0); -unity-background-image-tint-color: rgb(0, 0, 0); -unity-text-outline-width: 0; -unity-text-outline-color: rgb(0, 0, 0);" />
+        <ui:Label name="item-quantity" text="0" style="position: absolute; bottom: 5px; right: 5px; font-size: 42%; color: rgb(255, 255, 255); -unity-font-style: bold; padding: 2px 6px; border-radius: 5px; text-shadow: 3px 3px 3px rgb(0, 0, 0); -unity-background-image-tint-color: rgb(0, 0, 0); -unity-text-outline-width: 0; -unity-text-outline-color: rgb(0, 0, 0);" />
     </ui:VisualElement>
 </ui:UXML>