@rpg-engine/long-bow 0.3.77 → 0.3.78

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

@@ -1,33 +1,85 @@
-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;
-`;
+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;
+`;

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

@@ -0,0 +1,134 @@
+import { IEquipmentSet, IItem } from '@rpg-engine/shared';
+import React, { useEffect, useRef } from 'react';
+import styled from 'styled-components';
+import { ItemInfoDisplay } from './ItemInfoDisplay';
+
+interface IListMenuOption {
+  id: string;
+  text: string;
+}
+
+export interface MobileItemTooltipProps {
+  item: IItem;
+  atlasIMG: any;
+  atlasJSON: any;
+  closeTooltip: () => void;
+  equipmentSet?: IEquipmentSet | null;
+  scale?: number;
+  options?: IListMenuOption[];
+  onSelected?: (selectedOptionId: string) => void;
+}
+
+export const MobileItemTooltip: React.FC<MobileItemTooltipProps> = ({
+  item,
+  atlasIMG,
+  atlasJSON,
+  closeTooltip,
+  equipmentSet,
+  scale = 1,
+  options,
+  onSelected,
+}) => {
+  const ref = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const { current } = ref;
+
+    if (current) {
+      // Adjust the position to be on whole window
+      const rect = current.getBoundingClientRect();
+
+      const x = (-rect.x * 100) / (scale * 100);
+      const y = (-rect.y * 100) / (scale * 100);
+
+      current.style.transform = `translate(${x}px, ${y}px)`;
+      current.style.opacity = '0.92';
+    }
+
+    return;
+  }, []);
+
+  return (
+    <Container
+      ref={ref}
+      onTouchEnd={() => {
+        setTimeout(() => {
+          closeTooltip();
+        }, 10);
+      }}
+      scale={scale}
+    >
+      <ItemInfoDisplay
+        item={item}
+        atlasIMG={atlasIMG}
+        atlasJSON={atlasJSON}
+        equipmentSet={equipmentSet}
+        isMobile
+      />
+      <OptionsContainer>
+        {options?.map(option => (
+          <Option
+            key={option.id}
+            onTouchEnd={() => {
+              setTimeout(() => {
+                onSelected?.(option.id);
+                closeTooltip();
+              }, 10);
+            }}
+          >
+            {option.text}
+          </Option>
+        ))}
+      </OptionsContainer>
+    </Container>
+  );
+};
+
+const Container = styled.div<{ scale: number }>`
+  position: fixed;
+  z-index: 50;
+  left: 0;
+  top: 0;
+  opacity: 0;
+  width: ${({ scale }) => `calc(100vw * 100 / ${scale * 100})`};
+  height: ${({ scale }) => `calc(100vh * 100 / ${scale * 100})`};
+  background-color: rgba(0 0 0 / 0.5);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 0.5rem;
+
+  @media (max-width: 580px) {
+    flex-direction: column;
+  }
+`;
+
+const OptionsContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  flex-wrap: wrap;
+
+  @media (max-width: 580px) {
+    flex-direction: row;
+    justify-content: center;
+  }
+`;
+
+const Option = styled.button`
+  padding: 1rem;
+  background-color: #333;
+  color: white;
+  border: none;
+  border-radius: 3px;
+  width: 8rem;
+  transition: background-color 0.2s;
+
+  &:hover {
+    background-color: #555;
+  }
+
+  @media (max-width: 580px) {
+    padding: 1rem 0.5rem;
+  }
+`;

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