@rpg-engine/long-bow 0.3.95 → 0.3.97

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rpg-engine/long-bow",
-  "version": "0.3.95",
+  "version": "0.3.97",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
@@ -83,7 +83,7 @@
   },
   "dependencies": {
     "@rollup/plugin-image": "^2.1.1",
-    "@rpg-engine/shared": "^0.7.51",
+    "@rpg-engine/shared": "^0.7.82",
     "dayjs": "^1.11.2",
     "font-awesome": "^4.7.0",
     "fs-extra": "^10.1.0",

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

@@ -99,6 +99,16 @@ export const ItemInfo: React.FC<IItemInfoProps> = ({
     return statistics;
   };
 
+  const renderEntityEffects = () => {
+    if (!item.entityEffects || !item.entityEffectChance) return null;
+
+    return item.entityEffects.map((effect, index) => (
+      <Statistic key={index} $isSpecial>
+        {effect[0].toUpperCase() + effect.slice(1)} ({item.entityEffectChance}%)
+      </Statistic>
+    ));
+  };
+
   const renderAvaibleSlots = () => {
     if (!item.allowedEquipSlotType) return null;
 
@@ -130,8 +140,28 @@ export const ItemInfo: React.FC<IItemInfoProps> = ({
         <AllowedSlots>{renderAvaibleSlots()}</AllowedSlots>
       </Header>
 
+      {item.minRequirements && (
+        <LevelRequirement>
+          <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}
+          </div>
+        </LevelRequirement>
+      )}
+
       {renderStatistics()}
-      {item.isTwoHanded && <Statistic>Two handed</Statistic>}
+      {renderEntityEffects()}
+      {item.usableEffectDescription && (
+        <Statistic $isSpecial>{item.usableEffectDescription}</Statistic>
+      )}
+      {item.equippedBuffDescription && (
+        <Statistic $isSpecial>{item.equippedBuffDescription}</Statistic>
+      )}
+      {item.isTwoHanded && <Statistic $isSpecial>Two handed</Statistic>}
 
       <Description>{item.description}</Description>
 
@@ -159,9 +189,9 @@ const Container = styled.div<{ item: IItem }>`
   font-size: ${uiFonts.size.small};
   border: 3px solid ${({ item }) => rarityColor(item) ?? uiColors.lightGray};
   height: max-content;
-  width: 15rem;
+  width: 18rem;
 
-  @media (max-width: 580px) {
+  @media (max-width: 640px) {
     width: 80vw;
   }
 `;
@@ -189,9 +219,25 @@ const Type = styled.div`
   color: ${uiColors.lightGray};
 `;
 
-const Statistic = styled.div`
+const LevelRequirement = styled.div`
+  font-size: ${uiFonts.size.small};
+  margin-top: 0.2rem;
+  margin-bottom: 1rem;
+  color: ${uiColors.orange};
+
+  .title {
+    margin-bottom: 4px;
+  }
+
+  div {
+    margin-bottom: 2px;
+  }
+`;
+
+const Statistic = styled.div<{ $isSpecial?: boolean }>`
   margin-bottom: 0.4rem;
-  width: max-content;
+  width: 100%;
+  color: ${({ $isSpecial }) => ($isSpecial ? uiColors.darkYellow : 'inherit')};
 
   .label {
     display: inline-block;

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

@@ -66,7 +66,13 @@ export const ItemInfoDisplay: React.FC<IItemInfoDisplayProps> = ({
         itemSubTypeCamelCase
       );
 
-      const itemFromEquipment = equipmentSet[slotType] as IItem;
+      const itemSubTypeFromEquipment = Object.values(equipmentSet).find(
+        item => camelCase(item?.subType ?? '') === itemSubTypeCamelCase
+      );
+
+      const itemFromEquipment = itemSubTypeFromEquipment
+        ? itemSubTypeFromEquipment
+        : (equipmentSet[slotType] as IItem);
 
       if (
         itemFromEquipment &&
@@ -109,8 +115,9 @@ const Flex = styled.div<{ $isMobile?: boolean }>`
   display: flex;
   gap: 0.5rem;
   flex-direction: ${({ $isMobile }) => ($isMobile ? 'row-reverse' : 'row')};
+  align-items: center;
 
-  @media (max-width: 580px) {
+  @media (max-width: 640px) {
     flex-direction: column-reverse;
     align-items: center;
   }

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

@@ -113,7 +113,7 @@ const Container = styled.div<{ scale: number }>`
     animation: fadeOut 0.1s forwards;
   }
 
-  @media (max-width: 580px) {
+  @media (max-width: 640px) {
     flex-direction: column;
   }
 `;
@@ -124,7 +124,7 @@ const OptionsContainer = styled.div`
   gap: 0.5rem;
   flex-wrap: wrap;
 
-  @media (max-width: 580px) {
+  @media (max-width: 640px) {
     flex-direction: row;
     justify-content: center;
   }
@@ -143,7 +143,7 @@ const Option = styled.button`
     background-color: #555;
   }
 
-  @media (max-width: 580px) {
+  @media (max-width: 640px) {
     padding: 1rem 0.5rem;
   }
 `;

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>

package/src/constants/uiColors.ts

@@ -15,6 +15,6 @@ export const uiColors = {
   blue: '#597DCE',
   darkBlue: '#30346D',
   brown: '#854C30',
-  lightGreen: '#88ed1c',
+  lightGreen: '#66cd1c',
   brownGreen: '#346524',
 };

package/src/mocks/equipmentSet.mocks.ts

@@ -383,7 +383,7 @@ export const equipmentSetMock: IEquipmentSet = {
   legs: undefined,
   boot: items.boot,
   leftHand: items.leftHand,
-  rightHand: undefined,
+  rightHand: items.rightHand,
   neck: undefined,
   ring: undefined,
   accessory: items.accessory,

package/src/mocks/itemContainer.mocks.ts

@@ -42,6 +42,16 @@ export const items: IItem[] = [
     createdAt: '2022-06-04T03:18:09.335Z',
     updatedAt: '2022-06-04T18:16:49.056Z',
     rarity: ItemRarities.Legendary,
+    minRequirements: {
+      level: 10,
+      skill: {
+        name: 'sword',
+        level: 5,
+      }
+    },
+    equippedBuffDescription: "Character speed +10%",
+    entityEffectChance: 50,
+    entityEffects: ['freezing']
   },
   {
     _id: '629acef1c7c8e8002ff73564',
@@ -530,6 +540,37 @@ export const items: IItem[] = [
     updatedAt: '2022-06-04T18:16:49.056Z',
     rarity: ItemRarities.Common,
   },
+  {
+    "type": ItemType.Consumable,
+    "subType": ItemSubType.Food,
+    "rarity": "Common",
+    "textureAtlas": "items",
+    "allowedEquipSlotType": [],
+    "maxStackSize": 100,
+    "isUsable": false,
+    "isStorable": true,
+    "isItemContainer": false,
+    "isSolid": false,
+    "requiredAmmoKeys": [],
+    "isTwoHanded": false,
+    "hasUseWith": false,
+    "entityEffects": [],
+    "entityEffectChance": 0,
+    "_id": "64529049d45546003b2c6c6d",
+    "key": "apple",
+    "texturePath": "foods/apple.png",
+    textureKey: 'apple',
+    isEquipable: false,
+    isStackable: true,
+    "name": "Apple",
+    "description": "A red apple.",
+    "weight": 0.05,
+    "stackQty": 16,
+    "attack": 0,
+    "defense": 0,
+    fullDescription: "",
+    usableEffectDescription: "Regenerates 10 HP and Mana 5 times"
+  }
 ];
 
 export const itemContainerMock: IItemContainer = {
@@ -553,6 +594,7 @@ export const itemContainerMock: IItemContainer = {
     12: items[12],
     13: items[13],
     14: items[14],
+    15: items[15],
     //remaining slots are considered null by default
   },
   allowedItemTypes: [],