@rpg-engine/long-bow 0.8.237 → 0.8.240

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rpg-engine/long-bow",
-  "version": "0.8.237",
+  "version": "0.8.240",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
@@ -24,7 +24,7 @@
     "build": "tsdx build",
     "test": "tsdx test --passWithNoTests",
     "lint": "tsdx lint",
-    "prepare": "tsdx build",
+    "prepare": "echo skip",
     "size": "size-limit",
     "analyze": "size-limit --why",
     "storybook": "start-storybook -p 6006",
@@ -64,13 +64,19 @@
     "@storybook/addon-links": "6.5.10",
     "@storybook/addons": "6.5.10",
     "@storybook/react": "6.5.10",
+    "@swc/core": "1.3.94",
+    "@swc/jest": "0.2.29",
+    "@testing-library/react": "12.1.5",
     "@types/react": "^18.0.14",
     "@types/react-dom": "^18.0.5",
     "@types/styled-components": "^5.1.24",
     "@types/uuid": "^8.3.4",
+    "@vitejs/plugin-react": "1.3.2",
     "babel-loader": "^8.2.3",
     "babel-plugin-styled-components": "^2.0.6",
     "husky": "^7.0.4",
+    "jest": "29.7.0",
+    "jest-environment-jsdom": "29.7.0",
     "pretty-quick": "^3.1.3",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
@@ -83,18 +89,12 @@
     "tslib": "^2.3.1",
     "typescript": "^4.6.2",
     "uuid": "^8.3.2",
-    "@swc/jest": "0.2.29",
-    "@testing-library/react": "12.1.5",
-    "jest": "29.7.0",
-    "jest-environment-jsdom": "29.7.0",
-    "vite": "2.9.16",
-    "@vitejs/plugin-react": "1.3.2",
-    "@swc/core": "1.3.94"
+    "vite": "2.9.16"
   },
   "dependencies": {
     "@capacitor/core": "^6.1.0",
     "@rollup/plugin-image": "^2.1.1",
-    "@rpg-engine/shared": "^0.10.119",
+    "@rpg-engine/shared": "0.11.37",
     "dayjs": "^1.11.2",
     "font-awesome": "^4.7.0",
     "fs-extra": "^10.1.0",

package/src/components/Item/Inventory/__tests__/itemContainerHelper.spec.ts

@@ -0,0 +1,60 @@
+import {
+  IItem,
+  ISoulGemSchema,
+  ItemContainerType,
+  ItemRarities,
+  ItemSubType,
+  SoulGemCategory,
+  SoulGemsBlueprint,
+} from '@rpg-engine/shared';
+import { generateContextMenu } from '../itemContainerHelper';
+
+const soulGem: ISoulGemSchema = {
+  key: SoulGemsBlueprint.Fire,
+  name: 'Fire Soul Gem',
+  category: SoulGemCategory.Offensive,
+  rarity: ItemRarities.Common,
+  damageBonus: 0.05,
+  cooldownReduction: 0,
+  manaCostReduction: 0,
+  radiusBonus: 0,
+  durationBonus: 0,
+};
+const item = { subType: ItemSubType.SoulGem, soulGem } as IItem;
+const attach = { id: 'attach-soul-gem', text: 'Attach gem' };
+
+describe('Soul Gem inventory context action', () => {
+  it('offers Attach gem exactly once for a carried Soul Gem', () => {
+    expect(
+      generateContextMenu(item, ItemContainerType.Inventory).filter(
+        (action) => action.id === attach.id
+      )
+    ).toEqual([attach]);
+  });
+
+  it.each([
+    ItemContainerType.Depot,
+    ItemContainerType.Loot,
+    ItemContainerType.MapContainer,
+    ItemContainerType.Equipment,
+    null,
+  ])('does not offer attachment outside inventory: %s', (containerType) => {
+    expect(generateContextMenu(item, containerType)).not.toContainEqual(attach);
+  });
+
+  it('requires canonical Soul Gem metadata', () => {
+    expect(
+      generateContextMenu(
+        { ...item, soulGem: undefined },
+        ItemContainerType.Inventory
+      )
+    ).not.toContainEqual(attach);
+  });
+
+  it('requires the Soul Gem subtype', () => {
+    const ordinaryItem = { soulGem } as IItem;
+    expect(
+      generateContextMenu(ordinaryItem, ItemContainerType.Inventory)
+    ).not.toContainEqual(attach);
+  });
+});

package/src/components/Item/Inventory/itemContainerHelper.ts

@@ -8,6 +8,7 @@ import {
   ItemContainerType,
   ItemSocketEvents,
   ItemSocketEventsDisplayLabels,
+  ItemSubType,
   ItemType
 } from '@rpg-engine/shared';
 
@@ -207,5 +208,13 @@ export const generateContextMenu = (
     contextActionMenu.push({ id: ItemSocketEvents.DetachGem, text: "Detach Gems" });
   }
 
+  if (
+    itemContainerType === ItemContainerType.Inventory &&
+    item.subType === ItemSubType.SoulGem &&
+    item.soulGem
+  ) {
+    contextActionMenu.push({ id: 'attach-soul-gem', text: 'Attach gem' });
+  }
+
   return contextActionMenu;
 };

