@rpg-engine/long-bow 0.6.26 → 0.6.28

package/dist/stories/PartyManager.stories.d.ts

@@ -2,4 +2,5 @@ import { Meta } from '@storybook/react';
 import { IPartyManagerProps } from '../components/PartySystem/PartyManager/PartyManager';
 declare const meta: Meta;
 export default meta;
-export declare const Default: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactFramework, IPartyManagerProps>;
+export declare const YouAreLeader: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactFramework, IPartyManagerProps>;
+export declare const YouAreNotLeader: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactFramework, IPartyManagerProps>;

package/package.json

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

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

@@ -6,7 +6,7 @@ import { PartyManagerRow } from './PartyManagerRows';
 
 export interface IPartyManagerProps {
   partyRows: ICharacterPartyShared | null;
-  isLeader: boolean;
+
   userId: string;
   onRemovePlayer: (id: string) => void;
   onChangeLeader: (id: string) => void;
@@ -14,7 +14,6 @@ export interface IPartyManagerProps {
 
 export const PartyManager: React.FC<IPartyManagerProps> = ({
   partyRows,
-  isLeader,
   userId,
   onRemovePlayer,
   onChangeLeader,
@@ -49,7 +48,7 @@ export const PartyManager: React.FC<IPartyManagerProps> = ({
               charName={partyRow.name}
               charClass={partyRow.class}
               id={partyRow._id}
-              isLeader={isLeader}
+              isLeader={partyRow._id === partyRows.leader._id}
               leaderId={partyRows.leader._id}
               onRemovePlayer={() => onRemovePlayer(partyRow._id)}
               onChangeLeader={() => onChangeLeader(partyRow._id)}

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

@@ -26,7 +26,7 @@ export const PartyManagerRow: React.FC<IPartyManagerRowProps> = ({
   onChangeLeader,
 }) => {
   const isCurrentUser = id === userId;
-  const canRemove = isLeader || isCurrentUser; // Only leaders or the current user can remove
+  const canRemove = leaderId === userId || isCurrentUser;
 
   return (
     <PartyWrapper>
@@ -46,8 +46,7 @@ export const PartyManagerRow: React.FC<IPartyManagerRowProps> = ({
             {isCurrentUser ? 'Leave' : 'Remove'}
           </HighlightedText>
         )}
-        {/* Render the "New Leader" button only if the user is the leader and not the current user */}
-        {isLeader && leaderId !== id && (
+        {leaderId === userId && leaderId !== id && (
           <HighlightedText onPointerDown={() => onChangeLeader(id)}>
             New Leader
           </HighlightedText>
@@ -58,17 +57,14 @@ export const PartyManagerRow: React.FC<IPartyManagerRowProps> = ({
 };
 
 const PartyWrapper = styled.div`
-  width: 100%;
-  display: flex;
+  display: grid;
+  grid-template-columns: 2fr 1fr 1fr;
   align-items: center;
-  justify-content: space-between;
   padding: 0.5rem;
   min-height: 50px;
   box-sizing: border-box;
-  gap: 1rem;
-  transition: background-color 0.3s ease;
-
-  overflow-x: auto;
+  width: 100%;
+  border-bottom: 1px solid ${uiColors.darkGray};
 
   &:hover {
     background-color: ${uiColors.darkGray};
@@ -77,7 +73,6 @@ const PartyWrapper = styled.div`
 `;
 
 const TextContainer = styled.div`
-  flex: 1;
   color: ${uiColors.white};
   overflow: hidden;
   white-space: nowrap;
@@ -87,7 +82,6 @@ const TextContainer = styled.div`
 const ButtonContainer = styled.div`
   display: flex;
   align-items: center;
-  justify-content: space-between;
-  min-width: 150px;
-  gap: 1rem; // Increased gap for better spacing between buttons
+  gap: 1rem;
+  justify-content: flex-start;
 `;

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

@@ -172,3 +172,41 @@ export const mockedPartyManager: any[] = [
     isLeader: false,
   },
 ];
+
+// Function to generate mock data for when you are the leader
+export const getMockedPlayersRowsLeader = (
+  userId: string
+): ICharacterPartyShared => ({
+  id: uuidv4(),
+  leader: {
+    _id: userId, // You are the leader
+    class: CharacterClass.Warrior,
+    name: 'YourName',
+  },
+  members: [
+    { _id: uuidv4(), class: CharacterClass.Druid, name: 'Member1' },
+    { _id: uuidv4(), class: CharacterClass.Sorcerer, name: 'Member2' },
+    { _id: uuidv4(), class: CharacterClass.Rogue, name: 'Member3' },
+  ],
+  maxSize: 5,
+  size: 4,
+});
+
+// Function to generate mock data for when you are not the leader
+export const getMockedPlayersRowsNotLeader = (
+  userId: string
+): ICharacterPartyShared => ({
+  id: uuidv4(),
+  leader: {
+    _id: uuidv4(), // Someone else is the leader
+    class: CharacterClass.Druid,
+    name: 'LeaderName',
+  },
+  members: [
+    { _id: userId, class: CharacterClass.Warrior, name: 'YourName' }, // You are a member
+    { _id: uuidv4(), class: CharacterClass.Sorcerer, name: 'Member2' },
+    { _id: uuidv4(), class: CharacterClass.Rogue, name: 'Member3' },
+  ],
+  maxSize: 5,
+  size: 4,
+});

package/src/stories/PartyManager.stories.tsx

@@ -1,6 +1,12 @@
+import { v4 as uuidv4 } from 'uuid';
+
+// Storybook setup
 import { Meta, Story } from '@storybook/react';
 import React from 'react';
-import { mockedPlayersRows2 } from '../components/PartySystem';
+import {
+  getMockedPlayersRowsLeader,
+  getMockedPlayersRowsNotLeader,
+} from '../components/PartySystem';
 import {
   IPartyManagerProps,
   PartyManager,
@@ -19,9 +25,23 @@ const Template: Story<IPartyManagerProps> = args => (
     <PartyManager {...args} />
   </RPGUIRoot>
 );
+// Assume this is your user ID
+const yourUserId = uuidv4();
 
-export const Default = Template.bind({});
+// Story where you are the leader
+export const YouAreLeader = Template.bind({});
+YouAreLeader.args = {
+  partyRows: getMockedPlayersRowsLeader(yourUserId),
+  userId: yourUserId,
+  onRemovePlayer: (id: string) => console.log(`Remove player with ID: ${id}`),
+  onChangeLeader: (id: string) => console.log(`Change leader to ID: ${id}`),
+};
 
-Default.args = {
-  partyRows: mockedPlayersRows2,
+// Story where you are not the leader
+export const YouAreNotLeader = Template.bind({});
+YouAreNotLeader.args = {
+  partyRows: getMockedPlayersRowsNotLeader(yourUserId),
+  userId: yourUserId,
+  onRemovePlayer: (id: string) => console.log(`Remove player with ID: ${id}`),
+  onChangeLeader: (id: string) => console.log(`Change leader to ID: ${id}`),
 };