@rpg-engine/long-bow 0.8.55 → 0.8.57

package/package.json

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

package/src/components/ConfirmModal.tsx

@@ -13,7 +13,6 @@ export interface IConfirmModalProps {
 const GlobalStyle = createGlobalStyle`
   body {
     overflow: hidden;
-   
     width: 100%;
     height: 100%;
   }
@@ -39,7 +38,7 @@ export const ConfirmModal: React.FC<IConfirmModalProps> = ({
   return (
     <ModalPortal>
       <GlobalStyle />
-      <Overlay onPointerDown={handleClose} />
+      <Overlay onClick={handleClose} />
       <ModalContainer>
         <ModalContent onPointerDown={stopPropagation}>
           <MessageContainer>
@@ -78,9 +77,10 @@ const Overlay = styled.div`
   left: 0;
   right: 0;
   bottom: 0;
-  background-color: rgba(0, 0, 0, 1);
+  background-color: rgba(0, 0, 0, 0.6);
   z-index: 1000;
   animation: fadeIn 0.2s ease-out;
+  cursor: pointer;
 
   @keyframes fadeIn {
     from {
@@ -102,21 +102,23 @@ const ModalContainer = styled.div`
   align-items: center;
   justify-content: center;
   z-index: 1001;
+  pointer-events: none;
   padding: env(safe-area-inset-top) env(safe-area-inset-right)
     env(safe-area-inset-bottom) env(safe-area-inset-left);
-  touch-action: none;
 `;
 
 const ModalContent = styled.div`
-  background: url('/assets/ui/paper-dialog.png') no-repeat center center;
-  background-size: 100% 100%;
+  background-color: #2a2a2a;
+  border: 2px solid #444;
+  border-radius: 8px;
   padding: 20px;
   min-width: 300px;
   max-width: 90%;
   margin: 0 auto;
   animation: scaleIn 0.2s ease-out;
   transform-origin: center;
-  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5), 0 0 40px rgba(0, 0, 0, 0.3);
+  pointer-events: auto;
 
   @keyframes scaleIn {
     from {
@@ -143,8 +145,8 @@ const MessageContainer = styled.div`
 const Message = styled.p`
   margin: 0;
   font-size: 16px;
-  color: #333;
-  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
+  color: #fff;
+  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5);
 
   @media (max-width: 768px) {
     font-size: 18px;

package/src/components/Dropdown.tsx

@@ -15,10 +15,6 @@ export interface IDropdownProps {
   opensUp?: boolean; // Add a new prop to control the dropdown direction
 }
 
-const ITEM_HEIGHT = 35;
-const MAX_ITEMS_VISIBLE = 10;
-const MAX_HEIGHT = MAX_ITEMS_VISIBLE * ITEM_HEIGHT;
-
 export const Dropdown: React.FC<IDropdownProps> = ({
   options,
   width,
@@ -69,7 +65,6 @@ export const Dropdown: React.FC<IDropdownProps> = ({
         className="rpgui-dropdown-imp"
         opened={opened}
         opensUp={opensUp}
-        optionsCount={options.length}
       >
         {options.map(option => {
           return (
@@ -93,16 +88,11 @@ export const Dropdown: React.FC<IDropdownProps> = ({
 const Container = styled.div<{ width: string | undefined }>`
   position: relative;
   width: ${props => props.width || '100%'};
-  max-height: ${MAX_HEIGHT}px;
 `;
 
 const DropdownSelect = styled.p`
   width: 100%;
   box-sizing: border-box;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  max-height: ${ITEM_HEIGHT}px;
 
   label {
     display: inline-block;
@@ -113,14 +103,10 @@ const DropdownSelect = styled.p`
 const DropdownOptions = styled.ul<{
   opened: boolean;
   opensUp: boolean;
-  optionsCount: number;
 }>`
   position: absolute;
   width: 100%;
-  max-height: ${props =>
-    props.opened
-      ? `${Math.min(props.optionsCount * ITEM_HEIGHT, MAX_HEIGHT)}px`
-      : '0'};
+  max-height: 300px;
   overflow-y: auto;
   display: ${props => (props.opened ? 'block' : 'none')};
   box-sizing: border-box;
@@ -128,15 +114,7 @@ const DropdownOptions = styled.ul<{
   top: ${props => (props.opensUp ? 'auto' : '100%')};
   margin: 0;
   padding: 0;
-
-  li {
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    padding: 8px 12px;
-    min-height: ${ITEM_HEIGHT}px;
-    max-height: ${ITEM_HEIGHT}px;
-    box-sizing: border-box;
-    line-height: 1.2;
+  @media (max-width: 768px) {
+    padding: 8px 0;
   }
 `;

package/src/components/Item/Inventory/ItemSlot.tsx

@@ -6,7 +6,7 @@ import {
   ItemContainerType,
   ItemSlotType,
   ItemSubType,
-  ItemType
+  ItemType,
 } from '@rpg-engine/shared';
 
 import { observer } from 'mobx-react-lite';