@rpg-engine/long-bow 0.5.7 → 0.5.9

package/dist/components/Leaderboard/Leaderboard.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+import { IRankingTopCharacterEntry, IRankingTopSkillEntry } from '@rpg-engine/shared';
+export interface ILeaderboardProps {
+    items: Set<IRankingTopCharacterEntry> | Set<IRankingTopSkillEntry> | null;
+    onChangeClassType: (value: string) => void;
+    onChangeRankType: (value: string) => void;
+    onChangeSkillType: (value: string) => void;
+    skillOptions: string[];
+    rankOptions: string[];
+    classOptions: string[];
+    rankType: string;
+}
+export declare const Leaderboard: (props: ILeaderboardProps) => JSX.Element;

package/dist/components/Leaderboard/LeaderboardTable.d.ts

@@ -0,0 +1,7 @@
+import { IRankingTopCharacterEntry, IRankingTopSkillEntry } from '@rpg-engine/shared';
+import React from 'react';
+export interface ILeaderboardLevelProps {
+    items: Set<IRankingTopCharacterEntry> | Set<IRankingTopSkillEntry> | null;
+    rankType: string;
+}
+export declare const LeaderboardTable: React.FC<ILeaderboardLevelProps>;

package/dist/index.d.ts

@@ -15,6 +15,7 @@ export * from './components/Input';
 export { ErrorBoundary } from './components/Item/Inventory/ErrorBoundary';
 export * from './components/Item/Inventory/ItemContainer';
 export * from './components/Item/Inventory/ItemSlot';
+export * from './components/Leaderboard/Leaderboard';
 export * from './components/ListMenu';
 export * from './components/Marketplace/Marketplace';
 export * from './components/Marketplace/MarketplaceRows';

package/dist/long-bow.cjs.development.js

@@ -15694,6 +15694,124 @@ var QuantitySelectorContainer = /*#__PURE__*/styled.div.withConfig({
   componentId: "sc-15y5p9l-1"
 })(["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);"]);
 
