@rpg-engine/long-bow 0.1.92 → 0.1.96

package/src/components/RadioButton.tsx

@@ -1,53 +1,53 @@
-import React, { useEffect, useState } from 'react';
-
-export interface IRadioItems {
-  label: string;
-  value: string;
-}
-
-export interface IRadioProps {
-  name: string;
-  items: IRadioItems[];
-  onChange: (value: string) => void;
-}
-
-export const InputRadio: React.FC<IRadioProps> = ({
-  name,
-  items,
-  onChange,
-}) => {
-  const [selectedValue, setSelectedValue] = useState<string>();
-  const handleClick = () => {
-    let element = document.querySelector(
-      `input[name=${name}]:checked`
-    ) as HTMLInputElement;
-    const elementValue = element.value;
-    setSelectedValue(elementValue);
-  };
-
-  useEffect(() => {
-    if (selectedValue) {
-      onChange(selectedValue);
-    }
-  }, [selectedValue]);
-
-  return (
-    <div id="elemento-radio">
-      {items.map(element => {
-        return (
-          <>
-            <input
-              key={element.value}
-              className="rpgui-radio"
-              value={element.value}
-              name={name}
-              type="radio"
-            />
-            <label onClick={handleClick}>{element.label}</label>
-            <br />
-          </>
-        );
-      })}
-    </div>
-  );
-};
+import React, { useEffect, useState } from 'react';
+
+export interface IRadioItems {
+  label: string;
+  value: string;
+}
+
+export interface IRadioProps {
+  name: string;
+  items: IRadioItems[];
+  onChange: (value: string) => void;
+}
+
+export const InputRadio: React.FC<IRadioProps> = ({
+  name,
+  items,
+  onChange,
+}) => {
+  const [selectedValue, setSelectedValue] = useState<string>();
+  const handleClick = () => {
+    let element = document.querySelector(
+      `input[name=${name}]:checked`
+    ) as HTMLInputElement;
+    const elementValue = element.value;
+    setSelectedValue(elementValue);
+  };
+
+  useEffect(() => {
+    if (selectedValue) {
+      onChange(selectedValue);
+    }
+  }, [selectedValue]);
+
+  return (
+    <div id="elemento-radio">
+      {items.map(element => {
+        return (
+          <>
+            <input
+              key={element.value}
+              className="rpgui-radio"
+              value={element.value}
+              name={name}
+              type="radio"
+            />
+            <label onClick={handleClick}>{element.label}</label>
+            <br />
+          </>
+        );
+      })}
+    </div>
+  );
+};

package/src/components/RangeSlider.tsx

@@ -1,68 +1,68 @@
-import React, { useState } from 'react';
-import styled from 'styled-components';
-import { v4 as uuidv4 } from 'uuid';
-import { useEventListener } from '../hooks/useEventListener';
-import { _RPGUI } from './RPGUIRoot';
-
-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;
-}
-
-export const RangeSlider: React.FC<IRangeSliderProps> = ({
-  type,
-  valueMin,
-  valueMax,
-  width,
-  onChange,
-}) => {
-  const sliderId = uuidv4();
-
-  const [wasMouseDownFirst, setWasMouseDownFirst] = useState<boolean>(false);
-
-  useEventListener('mouseup', () => {
-    if (wasMouseDownFirst) {
-      onHandleMouseUp();
-    }
-    setWasMouseDownFirst(false);
-  });
-
-  const onHandleMouseUp = () => {
-    const rpguiSlider = document.getElementById(`rpgui-slider-${sliderId}`);
-    const value = _RPGUI.get_value(rpguiSlider);
-
-    onChange(Number(value));
-  };
-
-  return (
-    <div
-      onMouseUp={onHandleMouseUp}
-      onMouseDown={() => setWasMouseDownFirst(true)}
-    >
-      <Input
-        className={
-          type === RangeSliderType.Slider
-            ? RangeSliderType.Slider
-            : RangeSliderType.GoldSlider
-        }
-        type="range"
-        style={{ width: width }}
-        min={valueMin}
-        max={valueMax}
-        id={`rpgui-slider-${sliderId}`}
-      />
-    </div>
-  );
-};
-
-const Input = styled.input`
-  opacity: 0;
-`;
+import React, { useState } from 'react';
+import styled from 'styled-components';
+import { v4 as uuidv4 } from 'uuid';
+import { useEventListener } from '../hooks/useEventListener';
+import { _RPGUI } from './RPGUIRoot';
+
+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;
+}
+
+export const RangeSlider: React.FC<IRangeSliderProps> = ({
+  type,
+  valueMin,
+  valueMax,
+  width,
+  onChange,
+}) => {
+  const sliderId = uuidv4();
+
+  const [wasMouseDownFirst, setWasMouseDownFirst] = useState<boolean>(false);
+
+  useEventListener('mouseup', () => {
+    if (wasMouseDownFirst) {
+      onHandleMouseUp();
+    }
+    setWasMouseDownFirst(false);
+  });
+
+  const onHandleMouseUp = () => {
+    const rpguiSlider = document.getElementById(`rpgui-slider-${sliderId}`);
+    const value = _RPGUI.get_value(rpguiSlider);
+
+    onChange(Number(value));
+  };
+
+  return (
+    <div
+      onMouseUp={onHandleMouseUp}
+      onMouseDown={() => setWasMouseDownFirst(true)}
+    >
+      <Input
+        className={
+          type === RangeSliderType.Slider
+            ? RangeSliderType.Slider
+            : RangeSliderType.GoldSlider
+        }
+        type="range"
+        style={{ width: width }}
+        min={valueMin}
+        max={valueMax}
+        id={`rpgui-slider-${sliderId}`}
+      />
+    </div>
+  );
+};
+
+const Input = styled.input`
+  opacity: 0;
+`;

