@rpg-engine/long-bow 0.3.76 → 0.3.78

package/package.json

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

package/src/components/CraftBook/MockItems.ts

@@ -37,175 +37,10 @@ export const craftableItems: ICraftableItem[] = [
         texturePath: 'crafting-resources/leather.png',
       },
     ],
-  }, {
-    key: 'bandana',
-    name: 'Bandana',
-    canCraft: true,
-    texturePath: 'accessories/bandana.png',
-    ingredients: [
-      {
-        key: 'leather',
-        name: 'leather',
-        qty: 10,
-        texturePath: 'crafting-resources/leather.png',
-      },
-    ],
-  },
-  {
-    key: 'bandana1',
-    name: 'Bandana',
-    canCraft: true,
-    texturePath: 'accessories/bandana.png',
-    ingredients: [
-      {
-        key: 'leather',
-        name: 'leather',
-        qty: 10,
-        texturePath: 'crafting-resources/leather.png',
-      },
-    ],
   },
   {
-    key: 'bandana2',
-    name: 'Bandana',
-    canCraft: true,
-    texturePath: 'accessories/bandana.png',
-    ingredients: [
-      {
-        key: 'leather',
-        name: 'leather',
-        qty: 10,
-        texturePath: 'crafting-resources/leather.png',
-      },
-    ],
-  }, {
-    key: 'bandana',
-    name: 'Bandana',
-    canCraft: true,
-    texturePath: 'accessories/bandana.png',
-    ingredients: [
-      {
-        key: 'leather',
-        name: 'leather',
-        qty: 10,
-        texturePath: 'crafting-resources/leather.png',
-      },
-    ],
-  },
-  {
-    key: 'bandana1',
-    name: 'Bandana',
-    canCraft: true,
-    texturePath: 'accessories/bandana.png',
-    ingredients: [
-      {
-        key: 'leather',
-        name: 'leather',
-        qty: 10,
-        texturePath: 'crafting-resources/leather.png',
-      },
-    ],
-  },
-  {
-    key: 'bandana2',
-    name: 'Bandana',
-    canCraft: true,
-    texturePath: 'accessories/bandana.png',
-    ingredients: [
-      {
-        key: 'leather',
-        name: 'leather',
-        qty: 10,
-        texturePath: 'crafting-resources/leather.png',
-      },
-    ],
-  }, {
-    key: 'bandana',
-    name: 'Bandana',
-    canCraft: true,
-    texturePath: 'accessories/bandana.png',
-    ingredients: [
-      {
-        key: 'leather',
-        name: 'leather',
-        qty: 10,
-        texturePath: 'crafting-resources/leather.png',
-      },
-    ],
-  },
-  {
-    key: 'bandana1',
-    name: 'Bandana',
-    canCraft: true,
-    texturePath: 'accessories/bandana.png',
-    ingredients: [
-      {
-        key: 'leather',
-        name: 'leather',
-        qty: 10,
-        texturePath: 'crafting-resources/leather.png',
-      },
-    ],
-  },
-  {
-    key: 'bandana2',
-    name: 'Bandana',
-    canCraft: true,
-    texturePath: 'accessories/bandana.png',
-    ingredients: [
-      {
-        key: 'leather',
-        name: 'leather',
-        qty: 10,
-        texturePath: 'crafting-resources/leather.png',
-      },
-    ],
-  }, {
-    key: 'bandana',
-    name: 'Bandana',
-    canCraft: true,
-    texturePath: 'accessories/bandana.png',
-    ingredients: [
-      {
-        key: 'leather',
-        name: 'leather',
-        qty: 10,
-        texturePath: 'crafting-resources/leather.png',
-      },
-    ],
-  },
-  {
-    key: 'bandana1',
-    name: 'Bandana',
-    canCraft: true,
-    texturePath: 'accessories/bandana.png',
-    ingredients: [
-      {
-        key: 'leather',
-        name: 'leather',
-        qty: 10,
-        texturePath: 'crafting-resources/leather.png',
-      },
-    ],
-  },
-  {
-    key: 'bandana2',
-    name: 'Bandana',
-    canCraft: true,
-    texturePath: 'accessories/bandana.png',
-    ingredients: [
-      {
-        key: 'leather',
-        name: 'leather',
-        qty: 10,
-        texturePath: 'crafting-resources/leather.png',
-      },
-    ],
-  }, {
-    key: 'bandana',
-    name: 'Bandana',
+    ...items[0],
     canCraft: true,
-    texturePath: 'accessories/bandana.png',
     ingredients: [
       {
         key: 'leather',
@@ -216,10 +51,8 @@ export const craftableItems: ICraftableItem[] = [
     ],
   },
   {
-    key: 'bandana1',
-    name: 'Bandana',
+    ...items[1],
     canCraft: true,
-    texturePath: 'accessories/bandana.png',
     ingredients: [
       {
         key: 'leather',
@@ -230,10 +63,8 @@ export const craftableItems: ICraftableItem[] = [
     ],
   },
   {
-    key: 'bandana2',
-    name: 'Bandana',
+    ...items[2],
     canCraft: true,
-    texturePath: 'accessories/bandana.png',
     ingredients: [
       {
         key: 'leather',

package/src/components/Item/Cards/ItemInfo.tsx

@@ -156,9 +156,14 @@ const Container = styled.div<{ item: IItem }>`
   background-color: #222;
   border-radius: 5px;
   padding: 0.5rem;
-  width: max-content;
   font-size: ${uiFonts.size.small};
   border: 3px solid ${({ item }) => rarityColor(item) ?? uiColors.lightGray};
+  height: max-content;
+  width: 15rem;
+
+  @media (max-width: 580px) {
+    width: 80vw;
+  }
 `;
 
 const Title = styled.div`
@@ -186,6 +191,7 @@ const Type = styled.div`
 
 const Statistic = styled.div`
   margin-bottom: 0.4rem;
+  width: max-content;
 
   .label {
     display: inline-block;
@@ -214,8 +220,6 @@ const Description = styled.div`
   font-size: ${uiFonts.size.small};
   color: ${uiColors.lightGray};
   font-style: italic;
-  width: max-content;
-  max-width: 20rem;
 `;
 
 const Header = styled.div`
@@ -229,9 +233,9 @@ const AllowedSlots = styled.div`
   display: flex;
   align-items: center;
   justify-content: center;
-  flex-wrap: wrap;
   gap: 0.5rem;
-  margin-left: 2rem;
+  margin-left: auto;
+  align-self: flex-start;
 `;
 
 const StackInfo = styled.div`

package/src/components/Item/Cards/ItemInfoDisplay.tsx

@@ -109,6 +109,11 @@ const Flex = styled.div<{ $isMobile?: boolean }>`
   display: flex;
   gap: 0.5rem;
   flex-direction: ${({ $isMobile }) => ($isMobile ? 'row-reverse' : 'row')};
+
+  @media (max-width: 580px) {
+    flex-direction: column-reverse;
+    align-items: center;
+  }
 `;
 
 const Equipped = styled.div`

package/src/components/Item/Cards/MobileItemTooltip.tsx

@@ -1,7 +1,6 @@
 import { IEquipmentSet, IItem } from '@rpg-engine/shared';
 import React, { useEffect, useRef } from 'react';
 import styled from 'styled-components';
-import { uiColors } from '../../../constants/uiColors';
 import { ItemInfoDisplay } from './ItemInfoDisplay';
 
 interface IListMenuOption {
@@ -43,7 +42,7 @@ export const MobileItemTooltip: React.FC<MobileItemTooltipProps> = ({
       const y = (-rect.y * 100) / (scale * 100);
 
       current.style.transform = `translate(${x}px, ${y}px)`;
-      current.style.opacity = '1';
+      current.style.opacity = '0.92';
     }
 
     return;
@@ -52,9 +51,10 @@ export const MobileItemTooltip: React.FC<MobileItemTooltipProps> = ({
   return (
     <Container
       ref={ref}
-      onTouchEnd={e => {
-        e.stopPropagation();
-        closeTooltip();
+      onTouchEnd={() => {
+        setTimeout(() => {
+          closeTooltip();
+        }, 10);
       }}
       scale={scale}
     >
@@ -67,7 +67,15 @@ export const MobileItemTooltip: React.FC<MobileItemTooltipProps> = ({
       />
       <OptionsContainer>
         {options?.map(option => (
-          <Option key={option.id} onTouchEnd={() => onSelected?.(option.id)}>
+          <Option
+            key={option.id}
+            onTouchEnd={() => {
+              setTimeout(() => {
+                onSelected?.(option.id);
+                closeTooltip();
+              }, 10);
+            }}
+          >
             {option.text}
           </Option>
         ))}
@@ -88,18 +96,39 @@ const Container = styled.div<{ scale: number }>`
   display: flex;
   justify-content: center;
   align-items: center;
+  gap: 0.5rem;
+
+  @media (max-width: 580px) {
+    flex-direction: column;
+  }
 `;
 
 const OptionsContainer = styled.div`
   display: flex;
   flex-direction: column;
-  margin-left: 2rem;
-  gap: 1rem;
+  gap: 0.5rem;
+  flex-wrap: wrap;
+
+  @media (max-width: 580px) {
+    flex-direction: row;
+    justify-content: center;
+  }
 `;
 
 const Option = styled.button`
   padding: 1rem;
-  background-color: ${uiColors.lightGray};
+  background-color: #333;
+  color: white;
   border: none;
   border-radius: 3px;
+  width: 8rem;
+  transition: background-color 0.2s;
+
+  &:hover {
+    background-color: #555;
+  }
+
+  @media (max-width: 580px) {
+    padding: 1rem 0.5rem;
+  }
 `;

package/src/mocks/itemContainer.mocks.ts

@@ -25,7 +25,7 @@ export const items: IItem[] = [
     key: 'short-sword-66',
     texturePath: 'swords/short-sword.png',
     textureKey: 'short-sword',
-    name: 'Short Sword',
+    name: "Carpenter's Axe",
     description:
       'You see a short sword. It is a single-handed sword with a handle that just features a grip.',
     attack: 5,