@rpg-engine/long-bow 0.8.87 → 0.8.89

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rpg-engine/long-bow",
-  "version": "0.8.87",
+  "version": "0.8.89",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
@@ -84,7 +84,7 @@
   "dependencies": {
     "@capacitor/core": "^6.1.0",
     "@rollup/plugin-image": "^2.1.1",
-    "@rpg-engine/shared": "^0.10.35",
+    "@rpg-engine/shared": "^0.10.38",
     "dayjs": "^1.11.2",
     "font-awesome": "^4.7.0",
     "fs-extra": "^10.1.0",

package/src/components/DraggableContainer.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef } from 'react';
+import React, { useCallback, useEffect, useRef } from 'react';
 import Draggable from 'react-draggable';
 import styled, { css } from 'styled-components';
 import { uiFonts } from '../constants/uiFonts';
@@ -62,21 +62,23 @@ export const DraggableContainer: React.FC<IDraggableContainerProps> = ({
 
   useOutsideClick(draggableRef, 'item-container');
 
-  useEffect(() => {
-    document.addEventListener('clickOutside', event => {
+  const handleClickOutside = useCallback(
+    (event: Event) => {
       const e = event as CustomEvent;
-
       if (e.detail.id === 'item-container') {
-        if (onOutsideClick) {
-          onOutsideClick();
-        }
+        onOutsideClick?.();
       }
-    });
+    },
+    [onOutsideClick]
+  );
+
+  useEffect(() => {
+    document.addEventListener('clickOutside', handleClickOutside);
 
     return () => {
-      document.removeEventListener('clickOutside', _e => {});
+      document.removeEventListener('clickOutside', handleClickOutside);
     };
-  }, []);
+  }, [handleClickOutside]);
 
   return (
     <Draggable

package/src/components/ProgressBar.tsx

@@ -23,9 +23,6 @@ export const ProgressBar: React.FC<IBarProps> = ({
   style,
   mobileScale,
 }) => {
-  value = Math.round(value);
-  max = Math.round(max);
-
   const calculatePercentageValue = function(max: number, value: number) {
     if (value > max) {
       value = max;
@@ -34,6 +31,10 @@ export const ProgressBar: React.FC<IBarProps> = ({
     return Math.min(99.99, percentage);
   };
 
+  // Round only for display, not for calculation
+  const displayValue = Math.round(value);
+  const displayMax = Math.round(max);
+
   return (
     <Container
       className="rpgui-progress"
@@ -47,7 +48,7 @@ export const ProgressBar: React.FC<IBarProps> = ({
       {displayText && (
         <TextOverlay>
           <ProgressBarText>
-            {value}/{max}
+            {displayValue}/{displayMax}
           </ProgressBarText>
         </TextOverlay>
       )}

package/src/components/RelativeListMenu.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef } from 'react';
+import React, { useCallback, useEffect, useRef } from 'react';
 import styled from 'styled-components';
 import { useOutsideClick } from '../hooks/useOutsideAlerter';
 import ModalPortal from './Abstractions/ModalPortal';
@@ -27,21 +27,23 @@ export const RelativeListMenu: React.FC<IRelativeMenuProps> = ({
 
   useOutsideClick(ref, 'relative-context-menu');
 
-  useEffect(() => {
-    document.addEventListener('clickOutside', event => {
+  const handleClickOutside = useCallback(
+    (event: Event) => {
       const e = event as CustomEvent;
-
       if (e.detail.id === 'relative-context-menu') {
-        if (onOutsideClick) {
-          onOutsideClick();
-        }
+        onOutsideClick?.();
       }
-    });
+    },
+    [onOutsideClick]
+  );
+
+  useEffect(() => {
+    document.addEventListener('clickOutside', handleClickOutside);
 
     return () => {
-      document.removeEventListener('clickOutside', _e => {});
+      document.removeEventListener('clickOutside', handleClickOutside);
     };
-  }, []);
+  }, [handleClickOutside]);
 
   return (
     <ModalPortal>

package/src/components/Shortcuts/Shortcuts.tsx

@@ -41,6 +41,9 @@ export const Shortcuts: React.FC<ShortcutsProps> = ({
     onShortcutCast
   );
 
+  // Use a Set to track active timeouts - automatically cleaned when they complete
+  const activeTimeouts = useRef<Set<ReturnType<typeof setTimeout>>>(new Set());
+
   const handleKeyDown = useCallback(
     (e: KeyboardEvent) => {
       if (isBlockedCastingByKeyboard) return;
@@ -51,24 +54,22 @@ export const Shortcuts: React.FC<ShortcutsProps> = ({
         shortcutsRefs.current[shortcutIndex]?.classList.add('active');
         const timeoutId = setTimeout(() => {
           shortcutsRefs.current[shortcutIndex]?.classList.remove('active');
+          activeTimeouts.current.delete(timeoutId);
         }, 150);
-        // Store timeoutId for later cleanup
-        timeoutIds.current.push((timeoutId as unknown) as number);
+        activeTimeouts.current.add(timeoutId);
       }
     },
     [isBlockedCastingByKeyboard, handleShortcutCast]
   );
 
-  // Initialize a ref to store the timeout ids
-  const timeoutIds = useRef<number[]>([]);
-
   useEffect(() => {
     window.addEventListener('keydown', handleKeyDown);
 
     return () => {
       window.removeEventListener('keydown', handleKeyDown);
-      // Clear all timeouts when the component unmounts
-      timeoutIds.current.forEach(id => clearTimeout(id));
+      // Clear all active timeouts when the component unmounts
+      activeTimeouts.current.forEach(id => clearTimeout(id));
+      activeTimeouts.current.clear();
     };
   }, [handleKeyDown]);
 

package/src/components/Shortcuts/useShortcutCooldown.ts

@@ -1,25 +1,46 @@
-import { useEffect, useRef, useState } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
 
 export const useShortcutCooldown = (
   onShortcutCast: (index: number) => void
 ) => {
   const [shortcutCooldown, setShortcutCooldown] = useState(0);
-  const cooldownTimeout = useRef<NodeJS.Timeout | null>(null);
+  const intervalRef = useRef<ReturnType<typeof setInterval> | null>(null);
 
-  const handleShortcutCast = (index: number) => {
-    if (shortcutCooldown <= 0) setShortcutCooldown(1.5);
-    onShortcutCast(index);
-  };
+  const clearCooldownInterval = useCallback(() => {
+    if (intervalRef.current) {
+      clearInterval(intervalRef.current);
+      intervalRef.current = null;
+    }
+  }, []);
 
-  useEffect(() => {
-    if (cooldownTimeout.current) clearTimeout(cooldownTimeout.current);
+  const handleShortcutCast = useCallback(
+    (index: number) => {
+      if (shortcutCooldown <= 0) {
+        setShortcutCooldown(1.5);
+      }
+      onShortcutCast(index);
+    },
+    [shortcutCooldown, onShortcutCast]
+  );
 
-    if (shortcutCooldown > 0) {
-      cooldownTimeout.current = setTimeout(() => {
-        setShortcutCooldown(shortcutCooldown - 0.1);
+  useEffect(() => {
+    if (shortcutCooldown > 0 && !intervalRef.current) {
+      intervalRef.current = setInterval(() => {
+        setShortcutCooldown(prev => {
+          const next = prev - 0.1;
+          if (next <= 0) {
+            clearCooldownInterval();
+            return 0;
+          }
+          return next;
+        });
       }, 100);
     }
-  }, [shortcutCooldown]);
+
+    return () => {
+      clearCooldownInterval();
+    };
+  }, [shortcutCooldown > 0, clearCooldownInterval]);
 
   return { shortcutCooldown, handleShortcutCast };
 };