@rpg-engine/long-bow 0.3.71 → 0.3.73

package/src/components/HistoryDialog.tsx

@@ -1,104 +1,104 @@
-import React, { useEffect, useState } from 'react';
-import styled from 'styled-components';
-import { NPCDialog, NPCDialogType } from './NPCDialog/NPCDialog';
-import { NPCMultiDialog, NPCMultiDialogType } from './NPCDialog/NPCMultiDialog';
-import {
-  IQuestionDialog,
-  IQuestionDialogAnswer,
-  QuestionDialog,
-} from './NPCDialog/QuestionDialog/QuestionDialog';
-
-export interface IHistoryDialogProps {
-  backgroundImgPath: string[];
-  fullCoverBackground: boolean;
-  questions?: IQuestionDialog[];
-  answers?: IQuestionDialogAnswer[];
-  text?: string;
-  imagePath?: string;
-  textAndTypeArray?: NPCMultiDialogType[];
-  onClose: () => void;
-}
-
-export const HistoryDialog: React.FC<IHistoryDialogProps> = ({
-  backgroundImgPath,
-  fullCoverBackground,
-  questions,
-  answers,
-  text,
-  imagePath,
-  textAndTypeArray,
-  onClose,
-}) => {
-  const [img, setImage] = useState<number>(0);
-  const onHandleSpacePress = (event: KeyboardEvent) => {
-    if (event.code === 'Space') {
-      if (img < backgroundImgPath?.length - 1) {
-        setImage(prev => prev + 1);
-      } else {
-        // if there's no more text chunks, close the dialog
-        onClose();
-      }
-    }
-  };
-
-  useEffect(() => {
-    document.addEventListener('keydown', onHandleSpacePress);
-
-    return () => document.removeEventListener('keydown', onHandleSpacePress);
-  }, [backgroundImgPath]);
-  return (
-    <BackgroundContainer
-      imgPath={backgroundImgPath[img]}
-      fullImg={fullCoverBackground}
-    >
-      <DialogContainer>
-        {textAndTypeArray ? (
-          <NPCMultiDialog
-            textAndTypeArray={textAndTypeArray}
-            onClose={onClose}
-          />
-        ) : questions && answers ? (
-          <QuestionDialog
-            questions={questions}
-            answers={answers}
-            onClose={onClose}
-          />
-        ) : text && imagePath ? (
-          <NPCDialog
-            text={text}
-            imagePath={imagePath}
-            onClose={onClose}
-            type={NPCDialogType.TextAndThumbnail}
-          />
-        ) : (
-          <NPCDialog
-            text={text}
-            onClose={onClose}
-            type={NPCDialogType.TextOnly}
-          />
-        )}
-      </DialogContainer>
-    </BackgroundContainer>
-  );
-};
-
-interface IImgContainerProps {
-  imgPath: string;
-  fullImg: boolean;
-}
-
-const BackgroundContainer = styled.div<IImgContainerProps>`
-  width: 100%;
-  height: 100%;
-  background-image: url(${props => props.imgPath});
-  background-size: ${props => (props.imgPath ? 'cover' : 'auto')};
-  display: flex;
-  justify-content: space-evenly;
-  align-items: center;
-`;
-
-const DialogContainer = styled.div`
-  display: flex;
-  justify-content: center;
-  padding-top: 200px;
-`;
+import React, { useEffect, useState } from 'react';
+import styled from 'styled-components';
+import { NPCDialog, NPCDialogType } from './NPCDialog/NPCDialog';
+import { NPCMultiDialog, NPCMultiDialogType } from './NPCDialog/NPCMultiDialog';
+import {
+  IQuestionDialog,
+  IQuestionDialogAnswer,
+  QuestionDialog,
+} from './NPCDialog/QuestionDialog/QuestionDialog';
+
+export interface IHistoryDialogProps {
+  backgroundImgPath: string[];
+  fullCoverBackground: boolean;
+  questions?: IQuestionDialog[];
+  answers?: IQuestionDialogAnswer[];
+  text?: string;
+  imagePath?: string;
+  textAndTypeArray?: NPCMultiDialogType[];
+  onClose: () => void;
+}
+
+export const HistoryDialog: React.FC<IHistoryDialogProps> = ({
+  backgroundImgPath,
+  fullCoverBackground,
+  questions,
+  answers,
+  text,
+  imagePath,
+  textAndTypeArray,
+  onClose,
+}) => {
+  const [img, setImage] = useState<number>(0);
+  const onHandleSpacePress = (event: KeyboardEvent) => {
+    if (event.code === 'Space') {
+      if (img < backgroundImgPath?.length - 1) {
+        setImage(prev => prev + 1);
+      } else {
+        // if there's no more text chunks, close the dialog
+        onClose();
+      }
+    }
+  };
+
+  useEffect(() => {
+    document.addEventListener('keydown', onHandleSpacePress);
+
+    return () => document.removeEventListener('keydown', onHandleSpacePress);
+  }, [backgroundImgPath]);
+  return (
+    <BackgroundContainer
+      imgPath={backgroundImgPath[img]}
+      fullImg={fullCoverBackground}
+    >
+      <DialogContainer>
+        {textAndTypeArray ? (
+          <NPCMultiDialog
+            textAndTypeArray={textAndTypeArray}
+            onClose={onClose}
+          />
+        ) : questions && answers ? (
+          <QuestionDialog
+            questions={questions}
+            answers={answers}
+            onClose={onClose}
+          />
+        ) : text && imagePath ? (
+          <NPCDialog
+            text={text}
+            imagePath={imagePath}
+            onClose={onClose}
+            type={NPCDialogType.TextAndThumbnail}
+          />
+        ) : (
+          <NPCDialog
+            text={text}
+            onClose={onClose}
+            type={NPCDialogType.TextOnly}
+          />
+        )}
+      </DialogContainer>
+    </BackgroundContainer>
+  );
+};
+
+interface IImgContainerProps {
+  imgPath: string;
+  fullImg: boolean;
+}
+
+const BackgroundContainer = styled.div<IImgContainerProps>`
+  width: 100%;
+  height: 100%;
+  background-image: url(${props => props.imgPath});
+  background-size: ${props => (props.imgPath ? 'cover' : 'auto')};
+  display: flex;
+  justify-content: space-evenly;
+  align-items: center;
+`;
+
+const DialogContainer = styled.div`
+  display: flex;
+  justify-content: center;
+  padding-top: 200px;
+`;

