@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
@@ -1,175 +1,175 @@
1
- import {
2
- ActionsForEquipmentSet,
3
- ActionsForInventory,
4
- ActionsForLoot,
5
- ActionsForMapContainer,
6
- DepotSocketEvents,
7
- IItem,
8
- ItemContainerType,
9
- ItemSocketEvents,
10
- ItemSocketEventsDisplayLabels,
11
- ItemType,
12
- } from '@rpg-engine/shared';
13
-
14
- export interface IContextMenuItem {
15
- id: string;
16
- text: string;
17
- }
18
-
19
- const generateContextMenuListOptions = (actionsByTypeList: any) => {
20
- const contextMenu: IContextMenuItem[] = actionsByTypeList.map(
21
- (action: string) => {
22
- return { id: action, text: ItemSocketEventsDisplayLabels[action] };
23
- }
24
- );
25
- return contextMenu;
26
- };
27
-
28
- export const generateContextMenu = (
29
- item: IItem,
30
- itemContainerType: ItemContainerType | null,
31
- isDepotSystem?: boolean
32
- ) => {
33
- let contextActionMenu: IContextMenuItem[] = [];
34
-
35
- if (itemContainerType === ItemContainerType.Inventory) {
36
- switch (item.type) {
37
- case ItemType.Weapon:
38
- case ItemType.Armor:
39
- case ItemType.Accessory:
40
- case ItemType.Jewelry:
41
- contextActionMenu = generateContextMenuListOptions(
42
- ActionsForInventory.Equipment
43
- );
44
- break;
45
- case ItemType.Container:
46
- contextActionMenu = generateContextMenuListOptions(
47
- ActionsForInventory.Container
48
- );
49
- break;
50
- case ItemType.Consumable:
51
- contextActionMenu = generateContextMenuListOptions(
52
- ActionsForInventory.Consumable
53
- );
54
- break;
55
- case ItemType.CraftingResource:
56
- contextActionMenu = generateContextMenuListOptions(
57
- ActionsForInventory.CraftingResource
58
- );
59
- break;
60
- case ItemType.Tool:
61
- contextActionMenu = generateContextMenuListOptions(
62
- ActionsForInventory.Tool
63
- );
64
- break;
65
-
66
- default:
67
- contextActionMenu = generateContextMenuListOptions(
68
- ActionsForInventory.Other
69
- );
70
- break;
71
- }
72
-
73
- if (isDepotSystem) {
74
- contextActionMenu.push({
75
- id: DepotSocketEvents.Deposit,
76
- text: 'Deposit',
77
- });
78
- }
79
- }
80
- if (itemContainerType === ItemContainerType.Equipment) {
81
- switch (item.type) {
82
- case ItemType.Container:
83
- contextActionMenu = generateContextMenuListOptions(
84
- ActionsForEquipmentSet.Container
85
- );
86
-
87
- break;
88
- default:
89
- contextActionMenu = generateContextMenuListOptions(
90
- ActionsForEquipmentSet.Equipment
91
- );
92
- }
93
- }
94
- if (itemContainerType === ItemContainerType.Loot) {
95
- switch (item.type) {
96
- case ItemType.Weapon:
97
- case ItemType.Armor:
98
- case ItemType.Accessory:
99
- case ItemType.Jewelry:
100
- contextActionMenu = generateContextMenuListOptions(
101
- ActionsForLoot.Equipment
102
- );
103
- break;
104
- case ItemType.Consumable:
105
- contextActionMenu = generateContextMenuListOptions(
106
- ActionsForLoot.Consumable
107
- );
108
- break;
109
- case ItemType.CraftingResource:
110
- contextActionMenu = generateContextMenuListOptions(
111
- ActionsForLoot.CraftingResource
112
- );
113
- break;
114
- case ItemType.Tool:
115
- contextActionMenu = generateContextMenuListOptions(ActionsForLoot.Tool);
116
- break;
117
- default:
118
- contextActionMenu = generateContextMenuListOptions(
119
- ActionsForLoot.Other
120
- );
121
- break;
122
- }
123
- }
124
- if (itemContainerType === ItemContainerType.MapContainer) {
125
- switch (item.type) {
126
- case ItemType.Weapon:
127
- case ItemType.Armor:
128
- case ItemType.Accessory:
129
- case ItemType.Jewelry:
130
- contextActionMenu = generateContextMenuListOptions(
131
- ActionsForMapContainer.Equipment
132
- );
133
- break;
134
- case ItemType.Consumable:
135
- contextActionMenu = generateContextMenuListOptions(
136
- ActionsForMapContainer.Consumable
137
- );
138
- break;
139
- case ItemType.CraftingResource:
140
- contextActionMenu = generateContextMenuListOptions(
141
- ActionsForMapContainer.CraftingResource
142
- );
143
- break;
144
- case ItemType.Tool:
145
- contextActionMenu = generateContextMenuListOptions(
146
- ActionsForMapContainer.Tool
147
- );
148
- break;
149
- default:
150
- contextActionMenu = generateContextMenuListOptions(
151
- ActionsForMapContainer.Other
152
- );
153
- break;
154
- }
155
-
156
- const contextActionMenuDontHaveUseWith = !contextActionMenu.find(action =>
157
- action.text.toLowerCase().includes('use with')
158
- );
159
-
160
- if (item.hasUseWith && contextActionMenuDontHaveUseWith) {
161
- contextActionMenu.push({ id: 'use-with', text: 'Use with...' });
162
- }
163
- }
164
- if (itemContainerType === ItemContainerType.Depot) {
165
- contextActionMenu = [
166
- {
167
- id: ItemSocketEvents.GetItemInfo,
168
- text: ItemSocketEventsDisplayLabels.GetItemInfo,
169
- },
170
- { id: DepotSocketEvents.Withdraw, text: 'Withdraw' },
171
- ];
172
- }
173
-
174
- return contextActionMenu;
175
- };
1
+ import {
2
+ ActionsForEquipmentSet,
3
+ ActionsForInventory,
4
+ ActionsForLoot,
5
+ ActionsForMapContainer,
6
+ DepotSocketEvents,
7
+ IItem,
8
+ ItemContainerType,
9
+ ItemSocketEvents,
10
+ ItemSocketEventsDisplayLabels,
11
+ ItemType,
12
+ } from '@rpg-engine/shared';
13
+
14
+ export interface IContextMenuItem {
15
+ id: string;
16
+ text: string;
17
+ }
18
+
19
+ const generateContextMenuListOptions = (actionsByTypeList: any) => {
20
+ const contextMenu: IContextMenuItem[] = actionsByTypeList.map(
21
+ (action: string) => {
22
+ return { id: action, text: ItemSocketEventsDisplayLabels[action] };
23
+ }
24
+ );
25
+ return contextMenu;
26
+ };
27
+
28
+ export const generateContextMenu = (
29
+ item: IItem,
30
+ itemContainerType: ItemContainerType | null,
31
+ isDepotSystem?: boolean
32
+ ) => {
33
+ let contextActionMenu: IContextMenuItem[] = [];
34
+
35
+ if (itemContainerType === ItemContainerType.Inventory) {
36
+ switch (item.type) {
37
+ case ItemType.Weapon:
38
+ case ItemType.Armor:
39
+ case ItemType.Accessory:
40
+ case ItemType.Jewelry:
41
+ contextActionMenu = generateContextMenuListOptions(
42
+ ActionsForInventory.Equipment
43
+ );
44
+ break;
45
+ case ItemType.Container:
46
+ contextActionMenu = generateContextMenuListOptions(
47
+ ActionsForInventory.Container
48
+ );
49
+ break;
50
+ case ItemType.Consumable:
51
+ contextActionMenu = generateContextMenuListOptions(
52
+ ActionsForInventory.Consumable
53
+ );
54
+ break;
55
+ case ItemType.CraftingResource:
56
+ contextActionMenu = generateContextMenuListOptions(
57
+ ActionsForInventory.CraftingResource
58
+ );
59
+ break;
60
+ case ItemType.Tool:
61
+ contextActionMenu = generateContextMenuListOptions(
62
+ ActionsForInventory.Tool
63
+ );
64
+ break;
65
+
66
+ default:
67
+ contextActionMenu = generateContextMenuListOptions(
68
+ ActionsForInventory.Other
69
+ );
70
+ break;
71
+ }
72
+
73
+ if (isDepotSystem) {
74
+ contextActionMenu.push({
75
+ id: DepotSocketEvents.Deposit,
76
+ text: 'Deposit',
77
+ });
78
+ }
79
+ }
80
+ if (itemContainerType === ItemContainerType.Equipment) {
81
+ switch (item.type) {
82
+ case ItemType.Container:
83
+ contextActionMenu = generateContextMenuListOptions(
84
+ ActionsForEquipmentSet.Container
85
+ );
86
+
87
+ break;
88
+ default:
89
+ contextActionMenu = generateContextMenuListOptions(
90
+ ActionsForEquipmentSet.Equipment
91
+ );
92
+ }
93
+ }
94
+ if (itemContainerType === ItemContainerType.Loot) {
95
+ switch (item.type) {
96
+ case ItemType.Weapon:
97
+ case ItemType.Armor:
98
+ case ItemType.Accessory:
99
+ case ItemType.Jewelry:
100
+ contextActionMenu = generateContextMenuListOptions(
101
+ ActionsForLoot.Equipment
102
+ );
103
+ break;
104
+ case ItemType.Consumable:
105
+ contextActionMenu = generateContextMenuListOptions(
106
+ ActionsForLoot.Consumable
107
+ );
108
+ break;
109
+ case ItemType.CraftingResource:
110
+ contextActionMenu = generateContextMenuListOptions(
111
+ ActionsForLoot.CraftingResource
112
+ );
113
+ break;
114
+ case ItemType.Tool:
115
+ contextActionMenu = generateContextMenuListOptions(ActionsForLoot.Tool);
116
+ break;
117
+ default:
118
+ contextActionMenu = generateContextMenuListOptions(
119
+ ActionsForLoot.Other
120
+ );
121
+ break;
122
+ }
123
+ }
124
+ if (itemContainerType === ItemContainerType.MapContainer) {
125
+ switch (item.type) {
126
+ case ItemType.Weapon:
127
+ case ItemType.Armor:
128
+ case ItemType.Accessory:
129
+ case ItemType.Jewelry:
130
+ contextActionMenu = generateContextMenuListOptions(
131
+ ActionsForMapContainer.Equipment
132
+ );
133
+ break;
134
+ case ItemType.Consumable:
135
+ contextActionMenu = generateContextMenuListOptions(
136
+ ActionsForMapContainer.Consumable
137
+ );
138
+ break;
139
+ case ItemType.CraftingResource:
140
+ contextActionMenu = generateContextMenuListOptions(
141
+ ActionsForMapContainer.CraftingResource
142
+ );
143
+ break;
144
+ case ItemType.Tool:
145
+ contextActionMenu = generateContextMenuListOptions(
146
+ ActionsForMapContainer.Tool
147
+ );
148
+ break;
149
+ default:
150
+ contextActionMenu = generateContextMenuListOptions(
151
+ ActionsForMapContainer.Other
152
+ );
153
+ break;
154
+ }
155
+
156
+ const contextActionMenuDontHaveUseWith = !contextActionMenu.find(action =>
157
+ action.text.toLowerCase().includes('use with')
158
+ );
159
+
160
+ if (item.hasUseWith && contextActionMenuDontHaveUseWith) {
161
+ contextActionMenu.push({ id: 'use-with', text: 'Use with...' });
162
+ }
163
+ }
164
+ if (itemContainerType === ItemContainerType.Depot) {
165
+ contextActionMenu = [
166
+ {
167
+ id: ItemSocketEvents.GetItemInfo,
168
+ text: ItemSocketEventsDisplayLabels.GetItemInfo,
169
+ },
170
+ { id: DepotSocketEvents.Withdraw, text: 'Withdraw' },
171
+ ];
172
+ }
173
+
174
+ return contextActionMenu;
175
+ };
@@ -1,63 +1,63 @@
1
- import React from 'react';
2
- import styled from 'styled-components';
3
- import { uiFonts } from '../constants/uiFonts';
4
-
5
- interface IListMenuOption {
6
- id: string;
7
- text: string;
8
- }
9
-
10
- export interface IListMenuProps {
11
- x: number;
12
- y: number;
13
- options: IListMenuOption[];
14
- onSelected: (selectedOptionId: string) => void;
15
- }
16
-
17
- export const ListMenu: React.FC<IListMenuProps> = ({
18
- options,
19
- onSelected,
20
- x,
21
- y,
22
- }) => {
23
- return (
24
- <Container x={x} y={y}>
25
- <ul className="rpgui-list-imp" style={{ overflow: 'hidden' }}>
26
- {options.map((params, index) => (
27
- <ListElement
28
- key={params?.id || index}
29
- onPointerDown={() => {
30
- onSelected(params?.id);
31
- }}
32
- >
33
- {params?.text || 'No text'}
34
- </ListElement>
35
- ))}
36
- </ul>
37
- </Container>
38
- );
39
- };
40
-
41
- interface IContainerProps {
42
- x?: number;
43
- y?: number;
44
- }
45
-
46
- const Container = styled.div<IContainerProps>`
47
- display: flex;
48
- flex-direction: column;
49
- width: 100%;
50
- justify-content: start;
51
- align-items: flex-start;
52
- position: absolute;
53
- top: ${props => props.y || 0}px;
54
- left: ${props => props.x || 0}px;
55
-
56
- li {
57
- font-size: ${uiFonts.size.xsmall};
58
- }
59
- `;
60
-
61
- const ListElement = styled.li`
62
- margin-right: 0.5rem;
63
- `;
1
+ import React from 'react';
2
+ import styled from 'styled-components';
3
+ import { uiFonts } from '../constants/uiFonts';
4
+
5
+ interface IListMenuOption {
6
+ id: string;
7
+ text: string;
8
+ }
9
+
10
+ export interface IListMenuProps {
11
+ x: number;
12
+ y: number;
13
+ options: IListMenuOption[];
14
+ onSelected: (selectedOptionId: string) => void;
15
+ }
16
+
17
+ export const ListMenu: React.FC<IListMenuProps> = ({
18
+ options,
19
+ onSelected,
20
+ x,
21
+ y,
22
+ }) => {
23
+ return (
24
+ <Container x={x} y={y}>
25
+ <ul className="rpgui-list-imp" style={{ overflow: 'hidden' }}>
26
+ {options.map((params, index) => (
27
+ <ListElement
28
+ key={params?.id || index}
29
+ onPointerDown={() => {
30
+ onSelected(params?.id);
31
+ }}
32
+ >
33
+ {params?.text || 'No text'}
34
+ </ListElement>
35
+ ))}
36
+ </ul>
37
+ </Container>
38
+ );
39
+ };
40
+
41
+ interface IContainerProps {
42
+ x?: number;
43
+ y?: number;
44
+ }
45
+
46
+ const Container = styled.div<IContainerProps>`
47
+ display: flex;
48
+ flex-direction: column;
49
+ width: 100%;
50
+ justify-content: start;
51
+ align-items: flex-start;
52
+ position: absolute;
53
+ top: ${props => props.y || 0}px;
54
+ left: ${props => props.x || 0}px;
55
+
56
+ li {
57
+ font-size: ${uiFonts.size.xsmall};
58
+ }
59
+ `;
60
+
61
+ const ListElement = styled.li`
62
+ margin-right: 0.5rem;
63
+ `;