@rpg-engine/long-bow 0.3.34 → 0.3.35

package/dist/stories/QuickSpells.stories.d.ts

@@ -0,0 +1,5 @@
+import { Meta } from '@storybook/react';
+import { QuickSpellsProps } from '../components/Spellbook/QuickSpells';
+declare const meta: Meta;
+export default meta;
+export declare const Default: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactFramework, QuickSpellsProps>;

package/dist/stories/Spellbook.stories.d.ts

@@ -0,0 +1,5 @@
+import { Meta } from '@storybook/react';
+import { ISpellbookProps } from '../components/Spellbook/Spellbook';
+declare const meta: Meta;
+export default meta;
+export declare const Default: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactFramework, ISpellbookProps>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rpg-engine/long-bow",
-  "version": "0.3.34",
+  "version": "0.3.35",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
@@ -83,7 +83,7 @@
   },
   "dependencies": {
     "@rollup/plugin-image": "^2.1.1",
-    "@rpg-engine/shared": "^0.6.66",
+    "@rpg-engine/shared": "^0.6.71",
     "dayjs": "^1.11.2",
     "font-awesome": "^4.7.0",
     "fs-extra": "^10.1.0",

package/src/components/Spellbook/QuickSpells.tsx

@@ -0,0 +1,116 @@
+import { IRawSpell } from '@rpg-engine/shared';
+import React, { useEffect } from 'react';
+import styled from 'styled-components';
+import { uiColors } from '../../constants/uiColors';
+
+export type QuickSpellsProps = {
+  quickSpells: IRawSpell[];
+  onSpellCast: (spellKey: string) => void;
+  mana: number;
+  isBlockedCastingByKeyboard?: boolean;
+};
+
+export const QuickSpells: React.FC<QuickSpellsProps> = ({
+  quickSpells,
+  onSpellCast,
+  mana,
+  isBlockedCastingByKeyboard = false,
+}) => {
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (isBlockedCastingByKeyboard) return;
+
+      const shortcutIndex = Number(e.key) - 1;
+      if (shortcutIndex >= 0 && shortcutIndex <= 3) {
+        const shortcut = quickSpells[shortcutIndex];
+        if (shortcut?.key && mana >= shortcut?.manaCost) {
+          onSpellCast(shortcut.key);
+        }
+      }
+    };
+
+    window.addEventListener('keydown', handleKeyDown);
+
+    return () => {
+      window.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [quickSpells, isBlockedCastingByKeyboard]);
+
+  return (
+    <List>
+      {Array.from({ length: 4 }).map((_, i) => (
+        <SpellShortcut
+          key={i}
+          onClick={onSpellCast.bind(null, quickSpells[i]?.key)}
+          disabled={mana < quickSpells[i]?.manaCost}
+        >
+          <span className="mana">
+            {quickSpells[i]?.key && quickSpells[i]?.manaCost}
+          </span>
+          <span className="magicWords">
+            {quickSpells[i]?.magicWords.split(' ').map(word => word[0])}
+          </span>
+          <span className="keyboard">{i + 1}</span>
+        </SpellShortcut>
+      ))}
+    </List>
+  );
+};
+
+const SpellShortcut = styled.button`
+  width: 3rem;
+  height: 3rem;
+  background-color: ${uiColors.lightGray};
+  border: 2px solid ${uiColors.darkGray};
+  border-radius: 50%;
+  text-transform: uppercase;
+  font-size: 0.7rem;
+  font-weight: bold;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+
+  .mana {
+    position: absolute;
+    top: -5px;
+    right: 0;
+    font-size: 0.65rem;
+    color: ${uiColors.blue};
+  }
+
+  .magicWords {
+    margin-top: 4px;
+  }
+
+  .keyboard {
+    position: absolute;
+    bottom: -5px;
+    left: 0;
+    font-size: 0.65rem;
+    color: ${uiColors.yellow};
+  }
+
+  &:hover,
+  &:focus {
+    background-color: ${uiColors.darkGray};
+  }
+
+  &:active {
+    background-color: ${uiColors.gray};
+  }
+
+  &:disabled {
+    opacity: 0.5;
+  }
+`;
+
+const List = styled.p`
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  box-sizing: border-box;
+  margin: 0 !important;
+`;

package/src/components/Spellbook/Spell.tsx

