@rpg-engine/long-bow 0.3.44 → 0.3.45

package/src/components/Spellbook/SpellbookShortcuts.tsx

@@ -0,0 +1,77 @@
+import { IRawSpell } from '@rpg-engine/shared';
+import React from 'react';
+import styled from 'styled-components';
+import { uiColors } from '../../constants/uiColors';
+
+type Props = {
+  setSettingShortcutIndex: (index: number) => void;
+  settingShortcutIndex: number;
+  shortcuts: IRawSpell[];
+  removeShortcut: (index: number) => void;
+};
+
+export const SpellbookShortcuts: React.FC<Props> = ({
+  setSettingShortcutIndex,
+  settingShortcutIndex,
+  shortcuts,
+  removeShortcut,
+}) => (
+  <List id="shortcuts_list">
+    Spells shortcuts:
+    {Array.from({ length: 4 }).map((_, i) => (
+      <SpellShortcut
+        key={i}
+        onClick={() => {
+          removeShortcut(i);
+          if (!shortcuts[i]?.key) setSettingShortcutIndex(i);
+        }}
+        disabled={settingShortcutIndex !== -1 && settingShortcutIndex !== i}
+        isBeingSet={settingShortcutIndex === i}
+      >
+        <span>{shortcuts[i]?.magicWords.split(' ').map(word => word[0])}</span>
+      </SpellShortcut>
+    ))}
+  </List>
+);
+const SpellShortcut = 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.p`
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 0.5rem;
+  padding: 0.5rem;
+  box-sizing: border-box;
+  margin: 0 !important;
+`;

package/src/components/Spellbook/constants.ts

@@ -0,0 +1,12 @@
+import { IRawSpell } from '@rpg-engine/shared';
+
+export const SPELL_SHORTCUTS_STORAGE_KEY = 'spellShortcuts';
+
+export const defaultSpellShortcut: IRawSpell = {
+  key: '',
+  manaCost: 0,
+  magicWords: '',
+  name: '',
+  description: '',
+  minMagicLevelRequired: 0,
+};

package/src/components/Spellbook/mockSpells.ts

@@ -0,0 +1,60 @@
+import { IRawSpell } from '@rpg-engine/shared';
+
+enum SpellsBlueprint {
+  SelfHealingSpell = 'self-healing-spell',
+  FoodCreationSpell = 'food-creation-spell',
+  ArrowCreationSpell = 'arrow-creation-spell',
+  BoltCreationSpell = 'bolt-creation-spell',
+  BlankRuneCreationSpell = 'blank-rune-creation-spell',
+  SelfHasteSpell = 'self-haste-spell',
+  FireRuneCreationSpell = 'fire-rune-creation-spell',
+  HealRuneCreationSpell = 'healing-rune-creation-spell',
+  PoisonRuneCreationSpell = 'poison-rune-creation-spell',
+  DarkRuneCreationSpell = 'dark-rune-creation-spell',
+  GreaterHealingSpell = 'greater-healing-spell',
+  EnergyBoltCreationSpell = 'energy-bolt-creation-spell',
+  FireBoltCreationSpell = 'fire-bolt-creation-spell',
+}
+
+export const mockSpells: IRawSpell[] = [
+  {
+    key: SpellsBlueprint.ArrowCreationSpell,
+    name: 'Arrow Creation Spell',
+    description: 'A spell that creates arrow in your inventory.',
+    magicWords: 'iquar elandi',
+    manaCost: 10,
+    minMagicLevelRequired: 3,
+  },
+  {
+    key: SpellsBlueprint.BlankRuneCreationSpell,
+    name: 'Blank Rune Creation Spell',
+    description: 'A spell that creates a blank rune in your inventory.',
+    magicWords: 'iquar ansr ki',
+    manaCost: 5,
+    minMagicLevelRequired: 3,
+  },
+  {
+    key: SpellsBlueprint.BoltCreationSpell,
+    name: 'Bolt Creation Spell',
+    description: 'A spell that creates bolt in your inventory.',
+    magicWords: 'iquar lyn',
+    manaCost: 15,
+    minMagicLevelRequired: 3,
+  },
+  {
+    key: SpellsBlueprint.SelfHasteSpell,
+    name: 'Self Haste Spell',
+    description: 'A self haste spell.',
+    magicWords: 'talas hiz',
+    manaCost: 40,
+    minMagicLevelRequired: 5,
+  },
+  {
+    key: SpellsBlueprint.SelfHealingSpell,
+    name: 'Self Healing Spell',
+    description: 'A self healing spell.',
+    magicWords: 'talas faenya',
+    manaCost: 10,
+    minMagicLevelRequired: 1,
+  },
+];