package/src/components/LoginStreak/LoginStreakPanel.tsx

@@ -90,7 +90,7 @@ export const LoginStreakPanel: React.FC<ILoginStreakPanelProps> = ({
           {milestones.map((milestone) => (
             <MilestoneCard key={milestone.day} $reached={milestone.reached}>
               <MilestoneDayLabel>Day {milestone.day}</MilestoneDayLabel>
-              <MilestoneRewardName>{milestone.quantity}x {milestone.itemName}</MilestoneRewardName>
+              <MilestoneRewardName>{milestone.rewards.map(reward => `${reward.quantity}x ${reward.itemName}`).join(', ')}</MilestoneRewardName>
               <MilestoneBadge $reached={milestone.reached}>{milestone.reached ? '✓' : '○'}</MilestoneBadge>
             </MilestoneCard>
           ))}

package/src/components/LoginStreak/__tests__/LoginStreakPanel.spec.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import { cleanup, render, screen } from '@testing-library/react';
+import { LoginStreakPanel } from '../LoginStreakPanel';
+
+jest.mock('../../DraggableContainer', () => ({
+  DraggableContainer: ({ children }: { children: React.ReactNode }) => <>{children}</>,
+}));
+jest.mock('../../SimpleProgressBar', () => ({ SimpleProgressBar: () => null }));
+
+afterEach(cleanup);
+
+it('shows every reward from the shared milestone payload', () => {
+  render(
+    <LoginStreakPanel
+      streak={7}
+      longestStreak={7}
+      xpBonusPercent={15}
+      maxXpBonusPercent={50}
+      maxBonusDay={30}
+      isConsecutive
+      onClose={jest.fn()}
+      milestones={[{
+        day: 7,
+        reached: true,
+        rewards: [
+          { itemKey: 'healing-potion', itemName: 'Healing Potion', quantity: 5 },
+          { itemKey: 'mana-potion', itemName: 'Mana Potion', quantity: 3 },
+        ],
+      }]}
+    />
+  );
+  expect(screen.getByText('5x Healing Potion, 3x Mana Potion')).toBeTruthy();
+});

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/__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}

package/src/stories/Features/loginStreak/LoginStreakPanel.stories.tsx

@@ -16,10 +16,10 @@ export default meta;
 type Story = StoryObj<ILoginStreakPanelProps>;
 
 const mockMilestones: ILoginStreakMilestone[] = [
-  { day: 7, itemName: 'Light Healing Potion', quantity: 5, reached: true },
-  { day: 14, itemName: 'Greater Healing Potion', quantity: 3, reached: true },
-  { day: 21, itemName: 'Light Mana Potion', quantity: 5, reached: false },
-  { day: 30, itemName: 'Greater Mana Potion', quantity: 3, reached: false },
+  { day: 7, rewards: [{ itemKey: 'light-healing-potion', itemName: 'Light Healing Potion', quantity: 5 }], reached: true },
+  { day: 14, rewards: [{ itemKey: 'greater-healing-potion', itemName: 'Greater Healing Potion', quantity: 3 }], reached: true },
+  { day: 21, rewards: [{ itemKey: 'light-mana-potion', itemName: 'Light Mana Potion', quantity: 5 }], reached: false },
+  { day: 30, rewards: [{ itemKey: 'greater-mana-potion', itemName: 'Greater Mana Potion', quantity: 3 }], reached: false },
 ];
 
 const Template = (args: ILoginStreakPanelProps) => (
@@ -53,10 +53,10 @@ export const InProgress: Story = {
     maxBonusDay: 30,
     isConsecutive: true,
     milestones: [
-      { day: 7, itemName: 'Light Healing Potion', quantity: 5, reached: true },
-      { day: 14, itemName: 'Greater Healing Potion', quantity: 3, reached: false },
-      { day: 21, itemName: 'Light Mana Potion', quantity: 5, reached: false },
-      { day: 30, itemName: 'Greater Mana Potion', quantity: 3, reached: false },
+      { day: 7, rewards: [{ itemKey: 'light-healing-potion', itemName: 'Light Healing Potion', quantity: 5 }], reached: true },
+      { day: 14, rewards: [{ itemKey: 'greater-healing-potion', itemName: 'Greater Healing Potion', quantity: 3 }], reached: false },
+      { day: 21, rewards: [{ itemKey: 'light-mana-potion', itemName: 'Light Mana Potion', quantity: 5 }], reached: false },
+      { day: 30, rewards: [{ itemKey: 'greater-mana-potion', itemName: 'Greater Mana Potion', quantity: 3 }], reached: false },
     ],
     milestoneRewardGranted: null,
     onClose: () => console.log('close'),
@@ -88,10 +88,10 @@ export const MilestoneReached: Story = {
     maxBonusDay: 30,
     isConsecutive: true,
     milestones: [
-      { day: 7, itemName: 'Light Healing Potion', quantity: 5, reached: true },
-      { day: 14, itemName: 'Greater Healing Potion', quantity: 3, reached: false },
-      { day: 21, itemName: 'Light Mana Potion', quantity: 5, reached: false },
-      { day: 30, itemName: 'Greater Mana Potion', quantity: 3, reached: false },
+      { day: 7, rewards: [{ itemKey: 'light-healing-potion', itemName: 'Light Healing Potion', quantity: 5 }], reached: true },
+      { day: 14, rewards: [{ itemKey: 'greater-healing-potion', itemName: 'Greater Healing Potion', quantity: 3 }], reached: false },
+      { day: 21, rewards: [{ itemKey: 'light-mana-potion', itemName: 'Light Mana Potion', quantity: 5 }], reached: false },
+      { day: 30, rewards: [{ itemKey: 'greater-mana-potion', itemName: 'Greater Mana Potion', quantity: 3 }], reached: false },
     ],
     milestoneRewardGranted: { itemName: 'Light Healing Potion', quantity: 5 },
     onClose: () => console.log('close'),
@@ -108,10 +108,10 @@ export const MaxBonus: Story = {
     maxBonusDay: 30,
     isConsecutive: true,
     milestones: [
-      { day: 7, itemName: 'Light Healing Potion', quantity: 5, reached: true },
-      { day: 14, itemName: 'Greater Healing Potion', quantity: 3, reached: true },
-      { day: 21, itemName: 'Light Mana Potion', quantity: 5, reached: true },
-      { day: 30, itemName: 'Greater Mana Potion', quantity: 3, reached: true },
+      { day: 7, rewards: [{ itemKey: 'light-healing-potion', itemName: 'Light Healing Potion', quantity: 5 }], reached: true },
+      { day: 14, rewards: [{ itemKey: 'greater-healing-potion', itemName: 'Greater Healing Potion', quantity: 3 }], reached: true },
+      { day: 21, rewards: [{ itemKey: 'light-mana-potion', itemName: 'Light Mana Potion', quantity: 5 }], reached: true },
+      { day: 30, rewards: [{ itemKey: 'greater-mana-potion', itemName: 'Greater Mana Potion', quantity: 3 }], reached: true },
     ],
     milestoneRewardGranted: null,
     onClose: () => console.log('close'),

package/src/stories/Features/quest/QuestList.stories.tsx

@@ -1,4 +1,4 @@
-import { QuestStatus, QuestType } from '@rpg-engine/shared';
+import { IQuest, QuestStatus, QuestType } from '@rpg-engine/shared';
 import { Story } from '@storybook/react';
 import React from 'react';
 import {
@@ -20,7 +20,7 @@ const Template: Story<IQuestListProps> = args => (
 
 export const Default = Template.bind({});
 
-const IQuestMock = [
+const IQuestMock: IQuest[] = [
   {
     _id: '6317996c77f2420047a20b55',
     rewards: [