@rpg-engine/long-bow 0.8.45 → 0.8.46

package/dist/components/Character/CharacterSkinSelectionModal.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import { ICharacterProps } from './CharacterSelection';
+export interface ICharacterSkinSelectionModalProps {
+    isOpen: boolean;
+    onClose: () => void;
+    onConfirm: (textureKey: string) => void;
+    availableCharacters: ICharacterProps[];
+    atlasJSON: any;
+    atlasIMG: any;
+    initialSelectedSkin?: string;
+}
+declare const CharacterSkinSelectionModal: React.FC<ICharacterSkinSelectionModalProps>;
+export default CharacterSkinSelectionModal;

package/dist/index.d.ts

@@ -2,6 +2,7 @@ export * from './components/Arrow/SelectArrow';
 export * from './components/AsyncDropdown';
 export * from './components/Button';
 export * from './components/Character/CharacterSelection';
+export * from './components/Character/CharacterSkinSelectionModal';
 export * from './components/Chat/Chat';
 export * from './components/Chatdeprecated/ChatDeprecated';
 export * from './components/ChatRevamp/ChatRevamp';

package/dist/stories/Character/character/CharacterSkinSelectionModal.stories.d.ts

@@ -1,15 +1,5 @@
 import { Meta } from '@storybook/react';
-import { ICharacterProps } from '../../../components/Character/CharacterSelection';
-export interface ICharacterSkinSelectionModalProps {
-    isOpen: boolean;
-    onClose: () => void;
-    onConfirm: (textureKey: string) => void;
-    availableCharacters: ICharacterProps[];
-    atlasJSON: any;
-    atlasIMG: any;
-    initialSelectedSkin?: string;
-}
+import { ICharacterSkinSelectionModalProps } from '../../../components/Character/CharacterSkinSelectionModal';
 declare const meta: Meta;
 export default meta;
-export declare const Default: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactFramework, ICharacterSkinSelectionModalProps>;
-export declare const EmptySelection: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactFramework, ICharacterSkinSelectionModalProps>;
+export declare const KnightSkins: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactFramework, ICharacterSkinSelectionModalProps>;

package/package.json

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

package/src/components/Character/CharacterSkinSelectionModal.tsx

