@rpg-engine/long-bow 0.3.39 → 0.3.41
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 +10 -0
- package/dist/components/Spellbook/QuickSpells.d.ts +1 -0
- package/dist/index.d.ts +1 -0
- package/dist/long-bow.cjs.development.js +121 -51
- 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 +120 -52
- package/dist/long-bow.esm.js.map +1 -1
- package/dist/stories/CircullarController.stories.d.ts +5 -0
- package/package.json +2 -2
- package/src/.DS_Store +0 -0
- package/src/components/CircularController/CircularController.tsx +162 -0
- package/src/components/NPCDialog/.DS_Store +0 -0
- package/src/components/NPCDialog/img/.DS_Store +0 -0
- package/src/components/Spellbook/QuickSpells.tsx +5 -1
- package/src/components/TradingMenu/TradingItemRow.tsx +2 -1
- package/src/index.tsx +1 -0
- package/src/mocks/.DS_Store +0 -0
- package/src/mocks/atlas/.DS_Store +0 -0
- package/src/stories/CircullarController.stories.tsx +33 -0
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { IRawSpell } from '@rpg-engine/shared';
|
|
2
|
+
import React from 'react';
|
|
3
|
+
export declare type CircularControllerProps = {
|
|
4
|
+
onActionClick: () => void;
|
|
5
|
+
onCancelClick: () => void;
|
|
6
|
+
onSpellClick: (spellKey: string) => void;
|
|
7
|
+
mana: number;
|
|
8
|
+
spells: IRawSpell[];
|
|
9
|
+
};
|
|
10
|
+
export declare const CircularController: React.FC<CircularControllerProps>;
|
package/dist/index.d.ts
CHANGED
|
@@ -3,6 +3,7 @@ export * from './components/Character/CharacterSelection';
|
|
|
3
3
|
export * from './components/Chat/Chat';
|
|
4
4
|
export * from './components/Chatdeprecated/ChatDeprecated';
|
|
5
5
|
export * from './components/CheckButton';
|
|
6
|
+
export * from './components/CircularController/CircularController';
|
|
6
7
|
export * from './components/CraftBook/CraftBook';
|
|
7
8
|
export * from './components/DraggableContainer';
|
|
8
9
|
export * from './components/Dropdown';
|
|
@@ -33059,6 +33059,123 @@ var CheckButton = function CheckButton(_ref) {
|
|
|
33059
33059
|
}));
|
|
33060
33060
|
};
|
|
33061
33061
|
|
|
33062
|
+
var QuickSpells = function QuickSpells(_ref) {
|
|
33063
|
+
var quickSpells = _ref.quickSpells,
|
|
33064
|
+
onSpellCast = _ref.onSpellCast,
|
|
33065
|
+
mana = _ref.mana,
|
|
33066
|
+
_ref$isBlockedCasting = _ref.isBlockedCastingByKeyboard,
|
|
33067
|
+
isBlockedCastingByKeyboard = _ref$isBlockedCasting === void 0 ? false : _ref$isBlockedCasting;
|
|
33068
|
+
React.useEffect(function () {
|
|
33069
|
+
var handleKeyDown = function handleKeyDown(e) {
|
|
33070
|
+
if (isBlockedCastingByKeyboard) return;
|
|
33071
|
+
var shortcutIndex = Number(e.key) - 1;
|
|
33072
|
+
if (shortcutIndex >= 0 && shortcutIndex <= 3) {
|
|
33073
|
+
var shortcut = quickSpells[shortcutIndex];
|
|
33074
|
+
if (shortcut != null && shortcut.key && mana >= (shortcut == null ? void 0 : shortcut.manaCost)) {
|
|
33075
|
+
onSpellCast(shortcut.key);
|
|
33076
|
+
}
|
|
33077
|
+
}
|
|
33078
|
+
};
|
|
33079
|
+
window.addEventListener('keydown', handleKeyDown);
|
|
33080
|
+
return function () {
|
|
33081
|
+
window.removeEventListener('keydown', handleKeyDown);
|
|
33082
|
+
};
|
|
33083
|
+
}, [quickSpells, isBlockedCastingByKeyboard]);
|
|
33084
|
+
return React__default.createElement(List, null, Array.from({
|
|
33085
|
+
length: 4
|
|
33086
|
+
}).map(function (_, i) {
|
|
33087
|
+
var _quickSpells$i, _quickSpells$i2, _quickSpells$i3, _quickSpells$i4, _quickSpells$i5;
|
|
33088
|
+
return React__default.createElement(SpellShortcut, {
|
|
33089
|
+
key: i,
|
|
33090
|
+
onClick: onSpellCast.bind(null, (_quickSpells$i = quickSpells[i]) == null ? void 0 : _quickSpells$i.key),
|
|
33091
|
+
disabled: mana < ((_quickSpells$i2 = quickSpells[i]) == null ? void 0 : _quickSpells$i2.manaCost)
|
|
33092
|
+
}, React__default.createElement("span", {
|
|
33093
|
+
className: "mana"
|
|
33094
|
+
}, ((_quickSpells$i3 = quickSpells[i]) == null ? void 0 : _quickSpells$i3.key) && ((_quickSpells$i4 = quickSpells[i]) == null ? void 0 : _quickSpells$i4.manaCost)), React__default.createElement("span", {
|
|
33095
|
+
className: "magicWords"
|
|
33096
|
+
}, (_quickSpells$i5 = quickSpells[i]) == null ? void 0 : _quickSpells$i5.magicWords.split(' ').map(function (word) {
|
|
33097
|
+
return word[0];
|
|
33098
|
+
})), React__default.createElement("span", {
|
|
33099
|
+
className: "keyboard"
|
|
33100
|
+
}, i + 1));
|
|
33101
|
+
}));
|
|
33102
|
+
};
|
|
33103
|
+
var SpellShortcut = /*#__PURE__*/styled.button.withConfig({
|
|
33104
|
+
displayName: "QuickSpells__SpellShortcut",
|
|
33105
|
+
componentId: "sc-41yq7s-0"
|
|
33106
|
+
})(["width:3rem;height:3rem;background-color:", ";border:2px solid ", ";border-radius:50%;text-transform:uppercase;font-size:0.7rem;font-weight:bold;display:flex;align-items:center;justify-content:center;position:relative;span{pointer-events:none;}.mana{position:absolute;top:-5px;right:0;font-size:0.65rem;color:", ";}.magicWords{margin-top:4px;}.keyboard{position:absolute;bottom:-5px;left:0;font-size:0.65rem;color:", ";}&:hover,&:focus{background-color:", ";}&:active{background-color:", ";}&:disabled{opacity:0.5;}"], uiColors.lightGray, uiColors.darkGray, uiColors.blue, uiColors.yellow, uiColors.darkGray, uiColors.gray);
|
|
33107
|
+
var List = /*#__PURE__*/styled.p.withConfig({
|
|
33108
|
+
displayName: "QuickSpells__List",
|
|
33109
|
+
componentId: "sc-41yq7s-1"
|
|
33110
|
+
})(["width:100%;display:flex;align-items:center;justify-content:center;gap:0.5rem;box-sizing:border-box;margin:0 !important;"]);
|
|
33111
|
+
|
|
33112
|
+
var CircularController = function CircularController(_ref) {
|
|
33113
|
+
var onActionClick = _ref.onActionClick,
|
|
33114
|
+
onCancelClick = _ref.onCancelClick,
|
|
33115
|
+
onSpellClick = _ref.onSpellClick,
|
|
33116
|
+
mana = _ref.mana,
|
|
33117
|
+
spells = _ref.spells;
|
|
33118
|
+
var onTouchStart = function onTouchStart(e) {
|
|
33119
|
+
var target = e.target;
|
|
33120
|
+
target == null ? void 0 : target.classList.add('active');
|
|
33121
|
+
};
|
|
33122
|
+
var onTouchEnd = function onTouchEnd(action, e) {
|
|
33123
|
+
var target = e.target;
|
|
33124
|
+
setTimeout(function () {
|
|
33125
|
+
target == null ? void 0 : target.classList.remove('active');
|
|
33126
|
+
}, 100);
|
|
33127
|
+
action();
|
|
33128
|
+
};
|
|
33129
|
+
return React__default.createElement(ButtonsContainer, null, React__default.createElement(SpellsContainer, null, Array.from({
|
|
33130
|
+
length: 4
|
|
33131
|
+
}).map(function (_, i) {
|
|
33132
|
+
var variant = i === 0 ? 'top' : i === 3 ? 'bottom' : '';
|
|
33133
|
+
var spell = spells[i];
|
|
33134
|
+
var onSpellClickBinded = spell ? onSpellClick.bind(null, spell.key) : function () {};
|
|
33135
|
+
return React__default.createElement(StyledShortcut, {
|
|
33136
|
+
key: i,
|
|
33137
|
+
disabled: mana < (spell == null ? void 0 : spell.manaCost),
|
|
33138
|
+
onTouchStart: onTouchStart,
|
|
33139
|
+
onTouchEnd: onTouchEnd.bind(null, onSpellClickBinded),
|
|
33140
|
+
className: variant
|
|
33141
|
+
}, React__default.createElement("span", {
|
|
33142
|
+
className: "mana"
|
|
33143
|
+
}, (spell == null ? void 0 : spell.key) && (spell == null ? void 0 : spell.manaCost)), React__default.createElement("span", {
|
|
33144
|
+
className: "magicWords"
|
|
33145
|
+
}, spell == null ? void 0 : spell.magicWords.split(' ').map(function (word) {
|
|
33146
|
+
return word[0];
|
|
33147
|
+
})));
|
|
33148
|
+
})), React__default.createElement(Button$2, {
|
|
33149
|
+
onTouchStart: onTouchStart,
|
|
33150
|
+
onTouchEnd: onTouchEnd.bind(null, onActionClick)
|
|
33151
|
+
}, React__default.createElement("div", {
|
|
33152
|
+
className: "rpgui-icon sword"
|
|
33153
|
+
})), React__default.createElement(CancelButton, {
|
|
33154
|
+
onTouchStart: onTouchStart,
|
|
33155
|
+
onTouchEnd: onTouchEnd.bind(null, onCancelClick)
|
|
33156
|
+
}, React__default.createElement("span", null, "X")));
|
|
33157
|
+
};
|
|
33158
|
+
var Button$2 = /*#__PURE__*/styled.button.withConfig({
|
|
33159
|
+
displayName: "CircularController__Button",
|
|
33160
|
+
componentId: "sc-1fewf3h-0"
|
|
33161
|
+
})(["width:4.3rem;height:4.3rem;background-color:", ";border:2px solid ", ";border-radius:50%;text-transform:uppercase;font-size:0.7rem;font-weight:bold;display:flex;align-items:center;justify-content:center;position:relative;transition:background-color 0.1s;&.active{background-color:", ";}.sword{transform:rotate(-45deg);height:2.5rem;width:1.9rem;pointer-events:none;}"], uiColors.lightGray, uiColors.darkGray, uiColors.gray);
|
|
33162
|
+
var CancelButton = /*#__PURE__*/styled(Button$2).withConfig({
|
|
33163
|
+
displayName: "CircularController__CancelButton",
|
|
33164
|
+
componentId: "sc-1fewf3h-1"
|
|
33165
|
+
})(["width:3rem;height:3rem;font-size:0.8rem;span{margin-top:4px;margin-left:2px;pointer-events:none;}"]);
|
|
33166
|
+
var ButtonsContainer = /*#__PURE__*/styled.div.withConfig({
|
|
33167
|
+
displayName: "CircularController__ButtonsContainer",
|
|
33168
|
+
componentId: "sc-1fewf3h-2"
|
|
33169
|
+
})(["display:flex;align-items:center;justify-content:center;gap:0.5rem;"]);
|
|
33170
|
+
var SpellsContainer = /*#__PURE__*/styled.div.withConfig({
|
|
33171
|
+
displayName: "CircularController__SpellsContainer",
|
|
33172
|
+
componentId: "sc-1fewf3h-3"
|
|
33173
|
+
})(["display:flex;align-items:center;justify-content:center;gap:0.4rem;flex-direction:column;.top{transform:translate(93%,25%);}.bottom{transform:translate(93%,-25%);}"]);
|
|
33174
|
+
var StyledShortcut = /*#__PURE__*/styled(SpellShortcut).withConfig({
|
|
33175
|
+
displayName: "CircularController__StyledShortcut",
|
|
33176
|
+
componentId: "sc-1fewf3h-4"
|
|
33177
|
+
})(["width:2.5rem;height:2.5rem;transition:background-color 0.1s;.mana{font-size:0.5rem;}&:hover,&:focus,&:active{background-color:", ";}&.active{background-color:", ";}"], uiColors.lightGray, uiColors.gray);
|
|
33178
|
+
|
|
33062
33179
|
function useOutsideClick(ref, id) {
|
|
33063
33180
|
React.useEffect(function () {
|
|
33064
33181
|
/**
|
|
@@ -35453,56 +35570,6 @@ var CloseButton$3 = /*#__PURE__*/styled.div.withConfig({
|
|
|
35453
35570
|
componentId: "sc-1g0c67q-2"
|
|
35454
35571
|
})(["position:absolute;top:2px;right:2px;color:white;z-index:22;font-size:1.1rem;"]);
|
|
35455
35572
|
|
|
35456
|
-
var QuickSpells = function QuickSpells(_ref) {
|
|
35457
|
-
var quickSpells = _ref.quickSpells,
|
|
35458
|
-
onSpellCast = _ref.onSpellCast,
|
|
35459
|
-
mana = _ref.mana,
|
|
35460
|
-
_ref$isBlockedCasting = _ref.isBlockedCastingByKeyboard,
|
|
35461
|
-
isBlockedCastingByKeyboard = _ref$isBlockedCasting === void 0 ? false : _ref$isBlockedCasting;
|
|
35462
|
-
React.useEffect(function () {
|
|
35463
|
-
var handleKeyDown = function handleKeyDown(e) {
|
|
35464
|
-
if (isBlockedCastingByKeyboard) return;
|
|
35465
|
-
var shortcutIndex = Number(e.key) - 1;
|
|
35466
|
-
if (shortcutIndex >= 0 && shortcutIndex <= 3) {
|
|
35467
|
-
var shortcut = quickSpells[shortcutIndex];
|
|
35468
|
-
if (shortcut != null && shortcut.key && mana >= (shortcut == null ? void 0 : shortcut.manaCost)) {
|
|
35469
|
-
onSpellCast(shortcut.key);
|
|
35470
|
-
}
|
|
35471
|
-
}
|
|
35472
|
-
};
|
|
35473
|
-
window.addEventListener('keydown', handleKeyDown);
|
|
35474
|
-
return function () {
|
|
35475
|
-
window.removeEventListener('keydown', handleKeyDown);
|
|
35476
|
-
};
|
|
35477
|
-
}, [quickSpells, isBlockedCastingByKeyboard]);
|
|
35478
|
-
return React__default.createElement(List, null, Array.from({
|
|
35479
|
-
length: 4
|
|
35480
|
-
}).map(function (_, i) {
|
|
35481
|
-
var _quickSpells$i, _quickSpells$i2, _quickSpells$i3, _quickSpells$i4, _quickSpells$i5;
|
|
35482
|
-
return React__default.createElement(SpellShortcut, {
|
|
35483
|
-
key: i,
|
|
35484
|
-
onClick: onSpellCast.bind(null, (_quickSpells$i = quickSpells[i]) == null ? void 0 : _quickSpells$i.key),
|
|
35485
|
-
disabled: mana < ((_quickSpells$i2 = quickSpells[i]) == null ? void 0 : _quickSpells$i2.manaCost)
|
|
35486
|
-
}, React__default.createElement("span", {
|
|
35487
|
-
className: "mana"
|
|
35488
|
-
}, ((_quickSpells$i3 = quickSpells[i]) == null ? void 0 : _quickSpells$i3.key) && ((_quickSpells$i4 = quickSpells[i]) == null ? void 0 : _quickSpells$i4.manaCost)), React__default.createElement("span", {
|
|
35489
|
-
className: "magicWords"
|
|
35490
|
-
}, (_quickSpells$i5 = quickSpells[i]) == null ? void 0 : _quickSpells$i5.magicWords.split(' ').map(function (word) {
|
|
35491
|
-
return word[0];
|
|
35492
|
-
})), React__default.createElement("span", {
|
|
35493
|
-
className: "keyboard"
|
|
35494
|
-
}, i + 1));
|
|
35495
|
-
}));
|
|
35496
|
-
};
|
|
35497
|
-
var SpellShortcut = /*#__PURE__*/styled.button.withConfig({
|
|
35498
|
-
displayName: "QuickSpells__SpellShortcut",
|
|
35499
|
-
componentId: "sc-41yq7s-0"
|
|
35500
|
-
})(["width:3rem;height:3rem;background-color:", ";border:2px solid ", ";border-radius:50%;text-transform:uppercase;font-size:0.7rem;font-weight:bold;display:flex;align-items:center;justify-content:center;position:relative;.mana{position:absolute;top:-5px;right:0;font-size:0.65rem;color:", ";}.magicWords{margin-top:4px;}.keyboard{position:absolute;bottom:-5px;left:0;font-size:0.65rem;color:", ";}&:hover,&:focus{background-color:", ";}&:active{background-color:", ";}&:disabled{opacity:0.5;}"], uiColors.lightGray, uiColors.darkGray, uiColors.blue, uiColors.yellow, uiColors.darkGray, uiColors.gray);
|
|
35501
|
-
var List = /*#__PURE__*/styled.p.withConfig({
|
|
35502
|
-
displayName: "QuickSpells__List",
|
|
35503
|
-
componentId: "sc-41yq7s-1"
|
|
35504
|
-
})(["width:100%;display:flex;align-items:center;justify-content:center;gap:0.5rem;box-sizing:border-box;margin:0 !important;"]);
|
|
35505
|
-
|
|
35506
35573
|
var Spell = function Spell(_ref) {
|
|
35507
35574
|
var spellKey = _ref.spellKey,
|
|
35508
35575
|
name = _ref.name,
|
|
@@ -35767,7 +35834,8 @@ var TradingItemRow = function TradingItemRow(_ref) {
|
|
|
35767
35834
|
};
|
|
35768
35835
|
var onRightOutClick = function onRightOutClick() {
|
|
35769
35836
|
var _traderItem$qty2;
|
|
35770
|
-
if (selectedQty < ((_traderItem$qty2 = traderItem.qty) != null ? _traderItem$qty2 : 999)) {
|
|
35837
|
+
if (selectedQty + 10 < ((_traderItem$qty2 = traderItem.qty) != null ? _traderItem$qty2 : 999)) {
|
|
35838
|
+
console.log(traderItem);
|
|
35771
35839
|
var newQuantity = selectedQty + 10;
|
|
35772
35840
|
onQuantityChange(traderItem, newQuantity);
|
|
35773
35841
|
}
|
|
@@ -35992,6 +36060,7 @@ exports.CharacterSelection = CharacterSelection;
|
|
|
35992
36060
|
exports.Chat = Chat;
|
|
35993
36061
|
exports.ChatDeprecated = ChatDeprecated;
|
|
35994
36062
|
exports.CheckButton = CheckButton;
|
|
36063
|
+
exports.CircularController = CircularController;
|
|
35995
36064
|
exports.CraftBook = CraftBook;
|
|
35996
36065
|
exports.DraggableContainer = DraggableContainer;
|
|
35997
36066
|
exports.Dropdown = Dropdown;
|
|
@@ -36019,6 +36088,7 @@ exports.RPGUIRoot = RPGUIRoot;
|
|
|
36019
36088
|
exports.RangeSlider = RangeSlider;
|
|
36020
36089
|
exports.SkillProgressBar = SkillProgressBar;
|
|
36021
36090
|
exports.SkillsContainer = SkillsContainer;
|
|
36091
|
+
exports.SpellShortcut = SpellShortcut;
|
|
36022
36092
|
exports.Spellbook = Spellbook;
|
|
36023
36093
|
exports.SpriteFromAtlas = SpriteFromAtlas;
|
|
36024
36094
|
exports.TextArea = TextArea;
|