@rpg-engine/long-bow 0.8.14 → 0.8.16

package/dist/components/ConfirmModal.d.ts

@@ -1,7 +1,7 @@
-import React from 'react';
+import React, { ReactNode } from 'react';
 export interface IConfirmModalProps {
     onConfirm: () => void;
     onClose: () => void;
-    message?: string;
+    message?: string | ReactNode;
 }
 export declare const ConfirmModal: React.FC<IConfirmModalProps>;

package/dist/components/Item/Inventory/ItemPropertyColorSelector.d.ts

@@ -1,10 +1,14 @@
 import React from 'react';
-interface Props {
+interface IColorSelectorProps {
     selectedColor: string;
     isOpen: boolean;
     onClose: () => void;
     onConfirm: (color: string) => void;
     onChange: (color: string) => void;
+    costWarning?: {
+        cost: number;
+        currency?: string;
+    };
 }
-export declare const ColorSelector: React.FC<Props>;
+export declare const ColorSelector: React.FC<IColorSelectorProps>;
 export {};

package/dist/components/Item/Inventory/ItemPropertySimpleHandler.d.ts

@@ -1,10 +1,14 @@
 import React from 'react';
-interface Props {
+interface IItemPropertySimpleHandlerProps {
     isOpen: boolean;
     selectedColor: string;
     onClose: () => void;
     onConfirm: (color: string) => void;
     onChange: (color: string) => void;
+    costWarning?: {
+        cost: number;
+        currency?: string;
+    };
 }
-export declare const ItemPropertySimpleHandler: React.FC<Props>;
+export declare const ItemPropertySimpleHandler: React.FC<IItemPropertySimpleHandlerProps>;
 export {};

package/dist/long-bow.cjs.development.js

@@ -32769,61 +32769,154 @@ var ItemsContainer = /*#__PURE__*/styled__default.div.withConfig({
   return isFullScreen && '50%';
 });
 
+var ConfirmModal = function ConfirmModal(_ref) {
+  var onConfirm = _ref.onConfirm,
+    onClose = _ref.onClose,
+    _ref$message = _ref.message,
+    message = _ref$message === void 0 ? 'Are you sure?' : _ref$message;
+  var handleConfirm = function handleConfirm(e) {
+    e.preventDefault();
+    e.stopPropagation();
+    onConfirm();
+  };
+  var handleClose = function handleClose(e) {
+    e.preventDefault();
+    e.stopPropagation();
+    onClose();
+  };
+  return React__default.createElement(ModalPortal, null, React__default.createElement(Background, null), React__default.createElement(Container$t, {
+    onClick: handleClose
+  }, React__default.createElement(DraggableContainer, {
+    width: "auto",
+    dragDisabled: true
+  }, React__default.createElement(Wrapper$1, {
+    onClick: function onClick(e) {
+      return e.stopPropagation();
+    }
+  }, typeof message === 'string' ? React__default.createElement("p", null, message) : message, React__default.createElement(ButtonsWrapper, null, React__default.createElement("div", {
+    className: "cancel-button"
+  }, React__default.createElement(Button, {
+    buttonType: exports.ButtonTypes.RPGUIButton,
+    onClick: handleClose
+  }, "No")), React__default.createElement(Button, {
+    buttonType: exports.ButtonTypes.RPGUIButton,
+    onClick: handleConfirm
+  }, "Yes"))))));
+};
+var Background = /*#__PURE__*/styled__default.div.withConfig({
+  displayName: "ConfirmModal__Background",
+  componentId: "sc-11qkyu1-0"
+})(["position:absolute;width:100%;height:100%;background-color:#000000;opacity:0.5;left:0;top:0;z-index:1000;"]);
+var Container$t = /*#__PURE__*/styled__default.div.withConfig({
+  displayName: "ConfirmModal__Container",
+  componentId: "sc-11qkyu1-1"
+})(["position:absolute;width:100%;height:100%;left:0;top:0;display:flex;justify-content:center;align-items:center;z-index:1001;"]);
+var Wrapper$1 = /*#__PURE__*/styled__default.div.withConfig({
+  displayName: "ConfirmModal__Wrapper",
+  componentId: "sc-11qkyu1-2"
+})(["p{margin:0;}"]);
+var ButtonsWrapper = /*#__PURE__*/styled__default.div.withConfig({
+  displayName: "ConfirmModal__ButtonsWrapper",
+  componentId: "sc-11qkyu1-3"
+})(["display:flex;justify-content:flex-end;gap:5px;margin-top:5px;.cancel-button{filter:grayscale(0.7);}"]);
+
 var ColorSelector = function ColorSelector(_ref) {
   var selectedColor = _ref.selectedColor,
     isOpen = _ref.isOpen,
     onClose = _ref.onClose,
     onConfirm = _ref.onConfirm,
-    _onChange = _ref.onChange;
+    _onChange = _ref.onChange,
+    costWarning = _ref.costWarning;
   var _useState = React.useState(selectedColor),
     currentColor = _useState[0],
     setCurrentColor = _useState[1];
+  var _useState2 = React.useState(false),
+    showConfirmModal = _useState2[0],
+    setShowConfirmModal = _useState2[1];
   React.useEffect(function () {
     if (isOpen) setCurrentColor(selectedColor);
   }, [isOpen, selectedColor]);
-  var handleConfirm = function handleConfirm() {
+  var handleConfirm = function handleConfirm(e) {
+    e.preventDefault();
+    if (costWarning) {
+      setShowConfirmModal(true);
+    } else {
+      onConfirm(currentColor);
+      onClose();
+    }
+  };
+  var handleConfirmCost = function handleConfirmCost() {
     onConfirm(currentColor);
+    setShowConfirmModal(false);
     onClose();
   };
+  var handleClose = function handleClose() {
+    setShowConfirmModal(false);
+  };
+  var renderConfirmMessage = function renderConfirmMessage() {
+    return React__default.createElement(ConfirmContent, null, React__default.createElement("p", null, "Cost:", React__default.createElement(CostDisplay, null, costWarning == null ? void 0 : costWarning.cost.toLocaleString(), (costWarning == null ? void 0 : costWarning.currency) || ' gold')), React__default.createElement("p", null, "Proceed with color change?"));
+  };
   if (!isOpen) return null;
-  return isOpen ? React__default.createElement(DraggableContainer, {
+  return React__default.createElement(React__default.Fragment, null, React__default.createElement(DraggableContainer, {
     type: exports.RPGUIContainerTypes.Framed,
     cancelDrag: ".react-colorful",
-    width: "20rem",
+    width: "25rem",
     onCloseButton: onClose
-  }, React__default.createElement(Container$t, null, React__default.createElement(Header$3, null, "Select Color"), React__default.createElement(reactColorful.HexColorPicker, {
+  }, React__default.createElement(Container$u, null, React__default.createElement(Header$3, null, "Select Color"), React__default.createElement(ColorPickerWrapper, null, React__default.createElement(reactColorful.HexColorPicker, {
     color: currentColor,
     onChange: function onChange(color) {
       setCurrentColor(color);
       _onChange(color);
     }
-  }), React__default.createElement(Button, {
+  })), React__default.createElement(ButtonContainer$2, null, React__default.createElement(Button, {
     buttonType: exports.ButtonTypes.RPGUIButton,
     type: "button",
     onClick: handleConfirm
-  }, "Confirm"))) : null;
+  }, "Confirm")))), showConfirmModal && costWarning && React__default.createElement(ConfirmModal, {
+    message: renderConfirmMessage(),
+    onConfirm: handleConfirmCost,
+    onClose: handleClose
+  }));
 };
-var Container$t = /*#__PURE__*/styled__default.div.withConfig({
+var Container$u = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "ItemPropertyColorSelector__Container",
   componentId: "sc-me1r4z-0"
-})(["padding:2rem;text-align:center;background:inherit;"]);
+})(["text-align:center;background:inherit;display:flex;flex-direction:column;gap:1.5rem;align-items:center;width:100%;max-width:24rem;margin:0 auto;"]);
 var Header$3 = /*#__PURE__*/styled__default.h2.withConfig({
   displayName: "ItemPropertyColorSelector__Header",
   componentId: "sc-me1r4z-1"
-})(["font-family:'Press Start 2P',cursive;color:white;font-size:1rem;margin-bottom:1rem;"]);
+})(["color:white;font-size:1rem;margin:0;width:100%;text-align:center;"]);
+var ColorPickerWrapper = /*#__PURE__*/styled__default.div.withConfig({
+  displayName: "ItemPropertyColorSelector__ColorPickerWrapper",
+  componentId: "sc-me1r4z-2"
+})(["display:flex;justify-content:center;width:100%;.react-colorful{width:100%;max-width:200px;}"]);
+var ButtonContainer$2 = /*#__PURE__*/styled__default.div.withConfig({
+  displayName: "ItemPropertyColorSelector__ButtonContainer",
+  componentId: "sc-me1r4z-3"
+})(["display:flex;justify-content:center;width:100%;"]);
+var ConfirmContent = /*#__PURE__*/styled__default.div.withConfig({
+  displayName: "ItemPropertyColorSelector__ConfirmContent",
+  componentId: "sc-me1r4z-4"
+})(["display:flex;flex-direction:column;gap:0.5rem;text-align:center;font-family:'Press Start 2P',cursive;font-size:0.75rem;"]);
+var CostDisplay = /*#__PURE__*/styled__default.span.withConfig({
+  displayName: "ItemPropertyColorSelector__CostDisplay",
+  componentId: "sc-me1r4z-5"
+})(["color:", " !important;"], uiColors.yellow);
 
 var ItemPropertySimpleHandler = function ItemPropertySimpleHandler(_ref) {
   var isOpen = _ref.isOpen,
     selectedColor = _ref.selectedColor,
     onClose = _ref.onClose,
     onConfirm = _ref.onConfirm,
-    onChange = _ref.onChange;
+    onChange = _ref.onChange,
+    costWarning = _ref.costWarning;
   return React__default.createElement(ColorSelector, {
     selectedColor: selectedColor,
     isOpen: isOpen,
     onClose: onClose,
     onConfirm: onConfirm,
-    onChange: onChange
+    onChange: onChange,
+    costWarning: costWarning
   });
 };
 