package/src/components/Input.tsx

@@ -1,15 +1,15 @@
-import React from 'react';
-
-export interface IInputProps
-  extends React.DetailedHTMLProps<
-    React.InputHTMLAttributes<HTMLInputElement>,
-    HTMLInputElement
-  > {
-  innerRef?: React.Ref<HTMLInputElement>;
-}
-
-export const Input: React.FC<IInputProps> = ({ ...props }) => {
-  const { innerRef, ...rest } = props;
-
-  return <input {...rest} ref={props.innerRef} />;
-};
+import React from 'react';
+
+export interface IInputProps
+  extends React.DetailedHTMLProps<
+    React.InputHTMLAttributes<HTMLInputElement>,
+    HTMLInputElement
+  > {
+  innerRef?: React.Ref<HTMLInputElement>;
+}
+
+export const Input: React.FC<IInputProps> = ({ ...props }) => {
+  const { innerRef, ...rest } = props;
+
+  return <input {...rest} ref={props.innerRef} />;
+};

package/src/components/Item/Cards/ItemTooltip.tsx

@@ -1,85 +1,33 @@
-import { IEquipmentSet, IItem } from '@rpg-engine/shared';
-import React, { useEffect, useRef } from 'react';
-import styled from 'styled-components';
-import { ItemInfoDisplay } from './ItemInfoDisplay';
-
-export interface IItemTooltipProps {
-  item: IItem;
-  atlasIMG: any;
-  atlasJSON: any;
-  equipmentSet?: IEquipmentSet | null;
-}
-
-const offset = 20;
-
-export const ItemTooltip: React.FC<IItemTooltipProps> = ({
-  item,
-  atlasIMG,
-  atlasJSON,
-  equipmentSet,
-}) => {
-  const ref = useRef<HTMLDivElement>(null);
-
-  useEffect(() => {
-    const { current } = ref;
-    let initialOffset: DOMRect;
-
-    if (current) {
-      const handleMouseMove = (event: MouseEvent) => {
-        const { clientX, clientY } = event;
-
-        // Adjust the position of the tooltip based on the mouse position
-        const rect = current.getBoundingClientRect();
-        if (!initialOffset) {
-          initialOffset = rect;
-        }
-
-        const tooltipWidth = rect.width;
-        const tooltipHeight = rect.height;
-        const isOffScreenRight =
-          clientX + tooltipWidth + offset > window.innerWidth;
-        const isOffScreenBottom =
-          clientY + tooltipHeight + offset > window.innerHeight;
-        const x =
-          (isOffScreenRight
-            ? clientX - tooltipWidth - offset
-            : clientX + offset) - initialOffset.x;
-        const y =
-          (isOffScreenBottom
-            ? clientY - tooltipHeight - offset
-            : clientY + offset) - initialOffset.y;
-
-        current.style.transform = `translate(${x}px, ${y}px)`;
-        current.style.opacity = '1';
-      };
-
-      window.addEventListener('mousemove', handleMouseMove);
-
-      return () => {
-        window.removeEventListener('mousemove', handleMouseMove);
-      };
-    }
-
-    return;
-  }, []);
-
-  return (
-    <Container ref={ref}>
-      <ItemInfoDisplay
-        item={item}
-        atlasIMG={atlasIMG}
-        atlasJSON={atlasJSON}
-        equipmentSet={equipmentSet}
-      />
-    </Container>
-  );
-};
-
-const Container = styled.div`
-  position: fixed;
-  z-index: 50;
-  pointer-events: none;
-  left: 0;
-  top: 0;
-  opacity: 0;
-`;
+import React from 'react';
+import styled from 'styled-components';
+import { uiFonts } from '../../../constants/uiFonts';
+
+interface IProps {
+  label: string;
+}
+
+export const ItemTooltip: React.FC<IProps> = ({ label }) => {
+  return (
+    <Container>
+      <div>{label}</div>
+    </Container>
+  );
+};
+
+const Container = styled.div`
+  z-index: 2;
+  position: absolute;
+  top: 1rem;
+  left: 4rem;
+
+  font-size: ${uiFonts.size.xxsmall};
+  color: white;
+  background-color: black;
+  border-radius: 5px;
+  padding: 0.5rem;
+  min-width: 20px;
+  width: 100%;
+  text-align: center;
+
+  opacity: 0.75;
+`;

