@rpg-engine/long-bow 0.6.65 → 0.6.68

package/dist/long-bow.esm.js

@@ -28781,6 +28781,27 @@ var EquipmentColumn = /*#__PURE__*/styled.div.withConfig({
   componentId: "sc-1wuddg2-1"
 })(["display:flex;justify-content:center;flex-wrap:wrap;flex-direction:column;touch-action:none;"]);
 
+var Table = /*#__PURE__*/styled.table.withConfig({
+  displayName: "Table",
+  componentId: "sc-1c24pcj-0"
+})(["width:100%;border-collapse:collapse;margin-top:1rem;"]);
+var TableRow = /*#__PURE__*/styled.tr.withConfig({
+  displayName: "Table__TableRow",
+  componentId: "sc-1c24pcj-1"
+})(["&:nth-child(even){background-color:rgba(255,255,255,0.05) !important;}"]);
+var TableHeader = /*#__PURE__*/styled.th.withConfig({
+  displayName: "Table__TableHeader",
+  componentId: "sc-1c24pcj-2"
+})(["text-align:left;padding:0.5rem;color:", " !important;border-bottom:1px solid ", ";"], uiColors.yellow, uiColors.lightGray);
+var TableCell = /*#__PURE__*/styled.td.withConfig({
+  displayName: "Table__TableCell",
+  componentId: "sc-1c24pcj-3"
+})(["padding:0.5rem;color:", ";border-bottom:1px solid ", ";"], uiColors.white, uiColors.lightGray);
+var ActionButtons = /*#__PURE__*/styled.div.withConfig({
+  displayName: "Table__ActionButtons",
+  componentId: "sc-1c24pcj-4"
+})(["display:flex;gap:10px;align-items:center;"]);
+
 var SearchFriend = function SearchFriend(props) {
   var searchedCharacters = props.searchedCharacters,
     friendRequests = props.friendRequests,
@@ -28871,32 +28892,22 @@ var AcceptRejectButtonContainer = /*#__PURE__*/styled.div.withConfig({
   componentId: "sc-1lt1ols-5"
 })(["display:flex;justify-content:space-between;gap:0.5rem;"]);
 
-var FriendList = function FriendList(props) {
+var FriendList = function FriendList(_ref) {
+  var friends = _ref.friends,
+    friendRequests = _ref.friendRequests,
+    searchedCharacters = _ref.searchedCharacters,
+    onFocus = _ref.onFocus,
+    onBlur = _ref.onBlur,
+    onSearch = _ref.onSearch,
+    onAcceptRequest = _ref.onAcceptRequest,
+    onSendFriendRequest = _ref.onSendFriendRequest,
+    onRemoveFriend = _ref.onRemoveFriend,
+    onOpenPrivateMessage = _ref.onOpenPrivateMessage,
+    onRejectRequest = _ref.onRejectRequest;
   var _useState = useState(false),
     isAddFriendUI = _useState[0],
     setIsAddFriendUI = _useState[1];
-  var scale = props.scale,
-    friends = props.friends,
-    friendRequests = props.friendRequests,
-    searchedCharacters = props.searchedCharacters,
-    onBlur = props.onBlur,
-    onFocus = props.onFocus,
-    onClose = props.onClose,
-    onSearch = props.onSearch,
-    onAcceptRequest = props.onAcceptRequest,
-    onSendFriendRequest = props.onSendFriendRequest,
-    onRemoveFriend = props.onRemoveFriend,
-    onOpenPrivateMessage = props.onOpenPrivateMessage,
-    onRejectRequest = props.onRejectRequest;
-  return React.createElement(DraggableContainer, {
-    type: RPGUIContainerTypes.Framed,
-    onCloseButton: function onCloseButton() {
-      if (onClose) onClose();
-    },
-    width: "800px",
-    cancelDrag: "#FriendListContainer, .rpgui-dropdown-imp, input, .empty-slot, button",
-    scale: scale
-  }, isAddFriendUI ? React.createElement(SearchFriend, {
+  return React.createElement(ListWrapper, null, isAddFriendUI ? React.createElement(SearchFriend, {
     searchedCharacters: searchedCharacters,
     onSendFriendRequest: onSendFriendRequest,
     onAcceptRequest: onAcceptRequest,
@@ -28905,58 +28916,58 @@ var FriendList = function FriendList(props) {
     onSearch: onSearch,
     onBlur: onBlur,
     onFocus: onFocus
-  }) : React.createElement(ListContainer$2, null, React.createElement(FriendsTitle, null, "Friends"), friends.map(function (friend) {
-    return React.createElement(ListElement$4, {
+  }) : React.createElement(React.Fragment, null, React.createElement(ScrollableArea, null, React.createElement(Table, null, React.createElement("thead", null, React.createElement(TableRow, null, React.createElement(TableHeader, null, "Online"), React.createElement(TableHeader, null, "Name"), React.createElement(TableHeader, null, "Actions"))), React.createElement("tbody", null, friends.map(function (friend) {
+    return React.createElement(TableRow, {
       key: friend._id
-    }, React.createElement("div", null, React.createElement(IsOnlineBadge, {
+    }, React.createElement(TableCell, null, React.createElement(IsOnlineBadge, {
       "$isOnline": friend.isOnline
-    }), friend.name), React.createElement(MessageAndDeleteContainer, null, React.createElement(Button, {
-      buttonType: ButtonTypes.RPGUIButton,
-      onPointerDown: function onPointerDown() {
+    })), React.createElement(TableCell, null, friend.name), React.createElement(TableCell, null, React.createElement(ActionButtons, null, React.createElement(UserAction, {
+      color: uiColors.yellow,
+      onClick: function onClick() {
         return onOpenPrivateMessage(friend);
       }
-    }, "Message"), React.createElement(Button, {
-      buttonType: ButtonTypes.RPGUIButton,
-      onPointerDown: function onPointerDown() {
+    }, "Chat"), React.createElement(UserAction, {
+      color: uiColors.red,
+      onClick: function onClick() {
         return onRemoveFriend(friend);
       }
-    }, "Remove")));
-  })), React.createElement(ButtonContainer$1, null, React.createElement(Button, {
+    }, "Remove"))));
+  }))))), React.createElement(ButtonContainer$1, null, React.createElement(Button, {
     buttonType: ButtonTypes.RPGUIButton,
     onClick: function onClick() {
-      return setIsAddFriendUI(function (t) {
-        return !t;
+      return setIsAddFriendUI(function (prev) {
+        return !prev;
       });
     }
   }, isAddFriendUI ? 'Back' : 'Add New Friend')));
 };
-var FriendsTitle = /*#__PURE__*/styled.h2.withConfig({
-  displayName: "FriendList__FriendsTitle",
+// Styled components for FriendList UI
+var ListWrapper = /*#__PURE__*/styled.div.withConfig({
+  displayName: "FriendList__ListWrapper",
   componentId: "sc-3jf9vt-0"
-})(["font-size:", ";margin:0;padding:0;text-align:center;"], uiFonts.size.medium);
-var ListContainer$2 = /*#__PURE__*/styled.ul.withConfig({
-  displayName: "FriendList__ListContainer",
+})(["margin-top:1rem;max-height:350px;display:flex;flex-direction:column;"]);
+var ScrollableArea = /*#__PURE__*/styled.div.withConfig({
+  displayName: "FriendList__ScrollableArea",
   componentId: "sc-3jf9vt-1"
-})(["border:none;overflow-y:scroll;list-style:none;padding:0;width:100%;height:50vh;@media (max-width:768px){max-height:90wh;}"]);
-var ListElement$4 = /*#__PURE__*/styled.li.withConfig({
-  displayName: "FriendList__ListElement",
-  componentId: "sc-3jf9vt-2"
-})(["margin:0.5rem 0 !important;font-size:", ";padding:0.5rem 4px;display:flex;align-items:center;justify-content:space-between;border-radius:4px;& div{display:flex;align-items:center;}"], uiFonts.size.small);
+})(["overflow-y:auto;max-height:300px;"]);
 var IsOnlineBadge = /*#__PURE__*/styled.div.withConfig({
   displayName: "FriendList__IsOnlineBadge",
-  componentId: "sc-3jf9vt-3"
-})(["width:10px;height:10px;border-radius:50%;background-color:", ";margin-right:1rem;"], function (_ref) {
-  var $isOnline = _ref.$isOnline;
+  componentId: "sc-3jf9vt-2"
+})(["width:10px;height:10px;border-radius:50%;background-color:", ";margin-right:1rem;"], function (_ref2) {
+  var $isOnline = _ref2.$isOnline;
   return $isOnline ? uiColors.lightGreen : uiColors.red;
 });
 var ButtonContainer$1 = /*#__PURE__*/styled.div.withConfig({
   displayName: "FriendList__ButtonContainer",
-  componentId: "sc-3jf9vt-4"
+  componentId: "sc-3jf9vt-3"
 })(["display:flex;justify-content:center;align-items:center;width:100%;margin-top:1rem;"]);
-var MessageAndDeleteContainer = /*#__PURE__*/styled.div.withConfig({
-  displayName: "FriendList__MessageAndDeleteContainer",
-  componentId: "sc-3jf9vt-5"
-})(["display:flex;justify-content:space-between;gap:0.5rem;"]);
+var UserAction = /*#__PURE__*/styled.span.withConfig({
+  displayName: "FriendList__UserAction",
+  componentId: "sc-3jf9vt-4"
+})(["color:", " !important;cursor:pointer;margin-right:0.5rem;&:hover{text-decoration:underline;}"], function (_ref3) {
+  var color = _ref3.color;
+  return color;
+});
 
 var IS_MOBILE_OR_TABLET = /*#__PURE__*/isMobileOrTablet();
 
@@ -30472,7 +30483,7 @@ var ListMenu = function ListMenu(_ref) {
       overflow: 'hidden'
     }
   }, options.map(function (params, index) {
-    return React.createElement(ListElement$5, {
+    return React.createElement(ListElement$4, {
       key: (params == null ? void 0 : params.id) || index,
       onPointerDown: function onPointerDown() {
         onSelected(params == null ? void 0 : params.id);
@@ -30488,7 +30499,7 @@ var Container$l = /*#__PURE__*/styled.div.withConfig({
 }, function (props) {
   return props.x || 0;
 }, uiFonts.size.xsmall);
-var ListElement$5 = /*#__PURE__*/styled.li.withConfig({
+var ListElement$4 = /*#__PURE__*/styled.li.withConfig({
   displayName: "ListMenu__ListElement",
   componentId: "sc-i9097t-1"
 })(["margin-right:0.5rem;"]);
@@ -31405,13 +31416,7 @@ var PartyManager = function PartyManager(_ref) {
   var sortedMembers = partyRows != null && partyRows.leader && partyRows != null && partyRows.members ? [partyRows.leader].concat(partyRows.members).sort(function (a, b) {
     return a._id === partyRows.leader._id ? -1 : b._id === partyRows.leader._id ? 1 : 0;
   }) : [];
-  return React.createElement(React.Fragment, null, React.createElement(Wrapper$5, null, React.createElement("div", {
-    style: {
-      width: '100%'
-    }
-  }, React.createElement(Title$7, null, "Party Dashboard"), React.createElement("hr", {
-    className: "golden"
-  }))), React.createElement(RowsWrapper$2, {
+  return React.createElement(React.Fragment, null, React.createElement(RowsWrapper$2, {
     className: "partyRows"
   }, partyRows && sortedMembers.length ? sortedMembers.map(function (partyRow) {
     return React.createElement(PartyManagerRow, {
@@ -31439,17 +31444,9 @@ var YellowText = /*#__PURE__*/styled.span.withConfig({
   displayName: "PartyManager__YellowText",
   componentId: "sc-1yqcad8-1"
 })(["color:", " !important;"], uiColors.yellow);
-var Wrapper$5 = /*#__PURE__*/styled.div.withConfig({
-  displayName: "PartyManager__Wrapper",
-  componentId: "sc-1yqcad8-2"
-})(["display:flex;flex-direction:column;width:100%;"]);
-var Title$7 = /*#__PURE__*/styled.h1.withConfig({
-  displayName: "PartyManager__Title",
-  componentId: "sc-1yqcad8-3"
-})(["font-size:0.6rem;color:", " !important;"], uiColors.yellow);
 var NotInParty = /*#__PURE__*/styled.h1.withConfig({
   displayName: "PartyManager__NotInParty",
-  componentId: "sc-1yqcad8-4"
+  componentId: "sc-1yqcad8-2"
 })(["font-size:0.6rem;margin:auto;"]);
 
 var mockedPartyRows = [{
@@ -31788,7 +31785,7 @@ var QuestInfo = function QuestInfo(_ref) {
     onPointerDown: onRightClick
   }), React.createElement(QuestContainer, null, React.createElement(TitleContainer$1, {
     className: "drag-handler"
-  }, React.createElement(Title$8, null, React.createElement(Thumbnail, {
+  }, React.createElement(Title$7, null, React.createElement(Thumbnail, {
     src: quests[currentIndex].thumbnail || img$8
   }), quests[currentIndex].title), React.createElement(QuestSplitDiv, null, React.createElement("hr", {
     className: "golden"
@@ -31807,7 +31804,7 @@ var QuestInfo = function QuestInfo(_ref) {
     }, button.title);
   })))) : React.createElement(QuestsContainer, null, React.createElement(QuestContainer, null, React.createElement(TitleContainer$1, {
     className: "drag-handler"
-  }, React.createElement(Title$8, null, React.createElement(Thumbnail, {
+  }, React.createElement(Title$7, null, React.createElement(Thumbnail, {
     src: quests[0].thumbnail || img$8
   }), quests[0].title), React.createElement(QuestSplitDiv, null, React.createElement("hr", {
     className: "golden"
@@ -31854,7 +31851,7 @@ var TitleContainer$1 = /*#__PURE__*/styled.div.withConfig({
   displayName: "QuestInfo__TitleContainer",
   componentId: "sc-15s2boc-6"
 })(["width:100%;display:flex;flex-wrap:wrap;justify-content:flex-start;align-items:center;margin-top:1rem;"]);
-var Title$8 = /*#__PURE__*/styled.h1.withConfig({
+var Title$7 = /*#__PURE__*/styled.h1.withConfig({
   displayName: "QuestInfo__Title",
   componentId: "sc-15s2boc-7"
 })(["color:white;z-index:22;font-size:", " !important;color:", " !important;"], uiFonts.size.medium, uiColors.yellow);
@@ -31878,7 +31875,7 @@ var QuestList = function QuestList(_ref) {
     style: {
       width: '100%'
     }
-  }, React.createElement(Title$9, null, "Quests"), React.createElement("hr", {
+  }, React.createElement(Title$8, null, "Quests"), React.createElement("hr", {
     className: "golden"
   }), React.createElement(QuestListContainer, null, quests ? quests.map(function (quest, i) {
     return React.createElement("div", {
@@ -31899,7 +31896,7 @@ var QuestDraggableContainer$1 = /*#__PURE__*/styled(DraggableContainer).withConf
   displayName: "QuestList__QuestDraggableContainer",
   componentId: "sc-1a2vx6q-0"
 })([".container-close{top:10px;right:10px;}.quest-title{text-align:left;margin-left:44px;margin-top:20px;color:yellow;}.quest-desc{margin-top:12px;margin-left:44px;}.rpgui-progress{min-width:80%;margin:0 auto;}"]);
-var Title$9 = /*#__PURE__*/styled.h1.withConfig({
+var Title$8 = /*#__PURE__*/styled.h1.withConfig({
   displayName: "QuestList__Title",
   componentId: "sc-1a2vx6q-1"
 })(["z-index:22;font-size:", " !important;color:yellow !important;"], uiFonts.size.medium);
@@ -32393,7 +32390,7 @@ var SpellInfo = function SpellInfo(_ref) {
     castingType = spell.castingType,
     cooldown = spell.cooldown,
     maxDistanceGrid = spell.maxDistanceGrid;
-  return React.createElement(Container$s, null, React.createElement(Header$1, null, React.createElement("div", null, React.createElement(Title$a, null, name), React.createElement(Type$1, null, magicWords))), React.createElement(Statistic$1, null, React.createElement("div", {
+  return React.createElement(Container$s, null, React.createElement(Header$1, null, React.createElement("div", null, React.createElement(Title$9, null, name), React.createElement(Type$1, null, magicWords))), React.createElement(Statistic$1, null, React.createElement("div", {
     className: "label"
   }, "Casting Type:"), React.createElement("div", {
     className: "value"
@@ -32423,7 +32420,7 @@ var Container$s = /*#__PURE__*/styled.div.withConfig({
   displayName: "SpellInfo__Container",
   componentId: "sc-4hbw3q-0"
 })(["color:white;background-color:#222;border-radius:5px;padding:0.5rem;font-size:", ";border:3px solid ", ";height:max-content;width:30rem;@media (max-width:580px){width:80vw;}"], uiFonts.size.small, uiColors.lightGray);
-var Title$a = /*#__PURE__*/styled.div.withConfig({
+var Title$9 = /*#__PURE__*/styled.div.withConfig({
   displayName: "SpellInfo__Title",
   componentId: "sc-4hbw3q-1"
 })(["font-size:", ";font-weight:bold;margin-bottom:0.5rem;display:flex;align-items:center;margin:0;"], uiFonts.size.medium);
@@ -32618,7 +32615,7 @@ var Spell = function Spell(_ref) {
     imgScale: IMAGE_SCALE,
     containerStyle: CONTAINER_STYLE,
     centered: true
-  })), React.createElement(Info, null, React.createElement(Title$b, null, React.createElement("span", null, name), React.createElement("span", {
+  })), React.createElement(Info, null, React.createElement(Title$a, null, React.createElement("span", null, name), React.createElement("span", {
     className: "spell"
   }, "(", magicWords, ")")), React.createElement(Description$3, null, description)), React.createElement(Divider, null), React.createElement(Cost, null, React.createElement("span", null, "Mana cost:"), React.createElement("span", {
     className: "mana"
@@ -32639,7 +32636,7 @@ var Info = /*#__PURE__*/styled.span.withConfig({
   displayName: "Spell__Info",
   componentId: "sc-j96fa2-2"
 })(["width:0;flex:1;@media (orientation:portrait){display:none;}"]);
-var Title$b = /*#__PURE__*/styled.p.withConfig({
+var Title$a = /*#__PURE__*/styled.p.withConfig({
   displayName: "Spell__Title",
   componentId: "sc-j96fa2-3"
 })(["display:flex;flex-wrap:wrap;align-items:center;margin-bottom:5px;margin:0;span{font-size:", " !important;font-weight:bold !important;color:", " !important;margin-right:0.5rem;}.spell{font-size:", " !important;font-weight:normal !important;color:", " !important;}"], uiFonts.size.medium, uiColors.yellow, uiFonts.size.small, uiColors.lightGray);
@@ -32703,7 +32700,7 @@ var Spellbook = function Spellbook(_ref) {
     height: "inherit",
     cancelDrag: "#spellbook-search, #shortcuts_list, .spell",
     scale: scale
-  }, React.createElement(Container$w, null, React.createElement(Title$c, null, "Learned Spells"), React.createElement(ShortcutsSetter, {
+  }, React.createElement(Container$w, null, React.createElement(Title$b, null, "Learned Spells"), React.createElement(ShortcutsSetter, {
     setSettingShortcutIndex: setSettingShortcutIndex,
     settingShortcutIndex: settingShortcutIndex,
     shortcuts: shortcuts,
@@ -32735,7 +32732,7 @@ var Spellbook = function Spellbook(_ref) {
     }, spell)));
   }))));
 };
-var Title$c = /*#__PURE__*/styled.h1.withConfig({
+var Title$b = /*#__PURE__*/styled.h1.withConfig({
   displayName: "Spellbook__Title",
   componentId: "sc-r02nfq-0"
 })(["font-size:", " !important;margin-bottom:0 !important;"], uiFonts.size.large);
@@ -33225,7 +33222,7 @@ var TradingMenu = function TradingMenu(_ref) {
     style: {
       width: '100%'
     }
-  }, React.createElement(Title$d, null, Capitalize(type), " Menu"), React.createElement("hr", {
+  }, React.createElement(Title$c, null, Capitalize(type), " Menu"), React.createElement("hr", {
     className: "golden"
   })), React.createElement(TradingComponentScrollWrapper, {
     id: "TraderContainer"
@@ -33256,7 +33253,7 @@ var TradingMenu = function TradingMenu(_ref) {
     }
   }, "Cancel"))));
 };
-var Title$d = /*#__PURE__*/styled.h1.withConfig({
+var Title$c = /*#__PURE__*/styled.h1.withConfig({
   displayName: "TradingMenu__Title",
   componentId: "sc-1wjsz1l-0"
 })(["z-index:22;font-size:0.6rem;color:yellow !important;"]);
@@ -33440,5 +33437,5 @@ var LessonContainer = /*#__PURE__*/styled.div.withConfig({
   componentId: "sc-7tgzv2-6"
 })(["display:flex;flex-direction:column;justify-content:space-between;min-height:200px;p{font-size:0.7rem !important;}"]);
 
-export { AsyncDropdown, Button, ButtonTypes, CharacterSelection, Chat, ChatDeprecated, ChatRevamp, CheckButton, CheckItem, CircularController, CraftBook, DraggableContainer, Dropdown, DropdownSelectorContainer, DynamicText, EquipmentSet, EquipmentSlotSpriteByType, ErrorBoundary, FriendList, HistoryDialog, ImageCarousel, ImgSide, Input, InputRadio$1 as InputRadio, ItemContainer$1 as ItemContainer, ItemSelector, ItemSlot, Leaderboard, ListMenu, Marketplace, MarketplaceRows, MultitabType, NPCDialog, NPCDialogType, NPCMultiDialog, PartyCreate, PartyDashboard, PartyInvite, PartyManager, PartyManagerRow, PartyRow, PlayersRow, ProgressBar, PropertySelect, QuestInfo, QuestList, QuestionDialog, RPGUIContainer, RPGUIContainerTypes, RPGUIRoot, RangeSlider, RangeSliderType, Shortcuts, SimpleImageCarousel, SkillProgressBar, SkillsContainer, Spellbook, SpriteFromAtlas, Stepper, TabBody, TableTab, TabsContainer, TextArea, TimeWidget, TradingMenu, Truncate, TutorialStepper, _RPGUI, getMockedPlayersRowsLeader, getMockedPlayersRowsNotLeader, mockedPartyManager, mockedPartyRows, mockedPlayersRows, mockedPlayersRows2, useEventListener };
+export { ActionButtons, AsyncDropdown, Button, ButtonTypes, CharacterSelection, Chat, ChatDeprecated, ChatRevamp, CheckButton, CheckItem, CircularController, CraftBook, DraggableContainer, Dropdown, DropdownSelectorContainer, DynamicText, EquipmentSet, EquipmentSlotSpriteByType, ErrorBoundary, FriendList, HistoryDialog, ImageCarousel, ImgSide, Input, InputRadio$1 as InputRadio, ItemContainer$1 as ItemContainer, ItemSelector, ItemSlot, Leaderboard, ListMenu, Marketplace, MarketplaceRows, MultitabType, NPCDialog, NPCDialogType, NPCMultiDialog, PartyCreate, PartyDashboard, PartyInvite, PartyManager, PartyManagerRow, PartyRow, PlayersRow, ProgressBar, PropertySelect, QuestInfo, QuestList, QuestionDialog, RPGUIContainer, RPGUIContainerTypes, RPGUIRoot, RangeSlider, RangeSliderType, Shortcuts, SimpleImageCarousel, SkillProgressBar, SkillsContainer, Spellbook, SpriteFromAtlas, Stepper, TabBody, Table, TableCell, TableHeader, TableRow, TableTab, TabsContainer, TextArea, TimeWidget, TradingMenu, Truncate, TutorialStepper, _RPGUI, getMockedPlayersRowsLeader, getMockedPlayersRowsNotLeader, mockedPartyManager, mockedPartyRows, mockedPlayersRows, mockedPlayersRows2, useEventListener };
 //# sourceMappingURL=long-bow.esm.js.map