@rpg-engine/long-bow 0.3.57 → 0.3.59

package/src/components/CircularController/CircularController.tsx

@@ -1,162 +1,245 @@
-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};
-  }
-`;
+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};
+  }
+`;