@rpg-engine/long-bow 0.8.14 → 0.8.16

package/dist/long-bow.esm.js

@@ -32765,61 +32765,154 @@ var ItemsContainer = /*#__PURE__*/styled.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.createElement(ModalPortal, null, React.createElement(Background, null), React.createElement(Container$t, {
+    onClick: handleClose
+  }, React.createElement(DraggableContainer, {
+    width: "auto",
+    dragDisabled: true
+  }, React.createElement(Wrapper$1, {
+    onClick: function onClick(e) {
+      return e.stopPropagation();
+    }
+  }, typeof message === 'string' ? React.createElement("p", null, message) : message, React.createElement(ButtonsWrapper, null, React.createElement("div", {
+    className: "cancel-button"
+  }, React.createElement(Button, {
+    buttonType: ButtonTypes.RPGUIButton,
+    onClick: handleClose
+  }, "No")), React.createElement(Button, {
+    buttonType: ButtonTypes.RPGUIButton,
+    onClick: handleConfirm
+  }, "Yes"))))));
+};
+var Background = /*#__PURE__*/styled.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.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.div.withConfig({
+  displayName: "ConfirmModal__Wrapper",
+  componentId: "sc-11qkyu1-2"
+})(["p{margin:0;}"]);
+var ButtonsWrapper = /*#__PURE__*/styled.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 = useState(selectedColor),
     currentColor = _useState[0],
     setCurrentColor = _useState[1];
+  var _useState2 = useState(false),
+    showConfirmModal = _useState2[0],
+    setShowConfirmModal = _useState2[1];
   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.createElement(ConfirmContent, null, React.createElement("p", null, "Cost:", React.createElement(CostDisplay, null, costWarning == null ? void 0 : costWarning.cost.toLocaleString(), (costWarning == null ? void 0 : costWarning.currency) || ' gold')), React.createElement("p", null, "Proceed with color change?"));
+  };
   if (!isOpen) return null;
-  return isOpen ? React.createElement(DraggableContainer, {
+  return React.createElement(React.Fragment, null, React.createElement(DraggableContainer, {
     type: RPGUIContainerTypes.Framed,
     cancelDrag: ".react-colorful",
-    width: "20rem",
+    width: "25rem",
     onCloseButton: onClose
-  }, React.createElement(Container$t, null, React.createElement(Header$3, null, "Select Color"), React.createElement(HexColorPicker, {
+  }, React.createElement(Container$u, null, React.createElement(Header$3, null, "Select Color"), React.createElement(ColorPickerWrapper, null, React.createElement(HexColorPicker, {
     color: currentColor,
     onChange: function onChange(color) {
       setCurrentColor(color);
       _onChange(color);
     }
-  }), React.createElement(Button, {
+  })), React.createElement(ButtonContainer$2, null, React.createElement(Button, {
     buttonType: ButtonTypes.RPGUIButton,
     type: "button",
     onClick: handleConfirm
-  }, "Confirm"))) : null;
+  }, "Confirm")))), showConfirmModal && costWarning && React.createElement(ConfirmModal, {
+    message: renderConfirmMessage(),
+    onConfirm: handleConfirmCost,
+    onClose: handleClose
+  }));
 };
