@rpg-engine/long-bow 0.8.235 → 0.8.237

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rpg-engine/long-bow",
-  "version": "0.8.235",
+  "version": "0.8.237",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
@@ -30,7 +30,10 @@
     "storybook": "start-storybook -p 6006",
     "build-storybook": "build-storybook",
     "configure": "./environment/download-credentials.sh",
-    "update:shared-deps": "yarn add @rpg-engine/shared"
+    "update:shared-deps": "yarn add @rpg-engine/shared",
+    "preview:spellbook": "vite --config scripts/preview-spellbook/vite.config.ts",
+    "verify:spellbook": "jest --config jest.spellbook.config.js --runInBand && tsc -p tsconfig.spellbook.json",
+    "verify": "yarn verify:spellbook && tsc --noEmit"
   },
   "peerDependencies": {
     "react": ">=16"
@@ -79,7 +82,14 @@
     "tsdx": "^0.14.1",
     "tslib": "^2.3.1",
     "typescript": "^4.6.2",
-    "uuid": "^8.3.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"
   },
   "dependencies": {
     "@capacitor/core": "^6.1.0",

package/src/components/Shortcuts/ShortcutsSetter.tsx

@@ -85,13 +85,16 @@ export const ShortcutsSetter: React.FC<ShortcutsSetterProps> = ({
         {Array.from({ length: 12 }).map((_, i) => (
           <Shortcut
             key={i}
-            onPointerDown={() => {
+            type="button"
+            aria-label={`${shortcuts[i]?.payload ? 'Clear' : 'Set'} shortcut ${i + 1}`}
+            onClick={() => {
               if (settingShortcutIndex !== -1) setSettingShortcutIndex(-1);
 
+              const wasEmpty = !shortcuts[i] || shortcuts[i].type === ShortcutType.None;
               removeShortcut(i);
               if (
                 settingShortcutIndex === -1 &&
-                (!shortcuts[i] || shortcuts[i].type === ShortcutType.None)
+                wasEmpty
               )
                 setSettingShortcutIndex(i);
             }}
@@ -99,7 +102,7 @@ export const ShortcutsSetter: React.FC<ShortcutsSetterProps> = ({
             isBeingSet={settingShortcutIndex === i}
             id={`shortcutSetter_${i}`}
           >
-            {getContent(i)}
+            {getContent(i) || i + 1}
           </Shortcut>
         ))}
       </List>

package/src/components/Spellbook/Spell.tsx

@@ -1,8 +1,6 @@
-import { ISpell } from '@rpg-engine/shared';
+import { ISpell, ItemRarities } from '@rpg-engine/shared';
 import React from 'react';
-import styled from 'styled-components';
-import { uiColors } from '../../constants/uiColors';
-import { uiFonts } from '../../constants/uiFonts';
+import styled, { css } from 'styled-components';
 import { SpriteFromAtlas } from '../shared/SpriteFromAtlas';
 import { SpellInfoWrapper } from './cards/SpellInfoWrapper';
 
@@ -18,271 +16,234 @@ export interface ISpellProps {
   spellKey: string;
   spell: ISpell;
   activeCooldown?: number;
+  // Rarity the character's copy of this spell was learned at. Absent means unknown, never Common.
+  rarity?: ItemRarities;
 }
 
-const SKILL_NAMES: Record<string, string> = {
-  magicLevel: 'magic level',
-  distanceFighting: 'distance fighting',
-  swordFighting: 'sword fighting',
-  axeFighting: 'axe fighting',
-  clubFighting: 'club fighting',
-  shielding: 'shielding',
-  fishing: 'fishing',
-  cooking: 'cooking',
-  fistFighting: 'fist fighting',
-};
-
-const getSkillName = (attribute: string): string => {
-  return SKILL_NAMES[attribute] || attribute;
-};
+// 'strength' -> 'Strength', 'magicResistance' -> 'Magic Resistance'
+const skillLabel = (skill: string): string =>
+  skill.replace(/([a-z])([A-Z])/g, '$1 $2').replace(/\b[a-z]/g, letter => letter.toUpperCase());
 
 export const Spell: React.FC<ISpellProps> = ({
-  atlasIMG,
-  atlasJSON,
-  spellKey,
-  charMana,
-  charMagicLevel,
-  charSkillLevels,
-  onPointerUp,
-  onClick,
-  isSettingShortcut,
-  spell,
-  activeCooldown,
+  atlasIMG, atlasJSON, spellKey, charMana, charMagicLevel, charSkillLevels,
+  onPointerUp, onClick, isSettingShortcut, spell, activeCooldown = 0, rarity,
 }) => {
-  const {
-    manaCost,
-    minMagicLevelRequired,
-    minSkillLevelRequired,
-    attribute,
-    magicWords,
-    name,
-    description,
-  } = spell;
-
-  const getRequiredLevel = (): number => {
-    return minSkillLevelRequired ?? minMagicLevelRequired;
-  };
-
-  const getCharacterSkillLevel = (): number => {
-    if (attribute && charSkillLevels) {
-      return charSkillLevels[attribute] ?? 0;
-    }
-    return charMagicLevel;
-  };
-
-  const requiredLevel = getRequiredLevel();
-  const characterSkillLevel = getCharacterSkillLevel();
-  const disabled = isSettingShortcut
-    ? characterSkillLevel < requiredLevel
-    : manaCost > charMana || characterSkillLevel < requiredLevel;
-
-  const CONTAINER_STYLE = { width: '32px', height: '32px' };
-  const IMAGE_SCALE = 2;
-
+  const { manaCost, minMagicLevelRequired, minSkillLevelRequired, attribute, magicWords, name, description } = spell;
+  const usesAttribute = !!attribute && minSkillLevelRequired !== undefined;
+  const requiredLevel = usesAttribute ? minSkillLevelRequired! : minMagicLevelRequired;
+  const skillLevel = usesAttribute && charSkillLevels ? charSkillLevels[attribute!] ?? 0 : charMagicLevel;
+  const skillName = usesAttribute ? attribute! : 'magic';
+  const lacksSkill = skillLevel < requiredLevel;
+  const lacksMana = !isSettingShortcut && manaCost > charMana;
+  const cooling = !isSettingShortcut && activeCooldown > 0;
+  const unavailable = lacksSkill || lacksMana || cooling;
+  // An unmet requirement is already spelled out (and flagged) by its own row, so only mana, cooldown
+  // and shortcut assignment need a note. A ready card has none: clicking it casts.
+  const note = lacksSkill ? ''
+    : lacksMana ? 'Not enough mana'
+    : cooling ? `Ready in ${activeCooldown.toFixed(activeCooldown < 10 ? 1 : 0)}s`
+    : isSettingShortcut ? 'Select to assign' : '';
+  const knownRarity = rarity && Object.values(ItemRarities).includes(rarity) ? rarity : undefined;
+  const descriptionId = `spell-description-${spellKey}`;
+  const factsId = `spell-facts-${spellKey}`;
+  const statusId = `spell-status-${spellKey}`;
+  const rarityId = `spell-rarity-${spellKey}`;
   const handleClick = onClick ?? onPointerUp;
 
   return (
     <SpellInfoWrapper spell={spell}>
-      <Container
-        onClick={handleClick?.bind(null, spellKey)}
-        isSettingShortcut={isSettingShortcut && !disabled}
+      <Card
+        type="button"
         className="spell"
+        aria-label={`${isSettingShortcut ? 'Assign' : 'Cast'} ${name}`}
+        aria-describedby={`${knownRarity ? `${rarityId} ` : ''}${descriptionId} ${factsId}${note ? ` ${statusId}` : ''} spell-details-${spellKey}`}
+        disabled={unavailable}
+        $assigning={!!isSettingShortcut}
+        onClick={() => handleClick?.(spellKey)}
       >
-        {disabled && (
-          <Overlay>
-            {characterSkillLevel < requiredLevel
-              ? `Low ${getSkillName(attribute || 'magic level')} level`
-              : manaCost > charMana && 'No mana'}
-          </Overlay>
-        )}
-        <SpellImage>
-          {activeCooldown && activeCooldown > 0 ? (
-            <span className="cooldown">
-              {activeCooldown.toFixed(activeCooldown > 10 ? 0 : 1)}
-            </span>
-          ) : null}
-          <SpriteFromAtlas
-            atlasIMG={atlasIMG}
-            atlasJSON={atlasJSON}
-            spriteKey={spell.texturePath ?? ''}
-            imgScale={IMAGE_SCALE}
-            containerStyle={CONTAINER_STYLE}
-            centered
-          />
-        </SpellImage>
-        <Info>
-          <Title>
-            <span>{name}</span>
-            <span className="spell">({magicWords})</span>
-          </Title>
-          <Description>{description}</Description>
-        </Info>
-
-        <Divider />
-        <Cost>
-          <span>Mana cost:</span>
-          <span className="mana">{manaCost}</span>
-        </Cost>
-      </Container>
+        <Heading>
+          <Icon aria-hidden="true">
+            <SpriteFromAtlas atlasIMG={atlasIMG} atlasJSON={atlasJSON}
+              spriteKey={spell.texturePath ?? ''} imgScale={1.5}
+              width={40} height={40} centered />
+          </Icon>
+          <Name><strong>{name}</strong></Name>
+        </Heading>
+        <Meta>
+          <Words>{magicWords}</Words>
+          {knownRarity && <Rarity id={rarityId} data-rarity={knownRarity} $rarity={knownRarity}>{knownRarity}</Rarity>}
+        </Meta>
+        <Description id={descriptionId}>{description}</Description>
+        <Facts id={factsId}>
+          <Requirement $unmet={lacksSkill}>{`Requires ${skillLabel(skillName)} ${requiredLevel}`}</Requirement>
+          <Stats>
+            <Stat><Label>Mana cost</Label><Value $tone={lacksMana ? 'bad' : 'mana'}>{manaCost}</Value></Stat>
+            <Stat><Label>Cooldown</Label><Value>{`${spell.cooldown}s`}</Value></Stat>
+          </Stats>
+        </Facts>
+        {note && <Status id={statusId} $unavailable={unavailable}>{note}</Status>}
+      </Card>
     </SpellInfoWrapper>
   );
 };
 
-const Container = styled.button<{ isSettingShortcut?: boolean }>`
-  display: block;
-  background: none;
-  border: 2px solid transparent;
-  border-radius: 1rem;
+const Card = styled.button<{ $assigning: boolean }>`
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  flex: 1 1 auto;
   width: 100%;
+  min-width: 0;
+  padding: 7px 8px 8px;
+  text-align: left;
+  color: #392718;
+  background: rgba(255, 247, 215, 0.5);
+  border: 1px solid ${({ $assigning }) => $assigning ? '#8a5a14' : 'rgba(89, 56, 28, .4)'};
+  box-shadow: ${({ $assigning }) => $assigning ? 'inset 0 0 0 1px #8a5a14' : 'none'};
+  border-radius: 3px;
+  font: inherit;
+  cursor: pointer;
+  transition: background .12s, border-color .12s;
+  &: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 */
+  &&:disabled { cursor: default; background: rgba(113, 81, 49, .1); border-style: dashed; color: #392718; filter: none; }
+  &:disabled img, &:disabled canvas { opacity: .55; }
+`;
+const Heading = styled.span`
   display: flex;
-
-  gap: 1rem;
   align-items: center;
-  padding: 0 1rem;
-  text-align: left;
-  position: relative;
-
-  animation: ${({ isSettingShortcut }) =>
-    isSettingShortcut ? 'border-color-change 1s infinite' : 'none'};
-
-  @keyframes border-color-change {
-    0% {
-      border-color: ${uiColors.yellow};
-    }
-    50% {
-      border-color: transparent;
-    }
-    100% {
-      border-color: ${uiColors.yellow};
-    }
-  }
-
-  &:hover,
-  &:focus {
-    background-color: ${uiColors.darkGray};
-  }
-
-  &:active {
-    background: none;
-  }
+  gap: 8px;
 `;
-
-const SpellImage = styled.div`
-  width: 4rem;
-  height: 4rem;
-  font-size: ${uiFonts.size.xLarge};
-  font-weight: bold;
-  background-color: ${uiColors.darkGray};
-  color: ${uiColors.lightGray};
+const Icon = styled.span`
   display: flex;
-  justify-content: center;
+  flex: 0 0 40px;
+  height: 40px;
   align-items: center;
-  text-transform: uppercase;
-  position: relative;
+  justify-content: center;
   overflow: hidden;
-
-  .cooldown {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background-color: rgba(0 0 0 / 20%);
-    color: ${uiColors.darkYellow};
-    font-weight: bold;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-  }
+  background: rgba(72, 43, 21, .18);
+  border: 1px solid rgba(72, 43, 21, .35);
+  border-radius: 3px;
+  image-rendering: pixelated;
 `;
-
-const Info = styled.span`
-  width: 0;
+// The game client's RPGUI `.rpgui-content span` rule (0,1,1) forces white outlined 22px text;
+// the doubled `&&` class (0,2,0) keeps the parchment typography below.
+const Name = styled.span`
   flex: 1;
-
-  @media (orientation: portrait) {
-    display: none;
-  }
+  min-width: 0;
+  strong { font-weight: normal; overflow-wrap: anywhere; }
+  /* the block's own font-size sets its line-box strut: match the name so two-line names stay 29px */
+  && { font-size: 11px; line-height: 1.3; color: #392718; text-shadow: none; }
 `;
-const Title = styled.p`
+// One strip under the heading, so every card has the same rows whether or not it carries a rarity: the magic
+// words on the left and, when the character's copy has a known rarity, its badge on the right. The badge
+// drops to its own line only when the pair does not fit the card width.
+const Meta = styled.span`
   display: flex;
   flex-wrap: wrap;
   align-items: center;
-  margin-bottom: 5px;
-  margin: 0;
-
-  span {
-    font-size: ${uiFonts.size.medium} !important;
-    font-weight: bold !important;
-    color: ${uiColors.yellow} !important;
-    margin-right: 0.5rem;
-  }
-
-  .spell {
-    font-size: ${uiFonts.size.small} !important;
-    font-weight: normal !important;
-    color: ${uiColors.lightGray} !important;
+  justify-content: space-between;
+  gap: 3px 6px;
+  margin-top: 5px;
+  /* RPGUI's span rule would give this wrapper a 22px line */
+  && { line-height: 1.4; }
+`;
+const Words = styled.span`
+  display: block;
+  min-width: 0;
+  overflow-wrap: anywhere;
+  && { font-size: 9px; line-height: inherit; color: #6b4d32; text-shadow: none; }
+`;
+// Item palette hues (Item/Inventory/ItemSlotRarity) with the type inked darker for >= 4.5:1 on parchment.
+// The label always carries the rarity; colour only reinforces it.
+const RARITY_INK: Record<ItemRarities, string> = {
+  [ItemRarities.Common]: '#5a3f27',
+  [ItemRarities.Uncommon]: '#1e5e1e',
+  [ItemRarities.Rare]: '#1d4580',
+  [ItemRarities.Epic]: '#6a1b8f',
+  [ItemRarities.Legendary]: '#7a4f00',
+};
+const Rarity = styled.span<{ $rarity: ItemRarities }>`
+  display: inline-block;
+  flex: none;
+  padding: 1px 5px;
+  border: 1px solid ${({ $rarity }) => RARITY_INK[$rarity]};
+  border-radius: 2px;
+  background: rgba(255, 250, 229, .7);
+  && { font-size: 9px; line-height: 1.3; color: ${({ $rarity }) => RARITY_INK[$rarity]}; text-shadow: none; }
+`;
+const Description = styled.span`
+  display: block;
+  margin: 6px 0 5px;
+  overflow-wrap: anywhere;
+  && { font-size: 10px; line-height: 1.5; color: #392718; text-shadow: none; }
+  /* Art book (> 960px, see FLAT in Spellbook.tsx): four cards across, all as tall as the tallest, so one long
+     description would stretch every card. Clamp to three lines; the full text stays in the DOM (aria-describedby)
+     and in the hover / touch-hold tooltip. Flat and phone layouts show it all. */
+  @media (min-width: 961px) {
+    display: -webkit-box;
+    -webkit-line-clamp: 3;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
   }
 `;
-
-const Description = styled.div`
-  font-size: ${uiFonts.size.small} !important;
-  line-height: 1.1 !important;
+// Sits straight under the description (a 5px margin, the rule and 5px of padding): the card is stretched to the
+// tallest on the page, so a shorter card keeps its facts here and leaves the spare height below them.
+const Facts = styled.span`
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding-top: 5px;
+  border-top: 1px solid rgba(89, 56, 28, .25);
 `;
-
-const Divider = styled.div`
-  width: 1px;
-  height: 100%;
-  margin: 0 1rem;
-  background-color: ${uiColors.lightGray};
+// An unmet requirement gets a red bar and tint as well as red type, so it never relies on hue alone.
+const Requirement = styled.span<{ $unmet: boolean }>`
+  display: block;
+  && { font-size: 9px; line-height: 1.5; color: #392718; text-shadow: none; }
+  ${({ $unmet }) => $unmet && css`
+    padding: 3px 6px;
+    background: rgba(138, 42, 34, .12);
+    border-left: 3px solid #8a2a22;
+    border-radius: 2px;
+    && { color: #8a2a22; }
+  `}
 `;
-
-const Cost = styled.p`
+const Stats = styled.span`
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 4px 8px;
+`;
+const Stat = styled.span`
   display: flex;
-  align-items: center;
   flex-direction: column;
-  gap: 0.5rem;
-
-  div {
-    z-index: 1;
-  }
-
-  .mana {
-    position: relative;
-    font-size: ${uiFonts.size.medium};
-    font-weight: bold;
-    z-index: 1;
-
-    &::after {
-      position: absolute;
-      content: '';
-      top: 0;
-      left: 0;
-      background-color: ${uiColors.blue};
-      width: 100%;
-      height: 100%;
-      border-radius: 50%;
-      transform: scale(1.8);
-      filter: blur(10px);
-      z-index: -1;
-    }
-  }
+  gap: 2px;
+  min-width: 0;
 `;
-
-const Overlay = styled.p`
-  margin: 0 !important;
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  border-radius: 1rem;
+const Label = styled.span`
+  && { font-size: 9px; line-height: 1.4; color: #5a3f27; text-shadow: none; }
+`;
+const STAT_TONES = { mana: '#1d4580', bad: '#8a2a22' };
+const Value = styled.span<{ $tone?: 'mana' | 'bad' }>`
+  && { font-size: 10px; line-height: 1.4; color: ${({ $tone }) => $tone ? STAT_TONES[$tone] : '#2a1708'}; text-shadow: none; }
+`;
+const Status = styled.span<{ $unavailable: boolean }>`
   display: flex;
-  justify-content: center;
   align-items: center;
-  color: ${uiColors.yellow};
-  font-size: ${uiFonts.size.large} !important;
-  font-weight: bold;
-  z-index: 10;
-  background-color: rgba(0 0 0 / 0.2);
+  gap: 6px;
+  margin-top: 4px;
+  && {
+    font-size: 9px;
+    line-height: 1.5;
+    color: ${({ $unavailable }) => $unavailable ? '#8a2a22' : '#4b4420'};
+    text-shadow: none;
+  }
+  &::before {
+    content: '';
+    flex: none;
+    width: 6px;
+    height: 6px;
+    background: currentColor;
+    clip-path: ${({ $unavailable }) => $unavailable ? 'none' : 'polygon(0 0, 100% 50%, 0 100%)'};
+  }
 `;