package/src/components/RelativeListMenu.tsx

@@ -1,83 +1,83 @@
-import React, { useEffect, useRef } from 'react';
-import styled from 'styled-components';
-import { useOutsideClick } from '../hooks/useOutsideAlerter';
-
-interface IListMenuOption {
-  id: string;
-  text: string;
-}
-
-export interface IRelativeMenuProps {
-  options: IListMenuOption[];
-  onSelected: (selectedOptionId: string) => void;
-  fontSize?: number;
-  onOutsideClick?: () => void;
-}
-
-export const RelativeListMenu: React.FC<IRelativeMenuProps> = ({
-  options,
-  onSelected,
-  onOutsideClick,
-  fontSize = 0.8,
-}) => {
-  const ref = useRef(null);
-
-  useOutsideClick(ref, 'relative-context-menu');
-
-  useEffect(() => {
-    document.addEventListener('clickOutside', event => {
-      const e = event as CustomEvent;
-
-      if (e.detail.id === 'relative-context-menu') {
-        if (onOutsideClick) {
-          onOutsideClick();
-        }
-      }
-    });
-
-    return () => {
-      document.removeEventListener('clickOutside', _e => {});
-    };
-  }, []);
-
-  return (
-    <Container fontSize={fontSize} ref={ref}>
-      <ul className="rpgui-list-imp" style={{ overflow: 'hidden' }}>
-        {options.map((params, index) => (
-          <ListElement
-            key={params?.id || index}
-            onClick={() => {
-              onSelected(params?.id);
-            }}
-          >
-            {params?.text || 'No text'}
-          </ListElement>
-        ))}
-      </ul>
-    </Container>
-  );
-};
-
-interface IContainerProps {
-  fontSize?: number;
-}
-
-const Container = styled.div<IContainerProps>`
-  position: absolute;
-  top: 1rem;
-  left: 4rem;
-
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  justify-content: start;
-  align-items: flex-start;
-
-  li {
-    font-size: ${props => props.fontSize}em;
-  }
-`;
-
-const ListElement = styled.li`
-  margin-right: 0.5rem;
-`;
+import React, { useEffect, useRef } from 'react';
+import styled from 'styled-components';
+import { useOutsideClick } from '../hooks/useOutsideAlerter';
+
+interface IListMenuOption {
+  id: string;
+  text: string;
+}
+
+export interface IRelativeMenuProps {
+  options: IListMenuOption[];
+  onSelected: (selectedOptionId: string) => void;
+  fontSize?: number;
+  onOutsideClick?: () => void;
+}
+
+export const RelativeListMenu: React.FC<IRelativeMenuProps> = ({
+  options,
+  onSelected,
+  onOutsideClick,
+  fontSize = 0.8,
+}) => {
+  const ref = useRef(null);
+
+  useOutsideClick(ref, 'relative-context-menu');
+
+  useEffect(() => {
+    document.addEventListener('clickOutside', event => {
+      const e = event as CustomEvent;
+
+      if (e.detail.id === 'relative-context-menu') {
+        if (onOutsideClick) {
+          onOutsideClick();
+        }
+      }
+    });
+
+    return () => {
+      document.removeEventListener('clickOutside', _e => {});
+    };
+  }, []);
+
+  return (
+    <Container fontSize={fontSize} ref={ref}>
+      <ul className="rpgui-list-imp" style={{ overflow: 'hidden' }}>
+        {options.map((params, index) => (
+          <ListElement
+            key={params?.id || index}
+            onClick={() => {
+              onSelected(params?.id);
+            }}
+          >
+            {params?.text || 'No text'}
+          </ListElement>
+        ))}
+      </ul>
+    </Container>
+  );
+};
+
+interface IContainerProps {
+  fontSize?: number;
+}
+
+const Container = styled.div<IContainerProps>`
+  position: absolute;
+  top: 1rem;
+  left: 4rem;
+
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  justify-content: start;
+  align-items: flex-start;
+
+  li {
+    font-size: ${props => props.fontSize}em;
+  }
+`;
+
+const ListElement = styled.li`
+  margin-right: 0.5rem;
+`;