-var Container$t = /*#__PURE__*/styled.div.withConfig({
+var Container$u = /*#__PURE__*/styled.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.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.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.div.withConfig({
+  displayName: "ItemPropertyColorSelector__ButtonContainer",
+  componentId: "sc-me1r4z-3"
+})(["display:flex;justify-content:center;width:100%;"]);
+var ConfirmContent = /*#__PURE__*/styled.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.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.createElement(ColorSelector, {
     selectedColor: selectedColor,
     isOpen: isOpen,
     onClose: onClose,
     onConfirm: onConfirm,
-    onChange: onChange
+    onChange: onChange,
+    costWarning: costWarning
   });
 };
 
@@ -33137,7 +33230,7 @@ var ListMenu = function ListMenu(_ref) {
     onSelected = _ref.onSelected,
     x = _ref.x,
     y = _ref.y;
-  return React.createElement(Container$u, {
+  return React.createElement(Container$v, {
     x: x,
     y: y
   }, React.createElement("ul", {
@@ -33154,7 +33247,7 @@ var ListMenu = function ListMenu(_ref) {
     }, (params == null ? void 0 : params.text) || 'No text');
   })));
 };
-var Container$u = /*#__PURE__*/styled.div.withConfig({
+var Container$v = /*#__PURE__*/styled.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) {
@@ -33173,7 +33266,7 @@ var Pager = function Pager(_ref) {
     itemsPerPage = _ref.itemsPerPage,
     onPageChange = _ref.onPageChange;
   var totalPages = Math.ceil(totalItems / itemsPerPage);
-  return React.createElement(Container$v, null, React.createElement("p", null, "Total items: ", totalItems), React.createElement(PagerContainer, null, React.createElement("button", {
+  return React.createElement(Container$w, null, React.createElement("p", null, "Total items: ", totalItems), React.createElement(PagerContainer, null, React.createElement("button", {
     disabled: currentPage === 1,
     onPointerDown: function onPointerDown() {
       return onPageChange(Math.max(currentPage - 1, 1));
@@ -33187,7 +33280,7 @@ var Pager = function Pager(_ref) {
     }
   }, '>')));
 };
-var Container$v = /*#__PURE__*/styled.div.withConfig({
+var Container$w = /*#__PURE__*/styled.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);
@@ -33196,46 +33289,6 @@ var PagerContainer = /*#__PURE__*/styled.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.createElement(ModalPortal, null, React.createElement(Background, null), React.createElement(Container$w, {
-    onPointerDown: onClose
-  }, React.createElement(DraggableContainer, {
-    width: "auto",
-    dragDisabled: true
-  }, React.createElement(Wrapper$1, {
-    onPointerDown: function onPointerDown(e) {
-      return e.stopPropagation();
-    }
-  }, React.createElement("p", null, message != null ? message : 'Are you sure?'), React.createElement(ButtonsWrapper, null, React.createElement("div", {
-    className: "cancel-button"
-  }, React.createElement(Button, {
-    buttonType: ButtonTypes.RPGUIButton,
-    onPointerDown: onClose
-  }, "No")), React.createElement(Button, {
-    buttonType: ButtonTypes.RPGUIButton,
-    onPointerDown: onConfirm
-  }, "Yes"))))));
-};
-var Background = /*#__PURE__*/styled.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.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.div.withConfig({
-  displayName: "ConfirmModal__Wrapper",
-  componentId: "sc-11qkyu1-2"
-})(["p{margin:0;}"]);
-var ButtonsWrapper = /*#__PURE__*/styled.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,
@@ -33281,7 +33334,7 @@ var MarketplaceRows = function MarketplaceRows(_ref) {
     maxLines: 1,
     maxWidth: "200px",
     fontSize: "10px"
-  }, "$", itemPrice)))), React.createElement(ButtonContainer$2, null, React.createElement(Button, {
+  }, "$", itemPrice)))), React.createElement(ButtonContainer$3, null, React.createElement(Button, {
     buttonType: ButtonTypes.RPGUIButton,
     disabled: disabled,
     onPointerDown: function onPointerDown() {
@@ -33323,7 +33376,7 @@ var PriceValue = /*#__PURE__*/styled.div.withConfig({
   displayName: "MarketplaceRows__PriceValue",
   componentId: "sc-wmpr1o-7"
 })(["margin-left:40px;"]);
-var ButtonContainer$2 = /*#__PURE__*/styled.div.withConfig({
+var ButtonContainer$3 = /*#__PURE__*/styled.div.withConfig({
   displayName: "MarketplaceRows__ButtonContainer",
   componentId: "sc-wmpr1o-8"
 })(["margin:auto;"]);
@@ -34092,7 +34145,7 @@ var PartyManagerRow = function PartyManagerRow(_ref) {
   }, charName, " ", isCurrentUser ? '(You)' : '', " ", isLeader ? '(Leader)' : '')), React.createElement(TextContainer$5, null, React.createElement(Ellipsis, {
     maxLines: 1,
     maxWidth: "300px"
-  }, charClass)), React.createElement(ButtonContainer$3, null, canRemove && React.createElement(HighlightedText, {
+  }, charClass)), React.createElement(ButtonContainer$4, null, canRemove && React.createElement(HighlightedText, {
     onPointerDown: function onPointerDown() {
       return onRemovePlayer(id);
     }
@@ -34110,7 +34163,7 @@ var TextContainer$5 = /*#__PURE__*/styled.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.div.withConfig({
+var ButtonContainer$4 = /*#__PURE__*/styled.div.withConfig({
   displayName: "PartyManagerRows__ButtonContainer",
   componentId: "sc-uqajew-2"
 })(["display:flex;align-items:center;gap:1rem;justify-content:flex-start;"]);