@rpg-engine/long-bow 0.3.96 → 0.3.98

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 (182) hide show
  1. package/LICENSE +20 -20
  2. package/README.md +181 -181
  3. package/dist/components/CircularController/CircularController.d.ts +1 -0
  4. package/dist/components/Shortcuts/Shortcuts.d.ts +1 -0
  5. package/dist/components/Shortcuts/useShortcutCooldown.d.ts +4 -0
  6. package/dist/components/Spellbook/Spell.d.ts +5 -4
  7. package/dist/components/Spellbook/Spellbook.d.ts +3 -2
  8. package/dist/components/Spellbook/cards/MobileSpellTooltip.d.ts +15 -0
  9. package/dist/components/Spellbook/cards/SpellInfo.d.ts +7 -0
  10. package/dist/components/Spellbook/cards/SpellInfoDisplay.d.ts +7 -0
  11. package/dist/components/Spellbook/cards/SpellInfoWrapper.d.ts +9 -0
  12. package/dist/components/Spellbook/cards/SpellTooltip.d.ts +6 -0
  13. package/dist/components/Spellbook/mockSpells.d.ts +2 -2
  14. package/dist/libs/CastingTypeHelper.d.ts +1 -0
  15. package/dist/long-bow.cjs.development.js +1525 -1255
  16. package/dist/long-bow.cjs.development.js.map +1 -1
  17. package/dist/long-bow.cjs.production.min.js +1 -1
  18. package/dist/long-bow.cjs.production.min.js.map +1 -1
  19. package/dist/long-bow.esm.js +1531 -1261
  20. package/dist/long-bow.esm.js.map +1 -1
  21. package/dist/stories/SpellInfoDisplay.stories.d.ts +8 -0
  22. package/package.json +100 -100
  23. package/src/.DS_Store +0 -0
  24. package/src/components/.DS_Store +0 -0
  25. package/src/components/Abstractions/ModalPortal.tsx +22 -22
  26. package/src/components/Abstractions/SlotsContainer.tsx +62 -62
  27. package/src/components/Arrow/SelectArrow.tsx +69 -69
  28. package/src/components/Arrow/img/arrow01-left-clicked.png +0 -0
  29. package/src/components/Arrow/img/arrow01-left.png +0 -0
  30. package/src/components/Arrow/img/arrow01-right-clicked.png +0 -0
  31. package/src/components/Arrow/img/arrow01-right.png +0 -0
  32. package/src/components/Arrow/img/arrow02-left-clicked.png +0 -0
  33. package/src/components/Arrow/img/arrow02-left.png +0 -0
  34. package/src/components/Arrow/img/arrow02-right-clicked.png +0 -0
  35. package/src/components/Arrow/img/arrow02-right.png +0 -0
  36. package/src/components/Button.tsx +40 -40
  37. package/src/components/Character/CharacterSelection.tsx +98 -98
  38. package/src/components/CharacterStatus/CharacterStatus.tsx +120 -120
  39. package/src/components/Chat/Chat.tsx +196 -196
  40. package/src/components/Chatdeprecated/ChatDeprecated.tsx +198 -198
  41. package/src/components/CheckButton.tsx +65 -65
  42. package/src/components/CircularController/CircularController.tsx +282 -249
  43. package/src/components/CraftBook/CraftBook.tsx +286 -286
  44. package/src/components/CraftBook/CraftingRecipe.tsx +161 -161
  45. package/src/components/CraftBook/MockItems.ts +101 -101
  46. package/src/components/DraggableContainer.tsx +180 -180
  47. package/src/components/DropdownSelectorContainer.tsx +42 -42
  48. package/src/components/Equipment/EquipmentSet.tsx +199 -199
  49. package/src/components/HistoryDialog.tsx +104 -104
  50. package/src/components/Input.tsx +15 -15
  51. package/src/components/InputRadio.tsx +41 -41
  52. package/src/components/Item/Cards/ItemInfo.tsx +298 -288
  53. package/src/components/Item/Cards/ItemInfoDisplay.tsx +135 -135
  54. package/src/components/Item/Cards/ItemInfoWrapper.tsx +62 -62
  55. package/src/components/Item/Cards/ItemTooltip.tsx +83 -83
  56. package/src/components/Item/Cards/MobileItemTooltip.tsx +149 -149
  57. package/src/components/Item/Inventory/ErrorBoundary.tsx +42 -42
  58. package/src/components/Item/Inventory/ItemContainer.tsx +231 -231
  59. package/src/components/Item/Inventory/ItemContainerTypes.ts +6 -6
  60. package/src/components/Item/Inventory/ItemQuantitySelector.tsx +138 -138
  61. package/src/components/Item/Inventory/ItemSlot.tsx +580 -580
  62. package/src/components/Item/Inventory/itemContainerHelper.ts +175 -175
  63. package/src/components/ListMenu.tsx +63 -63
  64. package/src/components/Marketplace/Marketplace.tsx +132 -132
  65. package/src/components/Marketplace/MarketplaceRows.tsx +171 -171
  66. package/src/components/Marketplace/__mocks__/index.tsx +65 -65
  67. package/src/components/Multitab/Tab.tsx +66 -66
  68. package/src/components/Multitab/TabBody.tsx +13 -13
  69. package/src/components/Multitab/TabsContainer.tsx +97 -97
  70. package/src/components/NPCDialog/.DS_Store +0 -0
  71. package/src/components/NPCDialog/NPCDialog.tsx +121 -121
  72. package/src/components/NPCDialog/NPCDialogText.tsx +113 -113
  73. package/src/components/NPCDialog/NPCMultiDialog.tsx +159 -159
  74. package/src/components/NPCDialog/QuestionDialog/QuestionDialog.tsx +237 -237
  75. package/src/components/NPCDialog/img/.DS_Store +0 -0
  76. package/src/components/ProgressBar.tsx +92 -92
  77. package/src/components/PropertySelect/PropertySelect.tsx +106 -106
  78. package/src/components/QuestInfo/QuestInfo.tsx +233 -233
  79. package/src/components/QuestList.tsx +135 -135
  80. package/src/components/RPGUIContainer.tsx +47 -47
  81. package/src/components/RPGUIForceRenderStart.tsx +45 -45
  82. package/src/components/RPGUIRoot.tsx +14 -14
  83. package/src/components/RadioButton.tsx +53 -53
  84. package/src/components/RadioInput/RadioButton.tsx +96 -96
  85. package/src/components/RadioInput/RadioInput.tsx +102 -102
  86. package/src/components/RadioInput/instruments.ts +15 -15
  87. package/src/components/RangeSlider.tsx +78 -78
  88. package/src/components/RelativeListMenu.tsx +90 -90
  89. package/src/components/ScrollList.tsx +79 -79
  90. package/src/components/Shortcuts/Shortcuts.tsx +192 -153
  91. package/src/components/Shortcuts/ShortcutsSetter.tsx +139 -139
  92. package/src/components/Shortcuts/SingleShortcut.ts +82 -62
  93. package/src/components/Shortcuts/useShortcutCooldown.ts +24 -0
  94. package/src/components/SimpleProgressBar.tsx +62 -62
  95. package/src/components/SkillProgressBar.tsx +133 -133
  96. package/src/components/SkillsContainer.tsx +206 -206
  97. package/src/components/Spellbook/Spell.tsx +236 -201
  98. package/src/components/Spellbook/Spellbook.tsx +159 -153
  99. package/src/components/Spellbook/cards/MobileSpellTooltip.tsx +137 -0
  100. package/src/components/Spellbook/cards/SpellInfo.tsx +132 -0
  101. package/src/components/Spellbook/cards/SpellInfoDisplay.tsx +31 -0
  102. package/src/components/Spellbook/cards/SpellInfoWrapper.tsx +48 -0
  103. package/src/components/Spellbook/cards/SpellTooltip.tsx +70 -0
  104. package/src/components/Spellbook/constants.ts +8 -8
  105. package/src/components/Spellbook/mockSpells.ts +85 -60
  106. package/src/components/StaticBook/StaticBook.tsx +103 -103
  107. package/src/components/TextArea.tsx +11 -11
  108. package/src/components/TimeWidget/DayNightPeriod/DayNightPeriod.tsx +35 -35
  109. package/src/components/TimeWidget/TimeWidget.tsx +65 -65
  110. package/src/components/TradingMenu/TradingItemRow.tsx +199 -199
  111. package/src/components/TradingMenu/TradingMenu.tsx +219 -219
  112. package/src/components/TradingMenu/items.mock.ts +48 -48
  113. package/src/components/Truncate.tsx +25 -25
  114. package/src/components/itemSelector/ItemSelector.tsx +136 -136
  115. package/src/components/shared/Column.tsx +16 -16
  116. package/src/components/shared/Ellipsis.tsx +68 -68
  117. package/src/components/shared/SpriteFromAtlas.tsx +104 -104
  118. package/src/components/typography/DynamicText.tsx +49 -49
  119. package/src/constants/uiColors.ts +20 -20
  120. package/src/constants/uiDevices.ts +3 -3
  121. package/src/constants/uiFonts.ts +12 -12
  122. package/src/hooks/useEventListener.ts +21 -21
  123. package/src/hooks/useOutsideAlerter.ts +25 -25
  124. package/src/index.tsx +42 -42
  125. package/src/libs/CastingTypeHelper.ts +8 -0
  126. package/src/libs/StringHelpers.ts +3 -3
  127. package/src/libs/itemCounter.ts +21 -21
  128. package/src/mocks/.DS_Store +0 -0
  129. package/src/mocks/atlas/.DS_Store +0 -0
  130. package/src/mocks/atlas/entities/entities.json +20215 -20215
  131. package/src/mocks/atlas/icons/icons.json +735 -735
  132. package/src/mocks/atlas/items/items.json +12086 -12086
  133. package/src/mocks/equipmentSet.mocks.ts +391 -391
  134. package/src/mocks/itemContainer.mocks.ts +605 -605
  135. package/src/mocks/skills.mocks.ts +128 -128
  136. package/src/stories/Arrow.stories.tsx +26 -26
  137. package/src/stories/Button.stories.tsx +36 -36
  138. package/src/stories/CharacterSelection.stories.tsx +44 -44
  139. package/src/stories/CharacterStatus.stories.tsx +29 -29
  140. package/src/stories/Chat.stories.tsx +187 -187
  141. package/src/stories/ChatDeprecated.stories.tsx +170 -170
  142. package/src/stories/CheckButton.stories.tsx +48 -48
  143. package/src/stories/CircullarController.stories.tsx +37 -37
  144. package/src/stories/CraftBook.stories.tsx +42 -42
  145. package/src/stories/DayNightPeriod.stories.tsx +27 -27
  146. package/src/stories/DraggableContainer.stories.tsx +28 -28
  147. package/src/stories/Dropdown.stories.tsx +46 -46
  148. package/src/stories/DropdownSelectorContainer.stories.tsx +41 -41
  149. package/src/stories/EquipmentSet.stories.tsx +65 -65
  150. package/src/stories/HistoryDialog.stories.tsx +61 -61
  151. package/src/stories/ItemContainer.stories.tsx +201 -201
  152. package/src/stories/ItemInfoDisplay.stories.tsx +33 -33
  153. package/src/stories/ItemQuantitySelector.stories.tsx +26 -26
  154. package/src/stories/ItemSelector.stories.tsx +77 -77
  155. package/src/stories/ItemTradingComponent.stories.tsx +35 -35
  156. package/src/stories/ListMenu.stories.tsx +56 -56
  157. package/src/stories/Marketplace.stories.tsx +42 -42
  158. package/src/stories/MarketplaceRows.stories.tsx +28 -28
  159. package/src/stories/Multitab.stories.tsx +51 -51
  160. package/src/stories/NPCDialog.stories.tsx +130 -130
  161. package/src/stories/NPCMultiDialog.stories.tsx +71 -71
  162. package/src/stories/ProgressBar.stories.tsx +23 -23
  163. package/src/stories/PropertySelect.stories.tsx +40 -40
  164. package/src/stories/QuestInfo.stories.tsx +107 -107
  165. package/src/stories/QuestList.stories.tsx +82 -82
  166. package/src/stories/RPGUIContainers.stories.tsx +42 -42
  167. package/src/stories/RadioButton.stories.tsx +49 -49
  168. package/src/stories/RadioInput.stories.tsx +34 -34
  169. package/src/stories/RangeSlider.stories.tsx +64 -64
  170. package/src/stories/ScrollList.stories.tsx +85 -85
  171. package/src/stories/Shortcuts.stories.tsx +39 -39
  172. package/src/stories/SimpleProgressBar.stories.tsx +22 -22
  173. package/src/stories/SkillProgressBar.stories.tsx +34 -34
  174. package/src/stories/SkillsContainer.stories.tsx +35 -35
  175. package/src/stories/SpellInfoDisplay.stories.tsx +27 -0
  176. package/src/stories/Spellbook.stories.tsx +104 -104
  177. package/src/stories/StaticBook.stories.tsx +32 -32
  178. package/src/stories/Text.stories.tsx +42 -42
  179. package/src/stories/TimeWidget.stories.tsx +27 -27
  180. package/src/stories/TradingMenu.stories.tsx +47 -47
  181. package/src/types/eventTypes.ts +4 -4
  182. package/src/types/index.d.ts +2 -2
