@rpg-engine/long-bow 0.5.28 → 0.5.30
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/components/Item/Inventory/ItemSlot.d.ts +0 -1
- package/dist/components/Item/Inventory/ItemSlotRarity.d.ts +2 -0
- package/dist/hooks/useTapAndHold.d.ts +10 -0
- package/dist/long-bow.cjs.development.js +108 -105
- 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 +110 -106
- package/dist/long-bow.esm.js.map +1 -1
- package/dist/stories/ItemContainer.stories.d.ts +0 -1
- package/package.json +1 -1
- package/src/components/Item/Cards/ItemInfo.tsx +2 -1
- package/src/components/Item/Inventory/ItemSlot.tsx +110 -128
- package/src/components/Item/Inventory/ItemSlotRarity.ts +17 -0
- package/src/components/Item/Inventory/ItemSlotRenderer.tsx +8 -8
- package/src/components/Marketplace/MarketplaceRows.tsx +1 -1
- package/src/hooks/useTapAndHold.ts +30 -0
- package/src/stories/ItemContainer.stories.tsx +0 -6
|
@@ -29,5 +29,4 @@ interface IProps {
|
|
|
29
29
|
isDepotSystem?: boolean;
|
|
30
30
|
}
|
|
31
31
|
export declare const ItemSlot: React.FC<IProps>;
|
|
32
|
-
export declare const rarityColor: (item: IItem | null) => "rgba(13, 193, 13, 0.6)" | "rgba(8, 104, 187, 0.6)" | "rgba(191, 0, 255, 0.6)" | "rgba(255, 191, 0,0.6)" | null;
|
|
33
32
|
export {};
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
interface ITapAndHoldProps {
|
|
2
|
+
onHoldFn: (...args: any[]) => void;
|
|
3
|
+
holdTime?: number;
|
|
4
|
+
}
|
|
5
|
+
export declare const useTapAndHold: ({ onHoldFn: onHold, holdTime }: ITapAndHoldProps) => {
|
|
6
|
+
onTouchStart: () => void;
|
|
7
|
+
onTouchEnd: () => void;
|
|
8
|
+
onTouchCancel: () => void;
|
|
9
|
+
};
|
|
10
|
+
export {};
|
|
@@ -13391,6 +13391,21 @@ var Container$7 = /*#__PURE__*/styled.div.withConfig({
|
|
|
13391
13391
|
componentId: "sc-dgmp04-0"
|
|
13392
13392
|
})(["position:static !important;"]);
|
|
13393
13393
|
|
|
13394
|
+
var rarityColor = function rarityColor(item) {
|
|
13395
|
+
switch (item == null ? void 0 : item.rarity) {
|
|
13396
|
+
case shared.ItemRarities.Uncommon:
|
|
13397
|
+
return 'rgba(13, 193, 13, 0.6)';
|
|
13398
|
+
case shared.ItemRarities.Rare:
|
|
13399
|
+
return 'rgba(8, 104, 187, 0.6)';
|
|
13400
|
+
case shared.ItemRarities.Epic:
|
|
13401
|
+
return 'rgba(191, 0, 255, 0.6)';
|
|
13402
|
+
case shared.ItemRarities.Legendary:
|
|
13403
|
+
return 'rgba(255, 191, 0,0.6)';
|
|
13404
|
+
default:
|
|
13405
|
+
return null;
|
|
13406
|
+
}
|
|
13407
|
+
};
|
|
13408
|
+
|
|
13394
13409
|
var onRenderStackInfo = function onRenderStackInfo(itemId, stackQty) {
|
|
13395
13410
|
var isFractionalStackQty = stackQty % 1 !== 0;
|
|
13396
13411
|
var isLargerThan999 = stackQty > 999;
|
|
@@ -13435,25 +13450,25 @@ var ItemSlotRenderer = function ItemSlotRenderer(_ref) {
|
|
|
13435
13450
|
atlasIMG = _ref.atlasIMG,
|
|
13436
13451
|
slotSpriteMask = _ref.slotSpriteMask,
|
|
13437
13452
|
item = _ref.item;
|
|
13438
|
-
var renderItem = function renderItem(
|
|
13439
|
-
var
|
|
13440
|
-
if (!(
|
|
13453
|
+
var renderItem = function renderItem(item) {
|
|
13454
|
+
var _item$stackQty;
|
|
13455
|
+
if (!(item != null && item.texturePath)) {
|
|
13441
13456
|
return null;
|
|
13442
13457
|
}
|
|
13443
13458
|
return React__default.createElement(ErrorBoundary, {
|
|
13444
|
-
key:
|
|
13459
|
+
key: item._id
|
|
13445
13460
|
}, React__default.createElement(SpriteFromAtlas, {
|
|
13446
13461
|
atlasIMG: atlasIMG,
|
|
13447
13462
|
atlasJSON: atlasJSON,
|
|
13448
13463
|
spriteKey: shared.getItemTextureKeyPath({
|
|
13449
|
-
key:
|
|
13450
|
-
texturePath:
|
|
13451
|
-
stackQty:
|
|
13452
|
-
isStackable:
|
|
13464
|
+
key: item.texturePath,
|
|
13465
|
+
texturePath: item.texturePath,
|
|
13466
|
+
stackQty: item.stackQty || 1,
|
|
13467
|
+
isStackable: item.isStackable
|
|
13453
13468
|
}, atlasJSON),
|
|
13454
13469
|
imgScale: 3,
|
|
13455
13470
|
imgClassname: "sprite-from-atlas-img--item"
|
|
13456
|
-
}), onRenderStackInfo(
|
|
13471
|
+
}), onRenderStackInfo(item._id, (_item$stackQty = item.stackQty) != null ? _item$stackQty : 0));
|
|
13457
13472
|
};
|
|
13458
13473
|
var renderEquipment = function renderEquipment(itemToRender) {
|
|
13459
13474
|
var _itemToRender$allowed;
|
|
@@ -13886,6 +13901,86 @@ var ItemSlot = /*#__PURE__*/mobxReactLite.observer(function (_ref) {
|
|
|
13886
13901
|
onDragEnd == null ? void 0 : onDragEnd(quantity);
|
|
13887
13902
|
}
|
|
13888
13903
|
};
|
|
13904
|
+
var onDraggableStop = function onDraggableStop(e, data) {
|
|
13905
|
+
setDraggingItem(null);
|
|
13906
|
+
var target = e.target;
|
|
13907
|
+
if (target != null && target.id.includes('shortcutSetter') && setItemShortcut && item) {
|
|
13908
|
+
var index = parseInt(target.id.split('_')[1]);
|
|
13909
|
+
if (!isNaN(index)) {
|
|
13910
|
+
setItemShortcut(item, index);
|
|
13911
|
+
}
|
|
13912
|
+
}
|
|
13913
|
+
if (wasDragged && item && !isSelectingShortcut) {
|
|
13914
|
+
var _e$target;
|
|
13915
|
+
//@ts-ignore
|
|
13916
|
+
var classes = Array.from((_e$target = e.target) == null ? void 0 : _e$target.classList);
|
|
13917
|
+
var isOutsideDrop = classes.some(function (elm) {
|
|
13918
|
+
return elm.includes('rpgui-content');
|
|
13919
|
+
}) || classes.length === 0;
|
|
13920
|
+
if (isOutsideDrop) {
|
|
13921
|
+
setDropPosition({
|
|
13922
|
+
x: data.x,
|
|
13923
|
+
y: data.y
|
|
13924
|
+
});
|
|
13925
|
+
}
|
|
13926
|
+
setWasDragged(false);
|
|
13927
|
+
var _target = dragContainer.current;
|
|
13928
|
+
if (!_target || !wasDragged) return;
|
|
13929
|
+
var style = window.getComputedStyle(_target);
|
|
13930
|
+
var matrix = new DOMMatrixReadOnly(style.transform);
|
|
13931
|
+
var x = matrix.m41;
|
|
13932
|
+
var y = matrix.m42;
|
|
13933
|
+
setDragPosition({
|
|
13934
|
+
x: x,
|
|
13935
|
+
y: y
|
|
13936
|
+
});
|
|
13937
|
+
setTimeout(function () {
|
|
13938
|
+
if (checkIfItemCanBeMoved != null && checkIfItemCanBeMoved()) {
|
|
13939
|
+
if (checkIfItemShouldDragEnd && !checkIfItemShouldDragEnd()) return;
|
|
13940
|
+
if (item.stackQty && item.stackQty !== 1 && openQuantitySelector) openQuantitySelector(item.stackQty, onSuccessfulDrag);else onSuccessfulDrag(item.stackQty);
|
|
13941
|
+
} else {
|
|
13942
|
+
resetItem();
|
|
13943
|
+
setIsFocused(false);
|
|
13944
|
+
setDragPosition({
|
|
13945
|
+
x: 0,
|
|
13946
|
+
y: 0
|
|
13947
|
+
});
|
|
13948
|
+
}
|
|
13949
|
+
}, 50);
|
|
13950
|
+
} else if (item) {
|
|
13951
|
+
var isTouch = false;
|
|
13952
|
+
if (!isContextMenuDisabled && e.type === 'touchend' && !isSelectingShortcut) {
|
|
13953
|
+
isTouch = true;
|
|
13954
|
+
setIsTooltipMobileVisible(true);
|
|
13955
|
+
}
|
|
13956
|
+
if (!isContextMenuDisabled && !isSelectingShortcut && !isTouch) {
|
|
13957
|
+
setIsContextMenuVisible(!isContextMenuVisible);
|
|
13958
|
+
var event = e;
|
|
13959
|
+
if (event.clientX && event.clientY) {
|
|
13960
|
+
setContextMenuPosition({
|
|
13961
|
+
x: event.clientX - 10,
|
|
13962
|
+
y: event.clientY - 5
|
|
13963
|
+
});
|
|
13964
|
+
}
|
|
13965
|
+
}
|
|
13966
|
+
onPointerDown(item.type, containerType != null ? containerType : null, item);
|
|
13967
|
+
}
|
|
13968
|
+
};
|
|
13969
|
+
var onDraggableStart = function onDraggableStart() {
|
|
13970
|
+
if (!item || isSelectingShortcut) {
|
|
13971
|
+
return;
|
|
13972
|
+
}
|
|
13973
|
+
if (onDragStart && containerType) {
|
|
13974
|
+
setDraggingItem(item);
|
|
13975
|
+
onDragStart(item, slotIndex, containerType);
|
|
13976
|
+
}
|
|
13977
|
+
};
|
|
13978
|
+
var onDraggableProgress = function onDraggableProgress(_e, data) {
|
|
13979
|
+
if (Math.abs(data.x - dragPosition.x) > 5 || Math.abs(data.y - dragPosition.y) > 5) {
|
|
13980
|
+
setWasDragged(true);
|
|
13981
|
+
setIsFocused(true);
|
|
13982
|
+
}
|
|
13983
|
+
};
|
|
13889
13984
|
return React__default.createElement(Container$a, {
|
|
13890
13985
|
item: item,
|
|
13891
13986
|
className: "rpgui-icon empty-slot",
|
|
@@ -13914,86 +14009,9 @@ var ItemSlot = /*#__PURE__*/mobxReactLite.observer(function (_ref) {
|
|
|
13914
14009
|
defaultClassName: item ? 'draggable' : 'empty-slot',
|
|
13915
14010
|
scale: dragScale,
|
|
13916
14011
|
disabled: onDragStart === undefined || onDragEnd === undefined,
|
|
13917
|
-
onStop:
|
|
13918
|
-
|
|
13919
|
-
|
|
13920
|
-
if (target != null && target.id.includes('shortcutSetter') && setItemShortcut && item) {
|
|
13921
|
-
var index = parseInt(target.id.split('_')[1]);
|
|
13922
|
-
if (!isNaN(index)) {
|
|
13923
|
-
setItemShortcut(item, index);
|
|
13924
|
-
}
|
|
13925
|
-
}
|
|
13926
|
-
if (wasDragged && item && !isSelectingShortcut) {
|
|
13927
|
-
var _e$target;
|
|
13928
|
-
//@ts-ignore
|
|
13929
|
-
var classes = Array.from((_e$target = e.target) == null ? void 0 : _e$target.classList);
|
|
13930
|
-
var isOutsideDrop = classes.some(function (elm) {
|
|
13931
|
-
return elm.includes('rpgui-content');
|
|
13932
|
-
}) || classes.length === 0;
|
|
13933
|
-
if (isOutsideDrop) {
|
|
13934
|
-
setDropPosition({
|
|
13935
|
-
x: data.x,
|
|
13936
|
-
y: data.y
|
|
13937
|
-
});
|
|
13938
|
-
}
|
|
13939
|
-
setWasDragged(false);
|
|
13940
|
-
var _target = dragContainer.current;
|
|
13941
|
-
if (!_target || !wasDragged) return;
|
|
13942
|
-
var style = window.getComputedStyle(_target);
|
|
13943
|
-
var matrix = new DOMMatrixReadOnly(style.transform);
|
|
13944
|
-
var x = matrix.m41;
|
|
13945
|
-
var y = matrix.m42;
|
|
13946
|
-
setDragPosition({
|
|
13947
|
-
x: x,
|
|
13948
|
-
y: y
|
|
13949
|
-
});
|
|
13950
|
-
setTimeout(function () {
|
|
13951
|
-
if (checkIfItemCanBeMoved != null && checkIfItemCanBeMoved()) {
|
|
13952
|
-
if (checkIfItemShouldDragEnd && !checkIfItemShouldDragEnd()) return;
|
|
13953
|
-
if (item.stackQty && item.stackQty !== 1 && openQuantitySelector) openQuantitySelector(item.stackQty, onSuccessfulDrag);else onSuccessfulDrag(item.stackQty);
|
|
13954
|
-
} else {
|
|
13955
|
-
resetItem();
|
|
13956
|
-
setIsFocused(false);
|
|
13957
|
-
setDragPosition({
|
|
13958
|
-
x: 0,
|
|
13959
|
-
y: 0
|
|
13960
|
-
});
|
|
13961
|
-
}
|
|
13962
|
-
}, 50);
|
|
13963
|
-
} else if (item) {
|
|
13964
|
-
var isTouch = false;
|
|
13965
|
-
if (!isContextMenuDisabled && e.type === 'touchend' && !isSelectingShortcut) {
|
|
13966
|
-
isTouch = true;
|
|
13967
|
-
setIsTooltipMobileVisible(true);
|
|
13968
|
-
}
|
|
13969
|
-
if (!isContextMenuDisabled && !isSelectingShortcut && !isTouch) {
|
|
13970
|
-
setIsContextMenuVisible(!isContextMenuVisible);
|
|
13971
|
-
var event = e;
|
|
13972
|
-
if (event.clientX && event.clientY) {
|
|
13973
|
-
setContextMenuPosition({
|
|
13974
|
-
x: event.clientX - 10,
|
|
13975
|
-
y: event.clientY - 5
|
|
13976
|
-
});
|
|
13977
|
-
}
|
|
13978
|
-
}
|
|
13979
|
-
onPointerDown(item.type, containerType != null ? containerType : null, item);
|
|
13980
|
-
}
|
|
13981
|
-
},
|
|
13982
|
-
onStart: function onStart() {
|
|
13983
|
-
if (!item || isSelectingShortcut) {
|
|
13984
|
-
return;
|
|
13985
|
-
}
|
|
13986
|
-
if (onDragStart && containerType) {
|
|
13987
|
-
setDraggingItem(item);
|
|
13988
|
-
onDragStart(item, slotIndex, containerType);
|
|
13989
|
-
}
|
|
13990
|
-
},
|
|
13991
|
-
onDrag: function onDrag(_e, data) {
|
|
13992
|
-
if (Math.abs(data.x - dragPosition.x) > 5 || Math.abs(data.y - dragPosition.y) > 5) {
|
|
13993
|
-
setWasDragged(true);
|
|
13994
|
-
setIsFocused(true);
|
|
13995
|
-
}
|
|
13996
|
-
},
|
|
14012
|
+
onStop: onDraggableStop,
|
|
14013
|
+
onStart: onDraggableStart,
|
|
14014
|
+
onDrag: onDraggableProgress,
|
|
13997
14015
|
position: dragPosition,
|
|
13998
14016
|
cancel: ".empty-slot"
|
|
13999
14017
|
}, React__default.createElement(ItemContainer, {
|
|
@@ -14039,24 +14057,10 @@ var ItemSlot = /*#__PURE__*/mobxReactLite.observer(function (_ref) {
|
|
|
14039
14057
|
setIsTooltipVisible: setTooltipVisible
|
|
14040
14058
|
}));
|
|
14041
14059
|
});
|
|
14042
|
-
var rarityColor = function rarityColor(item) {
|
|
14043
|
-
switch (item == null ? void 0 : item.rarity) {
|
|
14044
|
-
case shared.ItemRarities.Uncommon:
|
|
14045
|
-
return 'rgba(13, 193, 13, 0.6)';
|
|
14046
|
-
case shared.ItemRarities.Rare:
|
|
14047
|
-
return 'rgba(8, 104, 187, 0.6)';
|
|
14048
|
-
case shared.ItemRarities.Epic:
|
|
14049
|
-
return 'rgba(191, 0, 255, 0.6)';
|
|
14050
|
-
case shared.ItemRarities.Legendary:
|
|
14051
|
-
return 'rgba(255, 191, 0,0.6)';
|
|
14052
|
-
default:
|
|
14053
|
-
return null;
|
|
14054
|
-
}
|
|
14055
|
-
};
|
|
14056
14060
|
var Container$a = /*#__PURE__*/styled.div.withConfig({
|
|
14057
14061
|
displayName: "ItemSlot__Container",
|
|
14058
14062
|
componentId: "sc-l2j5ef-0"
|
|
14059
|
-
})(["margin:0.1rem;.react-draggable-dragging{
|
|
14063
|
+
})(["margin:0.1rem;.react-draggable-dragging{opacity:0;}position:relative;.sprite-from-atlas-img--item{position:relative;top:1.5rem;left:1.5rem;border-color:", ";box-shadow:", " inset,", ";}&::before{content:'';position:absolute;top:0;left:0;width:100%;height:100%;z-index:1;border-radius:12px;pointer-events:none;animation:", ";@keyframes bg-color-change{0%{background-color:rgba(255 255 255 / 0.5);}50%{background-color:transparent;}100%{background-color:rgba(255 255 255 / 0.5);}}}"], function (_ref2) {
|
|
14060
14064
|
var item = _ref2.item;
|
|
14061
14065
|
return rarityColor(item);
|
|
14062
14066
|
}, function (_ref3) {
|
|
@@ -18741,6 +18745,5 @@ exports.mockedPartyManager = mockedPartyManager;
|
|
|
18741
18745
|
exports.mockedPartyRows = mockedPartyRows;
|
|
18742
18746
|
exports.mockedPlayersRows = mockedPlayersRows;
|
|
18743
18747
|
exports.mockedPlayersRows2 = mockedPlayersRows2;
|
|
18744
|
-
exports.rarityColor = rarityColor;
|
|
18745
18748
|
exports.useEventListener = useEventListener;
|
|
18746
18749
|
//# sourceMappingURL=long-bow.cjs.development.js.map
|