@rpg-engine/long-bow 0.1.68 → 0.1.69

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/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/constants/uiColors.ts

@@ -1,3 +1,10 @@
 export const colors = {
   darkGrey: '#3e3e3e',
+  darkYellow: '#FFC857',
+  orange: '#E9724C',
+  cardinal: '#C5283D',
+  raisinBlack: '#191923',
+  navyBlue: '#0E79B2',
+  purple: '#8C3D8C',
+  blue: '#3772FF',
 };