@rpg-engine/long-bow 0.3.42 → 0.3.44

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (108) hide show
  1. package/dist/components/Abstractions/SlotsContainer.d.ts +0 -1
  2. package/dist/components/Button.d.ts +2 -3
  3. package/dist/components/Chat/Chat.d.ts +2 -12
  4. package/dist/components/CheckButton.d.ts +2 -1
  5. package/dist/components/DraggableContainer.d.ts +0 -1
  6. package/dist/components/Equipment/EquipmentSet.d.ts +0 -8
  7. package/dist/components/Input.d.ts +0 -1
  8. package/dist/components/Item/Inventory/ItemContainer.d.ts +0 -12
  9. package/dist/components/Item/Inventory/ItemSlot.d.ts +0 -9
  10. package/dist/components/NPCDialog/NPCDialogText.d.ts +2 -4
  11. package/dist/components/RangeSlider.d.ts +0 -1
  12. package/dist/index.d.ts +0 -8
  13. package/dist/long-bow.cjs.development.js +515 -7464
  14. package/dist/long-bow.cjs.development.js.map +1 -1
  15. package/dist/long-bow.cjs.production.min.js +1 -1
  16. package/dist/long-bow.cjs.production.min.js.map +1 -1
  17. package/dist/long-bow.esm.js +520 -7460
  18. package/dist/long-bow.esm.js.map +1 -1
  19. package/dist/mocks/equipmentSet.mocks.d.ts +2 -15
  20. package/dist/mocks/skills.mocks.d.ts +121 -2
  21. package/package.json +2 -5
  22. package/src/components/Abstractions/SlotsContainer.tsx +0 -3
  23. package/src/components/Button.tsx +8 -18
  24. package/src/components/Chat/Chat.tsx +105 -105
  25. package/src/components/CheckButton.tsx +1 -1
  26. package/src/components/DraggableContainer.tsx +1 -4
  27. package/src/components/Dropdown.tsx +1 -7
  28. package/src/components/Equipment/EquipmentSet.tsx +0 -46
  29. package/src/components/Input.tsx +2 -6
  30. package/src/components/Item/Inventory/ItemContainer.tsx +6 -104
  31. package/src/components/Item/Inventory/ItemSlot.tsx +34 -234
  32. package/src/components/NPCDialog/NPCDialog.tsx +28 -4
  33. package/src/components/NPCDialog/NPCDialogText.tsx +15 -75
  34. package/src/components/RangeSlider.tsx +14 -37
  35. package/src/components/SkillsContainer.tsx +1 -1
  36. package/src/components/TimeWidget/TimeWidget.tsx +0 -1
  37. package/src/components/TradingMenu/TradingItemRow.tsx +6 -43
  38. package/src/components/TradingMenu/TradingMenu.tsx +1 -1
  39. package/src/components/shared/SpriteFromAtlas.tsx +1 -4
  40. package/src/hooks/useOutsideAlerter.ts +2 -2
  41. package/src/index.tsx +0 -8
  42. package/src/mocks/atlas/items/items.json +314 -6086
  43. package/src/mocks/atlas/items/items.png +0 -0
  44. package/src/mocks/equipmentSet.mocks.ts +4 -49
  45. package/src/mocks/itemContainer.mocks.ts +6 -54
  46. package/src/mocks/skills.mocks.ts +2 -8
  47. package/src/stories/Chat.stories.tsx +3 -20
  48. package/src/stories/EquipmentSet.stories.tsx +0 -10
  49. package/src/stories/ItemContainer.stories.tsx +15 -84
  50. package/src/stories/RangeSlider.stories.tsx +9 -10
  51. package/dist/components/Chatdeprecated/ChatDeprecated.d.ts +0 -13
  52. package/dist/components/CircularController/CircularController.d.ts +0 -10
  53. package/dist/components/CraftBook/CraftBook.d.ts +0 -15
  54. package/dist/components/CraftBook/MockItems.d.ts +0 -2
  55. package/dist/components/DropdownSelectorContainer.d.ts +0 -13
  56. package/dist/components/Item/Inventory/ItemQuantitySelector.d.ts +0 -7
  57. package/dist/components/RadioInput/RadioButton.d.ts +0 -8
  58. package/dist/components/RadioInput/RadioInput.d.ts +0 -13
  59. package/dist/components/RadioInput/instruments.d.ts +0 -4
  60. package/dist/components/Spellbook/QuickSpells.d.ts +0 -10
  61. package/dist/components/Spellbook/Spell.d.ts +0 -11
  62. package/dist/components/Spellbook/Spellbook.d.ts +0 -15
  63. package/dist/components/Spellbook/SpellbookShortcuts.d.ts +0 -10
  64. package/dist/components/Spellbook/constants.d.ts +0 -3
  65. package/dist/components/Spellbook/mockSpells.d.ts +0 -2
  66. package/dist/components/itemSelector/ItemSelector.d.ts +0 -14
  67. package/dist/constants/uiDevices.d.ts +0 -1
  68. package/dist/stories/ChatDeprecated.stories.d.ts +0 -5
  69. package/dist/stories/CircullarController.stories.d.ts +0 -5
  70. package/dist/stories/CraftBook.stories.d.ts +0 -4
  71. package/dist/stories/DropdownSelectorContainer.stories.d.ts +0 -5
  72. package/dist/stories/ItemQuantitySelector.stories.d.ts +0 -5
  73. package/dist/stories/ItemSelector.stories.d.ts +0 -4
  74. package/dist/stories/QuickSpells.stories.d.ts +0 -5
  75. package/dist/stories/RadioInput.stories.d.ts +0 -5
  76. package/dist/stories/Spellbook.stories.d.ts +0 -5
  77. package/src/.DS_Store +0 -0
  78. package/src/components/Chatdeprecated/ChatDeprecated.tsx +0 -200
  79. package/src/components/CircularController/CircularController.tsx +0 -162
  80. package/src/components/CraftBook/CraftBook.tsx +0 -230
  81. package/src/components/CraftBook/MockItems.ts +0 -46
  82. package/src/components/DropdownSelectorContainer.tsx +0 -42
  83. package/src/components/Item/Inventory/ItemQuantitySelector.tsx +0 -142
  84. package/src/components/NPCDialog/.DS_Store +0 -0
  85. package/src/components/NPCDialog/img/.DS_Store +0 -0
  86. package/src/components/NPCDialog/img/press-button.gif +0 -0
  87. package/src/components/RadioInput/RadioButton.tsx +0 -98
  88. package/src/components/RadioInput/RadioInput.tsx +0 -99
  89. package/src/components/RadioInput/instruments.ts +0 -16
  90. package/src/components/Spellbook/QuickSpells.tsx +0 -120
  91. package/src/components/Spellbook/Spell.tsx +0 -201
  92. package/src/components/Spellbook/Spellbook.tsx +0 -144
  93. package/src/components/Spellbook/SpellbookShortcuts.tsx +0 -77
  94. package/src/components/Spellbook/constants.ts +0 -12
  95. package/src/components/Spellbook/mockSpells.ts +0 -60
  96. package/src/components/itemSelector/ItemSelector.tsx +0 -136
  97. package/src/constants/uiDevices.ts +0 -5
  98. package/src/mocks/.DS_Store +0 -0
  99. package/src/mocks/atlas/.DS_Store +0 -0
  100. package/src/stories/ChatDeprecated.stories.tsx +0 -170
  101. package/src/stories/CircullarController.stories.tsx +0 -33
  102. package/src/stories/CraftBook.stories.tsx +0 -40
  103. package/src/stories/DropdownSelectorContainer.stories.tsx +0 -41
  104. package/src/stories/ItemQuantitySelector.stories.tsx +0 -26
  105. package/src/stories/ItemSelector.stories.tsx +0 -77
  106. package/src/stories/QuickSpells.stories.tsx +0 -38
  107. package/src/stories/RadioInput.stories.tsx +0 -35
  108. package/src/stories/Spellbook.stories.tsx +0 -107