package/src/components/TimeWidget/TimeWidget.tsx

@@ -37,6 +37,7 @@ const WidgetContainer = styled.div`
   background-repeat: no-repeat;
   width: 10rem;
   position: absolute;
+  height: 100px;
 `;
 
 const Time = styled.div`

package/src/components/TradingMenu/TradingItemRow.tsx

@@ -1,4 +1,4 @@
-import { ITradeResponseItem } from '@rpg-engine/shared';
+import { getItemTextureKeyPath, ITradeResponseItem } from '@rpg-engine/shared';
 import capitalize from 'lodash/capitalize';
 import React from 'react';
 import styled from 'styled-components';
@@ -37,6 +37,18 @@ export const TradingItemRow: React.FC<ITradeComponentProps> = ({
       onQuantityChange(traderItem, newQuantity);
     }
   };
+  const onLeftOutClick = () => {
+    if (selectedQty >= 10) {
+      const newQuantity = selectedQty - 10;
+      onQuantityChange(traderItem, newQuantity);
+    }
+  };
+  const onRightOutClick = () => {
+    if (selectedQty + 10 <= (traderItem.qty ?? 999)) {
+      const newQuantity = selectedQty + 10;
+      onQuantityChange(traderItem, newQuantity);
+    }
+  };
 
   return (
     <ItemWrapper>
@@ -45,7 +57,14 @@ export const TradingItemRow: React.FC<ITradeComponentProps> = ({
           <SpriteFromAtlas
             atlasIMG={atlasIMG}
             atlasJSON={atlasJSON}
-            spriteKey={traderItem.texturePath}
+            spriteKey={getItemTextureKeyPath(
+              {
+                key: traderItem.key,
+                stackQty: traderItem.qty || 1,
+                texturePath: traderItem.texturePath,
+              },
+              atlasJSON
+            )}
             imgScale={2.5}
           />
         </SpriteContainer>
@@ -63,29 +82,47 @@ export const TradingItemRow: React.FC<ITradeComponentProps> = ({
 
       <QuantityContainer>
         <SelectArrow
+          size={32}
+          className="arrow-selector"
+          direction="left"
+          onClick={onLeftOutClick}
+          onTouchStart={onLeftOutClick}
+        />
+        <StyledArrow
           size={32}
           className="arrow-selector"
           direction="left"
           onClick={onLeftClick}
           onTouchStart={onLeftClick}
-        ></SelectArrow>
+        />
         <QuantityDisplay>
           <TextOverlay>
             <Item>{selectedQty}</Item>
           </TextOverlay>
         </QuantityDisplay>
-        <SelectArrow
+        <StyledArrow
           size={32}
           className="arrow-selector"
           direction="right"
           onClick={onRightClick}
           onTouchStart={onRightClick}
-        ></SelectArrow>
+        />
+        <SelectArrow
+          size={32}
+          className="arrow-selector"
+          direction="right"
+          onClick={onRightOutClick}
+          onTouchStart={onRightOutClick}
+        />
       </QuantityContainer>
     </ItemWrapper>
   );
 };
 
+const StyledArrow = styled(SelectArrow)`
+  margin: 40px;
+`;
+
 const ItemWrapper = styled.div`
   width: 100%;
   margin: auto;
