@rpg-engine/long-bow 0.5.22 → 0.5.23
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/ItemQuantitySelectorModal.d.ts +12 -0
- package/dist/long-bow.cjs.development.js +109 -100
- 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 +109 -100
- package/dist/long-bow.esm.js.map +1 -1
- package/package.json +1 -1
- package/src/components/Item/Inventory/ItemContainer.tsx +5 -38
- package/src/components/Item/Inventory/ItemQuantitySelectorModal.tsx +59 -0
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
export interface IQuantitySelect {
|
|
3
|
+
isOpen: boolean;
|
|
4
|
+
maxQuantity: number;
|
|
5
|
+
callback: (_quantity: number) => void;
|
|
6
|
+
}
|
|
7
|
+
interface IProps {
|
|
8
|
+
quantitySelect: IQuantitySelect;
|
|
9
|
+
setQuantitySelect: React.Dispatch<React.SetStateAction<IQuantitySelect>>;
|
|
10
|
+
}
|
|
11
|
+
export declare const ItemQuantitySelectorModal: ({ quantitySelect, setQuantitySelect, }: IProps) => JSX.Element;
|
|
12
|
+
export {};
|
|
@@ -15644,6 +15644,89 @@ var SlotsContainer = function SlotsContainer(_ref) {
|
|
|
15644
15644
|
}, children);
|
|
15645
15645
|
};
|
|
15646
15646
|
|
|
15647
|
+
var ShortcutsSetter = function ShortcutsSetter(_ref) {
|
|
15648
|
+
var setSettingShortcutIndex = _ref.setSettingShortcutIndex,
|
|
15649
|
+
settingShortcutIndex = _ref.settingShortcutIndex,
|
|
15650
|
+
shortcuts = _ref.shortcuts,
|
|
15651
|
+
removeShortcut = _ref.removeShortcut,
|
|
15652
|
+
atlasJSON = _ref.atlasJSON,
|
|
15653
|
+
atlasIMG = _ref.atlasIMG;
|
|
15654
|
+
var getContent = function getContent(index) {
|
|
15655
|
+
var _shortcuts$index;
|
|
15656
|
+
if (((_shortcuts$index = shortcuts[index]) == null ? void 0 : _shortcuts$index.type) === shared.ShortcutType.Item) {
|
|
15657
|
+
var _shortcuts$index2;
|
|
15658
|
+
var payload = (_shortcuts$index2 = shortcuts[index]) == null ? void 0 : _shortcuts$index2.payload;
|
|
15659
|
+
if (!payload) return null;
|
|
15660
|
+
return React__default.createElement(SpriteFromAtlas, {
|
|
15661
|
+
atlasIMG: atlasIMG,
|
|
15662
|
+
atlasJSON: atlasJSON,
|
|
15663
|
+
spriteKey: shared.getItemTextureKeyPath({
|
|
15664
|
+
key: payload.texturePath,
|
|
15665
|
+
texturePath: payload.texturePath,
|
|
15666
|
+
stackQty: payload.stackQty || 1,
|
|
15667
|
+
isStackable: payload.isStackable
|
|
15668
|
+
}, atlasJSON),
|
|
15669
|
+
width: 32,
|
|
15670
|
+
height: 32,
|
|
15671
|
+
imgScale: 1.2,
|
|
15672
|
+
imgStyle: {
|
|
15673
|
+
left: '3px'
|
|
15674
|
+
}
|
|
15675
|
+
});
|
|
15676
|
+
}
|
|
15677
|
+
var IMAGE_SIZE = 32;
|
|
15678
|
+
var IMAGE_SCALE = 1;
|
|
15679
|
+
var shortcut = shortcuts[index];
|
|
15680
|
+
if ((shortcut == null ? void 0 : shortcut.type) === shared.ShortcutType.Spell && shortcut.payload) {
|
|
15681
|
+
var _payload$texturePath;
|
|
15682
|
+
var _payload = shortcut.payload; // TypeScript type assertion
|
|
15683
|
+
return React__default.createElement(SpriteFromAtlas, {
|
|
15684
|
+
atlasIMG: _payload.atlasIMG,
|
|
15685
|
+
atlasJSON: _payload.atlasJSON,
|
|
15686
|
+
spriteKey: (_payload$texturePath = _payload.texturePath) != null ? _payload$texturePath : '',
|
|
15687
|
+
width: IMAGE_SIZE,
|
|
15688
|
+
height: IMAGE_SIZE,
|
|
15689
|
+
imgScale: IMAGE_SCALE,
|
|
15690
|
+
centered: true,
|
|
15691
|
+
borderRadius: "50%"
|
|
15692
|
+
});
|
|
15693
|
+
}
|
|
15694
|
+
return null;
|
|
15695
|
+
};
|
|
15696
|
+
return React__default.createElement(Container$j, null, React__default.createElement("p", null, "Shortcuts:"), React__default.createElement(List, {
|
|
15697
|
+
id: "shortcuts_list"
|
|
15698
|
+
}, Array.from({
|
|
15699
|
+
length: 12
|
|
15700
|
+
}).map(function (_, i) {
|
|
15701
|
+
return React__default.createElement(Shortcut, {
|
|
15702
|
+
key: i,
|
|
15703
|
+
onPointerDown: function onPointerDown() {
|
|
15704
|
+
if (settingShortcutIndex !== -1) setSettingShortcutIndex(-1);
|
|
15705
|
+
removeShortcut(i);
|
|
15706
|
+
if (settingShortcutIndex === -1 && (!shortcuts[i] || shortcuts[i].type === shared.ShortcutType.None)) setSettingShortcutIndex(i);
|
|
15707
|
+
},
|
|
15708
|
+
disabled: settingShortcutIndex !== -1 && settingShortcutIndex !== i,
|
|
15709
|
+
isBeingSet: settingShortcutIndex === i,
|
|
15710
|
+
id: "shortcutSetter_" + i
|
|
15711
|
+
}, getContent(i));
|
|
15712
|
+
})));
|
|
15713
|
+
};
|
|
15714
|
+
var Container$j = /*#__PURE__*/styled.div.withConfig({
|
|
15715
|
+
displayName: "ShortcutsSetter__Container",
|
|
15716
|
+
componentId: "sc-xuouuf-0"
|
|
15717
|
+
})(["p{margin:0;margin-left:0.5rem;font-size:10px;}width:100%;"]);
|
|
15718
|
+
var Shortcut = /*#__PURE__*/styled.button.withConfig({
|
|
15719
|
+
displayName: "ShortcutsSetter__Shortcut",
|
|
15720
|
+
componentId: "sc-xuouuf-1"
|
|
15721
|
+
})(["width:2.4rem;height:2.4rem;background-color:", ";border:2px solid ", ";border-radius:50%;text-transform:uppercase;font-size:0.7rem;font-weight:bold;display:flex;align-items:center;justify-content:center;span{margin-top:4px;}&:hover,&:focus{background-color:", ";}&:active{background-color:", ";}&:disabled{opacity:0.5;}"], uiColors.lightGray, function (_ref2) {
|
|
15722
|
+
var isBeingSet = _ref2.isBeingSet;
|
|
15723
|
+
return isBeingSet ? uiColors.yellow : uiColors.darkGray;
|
|
15724
|
+
}, uiColors.darkGray, uiColors.gray);
|
|
15725
|
+
var List = /*#__PURE__*/styled.div.withConfig({
|
|
15726
|
+
displayName: "ShortcutsSetter__List",
|
|
15727
|
+
componentId: "sc-xuouuf-2"
|
|
15728
|
+
})(["width:100%;display:flex;align-items:center;gap:0.4rem;box-sizing:border-box;margin:0 !important;flex-wrap:wrap;padding:0.3rem;padding-bottom:1rem;"]);
|
|
15729
|
+
|
|
15647
15730
|
(function (RangeSliderType) {
|
|
15648
15731
|
RangeSliderType["Slider"] = "rpgui-slider";
|
|
15649
15732
|
RangeSliderType["GoldSlider"] = "rpgui-slider golden";
|
|
@@ -15798,88 +15881,33 @@ var CloseButton$3 = /*#__PURE__*/styled.div.withConfig({
|
|
|
15798
15881
|
componentId: "sc-yfdtpn-3"
|
|
15799
15882
|
})(["position:absolute;top:3px;right:0px;color:white;z-index:22;font-size:0.8rem;"]);
|
|
15800
15883
|
|
|
15801
|
-
var
|
|
15802
|
-
var
|
|
15803
|
-
|
|
15804
|
-
|
|
15805
|
-
|
|
15806
|
-
|
|
15807
|
-
|
|
15808
|
-
|
|
15809
|
-
|
|
15810
|
-
|
|
15811
|
-
|
|
15812
|
-
var payload = (_shortcuts$index2 = shortcuts[index]) == null ? void 0 : _shortcuts$index2.payload;
|
|
15813
|
-
if (!payload) return null;
|
|
15814
|
-
return React__default.createElement(SpriteFromAtlas, {
|
|
15815
|
-
atlasIMG: atlasIMG,
|
|
15816
|
-
atlasJSON: atlasJSON,
|
|
15817
|
-
spriteKey: shared.getItemTextureKeyPath({
|
|
15818
|
-
key: payload.texturePath,
|
|
15819
|
-
texturePath: payload.texturePath,
|
|
15820
|
-
stackQty: payload.stackQty || 1,
|
|
15821
|
-
isStackable: payload.isStackable
|
|
15822
|
-
}, atlasJSON),
|
|
15823
|
-
width: 32,
|
|
15824
|
-
height: 32,
|
|
15825
|
-
imgScale: 1.2,
|
|
15826
|
-
imgStyle: {
|
|
15827
|
-
left: '3px'
|
|
15828
|
-
}
|
|
15884
|
+
var ItemQuantitySelectorModal = function ItemQuantitySelectorModal(_ref) {
|
|
15885
|
+
var quantitySelect = _ref.quantitySelect,
|
|
15886
|
+
setQuantitySelect = _ref.setQuantitySelect;
|
|
15887
|
+
return React__default.createElement(ModalPortal, null, React__default.createElement(QuantitySelectorContainer, null, React__default.createElement(ItemQuantitySelector, {
|
|
15888
|
+
quantity: quantitySelect.maxQuantity,
|
|
15889
|
+
onConfirm: function onConfirm(quantity) {
|
|
15890
|
+
quantitySelect.callback(quantity);
|
|
15891
|
+
setQuantitySelect({
|
|
15892
|
+
isOpen: false,
|
|
15893
|
+
maxQuantity: 1,
|
|
15894
|
+
callback: function callback() {}
|
|
15829
15895
|
});
|
|
15830
|
-
}
|
|
15831
|
-
|
|
15832
|
-
|
|
15833
|
-
|
|
15834
|
-
|
|
15835
|
-
|
|
15836
|
-
|
|
15837
|
-
return React__default.createElement(SpriteFromAtlas, {
|
|
15838
|
-
atlasIMG: _payload.atlasIMG,
|
|
15839
|
-
atlasJSON: _payload.atlasJSON,
|
|
15840
|
-
spriteKey: (_payload$texturePath = _payload.texturePath) != null ? _payload$texturePath : '',
|
|
15841
|
-
width: IMAGE_SIZE,
|
|
15842
|
-
height: IMAGE_SIZE,
|
|
15843
|
-
imgScale: IMAGE_SCALE,
|
|
15844
|
-
centered: true,
|
|
15845
|
-
borderRadius: "50%"
|
|
15896
|
+
},
|
|
15897
|
+
onClose: function onClose() {
|
|
15898
|
+
quantitySelect.callback(-1);
|
|
15899
|
+
setQuantitySelect({
|
|
15900
|
+
isOpen: false,
|
|
15901
|
+
maxQuantity: 1,
|
|
15902
|
+
callback: function callback() {}
|
|
15846
15903
|
});
|
|
15847
15904
|
}
|
|
15848
|
-
return null;
|
|
15849
|
-
};
|
|
15850
|
-
return React__default.createElement(Container$j, null, React__default.createElement("p", null, "Shortcuts:"), React__default.createElement(List, {
|
|
15851
|
-
id: "shortcuts_list"
|
|
15852
|
-
}, Array.from({
|
|
15853
|
-
length: 12
|
|
15854
|
-
}).map(function (_, i) {
|
|
15855
|
-
return React__default.createElement(Shortcut, {
|
|
15856
|
-
key: i,
|
|
15857
|
-
onPointerDown: function onPointerDown() {
|
|
15858
|
-
if (settingShortcutIndex !== -1) setSettingShortcutIndex(-1);
|
|
15859
|
-
removeShortcut(i);
|
|
15860
|
-
if (settingShortcutIndex === -1 && (!shortcuts[i] || shortcuts[i].type === shared.ShortcutType.None)) setSettingShortcutIndex(i);
|
|
15861
|
-
},
|
|
15862
|
-
disabled: settingShortcutIndex !== -1 && settingShortcutIndex !== i,
|
|
15863
|
-
isBeingSet: settingShortcutIndex === i,
|
|
15864
|
-
id: "shortcutSetter_" + i
|
|
15865
|
-
}, getContent(i));
|
|
15866
15905
|
})));
|
|
15867
15906
|
};
|
|
15868
|
-
var
|
|
15869
|
-
displayName: "
|
|
15870
|
-
componentId: "sc-
|
|
15871
|
-
})(["
|
|
15872
|
-
var Shortcut = /*#__PURE__*/styled.button.withConfig({
|
|
15873
|
-
displayName: "ShortcutsSetter__Shortcut",
|
|
15874
|
-
componentId: "sc-xuouuf-1"
|
|
15875
|
-
})(["width:2.4rem;height:2.4rem;background-color:", ";border:2px solid ", ";border-radius:50%;text-transform:uppercase;font-size:0.7rem;font-weight:bold;display:flex;align-items:center;justify-content:center;span{margin-top:4px;}&:hover,&:focus{background-color:", ";}&:active{background-color:", ";}&:disabled{opacity:0.5;}"], uiColors.lightGray, function (_ref2) {
|
|
15876
|
-
var isBeingSet = _ref2.isBeingSet;
|
|
15877
|
-
return isBeingSet ? uiColors.yellow : uiColors.darkGray;
|
|
15878
|
-
}, uiColors.darkGray, uiColors.gray);
|
|
15879
|
-
var List = /*#__PURE__*/styled.div.withConfig({
|
|
15880
|
-
displayName: "ShortcutsSetter__List",
|
|
15881
|
-
componentId: "sc-xuouuf-2"
|
|
15882
|
-
})(["width:100%;display:flex;align-items:center;gap:0.4rem;box-sizing:border-box;margin:0 !important;flex-wrap:wrap;padding:0.3rem;padding-bottom:1rem;"]);
|
|
15907
|
+
var QuantitySelectorContainer = /*#__PURE__*/styled.div.withConfig({
|
|
15908
|
+
displayName: "ItemQuantitySelectorModal__QuantitySelectorContainer",
|
|
15909
|
+
componentId: "sc-1b8cosc-0"
|
|
15910
|
+
})(["position:absolute;top:0;left:0;width:100vw;height:100vh;z-index:100;display:flex;justify-content:center;align-items:center;background-color:rgba(0,0,0,0.5);"]);
|
|
15883
15911
|
|
|
15884
15912
|
var ItemContainer$1 = function ItemContainer(_ref) {
|
|
15885
15913
|
var itemContainer = _ref.itemContainer,
|
|
@@ -15995,34 +16023,15 @@ var ItemContainer$1 = function ItemContainer(_ref) {
|
|
|
15995
16023
|
atlasJSON: atlasJSON
|
|
15996
16024
|
}), React__default.createElement(ItemsContainer, {
|
|
15997
16025
|
className: "item-container-body"
|
|
15998
|
-
}, onRenderSlots())), quantitySelect.isOpen && React__default.createElement(
|
|
15999
|
-
|
|
16000
|
-
|
|
16001
|
-
|
|
16002
|
-
setQuantitySelect({
|
|
16003
|
-
isOpen: false,
|
|
16004
|
-
maxQuantity: 1,
|
|
16005
|
-
callback: function callback() {}
|
|
16006
|
-
});
|
|
16007
|
-
},
|
|
16008
|
-
onClose: function onClose() {
|
|
16009
|
-
quantitySelect.callback(-1);
|
|
16010
|
-
setQuantitySelect({
|
|
16011
|
-
isOpen: false,
|
|
16012
|
-
maxQuantity: 1,
|
|
16013
|
-
callback: function callback() {}
|
|
16014
|
-
});
|
|
16015
|
-
}
|
|
16016
|
-
}))));
|
|
16026
|
+
}, onRenderSlots())), quantitySelect.isOpen && React__default.createElement(ItemQuantitySelectorModal, {
|
|
16027
|
+
quantitySelect: quantitySelect,
|
|
16028
|
+
setQuantitySelect: setQuantitySelect
|
|
16029
|
+
}));
|
|
16017
16030
|
};
|
|
16018
16031
|
var ItemsContainer = /*#__PURE__*/styled.div.withConfig({
|
|
16019
16032
|
displayName: "ItemContainer__ItemsContainer",
|
|
16020
16033
|
componentId: "sc-15y5p9l-0"
|
|
16021
16034
|
})(["display:flex;justify-content:center;flex-wrap:wrap;max-height:270px;overflow-y:auto;overflow-x:hidden;width:415px;"]);
|
|
16022
|
-
var QuantitySelectorContainer = /*#__PURE__*/styled.div.withConfig({
|
|
16023
|
-
displayName: "ItemContainer__QuantitySelectorContainer",
|
|
16024
|
-
componentId: "sc-15y5p9l-1"
|
|
16025
|
-
})(["position:absolute;top:0;left:0;width:100vw;height:100vh;z-index:100;display:flex;justify-content:center;align-items:center;background-color:rgba(0,0,0,0.5);"]);
|
|
16026
16035
|
|
|
16027
16036
|
var LeaderboardTable = function LeaderboardTable(props) {
|
|
16028
16037
|
var items = props.items,
|