@rpg-engine/long-bow 0.3.38 → 0.3.40

package/dist/stories/CircullarController.stories.d.ts

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rpg-engine/long-bow",
-  "version": "0.3.38",
+  "version": "0.3.40",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",

package/src/components/CircularController/CircularController.tsx

@@ -0,0 +1,162 @@
+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 = {
+  onActionClick: () => void;
+  onCancelClick: () => void;
+  onSpellClick: (spellKey: string) => void;
+  mana: number;
+  spells: IRawSpell[];
+};
+
+export const CircularController: React.FC<CircularControllerProps> = ({
+  onActionClick,
+  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, 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;
+
+  &.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};
+  }
+`;

package/src/components/Spellbook/QuickSpells.tsx

@@ -57,7 +57,7 @@ export const QuickSpells: React.FC<QuickSpellsProps> = ({
   );
 };
 
-const SpellShortcut = styled.button`
+export const SpellShortcut = styled.button`
   width: 3rem;
   height: 3rem;
   background-color: ${uiColors.lightGray};
@@ -71,6 +71,10 @@ const SpellShortcut = styled.button`
   justify-content: center;
   position: relative;
 
+  span {
+    pointer-events: none;
+  }
+
   .mana {
     position: absolute;
     top: -5px;

package/src/components/TradingMenu/TradingItemRow.tsx

@@ -1,4 +1,4 @@
-import { ITradeResponseItem, getItemTextureKeyPath } from '@rpg-engine/shared';
+import { getItemTextureKeyPath, ITradeResponseItem } from '@rpg-engine/shared';
 import capitalize from 'lodash/capitalize';
 import React from 'react';
 import styled from 'styled-components';
@@ -37,6 +37,18 @@ export const TradingItemRow: React.FC<ITradeComponentProps> = ({
       onQuantityChange(traderItem, newQuantity);
     }
   };
+  const onLeftOutClick = () => {
+    if (selectedQty >= 10) {
+      const newQuantity = selectedQty - 10;
+      onQuantityChange(traderItem, newQuantity);
+    }
+  };
+  const onRightOutClick = () => {
+    if (selectedQty < (traderItem.qty ?? 999)) {
+      const newQuantity = selectedQty + 10;
+      onQuantityChange(traderItem, newQuantity);
+    }
+  };
 
   return (
     <ItemWrapper>
@@ -70,29 +82,47 @@ export const TradingItemRow: React.FC<ITradeComponentProps> = ({
 
       <QuantityContainer>
         <SelectArrow
+          size={32}
+          className="arrow-selector"
+          direction="left"
+          onClick={onLeftOutClick}
+          onTouchStart={onLeftOutClick}
+        />
+        <StyledArrow
           size={32}
           className="arrow-selector"
           direction="left"
           onClick={onLeftClick}
           onTouchStart={onLeftClick}
-        ></SelectArrow>
+        />
         <QuantityDisplay>
           <TextOverlay>
             <Item>{selectedQty}</Item>
           </TextOverlay>
         </QuantityDisplay>
-        <SelectArrow
+        <StyledArrow
           size={32}
           className="arrow-selector"
           direction="right"
           onClick={onRightClick}
           onTouchStart={onRightClick}
-        ></SelectArrow>
+        />
+        <SelectArrow
+          size={32}
+          className="arrow-selector"
+          direction="right"
+          onClick={onRightOutClick}
+          onTouchStart={onRightOutClick}
+        />
       </QuantityContainer>
     </ItemWrapper>
   );
 };
 
+const StyledArrow = styled(SelectArrow)`
+  margin: 40px;
+`;
+
 const ItemWrapper = styled.div`
   width: 100%;
   margin: auto;
@@ -159,7 +189,7 @@ const QuantityContainer = styled.div<IContainerProps>`
   justify-content: center;
   align-items: center;
 
-  flex: 20%;
+  flex: 40%;
 `;
 
 const QuantityDisplay = styled.div`

package/src/components/TradingMenu/TradingMenu.tsx

@@ -80,7 +80,7 @@ export const TradingMenu: React.FC<ITrandingMenu> = ({
       onCloseButton={() => {
         if (onClose) onClose();
       }}
-      width="500px"
+      width="600px"
       cancelDrag=".equipment-container-body .arrow-selector"
     >
       <>

package/src/index.tsx

@@ -3,6 +3,7 @@ export * from './components/Character/CharacterSelection';
 export * from './components/Chat/Chat';
 export * from './components/Chatdeprecated/ChatDeprecated';
 export * from './components/CheckButton';
+export * from './components/CircularController/CircularController';
 export * from './components/CraftBook/CraftBook';
 export * from './components/DraggableContainer';
 export * from './components/Dropdown';

package/src/stories/CircullarController.stories.tsx

@@ -0,0 +1,33 @@
+import { Meta, Story } from '@storybook/react';
+import React from 'react';
+import { RPGUIRoot } from '..';
+import {
+  CircularController,
+  CircularControllerProps,
+} from '../components/CircularController/CircularController';
+import { SPELL_SHORTCUTS_STORAGE_KEY } from '../components/Spellbook/constants';
+
+const meta: Meta = {
+  title: 'Circular Controller',
+  component: CircularController,
+};
+
+export default meta;
+
+const Template: Story<CircularControllerProps> = args => (
+  <RPGUIRoot>
+    <CircularController {...args} />
+  </RPGUIRoot>
+);
+
+export const Default = Template.bind({});
+
+Default.args = {
+  spells: JSON.parse(
+    localStorage.getItem(SPELL_SHORTCUTS_STORAGE_KEY) as string
+  ),
+  onSpellClick: key => console.log(key),
+  onActionClick: () => console.log('action'),
+  onCancelClick: () => console.log('cancel attack'),
+  mana: 100,
+};