@@ -0,0 +1,157 @@
+import React, { useEffect, useState } from 'react';
+import styled from 'styled-components';
+import { Button, ButtonTypes } from '../Button';
+import { ErrorBoundary } from '../Item/Inventory/ErrorBoundary';
+import PropertySelect, { IPropertiesProps } from '../PropertySelect/PropertySelect';
+import { SpriteFromAtlas } from '../shared/SpriteFromAtlas';
+import { ICharacterProps } from './CharacterSelection';
+
+export interface ICharacterSkinSelectionModalProps {
+    isOpen: boolean;
+    onClose: () => void;
+    onConfirm: (textureKey: string) => void;
+    availableCharacters: ICharacterProps[];
+    atlasJSON: any;
+    atlasIMG: any;
+    initialSelectedSkin?: string;
+}
+
+const CharacterSkinSelectionModal: React.FC<ICharacterSkinSelectionModalProps> = ({
+    isOpen,
+    onClose,
+    onConfirm,
+    availableCharacters,
+    atlasJSON,
+    atlasIMG,
+    initialSelectedSkin = '',
+}) => {
+    // Convert availableCharacters to the format used by PropertySelect
+    const propertySelectValues = availableCharacters.map((item) => ({
+        id: item.textureKey,
+        name: item.name,
+    }));
+
+    // State to store the selected skin and the sprite key
+    const [selectedValue, setSelectedValue] = useState<IPropertiesProps | undefined>();
+    const [selectedSpriteKey, setSelectedSpriteKey] = useState('');
+
+    // Update sprite when the selected value changes
+    const updateSelectedSpriteKey = () => {
+        const textureKey = selectedValue ? selectedValue.id : '';
+        const spriteKey = textureKey ? textureKey + '/down/standing/0.png' : '';
+
+        if (spriteKey === selectedSpriteKey) {
+            return;
+        }
+
+        setSelectedSpriteKey(spriteKey);
+    };
+
+    // Update sprite when selectedValue changes
+    useEffect(() => {
+        updateSelectedSpriteKey();
+    }, [selectedValue]);
+
+    // Initialize selectedValue
+    useEffect(() => {
+        if (initialSelectedSkin) {
+            const initialProperty = propertySelectValues.find(
+                (prop) => prop.id === initialSelectedSkin
+            );
+            setSelectedValue(initialProperty || propertySelectValues[0]);
+        } else if (propertySelectValues.length > 0) {
+            setSelectedValue(propertySelectValues[0]);
+        }
+    }, [initialSelectedSkin, availableCharacters]);
+
+    // Functions to handle confirmation and cancellation
+    const handleConfirm = () => {
+        if (selectedValue) {
+            onConfirm(selectedValue.id);
+            onClose();
+        }
+    };
+
+    const handleCancel = () => {
+        onClose();
+    };
+
+    if (!isOpen) return null;
+
+    return (
+
+        <Container>
+            {selectedSpriteKey && atlasIMG && atlasJSON && (
+                <ErrorBoundary>
+                    <SpriteFromAtlas
+                        spriteKey={selectedSpriteKey}
+                        atlasIMG={atlasIMG}
+                        atlasJSON={atlasJSON}
+                        imgScale={4}
+                        height={80}
+                        width={64}
+                        containerStyle={{
+                            display: 'flex',
+                            alignItems: 'center',
+                            paddingBottom: '15px',
+                        }}
+                        imgStyle={{
+                            left: '22px',
+                        }}
+                    />
+                </ErrorBoundary>
+            )}
+
+
+            <PropertySelect
+                availableProperties={propertySelectValues}
+                onChange={(value) => {
+                    setSelectedValue(value);
+                }}
+            />
+
+
+
+            <ButtonsContainer>
+                <Button
+                    buttonType={ButtonTypes.RPGUIButton}
+                    onClick={handleCancel}
+                >
+                    Cancel
+                </Button>
+                <Button
+                    buttonType={ButtonTypes.RPGUIButton}
+                    onClick={handleConfirm}
+                    disabled={!selectedValue}
+                >
+                    Confirm
+                </Button>
+            </ButtonsContainer>
+        </Container>
+    );
+};
+
+// Styled components
+
+const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  image-rendering: pixelated;
+`;
+
+
+const ButtonsContainer = styled.div`
+    display: flex;
+    justify-content: center;
+    gap: 0.8rem;
+    width: 100%;
+    margin: 3rem 0 0.75rem;
+    
+    button {
+        min-width: 95px;
+        font-size: 0.9rem;
+    }
+`;
+
+export default CharacterSkinSelectionModal;

package/src/index.tsx

@@ -2,6 +2,7 @@ export * from './components/Arrow/SelectArrow';
 export * from './components/AsyncDropdown';
 export * from './components/Button';
 export * from './components/Character/CharacterSelection';
+export * from './components/Character/CharacterSkinSelectionModal';
 export * from './components/Chat/Chat';
 export * from './components/Chatdeprecated/ChatDeprecated';
 export * from './components/ChatRevamp/ChatRevamp';

package/src/stories/Character/character/CharacterSkinSelectionModal.stories.tsx

@@ -1,105 +1,14 @@
 import { Meta, Story } from '@storybook/react';
-import React, { useEffect, useState } from 'react';
-import styled from 'styled-components';
+import React from 'react';
 import { RPGUIRoot } from '../../..';
-import { Button, ButtonTypes } from '../../../components/Button';
-import CharacterSelection, { ICharacterProps } from '../../../components/Character/CharacterSelection';
-import { DraggableContainer } from '../../../components/DraggableContainer';
-import { RPGUIContainerTypes } from '../../../components/RPGUI/RPGUIContainer';
+import CharacterSkinSelectionModal, {
+    ICharacterSkinSelectionModalProps
+} from '../../../components/Character/CharacterSkinSelectionModal';
 import atlasJSON from '../../../mocks/atlas/entities/entities.json';
 import atlasIMG from '../../../mocks/atlas/entities/entities.png';
 
-// Create the missing interface
-export interface ICharacterSkinSelectionModalProps {
-    isOpen: boolean;
-    onClose: () => void;
-    onConfirm: (textureKey: string) => void;
-    availableCharacters: ICharacterProps[];
-    atlasJSON: any;
-    atlasIMG: any;
-    initialSelectedSkin?: string;
-}
-
-// Temporary component to replace the missing one
-const CharacterSkinSelectionModal: React.FC<ICharacterSkinSelectionModalProps> = ({
-    isOpen,
-    onClose,
-    onConfirm,
-    availableCharacters,
-    atlasJSON,
-    atlasIMG,
-    initialSelectedSkin = '',
-}) => {
-    const [selectedSkin, setSelectedSkin] = useState<string>(initialSelectedSkin);
-
-    // Determine if we have a valid skin selection to enable/disable confirm button
-    const isConfirmEnabled = Boolean(selectedSkin);
-
-    // Reset selected skin when initial value changes or component mounts
-    useEffect(() => {
-        // Allow for empty strings but not undefined
-        if (initialSelectedSkin !== undefined) {
-            setSelectedSkin(initialSelectedSkin);
-        } else if (availableCharacters.length > 0) {
-            // Default to first skin if none provided
-            setSelectedSkin(availableCharacters[0].textureKey);
-        }
-    }, [initialSelectedSkin, availableCharacters]);
-
-    const handleConfirm = (): void => {
-        if (selectedSkin) {
-            onConfirm(selectedSkin);
-            onClose();
-        }
-    };
-
-    const handleCancel = (): void => {
-        onClose();
-    };
-
-    if (!isOpen) return null;
-
-    return (
-        <ModalOverlay>
-            <DraggableContainer
-                type={RPGUIContainerTypes.Framed}
-                width="30rem"
-                onCloseButton={onClose}
-                title="Selecionar Skin"
-            >
-                <ModalContent>
-                    <CharacterSelectionWrapper>
-                        <CharacterSelection
-                            availableCharacters={availableCharacters}
-                            atlasJSON={atlasJSON}
-                            atlasIMG={atlasIMG}
-                            onChange={(textureKey) => setSelectedSkin(textureKey)}
-                        />
-                    </CharacterSelectionWrapper>
-
-                    <ButtonsContainer>
-                        <Button
-                            buttonType={ButtonTypes.RPGUIButton}
-                            onClick={handleCancel}
-                        >
-                            Cancelar
-                        </Button>
-                        <Button
-                            buttonType={ButtonTypes.RPGUIButton}
-                            onClick={handleConfirm}
-                            disabled={!isConfirmEnabled}
-                        >
-                            Confirmar
-                        </Button>
-                    </ButtonsContainer>
-                </ModalContent>
-            </DraggableContainer>
-        </ModalOverlay>
-    );
-};
-
 const meta: Meta = {
-    title: 'Character/Character/Skin Selection Modal',
+    title: 'Character/Character/Skin Selection',
     component: CharacterSkinSelectionModal,
 };
 
@@ -111,78 +20,30 @@ const Template: Story<ICharacterSkinSelectionModalProps> = (args: ICharacterSkin
     </RPGUIRoot>
 );
 
-export const Default = Template.bind({});
-export const EmptySelection = Template.bind({});
+export const KnightSkins = Template.bind({});
 
-// Dados de exemplo para os personagens disponíveis
-const availableCharacters = [
+// Example of different knight skins
+const knightCharacters = [
     {
-        name: 'Woman',
-        textureKey: 'woman-1',
+        name: 'Black Knight',
+        textureKey: 'black-knight',
     },
     {
-        name: 'Kid',
-        textureKey: 'kid-1',
+        name: 'Dragon Knight',
+        textureKey: 'dragon-knight',
     },
     {
-        name: 'Purple Hair Hero 1',
-        textureKey: 'purple-hair-hero-1',
-    },
+        name: 'Senior Knight',
+        textureKey: 'senior-knight-1',
+    }
 ];
 
-Default.args = {
+KnightSkins.args = {
     isOpen: true,
-    onClose: () => console.log('Modal fechado'),
-    onConfirm: (textureKey: string) => console.log('Skin selecionada:', textureKey),
-    availableCharacters: availableCharacters,
+    onClose: () => console.log('Modal closed'),
+    onConfirm: (textureKey: string) => console.log('Selected skin:', textureKey),
+    availableCharacters: knightCharacters,
     atlasJSON: atlasJSON,
     atlasIMG: atlasIMG,
-    initialSelectedSkin: 'woman-1',
-};
-
-EmptySelection.args = {
-    isOpen: true,
-    onClose: () => console.log('Modal fechado'),
-    onConfirm: (textureKey: string) => console.log('Skin selecionada:', textureKey),
-    availableCharacters: availableCharacters,
-    atlasJSON: atlasJSON,
-    atlasIMG: atlasIMG,
-    initialSelectedSkin: '',
-};
-
-// Componentes estilizados
-const ModalOverlay = styled.div`
-    position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    z-index: 100;
-`;
-
-const ModalContent = styled.div`
-    padding: 20px;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    min-width: 300px;
-`;
-
-const CharacterSelectionWrapper = styled.div`
-    width: 100%;
-    margin-bottom: 20px;
-`;
-
-const ButtonsContainer = styled.div`
-    display: flex;
-    justify-content: space-between;
-    width: 100%;
-    margin-top: 20px;
-    
-    button {
-        margin: 0 10px;
-    }
-`; 
+    initialSelectedSkin: 'black-knight',
+};