@rpg-engine/long-bow 0.2.6 → 0.2.8

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

@@ -1,12 +1,11 @@
 import React from 'react';
 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 declare const CharacterSelection: React.FC<ICharacterSelectionProps>;
 export default CharacterSelection;

package/dist/components/QuestInfo/QuestInfo.d.ts

@@ -1,14 +1,13 @@
+import { IQuest } from '@rpg-engine/shared';
 import React from 'react';
 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 declare const QuestInfo: React.FC<IQuestInfoProps>;

package/dist/components/QuestList.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+export interface IQuestListProps {
+    title: string;
+    description: string;
+    quests: {
+        title: string;
+        description: string;
+        completed: boolean;
+    }[];
+}
+export declare const QuestList: React.FC<IQuestListProps>;

package/dist/long-bow.cjs.development.js

@@ -20393,7 +20393,18 @@ var PropertySelect = function PropertySelect(_ref) {
   React.useEffect(function () {
     onChange(availableProperties[currentIndex]);
   }, [currentIndex]);
-  return React__default.createElement(Container$1, null, React__default.createElement(TextOverlay, null, React__default.createElement(Item, null, availableProperties[currentIndex].name)), React__default.createElement("div", {
+
+  var getCurrentSelectionName = function getCurrentSelectionName() {
+    var item = availableProperties[currentIndex];
+
+    if (item) {
+      return item.name;
+    }
+
+    return '';
+  };
+
+  return React__default.createElement(Container$1, null, React__default.createElement(TextOverlay, null, React__default.createElement(Item, null, getCurrentSelectionName())), React__default.createElement("div", {
     className: "rpgui-progress-track"
   }), React__default.createElement(LeftArrow, {
     onClick: onLeftClick
@@ -20425,43 +20436,39 @@ var RightArrow = /*#__PURE__*/styled.div.withConfig({
 var CharacterSelection = function CharacterSelection(_ref) {
   var availableCharacters = _ref.availableCharacters,
       onChange = _ref.onChange;
+  var propertySelectValues = availableCharacters.map(function (item) {
+    return {
+      id: item.textureKey,
+      name: item.name
+    };
+  });
 
-  var getPropertySelectValues = function getPropertySelectValues() {
-    return availableCharacters.map(function (item) {
-      return {
-        id: item.id,
-        name: item.name
-      };
-    });
-  };
-
-  var _useState = React.useState(getPropertySelectValues()),
-      propertySelectValues = _useState[0];
+  var _useState = React.useState(),
+      selectedValue = _useState[0],
+      setSelectedValue = _useState[1];
 
   var _useState2 = React.useState(''),
       selectedSpriteKey = _useState2[0],
       setSelectedSpriteKey = _useState2[1];
 
-  var _useState3 = React.useState(propertySelectValues[0]),
-      selectedValue = _useState3[0],
-      setSelectedValue = _useState3[1];
+  var onSelectedValueChange = function onSelectedValueChange() {
+    var textureKey = selectedValue ? selectedValue.id : '';
+    var spriteKey = textureKey ? textureKey + '/down/standing/0.png' : '';
 
-  var getSelectedCharacterSpriteKey = function getSelectedCharacterSpriteKey() {
-    var character = availableCharacters.filter(function (item) {
-      return item.id === selectedValue.id;
-    })[0];
-    return character ? character.spriteKey : '';
-  };
+    if (spriteKey == selectedSpriteKey) {
+      return;
+    }
 
-  var onSelectedValueChange = function onSelectedValueChange() {
-    var spriteKey = getSelectedCharacterSpriteKey();
     setSelectedSpriteKey(spriteKey);
-    onChange(spriteKey);
+    onChange(textureKey);
   };
 
   React.useEffect(function () {
     onSelectedValueChange();
   }, [selectedValue]);
+  React.useEffect(function () {
+    setSelectedValue(propertySelectValues[0]);
+  }, [availableCharacters]);
   return React__default.createElement(Container$2, null, selectedSpriteKey && React__default.createElement(SpriteFromAtlas, {
     spriteKey: selectedSpriteKey,
     atlasIMG: img,
@@ -20470,7 +20477,7 @@ var CharacterSelection = function CharacterSelection(_ref) {
     height: 50,
     width: 50,
     containerStyle: {
-      padding: '25px 10px 5px 28px'
+      padding: '25px 10px 5px 27px'
     }
   }), React__default.createElement(PropertySelect, {
     availableProperties: propertySelectValues,
@@ -26304,10 +26311,25 @@ var ItemSlot = /*#__PURE__*/mobxReactLite.observer(function (_ref) {
     return '2.5rem';
   };
 
+  var getStackInfo = function getStackInfo(itemId, stackQty) {
+    // if (itemToRender?.isStackable && itemToRender?.stackQty) {
+    if (stackQty > 1) {
+      return React__default.createElement(ItemQty, {
+        left: getLeftPositionValue(stackQty),
+        key: "qty-" + itemId
+      }, ' ', stackQty, ' ');
+    }
+
+    return undefined;
+  };
+
   var renderItem = function renderItem(itemToRender) {
+    var _itemToRender$_id, _itemToRender$stackQt;
+
     var element = [];
 
     if (itemToRender != null && itemToRender.texturePath) {
+      console.table(itemToRender);
       element.push(React__default.createElement(SpriteFromAtlas, {
         key: itemToRender._id,
         atlasIMG: img$5,
@@ -26317,11 +26339,10 @@ var ItemSlot = /*#__PURE__*/mobxReactLite.observer(function (_ref) {
       }));
     }
 
-    if (itemToRender != null && itemToRender.isStackable && itemToRender != null && itemToRender.stackQty) {
-      element.push(React__default.createElement(ItemQty, {
-        left: getLeftPositionValue(itemToRender.stackQty),
-        key: "qty-" + itemToRender._id
-      }, ' ', itemToRender.stackQty, ' '));
+    var stackInfo = getStackInfo((_itemToRender$_id = itemToRender == null ? void 0 : itemToRender._id) != null ? _itemToRender$_id : '', (_itemToRender$stackQt = itemToRender == null ? void 0 : itemToRender.stackQty) != null ? _itemToRender$stackQt : 0);
+
+    if (stackInfo) {
+      element.push(stackInfo);
     }
 
     return element;
@@ -26331,13 +26352,23 @@ var ItemSlot = /*#__PURE__*/mobxReactLite.observer(function (_ref) {
     var _itemToRender$allowed;
 
     if (itemToRender != null && itemToRender.texturePath && (_itemToRender$allowed = itemToRender.allowedEquipSlotType) != null && _itemToRender$allowed.includes(slotSpriteMask)) {
-      return React__default.createElement(SpriteFromAtlas, {
+      var _itemToRender$_id2, _itemToRender$stackQt2;
+
+      var element = [];
+      element.push(React__default.createElement(SpriteFromAtlas, {
         key: itemToRender._id,
         atlasIMG: img$5,
         atlasJSON: atlasJSON,
         spriteKey: itemToRender.texturePath,
         imgScale: 3
-      });
+      }));
+      var stackInfo = getStackInfo((_itemToRender$_id2 = itemToRender == null ? void 0 : itemToRender._id) != null ? _itemToRender$_id2 : '', (_itemToRender$stackQt2 = itemToRender == null ? void 0 : itemToRender.stackQty) != null ? _itemToRender$stackQt2 : 0);
+
+      if (stackInfo) {
+        element.push(stackInfo);
+      }
+
+      return element;
     } else {
       return React__default.createElement(SpriteFromAtlas, {
         atlasIMG: img$5,
@@ -27042,11 +27073,28 @@ var Container$d = /*#__PURE__*/styled.div.withConfig({
 var img$8 = 'data:image/png;base64,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';
 
 var QuestInfo = function QuestInfo(_ref) {
-  var title = _ref.title,
+  var quests = _ref.quests,
       onClose = _ref.onClose,
-      button = _ref.button,
-      thumbnail = _ref.thumbnail,
-      children = _ref.children;
+      button = _ref.button;
+
+  var _useState = React.useState(0),
+      currentIndex = _useState[0],
+      setCurrentIndex = _useState[1];
+
+  var questsLength = quests.length - 1;
+
+  var onLeftClick = function onLeftClick() {
+    if (currentIndex === 0) setCurrentIndex(questsLength);else setCurrentIndex(function (index) {
+      return index - 1;
+    });
+  };
+
+  var onRightClick = function onRightClick() {
+    if (currentIndex === questsLength) setCurrentIndex(0);else setCurrentIndex(function (index) {
+      return index + 1;
+    });
+  };
+
   return React__default.createElement(QuestDraggableContainer, {
     type: exports.RPGUIContainerTypes.Framed,
     onCloseButton: function onCloseButton() {
@@ -27054,53 +27102,94 @@ var QuestInfo = function QuestInfo(_ref) {
     },
     width: "730px",
     cancelDrag: ".equipment-container-body"
-  }, title && React__default.createElement(TitleContainer$1, {
+  }, quests.length >= 2 ? React__default.createElement(QuestsContainer, null, currentIndex !== 0 && React__default.createElement(LeftArrow$1, {
+    onClick: onLeftClick
+  }), currentIndex !== quests.length - 1 && React__default.createElement(RightArrow$1, {
+    onClick: onRightClick
+  }), React__default.createElement(QuestContainer, null, React__default.createElement(TitleContainer$1, {
     className: "drag-handler"
   }, React__default.createElement(Title$1, null, React__default.createElement(Thumbnail, {
-    src: thumbnail || img$8
-  }), title), React__default.createElement(QuestSplitDiv, null, React__default.createElement("hr", {
+    src: quests[currentIndex].thumbnail || img$8
+  }), quests[currentIndex].title), React__default.createElement(QuestSplitDiv, null, React__default.createElement("hr", {
     className: "golden"
-  }))), React__default.createElement(Content, null, children), React__default.createElement(QuestColumn, {
+  }))), React__default.createElement(Content, null, React__default.createElement("p", null, quests[currentIndex].description)), React__default.createElement(QuestColumn, {
     className: "dark-background",
     justifyContent: "flex-end"
   }, button && button.map(function (item, index) {
     return React__default.createElement(Button, {
       key: index,
-      onClick: item.onClick,
+      onClick: function onClick() {
+        return item.onClick(quests[currentIndex]._id, quests[currentIndex].npcId);
+      },
       disabled: item.disabled,
       buttonType: exports.ButtonTypes.RPGUIButton,
       id: "button-" + index
     }, item.title);
-  })));
+  })))) : React__default.createElement(QuestsContainer, null, React__default.createElement(QuestContainer, null, React__default.createElement(TitleContainer$1, {
+    className: "drag-handler"
+  }, React__default.createElement(Title$1, null, React__default.createElement(Thumbnail, {
+    src: quests[0].thumbnail || img$8
+  }), quests[0].title), React__default.createElement(QuestSplitDiv, null, React__default.createElement("hr", {
+    className: "golden"
+  }))), React__default.createElement(Content, null, React__default.createElement("p", null, quests[0].description)), React__default.createElement(QuestColumn, {
+    className: "dark-background",
+    justifyContent: "flex-end"
+  }, button && button.map(function (item, index) {
+    return React__default.createElement(Button, {
+      key: index,
+      onClick: function onClick() {
+        return item.onClick(quests[0]._id, quests[0].npcId);
+      },
+      disabled: item.disabled,
+      buttonType: exports.ButtonTypes.RPGUIButton,
+      id: "button-" + index
+    }, item.title);
+  })))));
 };
 var QuestDraggableContainer = /*#__PURE__*/styled(DraggableContainer).withConfig({
   displayName: "QuestInfo__QuestDraggableContainer",
   componentId: "sc-15s2boc-0"
-})(["border:1px solid black;width:600px;height:500px;overflow-y:scroll;padding:0 0 0 0 !important;.DraggableContainer__TitleContainer-sc-184mpyl-2{height:auto;}.container-close{position:sticky;margin-left:auto;top:10px;padding-right:5px;}img{display:inline-block;vertical-align:middle;line-height:normal;}"]);
+})(["border:1px solid black;width:600px;height:500px;padding:0 0 0 0 !important;.DraggableContainer__TitleContainer-sc-184mpyl-2{height:auto;}.container-close{position:sticky;margin-left:auto;top:20px;padding-right:5px;}img{display:inline-block;vertical-align:middle;line-height:normal;}"]);
+var QuestContainer = /*#__PURE__*/styled.div.withConfig({
+  displayName: "QuestInfo__QuestContainer",
+  componentId: "sc-15s2boc-1"
+})(["margin-right:40px;margin-left:40px;"]);
+var QuestsContainer = /*#__PURE__*/styled.div.withConfig({
+  displayName: "QuestInfo__QuestsContainer",
+  componentId: "sc-15s2boc-2"
+})(["display:flex;align-items:center;"]);
 var Content = /*#__PURE__*/styled.div.withConfig({
   displayName: "QuestInfo__Content",
-  componentId: "sc-15s2boc-1"
+  componentId: "sc-15s2boc-3"
 })(["padding:18px;h1{text-align:left;margin:14px 0px;}"]);
 var QuestSplitDiv = /*#__PURE__*/styled.div.withConfig({
   displayName: "QuestInfo__QuestSplitDiv",
-  componentId: "sc-15s2boc-2"
+  componentId: "sc-15s2boc-4"
 })(["width:100%;font-size:11px;margin-bottom:10px;hr{margin:0px;padding:0px;}p{margin-bottom:0px;}"]);
 var QuestColumn = /*#__PURE__*/styled(Column).withConfig({
   displayName: "QuestInfo__QuestColumn",
-  componentId: "sc-15s2boc-3"
-})(["background:#4e4a4e;padding-top:5px;position:sticky;bottom:0;"]);
+  componentId: "sc-15s2boc-5"
+})(["background:#4e4a4e;padding-top:5px;margin-bottom:20px;display:flex;justify-content:space-evenly;"]);
 var TitleContainer$1 = /*#__PURE__*/styled.div.withConfig({
   displayName: "QuestInfo__TitleContainer",
-  componentId: "sc-15s2boc-4"
-})(["background:#4e4a4e;position:sticky;top:0;width:100%;display:flex;flex-wrap:wrap;justify-content:flex-start;align-items:center;"]);
+  componentId: "sc-15s2boc-6"
+})(["background:#4e4a4e;width:100%;display:flex;flex-wrap:wrap;justify-content:flex-start;align-items:center;"]);
 var Title$1 = /*#__PURE__*/styled.h1.withConfig({
   displayName: "QuestInfo__Title",
-  componentId: "sc-15s2boc-5"
+  componentId: "sc-15s2boc-7"
 })(["color:white;z-index:22;font-size:0.6rem;"]);
 var Thumbnail = /*#__PURE__*/styled.img.withConfig({
   displayName: "QuestInfo__Thumbnail",
-  componentId: "sc-15s2boc-6"
+  componentId: "sc-15s2boc-8"
 })(["color:white;z-index:22;font-size:10px;width:64px;margin-right:0.5rem;"]);
+var LeftArrow$1 = /*#__PURE__*/styled.div.withConfig({
+  displayName: "QuestInfo__LeftArrow",
+  componentId: "sc-15s2boc-9"
+})(["background-image:url(", ");background-size:100% 100%;left:0;position:absolute;width:40px;height:42px;:active{background-image:url(", ");}"], img$2, img$1);
+var RightArrow$1 = /*#__PURE__*/styled.div.withConfig({
+  displayName: "QuestInfo__RightArrow",
+  componentId: "sc-15s2boc-10"
+})(["background-image:url(", ");right:0;position:absolute;width:40px;background-size:100% 100%;height:42px;:active{background-image:url(", ");}"], img$4, img$3);
 
 var InputRadio = function InputRadio(_ref) {
   var name = _ref.name,