@@ -152,7 +189,7 @@ const QuantityContainer = styled.div<IContainerProps>`
   justify-content: center;
   align-items: center;
 
-  flex: 20%;
+  flex: 40%;
 `;
 
 const QuantityDisplay = styled.div`

package/src/components/TradingMenu/TradingMenu.tsx

@@ -80,7 +80,7 @@ export const TradingMenu: React.FC<ITrandingMenu> = ({
       onCloseButton={() => {
         if (onClose) onClose();
       }}
-      width="500px"
+      width="600px"
       cancelDrag=".equipment-container-body .arrow-selector"
     >
       <>

package/src/components/itemSelector/ItemSelector.tsx

@@ -0,0 +1,136 @@
+import React, { useEffect, useState } from 'react';
+import styled from 'styled-components';
+import { Button, ButtonTypes } from '../Button';
+import { DraggableContainer } from '../DraggableContainer';
+import { RPGUIContainerTypes } from '../RPGUIContainer';
+import { SpriteFromAtlas } from '../shared/SpriteFromAtlas';
+
+export interface IOptionsItemSelectorProps {
+  name: string;
+  description?: string;
+  imageKey: string;
+}
+
+export interface IItemSelectorProps {
+  atlasJSON: any;
+  atlasIMG: any;
+  options: IOptionsItemSelectorProps[];
+  onClose: () => void;
+  onSelect: (value: string) => void;
+}
+
+export const ItemSelector: React.FC<IItemSelectorProps> = ({
+  atlasIMG,
+  atlasJSON,
+  options,
+  onClose,
+  onSelect,
+}) => {
+  const [selectedValue, setSelectedValue] = useState<string>();
+
+  const handleClick = () => {
+    let element = document.querySelector(
+      `input[name='test']:checked`
+    ) as HTMLInputElement;
+    const elementValue = element.value;
+    setSelectedValue(elementValue);
+  };
+
+  useEffect(() => {
+    if (selectedValue) {
+      onSelect(selectedValue);
+    }
+  }, [selectedValue]);
+  return (
+    <DraggableContainer
+      type={RPGUIContainerTypes.Framed}
+      width="500px"
+      cancelDrag=".equipment-container-body .arrow-selector"
+      onCloseButton={() => {
+        if (onClose) {
+          onClose();
+        }
+      }}
+    >
+      <div style={{ width: '100%' }}>
+        <Title>{'Harvesting instruments'}</Title>
+        <Subtitle>{'Use the tool, you need it'}</Subtitle>
+        <hr className="golden" />
+      </div>
+
+      <RadioInputScroller>
+        {options?.map((option, index) => (
+          <RadioOptionsWrapper key={index}>
+            <SpriteAtlasWrapper>
+              <SpriteFromAtlas
+                atlasIMG={atlasIMG}
+                atlasJSON={atlasJSON}
+                spriteKey={option.imageKey}
+                imgScale={3}
+              />
+            </SpriteAtlasWrapper>
+            <div>
+              <input
+                className="rpgui-radio"
+                type="radio"
+                value={option.name}
+                name="test"
+              />
+              <label
+                onClick={handleClick}
+                style={{ display: 'flex', alignItems: 'center' }}
+              >
+                {option.name} <br />
+                {option.description}
+              </label>
+            </div>
+          </RadioOptionsWrapper>
+        ))}
+      </RadioInputScroller>
+      <ButtonWrapper>
+        <Button buttonType={ButtonTypes.RPGUIButton} onClick={onClose}>
+          Cancel
+        </Button>
+        <Button buttonType={ButtonTypes.RPGUIButton}>Select</Button>
+      </ButtonWrapper>
+    </DraggableContainer>
+  );
+};
+
+const Title = styled.h1`
+  font-size: 0.6rem;
+  color: yellow !important;
+`;
+const Subtitle = styled.h1`
+  font-size: 0.4rem;
+  color: yellow !important;
+`;
+
+const RadioInputScroller = styled.div`
+  padding-left: 15px;
+  padding-top: 10px;
+  width: 100%;
+  margin-top: 1rem;
+  align-items: center;
+  margin-left: 20px;
+  align-items: flex-start;
+  overflow-y: scroll;
+  height: 360px;
+`;
+
+const SpriteAtlasWrapper = styled.div`
+  margin-right: 40px;
+`;
+
+const RadioOptionsWrapper = styled.div`
+  display: flex;
+  align-items: stretch;
+  margin-bottom: 40px;
+`;
+
+const ButtonWrapper = styled.div`
+  display: flex;
+  justify-content: space-around;
+  padding-top: 20px;
+  width: 100%;
+`;

package/src/components/shared/SpriteFromAtlas.tsx

@@ -32,7 +32,10 @@ export const SpriteFromAtlas: React.FC<IProps> = ({
   //! If an item is not showing, remember that you MUST run yarn atlas:copy everytime you add a new item to the atlas (it will sync our public folder atlas with src/atlas).
   //!Due to React's limitations, we cannot import it from the public folder directly!
 
-  const spriteData = atlasJSON.frames[spriteKey];
+  const spriteData =
+    atlasJSON.frames[spriteKey] || atlasJSON.frames['others/no-image.png'];
+
+  if (!spriteData) throw new Error(`Sprite ${spriteKey} not found in atlas!`);
 
   return (
     <Container

package/src/constants/uiDevices.ts

@@ -0,0 +1,5 @@
+import isMobile from 'is-mobile';
+
+export const IS_MOBILE_OR_TABLET = isMobile({
+  tablet: true,
+});

package/src/hooks/useOutsideAlerter.ts

@@ -16,10 +16,10 @@ export function useOutsideClick(ref: any, id: string) {
       }
     }
     // Bind the event listener
-    document.addEventListener('mousedown', handleClickOutside);
+    document.addEventListener('pointerdown', handleClickOutside);
     return () => {
       // Unbind the event listener on clean up
-      document.removeEventListener('mousedown', handleClickOutside);
+      document.removeEventListener('pointerdown', handleClickOutside);
     };
   }, [ref]);
 }

package/src/index.tsx

@@ -1,14 +1,20 @@
 export * from './components/Button';
 export * from './components/Character/CharacterSelection';
 export * from './components/Chat/Chat';
+export * from './components/Chatdeprecated/ChatDeprecated';
 export * from './components/CheckButton';
+export * from './components/CircularController/CircularController';
+export * from './components/CraftBook/CraftBook';
 export * from './components/DraggableContainer';
 export * from './components/Dropdown';
+export * from './components/DropdownSelectorContainer';
 export * from './components/Equipment/EquipmentSet';
 export * from './components/HistoryDialog';
 export * from './components/Input';
+export { ErrorBoundary } from './components/Item/Inventory/ErrorBoundary';
 export * from './components/Item/Inventory/ItemContainer';
 export * from './components/Item/Inventory/ItemSlot';
+export * from './components/itemSelector/ItemSelector';
 export * from './components/ListMenu';
 export * from './components/NPCDialog/NPCDialog';
 export * from './components/NPCDialog/NPCMultiDialog';
@@ -24,6 +30,8 @@ export * from './components/RPGUIRoot';
 export * from './components/shared/SpriteFromAtlas';
 export * from './components/SkillProgressBar';
 export * from './components/SkillsContainer';
+export * from './components/Spellbook/QuickSpells';
+export * from './components/Spellbook/Spellbook';
 export * from './components/TextArea';
 export * from './components/TimeWidget/TimeWidget';
 export * from './components/TradingMenu/TradingMenu';