@rpg-engine/long-bow 0.2.55 → 0.2.57

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rpg-engine/long-bow",
-  "version": "0.2.55",
+  "version": "0.2.57",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",

package/src/components/Dropdown.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from 'react';
+import styled from 'styled-components';
 import { v4 as uuidv4 } from 'uuid';
-import { _RPGUI } from './RPGUIRoot';
 
 export interface IOptionsProps {
   id: number;
@@ -22,16 +22,17 @@ export const Dropdown: React.FC<IDropdownProps> = ({
   const dropdownId = uuidv4();
 
   const [selectedValue, setSelectedValue] = useState<string>('');
+  const [selectedOption, setSelectedOption] = useState<string>('');
+  const [opened, setOpened] = useState<boolean>(false);
 
   useEffect(() => {
-    const element = document.getElementById(`rpgui-dropdown-${dropdownId}`);
-    const dropdownValue = _RPGUI.get_value(element);
-    setSelectedValue(dropdownValue);
+    const firstOption = options[0];
 
-    element?.addEventListener('change', (event: any) => {
-      setSelectedValue(event?.target.value);
-    });
-  }, []);
+    if (firstOption) {
+      setSelectedValue(firstOption.value);
+      setSelectedOption(firstOption.option);
+    }
+  }, [options]);
 
   useEffect(() => {
     if (selectedValue) {
@@ -40,18 +41,50 @@ export const Dropdown: React.FC<IDropdownProps> = ({
   }, [selectedValue]);
 
   return (
-    <select
-      id={`rpgui-dropdown-${dropdownId}`}
-      style={{ width: width }}
-      className="rpgui-dropdown"
-    >
-      {options.map(option => {
-        return (
-          <option key={option.id} value={option.value}>
-            {option.option}
-          </option>
-        );
-      })}
-    </select>
+    <Container onMouseLeave={() => setOpened(false)} width={width}>
+      <DropdownSelect
+        id={`dropdown-${dropdownId}`}
+        className="rpgui-dropdown-imp rpgui-dropdown-imp-header"
+        onClick={() => setOpened(prev => !prev)}
+      >
+        <label>▼</label> {selectedOption}
+      </DropdownSelect>
+
+      <DropdownOptions className="rpgui-dropdown-imp" opened={opened}>
+        {options.map(option => {
+          return (
+            <li
+              key={option.id}
+              onClick={() => {
+                setSelectedValue(option.value);
+                setSelectedOption(option.option);
+                setOpened(false);
+              }}
+            >
+              {option.option}
+            </li>
+          );
+        })}
+      </DropdownOptions>
+    </Container>
   );
 };
+
+const Container = styled.div<{ width: string | undefined }>`
+  position: relative;
+  width: ${props => props.width || '100%'};
+`;
+
+const DropdownSelect = styled.p`
+  width: 100%;
+  box-sizing: border-box;
+`;
+
+const DropdownOptions = styled.ul<{
+  opened: boolean;
+}>`
+  position: absolute;
+  width: 100%;
+  display: ${props => (props.opened ? 'block' : 'none')};
+  box-sizing: border-box;
+`;

package/src/components/SkillProgressBar.tsx

@@ -22,14 +22,17 @@ export const SkillProgressBar: React.FC<ISkillProgressBarProps> = ({
   skillName,
   level,
   skillPoints,
+  skillPointsToNextLevel,
   texturePath,
   showSkillPoints = true,
   atlasIMG,
   atlasJSON,
 }) => {
-  const spForNextLevel = getSPForLevel(level + 1);
-
-  const ratio = (skillPoints / spForNextLevel) * 100;
+  if (!skillPointsToNextLevel) {
+    skillPointsToNextLevel = getSPForLevel(level + 1);
+  }
+  const skillPointsToLevelUp = skillPointsToNextLevel + skillPoints;
+  const ratio = (skillPoints / skillPointsToNextLevel) * 100;
 
   return (
     <>
@@ -64,7 +67,7 @@ export const SkillProgressBar: React.FC<ISkillProgressBarProps> = ({
       {showSkillPoints && (
         <SkillDisplayContainer>
           <SkillPointsDisplay>
-            {skillPoints}/{spForNextLevel}
+            {skillPoints}/{skillPointsToLevelUp}
           </SkillPointsDisplay>
         </SkillDisplayContainer>
       )}

package/src/components/SkillsContainer.tsx

@@ -42,7 +42,7 @@ const skillProps = {
     values: {
       fishing: 'foods/fish.png',
       mining: 'crafting-resources/iron-ingot.png',
-      lumberjacking: 'crafting-resources/greater-wood-log.png',
+      lumberjacking: 'crafting-resources/greater-wooden-log.png',
       cooking: 'foods/chickens-meat.png',
       alchemy: 'potions/greater-mana-potion.png',
     },