@@ -0,0 +1,201 @@
+import { IRawSpell } from '@rpg-engine/shared';
+import React from 'react';
+import styled from 'styled-components';
+import { uiColors } from '../../constants/uiColors';
+import { uiFonts } from '../../constants/uiFonts';
+
+interface Props extends IRawSpell {
+  charMana: number;
+  charMagicLevel: number;
+  onClick?: (spellKey: string) => void;
+  isSettingShortcut?: boolean;
+  spellKey: string;
+}
+
+export const Spell: React.FC<Props> = ({
+  spellKey,
+  name,
+  description,
+  magicWords,
+  manaCost,
+  charMana,
+  charMagicLevel,
+  onClick,
+  isSettingShortcut,
+  minMagicLevelRequired,
+}) => {
+  const disabled = isSettingShortcut
+    ? charMagicLevel < minMagicLevelRequired
+    : manaCost > charMana || charMagicLevel < minMagicLevelRequired;
+
+  return (
+    <Container
+      disabled={disabled}
+      onClick={onClick?.bind(null, spellKey)}
+      isSettingShortcut={isSettingShortcut && !disabled}
+      className="spell"
+    >
+      {disabled && (
+        <Overlay>
+          {charMagicLevel < minMagicLevelRequired
+            ? 'Low magic level'
+            : manaCost > charMana && 'No mana'}
+        </Overlay>
+      )}
+      <SpellImage>{magicWords.split(' ').map(word => word[0])}</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>
+  );
+};
+
+const Container = styled.button<{ isSettingShortcut?: boolean }>`
+  display: block;
+  background: none;
+  border: 2px solid transparent;
+  border-radius: 1rem;
+  width: 100%;
+  display: flex;
+  height: 5rem;
+  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;
+  }
+`;
+
+const SpellImage = styled.div`
+  width: 4rem;
+  height: 4rem;
+  font-size: ${uiFonts.size.xLarge};
+  font-weight: bold;
+  background-color: ${uiColors.darkGray};
+  color: ${uiColors.lightGray};
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  text-transform: uppercase;
+`;
+
+const Info = styled.span`
+  width: 0;
+  flex: 1;
+`;
+
+const Title = styled.p`
+  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;
+  }
+`;
+
+const Description = styled.div`
+  font-size: ${uiFonts.size.small} !important;
+  line-height: 1.1 !important;
+`;
+
+const Divider = styled.div`
+  width: 1px;
+  height: 100%;
+  margin: 0 1rem;
+  background-color: ${uiColors.lightGray};
+`;
+
+const Cost = styled.p`
+  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;
+    }
+  }
+`;
+
+const Overlay = styled.p`
+  margin: 0 !important;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 1rem;
+  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);
+`;

package/src/components/Spellbook/Spellbook.tsx

