@rpg-engine/long-bow 0.3.54 → 0.3.57

package/src/components/RadioInput/RadioButton.tsx

@@ -1,98 +1,96 @@
-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;
-  }
-`;
+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 onPointerDown={() => 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 onPointerDown={() => 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 +1,102 @@
-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;
-`;
+import React, { useState } from 'react';
+import styled from 'styled-components';
+import { Button, ButtonTypes } from '../Button';
+import { DraggableContainer } from '../DraggableContainer';
+import { RPGUIContainerTypes } from '../RPGUIContainer';
+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}
+            onPointerDown={() => onCancel()}
+          >
+            Cancel
+          </Button>
+          <Button
+            buttonType={ButtonTypes.RPGUIButton}
+            onPointerDown={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 +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',        
-      },   
+
+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/RangeSlider.tsx

@@ -1,78 +1,78 @@
-import React, { useEffect, useRef, useState } from 'react';
-import styled from 'styled-components';
-import { v4 as uuidv4 } from 'uuid';
-
-export enum RangeSliderType {
-  Slider = 'rpgui-slider',
-  GoldSlider = 'rpgui-slider golden',
-}
-
-export interface IRangeSliderProps {
-  type: RangeSliderType;
-  valueMin: number;
-  valueMax: number;
-  width: string;
-  onChange: (value: number) => void;
-  value: number;
-}
-
-export const RangeSlider: React.FC<IRangeSliderProps> = ({
-  type,
-  valueMin,
-  valueMax,
-  width,
-  onChange,
-  value,
-}) => {
-  const sliderId = uuidv4();
-
-  const containerRef = useRef<HTMLDivElement>(null);
-  const [left, setLeft] = useState(0);
-
-  useEffect(() => {
-    const calculatedWidth = containerRef.current?.clientWidth || 0;
-    setLeft(
-      Math.max(
-        ((value - valueMin) / (valueMax - valueMin)) * (calculatedWidth - 35) +
-          10
-      )
-    );
-  }, [value, valueMin, valueMax]);
-
-  const typeClass = type === RangeSliderType.GoldSlider ? 'golden' : '';
-
-  return (
-    <div
-      style={{ width: width, position: 'relative' }}
-      className={`rpgui-slider-container ${typeClass}`}
-      id={`rpgui-slider-${sliderId}`}
-      ref={containerRef}
-    >
-      <div style={{ pointerEvents: 'none' }}>
-        <div className={`rpgui-slider-track ${typeClass}`} />
-        <div className={`rpgui-slider-left-edge ${typeClass}`} />
-        <div className={`rpgui-slider-right-edge ${typeClass}`} />
-        <div className={`rpgui-slider-thumb ${typeClass}`} style={{ left }} />
-      </div>
-      <Input
-        type="range"
-        style={{ width: width }}
-        min={valueMin}
-        max={valueMax}
-        onChange={e => onChange(Number(e.target.value))}
-        value={value}
-        className="rpgui-cursor-point"
-      />
-    </div>
-  );
-};
-
-const Input = styled.input`
-  opacity: 0;
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  top: 0;
-  left: 0;
-  margin-top: -5px;
-`;
+import React, { useEffect, useRef, useState } from 'react';
+import styled from 'styled-components';
+import { v4 as uuidv4 } from 'uuid';
+
+export enum RangeSliderType {
+  Slider = 'rpgui-slider',
+  GoldSlider = 'rpgui-slider golden',
+}
+
+export interface IRangeSliderProps {
+  type: RangeSliderType;
+  valueMin: number;
+  valueMax: number;
+  width: string;
+  onChange: (value: number) => void;
+  value: number;
+}
+
+export const RangeSlider: React.FC<IRangeSliderProps> = ({
+  type,
+  valueMin,
+  valueMax,
+  width,
+  onChange,
+  value,
+}) => {
+  const sliderId = uuidv4();
+
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [left, setLeft] = useState(0);
+
+  useEffect(() => {
+    const calculatedWidth = containerRef.current?.clientWidth || 0;
+    setLeft(
+      Math.max(
+        ((value - valueMin) / (valueMax - valueMin)) * (calculatedWidth - 35) +
+          10
+      )
+    );
+  }, [value, valueMin, valueMax]);
+
+  const typeClass = type === RangeSliderType.GoldSlider ? 'golden' : '';
+
+  return (
+    <div
+      style={{ width: width, position: 'relative' }}
+      className={`rpgui-slider-container ${typeClass}`}
+      id={`rpgui-slider-${sliderId}`}
+      ref={containerRef}
+    >
+      <div style={{ pointerEvents: 'none' }}>
+        <div className={`rpgui-slider-track ${typeClass}`} />
+        <div className={`rpgui-slider-left-edge ${typeClass}`} />
+        <div className={`rpgui-slider-right-edge ${typeClass}`} />
+        <div className={`rpgui-slider-thumb ${typeClass}`} style={{ left }} />
+      </div>
+      <Input
+        type="range"
+        style={{ width: width }}
+        min={valueMin}
+        max={valueMax}
+        onChange={e => onChange(Number(e.target.value))}
+        value={value}
+        className="rpgui-cursor-point"
+      />
+    </div>
+  );
+};
+
+const Input = styled.input`
+  opacity: 0;
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  margin-top: -5px;
+`;