@rpg-engine/long-bow 0.8.235 → 0.8.236

package/src/components/Spellbook/Spellbook.tsx

@@ -1,11 +1,11 @@
-import { IShortcut, ISpell } from '@rpg-engine/shared';
-import React, { Fragment, useMemo, useState } from 'react';
-import styled from 'styled-components';
-import { uiFonts } from '../../constants/uiFonts';
-import { DraggableContainer } from '../DraggableContainer';
-import { Input } from '../Input';
-import { RPGUIContainerTypes } from '../RPGUI/RPGUIContainer';
+import { IShortcut, ISpell, ItemRarities } from '@rpg-engine/shared';
+import React, { useMemo, useRef, useState } from 'react';
+import Draggable from 'react-draggable';
+import { FaChevronLeft, FaChevronRight } from 'react-icons/fa';
+import styled, { css } from 'styled-components';
+import { uiColors } from '../../constants/uiColors';
 import { ShortcutsSetter } from '../Shortcuts/ShortcutsSetter';
+import BookImg from '../StaticBook/img/0.png';
 import { Spell } from './Spell';
 
 export interface ISpellbookProps {
@@ -26,129 +26,425 @@ export interface ISpellbookProps {
   iconAtlasJSON?: any;
   scale?: number;
   spellCooldowns?: Record<string, number>;
+  // Rarity each learned spell was learned at, keyed by spell key (the `learnedSpellRarities` of the
+  // learned-spells event). Spells without an entry have no known rarity and show no badge.
+  learnedSpellRarities?: Partial<Record<string, ItemRarities>>;
 }
 
+// Two rows of four cards: two per physical page on the art book.
+const PAGE_SIZE = 8;
+
 export const Spellbook: React.FC<ISpellbookProps> = ({
-  onClose,
-  onInputFocus,
-  onInputBlur,
-  spells,
-  magicLevel,
-  mana,
-  charSkillLevels,
-  onSpellClick,
-  setSpellShortcut,
-  shortcuts,
-  removeShortcut,
-  atlasIMG,
-  atlasJSON,
-  iconAtlasIMG,
-  iconAtlasJSON,
-  scale,
-  spellCooldowns,
+  onClose, onInputFocus, onInputBlur, spells, magicLevel, mana, charSkillLevels,
+  onSpellClick, setSpellShortcut, shortcuts, removeShortcut, atlasIMG, atlasJSON,
+  iconAtlasIMG, iconAtlasJSON, scale = 1, spellCooldowns, learnedSpellRarities,
 }) => {
   const [search, setSearch] = useState('');
+  const [currentPage, setCurrentPage] = useState(0);
   const [settingShortcutIndex, setSettingShortcutIndex] = useState(-1);
+  const bookRef = useRef<HTMLDivElement>(null);
+  const filteredSpells = useMemo(() => {
+    const query = search.trim().toLocaleLowerCase();
+    return [...spells]
+      .sort((a, b) => (a.minSkillLevelRequired ?? a.minMagicLevelRequired) - (b.minSkillLevelRequired ?? b.minMagicLevelRequired))
+      .filter(spell => `${spell.name} ${spell.magicWords}`.toLocaleLowerCase().includes(query));
+  }, [spells, search]);
+  const pageCount = Math.max(1, Math.ceil(filteredSpells.length / PAGE_SIZE));
+  const page = Math.min(currentPage, pageCount - 1);
+  const visibleSpells = filteredSpells.slice(page * PAGE_SIZE, (page + 1) * PAGE_SIZE);
+  const assigning = settingShortcutIndex !== -1;
 
-  const spellsToDisplay = useMemo(() => {
-    return spells
-      .sort((a, b) => {
-        if (a.minMagicLevelRequired > b.minMagicLevelRequired) return 1;
-        if (a.minMagicLevelRequired < b.minMagicLevelRequired) return -1;
-        return 0;
-      })
-      .filter(
-        spell =>
-          spell.name.toLocaleLowerCase().includes(search.toLocaleLowerCase()) ||
-          spell.magicWords
-            .toLocaleLowerCase()
-            .includes(search.toLocaleLowerCase())
-      );
-  }, [search, spells]);
-
-  const setShortcut = (spellKey: string) => {
-    setSpellShortcut?.(spellKey, settingShortcutIndex);
-    setSettingShortcutIndex(-1);
+  const selectSpell = (key: string): void => {
+    if (assigning) {
+      setSpellShortcut(key, settingShortcutIndex);
+      setSettingShortcutIndex(-1);
+    } else {
+      onSpellClick(key);
+    }
   };
 
   return (
-    <DraggableContainer
-      type={RPGUIContainerTypes.Framed}
-      onCloseButton={onClose}
-      width="inherit"
-      height="inherit"
-      cancelDrag="#spellbook-search, #shortcuts_list, .spell"
-      scale={scale}
-    >
-      <Container>
-        <Title>Learned Spells</Title>
-
-        <ShortcutsSetter
-          setSettingShortcutIndex={setSettingShortcutIndex}
-          settingShortcutIndex={settingShortcutIndex}
-          shortcuts={shortcuts}
-          removeShortcut={removeShortcut}
-          atlasIMG={atlasIMG}
-          atlasJSON={atlasJSON}
-        />
-
-        <Input
-          placeholder="Search for spell"
-          value={search}
-          onChange={e => setSearch(e.target.value)}
-          onFocus={onInputFocus}
-          onBlur={onInputBlur}
-          id="spellbook-search"
-        />
-
-        <SpellList>
-          {spellsToDisplay.map(spell => (
-            <Fragment key={spell.key}>
-              <Spell
-                atlasIMG={iconAtlasIMG}
-                atlasJSON={iconAtlasJSON}
-                charMana={mana}
-                charMagicLevel={magicLevel}
-                charSkillLevels={charSkillLevels}
-                onPointerUp={
-                  settingShortcutIndex !== -1 ? setShortcut : onSpellClick
-                }
-                spellKey={spell.key}
-                isSettingShortcut={settingShortcutIndex !== -1}
-                spell={spell}
-                activeCooldown={
-                  spellCooldowns?.[spell.magicWords.replaceAll(' ', '_')]
-                }
-                {...spell}
-              />
-            </Fragment>
-          ))}
-        </SpellList>
-      </Container>
-    </DraggableContainer>
+    <Draggable nodeRef={bookRef} handle=".spellbook-handle" cancel="button, input" scale={scale}>
+      <Book ref={bookRef} aria-label="Spellbook">
+        <Pages>
+          <Header className="spellbook-handle">
+            <HeaderLeft>
+              <div><Eyebrow>Your grimoire</Eyebrow><Title>Spellbook</Title></div>
+              <SearchLabel>
+                <span>Find a spell</span>
+                <Search type="search" aria-label="Search spells" placeholder="Name or magic words…"
+                  value={search} onFocus={onInputFocus} onBlur={onInputBlur}
+                  onChange={event => { setSearch(event.target.value); setCurrentPage(0); }} />
+              </SearchLabel>
+            </HeaderLeft>
+            <HeaderRight>
+              <Count aria-live="polite">
+                {search.trim() ? `${filteredSpells.length} of ${spells.length} spells` : `${spells.length} learned spells`}
+              </Count>
+              <Close type="button" aria-label="Close spellbook" onClick={onClose}>×</Close>
+            </HeaderRight>
+          </Header>
+          <Spread aria-label="Learned spells">
+            {visibleSpells.map(spell => (
+              <Spell key={spell.key} atlasIMG={iconAtlasIMG} atlasJSON={iconAtlasJSON}
+                charMana={mana} charMagicLevel={magicLevel} charSkillLevels={charSkillLevels}
+                onClick={selectSpell} spellKey={spell.key} spell={spell} isSettingShortcut={assigning}
+                rarity={learnedSpellRarities?.[spell.key]}
+                activeCooldown={spellCooldowns?.[spell.magicWords.trim().toLowerCase().replace(/\s+/g, '_')]} />
+            ))}
+            {!visibleSpells.length && <Empty role="status">
+              <strong>{spells.length ? 'No matching spells' : 'Your spellbook is empty'}</strong>
+              <span>{spells.length ? `Nothing matches “${search.trim()}”. Try another name or magic phrase.` : 'Learn a spell to start filling these pages.'}</span>
+              {search && <SmallButton type="button" onClick={() => { setSearch(''); setCurrentPage(0); }}>Clear search</SmallButton>}
+            </Empty>}
+          </Spread>
+          <Pagination aria-label="Spellbook pages">
+            <BaseNote>Mana and cooldown shown are base values.</BaseNote>
+            <Pager>
+              <PageTurn type="button" aria-label="Previous page" disabled={page === 0}
+                onClick={() => setCurrentPage(page - 1)}><FaChevronLeft aria-hidden="true" size={10} />Previous</PageTurn>
+              <PageLabel aria-live="polite">Page {page + 1} of {pageCount}</PageLabel>
+              <PageTurn type="button" aria-label="Next page" disabled={page === pageCount - 1}
+                onClick={() => setCurrentPage(page + 1)}>Next<FaChevronRight aria-hidden="true" size={10} /></PageTurn>
+            </Pager>
+          </Pagination>
+        </Pages>
+        <ShortcutArea>
+          <Assignment role="status">
+            <span>{assigning ? `Choose a spell for shortcut ${settingShortcutIndex + 1}` : 'Choose an empty shortcut, then select a spell to assign it.'}</span>
+            {assigning && <SmallButton type="button" onClick={() => setSettingShortcutIndex(-1)}>Cancel assignment</SmallButton>}
+          </Assignment>
+          <ShortcutsSetter setSettingShortcutIndex={setSettingShortcutIndex} settingShortcutIndex={settingShortcutIndex}
+            shortcuts={shortcuts} removeShortcut={removeShortcut} atlasIMG={atlasIMG} atlasJSON={atlasJSON} />
+        </ShortcutArea>
+      </Book>
+    </Draggable>
   );
 };
 
-const Title = styled.h1`
-  font-size: ${uiFonts.size.large} !important;
-  margin-bottom: 0 !important;
+// 0.png is 778x538 with transparent margins; the opaque book spans x 40-716, y 38-463.
+// Percent size/position crop those margins so the box edge is the book edge. The page text
+// area is x 73-687 (spine rings x 370-390 sit in the GUTTER) and y 72-428 of that art.
+// The book has no fixed ratio: its height is the header, the card rows and the pager, and the art
+// is stretched over whatever that comes to. Every desktop card is as tall as the tallest (see Spread).
+const GUTTER = '5.2%';
+const FLAT = '@media (max-width: 960px)';
+const PHONE = '@media (max-width: 640px)';
+// Mouse-driven desktop book: controls are drawn compact (34px) and keep a 44px hit area through ::after.
+// Flat, phone and touch (coarse pointer) books keep the 44px targets.
+const DESKTOP = '@media (min-width: 961px) and (pointer: fine)';
+const hitArea = '&::after { content: ""; position: absolute; top: -5px; right: -5px; bottom: -5px; left: -5px; }';
+// 12 shortcut slots plus label need ~720px of tray; below that the slots wrap to 6 per row.
+const TRAY = '@media (max-width: 860px)';
+const twoPages = `display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: ${GUTTER};`;
+const PARCHMENT = '#392718';
+const focusRing = '3px solid #3a2110';
+const INK = '#140c1c';
+
+// The client BaseUI `.rpgui-button` plank (rpgui img/button.png) as CSS: uiColors.orange fill, 1px
+// near-black outline, pale top bevel, uiColors.brown bottom bevel. Dark ink keeps ~6:1 on the orange.
+const plank = css`
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  box-sizing: border-box;
+  min-width: 44px;
+  min-height: 44px;
+  padding: 6px 12px;
+  background: ${uiColors.orange};
+  border: 1px solid ${INK};
+  border-radius: 2px;
+  box-shadow: inset 0 1px 0 #dad45e, inset 0 -2px 0 ${uiColors.brown};
+  color: ${INK};
+  font: inherit;
+  font-size: 10px;
+  line-height: 1.4;
+  cursor: pointer;
+  &:hover:not(:disabled) { background: #e08f38; }
+  &:active:not(:disabled) { background: ${uiColors.brown}; box-shadow: inset 0 2px 0 ${uiColors.darkRed}; color: #fff1d6; }
+  &:focus-visible { outline: ${focusRing}; outline-offset: 2px; }
+  /* RPGUI greys and recolors every :disabled (0,2,0): keep a flat, readable parchment-toned button */
+  &&:disabled {
+    cursor: default;
+    background: transparent;
+    box-shadow: none;
+    border-color: rgba(89, 56, 28, .45);
+    color: #5a3f27;
+    filter: none;
+  }
+  &:disabled svg { opacity: .55; }
+  ${DESKTOP} {
+    min-width: 34px;
+    min-height: 34px;
+    padding: 4px 10px;
+    gap: 6px;
+    ${hitArea}
+  }
 `;
 
-const Container = styled.div`
-  width: 100%;
-  height: 100%;
-  color: white;
+const Book = styled.div`
+  box-sizing: border-box;
+  position: relative;
+  width: min(100%, 1040px);
+  margin: 0 auto;
+  color: ${PARCHMENT};
+  font-family: 'Press Start 2P', monospace;
+`;
+const Pages = styled.div`
+  box-sizing: border-box;
   display: flex;
   flex-direction: column;
+  /* the stitched frame art already touches the header, so the height cut comes from the bottom padding */
+  padding: 38px 4.29% 38px 4.88%;
+  background: url(${BookImg}) 39.2157% 33.6283% / 115.0888% 126.5882% no-repeat;
+  image-rendering: pixelated;
+  filter: drop-shadow(0 14px 20px rgba(0, 0, 0, .5));
+  ${FLAT} {
+    padding: 22px 20px 18px;
+    background: #eec28d;
+    border: 4px double #80512f;
+    border-radius: 4px;
+    box-shadow: inset 0 0 0 7px #eec28d, inset 0 0 0 8px rgba(89, 56, 28, .35);
+  }
+  ${PHONE} { padding: 20px 16px 16px; }
 `;
-
-const SpellList = styled.div`
-  width: 100%;
-  min-height: 0;
+const Header = styled.div`
+  ${twoPages}
+  align-items: center;
+  padding-bottom: 8px;
+  cursor: move;
+  ${FLAT} { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; padding-bottom: 14px; }
+`;
+const HeaderLeft = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  min-width: 0;
+  ${FLAT} { display: contents; }
+`;
+// The game client wraps the UI in RPGUI's `.rpgui-content`, whose span/p/h1/label/input rules
+// (specificity 0,1,1) force white outlined text. The doubled `&&` class (0,2,0) keeps this book's type.
+const Eyebrow = styled.span`
+  display: block;
+  margin-bottom: 4px;
+  && { font-size: 9px; line-height: 1.3; color: #6b4d32; text-shadow: none; }
+`;
+const Title = styled.h1`
+  && {
+    margin: 0;
+    font-size: 18px;
+    line-height: 1.3;
+    text-align: left;
+    color: ${PARCHMENT};
+    text-shadow: none;
+    ${PHONE} { font-size: 16px; }
+  }
+`;
+const HeaderRight = styled.div`
+  display: flex;
+  justify-self: end;
+  align-items: center;
+  gap: 12px;
+`;
+const Count = styled.span`
+  text-align: right;
+  max-width: 190px;
+  ${PHONE} { max-width: 96px; }
+  && { font-size: 9px; line-height: 1.7; color: #4a3220; text-shadow: none; }
+`;
+const Close = styled.button`
+  ${plank}
+  flex: none;
+  width: 44px;
+  padding: 0;
+  font-size: 22px;
+  line-height: 1;
+  ${DESKTOP} { width: 34px; padding: 0; font-size: 18px; }
+`;
+const SearchLabel = styled.label`
+  flex: 1;
+  min-width: 0;
+  align-items: center;
+  /* RPGUI makes label display:inline and span white: keep the flex row and caption type */
+  && { display: flex; font-size: 9px; line-height: 1.4; color: #4a3220; text-shadow: none; }
+  /* the input keeps its aria-label; the visible caption only appears once the book is flat */
+  && span {
+    position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
+    font-size: inherit; line-height: inherit; color: inherit; text-shadow: none;
+  }
+  /* a name or a magic phrase is short: the field stays a field instead of filling the page */
+  ${DESKTOP} { flex: 0 1 240px; }
+  ${FLAT} {
+    order: 3;
+    flex: 1 0 100%;
+    flex-direction: column;
+    align-items: stretch;
+    gap: 6px;
+    && span { position: static; width: auto; height: auto; clip: auto; }
+  }
+`;
+const Search = styled.input`
   flex: 1;
-  overflow-y: auto;
+  min-width: 0;
+  border: 1px solid #7b5836;
+  border-radius: 3px;
+  font: inherit;
+  /* RPGUI gives every input a dark box, white outlined text, 32px line and 30px min height */
+  && {
+    box-sizing: border-box;
+    width: 100%;
+    min-height: 44px;
+    padding: 10px;
+    color: ${PARCHMENT};
+    background: rgba(255, 250, 229, .72);
+    text-shadow: none;
+    font-size: 10px;
+    line-height: 1.4;
+    ${DESKTOP} { min-height: 34px; padding: 6px 10px; }
+  }
+  &::placeholder { color: #6b4d32; opacity: 1; font-size: 9px; }
+  &:focus { outline: ${focusRing}; outline-offset: 1px; }
+`;
+const PageLabel = styled.span`
+  white-space: nowrap;
+  && { line-height: normal; color: ${PARCHMENT}; text-shadow: none; }
+`;
+const BaseNote = styled.span`
+  text-wrap: balance;
+  && { font-size: 9px; line-height: 1.7; color: #5a3f27; text-shadow: none; }
+`;
+// Art book: [card][card] spine [card][card], two rows. DOM order is row-major so the first four spells
+// share a row; the spine track keeps the page gap the old two-page grid had (GUTTER = 10 + track + 10).
+// Every populated row is 1fr, so all cards on a page share one width and one height: the tallest card sets it
+// and each card is stretched to it (its wrapper is a flex row so the button fills the cell). A shorter card
+// keeps its content at the top, facts right under the description, and leaves the spare height at the bottom.
+// Rows are implicit, so only populated rows exist (1-4 cards make one row, 5-8 two) and a sparse page still
+// shrinks the book; a row never goes below CARD_MIN. Flat book: two columns, phone: one, rows grow with their
+// text and cards are equal within a row.
+const CARD_MIN = '150px';
+const Spread = styled.div`
+  display: grid;
+  align-items: stretch;
+  grid-template-columns: repeat(2, minmax(0, 1fr)) calc(${GUTTER} - 20px) repeat(2, minmax(0, 1fr));
+  grid-auto-rows: minmax(${CARD_MIN}, 1fr);
+  gap: 8px 10px;
+  > div { display: flex; min-width: 0; }
+  > :nth-child(4n + 1) { grid-column: 1; }
+  > :nth-child(4n + 2) { grid-column: 2; }
+  > :nth-child(4n + 3) { grid-column: 4; }
+  > :nth-child(4n) { grid-column: 5; }
+  ${FLAT} {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    grid-auto-rows: auto;
+    column-gap: 14px;
+    > :nth-child(n) { grid-column: auto; }
+  }
+  ${PHONE} { grid-template-columns: minmax(0, 1fr); }
+`;
+const Empty = styled.div`
+  /* && outranks the card placement rules on Spread's children (0,2,0) */
+  && { grid-column: 1 / span 2; grid-row: 1 / span 2; }
   display: flex;
+  align-items: center;
+  justify-content: center;
   flex-direction: column;
-  gap: 1.5rem;
-  margin-top: 1rem;
+  gap: 14px;
+  padding: 24px 16px;
+  text-align: center;
+  overflow-wrap: anywhere;
+  border: 2px dashed rgba(89, 56, 28, .45);
+  border-radius: 3px;
+  font-size: 12px;
+  line-height: 1.7;
+  color: ${PARCHMENT};
+  && span { font-size: 10px; line-height: 1.8; color: #4a3220; text-shadow: none; }
+  ${FLAT} { && { grid-column: 1 / -1; grid-row: auto; } }
+  ${PHONE} { padding: 32px 12px; }
+`;
+const SmallButton = styled.button`
+  ${plank}
+`;
+// Page turners share one fixed size so Previous and Next stay identical whatever the label length.
+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; }
+`;
+// 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.
+const Pager = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  ${FLAT} { justify-content: space-between; gap: 10px; }
+`;
+const Pagination = styled.nav`
+  ${twoPages}
+  align-items: center;
+  margin-top: 10px;
+  font-size: 10px;
+  color: ${PARCHMENT};
+  > :first-child { justify-self: start; }
+  > :last-child { justify-self: end; }
+  ${FLAT} {
+    display: flex;
+    flex-direction: column-reverse;
+    align-items: stretch;
+    gap: 10px;
+    padding-top: 14px;
+    border-top: 1px dashed rgba(89, 56, 28, .4);
+  }
+  ${PHONE} { ${PageLabel} { font-size: 9px; } }
+`;
+const ShortcutArea = styled.div`
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  align-items: center;
+  gap: 10px 20px;
+  margin-top: 10px;
+  padding: 10px 16px;
+  color: #f4e2bb;
+  background: linear-gradient(#4b2f19, #38220f);
+  border: 2px solid #1f130a;
+  border-radius: 4px;
+  box-shadow: inset 0 0 0 1px rgba(255, 224, 160, .18), 0 10px 18px rgba(0, 0, 0, .35);
+  ${SmallButton}:focus-visible { outline-color: #ffd98a; }
+  > div:last-child { display: flex; align-items: center; gap: 12px; width: auto; }
+  && p { flex: none; margin: 0; font-size: 10px; line-height: 1.7; color: #f4e2bb; text-shadow: none; }
+  #shortcuts_list { display: grid; grid-template-columns: repeat(12, 44px); gap: 6px; width: auto; padding: 0; }
+  #shortcuts_list button {
+    width: 44px;
+    height: 44px;
+    background-color: #ecc78f;
+    color: #2d1b0c;
+    font: inherit;
+    font-size: 11px;
+  }
+  #shortcuts_list button:hover:not(:disabled) { background-color: #fbe3b0; }
+  #shortcuts_list button:focus-visible { outline: 3px solid #ffd98a; outline-offset: 2px; }
+  #shortcuts_list button:disabled { opacity: 1; background-color: #5a3a20; color: #ecd6aa; filter: none; }
+  ${DESKTOP} {
+    padding: 8px 14px;
+    #shortcuts_list { grid-template-columns: repeat(12, 36px); gap: 8px; }
+    #shortcuts_list button { position: relative; width: 36px; height: 36px; font-size: 10px; }
+    #shortcuts_list button::after { content: ''; position: absolute; top: -4px; right: -4px; bottom: -4px; left: -4px; }
+  }
+  ${FLAT} { grid-template-columns: minmax(0, 1fr); padding: 12px 14px; }
+  ${TRAY} { #shortcuts_list { grid-template-columns: repeat(6, 44px); } }
+  ${PHONE} {
+    > div:last-child { flex-direction: column; align-items: stretch; gap: 8px; }
+    #shortcuts_list { justify-content: center; }
+  }
+`;
+const Assignment = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 10px;
+  font-size: 9px;
+  line-height: 1.8;
+  && span { font-size: inherit; line-height: inherit; color: inherit; text-shadow: none; }
 `;

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

@@ -0,0 +1,102 @@
+import React from 'react';
+import { cleanup, fireEvent, render, screen, act } from '@testing-library/react';
+import { BasicAttribute, CharacterClass, ElementalType, LifeBringerRaces, UserAccountTypes } from '@rpg-engine/shared';
+import { SpellInfo } from '../cards/SpellInfo';
+import { MagicTooltip } from '../cards/SpellTooltip';
+import { SpellInfoWrapper } from '../cards/SpellInfoWrapper';
+import { mockSpells } from '../mockSpells';
+
+jest.mock('../cards/MobileSpellTooltip', () => ({ MobileSpellTooltip: () => <div>Spell details</div> }));
+jest.mock('../../Abstractions/ModalPortal', () => ({
+  __esModule: true, default: ({ children }: { children: React.ReactNode }) => <>{children}</>,
+}));
+afterEach(() => { cleanup(); jest.useRealTimers(); });
+
+it('shows mobile details on hold without casting on release', () => {
+  jest.useFakeTimers();
+  const cast = jest.fn();
+  render(<SpellInfoWrapper spell={mockSpells[0]}><button onClick={cast}>Cast</button></SpellInfoWrapper>);
+  fireEvent.touchStart(screen.getByRole('button'));
+  act(() => { jest.advanceTimersByTime(501); });
+  expect(screen.getByText('Spell details')).toBeTruthy();
+  fireEvent.touchEnd(screen.getByRole('button'));
+  fireEvent.click(screen.getByRole('button'));
+  expect(cast).not.toHaveBeenCalled();
+});
+
+it('cancels a pending hold when scrolling or unmounting', () => {
+  jest.useFakeTimers();
+  const { unmount } = render(<SpellInfoWrapper spell={mockSpells[0]}><button>Cast</button></SpellInfoWrapper>);
+  fireEvent.touchStart(screen.getByRole('button'));
+  fireEvent.touchMove(screen.getByRole('button'));
+  act(() => { jest.advanceTimersByTime(501); });
+  expect(screen.queryByText('Spell details')).toBeNull();
+  fireEvent.touchStart(screen.getByRole('button'));
+  unmount();
+  expect(jest.getTimerCount()).toBe(0);
+});
+
+const row = (label: string) => screen.getByText(label).nextSibling?.textContent;
+
+it('tooltip lists payload metadata with readable labels beside the existing rows', () => {
+  render(<SpellInfo spell={{
+    ...mockSpells[0], minLevelRequired: 12, attribute: BasicAttribute.MagicResistance, minSkillLevelRequired: 4,
+    elementalType: ElementalType.Fire, canSelfTarget: true, isPVPOnly: true,
+    characterClass: [CharacterClass.Druid, CharacterClass.Sorcerer], characterRace: [LifeBringerRaces.Elf],
+    onlyPremiumAccountType: [UserAccountTypes.Free, UserAccountTypes.PremiumGold],
+  }} />);
+  expect(row('Requires Level:')).toBe('12');
+  expect(row('Requires Magic Resistance Level:')).toBe('4');
+  expect(row('Element:')).toBe('Fire');
+  expect(row('Can target self:')).toBe('Yes');
+  expect(row('PvP only:')).toBe('Yes');
+  expect(row('Requires Class:')).toBe('Druid, Sorcerer');
+  expect(row('Requires Race:')).toBe('Elf');
+  expect(row('Eligible account types:')).toBe('Free, Gold');
+  expect(row('Casting Type:')).toBe('Ranged Casting');
+  expect(row('Max Distance Grid:')).toBe('2');
+  expect(screen.getByText(mockSpells[0].description)).toBeTruthy();
+});
+
+it('tooltip never invents metadata the payload does not carry', () => {
+  render(<SpellInfo spell={mockSpells[0]} />);
+  expect(row('Requires Level:')).toBe('1');
+  expect(row('Requires Magic Level:')).toBe('3');
+  ['Element:', 'Can target self:', 'PvP only:', 'Requires Class:', 'Requires Race:', 'Eligible account types:']
+    .forEach(label => expect(screen.queryByText(label)).toBeNull());
+  expect(screen.queryByText(/rarity|tier/i)).toBeNull();
+});
+
+it('opens keyboard details and dismisses them without casting or closing the book', () => {
+  const cast = jest.fn();
+  const bookKey = jest.fn();
+  render(<div onKeyDown={bookKey}><SpellInfoWrapper spell={mockSpells[0]}>
+    <button onClick={cast}>Cast</button>
+  </SpellInfoWrapper></div>);
+  const button = screen.getByRole('button');
+  act(() => button.focus());
+  expect(screen.getByRole('tooltip').style.opacity).toBe('1');
+  fireEvent.keyDown(button, { key: 'Escape' });
+  expect(screen.queryByRole('tooltip')).toBeNull();
+  expect(bookKey).not.toHaveBeenCalled();
+  expect(cast).not.toHaveBeenCalled();
+  act(() => button.blur());
+  fireEvent.touchStart(button);
+  fireEvent.touchEnd(button);
+  act(() => button.focus());
+  expect(screen.getByRole('tooltip')).toBeTruthy();
+  act(() => button.blur());
+  expect(screen.queryByRole('tooltip')).toBeNull();
+});
+
+it('positions focused details visibly without waiting for a mouse movement', () => {
+  const anchor = document.createElement('button');
+  jest.spyOn(anchor, 'getBoundingClientRect').mockReturnValue({
+    x: 100, y: 100, left: 100, right: 150, top: 100, bottom: 140,
+    width: 50, height: 40, toJSON: () => ({}),
+  });
+  render(<MagicTooltip spell={mockSpells[0]} anchor={anchor} />);
+  const tooltip = screen.getByRole('tooltip');
+  expect(tooltip.style.opacity).toBe('1');
+  expect(tooltip.style.transform).toBe('translate(170px, 120px)');
+});