@rpg-engine/long-bow 0.3.80 → 0.3.82

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

@@ -1,134 +1,149 @@
-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;
-  }
-`;
+import { IEquipmentSet, IItem } from '@rpg-engine/shared';
+import React, { useRef } from 'react';
+import styled from 'styled-components';
+import ModalPortal from '../../Abstractions/ModalPortal';
+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);
+
+  const handleFadeOut = () => {
+    ref.current?.classList.add('fadeOut');
+  };
+
+  return (
+    <ModalPortal>
+      <Container
+        ref={ref}
+        onTouchEnd={() => {
+          handleFadeOut();
+          setTimeout(() => {
+            closeTooltip();
+          }, 100);
+        }}
+        scale={scale}
+      >
+        <ItemInfoDisplay
+          item={item}
+          atlasIMG={atlasIMG}
+          atlasJSON={atlasJSON}
+          equipmentSet={equipmentSet}
+          isMobile
+        />
+        <OptionsContainer>
+          {options?.map(option => (
+            <Option
+              key={option.id}
+              onTouchEnd={() => {
+                handleFadeOut();
+                setTimeout(() => {
+                  onSelected?.(option.id);
+                  closeTooltip();
+                }, 100);
+              }}
+            >
+              {option.text}
+            </Option>
+          ))}
+        </OptionsContainer>
+      </Container>
+    </ModalPortal>
+  );
+};
+
+const Container = styled.div<{ scale: number }>`
+  position: absolute;
+  z-index: 100;
+  left: 0;
+  top: 0;
+  width: 100vw;
+  height: 100vh;
+  background-color: rgba(0 0 0 / 0.5);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 0.5rem;
+  transition: opacity 0.08s;
+  animation: fadeIn 0.1s forwards;
+
+  @keyframes fadeIn {
+    0% {
+      opacity: 0;
+    }
+    100% {
+      opacity: 0.92;
+    }
+  }
+
+  @keyframes fadeOut {
+    0% {
+      opacity: 0.92;
+    }
+    100% {
+      opacity: 0;
+    }
+  }
+
+  &.fadeOut {
+    animation: fadeOut 0.1s forwards;
+  }
+
+  @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.1s;
+
+  &: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;
+  }
+}