@rpg-engine/long-bow 0.3.44 → 0.3.46

package/src/components/Chatdeprecated/ChatDeprecated.tsx

@@ -0,0 +1,200 @@
+import { IChatMessage } from '@rpg-engine/shared';
+import dayjs from 'dayjs';
+import React, { useEffect, useState } from 'react';
+import { ErrorBoundary } from 'react-error-boundary';
+import styled from 'styled-components';
+import { uiColors } from '../../constants/uiColors';
+import { uiFonts } from '../../constants/uiFonts';
+import { Button, ButtonTypes } from '../Button';
+import { Input } from '../Input';
+import { RPGUIContainer, RPGUIContainerTypes } from '../RPGUIContainer';
+import { Column } from '../shared/Column';
+
+interface IEmitter {
+  _id: string;
+  name: string;
+}
+export interface IChatDeprecatedProps {
+  chatMessages: IChatMessage[];
+  onSendChatMessage: (message: string) => void;
+  onCloseButton: () => void;
+  onFocus?: () => void;
+  onBlur?: () => void;
+  opacity?: number;
+  width?: string;
+  height?: string;
+}
+
+export const ChatDeprecated: React.FC<IChatDeprecatedProps> = ({
+  chatMessages,
+  onSendChatMessage,
+  opacity = 1,
+  width = '100%',
+  height = '250px',
+  onCloseButton,
+  onFocus,
+  onBlur,
+}) => {
+  const [message, setMessage] = useState('');
+
+  useEffect(() => {
+    scrollChatToBottom();
+  }, []);
+
+  useEffect(() => {
+    scrollChatToBottom();
+  }, [chatMessages]);
+
+  const scrollChatToBottom = () => {
+    const scrollingElement = document.querySelector('.chat-body');
+    if (scrollingElement) {
+      scrollingElement.scrollTop = scrollingElement.scrollHeight;
+    }
+  };
+
+  const handleSubmit = (event: React.SyntheticEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    onSendChatMessage(message);
+    setMessage('');
+  };
+  const getInputValue = (value: string) => {
+    setMessage(value);
+  };
+
+  const onRenderMessageLines = (
+    emitter: IEmitter,
+    createdAt: string | undefined,
+    message: string
+  ) => {
+    return `${dayjs(createdAt || new Date()).format('HH:mm')} ${
+      emitter?.name ? `${emitter.name}: ` : 'Unknown: '
+    } ${message}`;
+  };
+
+  const onRenderChatMessages = (chatMessages: IChatMessage[]) => {
+    return chatMessages?.length ? (
+      chatMessages?.map(({ _id, createdAt, emitter, message }, index) => (
+        <MessageText key={`${_id}_${index}`}>
+          {onRenderMessageLines(emitter, createdAt as string, message)}
+        </MessageText>
+      ))
+    ) : (
+      <MessageText>No messages available.</MessageText>
+    );
+  };
+
+  return (
+    <Container>
+      <CustomContainer
+        type={RPGUIContainerTypes.FramedGrey}
+        width={width}
+        height={height}
+        className="chat-container"
+        opacity={opacity}
+      >
+        <ErrorBoundary fallback={<p>Oops! Your chat has crashed.</p>}>
+          {onCloseButton && (
+            <CloseButton onClick={onCloseButton} onTouchStart={onCloseButton}>
+              X
+            </CloseButton>
+          )}
+          <RPGUIContainer
+            type={RPGUIContainerTypes.FramedGrey}
+            width={'100%'}
+            height={'80%'}
+            className="chat-body dark-background"
+          >
+            {onRenderChatMessages(chatMessages)}
+          </RPGUIContainer>
+
+          <Form onSubmit={handleSubmit}>
+            <Column flex={70}>
+              <CustomInput
+                value={message}
+                id="inputMessage"
+                onChange={e => getInputValue(e.target.value)}
+                height={20}
+                className="chat-input dark-background"
+                type="text"
+                autoComplete="off"
+                onFocus={onFocus}
+                onBlur={onBlur}
+              />
+            </Column>
+            <Column justifyContent="flex-end">
+              <Button
+                buttonType={ButtonTypes.RPGUIButton}
+                id="chat-send-button"
+              >
+                Send
+              </Button>
+            </Column>
+          </Form>
+        </ErrorBoundary>
+      </CustomContainer>
+    </Container>
+  );
+};
+
+const Container = styled.div`
+  position: relative;
+`;
+
+const CloseButton = styled.div`
+  position: absolute;
+  top: 2px;
+  right: 0px;
+  color: white;
+  z-index: 22;
+  font-size: 0.7rem;
+`;
+
+const CustomInput = styled(Input)`
+  height: 30px;
+  width: 100%;
+
+  .rpgui-content .input {
+    min-height: 39px;
+  }
+`;
+
+interface ICustomContainerProps {
+  opacity: number;
+}
+
+const CustomContainer = styled(RPGUIContainer)`
+  display: block;
+
+  opacity: ${(props: ICustomContainerProps) => props.opacity};
+
+  &:hover {
+    opacity: 1;
+  }
+
+  .dark-background {
+    background-color: ${uiColors.darkGray} !important;
+  }
+
+  .chat-body {
+    &.rpgui-container.framed-grey {
+      background: unset;
+    }
+    max-height: 170px;
+    overflow-y: auto;
+  }
+`;
+
+const Form = styled.form`
+  display: flex;
+  width: 100%;
+  justify-content: center;
+  align-items: center;
+`;
+
+const MessageText = styled.p`
+  display: block !important;
+  width: 100%;
+  font-size: ${uiFonts.size.xsmall} !important;
+  overflow-y: auto;
+  margin: 0;
+`;

