@rpg-engine/long-bow 0.3.39 → 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.39",
+  "version": "0.3.40",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
@@ -83,7 +83,7 @@
   },
   "dependencies": {
     "@rollup/plugin-image": "^2.1.1",
-    "@rpg-engine/shared": "^0.6.74",
+    "@rpg-engine/shared": "^0.6.73",
     "dayjs": "^1.11.2",
     "font-awesome": "^4.7.0",
     "fs-extra": "^10.1.0",

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/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,
+};