@rpg-engine/long-bow 0.8.235 → 0.8.237

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

@@ -0,0 +1,113 @@
+import React from 'react';
+import { fireEvent, render, screen, cleanup } from '@testing-library/react';
+import { BasicAttribute, IRawSpell, ISpell, ShortcutType, SpellsBlueprint } from '@rpg-engine/shared';
+import { Spellbook, ISpellbookProps } from '../Spellbook';
+import { Spell } from '../Spell';
+import { mockSpells } from '../mockSpells';
+
+jest.mock('../../shared/SpriteFromAtlas', () => ({ SpriteFromAtlas: () => null }));
+jest.mock('../cards/SpellInfoWrapper', () => ({ SpellInfoWrapper: ({ children }: any) => children }));
+afterEach(cleanup);
+
+const spells: ISpell[] = Array.from({ length: 9 }, (_, i) => ({
+  ...mockSpells[0], key: `spell-${i}` as SpellsBlueprint,
+  name: `Spell ${i}`, magicWords: `words ${i}`, minMagicLevelRequired: 9 - i,
+}));
+const props: ISpellbookProps = {
+  spells, mana: 200, magicLevel: 100, shortcuts: [], atlasIMG: '', atlasJSON: {},
+  onSpellClick: jest.fn(), setSpellShortcut: jest.fn(), removeShortcut: jest.fn(),
+};
+
+it('paginates without mutating the caller array and resets search to the first page', () => {
+  const order = spells.map(spell => spell.key);
+  render(<Spellbook {...props} />);
+  expect(spells.map(spell => spell.key)).toEqual(order);
+  expect(screen.getAllByRole('button', { name: /^Cast Spell/ })).toHaveLength(8);
+  fireEvent.click(screen.getByRole('button', { name: 'Next page' }));
+  expect(screen.getAllByRole('button', { name: /^Cast Spell/ })).toHaveLength(1);
+  fireEvent.change(screen.getByRole('searchbox'), { target: { value: 'words 8' } });
+  expect(screen.getByRole('button', { name: 'Cast Spell 8' })).toBeTruthy();
+  fireEvent.change(screen.getByRole('searchbox'), { target: { value: 'missing' } });
+  expect(screen.getByText('No matching spells')).toBeTruthy();
+  fireEvent.click(screen.getByRole('button', { name: 'Clear search' }));
+  expect(screen.getAllByRole('button', { name: /^Cast Spell/ })).toHaveLength(8);
+});
+
+it('keeps a valid page when the learned spell list shrinks', () => {
+  const { rerender } = render(<Spellbook {...props} />);
+  fireEvent.click(screen.getByRole('button', { name: 'Next page' }));
+  rerender(<Spellbook {...props} spells={spells.slice(0, 2)} />);
+  expect(screen.getAllByRole('button', { name: /^Cast Spell/ })).toHaveLength(2);
+});
+
+it('assigns a shortcut without casting and supports cancellation', () => {
+  const setSpellShortcut = jest.fn();
+  const onSpellClick = jest.fn();
+  render(<Spellbook {...props} onSpellClick={onSpellClick} setSpellShortcut={setSpellShortcut} />);
+  fireEvent.click(screen.getByRole('button', { name: 'Set shortcut 1' }));
+  fireEvent.click(screen.getByRole('button', { name: 'Assign Spell 8' }));
+  expect(setSpellShortcut).toHaveBeenCalledWith('spell-8', 0);
+  expect(onSpellClick).not.toHaveBeenCalled();
+  fireEvent.click(screen.getByRole('button', { name: 'Set shortcut 1' }));
+  fireEvent.click(screen.getByRole('button', { name: 'Cancel assignment' }));
+  expect(screen.getByRole('button', { name: 'Cast Spell 8' })).toBeTruthy();
+});
+
+it('blocks cast on low skills, mana and cooldown but permits assignment without mana', () => {
+  const onClick = jest.fn();
+  const spell = { ...spells[0], attribute: BasicAttribute.Strength, minSkillLevelRequired: 10 };
+  const card = { atlasIMG: '', atlasJSON: {}, spellKey: spell.key, spell, charMagicLevel: 100, charMana: 200, onClick };
+  const { rerender } = render(<Spell {...card} charSkillLevels={{ strength: 2 }} />);
+  fireEvent.click(screen.getByRole('button'));
+  expect(onClick).not.toHaveBeenCalled();
+  rerender(<Spell {...card} charSkillLevels={{ strength: 20 }} activeCooldown={2} />);
+  fireEvent.click(screen.getByRole('button'));
+  expect(onClick).not.toHaveBeenCalled();
+  rerender(<Spell {...card} charSkillLevels={{ strength: 20 }} charMana={0} />);
+  fireEvent.click(screen.getByRole('button'));
+  expect(onClick).not.toHaveBeenCalled();
+  rerender(<Spell {...card} charSkillLevels={{ strength: 20 }} charMana={0} isSettingShortcut />);
+  fireEvent.click(screen.getByRole('button'));
+  expect(onClick).toHaveBeenCalledWith(spell.key);
+});
+
+it('clears an occupied shortcut without starting assignment', () => {
+  const shortcuts = [{ type: ShortcutType.Spell, payload: spells[0] as IRawSpell }];
+  const removeShortcut = (index: number) => { shortcuts.splice(index, 1); };
+  const view = render(<Spellbook {...props} shortcuts={shortcuts} removeShortcut={removeShortcut} />);
+
+  fireEvent.click(screen.getByRole('button', { name: 'Clear shortcut 1' }));
+  expect(screen.queryByText('Choose a spell for shortcut 1')).toBeNull();
+
+  view.rerender(<Spellbook {...props} shortcuts={shortcuts} removeShortcut={removeShortcut} />);
+  fireEvent.click(screen.getByRole('button', { name: 'Set shortcut 1' }));
+  expect(screen.getByText('Choose a spell for shortcut 1')).toBeTruthy();
+});
+
+it('spells out requirement, mana cost and cooldown and only prompts when assigning', () => {
+  const spell = { ...spells[0], attribute: BasicAttribute.MagicResistance, minSkillLevelRequired: 4, manaCost: 13, cooldown: 5 };
+  const card = { atlasIMG: '', atlasJSON: {}, spellKey: spell.key, spell, charMagicLevel: 100, charMana: 200, onClick: jest.fn() };
+  const ready = { ...card, charSkillLevels: { magicResistance: 9 } };
+  const { rerender } = render(<Spell {...ready} />);
+  expect(screen.getByText('Requires Magic Resistance 4')).toBeTruthy();
+  expect(screen.getByText('Mana cost')).toBeTruthy();
+  expect(screen.getByText('Cooldown')).toBeTruthy();
+  expect(screen.queryByText(/Select to/)).toBeNull();
+  const accessibleDescription = () => screen.getByRole('button').getAttribute('aria-describedby')!
+    .split(' ').map(id => document.getElementById(id)?.textContent).join(' ');
+  expect(accessibleDescription()).toContain(spell.description);
+  expect(accessibleDescription()).toContain('Requires Magic Resistance 4');
+  expect(accessibleDescription()).toContain('Mana cost');
+
+  rerender(<Spell {...ready} isSettingShortcut />);
+  expect(screen.getByText('Select to assign')).toBeTruthy();
+  rerender(<Spell {...ready} charMana={0} />);
+  expect(screen.getByText('Not enough mana')).toBeTruthy();
+  expect(accessibleDescription()).toContain('Not enough mana');
+  rerender(<Spell {...ready} activeCooldown={2} />);
+  expect(screen.getByText('Ready in 2.0s')).toBeTruthy();
+  expect(accessibleDescription()).toContain('Ready in 2.0s');
+  rerender(<Spell {...card} charSkillLevels={{ magicResistance: 1 }} />);
+  expect(screen.getAllByText('Requires Magic Resistance 4')).toHaveLength(1);
+  expect((screen.getByRole('button') as HTMLButtonElement).disabled).toBe(true);
+});

