@rpg-engine/long-bow 0.1.67 → 0.1.70

package/src/components/DraggableContainer.tsx

@@ -10,10 +10,10 @@ export interface IDraggableContainerProps {
   height?: string;
   className?: string;
   type?: RPGUIContainerTypes;
-  title: string;
+  title?: string;
   imgSrc?: string;
   imgWidth?: string;
-  onCloseButton: () => void;
+  onCloseButton?: () => void;
   cancelDrag?: string;
   onPositionChange?: (position: IPosition) => void;
 }
@@ -48,12 +48,14 @@ export const DraggableContainer: React.FC<IDraggableContainerProps> = ({
         height={height || 'auto'}
         className={`rpgui-container ${type} ${className}`}
       >
-        <TitleContainer className="drag-handler">
-          <Title>
-            {imgSrc && <Icon src={imgSrc} width={imgWidth} />}
-            {title}
-          </Title>
-        </TitleContainer>
+        {title && (
+          <TitleContainer className="drag-handler">
+            <Title>
+              {imgSrc && <Icon src={imgSrc} width={imgWidth} />}
+              {title}
+            </Title>
+          </TitleContainer>
+        )}
         {onCloseButton && (
           <CloseButton
             className="container-close"
@@ -101,7 +103,7 @@ const TitleContainer = styled.div`
   height: 100%;
   display: flex;
   flex-wrap: wrap;
-  justify-content: center;
+  justify-content: flex-start;
   align-items: center;
 `;
 

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

@@ -17,9 +17,9 @@ import { ItemSlot } from './ItemSlot';
 
 export interface IItemContainerProps {
   itemContainer: IItemContainer;
-  onClose: () => void;
-  onMouseOver: (e: any, slotIndex: number, item: IItem | null) => void;
-  onActionSelected: (payload: any) => void;
+  onClose?: () => void;
+  onMouseOver?: (e: any, slotIndex: number, item: IItem | null) => void;
+  onActionSelected?: (payload: any) => void;
   initialPosition?: { x: number; y: number };
 }
 
@@ -111,7 +111,9 @@ export const ItemContainer: React.FC<IItemContainerProps> = ({
         posX: x - draggablePosition.x,
         posY: y - draggablePosition.y,
       });
-      onMouseOver(event, slotIndex, item);
+      if (onMouseOver) {
+        onMouseOver(event, slotIndex, item);
+      }
     } else {
       clearItemHoverDetail();
     }
@@ -144,7 +146,9 @@ export const ItemContainer: React.FC<IItemContainerProps> = ({
       actionType: selectedActionId,
       item: contextData.slotItem,
     };
-    onActionSelected(payloadData);
+    if (onActionSelected) {
+      onActionSelected(payloadData);
+    }
     clearContextMenu();
   };
 
@@ -173,7 +177,11 @@ export const ItemContainer: React.FC<IItemContainerProps> = ({
       <DraggableContainer
         title={itemContainer.name || 'Container'}
         type={RPGUIContainerTypes.Framed}
-        onCloseButton={() => onClose()}
+        onCloseButton={() => {
+          if (onClose) {
+            onClose();
+          }
+        }}
         width="330px"
         cancelDrag=".item-container-body"
         onPositionChange={({ x, y }) => {

package/src/components/Item/SpriteFromAtlas.tsx

@@ -9,6 +9,8 @@ interface IProps {
   width?: number;
   height?: number;
   scale?: number;
+  grayScale?: boolean;
+  opacity?: number;
 }
 
 export const SpriteFromAtlas: React.FC<IProps> = ({
@@ -18,6 +20,8 @@ export const SpriteFromAtlas: React.FC<IProps> = ({
   width = GRID_WIDTH,
   height = GRID_HEIGHT,
   scale = 2,
+  grayScale = false,
+  opacity = 1,
 }) => {
   //! If an item is not showing, remember that you MUST run yarn atlas:copy everytime you add a new item to the atlas (it will sync our public folder atlas with src/atlas).
   //!Due to React's limitations, we cannot import it from the public folder directly!
@@ -31,6 +35,8 @@ export const SpriteFromAtlas: React.FC<IProps> = ({
         atlasIMG={atlasIMG}
         frame={spriteData.frame}
         scale={scale}
+        grayScale={grayScale}
+        opacity={opacity}
       />
     </Container>
   );
@@ -45,6 +51,8 @@ interface IImgSpriteProps {
     h: number;
   };
   scale: number;
+  grayScale: boolean;
+  opacity: number;
 }
 
 interface IContainerProps {
@@ -66,4 +74,6 @@ const ImgSprite = styled.div<IImgSpriteProps>`
   position: relative;
   top: 8px;
   left: 8px;
+  filter: ${props => (props.grayScale ? 'grayscale(100%)' : 'none')};
+  opacity: ${props => props.opacity};
 `;

package/src/components/Multitab/Tab.tsx

@@ -0,0 +1,57 @@
+import React from 'react';
+import styled from 'styled-components';
+import { MultitabType } from './TabsContainer';
+
+export interface ISingleTab {
+  active: boolean;
+  label: string;
+  onClick: () => void;
+  type: MultitabType;
+}
+
+export const Tab: React.FC<ISingleTab> = ({ active, label, onClick, type }) => {
+  return (
+    <CustomTab activeTab={active} onClick={onClick} className={type}>
+      <p>{label}</p>
+    </CustomTab>
+  );
+};
+
+interface ICustomTab {
+  activeTab: boolean;
+}
+
+const CustomTab = styled.div<ICustomTab>`
+  width: 120px;
+  color: white;
+  font-size: 0.8rem;
+
+  &.gray {
+    border-left: 0.25rem solid rgba(0, 0, 0, 0.25);
+    border-right: 0.25rem solid rgba(0, 0, 0, 0.25);
+    border-top: 0.25rem solid rgba(0, 0, 0, 0.25);
+    background: ${props => (props.activeTab ? '#4E4A4E' : '#2b292b')};
+  }
+
+  &.brown {
+    border-left: 0.25rem solid #996d55;
+    border-right: 0.25rem solid #996d55;
+    border-top: 0.25rem solid #996d55;
+    background: ${props => (props.activeTab ? '#BF886A' : '#B67051')};
+  }
+
+  margin-right: 10px;
+  p {
+    text-align: center;
+    font-size: 0.6rem;
+
+    opacity: ${props => (props.activeTab ? '1' : '0.5')};
+  }
+
+  border-radius: 5px 5px 0 0;
+
+  z-index: ${props => (props.activeTab ? 1 : -1)};
+
+  position: relative;
+  top: 0.3rem;
+`;

package/src/components/Multitab/TabBody.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import styled from 'styled-components';
+
+interface IProps {
+  id: string;
+  children: React.ReactNode;
+}
+
+export const TabBody: React.FC<IProps> = ({ id, children }) => {
+  return <Container data-tab-id={id}>{children}</Container>;
+};
+
+const Container = styled.div``;

package/src/components/Multitab/TabsContainer.tsx

@@ -0,0 +1,97 @@
+import React, { useState } from 'react';
+import styled from 'styled-components';
+import { DraggableContainer } from '../DraggableContainer';
+import { RPGUIContainerTypes } from '../RPGUIContainer';
+import { Tab } from './Tab';
+
+interface ITab {
+  label: string;
+  id: string;
+}
+
+export enum MultitabType {
+  Brown = 'brown',
+  Gray = 'gray',
+}
+
+export interface ITabsContainer {
+  children: React.ReactNode;
+  onCloseButton?: () => void;
+  tabs: ITab[];
+  type: MultitabType;
+}
+
+export const TabsContainer: React.FC<ITabsContainer> = ({
+  children,
+  onCloseButton,
+  tabs,
+  type = MultitabType.Brown,
+}) => {
+  const [selectedTab, setSelectedTab] = useState(tabs[0].id); //by default the first one
+
+  const onRenderTabs = () =>
+    tabs.map((tab, index) => (
+      <Tab
+        type={type}
+        active={selectedTab === tab.id}
+        label={tab.label}
+        key={`${tab.label}_${index}`}
+        onClick={() => setSelectedTab(tab.id)}
+      >
+        {tab.label}
+      </Tab>
+    ));
+
+  const onGetContainerType = () => {
+    switch (type) {
+      case 'brown':
+        return RPGUIContainerTypes.FramedGold;
+      case 'gray':
+        return RPGUIContainerTypes.Framed;
+    }
+  };
+
+  return (
+    <DraggableContainer
+      onCloseButton={onCloseButton}
+      type={onGetContainerType()}
+    >
+      {onRenderTabs()}
+      <BodyContainer selectedTab={selectedTab} className={type}>
+        {children}
+      </BodyContainer>
+    </DraggableContainer>
+  );
+};
+
+interface IBodyContainer {
+  selectedTab: string;
+}
+
+const BodyContainer = styled.div<IBodyContainer>`
+  display: flex; 
+  width: 100%;
+  height: 100%;
+  justify-content: space-between;
+
+  /* hide everything that is not data-tab-id selectedTab */
+  & > *:not([data-tab-id=${props => props.selectedTab}]) {
+    display: none;
+  }
+
+  &.brown {
+  border: 0.25rem solid #996D55;
+  background-color: #BF886A;
+  }
+  
+
+  &.gray {
+    border: 0.25rem solid rgba(0, 0, 0, 0.25);
+    background-color: #4E4A4E;
+  }
+ 
+
+  border-radius: 5px; 
+  padding: 0.5rem; 
+   
+`;

package/src/components/SimpleProgressBar.tsx

@@ -1,20 +1,20 @@
 import React from 'react';
 import styled from 'styled-components';
 
-interface IProps {
+export interface ISimpleProgressBarProps {
   value: number;
-  height?: string;
   bgColor?: string;
+  margin?: number;
 }
 
-export const SimpleProgressBar: React.FC<IProps> = ({
+export const SimpleProgressBar: React.FC<ISimpleProgressBarProps> = ({
   value,
-
   bgColor = 'red',
+  margin = 20,
 }) => {
   return (
-    <Container>
-      <ProgressBarContainer>
+    <Container className="simple-progress-bar">
+      <ProgressBarContainer margin={margin}>
         <BackgroundBar>
           <Progress value={value} bgColor={bgColor} />
         </BackgroundBar>
@@ -34,16 +34,20 @@ const BackgroundBar = styled.span`
   background-color: rgba(0, 0, 0, 0.075);
 `;
 
-interface IProgressProps {
+interface ISimpleProgressBarThemeProps {
   value: number;
   bgColor: string;
 }
 
 const Progress = styled.span`
-  background-color: ${(props: IProgressProps) => props.bgColor};
-  width: ${(props: IProgressProps) => props.value}%;
+  background-color: ${(props: ISimpleProgressBarThemeProps) => props.bgColor};
+  width: ${(props: ISimpleProgressBarThemeProps) => props.value}%;
 `;
 
+interface ISimpleProgressBarTheme2Props {
+  margin: number;
+}
+
 const ProgressBarContainer = styled.div`
   border-radius: 60px;
   border: 1px solid #282424;
@@ -53,6 +57,6 @@ const ProgressBarContainer = styled.div`
     display: block;
     height: 100%;
   }
-
   height: 8px;
+  margin-left: ${(props: ISimpleProgressBarTheme2Props) => props.margin}px;
 `;

package/src/components/SkillProgressBar.tsx

@@ -1,42 +1,99 @@
+import { getSPForLevel } from '@rpg-engine/shared';
 import React from 'react';
 import styled from 'styled-components';
-import imgSrcTemplate from './imgExp.png';
+import atlasJSON from '../mocks/atlas/items/items.json';
+import atlasIMG from '../mocks/atlas/items/items.png';
+import { SpriteFromAtlas } from './Item/SpriteFromAtlas';
 import { SimpleProgressBar } from './SimpleProgressBar';
 
 export interface ISkillProgressBarProps {
-  value: number;
-
-  height: string;
+  skillName: string;
   bgColor: string;
-  titleName: string;
-
-  logoSrc?: string;
+  level: number;
+  skillPoints: number;
+  skillPointsToNextLevel?: number;
+  texturePath: string;
+  showSkillPoints?: boolean;
 }
 
 export const SkillProgressBar: React.FC<ISkillProgressBarProps> = ({
-  value,
   bgColor,
-  titleName,
-
-  logoSrc = imgSrcTemplate,
+  skillName,
+  level,
+  skillPoints,
+  texturePath,
+  showSkillPoints = true,
 }) => {
+  const spForNextLevel = getSPForLevel(level + 1);
+
+  const ratio = (skillPoints / spForNextLevel) * 100;
+
   return (
     <>
       <ProgressTitle>
-        <TitleName>{titleName}</TitleName>
-        <ValueDisplay>{value}</ValueDisplay>
+        <TitleName>{skillName}</TitleName>
+        <ValueDisplay>lv {level}</ValueDisplay>
       </ProgressTitle>
       <ProgressBody>
         <ProgressIconContainer>
-          <Icon src={logoSrc} />
+          {atlasIMG && atlasJSON ? (
+            <SpriteContainer>
+              <SpriteFromAtlas
+                atlasIMG={atlasIMG}
+                atlasJSON={atlasJSON}
+                spriteKey={texturePath}
+                scale={1}
+                grayScale
+                opacity={0.5}
+              />
+            </SpriteContainer>
+          ) : (
+            <></>
+          )}
         </ProgressIconContainer>
 
-        <SimpleProgressBar value={value} bgColor={bgColor} />
+        <ProgressBarContainer>
+          <SimpleProgressBar value={ratio} bgColor={bgColor} />
+        </ProgressBarContainer>
       </ProgressBody>
+      {showSkillPoints && (
+        <SkillDisplayContainer>
+          <SkillPointsDisplay>
+            {skillPoints}/{spForNextLevel}
+          </SkillPointsDisplay>
+        </SkillDisplayContainer>
+      )}
     </>
   );
 };
 
+const ProgressBarContainer = styled.div`
+  position: relative;
+  top: 8px;
+  width: 100%;
+  height: auto;
+`;
+
+const SpriteContainer = styled.div`
+  position: relative;
+  top: -3px;
+  left: 0;
+`;
+
+const SkillDisplayContainer = styled.div`
+  margin: 5px auto;
+
+  p {
+    margin: 0;
+  }
+`;
+
+const SkillPointsDisplay = styled.p`
+  font-size: 0.6rem !important;
+  font-weight: bold;
+  text-align: center;
+`;
+
 const TitleName = styled.span`
   margin-left: 5px;
 `;
@@ -52,6 +109,7 @@ const ProgressIconContainer = styled.div`
 const ProgressBody = styled.div`
   display: flex;
   flex-direction: row;
+  width: 100%;
 `;
 
 const ProgressTitle = styled.div`
@@ -62,9 +120,5 @@ const ProgressTitle = styled.div`
   span {
     font-size: 0.6rem;
   }
-`;
-
-const Icon = styled.img`
-  margin-right: 10px;
-  height: 30px;
+  margin-top: 10px;
 `;