@rpg-engine/long-bow 0.3.82 → 0.3.83

package/src/components/RelativeListMenu.tsx

@@ -1,83 +1,90 @@
-import React, { useEffect, useRef } from 'react';
-import styled from 'styled-components';
-import { useOutsideClick } from '../hooks/useOutsideAlerter';
-
-interface IListMenuOption {
-  id: string;
-  text: string;
-}
-
-export interface IRelativeMenuProps {
-  options: IListMenuOption[];
-  onSelected: (selectedOptionId: string) => void;
-  fontSize?: number;
-  onOutsideClick?: () => void;
-}
-
-export const RelativeListMenu: React.FC<IRelativeMenuProps> = ({
-  options,
-  onSelected,
-  onOutsideClick,
-  fontSize = 0.8,
-}) => {
-  const ref = useRef(null);
-
-  useOutsideClick(ref, 'relative-context-menu');
-
-  useEffect(() => {
-    document.addEventListener('clickOutside', event => {
-      const e = event as CustomEvent;
-
-      if (e.detail.id === 'relative-context-menu') {
-        if (onOutsideClick) {
-          onOutsideClick();
-        }
-      }
-    });
-
-    return () => {
-      document.removeEventListener('clickOutside', _e => {});
-    };
-  }, []);
-
-  return (
-    <Container fontSize={fontSize} ref={ref}>
-      <ul className="rpgui-list-imp" style={{ overflow: 'hidden' }}>
-        {options.map((params, index) => (
-          <ListElement
-            key={params?.id || index}
-            onPointerDown={() => {
-              onSelected(params?.id);
-            }}
-          >
-            {params?.text || 'No text'}
-          </ListElement>
-        ))}
-      </ul>
-    </Container>
-  );
-};
-
-interface IContainerProps {
-  fontSize?: number;
-}
-
-const Container = styled.div<IContainerProps>`
-  position: absolute;
-  top: 1rem;
-  left: 4rem;
-
-  display: flex;
-  flex-direction: column;
-  width: max-content;
-  justify-content: start;
-  align-items: flex-start;
-
-  li {
-    font-size: ${props => props.fontSize}em;
-  }
-`;
-
-const ListElement = styled.li`
-  margin-right: 0.5rem;
-`;
+import React, { useEffect, useRef } from 'react';
+import styled from 'styled-components';
+import { useOutsideClick } from '../hooks/useOutsideAlerter';
+import ModalPortal from './Abstractions/ModalPortal';
+
+interface IListMenuOption {
+  id: string;
+  text: string;
+}
+
+export interface IRelativeMenuProps {
+  options: IListMenuOption[];
+  onSelected: (selectedOptionId: string) => void;
+  fontSize?: number;
+  onOutsideClick?: () => void;
+  pos: { x: number; y: number };
+}
+
+export const RelativeListMenu: React.FC<IRelativeMenuProps> = ({
+  options,
+  onSelected,
+  onOutsideClick,
+  fontSize = 0.8,
+  pos,
+}) => {
+  const ref = useRef(null);
+
+  useOutsideClick(ref, 'relative-context-menu');
+
+  useEffect(() => {
+    document.addEventListener('clickOutside', event => {
+      const e = event as CustomEvent;
+
+      if (e.detail.id === 'relative-context-menu') {
+        if (onOutsideClick) {
+          onOutsideClick();
+        }
+      }
+    });
+
+    return () => {
+      document.removeEventListener('clickOutside', _e => {});
+    };
+  }, []);
+
+  return (
+    <ModalPortal>
+      <Container fontSize={fontSize} ref={ref} {...pos}>
+        <ul className="rpgui-list-imp" style={{ overflow: 'hidden' }}>
+          {options.map((params, index) => (
+            <ListElement
+              key={params?.id || index}
+              onPointerDown={() => {
+                onSelected(params?.id);
+              }}
+            >
+              {params?.text || 'No text'}
+            </ListElement>
+          ))}
+        </ul>
+      </Container>
+    </ModalPortal>
+  );
+};
+
+interface IContainerProps {
+  fontSize?: number;
+  x: number;
+  y: number;
+}
+
+const Container = styled.div<IContainerProps>`
+  position: absolute;
+  top: ${props => props.y}px;
+  left: ${props => props.x}px;
+
+  display: flex;
+  flex-direction: column;
+  width: max-content;
+  justify-content: start;
+  align-items: flex-start;
+
+  li {
+    font-size: ${props => props.fontSize}em;
+  }
+`;
+
+const ListElement = styled.li`
+  margin-right: 0.5rem;
+`;

