@rpg-engine/long-bow 0.3.53 → 0.3.55

package/src/components/Shortcuts/Shortcuts.tsx

@@ -1,129 +0,0 @@
-import {
-  getItemTextureKeyPath,
-  IItem,
-  IItemContainer,
-  IRawSpell,
-  IShortcut,
-  ShortcutType,
-} from '@rpg-engine/shared';
-import React, { useEffect } from 'react';
-import styled from 'styled-components';
-import { SpriteFromAtlas } from '../shared/SpriteFromAtlas';
-import { SingleShortcut } from './SingleShortcut';
-
-export type ShortcutsProps = {
-  shortcuts: IShortcut[];
-  onShortcutCast: (index: number) => void;
-  mana: number;
-  isBlockedCastingByKeyboard?: boolean;
-  inventory?: IItemContainer | null;
-  atlasJSON: any;
-  atlasIMG: any;
-};
-
-export const Shortcuts: React.FC<ShortcutsProps> = ({
-  shortcuts,
-  onShortcutCast,
-  mana,
-  isBlockedCastingByKeyboard = false,
-  atlasJSON,
-  atlasIMG,
-  inventory,
-}) => {
-  useEffect(() => {
-    const handleKeyDown = (e: KeyboardEvent) => {
-      if (isBlockedCastingByKeyboard) return;
-
-      const shortcutIndex = Number(e.key) - 1;
-      if (shortcutIndex >= 0 && shortcutIndex <= 5) {
-        onShortcutCast(shortcutIndex);
-      }
-    };
-
-    window.addEventListener('keydown', handleKeyDown);
-
-    return () => {
-      window.removeEventListener('keydown', handleKeyDown);
-    };
-  }, [shortcuts, isBlockedCastingByKeyboard]);
-
-  return (
-    <List>
-      {Array.from({ length: 6 }).map((_, i) => {
-        if (shortcuts[i]?.type === ShortcutType.Item) {
-          const payload = shortcuts[i]?.payload as IItem | undefined;
-
-          let itemsFromEquipment: (IItem | undefined | null)[] = [];
-
-          if (inventory) {
-            Object.keys(inventory.slots).forEach(i => {
-              const index = parseInt(i);
-
-              if (inventory.slots[index]?.key === payload?.key) {
-                itemsFromEquipment.push(inventory.slots[index]);
-              }
-            });
-          }
-
-          const totalQty = itemsFromEquipment.reduce(
-            (acc, item) => acc + (item?.stackQty || 1),
-            0
-          );
-
-          return (
-            <SingleShortcut
-              key={i}
-              onClick={onShortcutCast.bind(null, i)}
-              disabled={false}
-            >
-              {payload && (
-                <SpriteFromAtlas
-                  atlasIMG={atlasIMG}
-                  atlasJSON={atlasJSON}
-                  spriteKey={getItemTextureKeyPath(
-                    {
-                      key: payload.texturePath,
-                      texturePath: payload.texturePath,
-                      stackQty: payload.stackQty || 1,
-                    },
-                    atlasJSON
-                  )}
-                  width={32}
-                  height={32}
-                />
-              )}
-              <span className="qty">{totalQty}</span>
-              <span className="keyboard">{i + 1}</span>
-            </SingleShortcut>
-          );
-        }
-
-        const payload = shortcuts[i]?.payload as IRawSpell | undefined;
-
-        return (
-          <SingleShortcut
-            key={i}
-            onClick={onShortcutCast.bind(null, i)}
-            disabled={mana < (payload?.manaCost ?? 0)}
-          >
-            <span className="mana">{payload && payload.manaCost}</span>
-            <span className="magicWords">
-              {payload?.magicWords.split(' ').map(word => word[0])}
-            </span>
-            <span className="keyboard">{i + 1}</span>
-          </SingleShortcut>
-        );
-      })}
-    </List>
-  );
-};
-
-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/Shortcuts/ShortcutsSetter.tsx

