@rpg-engine/long-bow 0.3.43 → 0.3.44

package/src/components/CraftBook/CraftBook.tsx

@@ -1,230 +0,0 @@
-import { ICraftableItem, ItemSubType } from '@rpg-engine/shared';
-import React, { useState } from 'react';
-import styled from 'styled-components';
-import { Button, ButtonTypes } from '../Button';
-import { DraggableContainer } from '../DraggableContainer';
-import { Dropdown, IOptionsProps } from '../Dropdown';
-import { RPGUIContainerTypes } from '../RPGUIContainer';
-import { SpriteFromAtlas } from '../shared/SpriteFromAtlas';
-
-export interface IItemCraftSelectorProps {
-  atlasJSON: any;
-  atlasIMG: any;
-  onClose: () => void;
-  onSelect: (value: string) => void;
-  onCraftItem: (value: string | undefined) => void;
-  craftablesItems: ICraftableItem[];
-}
-
-export interface ShowMessage {
-  show: boolean;
-  index: number;
-}
-
-export const CraftBook: React.FC<IItemCraftSelectorProps> = ({
-  atlasIMG,
-  atlasJSON,
-  onClose,
-  onSelect,
-  onCraftItem,
-  craftablesItems,
-}) => {
-  let optionsId: number = 0;
-  const [isShown, setIsShown] = useState<ShowMessage>({
-    show: false,
-    index: 200,
-  });
-  const [craftItem, setCraftItem] = useState<string>();
-
-  const getDropdownOptions = () => {
-    const options: IOptionsProps[] = [];
-
-    Object.keys(ItemSubType).forEach(key => {
-      if (key === 'CraftingResource' || key === 'DeadBody') {
-        return; // we can't craft crafting resouces...
-      }
-
-      options.push({
-        id: optionsId,
-        value: key,
-        option: key,
-      });
-      optionsId += 1;
-    });
-
-    return options;
-  };
-
-  const modifyString = (str: string) => {
-    // Split the string by "/" and "."
-    let parts = str.split('/');
-    let fileName = parts[parts.length - 1];
-    parts = fileName.split('.');
-    let name = parts[0];
-
-    // Replace all occurrences of "-" with " "
-    name = name.replace(/-/g, ' ');
-
-    // Uppercase the first word
-    let words = name.split(' ');
-    let firstWord = words[0].slice(0, 1).toUpperCase() + words[0].slice(1);
-    let modifiedWords = [firstWord].concat(words.slice(1));
-    name = modifiedWords.join(' ');
-
-    return name;
-  };
-
-  const handleClick = (value: string) => {
-    setCraftItem(value);
-  };
-
-  return (
-    <DraggableContainer
-      type={RPGUIContainerTypes.Framed}
-      width="500px"
-      cancelDrag=".equipment-container-body .arrow-selector .rpgui-dropdown-imp"
-      onCloseButton={() => {
-        if (onClose) {
-          onClose();
-        }
-      }}
-    >
-      <div style={{ width: '100%' }}>
-        <Title>{'Craftbook'}</Title>
-        <Subtitle>{'Select an item to craft'}</Subtitle>
-        <hr className="golden" />
-      </div>
-      <Dropdown
-        options={getDropdownOptions()}
-        onChange={value => onSelect(value)}
-      />
-      <RadioInputScroller>
-        {craftablesItems?.map((option, index) => (
-          <RadioOptionsWrapper key={index}>
-            <SpriteAtlasWrapper>
-              <SpriteFromAtlas
-                atlasIMG={atlasIMG}
-                atlasJSON={atlasJSON}
-                spriteKey={option.texturePath}
-                imgScale={3}
-                grayScale={!option.canCraft}
-              />
-            </SpriteAtlasWrapper>
-            <div>
-              <input
-                className="rpgui-radio"
-                type="radio"
-                value={option.name}
-                name="test"
-                disabled={!option.canCraft}
-                checked={craftItem === option.key}
-                onChange={() => handleClick(option.key)}
-              />
-              <label
-                onClick={() => {
-                  handleClick(option.key);
-                }}
-                onTouchStart={() => {
-                  setIsShown({ show: true, index: index });
-                }}
-                style={{ display: 'flex', alignItems: 'center' }}
-                onMouseEnter={() => setIsShown({ show: true, index: index })}
-                onMouseLeave={() => setIsShown({ show: false, index: index })}
-              >
-                {modifyString(option.name)}
-              </label>
-
-              {isShown &&
-                isShown.index === index &&
-                option.ingredients.map((option, index) => (
-                  <Recipes key={index}>
-                    <SpriteFromAtlas
-                      atlasIMG={atlasIMG}
-                      atlasJSON={atlasJSON}
-                      spriteKey={option.texturePath}
-                      imgScale={1}
-                    />
-                    <StyledItem>
-                      {modifyString(option.key)} ({option.qty}x)
-                    </StyledItem>
-                  </Recipes>
-                ))}
-            </div>
-          </RadioOptionsWrapper>
-        ))}
-      </RadioInputScroller>
-      <ButtonWrapper>
-        <Button
-          buttonType={ButtonTypes.RPGUIButton}
-          onClick={onClose}
-          onTouchStart={onClose}
-        >
-          Cancel
-        </Button>
-        <Button
-          buttonType={ButtonTypes.RPGUIButton}
-          onClick={() => onCraftItem(craftItem)}
-          onTouchStart={() => onCraftItem(craftItem)}
-        >
-          Craft
-        </Button>
-      </ButtonWrapper>
-    </DraggableContainer>
-  );
-};
-
-const StyledItem = styled.div`
-  margin-left: 10px;
-`;
-
-const Recipes = styled.div`
-  font-size: 0.6rem;
-  color: yellow !important;
-  margin-bottom: 3px;
-  display: flex;
-  align-items: center;
-
-  .sprite-from-atlas-img {
-    top: 0px;
-    left: 0px;
-  }
-`;
-
-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`
-  padding-left: 15px;
-  padding-top: 10px;
-  width: 100%;
-  margin-top: 1rem;
-  align-items: center;
-  margin-left: 20px;
-  align-items: flex-start;
-  overflow-y: scroll;
-  height: 360px;
-  -webkit-overflow-scrolling: touch;
-`;
-
-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/components/CraftBook/MockItems.ts

