@rpg-engine/long-bow 0.1.66 → 0.1.69

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',
 };

package/src/hooks/useOutsideAlerter.ts

@@ -0,0 +1,25 @@
+import { useEffect } from 'react';
+
+export function useOutsideClick(ref: any, id: string) {
+  useEffect(() => {
+    /**
+     * Alert if clicked on outside of element
+     */
+    function handleClickOutside(event: any) {
+      if (ref.current && !ref.current.contains(event.target)) {
+        const event = new CustomEvent('clickOutside', {
+          detail: {
+            id,
+          },
+        });
+        document.dispatchEvent(event);
+      }
+    }
+    // Bind the event listener
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => {
+      // Unbind the event listener on clean up
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, [ref]);
+}