@rpg-engine/long-bow 0.3.35 → 0.3.37

package/dist/long-bow.esm.js

@@ -1,6 +1,6 @@
 import React, { Component, useState, useEffect, useRef, useMemo, Fragment } from 'react';
 import styled from 'styled-components';
-import { GRID_WIDTH, GRID_HEIGHT, ItemSubType, ItemContainerType, ItemType, ItemSocketEventsDisplayLabels, ActionsForInventory, ActionsForEquipmentSet, ActionsForLoot, ActionsForMapContainer, getItemTextureKeyPath, ItemSlotType, getSPForLevel, PeriodOfDay } from '@rpg-engine/shared';
+import { GRID_WIDTH, GRID_HEIGHT, ItemSubType, ItemContainerType, ItemType, ItemSocketEventsDisplayLabels, ActionsForInventory, ActionsForEquipmentSet, ActionsForLoot, ActionsForMapContainer, ItemRarities, getItemTextureKeyPath, ItemSlotType, getSPForLevel, PeriodOfDay } from '@rpg-engine/shared';
 import dayjs from 'dayjs';
 import { ErrorBoundary as ErrorBoundary$1 } from 'react-error-boundary';
 import { RxPaperPlane } from 'react-icons/rx';
@@ -33779,6 +33779,7 @@ var ItemSlot = /*#__PURE__*/observer(function (_ref) {
     }
   };
   return React.createElement(Container$a, {
+    item: item,
     className: "rpgui-icon empty-slot",
     onMouseUp: function onMouseUp() {
       var data = item ? item : null;
@@ -33886,10 +33887,33 @@ var ItemSlot = /*#__PURE__*/observer(function (_ref) {
     }
   }));
 });
+var rarityColor = function rarityColor(item) {
+  switch (item == null ? void 0 : item.rarity) {
+    case ItemRarities.Uncommon:
+      return 'rgba(13, 193, 13, 0.6)';
+    case ItemRarities.Rare:
+      return 'rgba(8, 104, 187, 0.6)';
+    case ItemRarities.Epic:
+      return 'rgba(191, 0, 255, 0.6)';
+    case ItemRarities.Legendary:
+      return 'rgba(255, 191, 0,0.6)';
+    default:
+      return 'unset';
+  }
+};
 var Container$a = /*#__PURE__*/styled.div.withConfig({
   displayName: "ItemSlot__Container",
   componentId: "sc-l2j5ef-0"
-})(["margin:0.1rem;.sprite-from-atlas-img{position:relative;top:1.5rem;left:1.5rem;}position:relative;"]);
+})(["margin:0.1rem;.sprite-from-atlas-img{position:relative;top:1.5rem;left:1.5rem;border-color:", ";box-shadow:", " inset,", ";}position:relative;"], function (_ref2) {
+  var item = _ref2.item;
+  return rarityColor(item);
+}, function (_ref3) {
+  var item = _ref3.item;
+  return "0 0 5px 2px " + rarityColor(item);
+}, function (_ref4) {
+  var item = _ref4.item;
+  return "0 0 4px 3px " + rarityColor(item);
+});
 var ItemContainer = /*#__PURE__*/styled.div.withConfig({
   displayName: "ItemSlot__ItemContainer",
   componentId: "sc-l2j5ef-1"