@rpg-engine/long-bow 0.1.91 → 0.1.92

package/src/components/PropertySelect/PropertySelect.tsx

@@ -1,101 +1,101 @@
-import React, { useState } from 'react';
-import styled from 'styled-components';
-import LeftArrowClickIcon from './img/ui-arrows/arrow01-left-clicked.png';
-import LeftArrowIcon from './img/ui-arrows/arrow01-left.png';
-import RightArrowClickIcon from './img/ui-arrows/arrow01-right-clicked.png';
-import RightArrowIcon from './img/ui-arrows/arrow01-right.png';
-
-export interface IPropertySelectProps {
-  availableProperties: Array<IPropertiesProps>;
-  selectedProperty: object;
-  children?: React.ReactNode;
-}
-
-export interface IPropertiesProps {
-  id: string;
-  name: string;
-}
-
-export const PropertySelect: React.FC<IPropertySelectProps> = ({
-  availableProperties,
-}) => {
-  const [currentIndex, setCurrentIndex] = useState(0);
-  const propertiesLength = availableProperties.length - 1;
-
-  const onLeftClick = () => {
-    if (currentIndex === 0) setCurrentIndex(propertiesLength);
-    else setCurrentIndex(index => index - 1);
-  };
-  const onRightClick = () => {
-    if (currentIndex === propertiesLength) setCurrentIndex(0);
-    else setCurrentIndex(index => index + 1);
-  };
-  return (
-    <Container>
-      <TextOverlay>
-        <Item>{availableProperties[currentIndex].name}</Item>
-      </TextOverlay>
-      <div className="rpgui-progress-track"></div>
-      <LeftArrow onClick={onLeftClick}></LeftArrow>
-      <RightArrow onClick={onRightClick}></RightArrow>
-    </Container>
-  );
-};
-
-const Item = styled.span`
-  font-size: 1rem;
-  color: white;
-  text-align: center;
-  z-index: 1;
-  position: absolute;
-  left: 50%;
-  transform: translateX(-50%);
-  top: 12px;
-`;
-
-const TextOverlay = styled.div`
-  width: 100%;
-  position: relative;
-`;
-
-interface IContainerProps {
-  percentageWidth?: number;
-  minWidth?: number;
-  style?: Record<string, any>;
-}
-
-const Container = styled.div<IContainerProps>`
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  justify-content: start;
-  align-items: flex-start;
-  min-width: 100px;
-  width: 40%;
-`;
-
-const LeftArrow = styled.div`
-  background-image: url(${LeftArrowIcon});
-  background-size: 100% 100%;
-  left: 0;
-  position: absolute;
-  width: 40px;
-  height: 42px;
-  :active {
-    background-image: url(${LeftArrowClickIcon});
-  }
-`;
-
-const RightArrow = styled.div`
-  background-image: url(${RightArrowIcon});
-  right: 0;
-  position: absolute;
-  width: 40px;
-  background-size: 100% 100%;
-  height: 42px;
-  :active {
-    background-image: url(${RightArrowClickIcon});
-  }
-`;
-
-export default PropertySelect;
+import React, { useState } from 'react';
+import styled from 'styled-components';
+import LeftArrowClickIcon from './img/ui-arrows/arrow01-left-clicked.png';
+import LeftArrowIcon from './img/ui-arrows/arrow01-left.png';
+import RightArrowClickIcon from './img/ui-arrows/arrow01-right-clicked.png';
+import RightArrowIcon from './img/ui-arrows/arrow01-right.png';
+
+export interface IPropertySelectProps {
+  availableProperties: Array<IPropertiesProps>;
+  selectedProperty: object;
+  children?: React.ReactNode;
+}
+
+export interface IPropertiesProps {
+  id: string;
+  name: string;
+}
+
+export const PropertySelect: React.FC<IPropertySelectProps> = ({
+  availableProperties,
+}) => {
+  const [currentIndex, setCurrentIndex] = useState(0);
+  const propertiesLength = availableProperties.length - 1;
+
+  const onLeftClick = () => {
+    if (currentIndex === 0) setCurrentIndex(propertiesLength);
+    else setCurrentIndex(index => index - 1);
+  };
+  const onRightClick = () => {
+    if (currentIndex === propertiesLength) setCurrentIndex(0);
+    else setCurrentIndex(index => index + 1);
+  };
+  return (
+    <Container>
+      <TextOverlay>
+        <Item>{availableProperties[currentIndex].name}</Item>
+      </TextOverlay>
+      <div className="rpgui-progress-track"></div>
+      <LeftArrow onClick={onLeftClick}></LeftArrow>
+      <RightArrow onClick={onRightClick}></RightArrow>
+    </Container>
+  );
+};
+
+const Item = styled.span`
+  font-size: 1rem;
+  color: white;
+  text-align: center;
+  z-index: 1;
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  top: 12px;
+`;
+
+const TextOverlay = styled.div`
+  width: 100%;
+  position: relative;
+`;
+
+interface IContainerProps {
+  percentageWidth?: number;
+  minWidth?: number;
+  style?: Record<string, any>;
+}
+
+const Container = styled.div<IContainerProps>`
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  justify-content: start;
+  align-items: flex-start;
+  min-width: 100px;
+  width: 40%;
+`;
+
+const LeftArrow = styled.div`
+  background-image: url(${LeftArrowIcon});
+  background-size: 100% 100%;
+  left: 0;
+  position: absolute;
+  width: 40px;
+  height: 42px;
+  :active {
+    background-image: url(${LeftArrowClickIcon});
+  }
+`;
+
+const RightArrow = styled.div`
+  background-image: url(${RightArrowIcon});
+  right: 0;
+  position: absolute;
+  width: 40px;
+  background-size: 100% 100%;
+  height: 42px;
+  :active {
+    background-image: url(${RightArrowClickIcon});
+  }
+`;
+
+export default PropertySelect;