+var LeaderboardTable = function LeaderboardTable(props) {
+  var items = props.items,
+    rankType = props.rankType;
+  if (!items) return null;
+  function isTopSkillEntry(entry) {
+    return 'skill' in entry;
+  }
+  return React__default.createElement(React__default.Fragment, null, React__default.createElement("thead", null, React__default.createElement(TableRowWrapper, null, React__default.createElement(TableRowValue, null, React__default.createElement("p", null, React__default.createElement(Ellipsis, {
+    maxLines: 1,
+    maxWidth: "200px",
+    fontSize: "14px"
+  }, "Name"))), rankType === 'Skill' ? React__default.createElement(TableRowValue, null, React__default.createElement("p", null, React__default.createElement(Ellipsis, {
+    maxLines: 1,
+    maxWidth: "200px",
+    fontSize: "14px"
+  }, "Skill"))) : null, React__default.createElement(TableRowValue, null, React__default.createElement("p", null, React__default.createElement(Ellipsis, {
+    maxLines: 1,
+    maxWidth: "200px",
+    fontSize: "14px"
+  }, "Level"))))), React__default.createElement("tbody", null, Array.from(items).map(function (entry) {
+    return React__default.createElement(TableRowWrapper, {
+      key: entry.name
+    }, React__default.createElement(TableRowValue, null, React__default.createElement("p", null, React__default.createElement(Ellipsis, {
+      maxLines: 1,
+      maxWidth: "200px",
+      fontSize: "10px"
+    }, entry.name))), isTopSkillEntry(entry) ? React__default.createElement(TableRowValue, null, React__default.createElement("p", null, React__default.createElement(Ellipsis, {
+      maxLines: 1,
+      maxWidth: "200px",
+      fontSize: "10px"
+    }, entry.skill))) : null, React__default.createElement(TableRowValue, null, React__default.createElement("p", null, React__default.createElement(Ellipsis, {
+      maxLines: 1,
+      maxWidth: "200px",
+      fontSize: "10px"
+    }, entry.level))));
+  })));
+};
+var TableRowWrapper = /*#__PURE__*/styled.tr.withConfig({
+  displayName: "LeaderboardTable__TableRowWrapper",
+  componentId: "sc-kk017f-0"
+})(["margin:auto;padding:0.5rem;&:hover{background-color:", ";}p{font-size:0.8rem;}"], uiColors.darkGray);
+var TableRowValue = /*#__PURE__*/styled.td.withConfig({
+  displayName: "LeaderboardTable__TableRowValue",
+  componentId: "sc-kk017f-1"
+})(["padding:0 20px;"]);
+
+var Leaderboard = function Leaderboard(props) {
+  var items = props.items,
+    onChangeRankType = props.onChangeRankType,
+    onChangeClassType = props.onChangeClassType,
+    rankType = props.rankType,
+    skillOptions = props.skillOptions,
+    onChangeSkillType = props.onChangeSkillType,
+    classOptions = props.classOptions,
+    rankOptions = props.rankOptions;
+  var itemsContainer = React.useRef(null);
+  React.useEffect(function () {
+    var _itemsContainer$curre;
+    (_itemsContainer$curre = itemsContainer.current) == null ? void 0 : _itemsContainer$curre.scrollTo(0, 0);
+  }, []);
+  var rankTypeOptions = rankOptions.map(function (itemType, index) {
+    return {
+      id: index + 1,
+      value: itemType,
+      option: itemType
+    };
+  });
+  var skillTypeOptions = skillOptions.map(function (itemType, index) {
+    return {
+      id: index + 1,
+      value: itemType,
+      option: itemType
+    };
+  });
+  var classTypeOptions = classOptions.map(function (itemType, index) {
+    return {
+      id: index + 1,
+      value: itemType,
+      option: itemType
+    };
+  });
+  return React__default.createElement(React__default.Fragment, null, React__default.createElement(WrapperContainer, null, React__default.createElement(StyledDropdown, {
+    options: rankTypeOptions,
+    onChange: onChangeRankType,
+    width: "80%"
+  }), rankType === 'Class' ? React__default.createElement(StyledDropdown, {
+    options: classTypeOptions,
+    onChange: onChangeClassType,
+    width: "100%"
+  }) : null, rankType === 'Skill' ? React__default.createElement(StyledDropdown, {
+    options: skillTypeOptions,
+    onChange: onChangeSkillType,
+    width: "100%"
+  }) : null), React__default.createElement(ItemComponentScrollWrapper, {
+    id: "LeaderboardContainer",
+    ref: itemsContainer
+  }, React__default.createElement(TableWrapper, null, React__default.createElement(LeaderboardTable, {
+    items: items,
+    rankType: rankType
+  }))));
+};
+var WrapperContainer = /*#__PURE__*/styled.div.withConfig({
+  displayName: "Leaderboard__WrapperContainer",
+  componentId: "sc-1wdsq7i-0"
+})(["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;}"]);
+var StyledDropdown = /*#__PURE__*/styled(Dropdown).withConfig({
+  displayName: "Leaderboard__StyledDropdown",
+  componentId: "sc-1wdsq7i-1"
+})(["margin:3px !important;width:170px !important;"]);
+var ItemComponentScrollWrapper = /*#__PURE__*/styled.div.withConfig({
+  displayName: "Leaderboard__ItemComponentScrollWrapper",
+  componentId: "sc-1wdsq7i-2"
+})(["overflow-y:scroll;height:390px;width:100%;margin-top:1rem;@media (max-width:950px){height:250px;}"]);
+var TableWrapper = /*#__PURE__*/styled.table.withConfig({
+  displayName: "Leaderboard__TableWrapper",
+  componentId: "sc-1wdsq7i-3"
+})(["margin:auto;width:100%;"]);
+
 var ListMenu = function ListMenu(_ref) {
   var options = _ref.options,
     onSelected = _ref.onSelected,
@@ -16054,19 +16172,19 @@ var BuyPanel = function BuyPanel(_ref) {
     className: "big-input",
     onBlur: enableHotkeys,
     onFocus: disableHotkeys
-  }))), React__default.createElement(WrapperContainer, null, React__default.createElement(StyledDropdown, {
+  }))), React__default.createElement(WrapperContainer$1, null, React__default.createElement(StyledDropdown$1, {
     options: itemTypeOptions,
     onChange: onChangeType,
     width: "95%"
-  }), React__default.createElement(StyledDropdown, {
+  }), React__default.createElement(StyledDropdown$1, {
     options: itemRarityOptions,
     onChange: onChangeRarity,
     width: "95%"
-  }), React__default.createElement(StyledDropdown, {
+  }), React__default.createElement(StyledDropdown$1, {
     options: orderByOptions,
     onChange: onChangeOrder,
     width: "100%"
-  }))), React__default.createElement(ItemComponentScrollWrapper, {
+  }))), React__default.createElement(ItemComponentScrollWrapper$1, {
     id: "MarketContainer",
     ref: itemsContainer
   }, items == null ? void 0 : items.map(function (_ref2, index) {
@@ -16098,15 +16216,15 @@ var FilterInputsWrapper = /*#__PURE__*/styled.div.withConfig({
   displayName: "BuyPanel__FilterInputsWrapper",
   componentId: "sc-1si8t7i-2"
 })(["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;}"]);
-var WrapperContainer = /*#__PURE__*/styled.div.withConfig({
+var WrapperContainer$1 = /*#__PURE__*/styled.div.withConfig({
   displayName: "BuyPanel__WrapperContainer",
   componentId: "sc-1si8t7i-3"
 })(["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;}"]);
-var ItemComponentScrollWrapper = /*#__PURE__*/styled.div.withConfig({
+var ItemComponentScrollWrapper$1 = /*#__PURE__*/styled.div.withConfig({
   displayName: "BuyPanel__ItemComponentScrollWrapper",
   componentId: "sc-1si8t7i-4"
 })(["overflow-y:scroll;height:390px;width:100%;margin-top:1rem;@media (max-width:950px){height:250px;}"]);
-var StyledDropdown = /*#__PURE__*/styled(Dropdown).withConfig({
+var StyledDropdown$1 = /*#__PURE__*/styled(Dropdown).withConfig({
   displayName: "BuyPanel__StyledDropdown",
   componentId: "sc-1si8t7i-5"
 })(["margin:3px !important;width:170px !important;"]);
@@ -16208,7 +16326,7 @@ var ManagmentPanel = function ManagmentPanel(_ref) {
     onPointerDown: function onPointerDown() {
       return availableGold > 0 && onMoneyWithdraw();
     }
-  }, "Withdraw")))), React__default.createElement(ItemComponentScrollWrapper$1, {
+  }, "Withdraw")))), React__default.createElement(ItemComponentScrollWrapper$2, {
     id: "MarketContainer",
     ref: itemsContainer
   }, items == null ? void 0 : items.map(function (_ref2, index) {
@@ -16242,7 +16360,7 @@ var InnerOptionsWrapper = /*#__PURE__*/styled.div.withConfig({
   displayName: "ManagmentPanel__InnerOptionsWrapper",
   componentId: "sc-1yyi6jn-3"
 })(["display:flex;justify-content:space-between;flex-direction:column;height:100%;"]);
-var ItemComponentScrollWrapper$1 = /*#__PURE__*/styled.div.withConfig({
+var ItemComponentScrollWrapper$2 = /*#__PURE__*/styled.div.withConfig({
   displayName: "ManagmentPanel__ItemComponentScrollWrapper",
   componentId: "sc-1yyi6jn-4"
 })(["overflow-y:scroll;height:390px;width:100%;margin-top:1rem;@media (max-width:950px){height:250px;}"]);
@@ -18191,6 +18309,7 @@ exports.InputRadio = InputRadio$1;
 exports.ItemContainer = ItemContainer$1;
 exports.ItemSelector = ItemSelector;
 exports.ItemSlot = ItemSlot;
+exports.Leaderboard = Leaderboard;
 exports.ListMenu = ListMenu;
 exports.Marketplace = Marketplace;
 exports.MarketplaceRows = MarketplaceRows;