@rpg-engine/long-bow 0.3.57 → 0.3.59

package/src/components/RelativeListMenu.tsx

@@ -1,83 +1,83 @@
-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';
+
+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;
+`;

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

@@ -0,0 +1,129 @@
+import {
+  getItemTextureKeyPath,
+  IItem,
+  IItemContainer,
+  IRawSpell,
+  IShortcut,
+  ShortcutType,
+} from '@rpg-engine/shared';
+import React, { useEffect } from 'react';
+import styled from 'styled-components';
+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,
+}) => {
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (isBlockedCastingByKeyboard) return;
+
+      const shortcutIndex = Number(e.key) - 1;
+      if (shortcutIndex >= 0 && shortcutIndex <= 5) {
+        onShortcutCast(shortcutIndex);
+      }
+    };
+
+    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 (
+            <SingleShortcut
+              key={i}
+              onPointerDown={onShortcutCast.bind(null, i)}
+              disabled={false}
+            >
+              {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>
+            </SingleShortcut>
+          );
+        }
+
+        const payload = shortcuts[i]?.payload as IRawSpell | undefined;
+
+        return (
+          <SingleShortcut
+            key={i}
+            onPointerDown={onShortcutCast.bind(null, i)}
+            disabled={mana < (payload?.manaCost ?? 0)}
+          >
+            <span className="mana">{payload && payload.manaCost}</span>
+            <span className="magicWords">
+              {payload?.magicWords.split(' ').map(word => word[0])}
+            </span>
+            <span className="keyboard">{i + 1}</span>
+          </SingleShortcut>
+        );
+      })}
+    </List>
+  );
+};
+
+const List = styled.p`
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  box-sizing: border-box;
+  margin: 0 !important;
+`;

package/src/components/Shortcuts/ShortcutsSetter.tsx

@@ -0,0 +1,132 @@
+import {
+  getItemTextureKeyPath,
+  IItem,
+  IRawSpell,
+  IShortcut,
+  ShortcutType,
+} from '@rpg-engine/shared';
+import React from 'react';
+import styled from 'styled-components';
+import { uiColors } from '../../constants/uiColors';
+import { SpriteFromAtlas } from '../shared/SpriteFromAtlas';
+
+type ShortcutsSetterProps = {
+  setSettingShortcutIndex: (index: number) => void;
+  settingShortcutIndex: number;
+  shortcuts: IShortcut[];
+  removeShortcut: (index: number) => void;
+  atlasJSON: any;
+  atlasIMG: any;
+};
+
+export const ShortcutsSetter: React.FC<ShortcutsSetterProps> = ({
+  setSettingShortcutIndex,
+  settingShortcutIndex,
+  shortcuts,
+  removeShortcut,
+  atlasJSON,
+  atlasIMG,
+}) => {
+  const getContent = (index: number) => {
+    if (shortcuts[index]?.type === ShortcutType.Item) {
+      const payload = shortcuts[index]?.payload as IItem | undefined;
+
+      if (!payload) return null;
+
+      return (
+        <SpriteFromAtlas
+          atlasIMG={atlasIMG}
+          atlasJSON={atlasJSON}
+          spriteKey={getItemTextureKeyPath(
+            {
+              key: payload.texturePath,
+              texturePath: payload.texturePath,
+              stackQty: payload.stackQty || 1,
+            },
+            atlasJSON
+          )}
+          width={32}
+          height={32}
+          imgScale={1.6}
+          imgStyle={{ left: '5px' }}
+        />
+      );
+    }
+
+    const payload = shortcuts[index]?.payload as IRawSpell | undefined;
+
+    return <span>{payload?.magicWords.split(' ').map(word => word[0])}</span>;
+  };
+
+  return (
+    <Container>
+      <p>Shortcuts:</p>
+      <List id="shortcuts_list">
+        {Array.from({ length: 6 }).map((_, i) => (
+          <Shortcut
+            key={i}
+            onPointerDown={() => {
+              removeShortcut(i);
+              if (!shortcuts[i] || shortcuts[i].type === ShortcutType.None)
+                setSettingShortcutIndex(i);
+            }}
+            disabled={settingShortcutIndex !== -1 && settingShortcutIndex !== i}
+            isBeingSet={settingShortcutIndex === i}
+          >
+            {getContent(i)}
+          </Shortcut>
+        ))}
+      </List>
+    </Container>
+  );
+};
+
+const Container = styled.div`
+  p {
+    margin: 0;
+    margin-left: 0.5rem;
+  }
+`;
+
+const Shortcut = styled.button<{ isBeingSet?: boolean }>`
+  width: 2.6rem;
+  height: 2.6rem;
+  background-color: ${uiColors.lightGray};
+  border: 2px solid
+    ${({ isBeingSet }) => (isBeingSet ? uiColors.yellow : uiColors.darkGray)};
+  border-radius: 50%;
+  text-transform: uppercase;
+  font-size: 0.7rem;
+  font-weight: bold;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  span {
+    margin-top: 4px;
+  }
+
+  &:hover,
+  &:focus {
+    background-color: ${uiColors.darkGray};
+  }
+
+  &:active {
+    background-color: ${uiColors.gray};
+  }
+
+  &:disabled {
+    opacity: 0.5;
+  }
+`;
+
+const List = styled.div`
+  width: 100%;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding-bottom: 0.5rem;
+  padding-left: 0.5rem;
+  box-sizing: border-box;
+  margin: 0 !important;
+`;

package/src/components/Shortcuts/SingleShortcut.ts

@@ -0,0 +1,61 @@
+import styled from 'styled-components';
+import { uiColors } from '../../constants/uiColors';
+
+export const SingleShortcut = styled.button`
+  width: 3rem;
+  height: 3rem;
+  background-color: ${uiColors.lightGray};
+  border: 2px solid ${uiColors.darkGray};
+  border-radius: 50%;
+  text-transform: uppercase;
+  font-size: 0.7rem;
+  font-weight: bold;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+
+  span {
+    pointer-events: none;
+  }
+
+  .mana {
+    position: absolute;
+    top: -5px;
+    right: 0;
+    font-size: 0.65rem;
+    color: ${uiColors.blue};
+  }
+
+  .qty {
+    position: absolute;
+    top: -5px;
+    right: 0;
+    font-size: 0.65rem;
+  }
+
+  .magicWords {
+    margin-top: 4px;
+  }
+
+  .keyboard {
+    position: absolute;
+    bottom: -5px;
+    left: 0;
+    font-size: 0.65rem;
+    color: ${uiColors.yellow};
+  }
+
+  &:hover,
+  &:focus {
+    background-color: ${uiColors.darkGray};
+  }
+
+  &:active {
+    background-color: ${uiColors.gray};
+  }
+
+  &:disabled {
+    opacity: 0.5;
+  }
+`;