@rpg-engine/long-bow 0.6.65 → 0.6.68

package/dist/components/Friends/FriendList.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from 'react';
 import { ICharacter } from '@rpg-engine/shared';
 export declare type IFriend = Pick<ICharacter, 'name' | '_id' | 'isOnline'>;
 interface IFriendListProps {
@@ -16,5 +16,5 @@ interface IFriendListProps {
     onAcceptRequest: (character: IFriend) => void;
     onRejectRequest: (character: IFriend) => void;
 }
-export declare const FriendList: (props: IFriendListProps) => JSX.Element;
+export declare const FriendList: React.FC<IFriendListProps>;
 export {};

package/dist/components/Table/Table.d.ts

@@ -0,0 +1,5 @@
+export declare const Table: import("styled-components").StyledComponent<"table", any, {}, never>;
+export declare const TableRow: import("styled-components").StyledComponent<"tr", any, {}, never>;
+export declare const TableHeader: import("styled-components").StyledComponent<"th", any, {}, never>;
+export declare const TableCell: import("styled-components").StyledComponent<"td", any, {}, never>;
+export declare const ActionButtons: import("styled-components").StyledComponent<"div", any, {}, never>;

package/dist/index.d.ts

@@ -52,4 +52,5 @@ export * from './components/TradingMenu/TradingMenu';
 export * from './components/Truncate';
 export * from './components/Tutorial/TutorialStepper';
 export * from './components/typography/DynamicText';
+export * from './components/Table/Table';
 export { useEventListener } from './hooks/useEventListener';

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

@@ -28787,6 +28787,27 @@ var EquipmentColumn = /*#__PURE__*/styled__default.div.withConfig({
   componentId: "sc-1wuddg2-1"
 })(["display:flex;justify-content:center;flex-wrap:wrap;flex-direction:column;touch-action:none;"]);
 
+var Table = /*#__PURE__*/styled__default.table.withConfig({
+  displayName: "Table",
+  componentId: "sc-1c24pcj-0"
+})(["width:100%;border-collapse:collapse;margin-top:1rem;"]);
+var TableRow = /*#__PURE__*/styled__default.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__default.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__default.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__default.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,
@@ -28877,32 +28898,22 @@ var AcceptRejectButtonContainer = /*#__PURE__*/styled__default.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 = React.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__default.createElement(DraggableContainer, {
-    type: exports.RPGUIContainerTypes.Framed,
-    onCloseButton: function onCloseButton() {
-      if (onClose) onClose();
-    },
-    width: "800px",
-    cancelDrag: "#FriendListContainer, .rpgui-dropdown-imp, input, .empty-slot, button",
-    scale: scale
-  }, isAddFriendUI ? React__default.createElement(SearchFriend, {
+  return React__default.createElement(ListWrapper, null, isAddFriendUI ? React__default.createElement(SearchFriend, {
     searchedCharacters: searchedCharacters,
     onSendFriendRequest: onSendFriendRequest,
     onAcceptRequest: onAcceptRequest,
@@ -28911,58 +28922,58 @@ var FriendList = function FriendList(props) {
     onSearch: onSearch,
     onBlur: onBlur,
     onFocus: onFocus
-  }) : React__default.createElement(ListContainer$2, null, React__default.createElement(FriendsTitle, null, "Friends"), friends.map(function (friend) {
-    return React__default.createElement(ListElement$4, {
+  }) : React__default.createElement(React__default.Fragment, null, React__default.createElement(ScrollableArea, null, React__default.createElement(Table, null, React__default.createElement("thead", null, React__default.createElement(TableRow, null, React__default.createElement(TableHeader, null, "Online"), React__default.createElement(TableHeader, null, "Name"), React__default.createElement(TableHeader, null, "Actions"))), React__default.createElement("tbody", null, friends.map(function (friend) {
+    return React__default.createElement(TableRow, {
       key: friend._id
-    }, React__default.createElement("div", null, React__default.createElement(IsOnlineBadge, {
+    }, React__default.createElement(TableCell, null, React__default.createElement(IsOnlineBadge, {
       "$isOnline": friend.isOnline
-    }), friend.name), React__default.createElement(MessageAndDeleteContainer, null, React__default.createElement(Button, {
-      buttonType: exports.ButtonTypes.RPGUIButton,
-      onPointerDown: function onPointerDown() {
+    })), React__default.createElement(TableCell, null, friend.name), React__default.createElement(TableCell, null, React__default.createElement(ActionButtons, null, React__default.createElement(UserAction, {
+      color: uiColors.yellow,
+      onClick: function onClick() {
         return onOpenPrivateMessage(friend);
       }
-    }, "Message"), React__default.createElement(Button, {
-      buttonType: exports.ButtonTypes.RPGUIButton,
-      onPointerDown: function onPointerDown() {
+    }, "Chat"), React__default.createElement(UserAction, {
+      color: uiColors.red,
+      onClick: function onClick() {
         return onRemoveFriend(friend);
       }
-    }, "Remove")));
-  })), React__default.createElement(ButtonContainer$1, null, React__default.createElement(Button, {
+    }, "Remove"))));
+  }))))), React__default.createElement(ButtonContainer$1, null, React__default.createElement(Button, {
     buttonType: exports.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__default.h2.withConfig({
-  displayName: "FriendList__FriendsTitle",
+// Styled components for FriendList UI
+var ListWrapper = /*#__PURE__*/styled__default.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__default.ul.withConfig({
-  displayName: "FriendList__ListContainer",
+})(["margin-top:1rem;max-height:350px;display:flex;flex-direction:column;"]);
+var ScrollableArea = /*#__PURE__*/styled__default.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__default.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__default.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__default.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__default.div.withConfig({
-  displayName: "FriendList__MessageAndDeleteContainer",
-  componentId: "sc-3jf9vt-5"
-})(["display:flex;justify-content:space-between;gap:0.5rem;"]);
+var UserAction = /*#__PURE__*/styled__default.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__*/shared.isMobileOrTablet();
 
@@ -30475,7 +30486,7 @@ var ListMenu = function ListMenu(_ref) {
       overflow: 'hidden'
     }
   }, options.map(function (params, index) {
-    return React__default.createElement(ListElement$5, {
+    return React__default.createElement(ListElement$4, {
       key: (params == null ? void 0 : params.id) || index,
       onPointerDown: function onPointerDown() {
         onSelected(params == null ? void 0 : params.id);
@@ -30491,7 +30502,7 @@ var Container$l = /*#__PURE__*/styled__default.div.withConfig({
 }, function (props) {
   return props.x || 0;
 }, uiFonts.size.xsmall);
-var ListElement$5 = /*#__PURE__*/styled__default.li.withConfig({
+var ListElement$4 = /*#__PURE__*/styled__default.li.withConfig({
   displayName: "ListMenu__ListElement",
   componentId: "sc-i9097t-1"
 })(["margin-right:0.5rem;"]);
@@ -31407,13 +31418,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__default.createElement(React__default.Fragment, null, React__default.createElement(Wrapper$5, null, React__default.createElement("div", {
-    style: {
-      width: '100%'
-    }
-  }, React__default.createElement(Title$7, null, "Party Dashboard"), React__default.createElement("hr", {
-    className: "golden"
-  }))), React__default.createElement(RowsWrapper$2, {
+  return React__default.createElement(React__default.Fragment, null, React__default.createElement(RowsWrapper$2, {
     className: "partyRows"
   }, partyRows && sortedMembers.length ? sortedMembers.map(function (partyRow) {
     return React__default.createElement(PartyManagerRow, {
@@ -31441,17 +31446,9 @@ var YellowText = /*#__PURE__*/styled__default.span.withConfig({
   displayName: "PartyManager__YellowText",
   componentId: "sc-1yqcad8-1"
 })(["color:", " !important;"], uiColors.yellow);
-var Wrapper$5 = /*#__PURE__*/styled__default.div.withConfig({
-  displayName: "PartyManager__Wrapper",
-  componentId: "sc-1yqcad8-2"
-})(["display:flex;flex-direction:column;width:100%;"]);
-var Title$7 = /*#__PURE__*/styled__default.h1.withConfig({
-  displayName: "PartyManager__Title",
-  componentId: "sc-1yqcad8-3"
-})(["font-size:0.6rem;color:", " !important;"], uiColors.yellow);
 var NotInParty = /*#__PURE__*/styled__default.h1.withConfig({
   displayName: "PartyManager__NotInParty",
-  componentId: "sc-1yqcad8-4"
+  componentId: "sc-1yqcad8-2"
 })(["font-size:0.6rem;margin:auto;"]);
 
 var mockedPartyRows = [{
@@ -31790,7 +31787,7 @@ var QuestInfo = function QuestInfo(_ref) {
     onPointerDown: onRightClick
   }), React__default.createElement(QuestContainer, null, React__default.createElement(TitleContainer$1, {
     className: "drag-handler"
-  }, React__default.createElement(Title$8, null, React__default.createElement(Thumbnail, {
+  }, React__default.createElement(Title$7, null, React__default.createElement(Thumbnail, {
     src: quests[currentIndex].thumbnail || img$8
   }), quests[currentIndex].title), React__default.createElement(QuestSplitDiv, null, React__default.createElement("hr", {
     className: "golden"
@@ -31809,7 +31806,7 @@ var QuestInfo = function QuestInfo(_ref) {
     }, button.title);
   })))) : React__default.createElement(QuestsContainer, null, React__default.createElement(QuestContainer, null, React__default.createElement(TitleContainer$1, {
     className: "drag-handler"
-  }, React__default.createElement(Title$8, null, React__default.createElement(Thumbnail, {
+  }, React__default.createElement(Title$7, null, React__default.createElement(Thumbnail, {
     src: quests[0].thumbnail || img$8
   }), quests[0].title), React__default.createElement(QuestSplitDiv, null, React__default.createElement("hr", {
     className: "golden"
@@ -31856,7 +31853,7 @@ var TitleContainer$1 = /*#__PURE__*/styled__default.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__default.h1.withConfig({
+var Title$7 = /*#__PURE__*/styled__default.h1.withConfig({
   displayName: "QuestInfo__Title",
   componentId: "sc-15s2boc-7"
 })(["color:white;z-index:22;font-size:", " !important;color:", " !important;"], uiFonts.size.medium, uiColors.yellow);
@@ -31880,7 +31877,7 @@ var QuestList = function QuestList(_ref) {
     style: {
       width: '100%'
     }
-  }, React__default.createElement(Title$9, null, "Quests"), React__default.createElement("hr", {
+  }, React__default.createElement(Title$8, null, "Quests"), React__default.createElement("hr", {
     className: "golden"
   }), React__default.createElement(QuestListContainer, null, quests ? quests.map(function (quest, i) {
     return React__default.createElement("div", {
@@ -31901,7 +31898,7 @@ var QuestDraggableContainer$1 = /*#__PURE__*/styled__default(DraggableContainer)
   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__default.h1.withConfig({
+var Title$8 = /*#__PURE__*/styled__default.h1.withConfig({
   displayName: "QuestList__Title",
   componentId: "sc-1a2vx6q-1"
 })(["z-index:22;font-size:", " !important;color:yellow !important;"], uiFonts.size.medium);
@@ -32395,7 +32392,7 @@ var SpellInfo = function SpellInfo(_ref) {
     castingType = spell.castingType,
     cooldown = spell.cooldown,
     maxDistanceGrid = spell.maxDistanceGrid;
-  return React__default.createElement(Container$s, null, React__default.createElement(Header$1, null, React__default.createElement("div", null, React__default.createElement(Title$a, null, name), React__default.createElement(Type$1, null, magicWords))), React__default.createElement(Statistic$1, null, React__default.createElement("div", {
+  return React__default.createElement(Container$s, null, React__default.createElement(Header$1, null, React__default.createElement("div", null, React__default.createElement(Title$9, null, name), React__default.createElement(Type$1, null, magicWords))), React__default.createElement(Statistic$1, null, React__default.createElement("div", {
     className: "label"
   }, "Casting Type:"), React__default.createElement("div", {
     className: "value"
@@ -32425,7 +32422,7 @@ var Container$s = /*#__PURE__*/styled__default.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__default.div.withConfig({
+var Title$9 = /*#__PURE__*/styled__default.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);
@@ -32620,7 +32617,7 @@ var Spell = function Spell(_ref) {
     imgScale: IMAGE_SCALE,
     containerStyle: CONTAINER_STYLE,
     centered: true
-  })), React__default.createElement(Info, null, React__default.createElement(Title$b, null, React__default.createElement("span", null, name), React__default.createElement("span", {
+  })), React__default.createElement(Info, null, React__default.createElement(Title$a, null, React__default.createElement("span", null, name), React__default.createElement("span", {
     className: "spell"
   }, "(", magicWords, ")")), React__default.createElement(Description$3, null, description)), React__default.createElement(Divider, null), React__default.createElement(Cost, null, React__default.createElement("span", null, "Mana cost:"), React__default.createElement("span", {
     className: "mana"
@@ -32641,7 +32638,7 @@ var Info = /*#__PURE__*/styled__default.span.withConfig({
   displayName: "Spell__Info",
   componentId: "sc-j96fa2-2"
 })(["width:0;flex:1;@media (orientation:portrait){display:none;}"]);
-var Title$b = /*#__PURE__*/styled__default.p.withConfig({
+var Title$a = /*#__PURE__*/styled__default.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);
@@ -32705,7 +32702,7 @@ var Spellbook = function Spellbook(_ref) {
     height: "inherit",
     cancelDrag: "#spellbook-search, #shortcuts_list, .spell",
     scale: scale
-  }, React__default.createElement(Container$w, null, React__default.createElement(Title$c, null, "Learned Spells"), React__default.createElement(ShortcutsSetter, {
+  }, React__default.createElement(Container$w, null, React__default.createElement(Title$b, null, "Learned Spells"), React__default.createElement(ShortcutsSetter, {
     setSettingShortcutIndex: setSettingShortcutIndex,
     settingShortcutIndex: settingShortcutIndex,
     shortcuts: shortcuts,
@@ -32737,7 +32734,7 @@ var Spellbook = function Spellbook(_ref) {
     }, spell)));
   }))));
 };
-var Title$c = /*#__PURE__*/styled__default.h1.withConfig({
+var Title$b = /*#__PURE__*/styled__default.h1.withConfig({
   displayName: "Spellbook__Title",
   componentId: "sc-r02nfq-0"
 })(["font-size:", " !important;margin-bottom:0 !important;"], uiFonts.size.large);
@@ -33227,7 +33224,7 @@ var TradingMenu = function TradingMenu(_ref) {
     style: {
       width: '100%'
     }
-  }, React__default.createElement(Title$d, null, Capitalize(type), " Menu"), React__default.createElement("hr", {
+  }, React__default.createElement(Title$c, null, Capitalize(type), " Menu"), React__default.createElement("hr", {
     className: "golden"
   })), React__default.createElement(TradingComponentScrollWrapper, {
     id: "TraderContainer"
@@ -33258,7 +33255,7 @@ var TradingMenu = function TradingMenu(_ref) {
     }
   }, "Cancel"))));
 };
-var Title$d = /*#__PURE__*/styled__default.h1.withConfig({
+var Title$c = /*#__PURE__*/styled__default.h1.withConfig({
   displayName: "TradingMenu__Title",
   componentId: "sc-1wjsz1l-0"
 })(["z-index:22;font-size:0.6rem;color:yellow !important;"]);
@@ -33442,6 +33439,7 @@ var LessonContainer = /*#__PURE__*/styled__default.div.withConfig({
   componentId: "sc-7tgzv2-6"
 })(["display:flex;flex-direction:column;justify-content:space-between;min-height:200px;p{font-size:0.7rem !important;}"]);
 
+exports.ActionButtons = ActionButtons;
 exports.AsyncDropdown = AsyncDropdown;
 exports.Button = Button;
 exports.CharacterSelection = CharacterSelection;
@@ -33496,6 +33494,10 @@ exports.Spellbook = Spellbook;
 exports.SpriteFromAtlas = SpriteFromAtlas;
 exports.Stepper = Stepper;
 exports.TabBody = TabBody;
+exports.Table = Table;
+exports.TableCell = TableCell;
+exports.TableHeader = TableHeader;
+exports.TableRow = TableRow;
 exports.TableTab = TableTab;
 exports.TabsContainer = TabsContainer;
 exports.TextArea = TextArea;