@rpg-engine/long-bow 0.2.3 → 0.2.6

package/dist/stories/CharacterSelection.stories.d.ts

@@ -0,0 +1,4 @@
+import { Meta } from '@storybook/react';
+declare const meta: Meta;
+export default meta;
+export declare const Default: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactFramework, any>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rpg-engine/long-bow",
-  "version": "0.2.3",
+  "version": "0.2.6",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
@@ -83,7 +83,7 @@
   },
   "dependencies": {
     "@rollup/plugin-image": "^2.1.1",
-    "@rpg-engine/shared": "^0.4.22",
+    "@rpg-engine/shared": "^0.4.31",
     "dayjs": "^1.11.2",
     "fs-extra": "^10.1.0",
     "lodash": "^4.17.21",

package/src/components/Character/CharacterSelection.tsx

@@ -0,0 +1,94 @@
+import React, { useEffect, useState } from 'react';
+import styled from 'styled-components';
+
+import { SpriteFromAtlas } from '../shared/SpriteFromAtlas';
+
+import entitiesJSON from '../../mocks/atlas/entities/entities.json';
+import entitiesIMG from '../../mocks/atlas/entities/entities.png';
+import PropertySelect, {
+  IPropertiesProps,
+} from '../PropertySelect/PropertySelect';
+
+export interface ICharacterProps {
+  id: string;
+  name: string;
+  spriteKey: string;
+}
+
+export interface ICharacterSelectionProps {
+  availableCharacters: ICharacterProps[];
+  onChange: (characterSpriteKey: string) => void;
+}
+
+export const CharacterSelection: React.FC<ICharacterSelectionProps> = ({
+  availableCharacters,
+  onChange,
+}) => {
+  const getPropertySelectValues = () => {
+    return availableCharacters.map(item => {
+      return {
+        id: item.id,
+        name: item.name,
+      };
+    });
+  };
+
+  const [propertySelectValues] = useState<IPropertiesProps[]>(
+    getPropertySelectValues()
+  );
+
+  const [selectedSpriteKey, setSelectedSpriteKey] = useState('');
+  const [selectedValue, setSelectedValue] = useState<IPropertiesProps>(
+    propertySelectValues[0]
+  );
+
+  const getSelectedCharacterSpriteKey = () => {
+    const character = availableCharacters.filter(
+      item => item.id === selectedValue.id
+    )[0];
+    return character ? character.spriteKey : '';
+  };
+
+  const onSelectedValueChange = () => {
+    const spriteKey = getSelectedCharacterSpriteKey();
+    setSelectedSpriteKey(spriteKey);
+    onChange(spriteKey);
+  };
+
+  useEffect(() => {
+    onSelectedValueChange();
+  }, [selectedValue]);
+
+  return (
+    <Container>
+      {selectedSpriteKey && (
+        <SpriteFromAtlas
+          spriteKey={selectedSpriteKey}
+          atlasIMG={entitiesIMG}
+          atlasJSON={entitiesJSON}
+          imgScale={4}
+          height={50}
+          width={50}
+          containerStyle={{
+            padding: '25px 10px 5px 28px',
+          }}
+        />
+      )}
+      <PropertySelect
+        availableProperties={propertySelectValues}
+        onChange={value => {
+          setSelectedValue(value);
+        }}
+      />
+    </Container>
+  );
+};
+
+const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  image-rendering: pixelated;
+`;
+
+export default CharacterSelection;

package/src/components/PropertySelect/PropertySelect.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import styled from 'styled-components';
 import LeftArrowClickIcon from './img/ui-arrows/arrow01-left-clicked.png';
 import LeftArrowIcon from './img/ui-arrows/arrow01-left.png';
@@ -7,8 +7,9 @@ import RightArrowIcon from './img/ui-arrows/arrow01-right.png';
 
 export interface IPropertySelectProps {
   availableProperties: Array<IPropertiesProps>;
-  selectedProperty: object;
+  selectedProperty?: IPropertiesProps;
   children?: React.ReactNode;
+  onChange: (selectedProperty: IPropertiesProps) => void;
 }
 
 export interface IPropertiesProps {
@@ -18,6 +19,7 @@ export interface IPropertiesProps {
 
 export const PropertySelect: React.FC<IPropertySelectProps> = ({
   availableProperties,
+  onChange,
 }) => {
   const [currentIndex, setCurrentIndex] = useState(0);
   const propertiesLength = availableProperties.length - 1;
@@ -30,6 +32,11 @@ export const PropertySelect: React.FC<IPropertySelectProps> = ({
     if (currentIndex === propertiesLength) setCurrentIndex(0);
     else setCurrentIndex(index => index + 1);
   };
+
+  useEffect(() => {
+    onChange(availableProperties[currentIndex]);
+  }, [currentIndex]);
+
   return (
     <Container>
       <TextOverlay>

package/src/index.tsx

@@ -1,4 +1,5 @@
 export * from './components/Button';
+export * from './components/Character/CharacterSelection';
 export * from './components/Chat/Chat';
 export * from './components/CheckButton';
 export * from './components/DraggableContainer';
@@ -12,6 +13,7 @@ export * from './components/NPCDialog/NPCDialog';
 export * from './components/NPCDialog/QuestionDialog/QuestionDialog';
 export * from './components/ProgressBar';
 export * from './components/PropertySelect/PropertySelect';
+export * from './components/QuestInfo/QuestInfo';
 export * from './components/RadioButton';
 export * from './components/RangeSlider';
 export * from './components/RPGUIContainer';