@rpg-engine/long-bow 0.3.96 → 0.3.97

package/package.json

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

package/src/components/CircularController/CircularController.tsx

@@ -11,6 +11,7 @@ import styled from 'styled-components';
 import { uiColors } from '../../constants/uiColors';
 import { SpriteFromAtlas } from '../shared/SpriteFromAtlas';
 import { SingleShortcut } from '../Shortcuts/SingleShortcut';
+import { useShortcutCooldown } from '../Shortcuts/useShortcutCooldown';
 
 export type CircularControllerProps = {
   onActionClick: () => void;
@@ -21,6 +22,7 @@ export type CircularControllerProps = {
   inventory?: IItemContainer | null;
   atlasIMG: any;
   atlasJSON: any;
+  spellCooldowns?: Record<string, number>;
 };
 
 export const CircularController: React.FC<CircularControllerProps> = ({
@@ -32,7 +34,12 @@ export const CircularController: React.FC<CircularControllerProps> = ({
   inventory,
   atlasIMG,
   atlasJSON,
+  spellCooldowns,
 }) => {
+  const { handleShortcutCast, shortcutCooldown } = useShortcutCooldown(
+    onShortcutClick
+  );
+
   const onTouchStart = (e: React.TouchEvent<HTMLButtonElement>) => {
     const target = e.target as HTMLButtonElement;
     target?.classList.add('active');
@@ -50,6 +57,10 @@ export const CircularController: React.FC<CircularControllerProps> = ({
   };
 
   const renderShortcut = (i: number) => {
+    const buildClassName = (classBase: string, isOnCooldown: boolean) => {
+      return `${classBase} ${isOnCooldown ? 'onCooldown' : ''}`;
+    };
+
     let variant = '';
 
     if (i === 0) variant = 'top';
@@ -57,9 +68,11 @@ export const CircularController: React.FC<CircularControllerProps> = ({
 
     const onShortcutClickBinded =
       shortcuts[i]?.type !== ShortcutType.None
-        ? onShortcutClick.bind(null, i)
+        ? handleShortcutCast.bind(null, i)
         : () => {};
 
+    const isOnShortcutCooldown = shortcutCooldown > 0;
+
     if (shortcuts[i]?.type === ShortcutType.Item) {
       const payload = shortcuts[i]?.payload as IItem | undefined;
 
@@ -88,6 +101,9 @@ export const CircularController: React.FC<CircularControllerProps> = ({
           disabled={false}
           className={variant}
         >
+          {isOnShortcutCooldown && (
+            <span className="cooldown">{shortcutCooldown.toFixed(1)}</span>
+          )}
           {payload && (
             <SpriteFromAtlas
               atlasIMG={atlasIMG}
@@ -108,13 +124,23 @@ export const CircularController: React.FC<CircularControllerProps> = ({
               containerStyle={{ pointerEvents: 'none' }}
             />
           )}
-          <span className="qty">{totalQty}</span>
+          <span className={buildClassName('qty', isOnShortcutCooldown)}>
+            {totalQty}
+          </span>
         </StyledShortcut>
       );
     }
 
     const payload = shortcuts[i]?.payload as IRawSpell | undefined;
 
+    const spellCooldown = !payload
+      ? 0
+      : spellCooldowns?.[payload.magicWords.replaceAll(' ', '_')] ??
+        shortcutCooldown;
+    const cooldown =
+      spellCooldown > shortcutCooldown ? spellCooldown : shortcutCooldown;
+    const isOnCooldown = cooldown > 0 && !!payload;
+
     return (
       <StyledShortcut
         key={i}
@@ -123,7 +149,14 @@ export const CircularController: React.FC<CircularControllerProps> = ({
         disabled={mana < (payload?.manaCost ?? 0)}
         className={variant}
       >
-        <span className="mana">{payload && payload.manaCost}</span>
+        {isOnCooldown && (
+          <span className="cooldown">
+            {cooldown.toFixed(cooldown < 10 ? 1 : 0)}
+          </span>
+        )}
+        <span className={buildClassName('mana', isOnCooldown)}>
+          {payload && payload.manaCost}
+        </span>
         <span className="magicWords">
           {payload?.magicWords.split(' ').map(word => word[0])}
         </span>

package/src/components/Item/Cards/ItemInfo.tsx

@@ -142,8 +142,10 @@ export const ItemInfo: React.FC<IItemInfoProps> = ({
 
       {item.minRequirements && (
         <LevelRequirement>
-          <div>Level: {item.minRequirements.level}</div>
+          <div className="title">Requirements:</div>
+          <div>- Level: {item.minRequirements.level}</div>
           <div>
+            -{' '}
             {item.minRequirements.skill.name[0].toUpperCase() +
               item.minRequirements.skill.name.slice(1)}
             : {item.minRequirements.skill.level}
@@ -222,6 +224,14 @@ const LevelRequirement = styled.div`
   margin-top: 0.2rem;
   margin-bottom: 1rem;
   color: ${uiColors.orange};
+
+  .title {
+    margin-bottom: 4px;
+  }
+
+  div {
+    margin-bottom: 2px;
+  }
 `;
 
 const Statistic = styled.div<{ $isSpecial?: boolean }>`

package/src/components/Shortcuts/Shortcuts.tsx

@@ -12,6 +12,7 @@ import { uiColors } from '../../constants/uiColors';
 import { countItemFromInventory } from '../../libs/itemCounter';
 import { SpriteFromAtlas } from '../shared/SpriteFromAtlas';
 import { SingleShortcut } from './SingleShortcut';
+import { useShortcutCooldown } from './useShortcutCooldown';
 
 export type ShortcutsProps = {
   shortcuts: IShortcut[];
@@ -21,6 +22,7 @@ export type ShortcutsProps = {
   inventory?: IItemContainer | null;
   atlasJSON: any;
   atlasIMG: any;
+  spellCooldowns?: Record<string, number>;
 };
 
 export const Shortcuts: React.FC<ShortcutsProps> = ({
@@ -31,16 +33,21 @@ export const Shortcuts: React.FC<ShortcutsProps> = ({
   atlasJSON,
   atlasIMG,
   inventory,
+  spellCooldowns,
 }) => {
   const shortcutsRefs = useRef<HTMLButtonElement[]>([]);
 
+  const { handleShortcutCast, shortcutCooldown } = useShortcutCooldown(
+    onShortcutCast
+  );
+
   useEffect(() => {
     const handleKeyDown = (e: KeyboardEvent) => {
       if (isBlockedCastingByKeyboard) return;
 
       const shortcutIndex = Number(e.key) - 1;
       if (shortcutIndex >= 0 && shortcutIndex <= 5) {
-        onShortcutCast(shortcutIndex);
+        handleShortcutCast(shortcutIndex);
         shortcutsRefs.current[shortcutIndex]?.classList.add('active');
         setTimeout(() => {
           shortcutsRefs.current[shortcutIndex]?.classList.remove('active');
@@ -53,11 +60,17 @@ export const Shortcuts: React.FC<ShortcutsProps> = ({
     return () => {
       window.removeEventListener('keydown', handleKeyDown);
     };
-  }, [shortcuts, isBlockedCastingByKeyboard]);
+  }, [shortcuts, isBlockedCastingByKeyboard, shortcutCooldown]);
 
   return (
     <List>
       {Array.from({ length: 6 }).map((_, i) => {
+        const buildClassName = (classBase: string, isOnCooldown: boolean) => {
+          return `${classBase} ${isOnCooldown ? 'onCooldown' : ''}`;
+        };
+
+        const isOnShortcutCooldown = shortcutCooldown > 0;
+
         if (shortcuts[i]?.type === ShortcutType.Item) {
           const payload = shortcuts[i]?.payload as IItem | undefined;
 
@@ -81,12 +94,15 @@ export const Shortcuts: React.FC<ShortcutsProps> = ({
           return (
             <StyledShortcut
               key={i}
-              onPointerDown={onShortcutCast.bind(null, i)}
+              onPointerDown={handleShortcutCast.bind(null, i)}
               disabled={false}
               ref={el => {
                 if (el) shortcutsRefs.current[i] = el;
               }}
             >
+              {isOnShortcutCooldown && (
+                <span className="cooldown">{shortcutCooldown.toFixed(1)}</span>
+              )}
               {payload && (
                 <SpriteFromAtlas
                   atlasIMG={atlasIMG}
@@ -104,28 +120,51 @@ export const Shortcuts: React.FC<ShortcutsProps> = ({
                   height={32}
                 />
               )}
-              <span className="qty">{totalQty}</span>
-              <span className="keyboard">{i + 1}</span>
+              <span className={buildClassName('qty', isOnShortcutCooldown)}>
+                {totalQty}
+              </span>
+              <span
+                className={buildClassName('keyboard', isOnShortcutCooldown)}
+              >
+                {i + 1}
+              </span>
             </StyledShortcut>
           );
         }
 
         const payload = shortcuts[i]?.payload as IRawSpell | undefined;
 
+        const spellCooldown = !payload
+          ? 0
+          : spellCooldowns?.[payload.magicWords.replaceAll(' ', '_')] ??
+            shortcutCooldown;
+        const cooldown =
+          spellCooldown > shortcutCooldown ? spellCooldown : shortcutCooldown;
+        const isOnCooldown = cooldown > 0 && !!payload;
+
         return (
           <StyledShortcut
             key={i}
-            onPointerDown={onShortcutCast.bind(null, i)}
+            onPointerDown={handleShortcutCast.bind(null, i)}
             disabled={mana < (payload?.manaCost ?? 0)}
             ref={el => {
               if (el) shortcutsRefs.current[i] = el;
             }}
           >
-            <span className="mana">{payload && payload.manaCost}</span>
+            {isOnCooldown && (
+              <span className="cooldown">
+                {cooldown.toFixed(cooldown < 10 ? 1 : 0)}
+              </span>
+            )}
+            <span className={buildClassName('mana', isOnCooldown)}>
+              {payload && payload.manaCost}
+            </span>
             <span className="magicWords">
               {payload?.magicWords.split(' ').map(word => word[0])}
             </span>
-            <span className="keyboard">{i + 1}</span>
+            <span className={buildClassName('keyboard', isOnCooldown)}>
+              {i + 1}
+            </span>
           </StyledShortcut>
         );
       })}

package/src/components/Shortcuts/SingleShortcut.ts

@@ -46,6 +46,26 @@ export const SingleShortcut = styled.button`
     color: ${uiColors.yellow};
   }
 
+  .onCooldown {
+    color: ${uiColors.gray};
+  }
+
+  .cooldown {
+    position: absolute;
+    z-index: 1;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    border-radius: inherit;
+    background-color: rgba(0 0 0 / 60%);
+    font-size: 0.7rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: ${uiColors.darkYellow};
+  }
+
   &:hover,
   &:focus {
     background-color: ${uiColors.darkGray};

package/src/components/Shortcuts/useShortcutCooldown.ts

@@ -0,0 +1,24 @@
+import { 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 handleShortcutCast = (index: number) => {
+    console.log(shortcutCooldown);
+    if (shortcutCooldown <= 0) setShortcutCooldown(1.5);
+    onShortcutCast(index);
+  };
+
+  useEffect(() => {
+    if (cooldownTimeout.current) clearTimeout(cooldownTimeout.current);
+
+    if (shortcutCooldown > 0) {
+      cooldownTimeout.current = setTimeout(() => {
+        setShortcutCooldown(shortcutCooldown - 0.1);
+      }, 100);
+    }
+  }, [shortcutCooldown]);
+
+  return { shortcutCooldown, handleShortcutCast };
+};

package/src/components/Spellbook/Spell.tsx

@@ -10,6 +10,7 @@ interface Props extends IRawSpell {
   onPointerUp?: (spellKey: string) => void;
   isSettingShortcut?: boolean;
   spellKey: string;
+  activeCooldown?: number;
 }
 
 export const Spell: React.FC<Props> = ({
@@ -23,6 +24,7 @@ export const Spell: React.FC<Props> = ({
   onPointerUp,
   isSettingShortcut,
   minMagicLevelRequired,
+  activeCooldown,
 }) => {
   const disabled = isSettingShortcut
     ? charMagicLevel < minMagicLevelRequired
@@ -30,7 +32,7 @@ export const Spell: React.FC<Props> = ({
 
   return (
     <Container
-      disabled={disabled}
+      disabled={disabled || (activeCooldown ?? 0) > 0}
       onPointerUp={onPointerUp?.bind(null, spellKey)}
       isSettingShortcut={isSettingShortcut && !disabled}
       className="spell"
@@ -42,7 +44,14 @@ export const Spell: React.FC<Props> = ({
             : manaCost > charMana && 'No mana'}
         </Overlay>
       )}
-      <SpellImage>{magicWords.split(' ').map(word => word[0])}</SpellImage>
+      <SpellImage>
+        {activeCooldown && activeCooldown > 0 ? (
+          <span className="cooldown">
+            {activeCooldown.toFixed(activeCooldown > 10 ? 0 : 1)}
+          </span>
+        ) : null}
+        {magicWords.split(' ').map(word => word[0])}
+      </SpellImage>
       <Info>
         <Title>
           <span>{name}</span>
@@ -110,6 +119,22 @@ const SpellImage = styled.div`
   justify-content: center;
   align-items: center;
   text-transform: uppercase;
+  position: relative;
+  overflow: hidden;
+
+  .cooldown {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0 0 0 / 20%);
+    color: ${uiColors.darkYellow};
+    font-weight: bold;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
 `;
 
 const Info = styled.span`

package/src/components/Spellbook/Spellbook.tsx

@@ -22,6 +22,7 @@ export interface ISpellbookProps {
   atlasIMG: any;
   atlasJSON: any;
   scale?: number;
+  spellCooldowns?: Record<string, number>;
 }
 
 export const Spellbook: React.FC<ISpellbookProps> = ({
@@ -38,6 +39,7 @@ export const Spellbook: React.FC<ISpellbookProps> = ({
   atlasIMG,
   atlasJSON,
   scale,
+  spellCooldowns,
 }) => {
   const [search, setSearch] = useState('');
   const [settingShortcutIndex, setSettingShortcutIndex] = useState(-1);
@@ -118,6 +120,9 @@ export const Spellbook: React.FC<ISpellbookProps> = ({
                 }
                 spellKey={spell.key}
                 isSettingShortcut={settingShortcutIndex !== -1}
+                activeCooldown={
+                  spellCooldowns?.[spell.magicWords.replaceAll(' ', '_')]
+                }
                 {...spell}
               />
             </Fragment>