package/src/components/ScrollList.tsx

@@ -1,79 +1,79 @@
-import React from 'react';
-import styled from 'styled-components';
-import { v4 as uuidv4 } from 'uuid';
-import { uiFonts } from '../constants/uiFonts';
-import { DraggableContainer } from './DraggableContainer';
-
-interface IListMenuOption {
-  id: string;
-  text: string;
-}
-
-export interface IListMenuProps {
-  x: number;
-  y: number;
-  options: IListMenuOption[];
-  onSelected: (selectedOptionId: string) => void;
-  fontSize?: number;
-  title: string;
-}
-
-export const ListMenu: React.FC<IListMenuProps> = ({
-  options,
-  onSelected,
-  title,
-}) => {
-  return (
-    <ScrollListContainer title={title}>
-      <SkillSplitDiv>
-        <hr className="golden" />
-      </SkillSplitDiv>
-
-      <ListContainer className="rpgui-list-imp">
-        {options.map(params => (
-          <ListElement
-            key={uuidv4()}
-            onPointerDown={() => {
-              onSelected(params?.id);
-            }}
-          >
-            {params?.text || 'No text'}
-          </ListElement>
-        ))}
-      </ListContainer>
-    </ScrollListContainer>
-  );
-};
-
-const ScrollListContainer = styled(DraggableContainer)`
-  border: 1px solid black;
-  width: 400px;
-  height: 400px;
-  .DraggableContainer__TitleContainer-sc-184mpyl-2 {
-    width: auto;
-    height: auto;
-  }
-`;
-
-const SkillSplitDiv = styled.div`
-  width: 100%;
-  margin-bottom: 10px;
-  hr {
-    margin: 0px;
-    padding: 0px;
-  }
-  p {
-    margin-bottom: 0px;
-  }
-`;
-
-const ListContainer = styled.ul`
-  border: none;
-  width: 400px;
-  height: 250px;
-  overflow-y: scroll;
-`;
-const ListElement = styled.li`
-  margin-right: 0.5rem;
-  font-size: ${uiFonts.size.small};
-`;
+import React from 'react';
+import styled from 'styled-components';
+import { v4 as uuidv4 } from 'uuid';
+import { uiFonts } from '../constants/uiFonts';
+import { DraggableContainer } from './DraggableContainer';
+
+interface IListMenuOption {
+  id: string;
+  text: string;
+}
+
+export interface IListMenuProps {
+  x: number;
+  y: number;
+  options: IListMenuOption[];
+  onSelected: (selectedOptionId: string) => void;
+  fontSize?: number;
+  title: string;
+}
+
+export const ListMenu: React.FC<IListMenuProps> = ({
+  options,
+  onSelected,
+  title,
+}) => {
+  return (
+    <ScrollListContainer title={title}>
+      <SkillSplitDiv>
+        <hr className="golden" />
+      </SkillSplitDiv>
+
+      <ListContainer className="rpgui-list-imp">
+        {options.map(params => (
+          <ListElement
+            key={uuidv4()}
+            onPointerDown={() => {
+              onSelected(params?.id);
+            }}
+          >
+            {params?.text || 'No text'}
+          </ListElement>
+        ))}
+      </ListContainer>
+    </ScrollListContainer>
+  );
+};
+
+const ScrollListContainer = styled(DraggableContainer)`
+  border: 1px solid black;
+  width: 400px;
+  height: 400px;
+  .DraggableContainer__TitleContainer-sc-184mpyl-2 {
+    width: auto;
+    height: auto;
+  }
+`;
+
+const SkillSplitDiv = styled.div`
+  width: 100%;
+  margin-bottom: 10px;
+  hr {
+    margin: 0px;
+    padding: 0px;
+  }
+  p {
+    margin-bottom: 0px;
+  }
+`;
+
+const ListContainer = styled.ul`
+  border: none;
+  width: 400px;
+  height: 250px;
+  overflow-y: scroll;
+`;
+const ListElement = styled.li`
+  margin-right: 0.5rem;
+  font-size: ${uiFonts.size.small};
+`;

package/src/components/Shortcuts/Shortcuts.tsx