@@ -1,132 +0,0 @@
-import {
-  getItemTextureKeyPath,
-  IItem,
-  IRawSpell,
-  IShortcut,
-  ShortcutType,
-} from '@rpg-engine/shared';
-import React from 'react';
-import styled from 'styled-components';
-import { uiColors } from '../../constants/uiColors';
-import { SpriteFromAtlas } from '../shared/SpriteFromAtlas';
-
-type ShortcutsSetterProps = {
-  setSettingShortcutIndex: (index: number) => void;
-  settingShortcutIndex: number;
-  shortcuts: IShortcut[];
-  removeShortcut: (index: number) => void;
-  atlasJSON: any;
-  atlasIMG: any;
-};
-
-export const ShortcutsSetter: React.FC<ShortcutsSetterProps> = ({
-  setSettingShortcutIndex,
-  settingShortcutIndex,
-  shortcuts,
-  removeShortcut,
-  atlasJSON,
-  atlasIMG,
-}) => {
-  const getContent = (index: number) => {
-    if (shortcuts[index]?.type === ShortcutType.Item) {
-      const payload = shortcuts[index]?.payload as IItem | undefined;
-
-      if (!payload) return null;
-
-      return (
-        <SpriteFromAtlas
-          atlasIMG={atlasIMG}
-          atlasJSON={atlasJSON}
-          spriteKey={getItemTextureKeyPath(
-            {
-              key: payload.texturePath,
-              texturePath: payload.texturePath,
-              stackQty: payload.stackQty || 1,
-            },
-            atlasJSON
-          )}
-          width={32}
-          height={32}
-          imgScale={1.6}
-          imgStyle={{ left: '5px' }}
-        />
-      );
-    }
-
-    const payload = shortcuts[index]?.payload as IRawSpell | undefined;
-
-    return <span>{payload?.magicWords.split(' ').map(word => word[0])}</span>;
-  };
-
-  return (
-    <Container>
-      <p>Shortcuts:</p>
-      <List id="shortcuts_list">
-        {Array.from({ length: 6 }).map((_, i) => (
-          <Shortcut
-            key={i}
-            onClick={() => {
-              removeShortcut(i);
-              if (!shortcuts[i] || shortcuts[i].type === ShortcutType.None)
-                setSettingShortcutIndex(i);
-            }}
-            disabled={settingShortcutIndex !== -1 && settingShortcutIndex !== i}
-            isBeingSet={settingShortcutIndex === i}
-          >
-            {getContent(i)}
-          </Shortcut>
-        ))}
-      </List>
-    </Container>
-  );
-};
-
-const Container = styled.div`
-  p {
-    margin: 0;
-    margin-left: 0.5rem;
-  }
-`;
-
-const Shortcut = 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.div`
-  width: 100%;
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  padding-bottom: 0.5rem;
-  padding-left: 0.5rem;
-  box-sizing: border-box;
-  margin: 0 !important;
-`;

package/src/components/Shortcuts/SingleShortcut.ts

@@ -1,61 +0,0 @@
-import styled from 'styled-components';
-import { uiColors } from '../../constants/uiColors';
-
-export const SingleShortcut = 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};
-  }
-
-  .qty {
-    position: absolute;
-    top: -5px;
-    right: 0;
-    font-size: 0.65rem;
-  }
-
-  .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;
-  }
-`;

package/src/stories/Shortcuts.stories.tsx

@@ -1,39 +0,0 @@
-import { Meta, Story } from '@storybook/react';
-import React from 'react';
-import { RPGUIRoot } from '../components/RPGUIRoot';
-import { Shortcuts, ShortcutsProps } from '../components/Shortcuts/Shortcuts';
-import { SHORTCUTS_STORAGE_KEY } from '../components/Spellbook/constants';
-import atlasJSON from '../mocks/atlas/items/items.json';
-import atlasIMG from '../mocks/atlas/items/items.png';
-import { itemContainerMock } from '../mocks/itemContainer.mocks';
-
-const meta: Meta = {
-  title: 'Shortcuts',
-  component: Shortcuts,
-};
-
-export default meta;
-
-const Template: Story<ShortcutsProps> = args => {
-  return (
-    <RPGUIRoot>
-      <div
-        style={{
-          width: '100%',
-        }}
-      >
-        <Shortcuts {...args} />
-      </div>
-    </RPGUIRoot>
-  );
-};
-
-export const Default = Template.bind({});
-Default.args = {
-  onShortcutCast: spellKey => console.log(spellKey),
-  shortcuts: JSON.parse(localStorage.getItem(SHORTCUTS_STORAGE_KEY) as string),
-  mana: 100,
-  atlasIMG,
-  atlasJSON,
-  inventory: itemContainerMock,
-};