@rpg-engine/long-bow 0.2.62 → 0.2.64

package/dist/stories/DropdownSelectorContainer.stories.d.ts

@@ -0,0 +1,5 @@
+import { Meta } from '@storybook/react';
+import { IDropdownSelectorContainer } from '../components/DropdownSelectorContainer';
+declare const meta: Meta;
+export default meta;
+export declare const Default: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactFramework, IDropdownSelectorContainer>;

package/dist/stories/ItemSelector.stories.d.ts

@@ -0,0 +1,4 @@
+import { Meta } from '@storybook/react';
+declare const meta: Meta;
+export default meta;
+export declare const Default: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactFramework, import("@storybook/react").Args>;

package/dist/stories/RadioInput.stories.d.ts

@@ -0,0 +1,5 @@
+import { Meta } from '@storybook/react';
+import { IRadioInput } from '../components/RadioInput/RadioInput';
+declare const meta: Meta;
+export default meta;
+export declare const RadioInputElement: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactFramework, IRadioInput>;

package/package.json

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

package/src/components/Dropdown.tsx

@@ -28,7 +28,7 @@ export const Dropdown: React.FC<IDropdownProps> = ({
   useEffect(() => {
     const firstOption = options[0];
 
-    if (firstOption) {
+    if (firstOption && !selectedValue) {
       setSelectedValue(firstOption.value);
       setSelectedOption(firstOption.option);
     }

package/src/components/DropdownSelectorContainer.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import styled from 'styled-components';
+import { uiFonts } from '../constants/uiFonts';
+import { Dropdown } from './Dropdown';
+
+interface IDropdownSelectorOption {
+  id: string;
+  name: string;
+}
+
+export interface IDropdownSelectorContainer {
+  onChange: (id: string) => void;
+  options: IDropdownSelectorOption[];
+  details?: string;
+  title: string;
+}
+
+export const DropdownSelectorContainer: React.FC<IDropdownSelectorContainer> = ({
+  title,
+  onChange,
+  options,
+  details,
+}) => {
+  return (
+    <div>
+      <p>{title}</p>
+      <Dropdown
+        options={options.map((option, index) => ({
+          option: option.name,
+          value: option.id,
+          id: index,
+        }))}
+        onChange={onChange}
+      />
+      <Details>{details}</Details>
+    </div>
+  );
+};
+
+const Details = styled.p`
+  font-size: ${uiFonts.size.xsmall} !important;
+`;

package/src/components/NPCDialog/NPCDialogText.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import styled from 'styled-components';
 import { chunkString } from '../../libs/StringHelpers';
 import { DynamicText } from '../typography/DynamicText';
@@ -16,10 +16,27 @@ export const NPCDialogText: React.FC<IProps> = ({
   onEndStep,
   onStartStep,
 }) => {
-  const textChunks = chunkString(text, 200);
+  const windowSize = useRef([window.innerWidth, window.innerHeight]);
+  function maxCharacters(width: number) {
+    // Set the font size to 16 pixels
+    var fontSize = 11.2;
 
-  const [chunkIndex, setChunkIndex] = useState<number>(0);
+    // Calculate the number of characters that can fit in one line
+    var charactersPerLine = Math.floor(width / 2 / fontSize);
+
+    // Calculate the number of lines that can fit in the div
+    var linesPerDiv = Math.floor(180 / fontSize);
+
+    // Calculate the maximum number of characters that can fit in the div
+    var maxCharacters = charactersPerLine * linesPerDiv;
 
+    // Return the maximum number of characters
+    return Math.round(maxCharacters / 5);
+  }
+
+  const textChunks = chunkString(text, maxCharacters(windowSize.current[0]));
+
+  const [chunkIndex, setChunkIndex] = useState<number>(0);
   const onHandleSpacePress = (event: KeyboardEvent) => {
     if (event.code === 'Space') {
       const hasNextChunk = textChunks?.[chunkIndex + 1] || false;

package/src/components/RadioInput/RadioButton.tsx

@@ -0,0 +1,98 @@
+import { capitalize } from 'lodash';
+import React from 'react';
+import styled from 'styled-components';
+import { uiColors } from '../../constants/uiColors';
+import { Ellipsis } from '../shared/Ellipsis';
+
+export interface IRadioProps {  
+  title:string,
+  subtitle:string,
+  instrument:string|null
+  setInstrument: (value: string) => void;
+}
+
+export const RadioButton: React.FC<IRadioProps> = ({
+  title,
+  subtitle,
+  instrument,
+  setInstrument,
+}) => {
+  const isRadioSelected=(value:string):boolean=>instrument===value;
+
+  const handleClick = (e:string):void => {  
+    setInstrument(e)
+};
+
+  return (
+     <ItemWrapper onClick={() => handleClick(title)} >
+      <ItemIconContainer>
+        <SpriteContainer id='elemento-radio'>
+          <input
+          type='radio'
+          name='react-radio-btn'
+          className='rpgui-radio'
+          value={title}
+          checked={isRadioSelected(title)}
+          onChange={(e)=>(e)}
+          />
+        </SpriteContainer>
+      </ItemIconContainer>
+      <ItemNameContainer>
+        <NameValue onClick={() => handleClick(title)}>
+          <p>{title}</p>
+          <p>
+            <Ellipsis maxLines={1} maxWidth="250px">
+              {capitalize(subtitle)}
+            </Ellipsis>
+          </p>
+          
+        </NameValue>
+      </ItemNameContainer>
+    </ItemWrapper>
+  );
+};
+
+const ItemWrapper = styled.div`
+  width: 100%;
+  margin: auto;
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 1rem;
+
+  &:hover {
+    background-color: ${uiColors.darkGray};
+  }
+  padding: 0.5rem;
+`;
+
+
+const ItemNameContainer = styled.div`
+  flex: 80%;
+`;
+
+const ItemIconContainer = styled.div`
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+
+  flex: 0 0 58px;
+`;
+
+const SpriteContainer = styled.div`
+input {
+  display:block !important;
+  &:hover {
+    cursor: pointer;
+  }
+  };
+  position: relative;
+  top: -0.5rem;
+  left: 0.5rem;
+`;
+
+const NameValue = styled.div`
+  p {
+    font-size: 0.75rem;
+    margin: 0;
+  }
+`;

package/src/components/RadioInput/RadioInput.tsx

@@ -0,0 +1,99 @@
+import React, { useState } from 'react';
+import styled from 'styled-components';
+import { DraggableContainer } from '../DraggableContainer';
+import { RPGUIContainerTypes } from '../RPGUIContainer';
+import { Button, ButtonTypes } from '../Button';
+import { RadioButton } from './RadioButton';
+
+export interface IRadioItems {
+    title: string;
+    subtitle: string;
+  }
+export interface IRadioInput {
+    title:string,
+    subtitle:string,
+    onSelect:(a:string)=>void,
+    onCancel:()=>void,
+    items:IRadioItems[]
+}
+
+export const RadioInput: React.FC<IRadioInput>=({title,subtitle,onSelect,onCancel,items})=>{
+const [instrument, setInstrument] = useState('')
+
+const confirHandler=()=>{
+    if(instrument){
+       onSelect(instrument)
+    }   
+}
+    
+return (
+    <DraggableContainer
+      type={RPGUIContainerTypes.Framed}
+      onCloseButton={() => {
+        if (onCancel) onCancel();
+      }}
+      width="500px"
+      cancelDrag=".equipment-container-body .arrow-selector"
+    >
+        <>
+        <div style={{ width: '100%' }}>
+          <Title>{title}</Title>
+          <Subtitle>{subtitle}</Subtitle>
+          <hr className="golden" />
+        </div>
+        <RadioInputScroller>{
+            items.map((item,index)=>(             
+              <RadioButton  
+              key={`${item.title}_${index}`}
+              title={item.title}
+              subtitle={item.subtitle}
+              setInstrument={setInstrument}
+              instrument={instrument}
+              />            
+            ))
+}
+        </RadioInputScroller>
+        <ButtonWrapper>
+          <Button
+            buttonType={ButtonTypes.RPGUIButton}
+            onClick={() => onCancel()}
+           >
+            Cancel
+           </Button>
+           <Button
+            buttonType={ButtonTypes.RPGUIButton}            
+            onClick={ confirHandler}
+           >
+            Select
+           </Button>
+          
+        </ButtonWrapper>
+
+        </>
+    </DraggableContainer>
+)
+}
+const RadioInputScroller = styled.div`
+  overflow-y: scroll;
+  height: 390px;
+  width: 100%;
+  margin-top: 1rem;
+`;
+
+const Title = styled.h1`
+  z-index: 22;
+  font-size: 0.6rem;
+  color: yellow !important;
+`;
+const Subtitle = styled.h1`
+  z-index: 22;
+  font-size: 0.4rem;
+  color: yellow !important;
+`;
+const ButtonWrapper = styled.div`
+  display: flex;
+  justify-content: flex-end;
+  padding-top: 20px;
+  width: 100%;
+  margin-top: 1rem;
+`;

package/src/components/RadioInput/instruments.ts

@@ -0,0 +1,16 @@
+
+export const Itools:{title:string,subtitle:string}[] = [
+    {        
+        title : 'Ax',
+        subtitle:'Cut down trees',        
+      }, {
+        title : 'Sawing',
+        subtitle:'cut the wood into small pieces',        
+      }, {
+        title : 'Sickle',
+        subtitle:'harvesting cereal plants',        
+      }, {
+        title : 'Bow',
+        subtitle:'Hunting monsters',        
+      },   
+  ];

package/src/components/TimeWidget/TimeWidget.tsx

@@ -37,6 +37,7 @@ const WidgetContainer = styled.div`
   background-repeat: no-repeat;
   width: 10rem;
   position: absolute;
+  height: 100px;
 `;
 
 const Time = styled.div`

package/src/components/itemSelector/ItemSelector.tsx

@@ -0,0 +1,132 @@
+import React, { useEffect, useState } from 'react';
+import styled from 'styled-components';
+import { Button, ButtonTypes } from '../Button';
+import { DraggableContainer } from '../DraggableContainer';
+import { RPGUIContainerTypes } from '../RPGUIContainer';
+import { SpriteFromAtlas } from '../shared/SpriteFromAtlas';
+
+export interface IOptionsItemSelectorProps {
+  name: string;
+  description: string;
+  imageKey: string;
+}
+
+export interface IItemSelectorProps {
+  atlasJSON: any;
+  atlasIMG: any;
+  options: IOptionsItemSelectorProps[];
+  onClose: () => void;
+  onSelect: (value: string) => void;
+}
+
+export const ItemSelector: React.FC<IItemSelectorProps> = ({
+  atlasIMG,
+  atlasJSON,
+  options,
+  onClose,
+  onSelect,
+}) => {
+  const [selectedValue, setSelectedValue] = useState<string>();
+  const handleClick = () => {
+    let element = document.querySelector(
+      `input[name='test']:checked`
+    ) as HTMLInputElement;
+    const elementValue = element.value;
+    setSelectedValue(elementValue);
+  };
+
+  useEffect(() => {
+    if (selectedValue) {
+      onSelect(selectedValue);
+    }
+  }, [selectedValue]);
+  return (
+    <DraggableContainer
+      type={RPGUIContainerTypes.Framed}
+      width="500px"
+      cancelDrag=".equipment-container-body .arrow-selector"
+      onCloseButton={() => {
+        if (onClose) {
+          onClose();
+        }
+      }}
+    >
+      <div style={{ width: '100%' }}>
+        <Title>{'Harvesting instruments'}</Title>
+        <Subtitle>{'Use the tool, you need it'}</Subtitle>
+        <hr className="golden" />
+      </div>
+      <RadioInputScroller>
+        {options?.map((option, index) => (
+          <RadioOptionsWrapper key={index}>
+            <SpriteAtlasWrapper>
+              <SpriteFromAtlas
+                atlasIMG={atlasIMG}
+                atlasJSON={atlasJSON}
+                spriteKey={option.imageKey}
+                imgScale={3}
+              />
+            </SpriteAtlasWrapper>
+            <div>
+              <input
+                className="rpgui-radio"
+                type="radio"
+                value={option.name}
+                name="test"
+              />
+              <label
+                onClick={handleClick}
+                style={{ display: 'flex', alignItems: 'center' }}
+              >
+                {option.name} <br />
+                {option.description}
+              </label>
+            </div>
+          </RadioOptionsWrapper>
+        ))}
+      </RadioInputScroller>
+      <ButtonWrapper>
+        <Button buttonType={ButtonTypes.RPGUIButton} onClick={onClose}>
+          Cancel
+        </Button>
+        <Button buttonType={ButtonTypes.RPGUIButton}>Select</Button>
+      </ButtonWrapper>
+    </DraggableContainer>
+  );
+};
+
+const Title = styled.h1`
+  font-size: 0.6rem;
+  color: yellow !important;
+`;
+const Subtitle = styled.h1`
+  font-size: 0.4rem;
+  color: yellow !important;
+`;
+
+const RadioInputScroller = styled.div`
+  width: 100%;
+  margin-top: 1rem;
+  align-items: center;
+  margin-left: 20px;
+  align-items: flex-start;
+  overflow-y: scroll;
+  height: 360px;
+`;
+
+const SpriteAtlasWrapper = styled.div`
+  margin-right: 40px;
+`;
+
+const RadioOptionsWrapper = styled.div`
+  display: flex;
+  align-items: stretch;
+  margin-bottom: 40px;
+`;
+
+const ButtonWrapper = styled.div`
+  display: flex;
+  justify-content: space-around;
+  padding-top: 20px;
+  width: 100%;
+`;

package/src/index.tsx

@@ -4,6 +4,7 @@ export * from './components/Chat/Chat';
 export * from './components/CheckButton';
 export * from './components/DraggableContainer';
 export * from './components/Dropdown';
+export * from './components/DropdownSelectorContainer';
 export * from './components/Equipment/EquipmentSet';
 export * from './components/HistoryDialog';
 export * from './components/Input';
@@ -17,16 +18,17 @@ export * from './components/ProgressBar';
 export * from './components/PropertySelect/PropertySelect';
 export * from './components/QuestInfo/QuestInfo';
 export * from './components/QuestList';
-export * from './components/RadioButton';
-export * from './components/RangeSlider';
 export * from './components/RPGUIContainer';
 export * from './components/RPGUIRoot';
-export * from './components/shared/SpriteFromAtlas';
+export * from './components/RadioButton';
+export * from './components/RangeSlider';
 export * from './components/SkillProgressBar';
 export * from './components/SkillsContainer';
 export * from './components/TextArea';
 export * from './components/TimeWidget/TimeWidget';
 export * from './components/TradingMenu/TradingMenu';
 export * from './components/Truncate';
+export * from './components/itemSelector/ItemSelector';
+export * from './components/shared/SpriteFromAtlas';
 export * from './components/typography/DynamicText';
 export { useEventListener } from './hooks/useEventListener';

package/src/stories/DropdownSelectorContainer.stories.tsx

@@ -0,0 +1,41 @@
+import { Meta, Story } from '@storybook/react';
+import React from 'react';
+import { RPGUIRoot } from '..';
+import {
+  DropdownSelectorContainer,
+  IDropdownSelectorContainer,
+} from '../components/DropdownSelectorContainer';
+
+const meta: Meta = {
+  title: 'DropdownSelectorContainer',
+  component: DropdownSelectorContainer,
+};
+
+export default meta;
+
+const Template: Story<IDropdownSelectorContainer> = args => (
+  <RPGUIRoot>
+    <DropdownSelectorContainer {...args} details="There are server details" />
+  </RPGUIRoot>
+);
+
+export const Default = Template.bind({});
+
+Default.args = {
+  title: 'Choose a server',
+  onChange: () => {},
+  options: [
+    {
+      id: 'europe-germany',
+      name: 'Europe (Germany)',
+    },
+    {
+      id: 'europe-uk',
+      name: 'Europe (UK)',
+    },
+    {
+      id: 'america-us',
+      name: 'America',
+    },
+  ],
+};

package/src/stories/ItemSelector.stories.tsx

@@ -0,0 +1,77 @@
+import { Meta, Story } from '@storybook/react';
+import React from 'react';
+import { RPGUIRoot } from '..';
+import {
+  IOptionsItemSelectorProps,
+  ItemSelector,
+} from '../components/itemSelector/ItemSelector';
+import atlasJSON from '../mocks/atlas/items/items.json';
+import atlasIMG from '../mocks/atlas/items/items.png';
+
+const meta: Meta = {
+  title: 'Item Selector',
+  component: ItemSelector,
+};
+
+export default meta;
+
+const Template: Story = args => (
+  <RPGUIRoot>
+    <ItemSelector
+      atlasIMG={atlasIMG}
+      atlasJSON={atlasJSON}
+      options={options}
+      onSelect={onSelect}
+      onClose={() => console.log('closing Equipment Set Container')}
+      {...args}
+    />
+  </RPGUIRoot>
+);
+
+export const Default = Template.bind({});
+
+const onSelect = (value: string): void => {
+  console.log('Story package', value);
+};
+
+const options: IOptionsItemSelectorProps[] = [
+  {
+    name: 'Human',
+    description: 'Human',
+    imageKey: 'axes/frost-double-axe.png',
+  },
+  {
+    name: 'Human',
+    description: 'Human',
+    imageKey: 'maces/spiked-club.png',
+  },
+  {
+    name: 'Human2',
+    description: 'Human2',
+    imageKey: 'axes/frost-double-axe.png',
+  },
+  {
+    name: 'Human3',
+    description: 'Human3',
+    imageKey: 'maces/spiked-club.png',
+  },
+  {
+    name: 'Human4',
+    description: 'Human4',
+    imageKey: 'axes/frost-double-axe.png',
+  },
+  {
+    name: 'Human5',
+    description: 'Human5',
+    imageKey: 'maces/spiked-club.png',
+  },
+  {
+    name: 'Human6',
+    description: 'Human6',
+    imageKey: 'axes/frost-double-axe.png',
+  },
+];
+
+Default.args = {
+  options,
+};

package/src/stories/RadioInput.stories.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import { Meta, Story } from '@storybook/react';
+import { RadioInput ,IRadioInput} from '../components/RadioInput/RadioInput';
+import { RPGUIRoot } from '../components/RPGUIRoot';
+import { Itools } from '../components/RadioInput/instruments';
+
+const meta: Meta = {    
+    component: RadioInput,
+  };
+
+export default meta;
+const Template: Story<IRadioInput> = args => (
+    <RPGUIRoot>
+      <RadioInput {...args} />
+    </RPGUIRoot>
+  );
+  
+  export const RadioInputElement = Template.bind({});
+
+  const onSelectIt = (value:string):void => {
+    console.log('Story package', value);
+  };
+  
+  const onClose = () => {
+    console.log('close');
+  };
+
+  RadioInputElement.args={
+    title:"Harvesting instruments",
+    subtitle:'Use the tool, you need it',
+    onSelect:onSelectIt,
+    onCancel:onClose,
+    items:Itools
+
+  }