@@ -1,46 +0,0 @@
-import { ICraftableItem } from '@rpg-engine/shared';
-
-export const craftableItems: ICraftableItem[] = [
-  {
-    key: 'bandana',
-    name: 'Bandana',
-    canCraft: true,
-    texturePath: 'accessories/bandana.png',
-    ingredients: [
-      {
-        key: 'leather',
-        name: 'leather',
-        qty: 10,
-        texturePath: 'crafting-resources/leather.png',
-      },
-    ],
-  },
-  {
-    key: 'bandana1',
-    name: 'Bandana',
-    canCraft: true,
-    texturePath: 'accessories/bandana.png',
-    ingredients: [
-      {
-        key: 'leather',
-        name: 'leather',
-        qty: 10,
-        texturePath: 'crafting-resources/leather.png',
-      },
-    ],
-  },
-  {
-    key: 'bandana2',
-    name: 'Bandana',
-    canCraft: true,
-    texturePath: 'accessories/bandana.png',
-    ingredients: [
-      {
-        key: 'leather',
-        name: 'leather',
-        qty: 10,
-        texturePath: 'crafting-resources/leather.png',
-      },
-    ],
-  },
-];

package/src/components/DropdownSelectorContainer.tsx

@@ -1,42 +0,0 @@
-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/Item/Inventory/ItemQuantitySelector.tsx

@@ -1,142 +0,0 @@
-import React, { useEffect, useRef, useState } from 'react';
-import styled from 'styled-components';
-import { Button, ButtonTypes } from '../../Button';
-import { Input } from '../../Input';
-import { RPGUIContainer, RPGUIContainerTypes } from '../../RPGUIContainer';
-import { RangeSlider, RangeSliderType } from '../../RangeSlider';
-
-export interface IItemQuantitySelectorProps {
-  quantity: number;
-  onConfirm: (quantity: number) => void;
-  onClose: () => void;
-}
-
-export const ItemQuantitySelector: React.FC<IItemQuantitySelectorProps> = ({
-  quantity,
-  onConfirm,
-  onClose,
-}) => {
-  const [value, setValue] = useState(quantity);
-
-  const inputRef = useRef<HTMLInputElement>(null);
-
-  useEffect(() => {
-    if (inputRef.current) {
-      inputRef.current.focus();
-      inputRef.current.select();
-
-      const closeSelector = (e: KeyboardEvent) => {
-        if (e.key === 'Escape') {
-          onClose();
-        }
-      };
-
-      document.addEventListener('keydown', closeSelector);
-
-      return () => {
-        document.removeEventListener('keydown', closeSelector);
-      };
-    }
-
-    return () => {};
-  }, []);
-
-  return (
-    <StyledContainer type={RPGUIContainerTypes.Framed} width="25rem">
-      <CloseButton
-        className="container-close"
-        onClick={onClose}
-        onTouchStart={onClose}
-      >
-        X
-      </CloseButton>
-      <h2>Select quantity to move</h2>
-      <StyledForm
-        style={{ width: '100%' }}
-        onSubmit={e => {
-          e.preventDefault();
-
-          const numberValue = Number(value);
-
-          if (Number.isNaN(numberValue)) {
-            return;
-          }
-
-          onConfirm(Math.max(1, Math.min(quantity, numberValue)));
-        }}
-        noValidate
-      >
-        <StyledInput
-          innerRef={inputRef}
-          placeholder="Enter quantity"
-          type="number"
-          min={1}
-          max={quantity}
-          value={value}
-          onChange={e => {
-            if (Number(e.target.value) >= quantity) {
-              setValue(quantity);
-              return;
-            }
-
-            setValue((e.target.value as unknown) as number);
-          }}
-          onBlur={e => {
-            const newValue = Math.max(
-              1,
-              Math.min(quantity, Number(e.target.value))
-            );
-
-            setValue(newValue);
-          }}
-        />
-        <RangeSlider
-          type={RangeSliderType.Slider}
-          valueMin={1}
-          valueMax={quantity}
-          width="100%"
-          onChange={setValue}
-          value={value}
-        />
-        <Button buttonType={ButtonTypes.RPGUIButton} type="submit">
-          Confirm
-        </Button>
-      </StyledForm>
-    </StyledContainer>
-  );
-};
-
-const StyledContainer = styled(RPGUIContainer)`
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-`;
-
-const StyledForm = styled.form`
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  width: 100%;
-`;
-const StyledInput = styled(Input)`
-  text-align: center;
-
-  &::-webkit-outer-spin-button,
-  &::-webkit-inner-spin-button {
-    -webkit-appearance: none;
-    margin: 0;
-  }
-
-  &[type='number'] {
-    -moz-appearance: textfield;
-  }
-`;
-
-const CloseButton = styled.div`
-  position: absolute;
-  top: 3px;
-  right: 0px;
-  color: white;
-  z-index: 22;
-  font-size: 0.8rem;
-`;

package/src/components/RadioInput/RadioButton.tsx

@@ -1,98 +0,0 @@
-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

@@ -1,99 +0,0 @@
-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

@@ -1,16 +0,0 @@
-
-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',        
-      },   
-  ];