package/src/components/Spellbook/__tests__/imageMock.js

@@ -0,0 +1 @@
+module.exports = 'book.png';

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

@@ -9,6 +9,13 @@ interface ISpellInfoProps {
   spell: ISpell;
 }
 
+// "magicResistance" -> "Magic Resistance", "fire" -> "Fire"
+const humanize = (value: string): string =>
+  formatSpellCastingType(value.replace(/([a-z])([A-Z])/g, '$1 $2'));
+
+const humanizeList = (values: string[]): string =>
+  values.map(humanize).join(', ');
+
 export const SpellInfo: React.FC<ISpellInfoProps> = ({ spell }) => {
   const {
     magicWords,
@@ -19,7 +26,46 @@ export const SpellInfo: React.FC<ISpellInfoProps> = ({ spell }) => {
     castingType,
     cooldown,
     maxDistanceGrid,
+    minLevelRequired,
+    minMagicLevelRequired,
+    minSkillLevelRequired,
+    attribute,
+    elementalType,
+    canSelfTarget,
+    isPVPOnly,
+    characterClass,
+    characterRace,
+    onlyPremiumAccountType,
   } = spell;
+
+  // Same gate as the card and the API: a skill attribute replaces magic level.
+  const skill =
+    attribute && minSkillLevelRequired !== undefined
+      ? { label: humanize(attribute), level: minSkillLevelRequired }
+      : { label: 'Magic', level: minMagicLevelRequired };
+
+  // Only fields present in the payload are listed. Nothing is defaulted, and an
+  // empty restriction list is not shown as a restriction.
+  const details: Array<[string, string | number]> = [];
+  if (elementalType) details.push(['Element:', humanize(elementalType)]);
+  if (canSelfTarget !== undefined) {
+    details.push(['Can target self:', canSelfTarget ? 'Yes' : 'No']);
+  }
+  if (isPVPOnly) details.push(['PvP only:', 'Yes']);
+  if (minLevelRequired > 0) details.push(['Requires Level:', minLevelRequired]);
+  if (skill.level > 0) {
+    details.push([`Requires ${skill.label} Level:`, skill.level]);
+  }
+  if (characterClass?.length) {
+    details.push(['Requires Class:', humanizeList(characterClass)]);
+  }
+  if (characterRace?.length) {
+    details.push(['Requires Race:', humanizeList(characterRace)]);
+  }
+  if (onlyPremiumAccountType?.length) {
+    details.push(['Eligible account types:', humanizeList(onlyPremiumAccountType)]);
+  }
+
   return (
     <Container>
       <Header>
@@ -50,6 +96,12 @@ export const SpellInfo: React.FC<ISpellInfoProps> = ({ spell }) => {
           <div className="value">{maxDistanceGrid}</div>
         </Statistic>
       )}
+      {details.map(([label, value]) => (
+        <Statistic key={label}>
+          <div className="label">{label}</div>
+          <div className="value">{value}</div>
+        </Statistic>
+      ))}
       <Statistic>
         {requiredItem && (
           <>
@@ -64,62 +116,65 @@ export const SpellInfo: React.FC<ISpellInfoProps> = ({ spell }) => {
 };
 
 const Container = styled.div`
-  color: white;
-  background-color: #222;
-  border-radius: 5px;
-  padding: 0.5rem;
-  font-size: ${uiFonts.size.small};
-  border: 3px solid ${uiColors.lightGray};
+  box-sizing: border-box;
   height: max-content;
-  width: 30rem;
-
-  @media (max-width: 580px) {
-    width: 80vw;
-  }
+  width: min(30rem, 86vw);
+  padding: 12px 14px;
+  color: #f4e2bb;
+  background: linear-gradient(#3f2815, #2c1b0d);
+  border: 3px double #c99a52;
+  border-radius: 4px;
+  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.55);
+  font-family: 'Press Start 2P', monospace;
+  font-size: ${uiFonts.size.small};
+  line-height: 1.7;
 `;
 
 const Title = styled.div`
-  font-size: ${uiFonts.size.medium};
-  font-weight: bold;
-  margin-bottom: 0.5rem;
-  display: flex;
-  align-items: center;
   margin: 0;
+  font-size: ${uiFonts.size.medium};
+  color: #ffe3a3;
 `;
 
 const Type = styled.div`
+  margin-top: 4px;
   font-size: ${uiFonts.size.small};
-  margin-top: 0.2rem;
-  color: ${uiColors.lightGray};
+  color: #d9b878;
 `;
 
 const Description = styled.div`
-  margin-top: 1.5rem;
+  margin-top: 12px;
+  padding-top: 10px;
+  border-top: 1px solid rgba(244, 226, 187, 0.3);
   font-size: ${uiFonts.size.small};
-  color: ${uiColors.lightGray};
-  font-style: italic;
+  color: #e8d5ab;
 `;
 
 const Header = styled.div`
   display: flex;
   align-items: center;
   justify-content: space-between;
-  margin-bottom: 0.5rem;
+  margin-bottom: 10px;
 `;
 
 const Statistic = styled.div`
-  margin-bottom: 0.4rem;
-  width: max-content;
+  display: flex;
+  justify-content: space-between;
+  gap: 16px;
+  padding: 3px 0;
+  border-bottom: 1px dotted rgba(244, 226, 187, 0.22);
+
+  &:empty {
+    display: none;
+  }
 
   .label {
-    display: inline-block;
-    margin-right: 0.5rem;
-    color: inherit;
+    color: #cdb48a;
   }
 
   .value {
-    display: inline-block;
-    color: inherit;
+    color: #f4e2bb;
+    text-align: right;
   }
 
   &.better,

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

@@ -1,5 +1,5 @@
 import { ISpell } from '@rpg-engine/shared';
-import React, { useRef, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import { MobileSpellTooltip } from './MobileSpellTooltip';
 import { MagicTooltip } from './SpellTooltip';
 
@@ -19,40 +19,75 @@ export const SpellInfoWrapper: React.FC<ISpellInfoWrapperProps> = ({
   const [isTooltipVisible, setIsTooltipVisible] = useState(false);
   const [isTooltipMobileVisible, setIsTooltipMobileVisible] = useState(false);
   const touchTimeoutRef = useRef<NodeJS.Timeout | null>(null);
+  const wrapperRef = useRef<HTMLDivElement>(null);
 
-  const handleTouchStart = () => {
+  const suppressClickRef = useRef(false);
+  const clearHold = (): void => {
+    if (touchTimeoutRef.current) clearTimeout(touchTimeoutRef.current);
+    touchTimeoutRef.current = null;
+  };
+  useEffect(() => clearHold, []);
+
+  const handleTouchStart = (): void => {
+    clearHold();
+    suppressClickRef.current = false;
     touchTimeoutRef.current = setTimeout(() => {
+      touchTimeoutRef.current = null;
+      suppressClickRef.current = true;
       setIsTooltipMobileVisible(true);
       setIsTooltipVisible(false);
     }, holdTouchDuration);
   };
 
-  const handleTouchEnd = () => {
-    if (touchTimeoutRef.current) {
-      clearTimeout(touchTimeoutRef.current);
-      touchTimeoutRef.current = null;
-    }
-  };
+
 
   return (
     <div
+      ref={wrapperRef}
+      onFocus={event => {
+        if (!isTooltipMobileVisible && (event.target as HTMLElement).matches(':focus-visible')) {
+          setIsTooltipVisible(true);
+        }
+      }}
+      onBlur={event => {
+        if (!event.currentTarget.contains(event.relatedTarget as Node | null)) {
+          setIsTooltipVisible(false);
+        }
+      }}
+      onKeyDown={event => {
+        if (event.key === 'Escape' && isTooltipVisible) {
+          event.preventDefault();
+          event.stopPropagation();
+          setIsTooltipVisible(false);
+        }
+      }}
       onMouseEnter={() => {
         if (!isTooltipMobileVisible) setIsTooltipVisible(true);
       }}
-      onMouseLeave={setIsTooltipVisible.bind(null, false)}
+      onMouseLeave={event => {
+        if (!event.currentTarget.contains(document.activeElement)) setIsTooltipVisible(false);
+      }}
       onTouchStart={handleTouchStart}
-      onTouchEnd={handleTouchEnd}
+      onTouchEnd={clearHold}
+      onTouchCancel={clearHold}
+      onTouchMove={() => { clearHold(); suppressClickRef.current = true; }}
+      onClickCapture={event => {
+        if (suppressClickRef.current && event.currentTarget.contains(event.target as Node)) {
+          event.preventDefault();
+          event.stopPropagation();
+          suppressClickRef.current = false;
+        }
+      }}
     >
       {children}
 
       {isTooltipVisible && !isTooltipMobileVisible && (
-        <MagicTooltip spell={spell} />
+        <MagicTooltip spell={spell} anchor={wrapperRef.current} />
       )}
       {isTooltipMobileVisible && (
         <MobileSpellTooltip
           closeTooltip={() => {
             setIsTooltipMobileVisible(false);
-            console.log('close');
           }}
           spell={spell}
           scale={scale}
@@ -60,4 +95,4 @@ export const SpellInfoWrapper: React.FC<ISpellInfoWrapperProps> = ({
       )}
     </div>
   );
-};
+};

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

@@ -6,19 +6,19 @@ import { SpellInfoDisplay } from './SpellInfoDisplay';
 
 export interface IMagicTooltipProps {
   spell: ISpell;
+  anchor?: HTMLElement | null;
 }
 
 const offset = 20;
 
-export const MagicTooltip: React.FC<IMagicTooltipProps> = ({ spell }) => {
+export const MagicTooltip: React.FC<IMagicTooltipProps> = ({ spell, anchor }) => {
   const ref = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
     const { current } = ref;
 
     if (current) {
-      const handleMouseMove = (event: MouseEvent) => {
-        const { clientX, clientY } = event;
+      const position = (clientX: number, clientY: number): void => {
 
         // Adjust the position of the tooltip based on the mouse position
         const rect = current.getBoundingClientRect();
@@ -36,10 +36,17 @@ export const MagicTooltip: React.FC<IMagicTooltipProps> = ({ spell }) => {
           ? clientY - tooltipHeight - offset
           : clientY + offset;
 
-        current.style.transform = `translate(${x}px, ${y}px)`;
+        const boundedX = Math.max(8, Math.min(x, window.innerWidth - tooltipWidth - 8));
+        const boundedY = Math.max(8, Math.min(y, window.innerHeight - tooltipHeight - 8));
+        current.style.transform = `translate(${boundedX}px, ${boundedY}px)`;
         current.style.opacity = '1';
       };
 
+      const handleMouseMove = (event: MouseEvent): void => position(event.clientX, event.clientY);
+      if (anchor) {
+        const rect = anchor.getBoundingClientRect();
+        position(rect.right, rect.top);
+      }
       window.addEventListener('mousemove', handleMouseMove);
 
       return () => {
@@ -48,11 +55,11 @@ export const MagicTooltip: React.FC<IMagicTooltipProps> = ({ spell }) => {
     }
 
     return;
-  }, []);
+  }, [anchor]);
 
   return (
     <ModalPortal>
-      <Container ref={ref}>
+      <Container ref={ref} role="tooltip" id={`spell-details-${spell.key}`}>
         <SpellInfoDisplay spell={spell} />
       </Container>
     </ModalPortal>