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