@rpg-engine/long-bow 0.5.6 → 0.5.8
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/Leaderboard/Leaderboard.d.ts +11 -0
- package/dist/components/Leaderboard/LeaderboardTable.d.ts +7 -0
- package/dist/index.d.ts +1 -0
- package/dist/long-bow.cjs.development.js +130 -10
- 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 +130 -11
- package/dist/long-bow.esm.js.map +1 -1
- package/dist/mocks/leaderboard.mocks.d.ts +4 -0
- package/dist/stories/Leaderboard.stories.d.ts +7 -0
- package/package.json +2 -2
- package/src/components/Leaderboard/Leaderboard.tsx +111 -0
- package/src/components/Leaderboard/LeaderboardTable.tsx +97 -0
- package/src/components/shared/SpriteFromAtlas.tsx +6 -1
- package/src/index.tsx +1 -0
- package/src/mocks/leaderboard.mocks.ts +110 -0
- package/src/stories/Leaderboard.stories.tsx +57 -0
package/dist/long-bow.esm.js
CHANGED
|
@@ -118,7 +118,10 @@ var SpriteFromAtlas = function SpriteFromAtlas(_ref) {
|
|
|
118
118
|
//! If an item is not showing, remember that you MUST run yarn atlas:copy everytime you add a new item to the atlas (it will sync our public folder atlas with src/atlas).
|
|
119
119
|
//!Due to React's limitations, we cannot import it from the public folder directly!
|
|
120
120
|
var spriteData = (atlasJSON == null ? void 0 : (_atlasJSON$frames = atlasJSON.frames) == null ? void 0 : _atlasJSON$frames[spriteKey]) || (atlasJSON == null ? void 0 : (_atlasJSON$frames2 = atlasJSON.frames) == null ? void 0 : _atlasJSON$frames2['others/no-image.png']);
|
|
121
|
-
if (!spriteData)
|
|
121
|
+
if (!spriteData) {
|
|
122
|
+
console.error("SpriteFromAtlas: Could not find sprite with key " + spriteKey + " in atlasJSON.");
|
|
123
|
+
return null;
|
|
124
|
+
}
|
|
122
125
|
return React.createElement(Container, {
|
|
123
126
|
width: width,
|
|
124
127
|
height: height,
|
|
@@ -15689,6 +15692,122 @@ var QuantitySelectorContainer = /*#__PURE__*/styled.div.withConfig({
|
|
|
15689
15692
|
componentId: "sc-15y5p9l-1"
|
|
15690
15693
|
})(["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);"]);
|
|
15691
15694
|
|
|
15695
|
+
var LeaderboardTable = function LeaderboardTable(props) {
|
|
15696
|
+
var items = props.items,
|
|
15697
|
+
rankType = props.rankType;
|
|
15698
|
+
if (!items) return null;
|
|
15699
|
+
function isTopSkillEntry(entry) {
|
|
15700
|
+
return 'skill' in entry;
|
|
15701
|
+
}
|
|
15702
|
+
return React.createElement(React.Fragment, null, React.createElement("thead", null, React.createElement(TableRowWrapper, null, React.createElement(TableRowValue, null, React.createElement("p", null, React.createElement(Ellipsis, {
|
|
15703
|
+
maxLines: 1,
|
|
15704
|
+
maxWidth: "200px",
|
|
15705
|
+
fontSize: "14px"
|
|
15706
|
+
}, "Name"))), rankType === 'Skill' ? React.createElement(TableRowValue, null, React.createElement("p", null, React.createElement(Ellipsis, {
|
|
15707
|
+
maxLines: 1,
|
|
15708
|
+
maxWidth: "200px",
|
|
15709
|
+
fontSize: "14px"
|
|
15710
|
+
}, "Skill"))) : null, React.createElement(TableRowValue, null, React.createElement("p", null, React.createElement(Ellipsis, {
|
|
15711
|
+
maxLines: 1,
|
|
15712
|
+
maxWidth: "200px",
|
|
15713
|
+
fontSize: "14px"
|
|
15714
|
+
}, "Level"))))), React.createElement("tbody", null, Array.from(items).map(function (entry) {
|
|
15715
|
+
return React.createElement(TableRowWrapper, {
|
|
15716
|
+
key: entry.name
|
|
15717
|
+
}, React.createElement(TableRowValue, null, React.createElement("p", null, React.createElement(Ellipsis, {
|
|
15718
|
+
maxLines: 1,
|
|
15719
|
+
maxWidth: "200px",
|
|
15720
|
+
fontSize: "10px"
|
|
15721
|
+
}, entry.name))), isTopSkillEntry(entry) ? React.createElement(TableRowValue, null, React.createElement("p", null, React.createElement(Ellipsis, {
|
|
15722
|
+
maxLines: 1,
|
|
15723
|
+
maxWidth: "200px",
|
|
15724
|
+
fontSize: "10px"
|
|
15725
|
+
}, entry.skill))) : null, React.createElement(TableRowValue, null, React.createElement("p", null, React.createElement(Ellipsis, {
|
|
15726
|
+
maxLines: 1,
|
|
15727
|
+
maxWidth: "200px",
|
|
15728
|
+
fontSize: "10px"
|
|
15729
|
+
}, entry.level))));
|
|
15730
|
+
})));
|
|
15731
|
+
};
|
|
15732
|
+
var TableRowWrapper = /*#__PURE__*/styled.tr.withConfig({
|
|
15733
|
+
displayName: "LeaderboardTable__TableRowWrapper",
|
|
15734
|
+
componentId: "sc-kk017f-0"
|
|
15735
|
+
})(["margin:auto;padding:0.5rem;&:hover{background-color:", ";}p{font-size:0.8rem;}"], uiColors.darkGray);
|
|
15736
|
+
var TableRowValue = /*#__PURE__*/styled.td.withConfig({
|
|
15737
|
+
displayName: "LeaderboardTable__TableRowValue",
|
|
15738
|
+
componentId: "sc-kk017f-1"
|
|
15739
|
+
})(["padding:0 20px;"]);
|
|
15740
|
+
|
|
15741
|
+
var rankTypeOptions = /*#__PURE__*/['Level', 'Class', 'Skill'].map(function (itemType, index) {
|
|
15742
|
+
return {
|
|
15743
|
+
id: index + 1,
|
|
15744
|
+
value: itemType,
|
|
15745
|
+
option: itemType
|
|
15746
|
+
};
|
|
15747
|
+
});
|
|
15748
|
+
var classTypeOptions = /*#__PURE__*/Object.keys(CharacterClass).map(function (itemType, index) {
|
|
15749
|
+
return {
|
|
15750
|
+
id: index + 1,
|
|
15751
|
+
value: itemType,
|
|
15752
|
+
option: itemType
|
|
15753
|
+
};
|
|
15754
|
+
});
|
|
15755
|
+
var Leaderboard = function Leaderboard(props) {
|
|
15756
|
+
var items = props.items,
|
|
15757
|
+
onChangeRankType = props.onChangeRankType,
|
|
15758
|
+
onChangeClassType = props.onChangeClassType,
|
|
15759
|
+
rankType = props.rankType,
|
|
15760
|
+
skills = props.skills,
|
|
15761
|
+
onChangeSkillType = props.onChangeSkillType;
|
|
15762
|
+
var itemsContainer = useRef(null);
|
|
15763
|
+
useEffect(function () {
|
|
15764
|
+
var _itemsContainer$curre;
|
|
15765
|
+
(_itemsContainer$curre = itemsContainer.current) == null ? void 0 : _itemsContainer$curre.scrollTo(0, 0);
|
|
15766
|
+
}, []);
|
|
15767
|
+
var skillTypeOptions = skills.map(function (itemType, index) {
|
|
15768
|
+
return {
|
|
15769
|
+
id: index + 1,
|
|
15770
|
+
value: itemType,
|
|
15771
|
+
option: itemType
|
|
15772
|
+
};
|
|
15773
|
+
});
|
|
15774
|
+
return React.createElement(React.Fragment, null, React.createElement(WrapperContainer, null, React.createElement(StyledDropdown, {
|
|
15775
|
+
options: rankTypeOptions,
|
|
15776
|
+
onChange: onChangeRankType,
|
|
15777
|
+
width: "80%"
|
|
15778
|
+
}), rankType === 'Class' ? React.createElement(StyledDropdown, {
|
|
15779
|
+
options: classTypeOptions,
|
|
15780
|
+
onChange: onChangeClassType,
|
|
15781
|
+
width: "100%"
|
|
15782
|
+
}) : null, rankType === 'Skill' ? React.createElement(StyledDropdown, {
|
|
15783
|
+
options: skillTypeOptions,
|
|
15784
|
+
onChange: onChangeSkillType,
|
|
15785
|
+
width: "100%"
|
|
15786
|
+
}) : null), React.createElement(ItemComponentScrollWrapper, {
|
|
15787
|
+
id: "LeaderboardContainer",
|
|
15788
|
+
ref: itemsContainer
|
|
15789
|
+
}, React.createElement(TableWrapper, null, React.createElement(LeaderboardTable, {
|
|
15790
|
+
items: items,
|
|
15791
|
+
rankType: rankType
|
|
15792
|
+
}))));
|
|
15793
|
+
};
|
|
15794
|
+
var WrapperContainer = /*#__PURE__*/styled.div.withConfig({
|
|
15795
|
+
displayName: "Leaderboard__WrapperContainer",
|
|
15796
|
+
componentId: "sc-1wdsq7i-0"
|
|
15797
|
+
})(["display:grid;grid-template-columns:50% 50%;justify-content:space-between;width:calc(100% - 40px);margin-left:10px;.rpgui-content .rpgui-dropdown-imp-header{padding:0px 10px 0 !important;}"]);
|
|
15798
|
+
var StyledDropdown = /*#__PURE__*/styled(Dropdown).withConfig({
|
|
15799
|
+
displayName: "Leaderboard__StyledDropdown",
|
|
15800
|
+
componentId: "sc-1wdsq7i-1"
|
|
15801
|
+
})(["margin:3px !important;width:170px !important;"]);
|
|
15802
|
+
var ItemComponentScrollWrapper = /*#__PURE__*/styled.div.withConfig({
|
|
15803
|
+
displayName: "Leaderboard__ItemComponentScrollWrapper",
|
|
15804
|
+
componentId: "sc-1wdsq7i-2"
|
|
15805
|
+
})(["overflow-y:scroll;height:390px;width:100%;margin-top:1rem;@media (max-width:950px){height:250px;}"]);
|
|
15806
|
+
var TableWrapper = /*#__PURE__*/styled.table.withConfig({
|
|
15807
|
+
displayName: "Leaderboard__TableWrapper",
|
|
15808
|
+
componentId: "sc-1wdsq7i-3"
|
|
15809
|
+
})(["margin:auto;width:100%;"]);
|
|
15810
|
+
|
|
15692
15811
|
var ListMenu = function ListMenu(_ref) {
|
|
15693
15812
|
var options = _ref.options,
|
|
15694
15813
|
onSelected = _ref.onSelected,
|
|
@@ -16049,19 +16168,19 @@ var BuyPanel = function BuyPanel(_ref) {
|
|
|
16049
16168
|
className: "big-input",
|
|
16050
16169
|
onBlur: enableHotkeys,
|
|
16051
16170
|
onFocus: disableHotkeys
|
|
16052
|
-
}))), React.createElement(WrapperContainer, null, React.createElement(StyledDropdown, {
|
|
16171
|
+
}))), React.createElement(WrapperContainer$1, null, React.createElement(StyledDropdown$1, {
|
|
16053
16172
|
options: itemTypeOptions,
|
|
16054
16173
|
onChange: onChangeType,
|
|
16055
16174
|
width: "95%"
|
|
16056
|
-
}), React.createElement(StyledDropdown, {
|
|
16175
|
+
}), React.createElement(StyledDropdown$1, {
|
|
16057
16176
|
options: itemRarityOptions,
|
|
16058
16177
|
onChange: onChangeRarity,
|
|
16059
16178
|
width: "95%"
|
|
16060
|
-
}), React.createElement(StyledDropdown, {
|
|
16179
|
+
}), React.createElement(StyledDropdown$1, {
|
|
16061
16180
|
options: orderByOptions,
|
|
16062
16181
|
onChange: onChangeOrder,
|
|
16063
16182
|
width: "100%"
|
|
16064
|
-
}))), React.createElement(ItemComponentScrollWrapper, {
|
|
16183
|
+
}))), React.createElement(ItemComponentScrollWrapper$1, {
|
|
16065
16184
|
id: "MarketContainer",
|
|
16066
16185
|
ref: itemsContainer
|
|
16067
16186
|
}, items == null ? void 0 : items.map(function (_ref2, index) {
|
|
@@ -16093,15 +16212,15 @@ var FilterInputsWrapper = /*#__PURE__*/styled.div.withConfig({
|
|
|
16093
16212
|
displayName: "BuyPanel__FilterInputsWrapper",
|
|
16094
16213
|
componentId: "sc-1si8t7i-2"
|
|
16095
16214
|
})(["width:95%;display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;margin-left:10px;gap:5px;color:white;flex-wrap:wrap;p{width:auto;margin:0;}input{width:75px;height:10px;}.big-input{width:130px;}"]);
|
|
16096
|
-
var WrapperContainer = /*#__PURE__*/styled.div.withConfig({
|
|
16215
|
+
var WrapperContainer$1 = /*#__PURE__*/styled.div.withConfig({
|
|
16097
16216
|
displayName: "BuyPanel__WrapperContainer",
|
|
16098
16217
|
componentId: "sc-1si8t7i-3"
|
|
16099
16218
|
})(["display:grid;grid-template-columns:40% 30% 30%;justify-content:space-between;width:calc(100% - 40px);margin-left:10px;.rpgui-content .rpgui-dropdown-imp-header{padding:0px 10px 0 !important;}"]);
|
|
16100
|
-
var ItemComponentScrollWrapper = /*#__PURE__*/styled.div.withConfig({
|
|
16219
|
+
var ItemComponentScrollWrapper$1 = /*#__PURE__*/styled.div.withConfig({
|
|
16101
16220
|
displayName: "BuyPanel__ItemComponentScrollWrapper",
|
|
16102
16221
|
componentId: "sc-1si8t7i-4"
|
|
16103
16222
|
})(["overflow-y:scroll;height:390px;width:100%;margin-top:1rem;@media (max-width:950px){height:250px;}"]);
|
|
16104
|
-
var StyledDropdown = /*#__PURE__*/styled(Dropdown).withConfig({
|
|
16223
|
+
var StyledDropdown$1 = /*#__PURE__*/styled(Dropdown).withConfig({
|
|
16105
16224
|
displayName: "BuyPanel__StyledDropdown",
|
|
16106
16225
|
componentId: "sc-1si8t7i-5"
|
|
16107
16226
|
})(["margin:3px !important;width:170px !important;"]);
|
|
@@ -16203,7 +16322,7 @@ var ManagmentPanel = function ManagmentPanel(_ref) {
|
|
|
16203
16322
|
onPointerDown: function onPointerDown() {
|
|
16204
16323
|
return availableGold > 0 && onMoneyWithdraw();
|
|
16205
16324
|
}
|
|
16206
|
-
}, "Withdraw")))), React.createElement(ItemComponentScrollWrapper$
|
|
16325
|
+
}, "Withdraw")))), React.createElement(ItemComponentScrollWrapper$2, {
|
|
16207
16326
|
id: "MarketContainer",
|
|
16208
16327
|
ref: itemsContainer
|
|
16209
16328
|
}, items == null ? void 0 : items.map(function (_ref2, index) {
|
|
@@ -16237,7 +16356,7 @@ var InnerOptionsWrapper = /*#__PURE__*/styled.div.withConfig({
|
|
|
16237
16356
|
displayName: "ManagmentPanel__InnerOptionsWrapper",
|
|
16238
16357
|
componentId: "sc-1yyi6jn-3"
|
|
16239
16358
|
})(["display:flex;justify-content:space-between;flex-direction:column;height:100%;"]);
|
|
16240
|
-
var ItemComponentScrollWrapper$
|
|
16359
|
+
var ItemComponentScrollWrapper$2 = /*#__PURE__*/styled.div.withConfig({
|
|
16241
16360
|
displayName: "ManagmentPanel__ItemComponentScrollWrapper",
|
|
16242
16361
|
componentId: "sc-1yyi6jn-4"
|
|
16243
16362
|
})(["overflow-y:scroll;height:390px;width:100%;margin-top:1rem;@media (max-width:950px){height:250px;}"]);
|
|
@@ -18165,5 +18284,5 @@ var ButtonWrapper$3 = /*#__PURE__*/styled.div.withConfig({
|
|
|
18165
18284
|
componentId: "sc-gptoxp-5"
|
|
18166
18285
|
})(["display:flex;justify-content:space-around;padding-top:20px;width:100%;"]);
|
|
18167
18286
|
|
|
18168
|
-
export { Button, ButtonTypes, CharacterSelection, Chat, ChatDeprecated, CheckButton, CircularController, CraftBook, DraggableContainer, Dropdown, DropdownSelectorContainer, DynamicText, EquipmentSet, EquipmentSlotSpriteByType, ErrorBoundary, HistoryDialog, ImageCarousel, ImgSide, Input, InputRadio$1 as InputRadio, ItemContainer$1 as ItemContainer, ItemSelector, ItemSlot, ListMenu, Marketplace, MarketplaceRows, NPCDialog, NPCDialogType, NPCMultiDialog, PartyCreate, PartyDashboard, PartyInvite, PartyManager, PartyManagerRow, PartyRow, PlayersRow, ProgressBar, PropertySelect, QuestInfo, QuestList, QuestionDialog, RPGUIContainer, RPGUIContainerTypes, RPGUIRoot, RangeSlider, RangeSliderType, Shortcuts, SkillProgressBar, SkillsContainer, Spellbook, SpriteFromAtlas, TextArea, TimeWidget, TradingMenu, Truncate, _RPGUI, mockedPartyManager, mockedPartyRows, mockedPlayersRows, mockedPlayersRows2, rarityColor, useEventListener };
|
|
18287
|
+
export { Button, ButtonTypes, CharacterSelection, Chat, ChatDeprecated, CheckButton, CircularController, CraftBook, DraggableContainer, Dropdown, DropdownSelectorContainer, DynamicText, EquipmentSet, EquipmentSlotSpriteByType, ErrorBoundary, HistoryDialog, ImageCarousel, ImgSide, Input, InputRadio$1 as InputRadio, ItemContainer$1 as ItemContainer, ItemSelector, ItemSlot, Leaderboard, ListMenu, Marketplace, MarketplaceRows, NPCDialog, NPCDialogType, NPCMultiDialog, PartyCreate, PartyDashboard, PartyInvite, PartyManager, PartyManagerRow, PartyRow, PlayersRow, ProgressBar, PropertySelect, QuestInfo, QuestList, QuestionDialog, RPGUIContainer, RPGUIContainerTypes, RPGUIRoot, RangeSlider, RangeSliderType, Shortcuts, SkillProgressBar, SkillsContainer, Spellbook, SpriteFromAtlas, TextArea, TimeWidget, TradingMenu, Truncate, _RPGUI, mockedPartyManager, mockedPartyRows, mockedPlayersRows, mockedPlayersRows2, rarityColor, useEventListener };
|
|
18169
18288
|
//# sourceMappingURL=long-bow.esm.js.map
|