@rpg-engine/long-bow 0.5.76 → 0.5.78

package/package.json

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

package/src/components/Abstractions/SlotsContainer.tsx

@@ -14,6 +14,8 @@ interface IProps {
   initialPosition?: IPosition;
   scale?: number;
   width?: string;
+  isFullScreen?: boolean;
+  opacity?: number;
 }
 
 export const SlotsContainer: React.FC<IProps> = ({
@@ -27,9 +29,13 @@ export const SlotsContainer: React.FC<IProps> = ({
   initialPosition,
   scale,
   width,
+  isFullScreen,
+  opacity,
 }) => {
   return (
     <DraggableContainer
+      isFullScreen={isFullScreen}
+      opacity={opacity}
       title={title}
       type={RPGUIContainerTypes.Framed}
       onCloseButton={() => {

package/src/components/AsyncDropdown.tsx

@@ -15,6 +15,7 @@ export interface IAsyncDropdownProps {
   width?: string;
   onChange: (value: string) => void;
   defaultValue?: string;
+  opensUp?: boolean;
 }
 
 export const AsyncDropdown: React.FC<IAsyncDropdownProps> = ({
@@ -22,6 +23,7 @@ export const AsyncDropdown: React.FC<IAsyncDropdownProps> = ({
   width,
   onChange,
   defaultValue,
+  opensUp = false,
 }) => {
   const dropdownId = uuidv4();
 
@@ -68,7 +70,11 @@ export const AsyncDropdown: React.FC<IAsyncDropdownProps> = ({
         </DropdownDisplay>
       </DropdownSelect>
 
-      <DropdownOptions className="rpgui-dropdown-imp" opened={opened}>
+      <DropdownOptions
+        className="rpgui-dropdown-imp"
+        opened={opened}
+        opensUp={opensUp}
+      >
         {options?.map(option => (
           <li
             key={option.id}
@@ -113,6 +119,7 @@ const DropdownSelect = styled.p`
 
 const DropdownOptions = styled.ul<{
   opened: boolean;
+  opensUp: boolean;
 }>`
   position: absolute;
   width: 100%;
@@ -120,6 +127,10 @@ const DropdownOptions = styled.ul<{
   overflow-y: auto;
   display: ${props => (props.opened ? 'block' : 'none')};
   box-sizing: border-box;
+  bottom: ${props => (props.opensUp ? '100%' : 'auto')};
+  top: ${props => (props.opensUp ? 'auto' : '100%')};
+  margin: 0;
+  padding: 0;
 
   @media (max-width: 768px) {
     padding: 8px 0;

package/src/components/DraggableContainer.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useRef } from 'react';
 import Draggable from 'react-draggable';
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 import { uiFonts } from '../constants/uiFonts';
 import { useOutsideClick } from '../hooks/useOutsideAlerter';
 import { IPosition } from '../types/eventTypes';
@@ -24,6 +24,8 @@ export interface IDraggableContainerProps {
   initialPosition?: IPosition;
   scale?: number;
   dragDisabled?: boolean;
+  isFullScreen?: boolean;
+  opacity?: number;
 }
 
 export const DraggableContainer: React.FC<IDraggableContainerProps> = ({
@@ -44,9 +46,16 @@ export const DraggableContainer: React.FC<IDraggableContainerProps> = ({
   initialPosition = { x: 0, y: 0 },
   scale,
   dragDisabled = false,
+  isFullScreen,
+  opacity,
 }) => {
   const draggableRef = useRef(null);
 
+  if (isFullScreen) {
+    width = '100%';
+    height = '100%';
+  }
+
   useOutsideClick(draggableRef, 'item-container');
 
   useEffect(() => {
@@ -101,6 +110,8 @@ export const DraggableContainer: React.FC<IDraggableContainerProps> = ({
         width={width}
         height={height || 'auto'}
         className={`rpgui-container ${type} ${className}`}
+        isFullScreen={isFullScreen}
+        opacity={opacity}
       >
         {title && (
           <TitleContainer className="drag-handler">
@@ -128,6 +139,8 @@ export const DraggableContainer: React.FC<IDraggableContainerProps> = ({
 interface IContainerProps {
   width: string;
   height: string;
+  isFullScreen?: boolean;
+  opacity?: number;
 }
 
 const Container = styled.div<IContainerProps>`
@@ -137,6 +150,20 @@ const Container = styled.div<IContainerProps>`
   flex-wrap: wrap;
   image-rendering: pixelated;
 
+  ${({ opacity }) =>
+    opacity &&
+    css`
+      opacity: ${opacity};
+    `}
+
+  ${({ isFullScreen }) =>
+    isFullScreen &&
+    css`
+      justify-content: center;
+      align-items: flex-start;
+      align-content: flex-start;
+    `}
+
   &.rpgui-container {
     padding-top: 1.5rem;
   }
@@ -162,6 +189,7 @@ const TitleContainer = styled.div`
   flex-wrap: wrap;
   justify-content: flex-start;
   align-items: center;
+  max-height: 42px;
 `;
 
 const Title = styled.h1`

package/src/components/Dropdown.tsx

@@ -102,7 +102,7 @@ const DropdownSelect = styled.p`
 
 const DropdownOptions = styled.ul<{
   opened: boolean;
-  opensUp: boolean; // Add a new prop to the styled component
+  opensUp: boolean;
 }>`
   position: absolute;
   width: 100%;
@@ -110,10 +110,8 @@ const DropdownOptions = styled.ul<{
   overflow-y: auto;
   display: ${props => (props.opened ? 'block' : 'none')};
   box-sizing: border-box;
-  bottom: ${props =>
-    props.opensUp ? '100%' : 'auto'}; // Adjust the position based on the prop
-  top: ${props =>
-    props.opensUp ? 'auto' : '100%'}; // Adjust the position based on the prop
+  bottom: ${props => (props.opensUp ? '100%' : 'auto')};
+  top: ${props => (props.opensUp ? 'auto' : '100%')};
   margin: 0;
   padding: 0;
   @media (max-width: 768px) {

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

@@ -55,6 +55,8 @@ export interface IItemContainerProps {
   isDepotSystem?: boolean;
   onPositionChangeEnd?: (position: IPosition) => void;
   onPositionChangeStart?: (position: IPosition) => void;
+  isFullScreen?: boolean;
+  opacity?: number;
 }
 
 type onDragStart =
@@ -93,6 +95,8 @@ export const ItemContainer: React.FC<IItemContainerProps> = ({
   isDepotSystem,
   onPositionChangeEnd,
   onPositionChangeStart,
+  isFullScreen,
+  opacity,
 }) => {
   const [quantitySelect, setQuantitySelect] = useState({
     isOpen: false,
@@ -230,6 +234,8 @@ export const ItemContainer: React.FC<IItemContainerProps> = ({
         scale={scale}
         onPositionChangeEnd={onPositionChangeEnd}
         onPositionChangeStart={onPositionChangeStart}
+        isFullScreen={isFullScreen}
+        opacity={opacity}
       >
         {type === ItemContainerType.Inventory &&
           shortcuts &&
@@ -247,6 +253,7 @@ export const ItemContainer: React.FC<IItemContainerProps> = ({
           className="item-container-body"
           ref={containerRef}
           isScrollable={itemContainer.slotQty > MIN_SLOTS_FOR_SCROLL}
+          isFullScreen={isFullScreen}
         >
           {onRenderSlots()}
         </ItemsContainer>
@@ -263,14 +270,22 @@ export const ItemContainer: React.FC<IItemContainerProps> = ({
 
 interface IItemsContainerProps {
   isScrollable: boolean;
+  isFullScreen?: boolean;
 }
 
 const ItemsContainer = styled.div<IItemsContainerProps>`
   display: flex;
-  justify-content: center;
+  justify-content: ${({ isFullScreen }) =>
+    isFullScreen ? 'flex-start' : 'center'};
   flex-wrap: wrap;
-  max-height: 270px;
+  max-height: ${({ isFullScreen }) =>
+    isFullScreen
+      ? '100vh'
+      : '270px'}; // Adjust the max-height based on the prop
   overflow-y: ${({ isScrollable }) => (isScrollable ? 'scroll' : 'hidden')};
   overflow-x: hidden;
-  width: 415px;
+  width: ${({ isFullScreen }) =>
+    isFullScreen ? '100vw' : '415px'}; // Adjust the width based on the prop
+
+  margin-top: ${({ isFullScreen }) => (isFullScreen ? '1rem' : '0')};
 `;

package/src/components/Shortcuts/ShortcutsSetter.tsx

@@ -7,6 +7,7 @@ import {
 } from '@rpg-engine/shared';
 import React from 'react';
 import styled from 'styled-components';
+import { UI_BREAKPOINT_MOBILE } from '../../constants/uiBreakpoints';
 import { uiColors } from '../../constants/uiColors';
 import { SpriteFromAtlas } from '../shared/SpriteFromAtlas';
 
@@ -115,6 +116,11 @@ const Container = styled.div`
   }
 
   width: 100%;
+
+  /*MOBILE ONLY CODE*/
+  @media screen and (max-width: ${UI_BREAKPOINT_MOBILE}) {
+    max-height: 80px;
+  }
 `;
 
 const Shortcut = styled.button<{ isBeingSet?: boolean }>`