@rpg-engine/long-bow 0.3.59 → 0.3.60

package/package.json

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

package/src/components/CircularController/CircularController.tsx

@@ -104,6 +104,7 @@ export const CircularController: React.FC<CircularControllerProps> = ({
               height={32}
               imgScale={1.4}
               imgStyle={{ left: '4px' }}
+              containerStyle={{ pointerEvents: 'none' }}
             />
           )}
           <span className="qty">{totalQty}</span>
@@ -164,11 +165,12 @@ const Button = styled.button`
   align-items: center;
   justify-content: center;
   position: relative;
-  transition: background-color 0.1s;
+  transition: all 0.1s;
   margin-top: -3rem;
 
   &.active {
     background-color: ${uiColors.gray};
+    border-color: ${uiColors.yellow};
   }
 
   .sword {
@@ -226,7 +228,7 @@ const ShortcutsContainer = styled.div`
 const StyledShortcut = styled(SingleShortcut)`
   width: 2.5rem;
   height: 2.5rem;
-  transition: background-color 0.1s;
+  transition: all 0.1s;
 
   .mana,
   .qty {
@@ -241,5 +243,6 @@ const StyledShortcut = styled(SingleShortcut)`
 
   &.active {
     background-color: ${uiColors.gray};
+    border-color: ${uiColors.yellow};
   }
 `;

package/src/components/Shortcuts/Shortcuts.tsx

@@ -6,8 +6,9 @@ import {
   IShortcut,
   ShortcutType,
 } from '@rpg-engine/shared';
-import React, { useEffect } from 'react';
+import React, { useEffect, useRef } from 'react';
 import styled from 'styled-components';
+import { uiColors } from '../../constants/uiColors';
 import { SpriteFromAtlas } from '../shared/SpriteFromAtlas';
 import { SingleShortcut } from './SingleShortcut';
 
@@ -30,6 +31,8 @@ export const Shortcuts: React.FC<ShortcutsProps> = ({
   atlasIMG,
   inventory,
 }) => {
+  const shortcutsRefs = useRef<HTMLButtonElement[]>([]);
+
   useEffect(() => {
     const handleKeyDown = (e: KeyboardEvent) => {
       if (isBlockedCastingByKeyboard) return;
@@ -37,6 +40,10 @@ export const Shortcuts: React.FC<ShortcutsProps> = ({
       const shortcutIndex = Number(e.key) - 1;
       if (shortcutIndex >= 0 && shortcutIndex <= 5) {
         onShortcutCast(shortcutIndex);
+        shortcutsRefs.current[shortcutIndex]?.classList.add('active');
+        setTimeout(() => {
+          shortcutsRefs.current[shortcutIndex]?.classList.remove('active');
+        }, 150);
       }
     };
 
@@ -71,10 +78,13 @@ export const Shortcuts: React.FC<ShortcutsProps> = ({
           );
 
           return (
-            <SingleShortcut
+            <StyledShortcut
               key={i}
               onPointerDown={onShortcutCast.bind(null, i)}
               disabled={false}
+              ref={el => {
+                if (el) shortcutsRefs.current[i] = el;
+              }}
             >
               {payload && (
                 <SpriteFromAtlas
@@ -94,30 +104,42 @@ export const Shortcuts: React.FC<ShortcutsProps> = ({
               )}
               <span className="qty">{totalQty}</span>
               <span className="keyboard">{i + 1}</span>
-            </SingleShortcut>
+            </StyledShortcut>
           );
         }
 
         const payload = shortcuts[i]?.payload as IRawSpell | undefined;
 
         return (
-          <SingleShortcut
+          <StyledShortcut
             key={i}
             onPointerDown={onShortcutCast.bind(null, i)}
             disabled={mana < (payload?.manaCost ?? 0)}
+            ref={el => {
+              if (el) shortcutsRefs.current[i] = el;
+            }}
           >
             <span className="mana">{payload && payload.manaCost}</span>
             <span className="magicWords">
               {payload?.magicWords.split(' ').map(word => word[0])}
             </span>
             <span className="keyboard">{i + 1}</span>
-          </SingleShortcut>
+          </StyledShortcut>
         );
       })}
     </List>
   );
 };
 
+const StyledShortcut = styled(SingleShortcut)`
+  transition: all 0.15s;
+
+  &.active {
+    background-color: ${uiColors.gray};
+    border-color: ${uiColors.yellow};
+  }
+`;
+
 const List = styled.p`
   width: 100%;
   display: flex;

package/src/components/Shortcuts/SingleShortcut.ts

@@ -53,6 +53,7 @@ export const SingleShortcut = styled.button`
 
   &:active {
     background-color: ${uiColors.gray};
+    border-color: ${uiColors.yellow};
   }
 
   &:disabled {