@rpg-engine/long-bow 0.8.190 → 0.8.192

package/package.json

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

package/src/components/SkillProgressBar.tsx

@@ -27,6 +27,7 @@ export interface ISkillProgressBarProps {
   atlasJSON: any;
   atlasIMG: any;
   buffAndDebuff?: number;
+  onClick?: () => void;
 }
 
 export const SkillProgressBar: React.FC<ISkillProgressBarProps> = ({
@@ -43,6 +44,7 @@ export const SkillProgressBar: React.FC<ISkillProgressBarProps> = ({
   atlasJSON,
 
   buffAndDebuff,
+  onClick,
 }) => {
   // Use CharacterClass.None as default if skillKey is provided but characterClass is not
   const effectiveClass = characterClass ?? CharacterClass.None;
@@ -107,7 +109,7 @@ export const SkillProgressBar: React.FC<ISkillProgressBarProps> = ({
   };
 
   return (
-    <>
+    <ClickableRow onClick={onClick} $isClickable={!!onClick}>
       <ProgressTitle>
         {buffAndDebuff !== undefined && (
           <>
@@ -182,7 +184,7 @@ export const SkillProgressBar: React.FC<ISkillProgressBarProps> = ({
           <SkillPointsDisplay>{progress.toFixed(2)}%</SkillPointsDisplay>
         </SkillDisplayContainer>
       )}
-    </>
+    </ClickableRow>
   );
 };
 
@@ -263,3 +265,20 @@ const TitleNameContainer = styled.div`
   display: flex;
   justify-content: space-between;
 `;
+
+const ClickableRow = styled.div<{ $isClickable: boolean }>`
+  cursor: ${({ $isClickable }) => ($isClickable ? 'pointer' : 'default')};
+  border-radius: 4px;
+  transition: background-color 0.15s ease;
+
+  ${({ $isClickable }) =>
+    $isClickable &&
+    `
+    &:hover {
+      background-color: rgba(255, 255, 255, 0.05);
+    }
+    &:active {
+      background-color: rgba(255, 255, 255, 0.1);
+    }
+  `}
+`;

package/src/components/SkillsContainer.tsx

@@ -19,6 +19,7 @@ export interface ISkillContainerProps {
   atlasJSON: any;
   atlasIMG: any;
   scale?: number;
+  onSkillClick?: (skillKey: string) => void;
 }
 
 const skillProps = {
@@ -93,6 +94,7 @@ export const SkillsContainer: React.FC<ISkillContainerProps> = ({
   atlasIMG,
   atlasJSON,
   scale,
+  onSkillClick,
 }) => {
   const onRenderSkillCategory = (
     category: 'attributes' | 'combat' | 'crafting'
@@ -135,6 +137,7 @@ export const SkillsContainer: React.FC<ISkillContainerProps> = ({
           atlasIMG={atlasIMG}
           atlasJSON={atlasJSON}
           buffAndDebuff={skillDetails.buffAndDebuff}
+          onClick={onSkillClick ? () => onSkillClick(key) : undefined}
         />
       );
     }
@@ -168,6 +171,7 @@ export const SkillsContainer: React.FC<ISkillContainerProps> = ({
             texturePath={'swords/broad-sword.png'}
             atlasIMG={atlasIMG}
             atlasJSON={atlasJSON}
+            onClick={onSkillClick ? () => onSkillClick('level') : undefined}
           />
 
           <p>Combat Skills</p>

package/src/index.tsx

@@ -7,6 +7,7 @@ export * from './components/Chat/Chat';
 export * from './components/Chatdeprecated/ChatDeprecated';
 export * from './components/ChatRevamp/ChatRevamp';
 export * from './components/CheckButton';
+export * from './components/ConfirmModal';
 export * from './components/CheckItem';
 export * from './components/CircularController/CircularController';
 export * from './components/CraftBook/CraftBook';