@rpg-engine/long-bow 0.6.21 → 0.6.24

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rpg-engine/long-bow",
-  "version": "0.6.21",
+  "version": "0.6.24",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",

package/src/components/PartySystem/PartyManager/PartyManager.tsx

@@ -21,6 +21,17 @@ export const PartyManager: React.FC<IPartyManagerProps> = ({
 }) => {
   const invitationActionText = isMobileOrTablet() ? 'Tap' : 'Right click';
 
+  // Sort members to ensure the leader is first
+  const sortedMembers = partyRows
+    ? [partyRows.leader, ...partyRows.members].sort((a, b) =>
+        a._id === partyRows.leader._id
+          ? -1
+          : b._id === partyRows.leader._id
+          ? 1
+          : 0
+      )
+    : [];
+
   return (
     <>
       <Wrapper>
@@ -30,33 +41,20 @@ export const PartyManager: React.FC<IPartyManagerProps> = ({
         </div>
       </Wrapper>
       <RowsWrapper className="partyRows">
-        {partyRows && partyRows.members ? (
-          <>
+        {sortedMembers.length ? (
+          sortedMembers.map(partyRow => (
             <PartyManagerRow
               userId={userId}
-              key={partyRows.leader._id}
-              id={partyRows.leader._id}
-              leaderId={partyRows.leader._id}
-              charName={partyRows.leader.name}
-              charClass={partyRows.leader.class}
-              isLeader={true}
-              onRemovePlayer={() => onRemovePlayer(partyRows.leader._id)}
-              onChangeLeader={() => onChangeLeader(partyRows.leader._id)}
+              key={partyRow._id}
+              charName={partyRow.name}
+              charClass={partyRow.class}
+              id={partyRow._id}
+              isLeader={isLeader}
+              leaderId={partyRows?.leader._id!}
+              onRemovePlayer={() => onRemovePlayer(partyRow._id)}
+              onChangeLeader={() => onChangeLeader(partyRow._id)}
             />
-            {partyRows.members.map(partyRow => (
-              <PartyManagerRow
-                userId={userId}
-                key={partyRow._id}
-                charName={partyRow.name}
-                charClass={partyRow.class}
-                id={partyRow._id}
-                isLeader={isLeader}
-                leaderId={partyRows.leader._id}
-                onRemovePlayer={() => onRemovePlayer(partyRow._id)}
-                onChangeLeader={() => onChangeLeader(partyRow._id)}
-              />
-            ))}
-          </>
+          ))
         ) : (
           <NotInParty>
             <p>You're not in a party.</p>

package/src/components/PartySystem/PartyManager/PartyManagerRows.tsx

@@ -31,12 +31,12 @@ export const PartyManagerRow: React.FC<IPartyManagerRowProps> = ({
   return (
     <PartyWrapper>
       <TextContainer>
-        <Ellipsis maxLines={1} maxWidth="200px" fontSize="0.8rem">
-          {charName}
+        <Ellipsis maxLines={1} maxWidth="300px">
+          {charName} {isCurrentUser ? '(You)' : ''} {isLeader ? '(Leader)' : ''}
         </Ellipsis>
       </TextContainer>
       <TextContainer>
-        <Ellipsis maxLines={1} maxWidth="200px" fontSize="0.8rem">
+        <Ellipsis maxLines={1} maxWidth="300px">
           {charClass}
         </Ellipsis>
       </TextContainer>
@@ -66,13 +66,13 @@ const PartyWrapper = styled.div`
   min-height: 50px;
   box-sizing: border-box;
   gap: 1rem;
-  transition: background-color 0.3s ease; // Smooth transition for background color
+  transition: background-color 0.3s ease;
 
   overflow-x: auto;
 
   &:hover {
-    background-color: ${uiColors.darkGray}; // Darker overlay color on hover
-    cursor: pointer; // Change cursor to pointer for better UX feedback
+    background-color: ${uiColors.darkGray};
+    cursor: pointer;
   }
 `;
 
@@ -87,7 +87,7 @@ const TextContainer = styled.div`
 const ButtonContainer = styled.div`
   display: flex;
   align-items: center;
-  justify-content: flex-end;
+  justify-content: space-between;
   min-width: 150px;
-  gap: 0.5rem;
+  gap: 1rem; // Increased gap for better spacing between buttons
 `;