@rpg-engine/long-bow 0.1.67 → 0.1.70

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