@@ -33141,7 +33234,7 @@ var ListMenu = function ListMenu(_ref) {
     onSelected = _ref.onSelected,
     x = _ref.x,
     y = _ref.y;
-  return React__default.createElement(Container$u, {
+  return React__default.createElement(Container$v, {
     x: x,
     y: y
   }, React__default.createElement("ul", {
@@ -33158,7 +33251,7 @@ var ListMenu = function ListMenu(_ref) {
     }, (params == null ? void 0 : params.text) || 'No text');
   })));
 };
-var Container$u = /*#__PURE__*/styled__default.div.withConfig({
+var Container$v = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "ListMenu__Container",
   componentId: "sc-i9097t-0"
 })(["display:flex;flex-direction:column;width:100%;justify-content:start;align-items:flex-start;position:absolute;top:", "px;left:", "px;li{font-size:", ";}"], function (props) {
@@ -33177,7 +33270,7 @@ var Pager = function Pager(_ref) {
     itemsPerPage = _ref.itemsPerPage,
     onPageChange = _ref.onPageChange;
   var totalPages = Math.ceil(totalItems / itemsPerPage);
-  return React__default.createElement(Container$v, null, React__default.createElement("p", null, "Total items: ", totalItems), React__default.createElement(PagerContainer, null, React__default.createElement("button", {
+  return React__default.createElement(Container$w, null, React__default.createElement("p", null, "Total items: ", totalItems), React__default.createElement(PagerContainer, null, React__default.createElement("button", {
     disabled: currentPage === 1,
     onPointerDown: function onPointerDown() {
       return onPageChange(Math.max(currentPage - 1, 1));
@@ -33191,7 +33284,7 @@ var Pager = function Pager(_ref) {
     }
   }, '>')));
 };
-var Container$v = /*#__PURE__*/styled__default.div.withConfig({
+var Container$w = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "Pager__Container",
   componentId: "sc-1ekmf50-0"
 })(["display:flex;flex-direction:column;align-items:center;p{margin:0;font-size:", ";}"], uiFonts.size.xsmall);
@@ -33200,46 +33293,6 @@ var PagerContainer = /*#__PURE__*/styled__default.div.withConfig({
   componentId: "sc-1ekmf50-1"
 })(["display:flex;justify-content:center;align-items:center;gap:5px;p{margin:0;}div{color:white;}button{width:40px;height:40px;background-color:", ";border:none;border-radius:5px;color:white;:hover{background-color:", ";}:disabled{opacity:0.5;}&.active{background-color:", ";font-weight:bold;color:black;}}"], uiColors.darkGray, uiColors.lightGray, uiColors.orange);
 
-var ConfirmModal = function ConfirmModal(_ref) {
-  var onConfirm = _ref.onConfirm,
-    onClose = _ref.onClose,
-    message = _ref.message;
-  return React__default.createElement(ModalPortal, null, React__default.createElement(Background, null), React__default.createElement(Container$w, {
-    onPointerDown: onClose
-  }, React__default.createElement(DraggableContainer, {
-    width: "auto",
-    dragDisabled: true
-  }, React__default.createElement(Wrapper$1, {
-    onPointerDown: function onPointerDown(e) {
-      return e.stopPropagation();
-    }
-  }, React__default.createElement("p", null, message != null ? message : 'Are you sure?'), React__default.createElement(ButtonsWrapper, null, React__default.createElement("div", {
-    className: "cancel-button"
-  }, React__default.createElement(Button, {
-    buttonType: exports.ButtonTypes.RPGUIButton,
-    onPointerDown: onClose
-  }, "No")), React__default.createElement(Button, {
-    buttonType: exports.ButtonTypes.RPGUIButton,
-    onPointerDown: onConfirm
-  }, "Yes"))))));
-};
-var Background = /*#__PURE__*/styled__default.div.withConfig({
-  displayName: "ConfirmModal__Background",
-  componentId: "sc-11qkyu1-0"
-})(["position:absolute;width:100%;height:100%;background-color:#000000;opacity:0.5;left:0;top:0;z-index:1000;"]);
-var Container$w = /*#__PURE__*/styled__default.div.withConfig({
-  displayName: "ConfirmModal__Container",
-  componentId: "sc-11qkyu1-1"
-})(["position:absolute;width:100%;height:100%;left:0;top:0;display:flex;justify-content:center;align-items:center;z-index:1001;"]);
-var Wrapper$1 = /*#__PURE__*/styled__default.div.withConfig({
-  displayName: "ConfirmModal__Wrapper",
-  componentId: "sc-11qkyu1-2"
-})(["p{margin:0;}"]);
-var ButtonsWrapper = /*#__PURE__*/styled__default.div.withConfig({
-  displayName: "ConfirmModal__ButtonsWrapper",
-  componentId: "sc-11qkyu1-3"
-})(["display:flex;justify-content:flex-end;gap:5px;margin-top:5px;.cancel-button{filter:grayscale(0.7);}"]);
-
 var MarketplaceRows = function MarketplaceRows(_ref) {
   var atlasJSON = _ref.atlasJSON,
     atlasIMG = _ref.atlasIMG,
@@ -33285,7 +33338,7 @@ var MarketplaceRows = function MarketplaceRows(_ref) {
     maxLines: 1,
     maxWidth: "200px",
     fontSize: "10px"
-  }, "$", itemPrice)))), React__default.createElement(ButtonContainer$2, null, React__default.createElement(Button, {
+  }, "$", itemPrice)))), React__default.createElement(ButtonContainer$3, null, React__default.createElement(Button, {
     buttonType: exports.ButtonTypes.RPGUIButton,
     disabled: disabled,
     onPointerDown: function onPointerDown() {
@@ -33327,7 +33380,7 @@ var PriceValue = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "MarketplaceRows__PriceValue",
   componentId: "sc-wmpr1o-7"
 })(["margin-left:40px;"]);
-var ButtonContainer$2 = /*#__PURE__*/styled__default.div.withConfig({
+var ButtonContainer$3 = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "MarketplaceRows__ButtonContainer",
   componentId: "sc-wmpr1o-8"
 })(["margin:auto;"]);
@@ -34095,7 +34148,7 @@ var PartyManagerRow = function PartyManagerRow(_ref) {
   }, charName, " ", isCurrentUser ? '(You)' : '', " ", isLeader ? '(Leader)' : '')), React__default.createElement(TextContainer$5, null, React__default.createElement(Ellipsis, {
     maxLines: 1,
     maxWidth: "300px"
-  }, charClass)), React__default.createElement(ButtonContainer$3, null, canRemove && React__default.createElement(HighlightedText, {
+  }, charClass)), React__default.createElement(ButtonContainer$4, null, canRemove && React__default.createElement(HighlightedText, {
     onPointerDown: function onPointerDown() {
       return onRemovePlayer(id);
     }
@@ -34113,7 +34166,7 @@ var TextContainer$5 = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "PartyManagerRows__TextContainer",
   componentId: "sc-uqajew-1"
 })(["color:", ";overflow:hidden;white-space:nowrap;text-overflow:ellipsis;"], uiColors.white);
-var ButtonContainer$3 = /*#__PURE__*/styled__default.div.withConfig({
+var ButtonContainer$4 = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "PartyManagerRows__ButtonContainer",
   componentId: "sc-uqajew-2"
 })(["display:flex;align-items:center;gap:1rem;justify-content:flex-start;"]);