@rpg-engine/long-bow 0.6.19 → 0.6.21

package/package.json

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

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

@@ -2,14 +2,12 @@ import { ICharacterPartyShared, isMobileOrTablet } from '@rpg-engine/shared';
 import React from 'react';
 import styled from 'styled-components';
 import { uiColors } from '../../../constants/uiColors';
-import { DraggableContainer } from '../../DraggableContainer';
-import { RPGUIContainerTypes } from '../../RPGUI/RPGUIContainer';
 import { PartyManagerRow } from './PartyManagerRows';
 
 export interface IPartyManagerProps {
   partyRows: ICharacterPartyShared | null;
   isLeader: boolean;
-  onClose?: () => void;
+  userId: string;
   onRemovePlayer: (id: string) => void;
   onChangeLeader: (id: string) => void;
 }
@@ -17,20 +15,14 @@ export interface IPartyManagerProps {
 export const PartyManager: React.FC<IPartyManagerProps> = ({
   partyRows,
   isLeader,
-  onClose,
+  userId,
   onRemovePlayer,
   onChangeLeader,
 }) => {
   const invitationActionText = isMobileOrTablet() ? 'Tap' : 'Right click';
 
   return (
-    <DraggableContainer
-      type={RPGUIContainerTypes.Framed}
-      onCloseButton={onClose}
-      width="800px"
-      height="400px"
-      cancelDrag=".partyRows"
-    >
+    <>
       <Wrapper>
         <div style={{ width: '100%' }}>
           <Title>Party Dashboard</Title>
@@ -41,6 +33,7 @@ export const PartyManager: React.FC<IPartyManagerProps> = ({
         {partyRows && partyRows.members ? (
           <>
             <PartyManagerRow
+              userId={userId}
               key={partyRows.leader._id}
               id={partyRows.leader._id}
               leaderId={partyRows.leader._id}
@@ -52,6 +45,7 @@ export const PartyManager: React.FC<IPartyManagerProps> = ({
             />
             {partyRows.members.map(partyRow => (
               <PartyManagerRow
+                userId={userId}
                 key={partyRow._id}
                 charName={partyRow.name}
                 charClass={partyRow.class}
@@ -64,20 +58,26 @@ export const PartyManager: React.FC<IPartyManagerProps> = ({
             ))}
           </>
         ) : (
-          <>
-            <NotInParty>
-              <p>You're not in a party.</p>
-              <p>
-                Tip: <YellowText>{invitationActionText}</YellowText> on a player
-                to invite them.
-              </p>
-            </NotInParty>
-          </>
+          <NotInParty>
+            <p>You're not in a party.</p>
+            <p>
+              Tip: <YellowText>{invitationActionText}</YellowText> on a player
+              to invite them.
+            </p>
+          </NotInParty>
         )}
       </RowsWrapper>
-    </DraggableContainer>
+    </>
   );
 };
+
+const RowsWrapper = styled.div`
+  width: 100%;
+  max-height: 300px;
+  overflow-y: auto;
+  overflow-x: hidden;
+`;
+
 const YellowText = styled.span`
   color: ${uiColors.yellow} !important;
 `;
@@ -88,10 +88,6 @@ const Wrapper = styled.div`
   width: 100%;
 `;
 
-const RowsWrapper = styled.div`
-  width: 100%;
-`;
-
 const Title = styled.h1`
   font-size: 0.6rem;
   color: ${uiColors.yellow} !important;

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

@@ -1,7 +1,8 @@
 import React from 'react';
 import styled from 'styled-components';
 import { uiColors } from '../../../constants/uiColors';
-import { Button, ButtonTypes } from '../../Button';
+import { HighlightedText } from '../../Text/HighlightedText';
+import { Ellipsis } from '../../shared/Ellipsis';
 
 export interface IPartyManagerRowProps {
   id: string;
@@ -9,6 +10,7 @@ export interface IPartyManagerRowProps {
   charClass: string;
   isLeader: boolean;
   leaderId: string;
+  userId: string;
   onRemovePlayer: (id: string) => void;
   onChangeLeader: (id: string) => void;
 }
@@ -19,28 +21,38 @@ export const PartyManagerRow: React.FC<IPartyManagerRowProps> = ({
   isLeader,
   id,
   leaderId,
+  userId,
   onRemovePlayer,
   onChangeLeader,
 }) => {
+  const isCurrentUser = id === userId;
+  const canRemove = isLeader || isCurrentUser; // Only leaders or the current user can remove
+
   return (
     <PartyWrapper>
-      <TextContainer>{charName}</TextContainer>
-      <TextContainer>{charClass}</TextContainer>
-      <div className="cancel-button">
-        <Button
-          buttonType={ButtonTypes.RPGUIButton}
-          onPointerDown={() => onRemovePlayer(id)}
-        >
-          Remove
-        </Button>
-      </div>
-      <Button
-        buttonType={ButtonTypes.RPGUIButton}
-        disabled={!isLeader || leaderId === id}
-        onPointerDown={() => onChangeLeader(id)}
-      >
-        New Leader
-      </Button>
+      <TextContainer>
+        <Ellipsis maxLines={1} maxWidth="200px" fontSize="0.8rem">
+          {charName}
+        </Ellipsis>
+      </TextContainer>
+      <TextContainer>
+        <Ellipsis maxLines={1} maxWidth="200px" fontSize="0.8rem">
+          {charClass}
+        </Ellipsis>
+      </TextContainer>
+      <ButtonContainer>
+        {canRemove && (
+          <HighlightedText onPointerDown={() => onRemovePlayer(id)}>
+            {isCurrentUser ? 'Leave' : 'Remove'}
+          </HighlightedText>
+        )}
+        {/* Render the "New Leader" button only if the user is the leader and not the current user */}
+        {isLeader && leaderId !== id && (
+          <HighlightedText onPointerDown={() => onChangeLeader(id)}>
+            New Leader
+          </HighlightedText>
+        )}
+      </ButtonContainer>
     </PartyWrapper>
   );
 };
@@ -49,12 +61,33 @@ const PartyWrapper = styled.div`
   width: 100%;
   display: flex;
   align-items: center;
-  justify-content: space-around;
-  .cancel-button {
-    filter: grayscale(0.7);
+  justify-content: space-between;
+  padding: 0.5rem;
+  min-height: 50px;
+  box-sizing: border-box;
+  gap: 1rem;
+  transition: background-color 0.3s ease; // Smooth transition for background color
+
+  overflow-x: auto;
+
+  &:hover {
+    background-color: ${uiColors.darkGray}; // Darker overlay color on hover
+    cursor: pointer; // Change cursor to pointer for better UX feedback
   }
 `;
 
 const TextContainer = styled.div`
+  flex: 1;
   color: ${uiColors.white};
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+`;
+
+const ButtonContainer = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  min-width: 150px;
+  gap: 0.5rem;
 `;

package/src/components/PartySystem/mockedConstantes/mockedValues.tsx

@@ -90,6 +90,13 @@ export const mockedPlayersRows2: ICharacterPartyShared = {
     { _id: uuidv4(), class: CharacterClass.Druid, name: 'blblb' },
     { _id: uuidv4(), class: CharacterClass.Druid, name: 'blblb' },
     { _id: uuidv4(), class: CharacterClass.Druid, name: 'blblb' },
+    { _id: uuidv4(), class: CharacterClass.Druid, name: 'blblb' },
+    { _id: uuidv4(), class: CharacterClass.Druid, name: 'blblb' },
+    { _id: uuidv4(), class: CharacterClass.Druid, name: 'blblb' },
+    { _id: uuidv4(), class: CharacterClass.Druid, name: 'blblb' },
+    { _id: uuidv4(), class: CharacterClass.Druid, name: 'blblb' },
+    { _id: uuidv4(), class: CharacterClass.Druid, name: 'blblb' },
+    { _id: uuidv4(), class: CharacterClass.Druid, name: 'blblb' },
   ],
   maxSize: 5,
   size: 4,

package/src/components/Text/HighlightedText.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import styled from 'styled-components';
+import { uiColors } from '../../constants/uiColors';
+
+interface IProps extends React.HTMLAttributes<HTMLParagraphElement> {
+  children: string;
+}
+
+export const HighlightedText = ({ children, ...rest }: IProps) => {
+  return <Text {...rest}>{children}</Text>;
+};
+
+const Text = styled.p`
+  color: ${uiColors.yellow} !important;
+
+  font-weight: bold;
+  font-size: 1.2rem;
+
+  // show the cursor as a pointer when hovering over the text
+
+  &:hover {
+    text-decoration: underline;
+    cursor: pointer;
+  }
+`;