@rpg-engine/long-bow 0.1.74 → 0.1.77

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rpg-engine/long-bow",
-  "version": "0.1.74",
+  "version": "0.1.77",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
@@ -61,8 +61,8 @@
     "@storybook/addon-links": "^6.5.9",
     "@storybook/addons": "^6.5.9",
     "@storybook/react": "^6.5.9",
-    "@types/react": "^17.0.40",
-    "@types/react-dom": "^17.0.13",
+    "@types/react": "^18.0.14",
+    "@types/react-dom": "^18.0.5",
     "@types/styled-components": "^5.1.24",
     "@types/uuid": "^8.3.4",
     "babel-loader": "^8.2.3",
@@ -83,7 +83,7 @@
   },
   "dependencies": {
     "@rollup/plugin-image": "^2.1.1",
-    "@rpg-engine/shared": "^0.3.39",
+    "@rpg-engine/shared": "^0.3.40",
     "dayjs": "^1.11.2",
     "fs-extra": "^10.1.0",
     "mobx": "^6.6.0",

package/src/components/DraggableContainer.tsx

@@ -55,45 +55,44 @@ export const DraggableContainer: React.FC<IDraggableContainerProps> = ({
   }, []);
 
   return (
-    <DraggableRef ref={draggableRef} width={width} height={height || 'auto'}>
-      <Draggable
-        cancel={`.container-close,${cancelDrag}`}
-        onDrag={(_e, data: DraggableData) => {
-          if (onPositionChange) {
-            onPositionChange({
-              x: data.x,
-              y: data.y,
-            });
-          }
-        }}
+    <Draggable
+      cancel={`.container-close,${cancelDrag}`}
+      onDrag={(_e, data: DraggableData) => {
+        if (onPositionChange) {
+          onPositionChange({
+            x: data.x,
+            y: data.y,
+          });
+        }
+      }}
+    >
+      <Container
+        ref={draggableRef}
+        width={width}
+        height={height || 'auto'}
+        className={`rpgui-container ${type} ${className}`}
       >
-        <Container
-          width={width}
-          height={height || 'auto'}
-          className={`rpgui-container ${type} ${className}`}
-        >
-          {title && (
-            <TitleContainer className="drag-handler">
-              <Title>
-                {imgSrc && <Icon src={imgSrc} width={imgWidth} />}
-                {title}
-              </Title>
-            </TitleContainer>
-          )}
-          {onCloseButton && (
-            <CloseButton
-              className="container-close"
-              onClick={onCloseButton}
-              onTouchStart={onCloseButton}
-            >
-              X
-            </CloseButton>
-          )}
-
-          {children}
-        </Container>
-      </Draggable>
-    </DraggableRef>
+        {title && (
+          <TitleContainer className="drag-handler">
+            <Title>
+              {imgSrc && <Icon src={imgSrc} width={imgWidth} />}
+              {title}
+            </Title>
+          </TitleContainer>
+        )}
+        {onCloseButton && (
+          <CloseButton
+            className="container-close"
+            onClick={onCloseButton}
+            onTouchStart={onCloseButton}
+          >
+            X
+          </CloseButton>
+        )}
+
+        {children}
+      </Container>
+    </Draggable>
   );
 };
 
@@ -102,11 +101,6 @@ interface IContainerProps {
   height: string;
 }
 
-const DraggableRef = styled.div<IContainerProps>`
-  height: ${props => props.height};
-  width: ${({ width }) => width};
-`;
-
 const Container = styled.div<IContainerProps>`
   height: ${props => props.height};
   width: ${({ width }) => width};

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

@@ -16,7 +16,7 @@ const EquipmentSlotSpriteByType: any = {
   Ring: 'rings/iron-ring.png',
   Head: 'helmets/viking-helmet.png',
   Torso: 'armors/iron-armor.png',
-  Legs: 'crafting-resources/medicinal-leaf.png',
+  Legs: 'legs/studded-legs.png',
   Feet: 'boots/iron-boots.png',
   Inventory: 'containers/bag.png',
   RightHand: 'shields/plate-shield.png',

package/src/components/Multitab/TabsContainer.tsx

@@ -37,9 +37,7 @@ export const TabsContainer: React.FC<ITabsContainer> = ({
         label={tab.label}
         key={`${tab.label}_${index}`}
         onClick={() => setSelectedTab(tab.id)}
-      >
-        {tab.label}
-      </Tab>
+      />
     ));
 
   const onGetContainerType = () => {

package/src/components/ScrollList.tsx

@@ -0,0 +1,77 @@
+import React from 'react';
+import styled from 'styled-components';
+import { DraggableContainer } from './DraggableContainer';
+
+interface IListMenuOption {
+  id: string;
+  text: string;
+}
+
+export interface IListMenuProps {
+  x: number;
+  y: number;
+  options: IListMenuOption[];
+  onSelected: (selectedOptionId: string) => void;
+  fontSize?: number;
+  title: string;
+}
+
+export const ListMenu: React.FC<IListMenuProps> = ({
+  options,
+  onSelected,
+  title,
+}) => {
+  return (
+    <ScrollListContainer title={title}>
+      <SkillSplitDiv>
+        <hr className="golden" />
+      </SkillSplitDiv>
+
+      <ListContainer className="rpgui-list-imp">
+        {options.map(params => (
+          <ListElement
+            key={params?.id}
+            onClick={() => {
+              onSelected(params?.id);
+            }}
+          >
+            {params?.text || 'No text'}
+          </ListElement>
+        ))}
+      </ListContainer>
+    </ScrollListContainer>
+  );
+};
+
+const ScrollListContainer = styled(DraggableContainer)`
+  border: 1px solid black;
+  width: 400px;
+  height: 400px;
+  .DraggableContainer__TitleContainer-sc-184mpyl-2 {
+    width: auto;
+    height: auto;
+  }
+`;
+
+const SkillSplitDiv = styled.div`
+  width: 100%;
+  font-size: 11px;
+  margin-bottom: 10px;
+  hr {
+    margin: 0px;
+    padding: 0px;
+  }
+  p {
+    margin-bottom: 0px;
+  }
+`;
+
+const ListContainer = styled.ul`
+  border: none;
+  width: 400px;
+  height: 250px;
+  overflow-y: scroll;
+`;
+const ListElement = styled.li`
+  margin-right: 0.5rem;
+`;

package/src/index.tsx

@@ -18,6 +18,7 @@ export * from './components/RPGUIRoot';
 export * from './components/shared/SpriteFromAtlas';
 export * from './components/shared/SpriteIcon';
 export * from './components/SkillProgressBar';
+export * from './components/SkillsContainer';
 export * from './components/TextArea';
 export * from './components/Truncate';
 export * from './components/typography/DynamicText';