@@ -0,0 +1,144 @@
+import { IRawSpell } from '@rpg-engine/shared';
+import React, { Fragment, useEffect, 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 '../RPGUIContainer';
+import { Spell } from './Spell';
+import { SpellbookShortcuts } from './SpellbookShortcuts';
+
+export interface ISpellbookProps {
+  onClose?: () => void;
+  onInputFocus?: () => void;
+  onInputBlur?: () => void;
+  spells: IRawSpell[];
+  magicLevel: number;
+  mana: number;
+  onSpellClick: (spellKey: string) => void;
+  setSpellShortcut: (key: string, index: number) => void;
+  spellShortcuts: IRawSpell[];
+  removeSpellShortcut: (index: number) => void;
+}
+
+export const Spellbook: React.FC<ISpellbookProps> = ({
+  onClose,
+  onInputFocus,
+  onInputBlur,
+  spells,
+  magicLevel,
+  mana,
+  onSpellClick,
+  setSpellShortcut,
+  spellShortcuts,
+  removeSpellShortcut,
+}) => {
+  const [search, setSearch] = useState('');
+  const [settingShortcutIndex, setSettingShortcutIndex] = useState(-1);
+
+  useEffect(() => {
+    const handleEscapeClose = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') {
+        onClose?.();
+      }
+    };
+
+    document.addEventListener('keydown', handleEscapeClose);
+
+    return () => {
+      document.removeEventListener('keydown', handleEscapeClose);
+    };
+  }, [onClose]);
+
+  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);
+  };
+
+  return (
+    <DraggableContainer
+      type={RPGUIContainerTypes.Framed}
+      onCloseButton={onClose}
+      width="inherit"
+      height="inherit"
+      cancelDrag="#spellbook-search, #shortcuts_list, .spell"
+    >
+      <Container>
+        <Title>Learned Spells</Title>
+
+        <SpellbookShortcuts
+          setSettingShortcutIndex={setSettingShortcutIndex}
+          settingShortcutIndex={settingShortcutIndex}
+          shortcuts={spellShortcuts}
+          removeShortcut={removeSpellShortcut}
+        />
+
+        <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
+                charMana={mana}
+                charMagicLevel={magicLevel}
+                onClick={
+                  settingShortcutIndex !== -1 ? setShortcut : onSpellClick
+                }
+                spellKey={spell.key}
+                isSettingShortcut={settingShortcutIndex !== -1}
+                {...spell}
+              />
+            </Fragment>
+          ))}
+        </SpellList>
+      </Container>
+    </DraggableContainer>
+  );
+};
+
+const Title = styled.h1`
+  font-size: ${uiFonts.size.large} !important;
+  margin-bottom: 0 !important;
+`;
+
+const Container = styled.div`
+  width: 100%;
+  height: 100%;
+  color: white;
+  display: flex;
+  flex-direction: column;
+`;
+
+const SpellList = styled.div`
+  width: 100%;
+  min-height: 0;
+  flex: 1;
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+  margin-top: 1rem;
+`;

package/src/components/Spellbook/SpellbookShortcuts.tsx

@@ -0,0 +1,77 @@
+import { IRawSpell } from '@rpg-engine/shared';
+import React from 'react';
+import styled from 'styled-components';
+import { uiColors } from '../../constants/uiColors';
+
+type Props = {
+  setSettingShortcutIndex: (index: number) => void;
+  settingShortcutIndex: number;
+  shortcuts: IRawSpell[];
+  removeShortcut: (index: number) => void;
+};
+
+export const SpellbookShortcuts: React.FC<Props> = ({
+  setSettingShortcutIndex,
+  settingShortcutIndex,
+  shortcuts,
+  removeShortcut,
+}) => (
+  <List id="shortcuts_list">
+    Spells shortcuts:
+    {Array.from({ length: 4 }).map((_, i) => (
+      <SpellShortcut
+        key={i}
+        onClick={() => {
+          removeShortcut(i);
+          if (!shortcuts[i]?.key) setSettingShortcutIndex(i);
+        }}
+        disabled={settingShortcutIndex !== -1 && settingShortcutIndex !== i}
+        isBeingSet={settingShortcutIndex === i}
+      >
+        <span>{shortcuts[i]?.magicWords.split(' ').map(word => word[0])}</span>
+      </SpellShortcut>
+    ))}
+  </List>
+);
+const SpellShortcut = styled.button<{ isBeingSet?: boolean }>`
+  width: 2.6rem;
+  height: 2.6rem;
+  background-color: ${uiColors.lightGray};
+  border: 2px solid
+    ${({ isBeingSet }) => (isBeingSet ? uiColors.yellow : uiColors.darkGray)};
+  border-radius: 50%;
+  text-transform: uppercase;
+  font-size: 0.7rem;
+  font-weight: bold;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  span {
+    margin-top: 4px;
+  }
+
+  &:hover,
+  &:focus {
+    background-color: ${uiColors.darkGray};
+  }
+
+  &:active {
+    background-color: ${uiColors.gray};
+  }
+
+  &:disabled {
+    opacity: 0.5;
+  }
+`;
+
+const List = styled.p`
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 0.5rem;
+  padding: 0.5rem;
+  box-sizing: border-box;
+  margin: 0 !important;
+`;

package/src/components/Spellbook/constants.ts

@@ -0,0 +1,12 @@
+import { IRawSpell } from '@rpg-engine/shared';
+
+export const SPELL_SHORTCUTS_STORAGE_KEY = 'spellShortcuts';
+
+export const defaultSpellShortcut: IRawSpell = {
+  key: '',
+  manaCost: 0,
+  magicWords: '',
+  name: '',
+  description: '',
+  minMagicLevelRequired: 0,
+};

