@rpg-engine/long-bow 0.3.94 → 0.3.95

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 (159) hide show
  1. package/LICENSE +20 -20
  2. package/README.md +181 -181
  3. package/dist/components/CraftBook/CraftBook.d.ts +4 -1
  4. package/dist/components/CraftBook/CraftingRecipe.d.ts +15 -0
  5. package/dist/components/InputRadio.d.ts +10 -0
  6. package/dist/libs/itemCounter.d.ts +2 -0
  7. package/dist/long-bow.cjs.development.js +1564 -1450
  8. package/dist/long-bow.cjs.development.js.map +1 -1
  9. package/dist/long-bow.cjs.production.min.js +1 -1
  10. package/dist/long-bow.cjs.production.min.js.map +1 -1
  11. package/dist/long-bow.esm.js +1478 -1364
  12. package/dist/long-bow.esm.js.map +1 -1
  13. package/package.json +100 -100
  14. package/src/components/Abstractions/ModalPortal.tsx +22 -22
  15. package/src/components/Abstractions/SlotsContainer.tsx +62 -62
  16. package/src/components/Arrow/SelectArrow.tsx +69 -69
  17. package/src/components/Arrow/img/arrow01-left-clicked.png +0 -0
  18. package/src/components/Arrow/img/arrow01-left.png +0 -0
  19. package/src/components/Arrow/img/arrow01-right-clicked.png +0 -0
  20. package/src/components/Arrow/img/arrow01-right.png +0 -0
  21. package/src/components/Arrow/img/arrow02-left-clicked.png +0 -0
  22. package/src/components/Arrow/img/arrow02-left.png +0 -0
  23. package/src/components/Arrow/img/arrow02-right-clicked.png +0 -0
  24. package/src/components/Arrow/img/arrow02-right.png +0 -0
  25. package/src/components/Button.tsx +40 -40
  26. package/src/components/Character/CharacterSelection.tsx +98 -98
  27. package/src/components/CharacterStatus/CharacterStatus.tsx +120 -120
  28. package/src/components/Chat/Chat.tsx +196 -196
  29. package/src/components/Chatdeprecated/ChatDeprecated.tsx +198 -198
  30. package/src/components/CheckButton.tsx +65 -65
  31. package/src/components/CircularController/CircularController.tsx +249 -249
  32. package/src/components/CraftBook/CraftBook.tsx +286 -260
  33. package/src/components/CraftBook/CraftingRecipe.tsx +161 -0
  34. package/src/components/CraftBook/MockItems.ts +101 -89
  35. package/src/components/DraggableContainer.tsx +180 -180
  36. package/src/components/DropdownSelectorContainer.tsx +42 -42
  37. package/src/components/Equipment/EquipmentSet.tsx +199 -199
  38. package/src/components/HistoryDialog.tsx +104 -104
  39. package/src/components/Input.tsx +15 -15
  40. package/src/components/InputRadio.tsx +41 -0
  41. package/src/components/Item/Cards/ItemInfo.tsx +252 -252
  42. package/src/components/Item/Cards/ItemInfoDisplay.tsx +128 -128
  43. package/src/components/Item/Cards/ItemInfoWrapper.tsx +62 -62
  44. package/src/components/Item/Cards/ItemTooltip.tsx +83 -83
  45. package/src/components/Item/Cards/MobileItemTooltip.tsx +149 -149
  46. package/src/components/Item/Inventory/ErrorBoundary.tsx +42 -42
  47. package/src/components/Item/Inventory/ItemContainer.tsx +231 -231
  48. package/src/components/Item/Inventory/ItemContainerTypes.ts +6 -6
  49. package/src/components/Item/Inventory/ItemQuantitySelector.tsx +138 -138
  50. package/src/components/Item/Inventory/ItemSlot.tsx +580 -580
  51. package/src/components/Item/Inventory/itemContainerHelper.ts +175 -175
  52. package/src/components/ListMenu.tsx +63 -63
  53. package/src/components/Marketplace/Marketplace.tsx +132 -132
  54. package/src/components/Marketplace/MarketplaceRows.tsx +171 -171
  55. package/src/components/Marketplace/__mocks__/index.tsx +65 -65
  56. package/src/components/Multitab/Tab.tsx +66 -66
  57. package/src/components/Multitab/TabBody.tsx +13 -13
  58. package/src/components/Multitab/TabsContainer.tsx +97 -97
  59. package/src/components/NPCDialog/NPCDialog.tsx +121 -121
  60. package/src/components/NPCDialog/NPCDialogText.tsx +113 -113
  61. package/src/components/NPCDialog/NPCMultiDialog.tsx +159 -159
  62. package/src/components/NPCDialog/QuestionDialog/QuestionDialog.tsx +237 -237
  63. package/src/components/ProgressBar.tsx +92 -92
  64. package/src/components/PropertySelect/PropertySelect.tsx +106 -106
  65. package/src/components/QuestInfo/QuestInfo.tsx +233 -233
  66. package/src/components/QuestList.tsx +135 -135
  67. package/src/components/RPGUIContainer.tsx +47 -47
  68. package/src/components/RPGUIForceRenderStart.tsx +45 -45
  69. package/src/components/RPGUIRoot.tsx +14 -14
  70. package/src/components/RadioButton.tsx +53 -53
  71. package/src/components/RadioInput/RadioButton.tsx +96 -96
  72. package/src/components/RadioInput/RadioInput.tsx +102 -102
  73. package/src/components/RadioInput/instruments.ts +15 -15
  74. package/src/components/RangeSlider.tsx +78 -78
  75. package/src/components/RelativeListMenu.tsx +90 -90
  76. package/src/components/ScrollList.tsx +79 -79
  77. package/src/components/Shortcuts/Shortcuts.tsx +153 -152
  78. package/src/components/Shortcuts/ShortcutsSetter.tsx +139 -139
  79. package/src/components/Shortcuts/SingleShortcut.ts +62 -62
  80. package/src/components/SimpleProgressBar.tsx +62 -62
  81. package/src/components/SkillProgressBar.tsx +133 -133
  82. package/src/components/SkillsContainer.tsx +206 -206
  83. package/src/components/Spellbook/Spell.tsx +201 -201
  84. package/src/components/Spellbook/Spellbook.tsx +153 -153
  85. package/src/components/Spellbook/constants.ts +8 -8
  86. package/src/components/Spellbook/mockSpells.ts +60 -60
  87. package/src/components/StaticBook/StaticBook.tsx +103 -103
  88. package/src/components/TextArea.tsx +11 -11
  89. package/src/components/TimeWidget/DayNightPeriod/DayNightPeriod.tsx +35 -35
  90. package/src/components/TimeWidget/TimeWidget.tsx +65 -65
  91. package/src/components/TradingMenu/TradingItemRow.tsx +199 -199
  92. package/src/components/TradingMenu/TradingMenu.tsx +219 -219
  93. package/src/components/TradingMenu/items.mock.ts +48 -48
  94. package/src/components/Truncate.tsx +25 -25
  95. package/src/components/itemSelector/ItemSelector.tsx +136 -136
  96. package/src/components/shared/Column.tsx +16 -16
  97. package/src/components/shared/Ellipsis.tsx +68 -68
  98. package/src/components/shared/SpriteFromAtlas.tsx +104 -104
  99. package/src/components/typography/DynamicText.tsx +49 -49
  100. package/src/constants/uiColors.ts +20 -20
  101. package/src/constants/uiDevices.ts +3 -3
  102. package/src/constants/uiFonts.ts +12 -12
  103. package/src/hooks/useEventListener.ts +21 -21
  104. package/src/hooks/useOutsideAlerter.ts +25 -25
  105. package/src/index.tsx +42 -42
  106. package/src/libs/StringHelpers.ts +3 -3
  107. package/src/libs/itemCounter.ts +22 -0
  108. package/src/mocks/atlas/entities/entities.json +20215 -20215
  109. package/src/mocks/atlas/icons/icons.json +735 -735
  110. package/src/mocks/atlas/items/items.json +12086 -12086
  111. package/src/mocks/equipmentSet.mocks.ts +391 -391
  112. package/src/mocks/itemContainer.mocks.ts +563 -563
  113. package/src/mocks/skills.mocks.ts +128 -128
  114. package/src/stories/Arrow.stories.tsx +26 -26
  115. package/src/stories/Button.stories.tsx +36 -36
  116. package/src/stories/CharacterSelection.stories.tsx +44 -44
  117. package/src/stories/CharacterStatus.stories.tsx +29 -29
  118. package/src/stories/Chat.stories.tsx +187 -187
  119. package/src/stories/ChatDeprecated.stories.tsx +170 -170
  120. package/src/stories/CheckButton.stories.tsx +48 -48
  121. package/src/stories/CircullarController.stories.tsx +37 -37
  122. package/src/stories/CraftBook.stories.tsx +42 -42
  123. package/src/stories/DayNightPeriod.stories.tsx +27 -27
  124. package/src/stories/DraggableContainer.stories.tsx +28 -28
  125. package/src/stories/Dropdown.stories.tsx +46 -46
  126. package/src/stories/DropdownSelectorContainer.stories.tsx +41 -41
  127. package/src/stories/EquipmentSet.stories.tsx +65 -65
  128. package/src/stories/HistoryDialog.stories.tsx +61 -61
  129. package/src/stories/ItemContainer.stories.tsx +201 -201
  130. package/src/stories/ItemInfoDisplay.stories.tsx +33 -33
  131. package/src/stories/ItemQuantitySelector.stories.tsx +26 -26
  132. package/src/stories/ItemSelector.stories.tsx +77 -77
  133. package/src/stories/ItemTradingComponent.stories.tsx +35 -35
  134. package/src/stories/ListMenu.stories.tsx +56 -56
  135. package/src/stories/Marketplace.stories.tsx +42 -42
  136. package/src/stories/MarketplaceRows.stories.tsx +28 -28
  137. package/src/stories/Multitab.stories.tsx +51 -51
  138. package/src/stories/NPCDialog.stories.tsx +130 -130
  139. package/src/stories/NPCMultiDialog.stories.tsx +71 -71
  140. package/src/stories/ProgressBar.stories.tsx +23 -23
  141. package/src/stories/PropertySelect.stories.tsx +40 -40
  142. package/src/stories/QuestInfo.stories.tsx +107 -107
  143. package/src/stories/QuestList.stories.tsx +82 -82
  144. package/src/stories/RPGUIContainers.stories.tsx +42 -42
  145. package/src/stories/RadioButton.stories.tsx +49 -49
  146. package/src/stories/RadioInput.stories.tsx +34 -34
  147. package/src/stories/RangeSlider.stories.tsx +64 -64
  148. package/src/stories/ScrollList.stories.tsx +85 -85
  149. package/src/stories/Shortcuts.stories.tsx +39 -39
  150. package/src/stories/SimpleProgressBar.stories.tsx +22 -22
  151. package/src/stories/SkillProgressBar.stories.tsx +34 -34
  152. package/src/stories/SkillsContainer.stories.tsx +35 -35
  153. package/src/stories/Spellbook.stories.tsx +104 -104
  154. package/src/stories/StaticBook.stories.tsx +32 -32
  155. package/src/stories/Text.stories.tsx +42 -42
  156. package/src/stories/TimeWidget.stories.tsx +27 -27
  157. package/src/stories/TradingMenu.stories.tsx +47 -47
  158. package/src/types/eventTypes.ts +4 -4
  159. package/src/types/index.d.ts +2 -2
package/package.json CHANGED
@@ -1,100 +1,100 @@
1
- {
2
- "name": "@rpg-engine/long-bow",
3
- "version": "0.3.94",
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.51",
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.95",
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.51",
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,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
+ `;