@rpg-engine/long-bow 0.3.42 → 0.3.44

package/src/components/Spellbook/QuickSpells.tsx

@@ -1,120 +0,0 @@
-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>
-  );
-};
-
-export 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;
-
-  span {
-    pointer-events: none;
-  }
-
-  .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

@@ -1,201 +0,0 @@
-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

@@ -1,144 +0,0 @@
-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

@@ -1,77 +0,0 @@
-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

@@ -1,12 +0,0 @@
-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

@@ -1,60 +0,0 @@
-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,
-  },
-];