@rpg-engine/long-bow 0.3.97 → 0.3.98

package/src/components/QuestList.tsx

@@ -1,135 +1,135 @@
-import { IQuest } from '@rpg-engine/shared';
-import React from 'react';
-import styled from 'styled-components';
-import { uiFonts } from '../constants/uiFonts';
-import { DraggableContainer } from './DraggableContainer';
-import { RPGUIContainerTypes } from './RPGUIContainer';
-
-export interface IQuestListProps {
-  quests?: IQuest[];
-  onClose: () => void;
-  scale?: number;
-}
-
-export const QuestList: React.FC<IQuestListProps> = ({
-  quests,
-  onClose,
-  scale,
-}) => {
-  return (
-    <QuestDraggableContainer
-      type={RPGUIContainerTypes.Framed}
-      onCloseButton={() => {
-        if (onClose) onClose();
-      }}
-      width="520px"
-      scale={scale}
-    >
-      <div style={{ width: '100%' }}>
-        <Title>Quests</Title>
-        <hr className="golden" />
-
-        <QuestListContainer>
-          {quests ? (
-            quests.map((quest, i) => (
-              <div className="quest-item" key={i}>
-                <span className="quest-number">{i + 1}</span>
-                <div className="quest-detail">
-                  <p className="quest-detail__title">{quest.title}</p>
-                  <p className="quest-detail__description">
-                    {quest.description}
-                  </p>
-                </div>
-              </div>
-            ))
-          ) : (
-            <NoQuestContainer>
-              <p>There are no ongoing quests</p>
-            </NoQuestContainer>
-          )}
-        </QuestListContainer>
-      </div>
-    </QuestDraggableContainer>
-  );
-};
-
-const QuestDraggableContainer = styled(DraggableContainer)`
-  .container-close {
-    top: 10px;
-    right: 10px;
-  }
-
-  .quest-title {
-    text-align: left;
-    margin-left: 44px;
-    margin-top: 20px;
-    color: yellow;
-  }
-
-  .quest-desc {
-    margin-top: 12px;
-    margin-left: 44px;
-  }
-
-  .rpgui-progress {
-    min-width: 80%;
-    margin: 0 auto;
-  }
-`;
-
-const Title = styled.h1`
-  z-index: 22;
-  font-size: ${uiFonts.size.medium} !important;
-  color: yellow !important;
-`;
-
-const QuestListContainer = styled.div`
-  margin-top: 20px;
-  margin-bottom: 40px;
-  overflow-y: auto;
-  max-height: 400px;
-
-  .quest-item {
-    display: flex;
-    align-items: flex-start;
-    margin-bottom: 12px;
-  }
-
-  .quest-number {
-    border-radius: 50%;
-    width: 28px;
-    height: 28px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    margin-right: 16px;
-    background-color: brown;
-    flex-shrink: 0;
-  }
-
-  .quest-number.completed {
-    background-color: yellow;
-  }
-
-  p {
-    margin: 0;
-  }
-
-  .quest-detail__title {
-    color: yellow;
-  }
-
-  .quest-detail__description {
-    margin-top: 5px;
-  }
-  .Noquest-detail__description {
-    margin-top: 5px;
-    margin: auto;
-  }
-`;
-const NoQuestContainer = styled.div`
-  text-align: center;
-  p {
-    margin-top: 5px;
-  }
-`;
+import { IQuest } from '@rpg-engine/shared';
+import React from 'react';
+import styled from 'styled-components';
+import { uiFonts } from '../constants/uiFonts';
+import { DraggableContainer } from './DraggableContainer';
+import { RPGUIContainerTypes } from './RPGUIContainer';
+
+export interface IQuestListProps {
+  quests?: IQuest[];
+  onClose: () => void;
+  scale?: number;
+}
+
+export const QuestList: React.FC<IQuestListProps> = ({
+  quests,
+  onClose,
+  scale,
+}) => {
+  return (
+    <QuestDraggableContainer
+      type={RPGUIContainerTypes.Framed}
+      onCloseButton={() => {
+        if (onClose) onClose();
+      }}
+      width="520px"
+      scale={scale}
+    >
+      <div style={{ width: '100%' }}>
+        <Title>Quests</Title>
+        <hr className="golden" />
+
+        <QuestListContainer>
+          {quests ? (
+            quests.map((quest, i) => (
+              <div className="quest-item" key={i}>
+                <span className="quest-number">{i + 1}</span>
+                <div className="quest-detail">
+                  <p className="quest-detail__title">{quest.title}</p>
+                  <p className="quest-detail__description">
+                    {quest.description}
+                  </p>
+                </div>
+              </div>
+            ))
+          ) : (
+            <NoQuestContainer>
+              <p>There are no ongoing quests</p>
+            </NoQuestContainer>
+          )}
+        </QuestListContainer>
+      </div>
+    </QuestDraggableContainer>
+  );
+};
+
+const QuestDraggableContainer = styled(DraggableContainer)`
+  .container-close {
+    top: 10px;
+    right: 10px;
+  }
+
+  .quest-title {
+    text-align: left;
+    margin-left: 44px;
+    margin-top: 20px;
+    color: yellow;
+  }
+
+  .quest-desc {
+    margin-top: 12px;
+    margin-left: 44px;
+  }
+
+  .rpgui-progress {
+    min-width: 80%;
+    margin: 0 auto;
+  }
+`;
+
+const Title = styled.h1`
+  z-index: 22;
+  font-size: ${uiFonts.size.medium} !important;
+  color: yellow !important;
+`;
+
+const QuestListContainer = styled.div`
+  margin-top: 20px;
+  margin-bottom: 40px;
+  overflow-y: auto;
+  max-height: 400px;
+
+  .quest-item {
+    display: flex;
+    align-items: flex-start;
+    margin-bottom: 12px;
+  }
+
+  .quest-number {
+    border-radius: 50%;
+    width: 28px;
+    height: 28px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-right: 16px;
+    background-color: brown;
+    flex-shrink: 0;
+  }
+
+  .quest-number.completed {
+    background-color: yellow;
+  }
+
+  p {
+    margin: 0;
+  }
+
+  .quest-detail__title {
+    color: yellow;
+  }
+
+  .quest-detail__description {
+    margin-top: 5px;
+  }
+  .Noquest-detail__description {
+    margin-top: 5px;
+    margin: auto;
+  }
+`;
+const NoQuestContainer = styled.div`
+  text-align: center;
+  p {
+    margin-top: 5px;
+  }
+`;

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/RPGUIForceRenderStart.tsx