package/src/components/CheckButton.tsx

@@ -10,7 +10,7 @@ export interface ICheckProps {
   onChange: (selectedValues: IChecklistSelectedValues) => void;
 }
 
-interface IChecklistSelectedValues {
+export interface IChecklistSelectedValues {
   [label: string]: boolean;
 }
 

package/src/components/CircularController/CircularController.tsx

@@ -0,0 +1,162 @@
+import { IRawSpell } from '@rpg-engine/shared';
+import React from 'react';
+import styled from 'styled-components';
+import { uiColors } from '../../constants/uiColors';
+import { SpellShortcut } from '../Spellbook/QuickSpells';
+
+export type CircularControllerProps = {
+  onActionClick: () => void;
+  onCancelClick: () => void;
+  onSpellClick: (spellKey: string) => void;
+  mana: number;
+  spells: IRawSpell[];
+};
+
+export const CircularController: React.FC<CircularControllerProps> = ({
+  onActionClick,
+  onCancelClick,
+  onSpellClick,
+  mana,
+  spells,
+}) => {
+  const onTouchStart = (e: React.TouchEvent<HTMLButtonElement>) => {
+    const target = e.target as HTMLButtonElement;
+    target?.classList.add('active');
+  };
+
+  const onTouchEnd = (
+    action: () => void,
+    e: React.TouchEvent<HTMLButtonElement>
+  ) => {
+    const target = e.target as HTMLButtonElement;
+    setTimeout(() => {
+      target?.classList.remove('active');
+    }, 100);
+    action();
+  };
+
+  return (
+    <ButtonsContainer>
+      <SpellsContainer>
+        {Array.from({ length: 4 }).map((_, i) => {
+          const variant = i === 0 ? 'top' : i === 3 ? 'bottom' : '';
+          const spell = spells[i];
+
+          const onSpellClickBinded = spell
+            ? onSpellClick.bind(null, spell.key)
+            : () => {};
+
+          return (
+            <StyledShortcut
+              key={i}
+              disabled={mana < spell?.manaCost}
+              onTouchStart={onTouchStart}
+              onTouchEnd={onTouchEnd.bind(null, onSpellClickBinded)}
+              className={variant}
+            >
+              <span className="mana">{spell?.key && spell?.manaCost}</span>
+              <span className="magicWords">
+                {spell?.magicWords.split(' ').map(word => word[0])}
+              </span>
+            </StyledShortcut>
+          );
+        })}
+      </SpellsContainer>
+      <Button
+        onTouchStart={onTouchStart}
+        onTouchEnd={onTouchEnd.bind(null, onActionClick)}
+      >
+        <div className="rpgui-icon sword" />
+      </Button>
+
+      <CancelButton
+        onTouchStart={onTouchStart}
+        onTouchEnd={onTouchEnd.bind(null, onCancelClick)}
+      >
+        <span>X</span>
+      </CancelButton>
+    </ButtonsContainer>
+  );
+};
+
+const Button = styled.button`
+  width: 4.3rem;
+  height: 4.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;
+  transition: background-color 0.1s;
+
+  &.active {
+    background-color: ${uiColors.gray};
+  }
+
+  .sword {
+    transform: rotate(-45deg);
+    height: 2.5rem;
+    width: 1.9rem;
+    pointer-events: none;
+  }
+`;
+
+const CancelButton = styled(Button)`
+  width: 3rem;
+  height: 3rem;
+  font-size: 0.8rem;
+
+  span {
+    margin-top: 4px;
+    margin-left: 2px;
+    pointer-events: none;
+  }
+`;
+
+const ButtonsContainer = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+`;
+
+const SpellsContainer = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.4rem;
+  flex-direction: column;
+
+  .top {
+    transform: translate(93%, 25%);
+  }
+
+  .bottom {
+    transform: translate(93%, -25%);
+  }
+`;
+
+const StyledShortcut = styled(SpellShortcut)`
+  width: 2.5rem;
+  height: 2.5rem;
+  transition: background-color 0.1s;
+
+  .mana {
+    font-size: 0.5rem;
+  }
+
+  &:hover,
+  &:focus,
+  &:active {
+    background-color: ${uiColors.lightGray};
+  }
+
+  &.active {
+    background-color: ${uiColors.gray};
+  }
+`;

package/src/components/CraftBook/CraftBook.tsx

@@ -0,0 +1,230 @@
+import { ICraftableItem, ItemSubType } from '@rpg-engine/shared';
+import React, { useState } from 'react';
+import styled from 'styled-components';
+import { Button, ButtonTypes } from '../Button';
+import { DraggableContainer } from '../DraggableContainer';
+import { Dropdown, IOptionsProps } from '../Dropdown';
+import { RPGUIContainerTypes } from '../RPGUIContainer';
+import { SpriteFromAtlas } from '../shared/SpriteFromAtlas';
+
+export interface IItemCraftSelectorProps {
+  atlasJSON: any;
+  atlasIMG: any;
+  onClose: () => void;
+  onSelect: (value: string) => void;
+  onCraftItem: (value: string | undefined) => void;
+  craftablesItems: ICraftableItem[];
+}
+
+export interface ShowMessage {
+  show: boolean;
+  index: number;
+}
+
+export const CraftBook: React.FC<IItemCraftSelectorProps> = ({
+  atlasIMG,
+  atlasJSON,
+  onClose,
+  onSelect,
+  onCraftItem,
+  craftablesItems,
+}) => {
+  let optionsId: number = 0;
+  const [isShown, setIsShown] = useState<ShowMessage>({
+    show: false,
+    index: 200,
+  });
+  const [craftItem, setCraftItem] = useState<string>();
+
+  const getDropdownOptions = () => {
+    const options: IOptionsProps[] = [];
+
+    Object.keys(ItemSubType).forEach(key => {
+      if (key === 'CraftingResource' || key === 'DeadBody') {
+        return; // we can't craft crafting resouces...
+      }
+
+      options.push({
+        id: optionsId,
+        value: key,
+        option: key,
+      });
+      optionsId += 1;
+    });
+
+    return options;
+  };
+
+  const modifyString = (str: string) => {
+    // Split the string by "/" and "."
+    let parts = str.split('/');
+    let fileName = parts[parts.length - 1];
+    parts = fileName.split('.');
+    let name = parts[0];
+
+    // Replace all occurrences of "-" with " "
+    name = name.replace(/-/g, ' ');
+
+    // Uppercase the first word
+    let words = name.split(' ');
+    let firstWord = words[0].slice(0, 1).toUpperCase() + words[0].slice(1);
+    let modifiedWords = [firstWord].concat(words.slice(1));
+    name = modifiedWords.join(' ');
+
+    return name;
+  };
+
+  const handleClick = (value: string) => {
+    setCraftItem(value);
+  };
+
+  return (
+    <DraggableContainer
+      type={RPGUIContainerTypes.Framed}
+      width="500px"
+      cancelDrag=".equipment-container-body .arrow-selector .rpgui-dropdown-imp"
+      onCloseButton={() => {
+        if (onClose) {
+          onClose();
+        }
+      }}
+    >
+      <div style={{ width: '100%' }}>
+        <Title>{'Craftbook'}</Title>
+        <Subtitle>{'Select an item to craft'}</Subtitle>
+        <hr className="golden" />
+      </div>
+      <Dropdown
+        options={getDropdownOptions()}
+        onChange={value => onSelect(value)}
+      />
+      <RadioInputScroller>
+        {craftablesItems?.map((option, index) => (
+          <RadioOptionsWrapper key={index}>
+            <SpriteAtlasWrapper>
+              <SpriteFromAtlas
+                atlasIMG={atlasIMG}
+                atlasJSON={atlasJSON}
+                spriteKey={option.texturePath}
+                imgScale={3}
+                grayScale={!option.canCraft}
+              />
+            </SpriteAtlasWrapper>
+            <div>
+              <input
+                className="rpgui-radio"
+                type="radio"
+                value={option.name}
+                name="test"
+                disabled={!option.canCraft}
+                checked={craftItem === option.key}
+                onChange={() => handleClick(option.key)}
+              />
+              <label
+                onClick={() => {
+                  handleClick(option.key);
+                }}
+                onTouchStart={() => {
+                  setIsShown({ show: true, index: index });
+                }}
+                style={{ display: 'flex', alignItems: 'center' }}
+                onMouseEnter={() => setIsShown({ show: true, index: index })}
+                onMouseLeave={() => setIsShown({ show: false, index: index })}
+              >
+                {modifyString(option.name)}
+              </label>
+
+              {isShown &&
+                isShown.index === index &&
+                option.ingredients.map((option, index) => (
+                  <Recipes key={index}>
+                    <SpriteFromAtlas
+                      atlasIMG={atlasIMG}
+                      atlasJSON={atlasJSON}
+                      spriteKey={option.texturePath}
+                      imgScale={1}
+                    />
+                    <StyledItem>
+                      {modifyString(option.key)} ({option.qty}x)
+                    </StyledItem>
+                  </Recipes>
+                ))}
+            </div>
+          </RadioOptionsWrapper>
+        ))}
+      </RadioInputScroller>
+      <ButtonWrapper>
+        <Button
+          buttonType={ButtonTypes.RPGUIButton}
+          onClick={onClose}
+          onTouchStart={onClose}
+        >
+          Cancel
+        </Button>
+        <Button
+          buttonType={ButtonTypes.RPGUIButton}
+          onClick={() => onCraftItem(craftItem)}
+          onTouchStart={() => onCraftItem(craftItem)}
+        >
+          Craft
+        </Button>
+      </ButtonWrapper>
+    </DraggableContainer>
+  );
+};
+
+const StyledItem = styled.div`
+  margin-left: 10px;
+`;
+
+const Recipes = styled.div`
+  font-size: 0.6rem;
+  color: yellow !important;
+  margin-bottom: 3px;
+  display: flex;
+  align-items: center;
+
+  .sprite-from-atlas-img {
+    top: 0px;
+    left: 0px;
+  }
+`;
+
+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;
+  -webkit-overflow-scrolling: touch;
+`;
+
+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/CraftBook/MockItems.ts

@@ -0,0 +1,46 @@
+import { ICraftableItem } from '@rpg-engine/shared';
+
+export const craftableItems: ICraftableItem[] = [
+  {
+    key: 'bandana',
+    name: 'Bandana',
+    canCraft: true,
+    texturePath: 'accessories/bandana.png',
+    ingredients: [
+      {
+        key: 'leather',
+        name: 'leather',
+        qty: 10,
+        texturePath: 'crafting-resources/leather.png',
+      },
+    ],
+  },
+  {
+    key: 'bandana1',
+    name: 'Bandana',
+    canCraft: true,
+    texturePath: 'accessories/bandana.png',
+    ingredients: [
+      {
+        key: 'leather',
+        name: 'leather',
+        qty: 10,
+        texturePath: 'crafting-resources/leather.png',
+      },
+    ],
+  },
+  {
+    key: 'bandana2',
+    name: 'Bandana',
+    canCraft: true,
+    texturePath: 'accessories/bandana.png',
+    ingredients: [
+      {
+        key: 'leather',
+        name: 'leather',
+        qty: 10,
+        texturePath: 'crafting-resources/leather.png',
+      },
+    ],
+  },
+];

package/src/components/DraggableContainer.tsx

@@ -19,6 +19,7 @@ export interface IDraggableContainerProps {
   cancelDrag?: string;
   onPositionChange?: (position: IPosition) => void;
   onOutsideClick?: () => void;
+  initialPosition?: IPosition;
 }
 
 export const DraggableContainer: React.FC<IDraggableContainerProps> = ({
@@ -34,6 +35,7 @@ export const DraggableContainer: React.FC<IDraggableContainerProps> = ({
   cancelDrag,
   onPositionChange,
   onOutsideClick,
+  initialPosition = { x: 0, y: 0 },
 }) => {
   const draggableRef = useRef(null);
 
@@ -66,6 +68,7 @@ export const DraggableContainer: React.FC<IDraggableContainerProps> = ({
           });
         }
       }}
+      defaultPosition={initialPosition}
     >
       <Container
         ref={draggableRef}
@@ -120,7 +123,7 @@ const CloseButton = styled.div`
   right: 0px;
   color: white;
   z-index: 22;
-  font-size: 0.8rem;
+  font-size: 1.1rem;
 `;
 
 const TitleContainer = styled.div`

package/src/components/Dropdown.tsx

@@ -28,7 +28,7 @@ export const Dropdown: React.FC<IDropdownProps> = ({
   useEffect(() => {
     const firstOption = options[0];
 
-    if (firstOption) {
+    if (firstOption && !selectedValue) {
       setSelectedValue(firstOption.value);
       setSelectedOption(firstOption.option);
     }
@@ -46,6 +46,7 @@ export const Dropdown: React.FC<IDropdownProps> = ({
         id={`dropdown-${dropdownId}`}
         className="rpgui-dropdown-imp rpgui-dropdown-imp-header"
         onClick={() => setOpened(prev => !prev)}
+        onTouchStart={() => setOpened(prev => !prev)}
       >
         <label>▼</label> {selectedOption}
       </DropdownSelect>
@@ -60,6 +61,11 @@ export const Dropdown: React.FC<IDropdownProps> = ({
                 setSelectedOption(option.option);
                 setOpened(false);
               }}
+              onTouchStart={() => {
+                setSelectedValue(option.value);
+                setSelectedOption(option.option);
+                setOpened(false);
+              }}
             >
               {option.option}
             </li>