@rpg-engine/long-bow 0.6.27 → 0.6.29

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.27",
+  "version": "0.6.29",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",

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/components/Stepper.tsx

@@ -164,7 +164,7 @@ const StepperFooter = styled.div`
   margin-top: 1rem;
   flex: 1;
   display: flex;
-  justify-content: flex-end;
+  justify-content: center;
   align-items: center;
 `;
 

package/src/components/Tutorial/TutorialStepper.tsx

@@ -1,5 +1,6 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import styled, { CSSProperties } from 'styled-components';
+import { uiColors } from '../../constants/uiColors';
 import { Stepper } from '../Stepper';
 import { DynamicText } from '../typography/DynamicText';
 
@@ -16,56 +17,61 @@ export interface ITutorialStepperProps {
   imageStyle?: CSSProperties;
 }
 
-export const TutorialStepper = ({
-  lessons,
-  onLessonFinish,
-  imageStyle,
-}: ITutorialStepperProps) => {
-  const generateLessons = () => {
-    return lessons.map((lesson, index) => ({
-      component: (
-        <LessonContainer key={index} className="lesson-container">
-          <LessonTitle className="lesson-title">{lesson.title}</LessonTitle>
-          {lesson.image && (
-            <LessonImage className="lesson-image" style={imageStyle}>
-              <img src={lesson.image} alt={lesson.title} />
-            </LessonImage>
-          )}
-          <LessonFooter className="lesson-footer">
-            {lesson.body && (
-              <LessonBody className="lesson-body">{lesson.body}</LessonBody>
-            )}
-            {lesson.text && <DynamicText text={lesson.text} />}
-          </LessonFooter>
-        </LessonContainer>
-      ),
-      id: index,
-    }));
-  };
+export const TutorialStepper = React.memo(
+  ({ lessons, onLessonFinish, imageStyle }: ITutorialStepperProps) => {
+    const generateLessons = useMemo(
+      () =>
+        lessons.map((lesson, index) => ({
+          component: (
+            <LessonContainer key={index} className="lesson-container">
+              <LessonTitle className="lesson-title">{lesson.title}</LessonTitle>
+              {lesson.image && (
+                <LessonImage className="lesson-image" style={imageStyle}>
+                  <img
+                    src={lesson.image}
+                    alt={lesson.title || 'Tutorial image'}
+                    loading="lazy"
+                  />
+                </LessonImage>
+              )}
+              <LessonFooter className="lesson-footer">
+                {lesson.body && (
+                  <LessonBody className="lesson-body">{lesson.body}</LessonBody>
+                )}
+                {lesson.text && <DynamicText text={lesson.text} />}
+              </LessonFooter>
+            </LessonContainer>
+          ),
+          id: index,
+        })),
+      [lessons, imageStyle]
+    );
 
-  return (
-    <Container>
-      <Stepper
-        steps={generateLessons()}
-        finalCTAButton={{
-          label: 'Close',
-          onClick: () => {
-            onLessonFinish();
-          },
-        }}
-        useSideArrows
-      />
-    </Container>
-  );
-};
+    return (
+      <Container>
+        <Stepper
+          steps={generateLessons}
+          finalCTAButton={{
+            label: 'Close',
+            onClick: onLessonFinish,
+          }}
+          useSideArrows
+        />
+      </Container>
+    );
+  }
+);
 
 const LessonBody = styled.div``;
 
 const Container = styled.div`
-  margin: 2rem;
-
+  margin: 1rem auto;
   width: 80%;
-  margin: 0 auto;
+  max-width: 600px;
+
+  @media (max-width: 600px) {
+    width: 95%;
+  }
 `;
 
 const LessonFooter = styled.div`
@@ -78,7 +84,7 @@ const LessonImage = styled.div`
   align-items: center;
   width: 100%;
   height: auto;
-  max-width: 600px;
+  max-width: 500px;
   margin: auto;
 
   img {
@@ -89,6 +95,9 @@ const LessonImage = styled.div`
   }
 `;
 
-const LessonTitle = styled.h1``;
+const LessonTitle = styled.h1`
+  color: ${uiColors.yellow} !important;
+  font-size: 0.8rem !important;
+`;
 
 const LessonContainer = styled.div``;

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}`),
 };