@@ -1,45 +1,45 @@
-import React, { useEffect, useState } from 'react';
-import { _RPGUI } from './RPGUIRoot';
-
-interface IProps {
-  elementDOMId: string;
-  elementRenderedDOMKey: string; // this is what "proves" the element is rendered
-  children: React.ReactNode;
-  RPGUICreateFunction:
-    | 'dropdown'
-    | 'slider'
-    | 'checkbox'
-    | 'draggable'
-    | 'progress'
-    | 'radio'
-    | 'list';
-}
-
-export const RPGUIForceRenderStart: React.FC<IProps> = ({
-  children,
-  elementDOMId,
-  elementRenderedDOMKey,
-  RPGUICreateFunction,
-}) => {
-  const [isRendered, setIsRendered] = useState<boolean>(false);
-
-  useEffect(() => {
-    if (_RPGUI) {
-      const element = document.getElementById(elementDOMId);
-
-      // create an interval to wait for the element to be rendered
-      // if it's not, trigger the rendering forcefully
-      const interval = setInterval(() => {
-        const dropdown = document.querySelector(elementRenderedDOMKey);
-
-        if (!dropdown && !isRendered) {
-          _RPGUI.__create_funcs[RPGUICreateFunction](element);
-          setIsRendered(true);
-          clearInterval(interval);
-        }
-      }, 10);
-    }
-  }, []);
-
-  return <>{children}</>;
-};
+import React, { useEffect, useState } from 'react';
+import { _RPGUI } from './RPGUIRoot';
+
+interface IProps {
+  elementDOMId: string;
+  elementRenderedDOMKey: string; // this is what "proves" the element is rendered
+  children: React.ReactNode;
+  RPGUICreateFunction:
+    | 'dropdown'
+    | 'slider'
+    | 'checkbox'
+    | 'draggable'
+    | 'progress'
+    | 'radio'
+    | 'list';
+}
+
+export const RPGUIForceRenderStart: React.FC<IProps> = ({
+  children,
+  elementDOMId,
+  elementRenderedDOMKey,
+  RPGUICreateFunction,
+}) => {
+  const [isRendered, setIsRendered] = useState<boolean>(false);
+
+  useEffect(() => {
+    if (_RPGUI) {
+      const element = document.getElementById(elementDOMId);
+
+      // create an interval to wait for the element to be rendered
+      // if it's not, trigger the rendering forcefully
+      const interval = setInterval(() => {
+        const dropdown = document.querySelector(elementRenderedDOMKey);
+
+        if (!dropdown && !isRendered) {
+          _RPGUI.__create_funcs[RPGUICreateFunction](element);
+          setIsRendered(true);
+          clearInterval(interval);
+        }
+      }, 10);
+    }
+  }, []);
+
+  return <>{children}</>;
+};

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>;
+};

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 onPointerDown={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 onPointerDown={handleClick}>{element.label}</label>
+            <br />
+          </>
+        );
+      })}
+    </div>
+  );
+};