@rpg-engine/long-bow 0.3.51 → 0.3.53
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.
- package/dist/components/CircularController/CircularController.d.ts +6 -3
- package/dist/components/Item/Inventory/ItemContainer.d.ts +4 -1
- package/dist/components/Item/Inventory/ItemSlot.d.ts +1 -0
- package/dist/components/Shortcuts/Shortcuts.d.ts +12 -0
- package/dist/components/Shortcuts/ShortcutsSetter.d.ts +12 -0
- package/dist/components/Shortcuts/SingleShortcut.d.ts +1 -0
- package/dist/components/Spellbook/Spellbook.d.ts +5 -3
- package/dist/components/Spellbook/constants.d.ts +3 -3
- package/dist/index.d.ts +1 -1
- package/dist/long-bow.cjs.development.js +292 -146
- package/dist/long-bow.cjs.development.js.map +1 -1
- package/dist/long-bow.cjs.production.min.js +1 -1
- package/dist/long-bow.cjs.production.min.js.map +1 -1
- package/dist/long-bow.esm.js +293 -146
- package/dist/long-bow.esm.js.map +1 -1
- package/dist/stories/{QuickSpells.stories.d.ts → Shortcuts.stories.d.ts} +2 -2
- package/package.json +2 -2
- package/src/components/Abstractions/SlotsContainer.tsx +2 -2
- package/src/components/CircularController/CircularController.tsx +119 -36
- package/src/components/Item/Inventory/ItemContainer.tsx +39 -4
- package/src/components/Item/Inventory/ItemSlot.tsx +38 -3
- package/src/components/Shortcuts/Shortcuts.tsx +129 -0
- package/src/components/Shortcuts/ShortcutsSetter.tsx +132 -0
- package/src/components/Shortcuts/SingleShortcut.ts +61 -0
- package/src/components/Spellbook/Spellbook.tsx +15 -9
- package/src/components/Spellbook/constants.ts +5 -9
- package/src/components/TradingMenu/TradingMenu.tsx +2 -2
- package/src/components/TradingMenu/items.mock.ts +59 -0
- package/src/index.tsx +1 -1
- package/src/mocks/itemContainer.mocks.ts +22 -20
- package/src/stories/CircullarController.stories.tsx +9 -5
- package/src/stories/ItemContainer.stories.tsx +76 -2
- package/src/stories/Shortcuts.stories.tsx +39 -0
- package/src/stories/Spellbook.stories.tsx +35 -38
- package/dist/components/Spellbook/QuickSpells.d.ts +0 -10
- package/dist/components/Spellbook/SpellbookShortcuts.d.ts +0 -10
- package/src/components/Spellbook/QuickSpells.tsx +0 -120
- package/src/components/Spellbook/SpellbookShortcuts.tsx +0 -77
- package/src/stories/QuickSpells.stories.tsx +0 -38
|
@@ -0,0 +1,132 @@
|
|
|
1
|
+
import {
|
|
2
|
+
getItemTextureKeyPath,
|
|
3
|
+
IItem,
|
|
4
|
+
IRawSpell,
|
|
5
|
+
IShortcut,
|
|
6
|
+
ShortcutType,
|
|
7
|
+
} from '@rpg-engine/shared';
|
|
8
|
+
import React from 'react';
|
|
9
|
+
import styled from 'styled-components';
|
|
10
|
+
import { uiColors } from '../../constants/uiColors';
|
|
11
|
+
import { SpriteFromAtlas } from '../shared/SpriteFromAtlas';
|
|
12
|
+
|
|
13
|
+
type ShortcutsSetterProps = {
|
|
14
|
+
setSettingShortcutIndex: (index: number) => void;
|
|
15
|
+
settingShortcutIndex: number;
|
|
16
|
+
shortcuts: IShortcut[];
|
|
17
|
+
removeShortcut: (index: number) => void;
|
|
18
|
+
atlasJSON: any;
|
|
19
|
+
atlasIMG: any;
|
|
20
|
+
};
|
|
21
|
+
|
|
22
|
+
export const ShortcutsSetter: React.FC<ShortcutsSetterProps> = ({
|
|
23
|
+
setSettingShortcutIndex,
|
|
24
|
+
settingShortcutIndex,
|
|
25
|
+
shortcuts,
|
|
26
|
+
removeShortcut,
|
|
27
|
+
atlasJSON,
|
|
28
|
+
atlasIMG,
|
|
29
|
+
}) => {
|
|
30
|
+
const getContent = (index: number) => {
|
|
31
|
+
if (shortcuts[index]?.type === ShortcutType.Item) {
|
|
32
|
+
const payload = shortcuts[index]?.payload as IItem | undefined;
|
|
33
|
+
|
|
34
|
+
if (!payload) return null;
|
|
35
|
+
|
|
36
|
+
return (
|
|
37
|
+
<SpriteFromAtlas
|
|
38
|
+
atlasIMG={atlasIMG}
|
|
39
|
+
atlasJSON={atlasJSON}
|
|
40
|
+
spriteKey={getItemTextureKeyPath(
|
|
41
|
+
{
|
|
42
|
+
key: payload.texturePath,
|
|
43
|
+
texturePath: payload.texturePath,
|
|
44
|
+
stackQty: payload.stackQty || 1,
|
|
45
|
+
},
|
|
46
|
+
atlasJSON
|
|
47
|
+
)}
|
|
48
|
+
width={32}
|
|
49
|
+
height={32}
|
|
50
|
+
imgScale={1.6}
|
|
51
|
+
imgStyle={{ left: '5px' }}
|
|
52
|
+
/>
|
|
53
|
+
);
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
const payload = shortcuts[index]?.payload as IRawSpell | undefined;
|
|
57
|
+
|
|
58
|
+
return <span>{payload?.magicWords.split(' ').map(word => word[0])}</span>;
|
|
59
|
+
};
|
|
60
|
+
|
|
61
|
+
return (
|
|
62
|
+
<Container>
|
|
63
|
+
<p>Shortcuts:</p>
|
|
64
|
+
<List id="shortcuts_list">
|
|
65
|
+
{Array.from({ length: 6 }).map((_, i) => (
|
|
66
|
+
<Shortcut
|
|
67
|
+
key={i}
|
|
68
|
+
onClick={() => {
|
|
69
|
+
removeShortcut(i);
|
|
70
|
+
if (!shortcuts[i] || shortcuts[i].type === ShortcutType.None)
|
|
71
|
+
setSettingShortcutIndex(i);
|
|
72
|
+
}}
|
|
73
|
+
disabled={settingShortcutIndex !== -1 && settingShortcutIndex !== i}
|
|
74
|
+
isBeingSet={settingShortcutIndex === i}
|
|
75
|
+
>
|
|
76
|
+
{getContent(i)}
|
|
77
|
+
</Shortcut>
|
|
78
|
+
))}
|
|
79
|
+
</List>
|
|
80
|
+
</Container>
|
|
81
|
+
);
|
|
82
|
+
};
|
|
83
|
+
|
|
84
|
+
const Container = styled.div`
|
|
85
|
+
p {
|
|
86
|
+
margin: 0;
|
|
87
|
+
margin-left: 0.5rem;
|
|
88
|
+
}
|
|
89
|
+
`;
|
|
90
|
+
|
|
91
|
+
const Shortcut = styled.button<{ isBeingSet?: boolean }>`
|
|
92
|
+
width: 2.6rem;
|
|
93
|
+
height: 2.6rem;
|
|
94
|
+
background-color: ${uiColors.lightGray};
|
|
95
|
+
border: 2px solid
|
|
96
|
+
${({ isBeingSet }) => (isBeingSet ? uiColors.yellow : uiColors.darkGray)};
|
|
97
|
+
border-radius: 50%;
|
|
98
|
+
text-transform: uppercase;
|
|
99
|
+
font-size: 0.7rem;
|
|
100
|
+
font-weight: bold;
|
|
101
|
+
display: flex;
|
|
102
|
+
align-items: center;
|
|
103
|
+
justify-content: center;
|
|
104
|
+
|
|
105
|
+
span {
|
|
106
|
+
margin-top: 4px;
|
|
107
|
+
}
|
|
108
|
+
|
|
109
|
+
&:hover,
|
|
110
|
+
&:focus {
|
|
111
|
+
background-color: ${uiColors.darkGray};
|
|
112
|
+
}
|
|
113
|
+
|
|
114
|
+
&:active {
|
|
115
|
+
background-color: ${uiColors.gray};
|
|
116
|
+
}
|
|
117
|
+
|
|
118
|
+
&:disabled {
|
|
119
|
+
opacity: 0.5;
|
|
120
|
+
}
|
|
121
|
+
`;
|
|
122
|
+
|
|
123
|
+
const List = styled.div`
|
|
124
|
+
width: 100%;
|
|
125
|
+
display: flex;
|
|
126
|
+
align-items: center;
|
|
127
|
+
gap: 0.5rem;
|
|
128
|
+
padding-bottom: 0.5rem;
|
|
129
|
+
padding-left: 0.5rem;
|
|
130
|
+
box-sizing: border-box;
|
|
131
|
+
margin: 0 !important;
|
|
132
|
+
`;
|
|
@@ -0,0 +1,61 @@
|
|
|
1
|
+
import styled from 'styled-components';
|
|
2
|
+
import { uiColors } from '../../constants/uiColors';
|
|
3
|
+
|
|
4
|
+
export const SingleShortcut = styled.button`
|
|
5
|
+
width: 3rem;
|
|
6
|
+
height: 3rem;
|
|
7
|
+
background-color: ${uiColors.lightGray};
|
|
8
|
+
border: 2px solid ${uiColors.darkGray};
|
|
9
|
+
border-radius: 50%;
|
|
10
|
+
text-transform: uppercase;
|
|
11
|
+
font-size: 0.7rem;
|
|
12
|
+
font-weight: bold;
|
|
13
|
+
display: flex;
|
|
14
|
+
align-items: center;
|
|
15
|
+
justify-content: center;
|
|
16
|
+
position: relative;
|
|
17
|
+
|
|
18
|
+
span {
|
|
19
|
+
pointer-events: none;
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
.mana {
|
|
23
|
+
position: absolute;
|
|
24
|
+
top: -5px;
|
|
25
|
+
right: 0;
|
|
26
|
+
font-size: 0.65rem;
|
|
27
|
+
color: ${uiColors.blue};
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
.qty {
|
|
31
|
+
position: absolute;
|
|
32
|
+
top: -5px;
|
|
33
|
+
right: 0;
|
|
34
|
+
font-size: 0.65rem;
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
.magicWords {
|
|
38
|
+
margin-top: 4px;
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
.keyboard {
|
|
42
|
+
position: absolute;
|
|
43
|
+
bottom: -5px;
|
|
44
|
+
left: 0;
|
|
45
|
+
font-size: 0.65rem;
|
|
46
|
+
color: ${uiColors.yellow};
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
&:hover,
|
|
50
|
+
&:focus {
|
|
51
|
+
background-color: ${uiColors.darkGray};
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
&:active {
|
|
55
|
+
background-color: ${uiColors.gray};
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
&:disabled {
|
|
59
|
+
opacity: 0.5;
|
|
60
|
+
}
|
|
61
|
+
`;
|
|
@@ -1,12 +1,12 @@
|
|
|
1
|
-
import { IRawSpell } from '@rpg-engine/shared';
|
|
1
|
+
import { IRawSpell, IShortcut } from '@rpg-engine/shared';
|
|
2
2
|
import React, { Fragment, useEffect, useMemo, useState } from 'react';
|
|
3
3
|
import styled from 'styled-components';
|
|
4
4
|
import { uiFonts } from '../../constants/uiFonts';
|
|
5
5
|
import { DraggableContainer } from '../DraggableContainer';
|
|
6
6
|
import { Input } from '../Input';
|
|
7
7
|
import { RPGUIContainerTypes } from '../RPGUIContainer';
|
|
8
|
+
import { ShortcutsSetter } from '../Shortcuts/ShortcutsSetter';
|
|
8
9
|
import { Spell } from './Spell';
|
|
9
|
-
import { SpellbookShortcuts } from './SpellbookShortcuts';
|
|
10
10
|
|
|
11
11
|
export interface ISpellbookProps {
|
|
12
12
|
onClose?: () => void;
|
|
@@ -17,8 +17,10 @@ export interface ISpellbookProps {
|
|
|
17
17
|
mana: number;
|
|
18
18
|
onSpellClick: (spellKey: string) => void;
|
|
19
19
|
setSpellShortcut: (key: string, index: number) => void;
|
|
20
|
-
|
|
21
|
-
|
|
20
|
+
shortcuts: IShortcut[];
|
|
21
|
+
removeShortcut: (index: number) => void;
|
|
22
|
+
atlasIMG: any;
|
|
23
|
+
atlasJSON: any;
|
|
22
24
|
}
|
|
23
25
|
|
|
24
26
|
export const Spellbook: React.FC<ISpellbookProps> = ({
|
|
@@ -30,8 +32,10 @@ export const Spellbook: React.FC<ISpellbookProps> = ({
|
|
|
30
32
|
mana,
|
|
31
33
|
onSpellClick,
|
|
32
34
|
setSpellShortcut,
|
|
33
|
-
|
|
34
|
-
|
|
35
|
+
shortcuts,
|
|
36
|
+
removeShortcut,
|
|
37
|
+
atlasIMG,
|
|
38
|
+
atlasJSON,
|
|
35
39
|
}) => {
|
|
36
40
|
const [search, setSearch] = useState('');
|
|
37
41
|
const [settingShortcutIndex, setSettingShortcutIndex] = useState(-1);
|
|
@@ -82,11 +86,13 @@ export const Spellbook: React.FC<ISpellbookProps> = ({
|
|
|
82
86
|
<Container>
|
|
83
87
|
<Title>Learned Spells</Title>
|
|
84
88
|
|
|
85
|
-
<
|
|
89
|
+
<ShortcutsSetter
|
|
86
90
|
setSettingShortcutIndex={setSettingShortcutIndex}
|
|
87
91
|
settingShortcutIndex={settingShortcutIndex}
|
|
88
|
-
shortcuts={
|
|
89
|
-
removeShortcut={
|
|
92
|
+
shortcuts={shortcuts}
|
|
93
|
+
removeShortcut={removeShortcut}
|
|
94
|
+
atlasIMG={atlasIMG}
|
|
95
|
+
atlasJSON={atlasJSON}
|
|
90
96
|
/>
|
|
91
97
|
|
|
92
98
|
<Input
|
|
@@ -1,12 +1,8 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { IShortcut, ShortcutType } from '@rpg-engine/shared';
|
|
2
2
|
|
|
3
|
-
export const
|
|
3
|
+
export const SHORTCUTS_STORAGE_KEY = 'shortcuts';
|
|
4
4
|
|
|
5
|
-
export const
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
magicWords: '',
|
|
9
|
-
name: '',
|
|
10
|
-
description: '',
|
|
11
|
-
minMagicLevelRequired: 0,
|
|
5
|
+
export const defaultShortcut: IShortcut = {
|
|
6
|
+
type: ShortcutType.None,
|
|
7
|
+
payload: null,
|
|
12
8
|
};
|
|
@@ -81,14 +81,14 @@ export const TradingMenu: React.FC<ITrandingMenu> = ({
|
|
|
81
81
|
if (onClose) onClose();
|
|
82
82
|
}}
|
|
83
83
|
width="600px"
|
|
84
|
-
cancelDrag="
|
|
84
|
+
cancelDrag="#TraderContainer"
|
|
85
85
|
>
|
|
86
86
|
<>
|
|
87
87
|
<div style={{ width: '100%' }}>
|
|
88
88
|
<Title>{Capitalize(type)} Menu</Title>
|
|
89
89
|
<hr className="golden" />
|
|
90
90
|
</div>
|
|
91
|
-
<TradingComponentScrollWrapper>
|
|
91
|
+
<TradingComponentScrollWrapper id="TraderContainer">
|
|
92
92
|
{traderItems.map((tradeItem, index) => (
|
|
93
93
|
<ItemWrapper key={`${tradeItem.key}_${index}`}>
|
|
94
94
|
<TradingItemRow
|
|
@@ -33,5 +33,64 @@ export const itemMock: ITradeResponseItem[] = [
|
|
|
33
33
|
price: 100,
|
|
34
34
|
key: SwordsBlueprint.FireSword,
|
|
35
35
|
},
|
|
36
|
+
{
|
|
37
|
+
texturePath: 'swords/broad-sword.png',
|
|
38
|
+
name: 'Silver Short Sword Premium',
|
|
39
|
+
price: 100,
|
|
40
|
+
key: SwordsBlueprint.IceSword,
|
|
41
|
+
qty: 12
|
|
42
|
+
},
|
|
43
|
+
{
|
|
44
|
+
texturePath: "swords/corruption-sword.png",
|
|
45
|
+
name: 'Short sword Best',
|
|
46
|
+
price: 100,
|
|
47
|
+
key: SwordsBlueprint.DragonsSword,
|
|
48
|
+
},
|
|
49
|
+
{
|
|
50
|
+
texturePath: 'swords/broad-sword.png',
|
|
51
|
+
name: 'Short sword Trade',
|
|
52
|
+
price: 100,
|
|
53
|
+
key: SwordsBlueprint.FireSword,
|
|
54
|
+
},
|
|
55
|
+
|
|
56
|
+
{
|
|
57
|
+
texturePath: 'swords/broad-sword.png',
|
|
58
|
+
name: 'Silver Short Sword Premium',
|
|
59
|
+
price: 100,
|
|
60
|
+
key: SwordsBlueprint.IceSword,
|
|
61
|
+
qty: 12
|
|
62
|
+
},
|
|
63
|
+
{
|
|
64
|
+
texturePath: "swords/corruption-sword.png",
|
|
65
|
+
name: 'Short sword Best',
|
|
66
|
+
price: 100,
|
|
67
|
+
key: SwordsBlueprint.DragonsSword,
|
|
68
|
+
},
|
|
69
|
+
{
|
|
70
|
+
texturePath: 'swords/broad-sword.png',
|
|
71
|
+
name: 'Short sword Trade',
|
|
72
|
+
price: 100,
|
|
73
|
+
key: SwordsBlueprint.FireSword,
|
|
74
|
+
},
|
|
75
|
+
{
|
|
76
|
+
texturePath: 'swords/broad-sword.png',
|
|
77
|
+
name: 'Silver Short Sword Premium',
|
|
78
|
+
price: 100,
|
|
79
|
+
key: SwordsBlueprint.IceSword,
|
|
80
|
+
qty: 12
|
|
81
|
+
},
|
|
82
|
+
{
|
|
83
|
+
texturePath: "swords/corruption-sword.png",
|
|
84
|
+
name: 'Short sword Best',
|
|
85
|
+
price: 100,
|
|
86
|
+
key: SwordsBlueprint.DragonsSword,
|
|
87
|
+
},
|
|
88
|
+
{
|
|
89
|
+
texturePath: 'swords/broad-sword.png',
|
|
90
|
+
name: 'Short sword Trade',
|
|
91
|
+
price: 100,
|
|
92
|
+
key: SwordsBlueprint.FireSword,
|
|
93
|
+
},
|
|
94
|
+
|
|
36
95
|
|
|
37
96
|
];
|
package/src/index.tsx
CHANGED
|
@@ -28,9 +28,9 @@ export * from './components/RangeSlider';
|
|
|
28
28
|
export * from './components/RPGUIContainer';
|
|
29
29
|
export * from './components/RPGUIRoot';
|
|
30
30
|
export * from './components/shared/SpriteFromAtlas';
|
|
31
|
+
export * from './components/Shortcuts/Shortcuts';
|
|
31
32
|
export * from './components/SkillProgressBar';
|
|
32
33
|
export * from './components/SkillsContainer';
|
|
33
|
-
export * from './components/Spellbook/QuickSpells';
|
|
34
34
|
export * from './components/Spellbook/Spellbook';
|
|
35
35
|
export * from './components/TextArea';
|
|
36
36
|
export * from './components/TimeWidget/TimeWidget';
|
|
@@ -1,8 +1,10 @@
|
|
|
1
1
|
import {
|
|
2
2
|
IItem,
|
|
3
|
-
IItemContainer,
|
|
3
|
+
IItemContainer,
|
|
4
|
+
ItemRarities,
|
|
5
|
+
ItemSlotType,
|
|
4
6
|
ItemSubType,
|
|
5
|
-
ItemType
|
|
7
|
+
ItemType,
|
|
6
8
|
} from '@rpg-engine/shared';
|
|
7
9
|
|
|
8
10
|
export const items: IItem[] = [
|
|
@@ -39,7 +41,7 @@ export const items: IItem[] = [
|
|
|
39
41
|
isStackable: false,
|
|
40
42
|
createdAt: '2022-06-04T03:18:09.335Z',
|
|
41
43
|
updatedAt: '2022-06-04T18:16:49.056Z',
|
|
42
|
-
rarity: ItemRarities.Legendary
|
|
44
|
+
rarity: ItemRarities.Legendary,
|
|
43
45
|
},
|
|
44
46
|
{
|
|
45
47
|
_id: '629acef1c7c8e8002ff73564',
|
|
@@ -55,7 +57,7 @@ export const items: IItem[] = [
|
|
|
55
57
|
layer: 1,
|
|
56
58
|
isItemContainer: false,
|
|
57
59
|
isSolid: false,
|
|
58
|
-
key: 'board-sword-
|
|
60
|
+
key: 'board-sword-20',
|
|
59
61
|
texturePath: 'ranged-weapons/bow.png',
|
|
60
62
|
textureKey: 'bow',
|
|
61
63
|
name: 'Bow',
|
|
@@ -72,7 +74,7 @@ export const items: IItem[] = [
|
|
|
72
74
|
isStackable: false,
|
|
73
75
|
createdAt: '2022-06-04T03:18:09.335Z',
|
|
74
76
|
updatedAt: '2022-06-04T18:16:49.056Z',
|
|
75
|
-
rarity: ItemRarities.Epic
|
|
77
|
+
rarity: ItemRarities.Epic,
|
|
76
78
|
},
|
|
77
79
|
{
|
|
78
80
|
_id: '629acef1c7c8e8002ff60723',
|
|
@@ -106,7 +108,7 @@ export const items: IItem[] = [
|
|
|
106
108
|
fullDescription: 'Recover your life',
|
|
107
109
|
createdAt: '2022-06-04T03:18:09.335Z',
|
|
108
110
|
updatedAt: '2022-06-04T18:16:49.056Z',
|
|
109
|
-
rarity: ItemRarities.Uncommon
|
|
111
|
+
rarity: ItemRarities.Uncommon,
|
|
110
112
|
},
|
|
111
113
|
{
|
|
112
114
|
_id: '629acek4j7c8e8002ff60034',
|
|
@@ -125,7 +127,7 @@ export const items: IItem[] = [
|
|
|
125
127
|
layer: 1,
|
|
126
128
|
isItemContainer: false,
|
|
127
129
|
isSolid: false,
|
|
128
|
-
key: 'board-sword-
|
|
130
|
+
key: 'board-sword-21',
|
|
129
131
|
texturePath: 'potions/mana-potion.png',
|
|
130
132
|
textureKey: 'mana-potion',
|
|
131
133
|
name: 'Mana Potion',
|
|
@@ -140,7 +142,7 @@ export const items: IItem[] = [
|
|
|
140
142
|
fullDescription: 'Recover your mana',
|
|
141
143
|
createdAt: '2022-06-04T03:18:09.335Z',
|
|
142
144
|
updatedAt: '2022-06-04T18:16:49.056Z',
|
|
143
|
-
rarity: ItemRarities.Rare
|
|
145
|
+
rarity: ItemRarities.Rare,
|
|
144
146
|
},
|
|
145
147
|
{
|
|
146
148
|
_id: '629acek4j7c8e8002fg60034',
|
|
@@ -174,7 +176,7 @@ export const items: IItem[] = [
|
|
|
174
176
|
fullDescription: 'Key to open things',
|
|
175
177
|
createdAt: '2022-06-04T03:18:09.335Z',
|
|
176
178
|
updatedAt: '2022-06-04T18:16:49.056Z',
|
|
177
|
-
rarity: ItemRarities.Common
|
|
179
|
+
rarity: ItemRarities.Common,
|
|
178
180
|
},
|
|
179
181
|
{
|
|
180
182
|
_id: '392acek4j7c8e8002ff60403',
|
|
@@ -208,7 +210,7 @@ export const items: IItem[] = [
|
|
|
208
210
|
fullDescription: 'Somes shard, some crafts.',
|
|
209
211
|
createdAt: '2022-06-04T03:18:09.335Z',
|
|
210
212
|
updatedAt: '2022-06-04T18:16:49.056Z',
|
|
211
|
-
rarity: ItemRarities.Common
|
|
213
|
+
rarity: ItemRarities.Common,
|
|
212
214
|
},
|
|
213
215
|
{
|
|
214
216
|
_id: '392acek4j7c8e8002ff60404',
|
|
@@ -245,7 +247,7 @@ export const items: IItem[] = [
|
|
|
245
247
|
'You see a bag. It has made using leather and it has 10 total slots.',
|
|
246
248
|
createdAt: '2022-06-04T03:18:09.335Z',
|
|
247
249
|
updatedAt: '2022-06-04T18:16:49.056Z',
|
|
248
|
-
rarity: ItemRarities.Common
|
|
250
|
+
rarity: ItemRarities.Common,
|
|
249
251
|
},
|
|
250
252
|
{
|
|
251
253
|
_id: '392acek4j7c8e80d2fs60404',
|
|
@@ -280,7 +282,7 @@ export const items: IItem[] = [
|
|
|
280
282
|
fullDescription: 'You see a stone. It is used with slingshot',
|
|
281
283
|
createdAt: '2022-06-04T03:18:09.335Z',
|
|
282
284
|
updatedAt: '2022-06-04T18:16:49.056Z',
|
|
283
|
-
rarity: ItemRarities.Common
|
|
285
|
+
rarity: ItemRarities.Common,
|
|
284
286
|
},
|
|
285
287
|
{
|
|
286
288
|
_id: '392acek4j7c8e80d2fs60404',
|
|
@@ -315,7 +317,7 @@ export const items: IItem[] = [
|
|
|
315
317
|
fullDescription: 'You see a stone. It is used with slingshot',
|
|
316
318
|
createdAt: '2022-06-04T03:18:09.335Z',
|
|
317
319
|
updatedAt: '2022-06-04T18:16:49.056Z',
|
|
318
|
-
rarity: ItemRarities.Common
|
|
320
|
+
rarity: ItemRarities.Common,
|
|
319
321
|
},
|
|
320
322
|
{
|
|
321
323
|
_id: '392acek4j7c8e80d2fs60404',
|
|
@@ -350,7 +352,7 @@ export const items: IItem[] = [
|
|
|
350
352
|
fullDescription: 'You see a stone. It is used with slingshot',
|
|
351
353
|
createdAt: '2022-06-04T03:18:09.335Z',
|
|
352
354
|
updatedAt: '2022-06-04T18:16:49.056Z',
|
|
353
|
-
rarity: ItemRarities.Common
|
|
355
|
+
rarity: ItemRarities.Common,
|
|
354
356
|
},
|
|
355
357
|
{
|
|
356
358
|
_id: '392acek4j7c8e80d2fs60404',
|
|
@@ -385,7 +387,7 @@ export const items: IItem[] = [
|
|
|
385
387
|
fullDescription: 'You see a stone. It is used with slingshot',
|
|
386
388
|
createdAt: '2022-06-04T03:18:09.335Z',
|
|
387
389
|
updatedAt: '2022-06-04T18:16:49.056Z',
|
|
388
|
-
rarity: ItemRarities.Common
|
|
390
|
+
rarity: ItemRarities.Common,
|
|
389
391
|
},
|
|
390
392
|
{
|
|
391
393
|
_id: '392acek4j7c8e80d2fs60404',
|
|
@@ -420,7 +422,7 @@ export const items: IItem[] = [
|
|
|
420
422
|
fullDescription: 'You see a stone. It is used with slingshot',
|
|
421
423
|
createdAt: '2022-06-04T03:18:09.335Z',
|
|
422
424
|
updatedAt: '2022-06-04T18:16:49.056Z',
|
|
423
|
-
rarity: ItemRarities.Common
|
|
425
|
+
rarity: ItemRarities.Common,
|
|
424
426
|
},
|
|
425
427
|
{
|
|
426
428
|
_id: '392acek4j7c8e80d2fs60404',
|
|
@@ -455,7 +457,7 @@ export const items: IItem[] = [
|
|
|
455
457
|
fullDescription: 'You see a stone. It is used with slingshot',
|
|
456
458
|
createdAt: '2022-06-04T03:18:09.335Z',
|
|
457
459
|
updatedAt: '2022-06-04T18:16:49.056Z',
|
|
458
|
-
rarity: ItemRarities.Common
|
|
460
|
+
rarity: ItemRarities.Common,
|
|
459
461
|
},
|
|
460
462
|
{
|
|
461
463
|
_id: '392acek4j7c8e80d2fs60404',
|
|
@@ -490,7 +492,7 @@ export const items: IItem[] = [
|
|
|
490
492
|
fullDescription: 'You see a stone. It is used with slingshot',
|
|
491
493
|
createdAt: '2022-06-04T03:18:09.335Z',
|
|
492
494
|
updatedAt: '2022-06-04T18:16:49.056Z',
|
|
493
|
-
rarity: ItemRarities.Common
|
|
495
|
+
rarity: ItemRarities.Common,
|
|
494
496
|
},
|
|
495
497
|
{
|
|
496
498
|
_id: '392acek4j7casd0d2fs60404',
|
|
@@ -525,8 +527,8 @@ export const items: IItem[] = [
|
|
|
525
527
|
fullDescription: 'You see a stone. It is used with slingshot',
|
|
526
528
|
createdAt: '2022-06-04T03:18:09.335Z',
|
|
527
529
|
updatedAt: '2022-06-04T18:16:49.056Z',
|
|
528
|
-
rarity: ItemRarities.Common
|
|
529
|
-
}
|
|
530
|
+
rarity: ItemRarities.Common,
|
|
531
|
+
},
|
|
530
532
|
];
|
|
531
533
|
|
|
532
534
|
export const itemContainerMock: IItemContainer = {
|
|
@@ -5,7 +5,10 @@ import {
|
|
|
5
5
|
CircularController,
|
|
6
6
|
CircularControllerProps,
|
|
7
7
|
} from '../components/CircularController/CircularController';
|
|
8
|
-
import {
|
|
8
|
+
import { SHORTCUTS_STORAGE_KEY } from '../components/Spellbook/constants';
|
|
9
|
+
import atlasJSON from '../mocks/atlas/items/items.json';
|
|
10
|
+
import atlasIMG from '../mocks/atlas/items/items.png';
|
|
11
|
+
import { itemContainerMock } from '../mocks/itemContainer.mocks';
|
|
9
12
|
|
|
10
13
|
const meta: Meta = {
|
|
11
14
|
title: 'Circular Controller',
|
|
@@ -23,11 +26,12 @@ const Template: Story<CircularControllerProps> = args => (
|
|
|
23
26
|
export const Default = Template.bind({});
|
|
24
27
|
|
|
25
28
|
Default.args = {
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
),
|
|
29
|
-
onSpellClick: key => console.log(key),
|
|
29
|
+
shortcuts: JSON.parse(localStorage.getItem(SHORTCUTS_STORAGE_KEY) as string),
|
|
30
|
+
onShortcutClick: index => console.log(index),
|
|
30
31
|
onActionClick: () => console.log('action'),
|
|
31
32
|
onCancelClick: () => console.log('cancel attack'),
|
|
32
33
|
mana: 100,
|
|
34
|
+
inventory: itemContainerMock,
|
|
35
|
+
atlasJSON,
|
|
36
|
+
atlasIMG,
|
|
33
37
|
};
|
|
@@ -1,12 +1,22 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import {
|
|
2
|
+
IItem,
|
|
3
|
+
IShortcut,
|
|
4
|
+
ItemContainerType,
|
|
5
|
+
ItemType,
|
|
6
|
+
ShortcutType,
|
|
7
|
+
} from '@rpg-engine/shared';
|
|
2
8
|
import { Meta, Story } from '@storybook/react';
|
|
3
|
-
import React, { useState } from 'react';
|
|
9
|
+
import React, { useEffect, useState } from 'react';
|
|
4
10
|
import {
|
|
5
11
|
IItemContainerProps,
|
|
6
12
|
ItemContainer,
|
|
7
13
|
} from '../../src/components/Item/Inventory/ItemContainer';
|
|
8
14
|
import { RPGUIRoot } from '../../src/components/RPGUIRoot';
|
|
9
15
|
import { itemContainerMock } from '../../src/mocks/itemContainer.mocks';
|
|
16
|
+
import {
|
|
17
|
+
defaultShortcut,
|
|
18
|
+
SHORTCUTS_STORAGE_KEY,
|
|
19
|
+
} from '../components/Spellbook/constants';
|
|
10
20
|
import atlasJSON from '../mocks/atlas/items/items.json';
|
|
11
21
|
import atlasIMG from '../mocks/atlas/items/items.png';
|
|
12
22
|
|
|
@@ -46,6 +56,67 @@ let dropSlot = -1;
|
|
|
46
56
|
|
|
47
57
|
const Template: Story<IItemContainerProps> = () => {
|
|
48
58
|
const [itemContainer, setItemContainer] = useState(itemContainerMock);
|
|
59
|
+
const [shortcuts, setShortcuts] = useState<IShortcut[]>([]);
|
|
60
|
+
|
|
61
|
+
useEffect(() => {
|
|
62
|
+
const shortcuts = localStorage.getItem(SHORTCUTS_STORAGE_KEY);
|
|
63
|
+
if (shortcuts) {
|
|
64
|
+
setShortcuts(JSON.parse(shortcuts));
|
|
65
|
+
}
|
|
66
|
+
}, []);
|
|
67
|
+
|
|
68
|
+
const setItemShortcut = (key: string, index: number) => {
|
|
69
|
+
const shortcuts = JSON.parse(
|
|
70
|
+
localStorage.getItem(SHORTCUTS_STORAGE_KEY) as string
|
|
71
|
+
) as IShortcut[];
|
|
72
|
+
|
|
73
|
+
let item: IItem | null = null;
|
|
74
|
+
|
|
75
|
+
Object.keys(itemContainer.slots).forEach(slot => {
|
|
76
|
+
const slotItem = itemContainer.slots?.[parseInt(slot)];
|
|
77
|
+
if (slotItem && slotItem.key === key) {
|
|
78
|
+
item = slotItem;
|
|
79
|
+
}
|
|
80
|
+
});
|
|
81
|
+
|
|
82
|
+
if (!item) {
|
|
83
|
+
return;
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
if (!shortcuts) {
|
|
87
|
+
const newShortcuts: IShortcut[] = Array(6).fill(defaultShortcut);
|
|
88
|
+
|
|
89
|
+
newShortcuts[index] = {
|
|
90
|
+
type: ShortcutType.Item,
|
|
91
|
+
payload: item,
|
|
92
|
+
};
|
|
93
|
+
|
|
94
|
+
localStorage.setItem(SHORTCUTS_STORAGE_KEY, JSON.stringify(newShortcuts));
|
|
95
|
+
} else {
|
|
96
|
+
shortcuts[index] = {
|
|
97
|
+
type: ShortcutType.Item,
|
|
98
|
+
payload: item,
|
|
99
|
+
};
|
|
100
|
+
|
|
101
|
+
localStorage.setItem(SHORTCUTS_STORAGE_KEY, JSON.stringify(shortcuts));
|
|
102
|
+
}
|
|
103
|
+
|
|
104
|
+
setShortcuts(shortcuts);
|
|
105
|
+
};
|
|
106
|
+
|
|
107
|
+
const removeShortcut = (index: number) => {
|
|
108
|
+
const shortcuts = JSON.parse(
|
|
109
|
+
localStorage.getItem(SHORTCUTS_STORAGE_KEY) as string
|
|
110
|
+
);
|
|
111
|
+
|
|
112
|
+
if (!shortcuts) return;
|
|
113
|
+
|
|
114
|
+
shortcuts[index] = defaultShortcut;
|
|
115
|
+
|
|
116
|
+
localStorage.setItem(SHORTCUTS_STORAGE_KEY, JSON.stringify(shortcuts));
|
|
117
|
+
|
|
118
|
+
setShortcuts(shortcuts);
|
|
119
|
+
};
|
|
49
120
|
|
|
50
121
|
return (
|
|
51
122
|
<RPGUIRoot>
|
|
@@ -116,6 +187,9 @@ const Template: Story<IItemContainerProps> = () => {
|
|
|
116
187
|
type={ItemContainerType.Inventory}
|
|
117
188
|
atlasIMG={atlasIMG}
|
|
118
189
|
atlasJSON={atlasJSON}
|
|
190
|
+
shortcuts={shortcuts}
|
|
191
|
+
setItemShortcut={setItemShortcut}
|
|
192
|
+
removeShortcut={removeShortcut}
|
|
119
193
|
/>
|
|
120
194
|
</RPGUIRoot>
|
|
121
195
|
);
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
import { Meta, Story } from '@storybook/react';
|
|
2
|
+
import React from 'react';
|
|
3
|
+
import { RPGUIRoot } from '../components/RPGUIRoot';
|
|
4
|
+
import { Shortcuts, ShortcutsProps } from '../components/Shortcuts/Shortcuts';
|
|
5
|
+
import { SHORTCUTS_STORAGE_KEY } from '../components/Spellbook/constants';
|
|
6
|
+
import atlasJSON from '../mocks/atlas/items/items.json';
|
|
7
|
+
import atlasIMG from '../mocks/atlas/items/items.png';
|
|
8
|
+
import { itemContainerMock } from '../mocks/itemContainer.mocks';
|
|
9
|
+
|
|
10
|
+
const meta: Meta = {
|
|
11
|
+
title: 'Shortcuts',
|
|
12
|
+
component: Shortcuts,
|
|
13
|
+
};
|
|
14
|
+
|
|
15
|
+
export default meta;
|
|
16
|
+
|
|
17
|
+
const Template: Story<ShortcutsProps> = args => {
|
|
18
|
+
return (
|
|
19
|
+
<RPGUIRoot>
|
|
20
|
+
<div
|
|
21
|
+
style={{
|
|
22
|
+
width: '100%',
|
|
23
|
+
}}
|
|
24
|
+
>
|
|
25
|
+
<Shortcuts {...args} />
|
|
26
|
+
</div>
|
|
27
|
+
</RPGUIRoot>
|
|
28
|
+
);
|
|
29
|
+
};
|
|
30
|
+
|
|
31
|
+
export const Default = Template.bind({});
|
|
32
|
+
Default.args = {
|
|
33
|
+
onShortcutCast: spellKey => console.log(spellKey),
|
|
34
|
+
shortcuts: JSON.parse(localStorage.getItem(SHORTCUTS_STORAGE_KEY) as string),
|
|
35
|
+
mana: 100,
|
|
36
|
+
atlasIMG,
|
|
37
|
+
atlasJSON,
|
|
38
|
+
inventory: itemContainerMock,
|
|
39
|
+
};
|