@rpg-engine/long-bow 0.3.53 → 0.3.55

package/src/components/CircularController/CircularController.tsx

@@ -1,245 +1,162 @@
-import {
-  getItemTextureKeyPath,
-  IItem,
-  IItemContainer,
-  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';
-import { SingleShortcut } from '../Shortcuts/SingleShortcut';
-
-export type CircularControllerProps = {
-  onActionClick: () => void;
-  onCancelClick: () => void;
-  onShortcutClick: (index: number) => void;
-  mana: number;
-  shortcuts: IShortcut[];
-  inventory?: IItemContainer | null;
-  atlasIMG: any;
-  atlasJSON: any;
-};
-
-export const CircularController: React.FC<CircularControllerProps> = ({
-  onActionClick,
-  onCancelClick,
-  onShortcutClick,
-  mana,
-  shortcuts,
-  inventory,
-  atlasIMG,
-  atlasJSON,
-}) => {
-  const onTouchStart = (e: React.TouchEvent<HTMLButtonElement>) => {
-    const target = e.target as HTMLButtonElement;
-    target?.classList.add('active');
-  };
-
-  const onTouchEnd = (
-    action: () => void,
-    e: React.TouchEvent<HTMLButtonElement>
-  ) => {
-    const target = e.target as HTMLButtonElement;
-    setTimeout(() => {
-      target?.classList.remove('active');
-    }, 100);
-    action();
-  };
-
-  const renderShortcut = (i: number) => {
-    let variant = '';
-
-    if (i === 0) variant = 'top';
-    else if (i >= 3) variant = `bottom-${i - 3}`;
-
-    const onShortcutClickBinded =
-      shortcuts[i]?.type !== ShortcutType.None
-        ? onShortcutClick.bind(null, 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 (
-        <StyledShortcut
-          key={i}
-          onTouchStart={onTouchStart}
-          onTouchEnd={onTouchEnd.bind(null, onShortcutClickBinded)}
-          disabled={false}
-          className={variant}
-        >
-          {payload && (
-            <SpriteFromAtlas
-              atlasIMG={atlasIMG}
-              atlasJSON={atlasJSON}
-              spriteKey={getItemTextureKeyPath(
-                {
-                  key: payload.texturePath,
-                  texturePath: payload.texturePath,
-                  stackQty: payload.stackQty || 1,
-                },
-                atlasJSON
-              )}
-              width={32}
-              height={32}
-              imgScale={1.4}
-              imgStyle={{ left: '4px' }}
-            />
-          )}
-          <span className="qty">{totalQty}</span>
-        </StyledShortcut>
-      );
-    }
-
-    const payload = shortcuts[i]?.payload as IRawSpell | undefined;
-
-    return (
-      <StyledShortcut
-        key={i}
-        onTouchStart={onTouchStart}
-        onTouchEnd={onTouchEnd.bind(null, onShortcutClickBinded)}
-        disabled={mana < (payload?.manaCost ?? 0)}
-        className={variant}
-      >
-        <span className="mana">{payload && payload.manaCost}</span>
-        <span className="magicWords">
-          {payload?.magicWords.split(' ').map(word => word[0])}
-        </span>
-      </StyledShortcut>
-    );
-  };
-
-  return (
-    <ButtonsContainer>
-      <ShortcutsContainer>
-        {Array.from({ length: 6 }).map((_, i) => renderShortcut(i))}
-      </ShortcutsContainer>
-      <Button
-        onTouchStart={onTouchStart}
-        onTouchEnd={onTouchEnd.bind(null, onActionClick)}
-      >
-        <div className="rpgui-icon sword" />
-      </Button>
-
-      <CancelButton
-        onTouchStart={onTouchStart}
-        onTouchEnd={onTouchEnd.bind(null, onCancelClick)}
-      >
-        <span>X</span>
-      </CancelButton>
-    </ButtonsContainer>
-  );
-};
-
-const Button = styled.button`
-  width: 4.3rem;
-  height: 4.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;
-  transition: background-color 0.1s;
-  margin-top: -3rem;
-
-  &.active {
-    background-color: ${uiColors.gray};
-  }
-
-  .sword {
-    transform: rotate(-45deg);
-    height: 2.5rem;
-    width: 1.9rem;
-    pointer-events: none;
-  }
-`;
-
-const CancelButton = styled(Button)`
-  width: 3rem;
-  height: 3rem;
-  font-size: 0.8rem;
-
-  span {
-    margin-top: 4px;
-    margin-left: 2px;
-    pointer-events: none;
-  }
-`;
-
-const ButtonsContainer = styled.div`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 0.5rem;
-`;
-
-const ShortcutsContainer = styled.div`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 0.5rem;
-  flex-direction: column;
-  margin-top: 3rem;
-
-  .top {
-    transform: translate(93%, 25%);
-  }
-
-  .bottom-0 {
-    transform: translate(93%, -25%);
-  }
-
-  .bottom-1 {
-    transform: translate(-120%, calc(-5.5rem));
-  }
-
-  .bottom-2 {
-    transform: translate(-30%, calc(-5.5rem - 25%));
-  }
-`;
-
-const StyledShortcut = styled(SingleShortcut)`
-  width: 2.5rem;
-  height: 2.5rem;
-  transition: background-color 0.1s;
-
-  .mana,
-  .qty {
-    font-size: 0.5rem;
-  }
-
-  &:hover,
-  &:focus,
-  &:active {
-    background-color: ${uiColors.lightGray};
-  }
-
-  &.active {
-    background-color: ${uiColors.gray};
-  }
-`;
+import { IRawSpell } from '@rpg-engine/shared';
+import React from 'react';
+import styled from 'styled-components';
+import { uiColors } from '../../constants/uiColors';
+import { SpellShortcut } from '../Spellbook/QuickSpells';
+
+export type CircularControllerProps = {
+  onActionPointerDown: () => void;
+  onCancelClick: () => void;
+  onSpellClick: (spellKey: string) => void;
+  mana: number;
+  spells: IRawSpell[];
+};
+
+export const CircularController: React.FC<CircularControllerProps> = ({
+  onActionPointerDown,
+  onCancelClick,
+  onSpellClick,
+  mana,
+  spells,
+}) => {
+  const onTouchStart = (e: React.TouchEvent<HTMLButtonElement>) => {
+    const target = e.target as HTMLButtonElement;
+    target?.classList.add('active');
+  };
+
+  const onTouchEnd = (
+    action: () => void,
+    e: React.TouchEvent<HTMLButtonElement>
+  ) => {
+    const target = e.target as HTMLButtonElement;
+    setTimeout(() => {
+      target?.classList.remove('active');
+    }, 100);
+    action();
+  };
+
+  return (
+    <ButtonsContainer>
+      <SpellsContainer>
+        {Array.from({ length: 4 }).map((_, i) => {
+          const variant = i === 0 ? 'top' : i === 3 ? 'bottom' : '';
+          const spell = spells[i];
+
+          const onSpellClickBinded = spell
+            ? onSpellClick.bind(null, spell.key)
+            : () => {};
+
+          return (
+            <StyledShortcut
+              key={i}
+              disabled={mana < spell?.manaCost}
+              onTouchStart={onTouchStart}
+              onTouchEnd={onTouchEnd.bind(null, onSpellClickBinded)}
+              className={variant}
+            >
+              <span className="mana">{spell?.key && spell?.manaCost}</span>
+              <span className="magicWords">
+                {spell?.magicWords.split(' ').map(word => word[0])}
+              </span>
+            </StyledShortcut>
+          );
+        })}
+      </SpellsContainer>
+      <Button
+        onTouchStart={onTouchStart}
+        onTouchEnd={onTouchEnd.bind(null, onActionPointerDown)}
+      >
+        <div className="rpgui-icon sword" />
+      </Button>
+
+      <CancelButton
+        onTouchStart={onTouchStart}
+        onTouchEnd={onTouchEnd.bind(null, onCancelClick)}
+      >
+        <span>X</span>
+      </CancelButton>
+    </ButtonsContainer>
+  );
+};
+
+const Button = styled.button`
+  width: 4.3rem;
+  height: 4.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;
+  transition: background-color 0.1s;
+
+  &.active {
+    background-color: ${uiColors.gray};
+  }
+
+  .sword {
+    transform: rotate(-45deg);
+    height: 2.5rem;
+    width: 1.9rem;
+    pointer-events: none;
+  }
+`;
+
+const CancelButton = styled(Button)`
+  width: 3rem;
+  height: 3rem;
+  font-size: 0.8rem;
+
+  span {
+    margin-top: 4px;
+    margin-left: 2px;
+    pointer-events: none;
+  }
+`;
+
+const ButtonsContainer = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+`;
+
+const SpellsContainer = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.4rem;
+  flex-direction: column;
+
+  .top {
+    transform: translate(93%, 25%);
+  }
+
+  .bottom {
+    transform: translate(93%, -25%);
+  }
+`;
+
+const StyledShortcut = styled(SpellShortcut)`
+  width: 2.5rem;
+  height: 2.5rem;
+  transition: background-color 0.1s;
+
+  .mana {
+    font-size: 0.5rem;
+  }
+
+  &:hover,
+  &:focus,
+  &:active {
+    background-color: ${uiColors.lightGray};
+  }
+
+  &.active {
+    background-color: ${uiColors.gray};
+  }
+`;