@rpg-engine/long-bow 0.1.26 → 0.1.29

package/src/components/ListMenu.tsx

@@ -1,16 +1,16 @@
 import React from 'react';
 import styled from 'styled-components';
-import { RPGUIRoot } from '../RPGUI/RPGUIRoot';
+import { RPGUIRoot } from './RPGUIRoot';
+
+interface IListMenuOption {
+  id: string;
+  text: string;
+}
 
 export interface IListMenuProps {
   x: number;
   y: number;
-  options: [
-    {
-      id: string;
-      text: string;
-    }
-  ];
+  options: IListMenuOption[];
   onSelected: (selectedOptionId: string) => void;
 }
 
@@ -25,14 +25,14 @@ export const ListMenu: React.FC<IListMenuProps> = ({
       <Container x={x} y={y}>
         <ul className="rpgui-list-imp" style={{ overflow: 'hidden' }}>
           {options.map((params) => (
-            <li
+            <ListElement
               key={params.text}
               onClick={() => {
                 onSelected(params.id);
               }}
             >
               {params.text}
-            </li>
+            </ListElement>
           ))}
         </ul>
       </Container>
@@ -55,3 +55,7 @@ const Container = styled.div<IContainerProps>`
   top: ${(props) => props.y || 0}px;
   left: ${(props) => props.x || 0}px;
 `;
+
+const ListElement = styled.li`
+  margin-right: 0.5rem;
+`;

package/src/{NPCDialog → components/NPCDialog}/NPCDialog.tsx

@@ -1,12 +1,16 @@
 import React, { useState } from 'react';
 import styled from 'styled-components';
-import { IQuestionDialog, IQuestionDialogAnswer } from '..';
-import { RPGUIContainer } from '../RPGUI/RPGUIContainer';
-import { RPGUIRoot } from '../RPGUI/RPGUIRoot';
+import { RPGUIContainer, RPGUIContainerTypes } from '../RPGUIContainer';
+import { RPGUIRoot } from '../RPGUIRoot';
 import aliceDefaultThumbnail from './img/npcDialog/npcThumbnails/alice.png';
 import pressSpaceGif from './img/space.gif';
 import { NPCDialogText } from './NPCDialogText';
-import { QuestionDialog } from './QuestionDialog/QuestionDialog';
+import {
+  IQuestionDialog,
+  IQuestionDialogAnswer,
+  QuestionDialog,
+} from './QuestionDialog/QuestionDialog';
+
 export enum NPCDialogType {
   TextOnly = 'TextOnly',
   TextAndThumbnail = 'TextAndThumbnail',
@@ -17,7 +21,7 @@ export interface INPCDialogProps {
   type: NPCDialogType;
   imagePath?: string;
   onClose?: () => void;
-  isQuestionDialog: boolean;
+  isQuestionDialog?: boolean;
   answers?: IQuestionDialogAnswer[];
   questions?: IQuestionDialog[];
 }
@@ -37,7 +41,7 @@ export const NPCDialog: React.FC<INPCDialogProps> = ({
   return (
     <RPGUIRoot>
       <RPGUIContainer
-        type="framed-golden"
+        type={RPGUIContainerTypes.FramedGold}
         width={isQuestionDialog ? '600px' : '50%'}
         height={'180px'}
       >

package/src/{NPCDialog → components/NPCDialog}/NPCDialogText.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from 'react';
 import styled from 'styled-components';
-import { chunkString } from '../libs/StringHelpers';
+import { chunkString } from '../../libs/StringHelpers';
 import { DynamicText } from '../typography/DynamicText';
 
 interface IProps {

package/src/{NPCDialog → components/NPCDialog}/QuestionDialog/QuestionDialog.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from 'react';
 import styled from 'styled-components';
-import { useEventListener } from '../../hooks/useEventListener';
+import { useEventListener } from '../../../hooks/useEventListener';
 import { DynamicText } from '../../typography/DynamicText';
 
 export interface IQuestionDialogAnswer {

package/src/{RPGUI → components}/RPGUIContainer.tsx

@@ -1,14 +1,20 @@
 import React from 'react';
 import styled from 'styled-components';
 
-interface IProps {
-  type: 'framed' | 'framed-golden' | 'framed-golden-2' | 'framed-grey';
+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;
 }
 
-export const RPGUIContainer: React.FC<IProps> = ({
+export const RPGUIContainer: React.FC<IRPGUIContainerProps> = ({
   children,
   type,
   width = '50%',
@@ -35,4 +41,5 @@ const Container = styled.div<IContainerProps>`
   width: ${({ width }) => width};
   display: flex;
   flex-wrap: wrap;
+  image-rendering: pixelated;
 `;

package/src/{RPGUI/RPGUISlider.tsx → components/RangeSlider.tsx}

@@ -4,21 +4,20 @@ import { v4 as uuidv4 } from 'uuid';
 import { useEventListener } from '../hooks/useEventListener';
 import { RPGUIRoot, _RPGUI } from './RPGUIRoot';
 
-export enum SliderType {
+export enum RangeSliderType {
   Slider = 'rpgui-slider',
   GoldSlider = 'rpgui-slider golden',
 }
 
-export interface ISliderProps {
-  type: SliderType;
+export interface IRangeSliderProps {
+  type: RangeSliderType;
   valueMin: number;
   valueMax: number;
   width: string;
-
   onChange: (value: number) => void;
 }
 
-export const RPGUISlider: React.FC<ISliderProps> = ({
+export const RangeSlider: React.FC<IRangeSliderProps> = ({
   type,
   valueMin,
   valueMax,
@@ -51,9 +50,9 @@ export const RPGUISlider: React.FC<ISliderProps> = ({
       >
         <Input
           className={
-            type === SliderType.Slider
-              ? SliderType.Slider
-              : SliderType.GoldSlider
+            type === RangeSliderType.Slider
+              ? RangeSliderType.Slider
+              : RangeSliderType.GoldSlider
           }
           type="range"
           style={{ width: width }}

package/src/index.tsx

@@ -1,8 +1,9 @@
+export * from './components/Button';
 export * from './components/ListMenu';
+export * from './components/NPCDialog/NPCDialog';
+export * from './components/NPCDialog/QuestionDialog/QuestionDialog';
+export * from './components/RangeSlider';
+export * from './components/RPGUIContainer';
+export * from './components/RPGUIRoot';
+export * from './components/typography/DynamicText';
 export { useEventListener } from './hooks/useEventListener';
-export * from './NPCDialog/NPCDialog';
-export * from './NPCDialog/QuestionDialog/QuestionDialog';
-export * from './RPGUI/RPGUIContainer';
-export * from './RPGUI/RPGUIRoot';
-export * from './RPGUI/RPGUISlider';
-export * from './typography/DynamicText';

package/dist/RPGUI/RPGUIContainer.d.ts

@@ -1,9 +0,0 @@
-import React from 'react';
-interface IProps {
-    type: 'framed' | 'framed-golden' | 'framed-golden-2' | 'framed-grey';
-    children: React.ReactNode;
-    width?: string;
-    height?: string;
-}
-export declare const RPGUIContainer: React.FC<IProps>;
-export {};