@rpg-engine/long-bow 0.8.44 → 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

@@ -0,0 +1,5 @@
+import { Meta } from '@storybook/react';
+import { ICharacterSkinSelectionModalProps } from '../../../components/Character/CharacterSkinSelectionModal';
+declare const meta: Meta;
+export default meta;
+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.44",
+  "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

@@ -0,0 +1,49 @@
+import { Meta, Story } from '@storybook/react';
+import React from 'react';
+import { RPGUIRoot } from '../../..';
+import CharacterSkinSelectionModal, {
+    ICharacterSkinSelectionModalProps
+} from '../../../components/Character/CharacterSkinSelectionModal';
+import atlasJSON from '../../../mocks/atlas/entities/entities.json';
+import atlasIMG from '../../../mocks/atlas/entities/entities.png';
+
+const meta: Meta = {
+    title: 'Character/Character/Skin Selection',
+    component: CharacterSkinSelectionModal,
+};
+
+export default meta;
+
+const Template: Story<ICharacterSkinSelectionModalProps> = (args: ICharacterSkinSelectionModalProps) => (
+    <RPGUIRoot>
+        <CharacterSkinSelectionModal {...args} />
+    </RPGUIRoot>
+);
+
+export const KnightSkins = Template.bind({});
+
+// Example of different knight skins
+const knightCharacters = [
+    {
+        name: 'Black Knight',
+        textureKey: 'black-knight',
+    },
+    {
+        name: 'Dragon Knight',
+        textureKey: 'dragon-knight',
+    },
+    {
+        name: 'Senior Knight',
+        textureKey: 'senior-knight-1',
+    }
+];
+
+KnightSkins.args = {
+    isOpen: true,
+    onClose: () => console.log('Modal closed'),
+    onConfirm: (textureKey: string) => console.log('Selected skin:', textureKey),
+    availableCharacters: knightCharacters,
+    atlasJSON: atlasJSON,
+    atlasIMG: atlasIMG,
+    initialSelectedSkin: 'black-knight',
+};