@@ -1,151 +1,151 @@
-import {
-  getItemTextureKeyPath,
-  IItem,
-  IItemContainer,
-  IRawSpell,
-  IShortcut,
-  ShortcutType,
-} from '@rpg-engine/shared';
-import React, { useEffect, useRef } from 'react';
-import styled from 'styled-components';
-import { uiColors } from '../../constants/uiColors';
-import { SpriteFromAtlas } from '../shared/SpriteFromAtlas';
-import { SingleShortcut } from './SingleShortcut';
-
-export type ShortcutsProps = {
-  shortcuts: IShortcut[];
-  onShortcutCast: (index: number) => void;
-  mana: number;
-  isBlockedCastingByKeyboard?: boolean;
-  inventory?: IItemContainer | null;
-  atlasJSON: any;
-  atlasIMG: any;
-};
-
-export const Shortcuts: React.FC<ShortcutsProps> = ({
-  shortcuts,
-  onShortcutCast,
-  mana,
-  isBlockedCastingByKeyboard = false,
-  atlasJSON,
-  atlasIMG,
-  inventory,
-}) => {
-  const shortcutsRefs = useRef<HTMLButtonElement[]>([]);
-
-  useEffect(() => {
-    const handleKeyDown = (e: KeyboardEvent) => {
-      if (isBlockedCastingByKeyboard) return;
-
-      const shortcutIndex = Number(e.key) - 1;
-      if (shortcutIndex >= 0 && shortcutIndex <= 5) {
-        onShortcutCast(shortcutIndex);
-        shortcutsRefs.current[shortcutIndex]?.classList.add('active');
-        setTimeout(() => {
-          shortcutsRefs.current[shortcutIndex]?.classList.remove('active');
-        }, 150);
-      }
-    };
-
-    window.addEventListener('keydown', handleKeyDown);
-
-    return () => {
-      window.removeEventListener('keydown', handleKeyDown);
-    };
-  }, [shortcuts, isBlockedCastingByKeyboard]);
-
-  return (
-    <List>
-      {Array.from({ length: 6 }).map((_, i) => {
-        if (shortcuts[i]?.type === ShortcutType.Item) {
-          const payload = shortcuts[i]?.payload as IItem | undefined;
-
-          let itemsFromEquipment: (IItem | undefined | null)[] = [];
-
-          if (inventory) {
-            Object.keys(inventory.slots).forEach(i => {
-              const index = parseInt(i);
-
-              if (inventory.slots[index]?.key === payload?.key) {
-                itemsFromEquipment.push(inventory.slots[index]);
-              }
-            });
-          }
-
-          const totalQty = itemsFromEquipment.reduce(
-            (acc, item) => acc + (item?.stackQty || 1),
-            0
-          );
-
-          return (
-            <StyledShortcut
-              key={i}
-              onPointerDown={onShortcutCast.bind(null, i)}
-              disabled={false}
-              ref={el => {
-                if (el) shortcutsRefs.current[i] = el;
-              }}
-            >
-              {payload && (
-                <SpriteFromAtlas
-                  atlasIMG={atlasIMG}
-                  atlasJSON={atlasJSON}
-                  spriteKey={getItemTextureKeyPath(
-                    {
-                      key: payload.texturePath,
-                      texturePath: payload.texturePath,
-                      stackQty: payload.stackQty || 1,
-                    },
-                    atlasJSON
-                  )}
-                  width={32}
-                  height={32}
-                />
-              )}
-              <span className="qty">{totalQty}</span>
-              <span className="keyboard">{i + 1}</span>
-            </StyledShortcut>
-          );
-        }
-
-        const payload = shortcuts[i]?.payload as IRawSpell | undefined;
-
-        return (
-          <StyledShortcut
-            key={i}
-            onPointerDown={onShortcutCast.bind(null, i)}
-            disabled={mana < (payload?.manaCost ?? 0)}
-            ref={el => {
-              if (el) shortcutsRefs.current[i] = el;
-            }}
-          >
-            <span className="mana">{payload && payload.manaCost}</span>
-            <span className="magicWords">
-              {payload?.magicWords.split(' ').map(word => word[0])}
-            </span>
-            <span className="keyboard">{i + 1}</span>
-          </StyledShortcut>
-        );
-      })}
-    </List>
-  );
-};
-
-const StyledShortcut = styled(SingleShortcut)`
-  transition: all 0.15s;
-
-  &.active {
-    background-color: ${uiColors.gray};
-    border-color: ${uiColors.yellow};
-  }
-`;
-
-const List = styled.p`
-  width: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 0.5rem;
-  box-sizing: border-box;
-  margin: 0 !important;
-`;
+import {
+  getItemTextureKeyPath,
+  IItem,
+  IItemContainer,
+  IRawSpell,
+  IShortcut,
+  ShortcutType,
+} from '@rpg-engine/shared';
+import React, { useEffect, useRef } from 'react';
+import styled from 'styled-components';
+import { uiColors } from '../../constants/uiColors';
+import { SpriteFromAtlas } from '../shared/SpriteFromAtlas';
+import { SingleShortcut } from './SingleShortcut';
+
+export type ShortcutsProps = {
+  shortcuts: IShortcut[];
+  onShortcutCast: (index: number) => void;
+  mana: number;
+  isBlockedCastingByKeyboard?: boolean;
+  inventory?: IItemContainer | null;
+  atlasJSON: any;
+  atlasIMG: any;
+};
+
+export const Shortcuts: React.FC<ShortcutsProps> = ({
+  shortcuts,
+  onShortcutCast,
+  mana,
+  isBlockedCastingByKeyboard = false,
+  atlasJSON,
+  atlasIMG,
+  inventory,
+}) => {
+  const shortcutsRefs = useRef<HTMLButtonElement[]>([]);
+
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (isBlockedCastingByKeyboard) return;
+
+      const shortcutIndex = Number(e.key) - 1;
+      if (shortcutIndex >= 0 && shortcutIndex <= 5) {
+        onShortcutCast(shortcutIndex);
+        shortcutsRefs.current[shortcutIndex]?.classList.add('active');
+        setTimeout(() => {
+          shortcutsRefs.current[shortcutIndex]?.classList.remove('active');
+        }, 150);
+      }
+    };
+
+    window.addEventListener('keydown', handleKeyDown);
+
+    return () => {
+      window.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [shortcuts, isBlockedCastingByKeyboard]);
+
+  return (
+    <List>
+      {Array.from({ length: 6 }).map((_, i) => {
+        if (shortcuts[i]?.type === ShortcutType.Item) {
+          const payload = shortcuts[i]?.payload as IItem | undefined;
+
+          let itemsFromEquipment: (IItem | undefined | null)[] = [];
+
+          if (inventory) {
+            Object.keys(inventory.slots).forEach(i => {
+              const index = parseInt(i);
+
+              if (inventory.slots[index]?.key === payload?.key) {
+                itemsFromEquipment.push(inventory.slots[index]);
+              }
+            });
+          }
+
+          const totalQty = itemsFromEquipment.reduce(
+            (acc, item) => acc + (item?.stackQty || 1),
+            0
+          );
+
+          return (
+            <StyledShortcut
+              key={i}
+              onPointerDown={onShortcutCast.bind(null, i)}
+              disabled={false}
+              ref={el => {
+                if (el) shortcutsRefs.current[i] = el;
+              }}
+            >
+              {payload && (
+                <SpriteFromAtlas
+                  atlasIMG={atlasIMG}
+                  atlasJSON={atlasJSON}
+                  spriteKey={getItemTextureKeyPath(
+                    {
+                      key: payload.texturePath,
+                      texturePath: payload.texturePath,
+                      stackQty: payload.stackQty || 1,
+                    },
+                    atlasJSON
+                  )}
+                  width={32}
+                  height={32}
+                />
+              )}
+              <span className="qty">{totalQty}</span>
+              <span className="keyboard">{i + 1}</span>
+            </StyledShortcut>
+          );
+        }
+
+        const payload = shortcuts[i]?.payload as IRawSpell | undefined;
+
+        return (
+          <StyledShortcut
+            key={i}
+            onPointerDown={onShortcutCast.bind(null, i)}
+            disabled={mana < (payload?.manaCost ?? 0)}
+            ref={el => {
+              if (el) shortcutsRefs.current[i] = el;
+            }}
+          >
+            <span className="mana">{payload && payload.manaCost}</span>
+            <span className="magicWords">
+              {payload?.magicWords.split(' ').map(word => word[0])}
+            </span>
+            <span className="keyboard">{i + 1}</span>
+          </StyledShortcut>
+        );
+      })}
+    </List>
+  );
+};
+
+const StyledShortcut = styled(SingleShortcut)`
+  transition: all 0.15s;
+
+  &.active {
+    background-color: ${uiColors.gray};
+    border-color: ${uiColors.yellow};
+  }
+`;
+
+const List = styled.p`
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  box-sizing: border-box;
+  margin: 0 !important;
+`;