package/src/components/QuestInfo/QuestInfo.tsx

@@ -1,143 +1,143 @@
-import React from 'react';
-import styled from 'styled-components';
-import { Button, ButtonTypes } from '../Button';
-import { DraggableContainer } from '../DraggableContainer';
-import { RPGUIContainerTypes } from '../RPGUIContainer';
-import { Column } from '../shared/Column';
-
-import thumbnailDefault from './img/default.png';
-
-export interface IQuestInfoProps {
-  title: string;
-  children: React.ReactNode;
-  onClose?: () => void;
-  button?: Array<IQuestButtonProps>;
-  thumbnail?: string;
-}
-
-export interface IQuestButtonProps {
-  disabled: boolean;
-  title: string;
-  onClick: () => void;
-}
-
-export const QuestInfo: React.FC<IQuestInfoProps> = ({
-  title,
-  onClose,
-  button,
-  thumbnail,
-  children,
-}) => {
-  return (
-    <QuestDraggableContainer
-      type={RPGUIContainerTypes.Framed}
-      onCloseButton={() => {
-        if (onClose) onClose();
-      }}
-      width="730px"
-      cancelDrag=".equipment-container-body"
-    >
-      {title && (
-        <TitleContainer className="drag-handler">
-          <Title>
-            <Thumbnail src={thumbnail || thumbnailDefault} />
-            {title}
-          </Title>
-          <QuestSplitDiv>
-            <hr className="golden" />
-          </QuestSplitDiv>
-        </TitleContainer>
-      )}
-      <Content>{children}</Content>
-      <QuestColumn className="dark-background" justifyContent="flex-end">
-        {button &&
-          button.map((item, index) => (
-            <Button
-              key={index}
-              onClick={item.onClick}
-              disabled={item.disabled}
-              buttonType={ButtonTypes.RPGUIButton}
-              id={`button-${index}`}
-            >
-              {item.title}
-            </Button>
-          ))}
-      </QuestColumn>
-    </QuestDraggableContainer>
-  );
-};
-
-const QuestDraggableContainer = styled(DraggableContainer)`
-  border: 1px solid black;
-  width: 600px;
-  height: 500px;
-  overflow-y: scroll;
-  padding: 0 0 0 0 !important;
-  .DraggableContainer__TitleContainer-sc-184mpyl-2 {
-    height: auto;
-  }
-  .container-close {
-    position: sticky;
-    margin-left: auto;
-    top: 10px;
-    padding-right: 5px;
-  }
-  img {
-    display: inline-block;
-    vertical-align: middle;
-    line-height: normal;
-  }
-`;
-
-const Content = styled.div`
-  padding: 18px;
-  h1 {
-    text-align: left;
-    margin: 14px 0px;
-  }
-`;
-
-const QuestSplitDiv = styled.div`
-  width: 100%;
-  font-size: 11px;
-  margin-bottom: 10px;
-  hr {
-    margin: 0px;
-    padding: 0px;
-  }
-  p {
-    margin-bottom: 0px;
-  }
-`;
-
-const QuestColumn = styled(Column)`
-  background: #4e4a4e;
-  padding-top: 5px;
-  position: sticky;
-  bottom: 0;
-`;
-
-const TitleContainer = styled.div`
-  background: #4e4a4e;
-  position: sticky;
-  top: 0;
-  width: 100%;
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: flex-start;
-  align-items: center;
-`;
-
-const Title = styled.h1`
-  color: white;
-  z-index: 22;
-  font-size: 0.6rem;
-`;
-
-const Thumbnail = styled.img`
-  color: white;
-  z-index: 22;
-  font-size: 10px;
-  width: 64px;
-  margin-right: 0.5rem;
-`;
+import React from 'react';
+import styled from 'styled-components';
+import { Button, ButtonTypes } from '../Button';
+import { DraggableContainer } from '../DraggableContainer';
+import { RPGUIContainerTypes } from '../RPGUIContainer';
+import { Column } from '../shared/Column';
+
+import thumbnailDefault from './img/default.png';
+
+export interface IQuestInfoProps {
+  title: string;
+  children: React.ReactNode;
+  onClose?: () => void;
+  button?: Array<IQuestButtonProps>;
+  thumbnail?: string;
+}
+
+export interface IQuestButtonProps {
+  disabled: boolean;
+  title: string;
+  onClick: () => void;
+}
+
+export const QuestInfo: React.FC<IQuestInfoProps> = ({
+  title,
+  onClose,
+  button,
+  thumbnail,
+  children,
+}) => {
+  return (
+    <QuestDraggableContainer
+      type={RPGUIContainerTypes.Framed}
+      onCloseButton={() => {
+        if (onClose) onClose();
+      }}
+      width="730px"
+      cancelDrag=".equipment-container-body"
+    >
+      {title && (
+        <TitleContainer className="drag-handler">
+          <Title>
+            <Thumbnail src={thumbnail || thumbnailDefault} />
+            {title}
+          </Title>
+          <QuestSplitDiv>
+            <hr className="golden" />
+          </QuestSplitDiv>
+        </TitleContainer>
+      )}
+      <Content>{children}</Content>
+      <QuestColumn className="dark-background" justifyContent="flex-end">
+        {button &&
+          button.map((item, index) => (
+            <Button
+              key={index}
+              onClick={item.onClick}
+              disabled={item.disabled}
+              buttonType={ButtonTypes.RPGUIButton}
+              id={`button-${index}`}
+            >
+              {item.title}
+            </Button>
+          ))}
+      </QuestColumn>
+    </QuestDraggableContainer>
+  );
+};
+
+const QuestDraggableContainer = styled(DraggableContainer)`
+  border: 1px solid black;
+  width: 600px;
+  height: 500px;
+  overflow-y: scroll;
+  padding: 0 0 0 0 !important;
+  .DraggableContainer__TitleContainer-sc-184mpyl-2 {
+    height: auto;
+  }
+  .container-close {
+    position: sticky;
+    margin-left: auto;
+    top: 10px;
+    padding-right: 5px;
+  }
+  img {
+    display: inline-block;
+    vertical-align: middle;
+    line-height: normal;
+  }
+`;
+
+const Content = styled.div`
+  padding: 18px;
+  h1 {
+    text-align: left;
+    margin: 14px 0px;
+  }
+`;
+
+const QuestSplitDiv = styled.div`
+  width: 100%;
+  font-size: 11px;
+  margin-bottom: 10px;
+  hr {
+    margin: 0px;
+    padding: 0px;
+  }
+  p {
+    margin-bottom: 0px;
+  }
+`;
+
+const QuestColumn = styled(Column)`
+  background: #4e4a4e;
+  padding-top: 5px;
+  position: sticky;
+  bottom: 0;
+`;
+
+const TitleContainer = styled.div`
+  background: #4e4a4e;
+  position: sticky;
+  top: 0;
+  width: 100%;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-start;
+  align-items: center;
+`;
+
+const Title = styled.h1`
+  color: white;
+  z-index: 22;
+  font-size: 0.6rem;
+`;
+
+const Thumbnail = styled.img`
+  color: white;
+  z-index: 22;
+  font-size: 10px;
+  width: 64px;
+  margin-right: 0.5rem;
+`;

