@rpg-engine/long-bow 0.8.236 → 0.8.238

package/package.json

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

package/src/components/Spellbook/Spell.tsx

@@ -1,6 +1,6 @@
 import { ISpell, ItemRarities } from '@rpg-engine/shared';
 import React from 'react';
-import styled, { css } from 'styled-components';
+import styled, { css, keyframes } from 'styled-components';
 import { SpriteFromAtlas } from '../shared/SpriteFromAtlas';
 import { SpellInfoWrapper } from './cards/SpellInfoWrapper';
 
@@ -87,6 +87,11 @@ export const Spell: React.FC<ISpellProps> = ({
   );
 };
 
+const assignmentPulse = keyframes`
+  0%, 100% { background-color: rgba(255, 247, 215, .5); }
+  50% { background-color: rgba(255, 252, 235, .9); }
+`;
+
 const Card = styled.button<{ $assigning: boolean }>`
   box-sizing: border-box;
   display: flex;
@@ -104,6 +109,12 @@ const Card = styled.button<{ $assigning: boolean }>`
   font: inherit;
   cursor: pointer;
   transition: background .12s, border-color .12s;
+  animation-name: ${({ $assigning }) => $assigning ? assignmentPulse : 'none'};
+  animation-duration: 1.4s;
+  animation-timing-function: ease-in-out;
+  animation-iteration-count: infinite;
+  &:disabled { animation-name: none; }
+  @media (prefers-reduced-motion: reduce) { animation-name: none; }
   &:hover:not(:disabled) { background: rgba(255, 252, 235, .9); border-color: #8a5a14; box-shadow: inset 0 0 0 1px #8a5a14; }
   &:focus-visible { outline: 3px solid #3a2110; outline-offset: 2px; }
   /* RPGUI greys and recolors every :disabled (0,2,0): keep the dashed card and its red/blue stats */

package/src/components/Spellbook/Spellbook.tsx

@@ -371,7 +371,10 @@ const PageTurn = styled(SmallButton)`
   flex: none;
   width: 124px;
   ${DESKTOP} { width: 108px; padding: 0 5px; }
-  ${PHONE} { flex: 1 1 0; width: auto; min-width: 0; padding: 0 6px; gap: 6px; font-size: 9px; }
+  ${PHONE} {
+    flex: 1 1 0; width: auto; min-width: 44px; padding: 0 4px; gap: 4px; font-size: 9px;
+    svg { flex: 0 0 10px; }
+  }
 `;
 // Same Previous / Page n of N / Next order as the shared Pagination; the base-value footnote takes the
 // left page so the page turners sit together at the outer corner of the right page.

package/src/components/Spellbook/__tests__/SpellInfoWrapper.test.tsx

@@ -100,3 +100,29 @@ it('positions focused details visibly without waiting for a mouse movement', ()
   expect(tooltip.style.opacity).toBe('1');
   expect(tooltip.style.transform).toBe('translate(170px, 120px)');
 });
+
+it('closes mouse details after leaving a clicked card without blurring it', () => {
+  render(<SpellInfoWrapper spell={mockSpells[0]}><button>Cast</button></SpellInfoWrapper>);
+  const button = screen.getByRole('button');
+  // Mouse clicks focus buttons without enabling keyboard focus-visible.
+  const matches = button.matches.bind(button);
+  jest.spyOn(button, 'matches').mockImplementation(selector => selector === ':focus-visible' ? false : matches(selector));
+  fireEvent.mouseEnter(button);
+  act(() => button.focus());
+  fireEvent.click(button);
+  expect(screen.getByRole('tooltip')).toBeTruthy();
+  fireEvent.mouseLeave(button);
+  expect(screen.queryByRole('tooltip')).toBeNull();
+  expect(document.activeElement).toBe(button);
+});
+
+it('keeps keyboard details when the pointer leaves a keyboard-focused card', () => {
+  render(<SpellInfoWrapper spell={mockSpells[0]}><button>Cast</button></SpellInfoWrapper>);
+  const button = screen.getByRole('button');
+  jest.spyOn(button, 'matches').mockReturnValue(true);
+  act(() => button.focus());
+  fireEvent.mouseLeave(button);
+  expect(screen.getByRole('tooltip')).toBeTruthy();
+  act(() => button.blur());
+  expect(screen.queryByRole('tooltip')).toBeNull();
+});

package/src/components/Spellbook/__tests__/Spellbook.test.tsx

@@ -69,6 +69,8 @@ it('blocks cast on low skills, mana and cooldown but permits assignment without
   rerender(<Spell {...card} charSkillLevels={{ strength: 20 }} charMana={0} isSettingShortcut />);
   fireEvent.click(screen.getByRole('button'));
   expect(onClick).toHaveBeenCalledWith(spell.key);
+  rerender(<Spell {...card} charSkillLevels={{ strength: 2 }} isSettingShortcut />);
+  expect(getComputedStyle(screen.getByRole('button')).animationName).toBe('none');
 });
 
 it('clears an occupied shortcut without starting assignment', () => {
@@ -111,3 +113,13 @@ it('spells out requirement, mana cost and cooldown and only prompts when assigni
   expect(screen.getAllByText('Requires Magic Resistance 4')).toHaveLength(1);
   expect((screen.getByRole('button') as HTMLButtonElement).disabled).toBe(true);
 });
+
+it('pulses only assignable cards until assignment ends', () => {
+  render(<Spellbook {...props} />);
+  expect(getComputedStyle(screen.getByRole('button', { name: 'Cast Spell 8' })).animationName).toBe('none');
+  fireEvent.click(screen.getByRole('button', { name: 'Set shortcut 1' }));
+  expect(getComputedStyle(screen.getByRole('button', { name: 'Assign Spell 8' })).animationName).not.toBe('none');
+  expect(getComputedStyle(screen.getByRole('button', { name: 'Assign Spell 8' })).animationName).not.toBe('');
+  fireEvent.click(screen.getByRole('button', { name: 'Cancel assignment' }));
+  expect(getComputedStyle(screen.getByRole('button', { name: 'Cast Spell 8' })).animationName).toBe('none');
+});

package/src/components/Spellbook/cards/SpellInfoWrapper.tsx

@@ -65,7 +65,9 @@ export const SpellInfoWrapper: React.FC<ISpellInfoWrapperProps> = ({
         if (!isTooltipMobileVisible) setIsTooltipVisible(true);
       }}
       onMouseLeave={event => {
-        if (!event.currentTarget.contains(document.activeElement)) setIsTooltipVisible(false);
+        if (!event.currentTarget.contains(document.activeElement) || !document.activeElement?.matches(':focus-visible')) {
+          setIsTooltipVisible(false);
+        }
       }}
       onTouchStart={handleTouchStart}
       onTouchEnd={clearHold}