@@ -0,0 +1,8 @@
1
+ import React from 'react';
2
+ import { ISpellInfoDisplayProps } from '../components/Spellbook/cards/SpellInfoDisplay';
3
+ declare const _default: {
4
+ title: string;
5
+ component: React.FC<ISpellInfoDisplayProps>;
6
+ };
7
+ export default _default;
8
+ export declare const Default: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactFramework, ISpellInfoDisplayProps>;
package/package.json CHANGED
@@ -1,100 +1,100 @@
1
- {
2
- "name": "@rpg-engine/long-bow",
3
- "version": "0.3.96",
4
- "license": "MIT",
5
- "main": "dist/index.js",
6
- "typings": "dist/index.d.ts",
7
- "publishConfig": {
8
- "access": "public"
9
- },
10
- "directories": {
11
- "dist": "dist",
12
- "src": "src"
13
- },
14
- "files": [
15
- "dist",
16
- "src"
17
- ],
18
- "engines": {
19
- "node": ">=10"
20
- },
21
- "scripts": {
22
- "dev": "yarn install && start-storybook -p 6006",
23
- "start": "tsdx watch",
24
- "build": "tsdx build",
25
- "test": "tsdx test --passWithNoTests",
26
- "lint": "tsdx lint",
27
- "prepare": "tsdx build",
28
- "size": "size-limit",
29
- "analyze": "size-limit --why",
30
- "storybook": "start-storybook -p 6006",
31
- "build-storybook": "build-storybook",
32
- "configure": "./environment/download-credentials.sh",
33
- "update:shared-deps": "yarn add @rpg-engine/shared"
34
- },
35
- "peerDependencies": {
36
- "react": ">=16"
37
- },
38
- "prettier": {
39
- "printWidth": 80,
40
- "semi": true,
41
- "singleQuote": true,
42
- "trailingComma": "es5"
43
- },
44
- "author": "Joao Paulo Furtado",
45
- "module": "dist/long-bow.esm.js",
46
- "size-limit": [
47
- {
48
- "path": "dist/long-bow.cjs.production.min.js",
49
- "limit": "10 KB"
50
- },
51
- {
52
- "path": "dist/long-bow.esm.js",
53
- "limit": "10 KB"
54
- }
55
- ],
56
- "devDependencies": {
57
- "@babel/core": "^7.17.7",
58
- "@size-limit/preset-small-lib": "^7.0.8",
59
- "@storybook/addon-essentials": "^6.5.10",
60
- "@storybook/addon-info": "^5.3.21",
61
- "@storybook/addon-links": "^6.5.10",
62
- "@storybook/addons": "^6.5.10",
63
- "@storybook/react": "^6.5.10",
64
- "@types/react": "^18.0.14",
65
- "@types/react-dom": "^18.0.5",
66
- "@types/styled-components": "^5.1.24",
67
- "@types/uuid": "^8.3.4",
68
- "babel-loader": "^8.2.3",
69
- "babel-plugin-styled-components": "^2.0.6",
70
- "husky": "^7.0.4",
71
- "pretty-quick": "^3.1.3",
72
- "react": "^17.0.2",
73
- "react-dom": "^17.0.2",
74
- "react-is": "^17.0.2",
75
- "rollup-plugin-image-base64": "^1.0.0",
76
- "size-limit": "^7.0.8",
77
- "storybook-dark-mode": "^1.1.0",
78
- "styled-components": "^5.3.3",
79
- "tsdx": "^0.14.1",
80
- "tslib": "^2.3.1",
81
- "typescript": "^4.6.2",
82
- "uuid": "^8.3.2"
83
- },
84
- "dependencies": {
85
- "@rollup/plugin-image": "^2.1.1",
86
- "@rpg-engine/shared": "^0.7.82",
87
- "dayjs": "^1.11.2",
88
- "font-awesome": "^4.7.0",
89
- "fs-extra": "^10.1.0",
90
- "lodash": "^4.17.21",
91
- "lodash-es": "^4.17.21",
92
- "mobx": "^6.6.0",
93
- "mobx-react": "^7.5.0",
94
- "react-draggable": "^4.4.5",
95
- "react-error-boundary": "^3.1.4",
96
- "react-icons": "^4.7.1",
97
- "rollup-plugin-image-files": "^1.4.2",
98
- "rpgui": "^1.0.3"
99
- }
100
- }
1
+ {
2
+ "name": "@rpg-engine/long-bow",
3
+ "version": "0.3.98",
4
+ "license": "MIT",
5
+ "main": "dist/index.js",
6
+ "typings": "dist/index.d.ts",
7
+ "publishConfig": {
8
+ "access": "public"
9
+ },
10
+ "directories": {
11
+ "dist": "dist",
12
+ "src": "src"
13
+ },
14
+ "files": [
15
+ "dist",
16
+ "src"
17
+ ],
18
+ "engines": {
19
+ "node": ">=10"
20
+ },
21
+ "scripts": {
22
+ "dev": "yarn install && start-storybook -p 6006",
23
+ "start": "tsdx watch",
24
+ "build": "tsdx build",
25
+ "test": "tsdx test --passWithNoTests",
26
+ "lint": "tsdx lint",
27
+ "prepare": "tsdx build",
28
+ "size": "size-limit",
29
+ "analyze": "size-limit --why",
30
+ "storybook": "start-storybook -p 6006",
31
+ "build-storybook": "build-storybook",
32
+ "configure": "./environment/download-credentials.sh",
33
+ "update:shared-deps": "yarn add @rpg-engine/shared"
34
+ },
35
+ "peerDependencies": {
36
+ "react": ">=16"
37
+ },
38
+ "prettier": {
39
+ "printWidth": 80,
40
+ "semi": true,
41
+ "singleQuote": true,
42
+ "trailingComma": "es5"
43
+ },
44
+ "author": "Joao Paulo Furtado",
45
+ "module": "dist/long-bow.esm.js",
46
+ "size-limit": [
47
+ {
48
+ "path": "dist/long-bow.cjs.production.min.js",
49
+ "limit": "10 KB"
50
+ },
51
+ {
52
+ "path": "dist/long-bow.esm.js",
53
+ "limit": "10 KB"
54
+ }
55
+ ],
56
+ "devDependencies": {
57
+ "@babel/core": "^7.17.7",
58
+ "@size-limit/preset-small-lib": "^7.0.8",
59
+ "@storybook/addon-essentials": "^6.5.10",
60
+ "@storybook/addon-info": "^5.3.21",
61
+ "@storybook/addon-links": "^6.5.10",
62
+ "@storybook/addons": "^6.5.10",
63
+ "@storybook/react": "^6.5.10",
64
+ "@types/react": "^18.0.14",
65
+ "@types/react-dom": "^18.0.5",
66
+ "@types/styled-components": "^5.1.24",
67
+ "@types/uuid": "^8.3.4",
68
+ "babel-loader": "^8.2.3",
69
+ "babel-plugin-styled-components": "^2.0.6",
70
+ "husky": "^7.0.4",
71
+ "pretty-quick": "^3.1.3",
72
+ "react": "^17.0.2",
73
+ "react-dom": "^17.0.2",
74
+ "react-is": "^17.0.2",
75
+ "rollup-plugin-image-base64": "^1.0.0",
76
+ "size-limit": "^7.0.8",
77
+ "storybook-dark-mode": "^1.1.0",
78
+ "styled-components": "^5.3.3",
79
+ "tsdx": "^0.14.1",
80
+ "tslib": "^2.3.1",
81
+ "typescript": "^4.6.2",
82
+ "uuid": "^8.3.2"
83
+ },
84
+ "dependencies": {
85
+ "@rollup/plugin-image": "^2.1.1",
86
+ "@rpg-engine/shared": "^0.7.96",
87
+ "dayjs": "^1.11.2",
88
+ "font-awesome": "^4.7.0",
89
+ "fs-extra": "^10.1.0",
90
+ "lodash": "^4.17.21",
91
+ "lodash-es": "^4.17.21",
92
+ "mobx": "^6.6.0",
93
+ "mobx-react": "^7.5.0",
94
+ "react-draggable": "^4.4.5",
95
+ "react-error-boundary": "^3.1.4",
96
+ "react-icons": "^4.7.1",
97
+ "rollup-plugin-image-files": "^1.4.2",
98
+ "rpgui": "^1.0.3"
99
+ }
100
+ }
package/src/.DS_Store ADDED
Binary file
Binary file
@@ -1,22 +1,22 @@
1
- import React from 'react';
2
- import ReactDOM from 'react-dom';
3
- import styled from 'styled-components';
4
-
5
- const modalRoot = document.getElementById('modal-root')!;
6
-
7
- interface ModalPortalProps {
8
- children: React.ReactNode;
9
- }
10
-
11
- const ModalPortal: React.FC<ModalPortalProps> = ({ children }) => {
12
- return ReactDOM.createPortal(
13
- <Container className="rpgui-content">{children}</Container>,
14
- modalRoot
15
- );
16
- };
17
-
18
- const Container = styled.div`
19
- position: static !important;
20
- `;
21
-
22
- export default ModalPortal;
1
+ import React from 'react';
2
+ import ReactDOM from 'react-dom';
3
+ import styled from 'styled-components';
4
+
5
+ const modalRoot = document.getElementById('modal-root')!;
6
+
7
+ interface ModalPortalProps {
8
+ children: React.ReactNode;
9
+ }
10
+
11
+ const ModalPortal: React.FC<ModalPortalProps> = ({ children }) => {
12
+ return ReactDOM.createPortal(
13
+ <Container className="rpgui-content">{children}</Container>,
14
+ modalRoot
15
+ );
16
+ };
17
+
18
+ const Container = styled.div`
19
+ position: static !important;
20
+ `;
21
+
22
+ export default ModalPortal;
@@ -1,62 +1,62 @@
1
- import React from 'react';
2
- import { IPosition } from '../../types/eventTypes';
3
- import { DraggableContainer } from '../DraggableContainer';
4
- import { RPGUIContainerTypes } from '../RPGUIContainer';
5
-
6
- interface IProps {
7
- children: React.ReactNode;
8
- title: string;
9
- onClose?: () => void;
10
- onPositionChange?: (position: IPosition) => void;
11
- onPositionChangeEnd?: (position: IPosition) => void;
12
- onPositionChangeStart?: (position: IPosition) => void;
13
- onOutsideClick?: () => void;
14
- initialPosition?: IPosition;
15
- scale?: number;
16
- }
17
-
18
- export const SlotsContainer: React.FC<IProps> = ({
19
- children,
20
- title,
21
- onClose,
22
- onPositionChange,
23
- onPositionChangeEnd,
24
- onPositionChangeStart,
25
- onOutsideClick,
26
- initialPosition,
27
- scale,
28
- }) => {
29
- return (
30
- <DraggableContainer
31
- title={title}
32
- type={RPGUIContainerTypes.Framed}
33
- onCloseButton={() => {
34
- if (onClose) {
35
- onClose();
36
- }
37
- }}
38
- width="400px"
39
- cancelDrag=".item-container-body, #shortcuts_list"
40
- onPositionChange={({ x, y }) => {
41
- if (onPositionChange) {
42
- onPositionChange({ x, y });
43
- }
44
- }}
45
- onPositionChangeEnd={({ x, y }) => {
46
- if (onPositionChangeEnd) {
47
- onPositionChangeEnd({ x, y });
48
- }
49
- }}
50
- onPositionChangeStart={({ x, y }) => {
51
- if (onPositionChangeStart) {
52
- onPositionChangeStart({ x, y });
53
- }
54
- }}
55
- onOutsideClick={onOutsideClick}
56
- initialPosition={initialPosition}
57
- scale={scale}
58
- >
59
- {children}
60
- </DraggableContainer>
61
- );
62
- };
1
+ import React from 'react';
2
+ import { IPosition } from '../../types/eventTypes';
3
+ import { DraggableContainer } from '../DraggableContainer';
4
+ import { RPGUIContainerTypes } from '../RPGUIContainer';
5
+
6
+ interface IProps {
7
+ children: React.ReactNode;
8
+ title: string;
9
+ onClose?: () => void;
10
+ onPositionChange?: (position: IPosition) => void;
11
+ onPositionChangeEnd?: (position: IPosition) => void;
12
+ onPositionChangeStart?: (position: IPosition) => void;
13
+ onOutsideClick?: () => void;
14
+ initialPosition?: IPosition;
15
+ scale?: number;
16
+ }
17
+
18
+ export const SlotsContainer: React.FC<IProps> = ({
19
+ children,
20
+ title,
21
+ onClose,
22
+ onPositionChange,
23
+ onPositionChangeEnd,
24
+ onPositionChangeStart,
25
+ onOutsideClick,
26
+ initialPosition,
27
+ scale,
28
+ }) => {
29
+ return (
30
+ <DraggableContainer
31
+ title={title}
32
+ type={RPGUIContainerTypes.Framed}
33
+ onCloseButton={() => {
34
+ if (onClose) {
35
+ onClose();
36
+ }
37
+ }}
38
+ width="400px"
39
+ cancelDrag=".item-container-body, #shortcuts_list"
40
+ onPositionChange={({ x, y }) => {
41
+ if (onPositionChange) {
42
+ onPositionChange({ x, y });
43
+ }
44
+ }}
45
+ onPositionChangeEnd={({ x, y }) => {
46
+ if (onPositionChangeEnd) {
47
+ onPositionChangeEnd({ x, y });
48
+ }
49
+ }}
50
+ onPositionChangeStart={({ x, y }) => {
51
+ if (onPositionChangeStart) {
52
+ onPositionChangeStart({ x, y });
53
+ }
54
+ }}
55
+ onOutsideClick={onOutsideClick}
56
+ initialPosition={initialPosition}
57
+ scale={scale}
58
+ >
59
+ {children}
60
+ </DraggableContainer>
61
+ );
62
+ };
@@ -1,69 +1,69 @@
1
- import React from 'react';
2
- import styled from 'styled-components';
3
- import LeftArrowClickIcon from './img/arrow01-left-clicked.png';
4
- import LeftArrowIcon from './img/arrow01-left.png';
5
- import RightArrowClickIcon from './img/arrow01-right-clicked.png';
6
- import RightArrowIcon from './img/arrow01-right.png';
7
-
8
- export interface ArrowBarProps extends React.HTMLAttributes<HTMLDivElement> {
9
- direction: 'right' | 'left';
10
- onPointerDown: () => void;
11
- size?: number;
12
- }
13
-
14
- export const SelectArrow: React.FC<ArrowBarProps> = ({
15
- direction = 'left',
16
- size,
17
- onPointerDown,
18
- ...props
19
- }) => {
20
- return (
21
- <>
22
- {direction === 'left' ? (
23
- <LeftArrow
24
- size={size}
25
- onPointerDown={() => onPointerDown()}
26
- {...props}
27
- ></LeftArrow>
28
- ) : (
29
- <RightArrow
30
- size={size}
31
- onPointerDown={() => onPointerDown()}
32
- {...props}
33
- ></RightArrow>
34
- )}
35
- </>
36
- );
37
- };
38
-
39
- interface IArrowProps {
40
- size?: number;
41
- }
42
-
43
- const LeftArrow = styled.span<IArrowProps>`
44
- background-image: url(${LeftArrowIcon});
45
- background-size: 100% 100%;
46
- left: 0;
47
- position: absolute;
48
- width: ${props => props.size || 40}px;
49
- height: ${props => props.size || 42}px;
50
- :active {
51
- background-image: url(${LeftArrowClickIcon});
52
- }
53
- z-index: 2;
54
- `;
55
-
56
- const RightArrow = styled.span<IArrowProps>`
57
- background-image: url(${RightArrowIcon});
58
- right: 0;
59
- position: absolute;
60
- width: ${props => props.size || 40}px;
61
- height: ${props => props.size || 42}px;
62
- background-size: 100% 100%;
63
- :active {
64
- background-image: url(${RightArrowClickIcon});
65
- }
66
- z-index: 2;
67
- `;
68
-
69
- export default SelectArrow;
1
+ import React from 'react';
2
+ import styled from 'styled-components';
3
+ import LeftArrowClickIcon from './img/arrow01-left-clicked.png';
4
+ import LeftArrowIcon from './img/arrow01-left.png';
5
+ import RightArrowClickIcon from './img/arrow01-right-clicked.png';
6
+ import RightArrowIcon from './img/arrow01-right.png';
7
+
8
+ export interface ArrowBarProps extends React.HTMLAttributes<HTMLDivElement> {
9
+ direction: 'right' | 'left';
10
+ onPointerDown: () => void;
11
+ size?: number;
12
+ }
13
+
14
+ export const SelectArrow: React.FC<ArrowBarProps> = ({
15
+ direction = 'left',
16
+ size,
17
+ onPointerDown,
18
+ ...props
19
+ }) => {
20
+ return (
21
+ <>
22
+ {direction === 'left' ? (
23
+ <LeftArrow
24
+ size={size}
25
+ onPointerDown={() => onPointerDown()}
26
+ {...props}
27
+ ></LeftArrow>
28
+ ) : (
29
+ <RightArrow
30
+ size={size}
31
+ onPointerDown={() => onPointerDown()}
32
+ {...props}
33
+ ></RightArrow>
34
+ )}
35
+ </>
36
+ );
37
+ };
38
+
39
+ interface IArrowProps {
40
+ size?: number;
41
+ }
42
+
43
+ const LeftArrow = styled.span<IArrowProps>`
44
+ background-image: url(${LeftArrowIcon});
45
+ background-size: 100% 100%;
46
+ left: 0;
47
+ position: absolute;
48
+ width: ${props => props.size || 40}px;
49
+ height: ${props => props.size || 42}px;
50
+ :active {
51
+ background-image: url(${LeftArrowClickIcon});
52
+ }
53
+ z-index: 2;
54
+ `;
55
+
56
+ const RightArrow = styled.span<IArrowProps>`
57
+ background-image: url(${RightArrowIcon});
58
+ right: 0;
59
+ position: absolute;
60
+ width: ${props => props.size || 40}px;
61
+ height: ${props => props.size || 42}px;
62
+ background-size: 100% 100%;
63
+ :active {
64
+ background-image: url(${RightArrowClickIcon});
65
+ }
66
+ z-index: 2;
67
+ `;
68
+
69
+ export default SelectArrow;
File without changes
File without changes
File without changes
File without changes
File without changes
File without changes
@@ -1,40 +1,40 @@
1
- import React from 'react';
2
- import styled from 'styled-components';
3
- import { uiFonts } from '../constants/uiFonts';
4
-
5
- export enum ButtonTypes {
6
- RPGUIButton = 'rpgui-button',
7
- RPGUIGoldButton = 'rpgui-button golden',
8
- }
9
-
10
- export interface IButtonProps
11
- extends React.ButtonHTMLAttributes<HTMLButtonElement> {
12
- disabled?: boolean;
13
- children: React.ReactNode;
14
- buttonType: ButtonTypes;
15
- onPointerDown?: (e: any) => void;
16
- }
17
-
18
- export const Button = ({
19
- disabled = false,
20
- children,
21
- buttonType,
22
- onPointerDown,
23
- ...props
24
- }: IButtonProps) => {
25
- return (
26
- <ButtonContainer
27
- className={`${buttonType}`}
28
- disabled={disabled}
29
- {...props}
30
- onPointerDown={onPointerDown}
31
- >
32
- <p>{children}</p>
33
- </ButtonContainer>
34
- );
35
- };
36
-
37
- const ButtonContainer = styled.button`
38
- height: 45px;
39
- font-size: ${uiFonts.size.small};
40
- `;
1
+ import React from 'react';
2
+ import styled from 'styled-components';
3
+ import { uiFonts } from '../constants/uiFonts';
4
+
5
+ export enum ButtonTypes {
6
+ RPGUIButton = 'rpgui-button',
7
+ RPGUIGoldButton = 'rpgui-button golden',
8
+ }
9
+
10
+ export interface IButtonProps
11
+ extends React.ButtonHTMLAttributes<HTMLButtonElement> {
12
+ disabled?: boolean;
13
+ children: React.ReactNode;
14
+ buttonType: ButtonTypes;
15
+ onPointerDown?: (e: any) => void;
16
+ }
17
+
18
+ export const Button = ({
19
+ disabled = false,
20
+ children,
21
+ buttonType,
22
+ onPointerDown,
23
+ ...props
24
+ }: IButtonProps) => {
25
+ return (
26
+ <ButtonContainer
27
+ className={`${buttonType}`}
28
+ disabled={disabled}
29
+ {...props}
30
+ onPointerDown={onPointerDown}
31
+ >
32
+ <p>{children}</p>
33
+ </ButtonContainer>
34
+ );
35
+ };
36
+
37
+ const ButtonContainer = styled.button`
38
+ height: 45px;
39
+ font-size: ${uiFonts.size.small};
40
+ `;