@rpg-engine/long-bow 0.2.6 → 0.2.8

package/dist/stories/QuestList.stories.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { IQuestListProps } from '../components/QuestList';
+declare const _default: {
+    title: string;
+    component: React.FC<IQuestListProps>;
+};
+export default _default;
+export declare const Default: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactFramework, IQuestListProps>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rpg-engine/long-bow",
-  "version": "0.2.6",
+  "version": "0.2.8",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
@@ -56,11 +56,11 @@
   "devDependencies": {
     "@babel/core": "^7.17.7",
     "@size-limit/preset-small-lib": "^7.0.8",
-    "@storybook/addon-essentials": "^6.5.9",
+    "@storybook/addon-essentials": "^6.5.10",
     "@storybook/addon-info": "^5.3.21",
-    "@storybook/addon-links": "^6.5.9",
-    "@storybook/addons": "^6.5.9",
-    "@storybook/react": "^6.5.9",
+    "@storybook/addon-links": "^6.5.10",
+    "@storybook/addons": "^6.5.10",
+    "@storybook/react": "^6.5.10",
     "@types/react": "^18.0.14",
     "@types/react-dom": "^18.0.5",
     "@types/styled-components": "^5.1.24",
@@ -83,7 +83,7 @@
   },
   "dependencies": {
     "@rollup/plugin-image": "^2.1.1",
-    "@rpg-engine/shared": "^0.4.31",
+    "@rpg-engine/shared": "^0.4.40",
     "dayjs": "^1.11.2",
     "fs-extra": "^10.1.0",
     "lodash": "^4.17.21",

package/src/components/Character/CharacterSelection.tsx

@@ -10,55 +10,49 @@ import PropertySelect, {
 } from '../PropertySelect/PropertySelect';
 
 export interface ICharacterProps {
-  id: string;
   name: string;
-  spriteKey: string;
+  textureKey: string;
 }
 
 export interface ICharacterSelectionProps {
   availableCharacters: ICharacterProps[];
-  onChange: (characterSpriteKey: string) => void;
+  onChange: (textureKey: 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 propertySelectValues = availableCharacters.map(item => {
+    return {
+      id: item.textureKey,
+      name: item.name,
+    };
+  });
 
+  const [selectedValue, setSelectedValue] = useState<IPropertiesProps>();
   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();
+    const textureKey = selectedValue ? selectedValue.id : '';
+    const spriteKey = textureKey ? textureKey + '/down/standing/0.png' : '';
+
+    if (spriteKey == selectedSpriteKey) {
+      return;
+    }
+
     setSelectedSpriteKey(spriteKey);
-    onChange(spriteKey);
+    onChange(textureKey);
   };
 
   useEffect(() => {
     onSelectedValueChange();
   }, [selectedValue]);
 
+  useEffect(() => {
+    setSelectedValue(propertySelectValues[0]);
+  }, [availableCharacters]);
+
   return (
     <Container>
       {selectedSpriteKey && (
@@ -70,7 +64,7 @@ export const CharacterSelection: React.FC<ICharacterSelectionProps> = ({
           height={50}
           width={50}
           containerStyle={{
-            padding: '25px 10px 5px 28px',
+            padding: '25px 10px 5px 27px',
           }}
         />
       )}

package/src/components/Item/Inventory/ItemSlot.tsx

@@ -83,9 +83,23 @@ export const ItemSlot: React.FC<IProps> = observer(
       return '2.5rem';
     };
 
+    const getStackInfo = (itemId: string, stackQty: number) => {
+      // if (itemToRender?.isStackable && itemToRender?.stackQty) {
+      if (stackQty > 1) {
+        return (
+          <ItemQty left={getLeftPositionValue(stackQty)} key={`qty-${itemId}`}>
+            {' '}
+            {stackQty}{' '}
+          </ItemQty>
+        );
+      }
+      return undefined;
+    };
+
     const renderItem = (itemToRender: IItem | null) => {
       const element = [];
       if (itemToRender?.texturePath) {
+        console.table(itemToRender);
         element.push(
           <SpriteFromAtlas
             key={itemToRender._id}
@@ -96,17 +110,14 @@ export const ItemSlot: React.FC<IProps> = observer(
           />
         );
       }
-      if (itemToRender?.isStackable && itemToRender?.stackQty) {
-        element.push(
-          <ItemQty
-            left={getLeftPositionValue(itemToRender.stackQty)}
-            key={`qty-${itemToRender._id}`}
-          >
-            {' '}
-            {itemToRender.stackQty}{' '}
-          </ItemQty>
-        );
+      const stackInfo = getStackInfo(
+        itemToRender?._id ?? '',
+        itemToRender?.stackQty ?? 0
+      );
+      if (stackInfo) {
+        element.push(stackInfo);
       }
+
       return element;
     };
 
@@ -115,7 +126,8 @@ export const ItemSlot: React.FC<IProps> = observer(
         itemToRender?.texturePath &&
         itemToRender.allowedEquipSlotType?.includes(slotSpriteMask!)
       ) {
-        return (
+        const element = [];
+        element.push(
           <SpriteFromAtlas
             key={itemToRender._id}
             atlasIMG={atlasIMG}
@@ -124,6 +136,14 @@ export const ItemSlot: React.FC<IProps> = observer(
             imgScale={3}
           />
         );
+        const stackInfo = getStackInfo(
+          itemToRender?._id ?? '',
+          itemToRender?.stackQty ?? 0
+        );
+        if (stackInfo) {
+          element.push(stackInfo);
+        }
+        return element;
       } else {
         return (
           <SpriteFromAtlas

package/src/components/PropertySelect/PropertySelect.tsx

@@ -37,10 +37,18 @@ export const PropertySelect: React.FC<IPropertySelectProps> = ({
     onChange(availableProperties[currentIndex]);
   }, [currentIndex]);
 
+  const getCurrentSelectionName = () => {
+    const item = availableProperties[currentIndex];
+    if (item) {
+      return item.name;
+    }
+    return '';
+  };
+
   return (
     <Container>
       <TextOverlay>
-        <Item>{availableProperties[currentIndex].name}</Item>
+        <Item>{getCurrentSelectionName()}</Item>
       </TextOverlay>
       <div className="rpgui-progress-track"></div>
       <LeftArrow onClick={onLeftClick}></LeftArrow>

package/src/components/QuestInfo/QuestInfo.tsx

@@ -1,33 +1,45 @@
-import React from 'react';
+import { IQuest } from '@rpg-engine/shared';
+import React, { useState } from 'react';
 import styled from 'styled-components';
 import { Button, ButtonTypes } from '../Button';
 import { DraggableContainer } from '../DraggableContainer';
+import LeftArrowClickIcon from '../PropertySelect/img/ui-arrows/arrow01-left-clicked.png';
+import LeftArrowIcon from '../PropertySelect/img/ui-arrows/arrow01-left.png';
+import RightArrowClickIcon from '../PropertySelect/img/ui-arrows/arrow01-right-clicked.png';
+import RightArrowIcon from '../PropertySelect/img/ui-arrows/arrow01-right.png';
 import { RPGUIContainerTypes } from '../RPGUIContainer';
 import { Column } from '../shared/Column';
-
 import thumbnailDefault from './img/default.png';
 
 export interface IQuestInfoProps {
-  title: string;
-  children: React.ReactNode;
   onClose?: () => void;
-  button?: Array<IQuestButtonProps>;
-  thumbnail?: string;
+  button?: Array<IQuestsButtonProps>;
+  quests: IQuest[];
 }
 
-export interface IQuestButtonProps {
+export interface IQuestsButtonProps {
   disabled: boolean;
   title: string;
-  onClick: () => void;
+  onClick: (QuestId: string, NPCId: string) => void;
 }
 
 export const QuestInfo: React.FC<IQuestInfoProps> = ({
-  title,
+  quests,
   onClose,
   button,
-  thumbnail,
-  children,
 }) => {
+  const [currentIndex, setCurrentIndex] = useState(0);
+  const questsLength = quests.length - 1;
+
+  const onLeftClick = () => {
+    if (currentIndex === 0) setCurrentIndex(questsLength);
+    else setCurrentIndex(index => index - 1);
+  };
+  const onRightClick = () => {
+    if (currentIndex === questsLength) setCurrentIndex(0);
+    else setCurrentIndex(index => index + 1);
+  };
+
   return (
     <QuestDraggableContainer
       type={RPGUIContainerTypes.Framed}
@@ -37,32 +49,81 @@ export const QuestInfo: React.FC<IQuestInfoProps> = ({
       width="730px"
       cancelDrag=".equipment-container-body"
     >
-      {title && (
-        <TitleContainer className="drag-handler">
-          <Title>
-            <Thumbnail src={thumbnail || thumbnailDefault} />
-            {title}
-          </Title>
-          <QuestSplitDiv>
-            <hr className="golden" />
-          </QuestSplitDiv>
-        </TitleContainer>
+      {quests.length >= 2 ? (
+        <QuestsContainer>
+          {currentIndex !== 0 && <LeftArrow onClick={onLeftClick}></LeftArrow>}
+          {currentIndex !== quests.length - 1 && (
+            <RightArrow onClick={onRightClick}></RightArrow>
+          )}
+
+          <QuestContainer>
+            <TitleContainer className="drag-handler">
+              <Title>
+                <Thumbnail
+                  src={quests[currentIndex].thumbnail || thumbnailDefault}
+                />
+                {quests[currentIndex].title}
+              </Title>
+              <QuestSplitDiv>
+                <hr className="golden" />
+              </QuestSplitDiv>
+            </TitleContainer>
+            <Content>
+              <p>{quests[currentIndex].description}</p>
+            </Content>
+            <QuestColumn className="dark-background" justifyContent="flex-end">
+              {button &&
+                button.map((item, index) => (
+                  <Button
+                    key={index}
+                    onClick={() =>
+                      item.onClick(
+                        quests[currentIndex]._id,
+                        quests[currentIndex].npcId
+                      )
+                    }
+                    disabled={item.disabled}
+                    buttonType={ButtonTypes.RPGUIButton}
+                    id={`button-${index}`}
+                  >
+                    {item.title}
+                  </Button>
+                ))}
+            </QuestColumn>
+          </QuestContainer>
+        </QuestsContainer>
+      ) : (
+        <QuestsContainer>
+          <QuestContainer>
+            <TitleContainer className="drag-handler">
+              <Title>
+                <Thumbnail src={quests[0].thumbnail || thumbnailDefault} />
+                {quests[0].title}
+              </Title>
+              <QuestSplitDiv>
+                <hr className="golden" />
+              </QuestSplitDiv>
+            </TitleContainer>
+            <Content>
+              <p>{quests[0].description}</p>
+            </Content>
+            <QuestColumn className="dark-background" justifyContent="flex-end">
+              {button &&
+                button.map((item, index) => (
+                  <Button
+                    key={index}
+                    onClick={() => item.onClick(quests[0]._id, quests[0].npcId)}
+                    disabled={item.disabled}
+                    buttonType={ButtonTypes.RPGUIButton}
+                    id={`button-${index}`}
+                  >
+                    {item.title}
+                  </Button>
+                ))}
+            </QuestColumn>
+          </QuestContainer>
+        </QuestsContainer>
       )}
-      <Content>{children}</Content>
-      <QuestColumn className="dark-background" justifyContent="flex-end">
-        {button &&
-          button.map((item, index) => (
-            <Button
-              key={index}
-              onClick={item.onClick}
-              disabled={item.disabled}
-              buttonType={ButtonTypes.RPGUIButton}
-              id={`button-${index}`}
-            >
-              {item.title}
-            </Button>
-          ))}
-      </QuestColumn>
     </QuestDraggableContainer>
   );
 };
@@ -71,7 +132,6 @@ const QuestDraggableContainer = styled(DraggableContainer)`
   border: 1px solid black;
   width: 600px;
   height: 500px;
-  overflow-y: scroll;
   padding: 0 0 0 0 !important;
   .DraggableContainer__TitleContainer-sc-184mpyl-2 {
     height: auto;
@@ -79,7 +139,7 @@ const QuestDraggableContainer = styled(DraggableContainer)`
   .container-close {
     position: sticky;
     margin-left: auto;
-    top: 10px;
+    top: 20px;
     padding-right: 5px;
   }
   img {
@@ -89,6 +149,16 @@ const QuestDraggableContainer = styled(DraggableContainer)`
   }
 `;
 
+const QuestContainer = styled.div`
+  margin-right: 40px;
+  margin-left: 40px;
+`;
+
+const QuestsContainer = styled.div`
+  display: flex;
+  align-items: center;
+`;
+
 const Content = styled.div`
   padding: 18px;
   h1 {
@@ -113,14 +183,13 @@ const QuestSplitDiv = styled.div`
 const QuestColumn = styled(Column)`
   background: #4e4a4e;
   padding-top: 5px;
-  position: sticky;
-  bottom: 0;
+  margin-bottom: 20px;
+  display: flex;
+  justify-content: space-evenly;
 `;
 
 const TitleContainer = styled.div`
   background: #4e4a4e;
-  position: sticky;
-  top: 0;
   width: 100%;
   display: flex;
   flex-wrap: wrap;
@@ -141,3 +210,27 @@ const Thumbnail = styled.img`
   width: 64px;
   margin-right: 0.5rem;
 `;
+
+const LeftArrow = styled.div`
+  background-image: url(${LeftArrowIcon});
+  background-size: 100% 100%;
+  left: 0;
+  position: absolute;
+  width: 40px;
+  height: 42px;
+  :active {
+    background-image: url(${LeftArrowClickIcon});
+  }
+`;
+
+const RightArrow = styled.div`
+  background-image: url(${RightArrowIcon});
+  right: 0;
+  position: absolute;
+  width: 40px;
+  background-size: 100% 100%;
+  height: 42px;
+  :active {
+    background-image: url(${RightArrowClickIcon});
+  }
+`;

package/src/components/QuestList.tsx

@@ -0,0 +1,124 @@
+import React, { useLayoutEffect, useState } from 'react';
+import styled from 'styled-components';
+import { DraggableContainer } from './DraggableContainer';
+import { ProgressBar } from './ProgressBar';
+import { RPGUIContainerTypes } from './RPGUIContainer';
+
+export interface IQuestListProps {
+  title: string;
+  description: string;
+  quests: { title: string; description: string; completed: boolean }[];
+}
+
+export const QuestList: React.FC<IQuestListProps> = ({ quests }) => {
+  const [completedQuestsPercentage, setCompletedQuestsPercentage] = useState(0);
+
+  useLayoutEffect(() => {
+    const totalQuests = quests.length;
+    const completedQuests = quests.filter(({ completed }) => completed).length;
+
+    const percentage = Math.floor((completedQuests / totalQuests) * 100);
+
+    setCompletedQuestsPercentage(percentage);
+  }, []);
+
+  return (
+    <QuestDraggableContainer
+      type={RPGUIContainerTypes.Framed}
+      onCloseButton={() => {}}
+      width="520px"
+    >
+      <div style={{ width: '100%' }}>
+        <Title>Quests</Title>
+        <hr className="golden" />
+
+        <QuestListContainer>
+          {quests.map(({ title, description, completed }, i) => (
+            <div className="quest-item" key={i}>
+              <span className={`quest-number ${completed ? 'completed' : ''}`}>
+                {i + 1}
+              </span>
+              <div className="quest-detail">
+                <p className="quest-detail__title">{title}</p>
+                <p className="quest-detail__description">{description}</p>
+              </div>
+            </div>
+          ))}
+        </QuestListContainer>
+
+        <ProgressBar max={100} value={completedQuestsPercentage} color="blue" />
+      </div>
+    </QuestDraggableContainer>
+  );
+};
+
+const QuestDraggableContainer = styled(DraggableContainer)`
+  .container-close {
+    top: 10px;
+    right: 10px;
+  }
+
+  .quest-title {
+    text-align: left;
+    margin-left: 44px;
+    margin-top: 20px;
+    color: yellow;
+  }
+
+  .quest-desc {
+    margin-top: 12px;
+    margin-left: 44px;
+  }
+
+  .rpgui-progress {
+    min-width: 80%;
+    margin: 0 auto;
+  }
+`;
+
+const Title = styled.h1`
+  z-index: 22;
+  font-size: 0.6rem;
+  color: yellow !important;
+`;
+
+const QuestListContainer = styled.div`
+  margin-top: 20px;
+  margin-bottom: 40px;
+  overflow-y: auto;
+  max-height: 400px;
+
+  .quest-item {
+    display: flex;
+    align-items: flex-start;
+    margin-bottom: 12px;
+  }
+
+  .quest-number {
+    border-radius: 50%;
+    width: 28px;
+    height: 28px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-right: 16px;
+    background-color: brown;
+    flex-shrink: 0;
+  }
+
+  .quest-number.completed {
+    background-color: yellow;
+  }
+
+  p {
+    margin: 0;
+  }
+
+  .quest-detail__title {
+    color: yellow;
+  }
+
+  .quest-detail__description {
+    margin-top: 5px;
+  }
+`;

package/src/mocks/equipmentSet.mocks.ts

@@ -78,7 +78,7 @@ export const items: any = {
     isEquipable: false,
     isStackable: false,
     maxStackSize: 99,
-    stackQty: 3,
+
     isUsable: true,
     isStorable: true,
     layer: 1,
@@ -140,7 +140,6 @@ export const items: any = {
     isEquipable: false,
     isStackable: false,
     maxStackSize: 999,
-    stackQty: 171,
     isUsable: true,
     isStorable: true,
     layer: 1,
@@ -171,7 +170,7 @@ export const items: any = {
     isEquipable: false,
     isStackable: false,
     maxStackSize: 999,
-    stackQty: 32,
+
     isUsable: false,
     isStorable: true,
     layer: 1,
@@ -202,7 +201,7 @@ export const items: any = {
     isEquipable: false,
     isStackable: false,
     maxStackSize: 999,
-    stackQty: 32,
+
     isUsable: false,
     isStorable: true,
     layer: 1,
@@ -233,7 +232,7 @@ export const items: any = {
     isEquipable: false,
     isStackable: false,
     maxStackSize: 999,
-    stackQty: 32,
+
     isUsable: false,
     isStorable: true,
     layer: 1,
@@ -264,7 +263,6 @@ export const items: any = {
     isEquipable: false,
     isStackable: false,
     maxStackSize: 999,
-    stackQty: 171,
     isUsable: true,
     isStorable: true,
     layer: 1,