@rpg-engine/long-bow 0.1.5 → 0.1.6

package/package.json

@@ -1,14 +1,18 @@
 {
-  "version": "0.1.5",
+  "name": "@rpg-engine/long-bow",
+  "version": "0.1.6",
   "license": "MIT",
-  "main": "dist/index.js",
+  "main": "dist/index",
   "typings": "dist/index.d.ts",
   "publishConfig": {
     "access": "public"
   },
+  "directories": {
+    "dist": "dist",
+    "src": "src"
+  },
   "files": [
-    "dist",
-    "src"
+    "dist"
   ],
   "engines": {
     "node": ">=10"
@@ -38,7 +42,6 @@
     "singleQuote": true,
     "trailingComma": "es5"
   },
-  "name": "@rpg-engine/long-bow",
   "author": "Joao Paulo Furtado",
   "module": "dist/rpg-engine-long-bow.esm.js",
   "size-limit": [

package/src/NPCDialog/NPCDialog.tsx

@@ -1,106 +0,0 @@
-import React, { useState } from 'react';
-import styled from 'styled-components';
-import { RPGUI } from '../RPGUI/RPGUI';
-import { RPGUIContainer } from '../RPGUI/RPGUIContainer';
-import { NPCDialogText } from './NPCDialogText';
-
-export enum NPCDialogType {
-  TextOnly = 'TextOnly',
-  TextAndThumbnail = 'TextAndThumbnail',
-}
-
-export interface INPCDialogProps {
-  text: string;
-  type: NPCDialogType;
-  npcKey: string;
-  onClose?: () => void;
-}
-
-export const NPCDialog: React.FC<INPCDialogProps> = ({
-  text,
-  type,
-  npcKey,
-  onClose,
-}) => {
-  const [isOpen, setIsOpen] = useState<boolean>(true);
-  const [showGoNextIndicator, setShowGoNextIndicator] =
-    useState<boolean>(false);
-
-  return isOpen ? (
-    <RPGUI>
-      <RPGUIContainer type="framed-golden">
-        <Container>
-          <TextContainer
-            flex={type === NPCDialogType.TextAndThumbnail ? '70%' : '100%'}
-          >
-            <NPCDialogText
-              onStartStep={() => setShowGoNextIndicator(false)}
-              onEndStep={() => setShowGoNextIndicator(true)}
-              text={text}
-              onClose={() => {
-                if (onClose) {
-                  onClose();
-                  setIsOpen(false);
-                }
-              }}
-            />
-          </TextContainer>
-          {type === NPCDialogType.TextAndThumbnail && (
-            <ThumbnailContainer>
-              <NPCThumbnail src={`/npcDialog/npcThumbnails/${npcKey}.png`} />
-            </ThumbnailContainer>
-          )}
-        </Container>
-        {showGoNextIndicator && (
-          <PressSpaceIndicator
-            right={type === NPCDialogType.TextOnly ? '1rem' : '10.5rem'}
-            src="/space.gif"
-          />
-        )}
-      </RPGUIContainer>
-    </RPGUI>
-  ) : null;
-};
-
-const Container = styled.div`
-  display: flex;
-  width: 100%;
-  height: 125px;
-  box-sizing: border-box;
-  justify-content: center;
-  align-items: flex-start;
-  position: relative;
-`;
-
-interface ITextContainerProps {
-  flex: string;
-}
-
-const TextContainer = styled.div<ITextContainerProps>`
-  flex: ${({ flex }) => flex} 0 0;
-  width: 355px;
-`;
-
-const ThumbnailContainer = styled.div`
-  flex: 30% 0 0;
-  display: flex;
-  justify-content: flex-end;
-`;
-
-const NPCThumbnail = styled.img`
-  image-rendering: pixelated;
-  height: 128px;
-  width: 128px;
-`;
-
-interface IPressSpaceIndicatorProps {
-  right: string;
-}
-
-const PressSpaceIndicator = styled.img<IPressSpaceIndicatorProps>`
-  position: absolute;
-  right: ${({ right }) => right};
-  bottom: 1rem;
-  height: 20.7px;
-  image-rendering: -webkit-optimize-contrast;
-`;

package/src/NPCDialog/NPCDialogText.tsx

@@ -1,46 +0,0 @@
-import useEventListener from '@use-it/event-listener';
-import React, { useState } from 'react';
-import styled from 'styled-components';
-import { chunkString } from '../libs/StringHelpers';
-import { DynamicText } from '../typography/DynamicText';
-
-interface IProps {
-  text: string;
-  onClose: () => void;
-  onEndStep: () => void;
-  onStartStep: () => void;
-}
-
-export const NPCDialogText: React.FC<IProps> = ({
-  text,
-  onClose,
-  onEndStep,
-  onStartStep,
-}) => {
-  const textChunks = chunkString(text, 85);
-
-  const [chunkIndex, setChunkIndex] = useState<number>(0);
-
-  useEventListener('keydown', (event: KeyboardEvent) => {
-    if (event.code === 'Space') {
-      if (textChunks?.[chunkIndex + 1]) {
-        setChunkIndex((prev) => prev + 1);
-      } else {
-        // if there's no more text chunks, close the dialog
-        onClose();
-      }
-    }
-  });
-
-  return (
-    <Container>
-      <DynamicText
-        text={textChunks?.[chunkIndex]!}
-        onFinish={onEndStep}
-        onStart={onStartStep}
-      />
-    </Container>
-  );
-};
-
-const Container = styled.div``;

package/src/RPGUI/RPGUI.tsx

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

package/src/RPGUI/RPGUIContainer.tsx

@@ -1,28 +0,0 @@
-import React from 'react';
-import styled from 'styled-components';
-
-interface IProps {
-  type: 'framed' | 'framed-golden' | 'framed-golden-2' | 'framed-grey';
-  children: React.ReactNode;
-  width?: string;
-}
-
-export const RPGUIContainer: React.FC<IProps> = ({
-  children,
-  type,
-  width = '50%',
-}) => {
-  return (
-    <Container width={width} className={`rpgui-container ${type}`}>
-      {children}
-    </Container>
-  );
-};
-
-interface IContainerProps {
-  width: string;
-}
-
-const Container = styled.div<IContainerProps>`
-  max-width: ${({ width }) => width};
-`;

package/src/index.tsx

@@ -1,4 +0,0 @@
-export * from './NPCDialog/NPCDialog';
-export * from './RPGUI/RPGUI';
-export * from './RPGUI/RPGUIContainer';
-export * from './typography/DynamicText';

package/src/libs/StringHelpers.ts

@@ -1,3 +0,0 @@
-export const chunkString = (str: string, length: number) => {
-  return str.match(new RegExp('.{1,' + length + '}', 'g'));
-};

package/src/types/index.d.ts

@@ -1 +0,0 @@
-declare module '*.gif';

package/src/typography/DynamicText.tsx

@@ -1,48 +0,0 @@
-import React, { useEffect, useState } from 'react';
-import styled from 'styled-components';
-
-interface IProps {
-  text: string;
-  onFinish?: () => void;
-  onStart?: () => void;
-}
-
-export const DynamicText: React.FC<IProps> = ({ text, onFinish, onStart }) => {
-  const [textState, setTextState] = useState<string>('');
-
-  useEffect(() => {
-    let i = 0;
-    const interval = setInterval(() => {
-      // on every interval, show one more character
-
-      if (i === 0) {
-        if (onStart) {
-          onStart();
-        }
-      }
-
-      if (i < text.length) {
-        setTextState(text.substring(0, i + 1));
-        i++;
-      } else {
-        clearInterval(interval);
-        if (onFinish) {
-          onFinish();
-        }
-      }
-    }, 50);
-
-    return () => {
-      clearInterval(interval);
-    };
-  }, [text]);
-
-  return <TextContainer>{textState}</TextContainer>;
-};
-
-const TextContainer = styled.p`
-  font-size: 0.7rem !important;
-  color: white;
-  text-shadow: 1px 1px 0px #000000;
-  letter-spacing: 1.2px;
-`;