@@ -1,11 +0,0 @@
1
- import { IRawSpell } from '@rpg-engine/shared';
2
- import React from 'react';
3
- interface Props extends IRawSpell {
4
- charMana: number;
5
- charMagicLevel: number;
6
- onClick?: (spellKey: string) => void;
7
- isSettingShortcut?: boolean;
8
- spellKey: string;
9
- }
10
- export declare const Spell: React.FC<Props>;
11
- export {};
@@ -1,15 +0,0 @@
1
- import { IRawSpell } from '@rpg-engine/shared';
2
- import React from 'react';
3
- export interface ISpellbookProps {
4
- onClose?: () => void;
5
- onInputFocus?: () => void;
6
- onInputBlur?: () => void;
7
- spells: IRawSpell[];
8
- magicLevel: number;
9
- mana: number;
10
- onSpellClick: (spellKey: string) => void;
11
- setSpellShortcut: (key: string, index: number) => void;
12
- spellShortcuts: IRawSpell[];
13
- removeSpellShortcut: (index: number) => void;
14
- }
15
- export declare const Spellbook: React.FC<ISpellbookProps>;
@@ -1,10 +0,0 @@
1
- import { IRawSpell } from '@rpg-engine/shared';
2
- import React from 'react';
3
- declare type Props = {
4
- setSettingShortcutIndex: (index: number) => void;
5
- settingShortcutIndex: number;
6
- shortcuts: IRawSpell[];
7
- removeShortcut: (index: number) => void;
8
- };
9
- export declare const SpellbookShortcuts: React.FC<Props>;
10
- export {};
@@ -1,3 +0,0 @@
1
- import { IRawSpell } from '@rpg-engine/shared';
2
- export declare const SPELL_SHORTCUTS_STORAGE_KEY = "spellShortcuts";
3
- export declare const defaultSpellShortcut: IRawSpell;
@@ -1,2 +0,0 @@
1
- import { IRawSpell } from '@rpg-engine/shared';
2
- export declare const mockSpells: IRawSpell[];
@@ -1,14 +0,0 @@
1
- import React from 'react';
2
- export interface IOptionsItemSelectorProps {
3
- name: string;
4
- description?: string;
5
- imageKey: string;
6
- }
7
- export interface IItemSelectorProps {
8
- atlasJSON: any;
9
- atlasIMG: any;
10
- options: IOptionsItemSelectorProps[];
11
- onClose: () => void;
12
- onSelect: (value: string) => void;
13
- }
14
- export declare const ItemSelector: React.FC<IItemSelectorProps>;
@@ -1 +0,0 @@
1
- export declare const IS_MOBILE_OR_TABLET: boolean;
@@ -1,5 +0,0 @@
1
- import { IChatMessage } from '@rpg-engine/shared';
2
- import { Meta } from '@storybook/react';
3
- declare const meta: Meta;
4
- export default meta;
5
- export declare const Default: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactFramework, IChatMessage>;
@@ -1,5 +0,0 @@
1
- import { Meta } from '@storybook/react';
2
- import { CircularControllerProps } from '../components/CircularController/CircularController';
3
- declare const meta: Meta;
4
- export default meta;
5
- export declare const Default: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactFramework, CircularControllerProps>;
@@ -1,4 +0,0 @@
1
- import { Meta } from '@storybook/react';
2
- declare const meta: Meta;
3
- export default meta;
4
- export declare const Default: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactFramework, import("@storybook/react").Args>;
@@ -1,5 +0,0 @@
1
- import { Meta } from '@storybook/react';
2
- import { IDropdownSelectorContainer } from '../components/DropdownSelectorContainer';
3
- declare const meta: Meta;
4
- export default meta;
5
- export declare const Default: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactFramework, IDropdownSelectorContainer>;
@@ -1,5 +0,0 @@
1
- import { Meta } from '@storybook/react';
2
- import { IItemQuantitySelectorProps } from '../components/Item/Inventory/ItemQuantitySelector';
3
- declare const meta: Meta;
4
- export default meta;
5
- export declare const Default: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactFramework, IItemQuantitySelectorProps>;
@@ -1,4 +0,0 @@
1
- import { Meta } from '@storybook/react';
2
- declare const meta: Meta;
3
- export default meta;
4
- export declare const Default: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactFramework, import("@storybook/react").Args>;
@@ -1,5 +0,0 @@
1
- import { Meta } from '@storybook/react';
2
- import { QuickSpellsProps } from '../components/Spellbook/QuickSpells';
3
- declare const meta: Meta;
4
- export default meta;
5
- export declare const Default: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactFramework, QuickSpellsProps>;
@@ -1,5 +0,0 @@
1
- import { Meta } from '@storybook/react';
2
- import { IRadioInput } from '../components/RadioInput/RadioInput';
3
- declare const meta: Meta;
4
- export default meta;
5
- export declare const RadioInputElement: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactFramework, IRadioInput>;
@@ -1,5 +0,0 @@
1
- import { Meta } from '@storybook/react';
2
- import { ISpellbookProps } from '../components/Spellbook/Spellbook';
3
- declare const meta: Meta;
4
- export default meta;
5
- export declare const Default: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactFramework, ISpellbookProps>;
package/src/.DS_Store DELETED
Binary file
@@ -1,200 +0,0 @@
1
- import { IChatMessage } from '@rpg-engine/shared';
2
- import dayjs from 'dayjs';
3
- import React, { useEffect, useState } from 'react';
4
- import { ErrorBoundary } from 'react-error-boundary';
5
- import styled from 'styled-components';
6
- import { uiColors } from '../../constants/uiColors';
7
- import { uiFonts } from '../../constants/uiFonts';
8
- import { Button, ButtonTypes } from '../Button';
9
- import { Input } from '../Input';
10
- import { RPGUIContainer, RPGUIContainerTypes } from '../RPGUIContainer';
11
- import { Column } from '../shared/Column';
12
-
13
- interface IEmitter {
14
- _id: string;
15
- name: string;
16
- }
17
- export interface IChatDeprecatedProps {
18
- chatMessages: IChatMessage[];
19
- onSendChatMessage: (message: string) => void;
20
- onCloseButton: () => void;
21
- onFocus?: () => void;
22
- onBlur?: () => void;
23
- opacity?: number;
24
- width?: string;
25
- height?: string;
26
- }
27
-
28
- export const ChatDeprecated: React.FC<IChatDeprecatedProps> = ({
29
- chatMessages,
30
- onSendChatMessage,
31
- opacity = 1,
32
- width = '100%',
33
- height = '250px',
34
- onCloseButton,
35
- onFocus,
36
- onBlur,
37
- }) => {
38
- const [message, setMessage] = useState('');
39
-
40
- useEffect(() => {
41
- scrollChatToBottom();
42
- }, []);
43
-
44
- useEffect(() => {
45
- scrollChatToBottom();
46
- }, [chatMessages]);
47
-
48
- const scrollChatToBottom = () => {
49
- const scrollingElement = document.querySelector('.chat-body');
50
- if (scrollingElement) {
51
- scrollingElement.scrollTop = scrollingElement.scrollHeight;
52
- }
53
- };
54
-
55
- const handleSubmit = (event: React.SyntheticEvent<HTMLFormElement>) => {
56
- event.preventDefault();
57
- onSendChatMessage(message);
58
- setMessage('');
59
- };
60
- const getInputValue = (value: string) => {
61
- setMessage(value);
62
- };
63
-
64
- const onRenderMessageLines = (
65
- emitter: IEmitter,
66
- createdAt: string | undefined,
67
- message: string
68
- ) => {
69
- return `${dayjs(createdAt || new Date()).format('HH:mm')} ${
70
- emitter?.name ? `${emitter.name}: ` : 'Unknown: '
71
- } ${message}`;
72
- };
73
-
74
- const onRenderChatMessages = (chatMessages: IChatMessage[]) => {
75
- return chatMessages?.length ? (
76
- chatMessages?.map(({ _id, createdAt, emitter, message }, index) => (
77
- <MessageText key={`${_id}_${index}`}>
78
- {onRenderMessageLines(emitter, createdAt as string, message)}
79
- </MessageText>
80
- ))
81
- ) : (
82
- <MessageText>No messages available.</MessageText>
83
- );
84
- };
85
-
86
- return (
87
- <Container>
88
- <CustomContainer
89
- type={RPGUIContainerTypes.FramedGrey}
90
- width={width}
91
- height={height}
92
- className="chat-container"
93
- opacity={opacity}
94
- >
95
- <ErrorBoundary fallback={<p>Oops! Your chat has crashed.</p>}>
96
- {onCloseButton && (
97
- <CloseButton onClick={onCloseButton} onTouchStart={onCloseButton}>
98
- X
99
- </CloseButton>
100
- )}
101
- <RPGUIContainer
102
- type={RPGUIContainerTypes.FramedGrey}
103
- width={'100%'}
104
- height={'80%'}
105
- className="chat-body dark-background"
106
- >
107
- {onRenderChatMessages(chatMessages)}
108
- </RPGUIContainer>
109
-
110
- <Form onSubmit={handleSubmit}>
111
- <Column flex={70}>
112
- <CustomInput
113
- value={message}
114
- id="inputMessage"
115
- onChange={e => getInputValue(e.target.value)}
116
- height={20}
117
- className="chat-input dark-background"
118
- type="text"
119
- autoComplete="off"
120
- onFocus={onFocus}
121
- onBlur={onBlur}
122
- />
123
- </Column>
124
- <Column justifyContent="flex-end">
125
- <Button
126
- buttonType={ButtonTypes.RPGUIButton}
127
- id="chat-send-button"
128
- >
129
- Send
130
- </Button>
131
- </Column>
132
- </Form>
133
- </ErrorBoundary>
134
- </CustomContainer>
135
- </Container>
136
- );
137
- };
138
-
139
- const Container = styled.div`
140
- position: relative;
141
- `;
142
-
143
- const CloseButton = styled.div`
144
- position: absolute;
145
- top: 2px;
146
- right: 0px;
147
- color: white;
148
- z-index: 22;
149
- font-size: 0.7rem;
150
- `;
151
-
152
- const CustomInput = styled(Input)`
153
- height: 30px;
154
- width: 100%;
155
-
156
- .rpgui-content .input {
157
- min-height: 39px;
158
- }
159
- `;
160
-
161
- interface ICustomContainerProps {
162
- opacity: number;
163
- }
164
-
165
- const CustomContainer = styled(RPGUIContainer)`
166
- display: block;
167
-
168
- opacity: ${(props: ICustomContainerProps) => props.opacity};
169
-
170
- &:hover {
171
- opacity: 1;
172
- }
173
-
174
- .dark-background {
175
- background-color: ${uiColors.darkGray} !important;
176
- }
177
-
178
- .chat-body {
179
- &.rpgui-container.framed-grey {
180
- background: unset;
181
- }
182
- max-height: 170px;
183
- overflow-y: auto;
184
- }
185
- `;
186
-
187
- const Form = styled.form`
188
- display: flex;
189
- width: 100%;
190
- justify-content: center;
191
- align-items: center;
192
- `;
193
-
194
- const MessageText = styled.p`
195
- display: block !important;
196
- width: 100%;
197
- font-size: ${uiFonts.size.xsmall} !important;
198
- overflow-y: auto;
199
- margin: 0;
200
- `;
@@ -1,162 +0,0 @@
1
- import { IRawSpell } from '@rpg-engine/shared';
2
- import React from 'react';
3
- import styled from 'styled-components';
4
- import { uiColors } from '../../constants/uiColors';
5
- import { SpellShortcut } from '../Spellbook/QuickSpells';
6
-
7
- export type CircularControllerProps = {
8
- onActionClick: () => void;
9
- onCancelClick: () => void;
10
- onSpellClick: (spellKey: string) => void;
11
- mana: number;
12
- spells: IRawSpell[];
13
- };
14
-
15
- export const CircularController: React.FC<CircularControllerProps> = ({
16
- onActionClick,
17
- onCancelClick,
18
- onSpellClick,
19
- mana,
20
- spells,
21
- }) => {
22
- const onTouchStart = (e: React.TouchEvent<HTMLButtonElement>) => {
23
- const target = e.target as HTMLButtonElement;
24
- target?.classList.add('active');
25
- };
26
-
27
- const onTouchEnd = (
28
- action: () => void,
29
- e: React.TouchEvent<HTMLButtonElement>
30
- ) => {
31
- const target = e.target as HTMLButtonElement;
32
- setTimeout(() => {
33
- target?.classList.remove('active');
34
- }, 100);
35
- action();
36
- };
37
-
38
- return (
39
- <ButtonsContainer>
40
- <SpellsContainer>
41
- {Array.from({ length: 4 }).map((_, i) => {
42
- const variant = i === 0 ? 'top' : i === 3 ? 'bottom' : '';
43
- const spell = spells[i];
44
-
45
- const onSpellClickBinded = spell
46
- ? onSpellClick.bind(null, spell.key)
47
- : () => {};
48
-
49
- return (
50
- <StyledShortcut
51
- key={i}
52
- disabled={mana < spell?.manaCost}
53
- onTouchStart={onTouchStart}
54
- onTouchEnd={onTouchEnd.bind(null, onSpellClickBinded)}
55
- className={variant}
56
- >
57
- <span className="mana">{spell?.key && spell?.manaCost}</span>
58
- <span className="magicWords">
59
- {spell?.magicWords.split(' ').map(word => word[0])}
60
- </span>
61
- </StyledShortcut>
62
- );
63
- })}
64
- </SpellsContainer>
65
- <Button
66
- onTouchStart={onTouchStart}
67
- onTouchEnd={onTouchEnd.bind(null, onActionClick)}
68
- >
69
- <div className="rpgui-icon sword" />
70
- </Button>
71
-
72
- <CancelButton
73
- onTouchStart={onTouchStart}
74
- onTouchEnd={onTouchEnd.bind(null, onCancelClick)}
75
- >
76
- <span>X</span>
77
- </CancelButton>
78
- </ButtonsContainer>
79
- );
80
- };
81
-
82
- const Button = styled.button`
83
- width: 4.3rem;
84
- height: 4.3rem;
85
- background-color: ${uiColors.lightGray};
86
- border: 2px solid ${uiColors.darkGray};
87
- border-radius: 50%;
88
- text-transform: uppercase;
89
- font-size: 0.7rem;
90
- font-weight: bold;
91
- display: flex;
92
- align-items: center;
93
- justify-content: center;
94
- position: relative;
95
- transition: background-color 0.1s;
96
-
97
- &.active {
98
- background-color: ${uiColors.gray};
99
- }
100
-
101
- .sword {
102
- transform: rotate(-45deg);
103
- height: 2.5rem;
104
- width: 1.9rem;
105
- pointer-events: none;
106
- }
107
- `;
108
-
109
- const CancelButton = styled(Button)`
110
- width: 3rem;
111
- height: 3rem;
112
- font-size: 0.8rem;
113
-
114
- span {
115
- margin-top: 4px;
116
- margin-left: 2px;
117
- pointer-events: none;
118
- }
119
- `;
120
-
121
- const ButtonsContainer = styled.div`
122
- display: flex;
123
- align-items: center;
124
- justify-content: center;
125
- gap: 0.5rem;
126
- `;
127
-
128
- const SpellsContainer = styled.div`
129
- display: flex;
130
- align-items: center;
131
- justify-content: center;
132
- gap: 0.4rem;
133
- flex-direction: column;
134
-
135
- .top {
136
- transform: translate(93%, 25%);
137
- }
138
-
139
- .bottom {
140
- transform: translate(93%, -25%);
141
- }
142
- `;
143
-
144
- const StyledShortcut = styled(SpellShortcut)`
145
- width: 2.5rem;
146
- height: 2.5rem;
147
- transition: background-color 0.1s;
148
-
149
- .mana {
150
- font-size: 0.5rem;
151
- }
152
-
153
- &:hover,
154
- &:focus,
155
- &:active {
156
- background-color: ${uiColors.lightGray};
157
- }
158
-
159
- &.active {
160
- background-color: ${uiColors.gray};
161
- }
162
- `;