@rpg-engine/long-bow 0.1.82 → 0.1.83

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rpg-engine/long-bow",
-  "version": "0.1.82",
+  "version": "0.1.83",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
@@ -19,7 +19,7 @@
     "node": ">=10"
   },
   "scripts": {
-    "dev": "start-storybook -p 6006",
+    "dev": "yarn install && start-storybook -p 6006",
     "start": "tsdx watch",
     "build": "tsdx build",
     "test": "tsdx test --passWithNoTests",

package/src/components/Button.tsx

@@ -7,6 +7,7 @@ export enum ButtonTypes {
 }
 
 export interface IButtonProps {
+  disabled?: boolean;
   children: React.ReactNode;
   buttonType: ButtonTypes;
 }
@@ -15,9 +16,9 @@ export const Button: React.FC<IButtonProps &
   React.DetailedHTMLProps<
     React.ButtonHTMLAttributes<HTMLButtonElement>,
     HTMLButtonElement
-  >> = ({ children, buttonType, ...props }) => {
+  >> = ({ disabled = false, children, buttonType, ...props }) => {
   return (
-    <ButtonContainer className={`${buttonType}`} {...props}>
+    <ButtonContainer className={`${buttonType}`} disabled={disabled} {...props}>
       <p>{children}</p>
     </ButtonContainer>
   );

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

@@ -68,6 +68,7 @@ export const ItemSlot: React.FC<IProps> = ({
     if (itemToRender?.texturePath) {
       element.push(
         <SpriteFromAtlas
+          key={itemToRender._id}
           atlasIMG={atlasIMG}
           atlasJSON={atlasJSON}
           spriteKey={itemToRender.texturePath}
@@ -77,7 +78,10 @@ export const ItemSlot: React.FC<IProps> = ({
     }
     if (itemToRender?.isStackable && itemToRender?.stackQty) {
       element.push(
-        <ItemQty left={getLeftPositionValue(itemToRender.stackQty)}>
+        <ItemQty
+          left={getLeftPositionValue(itemToRender.stackQty)}
+          key={`qty-${itemToRender._id}`}
+        >
           {' '}
           {itemToRender.stackQty}{' '}
         </ItemQty>
@@ -93,6 +97,7 @@ export const ItemSlot: React.FC<IProps> = ({
     ) {
       return (
         <SpriteFromAtlas
+          key={Math.random()}
           atlasIMG={atlasIMG}
           atlasJSON={atlasJSON}
           spriteKey={itemToRender.texturePath}

package/src/components/QuestInfo/index.tsx

@@ -0,0 +1,147 @@
+import React from 'react';
+import { RPGUIContainerTypes } from '../RPGUIContainer';
+import { DraggableContainer } from '../DraggableContainer';
+import { Column } from '../shared/Column';
+import { Button, ButtonTypes } from '../Button';
+import { uiStore } from '../store/UI.store';
+import styled from 'styled-components';
+import thumbnailDefault from './img/default.png';
+
+export interface IQuestInfoProps {
+  title: string;
+  children: React.ReactNode;
+  onClose?: () => void;
+  button?: Array<IQuestButtonProps>;
+  thumbnail?: string;
+}
+
+export interface IQuestButtonProps {
+  disabled: boolean;
+  title: string;
+  onClick: () => void;
+}
+
+export const QuestInfo: React.FC<IQuestInfoProps> = ({
+  title,
+  onClose,
+  button,
+  thumbnail,
+  children,
+}) => {
+  return (
+    <QuestDraggableContainer
+      type={RPGUIContainerTypes.Framed}
+      onCloseButton={() => {
+        if (onClose) onClose();
+      }}
+      width="730px"
+      cancelDrag=".equipment-container-body"
+      onOutsideClick={() => {
+        uiStore.clearContextMenu();
+        uiStore.clearItemHoverDetail();
+      }}
+    >
+      {title && (
+        <TitleContainer className="drag-handler">
+          <Title>
+            <Thumbnail src={thumbnail || thumbnailDefault} />
+            {title}
+          </Title>
+          <QuestSplitDiv>
+            <hr className="golden" />
+          </QuestSplitDiv>
+        </TitleContainer>
+      )}
+      <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>
+  );
+};
+
+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;
+  }
+  .container-close {
+    position: sticky;
+    margin-left: auto;
+    top: 10px;
+    padding-right: 5px;
+  }
+  img {
+    display: inline-block;
+    vertical-align: middle;
+    line-height: normal;
+  }
+`;
+
+const Content = styled.div`
+  padding: 18px;
+  h1 {
+    text-align: left;
+    margin: 14px 0px;
+  }
+`;
+
+const QuestSplitDiv = styled.div`
+  width: 100%;
+  font-size: 11px;
+  margin-bottom: 10px;
+  hr {
+    margin: 0px;
+    padding: 0px;
+  }
+  p {
+    margin-bottom: 0px;
+  }
+`;
+
+const QuestColumn = styled(Column)`
+  background: #4e4a4e;
+  padding-top: 5px;
+  position: sticky;
+  bottom: 0;
+`;
+
+const TitleContainer = styled.div`
+  background: #4e4a4e;
+  position: sticky;
+  top: 0;
+  width: 100%;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-start;
+  align-items: center;
+`;
+
+const Title = styled.h1`
+  color: white;
+  z-index: 22;
+  font-size: 0.6rem;
+`;
+
+const Thumbnail = styled.img`
+  color: white;
+  z-index: 22;
+  font-size: 10px;
+  width: 64px;
+  margin-right: 0.5rem;
+`;

package/src/components/SkillsContainer.tsx

@@ -15,7 +15,12 @@ export const SkillsContainer: React.FC<ISkillContainerProps> = ({
   skill,
 }) => {
   return (
-    <SkillsDraggableContainer title="Skills" onCloseButton={onCloseButton}>
+    <SkillsDraggableContainer title="Skills">
+      {onCloseButton && (
+        <CloseButton onClick={onCloseButton} onTouchStart={onCloseButton}>
+          X
+        </CloseButton>
+      )}
       <SkillSplitDiv>
         <p>Combat Skills</p>
         <hr className="golden" />
@@ -233,3 +238,12 @@ const SkillSplitDiv = styled.div`
     margin-bottom: 0px;
   }
 `;
+
+const CloseButton = styled.div`
+  position: absolute;
+  top: 2px;
+  right: 2px;
+  color: white;
+  z-index: 22;
+  font-size: 0.7rem;
+`;

package/src/mocks/itemContainer.mocks.ts

@@ -132,7 +132,7 @@ export const items: IItem[] = [
     updatedAt: '2022-06-04T18:16:49.056Z',
   },
   {
-    _id: '629acek4j7c8e8002ff60034',
+    _id: '629acek4j7c8e8002fg60034',
     type: ItemType.Consumable,
     subType: ItemSubType.Accessory,
     textureAtlas: 'items',