@rpg-engine/long-bow 0.3.35 → 0.3.36
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/long-bow.cjs.development.js +25 -1
- package/dist/long-bow.cjs.development.js.map +1 -1
- package/dist/long-bow.cjs.production.min.js +1 -1
- package/dist/long-bow.cjs.production.min.js.map +1 -1
- package/dist/long-bow.esm.js +26 -2
- package/dist/long-bow.esm.js.map +1 -1
- package/package.json +1 -1
- package/src/components/Item/Inventory/ItemSlot.tsx +27 -1
- package/src/mocks/itemContainer.mocks.ts +4 -4
package/package.json
CHANGED
|
@@ -3,6 +3,7 @@ import {
|
|
|
3
3
|
IItem,
|
|
4
4
|
IItemContainer,
|
|
5
5
|
ItemContainerType,
|
|
6
|
+
ItemRarities,
|
|
6
7
|
ItemSlotType,
|
|
7
8
|
ItemType,
|
|
8
9
|
} from '@rpg-engine/shared';
|
|
@@ -258,6 +259,7 @@ export const ItemSlot: React.FC<IProps> = observer(
|
|
|
258
259
|
|
|
259
260
|
return (
|
|
260
261
|
<Container
|
|
262
|
+
item={item}
|
|
261
263
|
className="rpgui-icon empty-slot"
|
|
262
264
|
onMouseUp={() => {
|
|
263
265
|
const data = item ? item : null;
|
|
@@ -392,12 +394,36 @@ export const ItemSlot: React.FC<IProps> = observer(
|
|
|
392
394
|
}
|
|
393
395
|
);
|
|
394
396
|
|
|
395
|
-
const
|
|
397
|
+
const rarityColor = (item: IItem | null) => {
|
|
398
|
+
switch (item?.rarity) {
|
|
399
|
+
case ItemRarities.Uncommon:
|
|
400
|
+
return 'rgba(13, 193, 13, 0.6)';
|
|
401
|
+
case ItemRarities.Rare:
|
|
402
|
+
return 'rgba(8, 104, 187, 0.6)';
|
|
403
|
+
case ItemRarities.Epic:
|
|
404
|
+
return 'rgba(191, 0, 255, 0.6)';
|
|
405
|
+
case ItemRarities.Legendary:
|
|
406
|
+
return 'rgba(255, 191, 0,0.6)';
|
|
407
|
+
default:
|
|
408
|
+
return 'unset';
|
|
409
|
+
}
|
|
410
|
+
};
|
|
411
|
+
|
|
412
|
+
interface ContainerTypes {
|
|
413
|
+
item: IItem | null;
|
|
414
|
+
}
|
|
415
|
+
|
|
416
|
+
const Container = styled.div<ContainerTypes>`
|
|
396
417
|
margin: 0.1rem;
|
|
397
418
|
.sprite-from-atlas-img {
|
|
398
419
|
position: relative;
|
|
399
420
|
top: 1.5rem;
|
|
400
421
|
left: 1.5rem;
|
|
422
|
+
border-color: ${({ item }) => rarityColor(item)};
|
|
423
|
+
box-shadow: ${({ item }) => `0 0 5px 2px ${rarityColor(item)}`} inset, ${({
|
|
424
|
+
item,
|
|
425
|
+
}) => `0 0 4px 3px ${rarityColor(item)}`};
|
|
426
|
+
//background-color: ${({ item }) => rarityColor(item)};
|
|
401
427
|
}
|
|
402
428
|
position: relative;
|
|
403
429
|
`;
|
|
@@ -39,7 +39,7 @@ export const items: IItem[] = [
|
|
|
39
39
|
isStackable: false,
|
|
40
40
|
createdAt: '2022-06-04T03:18:09.335Z',
|
|
41
41
|
updatedAt: '2022-06-04T18:16:49.056Z',
|
|
42
|
-
rarity: ItemRarities.
|
|
42
|
+
rarity: ItemRarities.Legendary
|
|
43
43
|
},
|
|
44
44
|
{
|
|
45
45
|
_id: '629acef1c7c8e8002ff73564',
|
|
@@ -72,7 +72,7 @@ export const items: IItem[] = [
|
|
|
72
72
|
isStackable: false,
|
|
73
73
|
createdAt: '2022-06-04T03:18:09.335Z',
|
|
74
74
|
updatedAt: '2022-06-04T18:16:49.056Z',
|
|
75
|
-
rarity: ItemRarities.
|
|
75
|
+
rarity: ItemRarities.Epic
|
|
76
76
|
},
|
|
77
77
|
{
|
|
78
78
|
_id: '629acef1c7c8e8002ff60723',
|
|
@@ -106,7 +106,7 @@ export const items: IItem[] = [
|
|
|
106
106
|
fullDescription: 'Recover your life',
|
|
107
107
|
createdAt: '2022-06-04T03:18:09.335Z',
|
|
108
108
|
updatedAt: '2022-06-04T18:16:49.056Z',
|
|
109
|
-
rarity: ItemRarities.
|
|
109
|
+
rarity: ItemRarities.Uncommon
|
|
110
110
|
},
|
|
111
111
|
{
|
|
112
112
|
_id: '629acek4j7c8e8002ff60034',
|
|
@@ -140,7 +140,7 @@ export const items: IItem[] = [
|
|
|
140
140
|
fullDescription: 'Recover your mana',
|
|
141
141
|
createdAt: '2022-06-04T03:18:09.335Z',
|
|
142
142
|
updatedAt: '2022-06-04T18:16:49.056Z',
|
|
143
|
-
rarity: ItemRarities.
|
|
143
|
+
rarity: ItemRarities.Rare
|
|
144
144
|
},
|
|
145
145
|
{
|
|
146
146
|
_id: '629acek4j7c8e8002fg60034',
|