@rpg-engine/long-bow 0.4.93 → 0.4.95

package/dist/mocks/shortcut.mocks.d.ts

@@ -0,0 +1,17 @@
+export declare const shortcutMock: ({
+    type: number;
+    payload: {
+        key: string;
+        name: string;
+        description: string;
+        castingType: string;
+        magicWords: string;
+        manaCost: number;
+        minLevelRequired: number;
+        minMagicLevelRequired: number;
+        animationKey: string;
+    };
+} | {
+    type: number;
+    payload: null;
+})[];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rpg-engine/long-bow",
-  "version": "0.4.93",
+  "version": "0.4.95",
   "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.8.46",
+    "@rpg-engine/shared": "^0.8.49",
     "dayjs": "^1.11.2",
     "font-awesome": "^4.7.0",
     "fs-extra": "^10.1.0",

package/src/components/CircularController/CircularController.tsx

@@ -167,7 +167,7 @@ export const CircularController: React.FC<CircularControllerProps> = ({
   return (
     <ButtonsContainer>
       <ShortcutsContainer>
-        {Array.from({ length: 6 }).map((_, i) => renderShortcut(i))}
+        {Array.from({ length: 12 }).map((_, i) => renderShortcut(i))}
       </ShortcutsContainer>
       <Button
         onTouchStart={onTouchStart}
@@ -201,6 +201,7 @@ const Button = styled.button`
   position: relative;
   transition: all 0.1s;
   margin-top: -3rem;
+  top: -144px;
 
   &.active {
     background-color: ${uiColors.gray};
@@ -219,6 +220,8 @@ const CancelButton = styled(Button)`
   width: 3rem;
   height: 3rem;
   font-size: 0.8rem;
+  position: relative;
+  left: 2.6rem;
 
   span {
     margin-top: 4px;
@@ -232,6 +235,8 @@ const ButtonsContainer = styled.div`
   align-items: center;
   justify-content: center;
   gap: 0.5rem;
+
+  scale: 0.9;
 `;
 
 const ShortcutsContainer = styled.div`
@@ -251,11 +256,34 @@ const ShortcutsContainer = styled.div`
   }
 
   .bottom-1 {
-    transform: translate(-120%, calc(-5.5rem));
+    transform: translate(320%, calc(-4.5rem));
   }
 
   .bottom-2 {
-    transform: translate(-30%, calc(-5.5rem - 25%));
+    transform: translate(-13.5%, calc(-5.6rem - 25%));
+  }
+
+  .bottom-3 {
+    transform: translate(318%, calc(-15.8rem - 25%));
+  }
+
+  .bottom-4 {
+    transform: translate(-15%, calc(-20.2rem - 25%));
+  }
+  .bottom-5 {
+    transform: translate(210%, calc(-15rem - 25%));
+  }
+
+  .bottom-6 {
+    transform: translate(210%, calc(-25.7rem - 25%));
+  }
+
+  .bottom-7 {
+    transform: translate(304%, calc(-24.9rem - 25%));
+  }
+
+  .bottom-8 {
+    transform: translate(-101%, calc(-27.7rem - 25%));
   }
 `;
 

package/src/components/DraggableContainer.tsx

@@ -148,7 +148,7 @@ const CloseButton = styled.div`
   right: 0px;
   color: white;
   z-index: 22;
-  font-size: 1.1rem;
+  font-size: 1.5rem;
   @media (max-width: 950px) {
     font-size: 1.7rem;
     padding: 12px;

package/src/components/Shortcuts/Shortcuts.tsx

@@ -46,7 +46,7 @@ export const Shortcuts: React.FC<ShortcutsProps> = ({
       if (isBlockedCastingByKeyboard) return;
 
       const shortcutIndex = Number(e.key) - 1;
-      if (shortcutIndex >= 0 && shortcutIndex <= 5) {
+      if (shortcutIndex >= 0 && shortcutIndex <= 11) {
         handleShortcutCast(shortcutIndex);
         shortcutsRefs.current[shortcutIndex]?.classList.add('active');
         setTimeout(() => {
@@ -64,7 +64,7 @@ export const Shortcuts: React.FC<ShortcutsProps> = ({
 
   return (
     <List>
-      {Array.from({ length: 6 }).map((_, i) => {
+      {Array.from({ length: 12 }).map((_, i) => {
         const buildClassName = (classBase: string, isOnCooldown: boolean) => {
           return `${classBase} ${isOnCooldown ? 'onCooldown' : ''}`;
         };
@@ -190,4 +190,6 @@ const List = styled.p`
   gap: 0.5rem;
   box-sizing: border-box;
   margin: 0 !important;
+
+  scale: 0.9;
 `;

package/src/components/Shortcuts/ShortcutsSetter.tsx

@@ -48,8 +48,8 @@ export const ShortcutsSetter: React.FC<ShortcutsSetterProps> = ({
           )}
           width={32}
           height={32}
-          imgScale={1.6}
-          imgStyle={{ left: '5px' }}
+          imgScale={1.2}
+          imgStyle={{ left: '3px' }}
         />
       );
     }
@@ -63,7 +63,7 @@ export const ShortcutsSetter: React.FC<ShortcutsSetterProps> = ({
     <Container>
       <p>Shortcuts:</p>
       <List id="shortcuts_list">
-        {Array.from({ length: 6 }).map((_, i) => (
+        {Array.from({ length: 12 }).map((_, i) => (
           <Shortcut
             key={i}
             onPointerDown={() => {
@@ -92,12 +92,16 @@ const Container = styled.div`
   p {
     margin: 0;
     margin-left: 0.5rem;
+    font-size: 10px;
   }
+
+  width: 100%;
 `;
 
 const Shortcut = styled.button<{ isBeingSet?: boolean }>`
-  width: 2.6rem;
-  height: 2.6rem;
+  width: 2.4rem;
+  height: 2.4rem;
+
   background-color: ${uiColors.lightGray};
   border: 2px solid
     ${({ isBeingSet }) => (isBeingSet ? uiColors.yellow : uiColors.darkGray)};
@@ -131,9 +135,12 @@ const List = styled.div`
   width: 100%;
   display: flex;
   align-items: center;
-  gap: 0.5rem;
-  padding-bottom: 0.5rem;
-  padding-left: 0.5rem;
+  gap: 0.4rem;
   box-sizing: border-box;
   margin: 0 !important;
+
+  flex-wrap: wrap;
+
+  padding: 0.3rem;
+  padding-bottom: 1rem;
 `;

package/src/mocks/shortcut.mocks.ts

@@ -0,0 +1,27 @@
+export const shortcutMock = [
+  {
+    type: 0,
+    payload: {
+      key: 'self-healing-spell',
+      name: 'Self Healing Spell',
+      description: 'A self healing spell.',
+      castingType: 'self-casting',
+      magicWords: 'talas faenya',
+      manaCost: 10,
+      minLevelRequired: 2,
+      minMagicLevelRequired: 1,
+      animationKey: 'life-heal',
+    },
+  },
+  { type: 2, payload: null },
+  { type: 2, payload: null },
+  { type: 2, payload: null },
+  { type: 2, payload: null },
+  { type: 2, payload: null },
+  { type: 2, payload: null },
+  { type: 2, payload: null },
+  { type: 2, payload: null },
+  { type: 2, payload: null },
+  { type: 2, payload: null },
+  { type: 2, payload: null },
+];

package/src/stories/CircullarController.stories.tsx

@@ -5,10 +5,10 @@ import {
   CircularController,
   CircularControllerProps,
 } from '../components/CircularController/CircularController';
-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';
+import { shortcutMock } from '../mocks/shortcut.mocks';
 
 const meta: Meta = {
   title: 'Circular Controller',
@@ -26,7 +26,7 @@ const Template: Story<CircularControllerProps> = args => (
 export const Default = Template.bind({});
 
 Default.args = {
-  shortcuts: JSON.parse(localStorage.getItem(SHORTCUTS_STORAGE_KEY) as string),
+  shortcuts: shortcutMock,
   onShortcutClick: index => console.log(index),
   onActionClick: () => console.log('action'),
   onCancelClick: () => console.log('cancel attack'),