package/src/components/Item/Inventory/ErrorBoundary.tsx

@@ -1,42 +1,42 @@
-import React, { Component, ErrorInfo, ReactNode } from 'react';
-import atlasJSON from '../../../mocks/atlas/items/items.json';
-import atlasIMG from '../../../mocks/atlas/items/items.png';
-import { SpriteFromAtlas } from '../../shared/SpriteFromAtlas';
-
-interface Props {
-  children?: ReactNode;
-}
-
-interface State {
-  hasError: boolean;
-}
-
-export class ErrorBoundary extends Component<Props, State> {
-  public state: State = {
-    hasError: false,
-  };
-
-  public static getDerivedStateFromError(_: Error): State {
-    // Update state so the next render will show the fallback UI.
-    return { hasError: true };
-  }
-
-  public componentDidCatch(error: Error, errorInfo: ErrorInfo) {
-    console.error('Uncaught error:', error, errorInfo);
-  }
-
-  public render() {
-    if (this.state.hasError) {
-      return (
-        <SpriteFromAtlas
-          atlasIMG={atlasIMG}
-          atlasJSON={atlasJSON}
-          spriteKey={'others/no-image.png'}
-          imgScale={3}
-        />
-      );
-    }
-
-    return this.props.children;
-  }
-}
+import React, { Component, ErrorInfo, ReactNode } from 'react';
+import atlasJSON from '../../../mocks/atlas/items/items.json';
+import atlasIMG from '../../../mocks/atlas/items/items.png';
+import { SpriteFromAtlas } from '../../shared/SpriteFromAtlas';
+
+interface Props {
+  children?: ReactNode;
+}
+
+interface State {
+  hasError: boolean;
+}
+
+export class ErrorBoundary extends Component<Props, State> {
+  public state: State = {
+    hasError: false,
+  };
+
+  public static getDerivedStateFromError(_: Error): State {
+    // Update state so the next render will show the fallback UI.
+    return { hasError: true };
+  }
+
+  public componentDidCatch(error: Error, errorInfo: ErrorInfo) {
+    console.error('Uncaught error:', error, errorInfo);
+  }
+
+  public render() {
+    if (this.state.hasError) {
+      return (
+        <SpriteFromAtlas
+          atlasIMG={atlasIMG}
+          atlasJSON={atlasJSON}
+          spriteKey={'others/no-image.png'}
+          imgScale={3}
+        />
+      );
+    }
+
+    return this.props.children;
+  }
+}