@rpg-engine/long-bow 0.1.6 → 0.1.7

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@rpg-engine/long-bow",
-  "version": "0.1.6",
+  "version": "0.1.7",
   "license": "MIT",
-  "main": "dist/index",
+  "main": "dist/index.js",
   "typings": "dist/index.d.ts",
   "publishConfig": {
     "access": "public"
@@ -12,7 +12,8 @@
     "src": "src"
   },
   "files": [
-    "dist"
+    "dist",
+    "src"
   ],
   "engines": {
     "node": ">=10"

package/src/NPCDialog/NPCDialog.tsx

@@ -0,0 +1,106 @@
+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

@@ -0,0 +1,46 @@
+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

@@ -0,0 +1,11 @@
+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

@@ -0,0 +1,28 @@
+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

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

package/src/libs/StringHelpers.ts

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

package/src/types/index.d.ts

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

package/src/typography/DynamicText.tsx

@@ -0,0 +1,48 @@
+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;
+`;