package/src/components/RPGUIContainer.tsx

@@ -1,47 +1,47 @@
-import React from 'react';
-import styled from 'styled-components';
-
-export enum RPGUIContainerTypes {
-  Framed = 'framed',
-  FramedGold = 'framed-golden',
-  FramedGold2 = 'framed-golden-2',
-  FramedGrey = 'framed-grey',
-}
-export interface IRPGUIContainerProps {
-  type: RPGUIContainerTypes;
-  children: React.ReactNode;
-  width?: string;
-  height?: string;
-  className?: string;
-}
-
-export const RPGUIContainer: React.FC<IRPGUIContainerProps> = ({
-  children,
-  type,
-  width = '50%',
-  height,
-  className,
-}) => {
-  return (
-    <Container
-      width={width}
-      height={height || 'auto'}
-      className={`rpgui-container ${type} ${className}`}
-    >
-      {children}
-    </Container>
-  );
-};
-
-interface IContainerProps {
-  width: string;
-  height: string;
-}
-
-const Container = styled.div<IContainerProps>`
-  height: ${props => props.height};
-  width: ${({ width }) => width};
-  display: flex;
-  flex-wrap: wrap;
-  image-rendering: pixelated;
-`;
+import React from 'react';
+import styled from 'styled-components';
+
+export enum RPGUIContainerTypes {
+  Framed = 'framed',
+  FramedGold = 'framed-golden',
+  FramedGold2 = 'framed-golden-2',
+  FramedGrey = 'framed-grey',
+}
+export interface IRPGUIContainerProps {
+  type: RPGUIContainerTypes;
+  children: React.ReactNode;
+  width?: string;
+  height?: string;
+  className?: string;
+}
+
+export const RPGUIContainer: React.FC<IRPGUIContainerProps> = ({
+  children,
+  type,
+  width = '50%',
+  height,
+  className,
+}) => {
+  return (
+    <Container
+      width={width}
+      height={height || 'auto'}
+      className={`rpgui-container ${type} ${className}`}
+    >
+      {children}
+    </Container>
+  );
+};
+
+interface IContainerProps {
+  width: string;
+  height: string;
+}
+
+const Container = styled.div<IContainerProps>`
+  height: ${props => props.height};
+  width: ${({ width }) => width};
+  display: flex;
+  flex-wrap: wrap;
+  image-rendering: pixelated;
+`;

package/src/components/RPGUIRoot.tsx

@@ -1,14 +1,14 @@
-import React from 'react';
-import 'rpgui/rpgui.min.css';
-import 'rpgui/rpgui.min.js';
-
-interface IProps {
-  children: React.ReactNode;
-}
-
-//@ts-ignore
-export const _RPGUI = RPGUI;
-
-export const RPGUIRoot: React.FC<IProps> = ({ children }) => {
-  return <div className="rpgui-content">{children}</div>;
-};
+import React from 'react';
+import 'rpgui/rpgui.min.css';
+import 'rpgui/rpgui.min.js';
+
+interface IProps {
+  children: React.ReactNode;
+}
+
+//@ts-ignore
+export const _RPGUI = RPGUI;
+
+export const RPGUIRoot: React.FC<IProps> = ({ children }) => {
+  return <div className="rpgui-content">{children}</div>;
+};