package/src/components/Spellbook/mockSpells.ts

@@ -0,0 +1,60 @@
+import { IRawSpell } from '@rpg-engine/shared';
+
+enum SpellsBlueprint {
+  SelfHealingSpell = 'self-healing-spell',
+  FoodCreationSpell = 'food-creation-spell',
+  ArrowCreationSpell = 'arrow-creation-spell',
+  BoltCreationSpell = 'bolt-creation-spell',
+  BlankRuneCreationSpell = 'blank-rune-creation-spell',
+  SelfHasteSpell = 'self-haste-spell',
+  FireRuneCreationSpell = 'fire-rune-creation-spell',
+  HealRuneCreationSpell = 'healing-rune-creation-spell',
+  PoisonRuneCreationSpell = 'poison-rune-creation-spell',
+  DarkRuneCreationSpell = 'dark-rune-creation-spell',
+  GreaterHealingSpell = 'greater-healing-spell',
+  EnergyBoltCreationSpell = 'energy-bolt-creation-spell',
+  FireBoltCreationSpell = 'fire-bolt-creation-spell',
+}
+
+export const mockSpells: IRawSpell[] = [
+  {
+    key: SpellsBlueprint.ArrowCreationSpell,
+    name: 'Arrow Creation Spell',
+    description: 'A spell that creates arrow in your inventory.',
+    magicWords: 'iquar elandi',
+    manaCost: 10,
+    minMagicLevelRequired: 3,
+  },
+  {
+    key: SpellsBlueprint.BlankRuneCreationSpell,
+    name: 'Blank Rune Creation Spell',
+    description: 'A spell that creates a blank rune in your inventory.',
+    magicWords: 'iquar ansr ki',
+    manaCost: 5,
+    minMagicLevelRequired: 3,
+  },
+  {
+    key: SpellsBlueprint.BoltCreationSpell,
+    name: 'Bolt Creation Spell',
+    description: 'A spell that creates bolt in your inventory.',
+    magicWords: 'iquar lyn',
+    manaCost: 15,
+    minMagicLevelRequired: 3,
+  },
+  {
+    key: SpellsBlueprint.SelfHasteSpell,
+    name: 'Self Haste Spell',
+    description: 'A self haste spell.',
+    magicWords: 'talas hiz',
+    manaCost: 40,
+    minMagicLevelRequired: 5,
+  },
+  {
+    key: SpellsBlueprint.SelfHealingSpell,
+    name: 'Self Healing Spell',
+    description: 'A self healing spell.',
+    magicWords: 'talas faenya',
+    manaCost: 10,
+    minMagicLevelRequired: 1,
+  },
+];

package/src/index.tsx

@@ -29,6 +29,8 @@ export * from './components/RPGUIRoot';
 export * from './components/shared/SpriteFromAtlas';
 export * from './components/SkillProgressBar';
 export * from './components/SkillsContainer';
+export * from './components/Spellbook/QuickSpells';
+export * from './components/Spellbook/Spellbook';
 export * from './components/TextArea';
 export * from './components/TimeWidget/TimeWidget';
 export * from './components/TradingMenu/TradingMenu';

package/src/stories/QuickSpells.stories.tsx

@@ -0,0 +1,38 @@
+import { Meta, Story } from '@storybook/react';
+import React from 'react';
+import { RPGUIRoot } from '../components/RPGUIRoot';
+import { SPELL_SHORTCUTS_STORAGE_KEY } from '../components/Spellbook/constants';
+import {
+  QuickSpells,
+  QuickSpellsProps,
+} from '../components/Spellbook/QuickSpells';
+
+const meta: Meta = {
+  title: 'QuickSpells',
+  component: QuickSpells,
+};
+
+export default meta;
+
+const Template: Story<QuickSpellsProps> = args => {
+  return (
+    <RPGUIRoot>
+      <div
+        style={{
+          width: '100%',
+        }}
+      >
+        <QuickSpells {...args} />
+      </div>
+    </RPGUIRoot>
+  );
+};
+
+export const Default = Template.bind({});
+Default.args = {
+  onSpellCast: spellKey => console.log(spellKey),
+  quickSpells: JSON.parse(
+    localStorage.getItem(SPELL_SHORTCUTS_STORAGE_KEY) as string
+  ),
+  mana: 100,
+};