@rpg-engine/long-bow 0.3.89 → 0.3.91

package/package.json

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

package/src/components/Character/CharacterSelection.tsx

@@ -3,8 +3,6 @@ import styled from 'styled-components';
 
 import { SpriteFromAtlas } from '../shared/SpriteFromAtlas';
 
-import entitiesJSON from '../../mocks/atlas/entities/entities.json';
-import entitiesIMG from '../../mocks/atlas/entities/entities.png';
 import { ErrorBoundary } from '../Item/Inventory/ErrorBoundary';
 import PropertySelect, {
   IPropertiesProps,
@@ -17,14 +15,18 @@ export interface ICharacterProps {
 
 export interface ICharacterSelectionProps {
   availableCharacters: ICharacterProps[];
+  atlasJSON: any;
+  atlasIMG: any;
   onChange: (textureKey: string) => void;
 }
 
 export const CharacterSelection: React.FC<ICharacterSelectionProps> = ({
   availableCharacters,
+  atlasJSON,
+  atlasIMG,
   onChange,
 }) => {
-  const propertySelectValues = availableCharacters.map(item => {
+  const propertySelectValues = availableCharacters.map((item) => {
     return {
       id: item.textureKey,
       name: item.name,
@@ -56,12 +58,12 @@ export const CharacterSelection: React.FC<ICharacterSelectionProps> = ({
 
   return (
     <Container>
-      {selectedSpriteKey && (
+      {selectedSpriteKey && atlasIMG && atlasJSON && (
         <ErrorBoundary>
           <SpriteFromAtlas
             spriteKey={selectedSpriteKey}
-            atlasIMG={entitiesIMG}
-            atlasJSON={entitiesJSON}
+            atlasIMG={atlasIMG}
+            atlasJSON={atlasJSON}
             imgScale={4}
             height={80}
             width={64}
@@ -78,7 +80,7 @@ export const CharacterSelection: React.FC<ICharacterSelectionProps> = ({
       )}
       <PropertySelect
         availableProperties={propertySelectValues}
-        onChange={value => {
+        onChange={(value) => {
           setSelectedValue(value);
         }}
       />

package/src/components/CraftBook/CraftBook.tsx

@@ -238,4 +238,7 @@ const ButtonWrapper = styled.div`
   justify-content: space-around;
   padding-top: 20px;
   width: 100%;
+  button {
+    padding: 0px 50px;
+  }
 `;

package/src/components/DraggableContainer.tsx

@@ -146,6 +146,10 @@ const CloseButton = styled.div`
   color: white;
   z-index: 22;
   font-size: 1.1rem;
+  @media (max-width: 768px) {
+    font-size: 1.3rem;
+    padding: 3px;
+  }
 `;
 
 const TitleContainer = styled.div`

package/src/components/Dropdown.tsx

@@ -28,9 +28,20 @@ export const Dropdown: React.FC<IDropdownProps> = ({
   useEffect(() => {
     const firstOption = options[0];
 
-    if (firstOption && !selectedValue) {
-      setSelectedValue(firstOption.value);
-      setSelectedOption(firstOption.option);
+    if (firstOption) {
+      let change = !selectedValue;
+      if (!change) {
+        change = options.filter((o) => o.value === selectedValue).length < 1;
+      }
+
+      /**
+       * make a selection if there is no selected value already present
+       * or if there is a selected value but its not in new options
+       */
+      if (change) {
+        setSelectedValue(firstOption.value);
+        setSelectedOption(firstOption.option);
+      }
     }
   }, [options]);
 
@@ -45,13 +56,13 @@ export const Dropdown: React.FC<IDropdownProps> = ({
       <DropdownSelect
         id={`dropdown-${dropdownId}`}
         className="rpgui-dropdown-imp rpgui-dropdown-imp-header"
-        onPointerDown={() => setOpened(prev => !prev)}
+        onPointerDown={() => setOpened((prev) => !prev)}
       >
         <label>▼</label> {selectedOption}
       </DropdownSelect>
 
       <DropdownOptions className="rpgui-dropdown-imp" opened={opened}>
-        {options.map(option => {
+        {options.map((option) => {
           return (
             <li
               key={option.id}
@@ -72,7 +83,7 @@ export const Dropdown: React.FC<IDropdownProps> = ({
 
 const Container = styled.div<{ width: string | undefined }>`
   position: relative;
-  width: ${props => props.width || '100%'};
+  width: ${(props) => props.width || '100%'};
 `;
 
 const DropdownSelect = styled.p`
@@ -85,6 +96,9 @@ const DropdownOptions = styled.ul<{
 }>`
   position: absolute;
   width: 100%;
-  display: ${props => (props.opened ? 'block' : 'none')};
+  display: ${(props) => (props.opened ? 'block' : 'none')};
   box-sizing: border-box;
+  @media (max-width: 768px) {
+    padding: 8px 0;
+  }
 `;

package/src/components/TradingMenu/TradingMenu.tsx

@@ -213,4 +213,7 @@ const ButtonWrapper = styled.div`
   padding-top: 20px;
   width: 100%;
   margin-top: 1rem;
+  button {
+    padding: 0px 50px;
+  }
 `;

package/src/stories/CharacterSelection.stories.tsx

@@ -4,6 +4,8 @@ import { RPGUIRoot } from '..';
 import CharacterSelection, {
   ICharacterProps,
 } from '../components/Character/CharacterSelection';
+import atlasJSON from '../mocks/atlas/entities/entities.json';
+import atlasIMG from '../mocks/atlas/entities/entities.png';
 
 const meta: Meta = {
   title: 'Character Selection',
@@ -12,14 +14,9 @@ const meta: Meta = {
 
 export default meta;
 
-const Template: Story<any> = args => (
+const Template: Story<any> = (args) => (
   <RPGUIRoot>
-    <CharacterSelection
-      {...args}
-      onChange={value => {
-        console.log(value);
-      }}
-    />
+    <CharacterSelection {...args} />
   </RPGUIRoot>
 );
 
@@ -42,4 +39,6 @@ const availableCharacters: ICharacterProps[] = [
 
 Default.args = {
   availableCharacters: availableCharacters,
+  atlasJSON: atlasJSON,
+  atlasIMG: atlasIMG,
 };

package/src/stories/Dropdown.stories.tsx

@@ -14,7 +14,7 @@ const meta: Meta = {
 
 export default meta;
 
-const Template: Story<IDropdownProps> = args => (
+const Template: Story<IDropdownProps> = (args) => (
   <RPGUIRoot>
     <Dropdown {...args} />
   </RPGUIRoot>