@rpg-engine/long-bow 0.1.68 → 0.1.71

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;
 `;

package/src/components/SkillsContainer.tsx

@@ -0,0 +1,235 @@
+import { ISkill } from '@rpg-engine/shared';
+import React from 'react';
+import styled from 'styled-components';
+import { colors } from '../constants/uiColors';
+import { DraggableContainer } from './DraggableContainer';
+import { SkillProgressBar } from './SkillProgressBar';
+
+export interface ISkillContainerProps {
+  skill: ISkill;
+  onCloseButton: () => void;
+}
+
+export const SkillsContainer: React.FC<ISkillContainerProps> = ({
+  onCloseButton,
+  skill,
+}) => {
+  return (
+    <SkillsDraggableContainer title="Skills" onCloseButton={onCloseButton}>
+      <SkillSplitDiv>
+        <p>Combat Skills</p>
+        <hr className="golden" />
+      </SkillSplitDiv>
+      <SkillProgressBar
+        skillName={'First'}
+        bgColor={colors.cardinal}
+        level={skill?.first?.level || 0}
+        skillPoints={skill?.first?.skillPoints || 0}
+        skillPointsToNextLevel={skill?.first?.skillPointsToNextLevel || 0}
+        texturePath={'gloves/leather-gloves.png'}
+      />
+      <SkillProgressBar
+        skillName={'Club'}
+        bgColor={colors.cardinal}
+        level={skill?.club?.level || 0}
+        skillPoints={skill?.club?.skillPoints || 0}
+        skillPointsToNextLevel={skill?.club?.skillPointsToNextLevel || 0}
+        texturePath={'maces/club.png'}
+      />
+      <SkillProgressBar
+        skillName={'Sword'}
+        bgColor={colors.cardinal}
+        level={skill?.sword?.level || 0}
+        skillPoints={skill?.sword?.skillPoints || 0}
+        skillPointsToNextLevel={skill?.sword?.skillPointsToNextLevel || 0}
+        texturePath={'swords/double-edged-sword.png'}
+      />
+      <SkillProgressBar
+        skillName={'Axe'}
+        bgColor={colors.cardinal}
+        level={skill?.axe?.level || 0}
+        skillPoints={skill?.axe?.skillPoints || 0}
+        skillPointsToNextLevel={skill?.axe?.skillPointsToNextLevel || 0}
+        texturePath={'axes/double-axe.png'}
+      />
+      <SkillProgressBar
+        skillName={'Distance'}
+        bgColor={colors.cardinal}
+        level={skill?.distance?.level || 0}
+        skillPoints={skill?.distance?.skillPoints || 0}
+        skillPointsToNextLevel={skill?.distance?.skillPointsToNextLevel || 0}
+        texturePath={'bows/horse-bow.png'}
+      />
+      <SkillProgressBar
+        skillName={'Shielding'}
+        bgColor={colors.cardinal}
+        level={skill?.shielding?.level || 0}
+        skillPoints={skill?.shielding?.skillPoints || 0}
+        skillPointsToNextLevel={skill?.shielding?.skillPointsToNextLevel || 0}
+        texturePath={'shields/studded-shield.png'}
+      />
+      <SkillSplitDiv>
+        <p>Crafting Skills</p>
+        <hr className="golden" />
+      </SkillSplitDiv>
+      <SkillProgressBar
+        skillName={'Fishing'}
+        bgColor={colors.blue}
+        level={skill?.fishing?.level || 0}
+        skillPoints={skill?.fishing?.skillPoints || 0}
+        skillPointsToNextLevel={skill?.fishing?.skillPointsToNextLevel || 0}
+        texturePath={'foods/fish.png'}
+      />
+      <SkillProgressBar
+        skillName={'Mining'}
+        bgColor={colors.blue}
+        level={skill?.mining?.level || 0}
+        skillPoints={skill?.mining?.skillPoints || 0}
+        skillPointsToNextLevel={skill?.mining?.skillPointsToNextLevel || 0}
+        texturePath={'crafting-resources/iron-ingot.png'}
+      />
+      <SkillProgressBar
+        skillName={'Lumberjacking'}
+        bgColor={colors.blue}
+        level={skill?.lumberjacking?.level || 0}
+        skillPoints={skill?.lumberjacking?.skillPoints || 0}
+        skillPointsToNextLevel={
+          skill?.lumberjacking?.skillPointsToNextLevel || 0
+        }
+        texturePath={'crafting-resources/greater-wood-log.png'}
+      />
+      <SkillProgressBar
+        skillName={'Cooking'}
+        bgColor={colors.blue}
+        level={skill?.cooking?.level || 0}
+        skillPoints={skill?.cooking?.skillPoints || 0}
+        skillPointsToNextLevel={skill?.cooking?.skillPointsToNextLevel || 0}
+        texturePath={'foods/chickens-meat.png'}
+      />
+      <SkillProgressBar
+        skillName={'Alchemy'}
+        bgColor={colors.blue}
+        level={skill?.alchemy?.level || 0}
+        skillPoints={skill?.alchemy?.skillPoints || 0}
+        skillPointsToNextLevel={skill?.alchemy?.skillPointsToNextLevel || 0}
+        texturePath={'potions/greater-mana-potion.png'}
+      />
+
+      <SkillSplitDiv>
+        <p>Basic Attributes</p>
+        <hr className="golden" />
+      </SkillSplitDiv>
+      <SkillProgressBar
+        skillName={'Stamina'}
+        bgColor={colors.darkYellow}
+        level={skill?.stamina?.level || 0}
+        skillPoints={skill?.stamina?.skillPoints || 0}
+        skillPointsToNextLevel={skill?.stamina?.skillPointsToNextLevel || 0}
+        texturePath={'spell-icons/regenerate.png'}
+      />
+      <SkillProgressBar
+        skillName={'Magic'}
+        bgColor={colors.purple}
+        level={skill?.magic?.level || 0}
+        skillPoints={skill?.magic?.skillPoints || 0}
+        skillPointsToNextLevel={skill?.magic?.skillPointsToNextLevel || 0}
+        texturePath={'spell-icons/fireball.png'}
+      />
+      <SkillProgressBar
+        skillName={'Magic Resistance'}
+        bgColor={colors.navyBlue}
+        level={skill?.magicResistance?.level || 0}
+        skillPoints={skill?.magicResistance?.skillPoints || 0}
+        skillPointsToNextLevel={
+          skill?.magicResistance?.skillPointsToNextLevel || 0
+        }
+        texturePath={'spell-icons/freeze.png'}
+      />
+      <SkillProgressBar
+        skillName={'Strength'}
+        bgColor={colors.cardinal}
+        level={skill?.strength?.level || 0}
+        skillPoints={skill?.strength?.skillPoints || 0}
+        skillPointsToNextLevel={skill?.strength?.skillPointsToNextLevel || 0}
+        texturePath={'spell-icons/enchanted-blow.png'}
+      />
+      <SkillProgressBar
+        skillName={'Resistance'}
+        bgColor={colors.raisinBlack}
+        level={skill?.resistance?.level || 0}
+        skillPoints={skill?.resistance?.skillPoints || 0}
+        skillPointsToNextLevel={skill?.resistance?.skillPointsToNextLevel || 0}
+        texturePath={'spell-icons/magic-shield.png'}
+      />
+      <SkillProgressBar
+        skillName={'Dexterity'}
+        bgColor={colors.blue}
+        level={skill?.dexterity?.level || 0}
+        skillPoints={skill?.dexterity?.skillPoints || 0}
+        skillPointsToNextLevel={skill?.dexterity?.skillPointsToNextLevel || 0}
+        texturePath={'spell-icons/haste.png'}
+      />
+
+      {/* <SkillSplitDiv>
+        <p>Magic Skills</p>
+        <hr className="golden" />
+      </SkillSplitDiv>
+      <SkillProgressBar
+        skillName={'Ice'}
+        bgColor={'red'}
+        level={skill?.ice?.level || 0}
+        skillPoints={skill?.ice?.skillPoints || 0}
+        skillPointsToNextLevel={skill?.ice?.skillPointsToNextLevel || 0}
+        texturePath={'spell-icons/freeze.png'}
+      />
+      <SkillProgressBar
+        skillName={'Earth'}
+        bgColor={'red'}
+        level={skill?.earth?.level || 0}
+        skillPoints={skill?.earth?.skillPoints || 0}
+        skillPointsToNextLevel={skill?.earth?.skillPointsToNextLevel || 0}
+        texturePath={'spell-icons/earth-barrier.png'}
+      />
+      <SkillProgressBar
+        skillName={'Air'}
+        bgColor={'red'}
+        level={skill?.air?.level || 0}
+        skillPoints={skill?.air?.skillPoints || 0}
+        skillPointsToNextLevel={skill?.air?.skillPointsToNextLevel || 0}
+        texturePath={'spell-icons/poison-tornado.png'}
+      />
+      <SkillProgressBar
+        skillName={'Water'}
+        bgColor={'red'}
+        level={skill?.water?.level || 0}
+        skillPoints={skill?.water?.skillPoints || 0}
+        skillPointsToNextLevel={skill?.water?.skillPointsToNextLevel || 0}
+        texturePath={'spell-icons/tsunami.png'}
+      /> */}
+    </SkillsDraggableContainer>
+  );
+};
+
+const SkillsDraggableContainer = styled(DraggableContainer)`
+  border: 1px solid black;
+  width: 400px;
+  height: 800px;
+  overflow-y: scroll;
+  .DraggableContainer__TitleContainer-sc-184mpyl-2 {
+    width: auto;
+    height: auto;
+  }
+`;
+
+const SkillSplitDiv = styled.div`
+  width: 100%;
+  font-size: 11px;
+  margin-top: 10px;
+  hr {
+    margin: 0px;
+    padding: 0px;
+  }
+  p {
+    margin-bottom: 0px;
+  }
+`;

package/src/components/store/UI.store.ts

@@ -0,0 +1,192 @@
+import {
+  IItem,
+  IPayloadProps,
+  ItemSocketEvents,
+  ItemSocketEventsDisplayLabels,
+  ItemType,
+} from '@rpg-engine/shared';
+import { makeAutoObservable, toJS } from 'mobx';
+import {
+  handleContextMenuList,
+  handleEquipmentContextMenuList,
+  IContextMenuItem,
+} from '../Item/Inventory/itemContainerHelper';
+import { SlotContainerType } from '../Item/Inventory/ItemSlot';
+
+interface IContextMenu {
+  visible: boolean;
+  posX: number;
+  posY: number;
+  slotItem: IItem | null;
+  slotIndex?: number | null;
+  contextActions: IContextMenuItem[];
+}
+
+interface IHoverDetail {
+  visible: boolean;
+  posX: number;
+  posY: number;
+  item: IItem | null;
+}
+
+interface ISetContextMenu extends Omit<IContextMenu, 'contextActions'> {}
+
+const initialState = {
+  visible: false,
+  posX: 0,
+  posY: 0,
+  contextActions: [],
+  slotItem: null,
+};
+
+const initialHoverState = {
+  visible: false,
+  posX: 0,
+  posY: 0,
+  item: null,
+};
+class UIStore {
+  public contextMenu: IContextMenu | null = initialState;
+
+  public onHoverDetail: IHoverDetail | null = initialHoverState;
+
+  constructor() {
+    makeAutoObservable(this);
+  }
+
+  public setContextMenu(contextMenu: ISetContextMenu, itemType: ItemType) {
+    const contextActions = handleContextMenuList(itemType);
+
+    this.contextMenu = {
+      ...contextMenu,
+      contextActions,
+    };
+
+    console.log(toJS(this.contextMenu));
+  }
+
+  public setEquipContextMenu(
+    contextMenu: ISetContextMenu,
+    itemType: ItemType,
+    isItemContainer: boolean | undefined
+  ) {
+    const contextActions = handleEquipmentContextMenuList(itemType);
+    if (isItemContainer)
+      contextActions.push({
+        id: ItemSocketEvents.ContainerOpen,
+        text: ItemSocketEventsDisplayLabels[ItemSocketEvents.ContainerOpen],
+      });
+    this.contextMenu = {
+      ...contextMenu,
+      contextActions,
+    };
+
+    console.log(toJS(this.contextMenu));
+  }
+
+  public clearContextMenu() {
+    this.contextMenu = initialState;
+  }
+
+  public setItemHoverDetail(hoverDetail: IHoverDetail) {
+    if (hoverDetail?.item === null) this.clearItemHoverDetail();
+
+    this.onHoverDetail = {
+      ...hoverDetail,
+    };
+  }
+
+  public clearItemHoverDetail() {
+    this.onHoverDetail = initialHoverState;
+  }
+
+  public handleOnItemClick = (
+    item: IItem,
+    posX: number,
+    posY: number,
+    slotContainerType: SlotContainerType | null
+  ): void => {
+    if (
+      !item ||
+      JSON.stringify(this.contextMenu?.slotItem) === JSON.stringify(item)
+    ) {
+      this.clearContextMenu();
+      this.clearItemHoverDetail();
+      return;
+    }
+    switch (slotContainerType) {
+      case SlotContainerType.EQUIPMENT_SET:
+        this.setEquipContextMenu(
+          {
+            visible: true,
+            posX,
+            posY,
+            slotItem: item,
+          },
+          item.type,
+          item.isItemContainer
+        );
+        break;
+      case SlotContainerType.INVENTORY:
+        this.setContextMenu(
+          {
+            visible: true,
+            posX,
+            posY,
+            slotItem: item,
+          },
+          item.type
+        );
+        break;
+      default:
+        this.setContextMenu(
+          {
+            visible: true,
+            posX,
+            posY,
+            slotItem: item,
+          },
+          item.type
+        );
+    }
+
+    this.clearItemHoverDetail();
+  };
+
+  public handleOnMouseHover = (
+    event: any,
+    slotIndex: number,
+    item: IItem | null,
+    posX: number,
+    posY: number,
+    onMouseOver: any
+  ): void => {
+    if (item) {
+      this.setItemHoverDetail({
+        visible: true,
+        posX,
+        posY,
+        item: item,
+      });
+    }
+    if (onMouseOver) {
+      onMouseOver(event, slotIndex, item);
+    }
+  };
+
+  public onSelected(
+    selectedActionId: ItemSocketEvents | string,
+    onActionSelected: any
+  ) {
+    let payloadData: IPayloadProps = {
+      actionType: selectedActionId,
+      item: this.contextMenu?.slotItem!,
+    };
+    if (onActionSelected) {
+      onActionSelected(payloadData);
+    }
+    this.clearContextMenu!();
+  }
+}
+
+export const uiStore = new UIStore();