package/src/components/ScrollList.tsx

@@ -1,77 +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;
-`;
+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/components/SimpleProgressBar.tsx

@@ -1,62 +1,62 @@
-import React from 'react';
-import styled from 'styled-components';
-
-export interface ISimpleProgressBarProps {
-  value: number;
-  bgColor?: string;
-  margin?: number;
-}
-
-export const SimpleProgressBar: React.FC<ISimpleProgressBarProps> = ({
-  value,
-  bgColor = 'red',
-  margin = 20,
-}) => {
-  return (
-    <Container className="simple-progress-bar">
-      <ProgressBarContainer margin={margin}>
-        <BackgroundBar>
-          <Progress value={value} bgColor={bgColor} />
-        </BackgroundBar>
-      </ProgressBarContainer>
-    </Container>
-  );
-};
-
-const Container = styled.div`
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: 100%;
-`;
-
-const BackgroundBar = styled.span`
-  background-color: rgba(0, 0, 0, 0.075);
-`;
-
-interface ISimpleProgressBarThemeProps {
-  value: number;
-  bgColor: string;
-}
-
-const Progress = styled.span`
-  background-color: ${(props: ISimpleProgressBarThemeProps) => props.bgColor};
-  width: ${(props: ISimpleProgressBarThemeProps) => props.value}%;
-`;
-
-interface ISimpleProgressBarTheme2Props {
-  margin: number;
-}
-
-const ProgressBarContainer = styled.div`
-  border-radius: 60px;
-  border: 1px solid #282424;
-  overflow: hidden;
-  width: 100%;
-  span {
-    display: block;
-    height: 100%;
-  }
-  height: 8px;
-  margin-left: ${(props: ISimpleProgressBarTheme2Props) => props.margin}px;
-`;
+import React from 'react';
+import styled from 'styled-components';
+
+export interface ISimpleProgressBarProps {
+  value: number;
+  bgColor?: string;
+  margin?: number;
+}
+
+export const SimpleProgressBar: React.FC<ISimpleProgressBarProps> = ({
+  value,
+  bgColor = 'red',
+  margin = 20,
+}) => {
+  return (
+    <Container className="simple-progress-bar">
+      <ProgressBarContainer margin={margin}>
+        <BackgroundBar>
+          <Progress value={value} bgColor={bgColor} />
+        </BackgroundBar>
+      </ProgressBarContainer>
+    </Container>
+  );
+};
+
+const Container = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+`;
+
+const BackgroundBar = styled.span`
+  background-color: rgba(0, 0, 0, 0.075);
+`;
+
+interface ISimpleProgressBarThemeProps {
+  value: number;
+  bgColor: string;
+}
+
+const Progress = styled.span`
+  background-color: ${(props: ISimpleProgressBarThemeProps) => props.bgColor};
+  width: ${(props: ISimpleProgressBarThemeProps) => props.value}%;
+`;
+
+interface ISimpleProgressBarTheme2Props {
+  margin: number;
+}
+
+const ProgressBarContainer = styled.div`
+  border-radius: 60px;
+  border: 1px solid #282424;
+  overflow: hidden;
+  width: 100%;
+  span {
+    display: block;
+    height: 100%;
+  }
+  height: 8px;
+  margin-left: ${(props: ISimpleProgressBarTheme2Props) => props.margin}px;
+`;