@rpg-engine/long-bow 0.8.13 → 0.8.15

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/long-bow.cjs.development.js

@@ -631,6 +631,8 @@ var SpriteFromAtlas = function SpriteFromAtlas(_ref) {
     return null;
   }
   var normalizedTintColor = toUppercaseHexColor(tintColor);
+  // For white tint, we'll use a very light gray instead
+  var effectiveTintColor = normalizedTintColor === '#FFFFFF' ? '#EEEEEE' : normalizedTintColor;
   return React__default.createElement(Container$1, {
     width: width,
     height: height,
@@ -647,7 +649,7 @@ var SpriteFromAtlas = function SpriteFromAtlas(_ref) {
     style: imgStyle,
     centered: centered,
     borderRadius: borderRadius,
-    tintColor: normalizedTintColor
+    tintColor: effectiveTintColor
   }));
 };
 var Container$1 = /*#__PURE__*/styled__default.div.withConfig({
@@ -663,7 +665,7 @@ var Container$1 = /*#__PURE__*/styled__default.div.withConfig({
 var ImgSprite = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "SpriteFromAtlas__ImgSprite",
   componentId: "sc-1lpani8-1"
-})(["width:", "px;height:", "px;background-image:url(", ");background-position:-", "px -", "px;transform:scale(", ");position:relative;top:", ";left:", ";filter:", ";opacity:", ";border-radius:", ";overflow:hidden;"], function (props) {
+})(["width:", "px;height:", "px;background-image:url(", ");background-position:-", "px -", "px;transform:scale(", ");position:relative;top:", ";left:", ";opacity:", ";border-radius:", ";overflow:hidden;", " ", ""], function (props) {
   return props.frame.w;
 }, function (props) {
   return props.frame.h;
@@ -679,15 +681,14 @@ var ImgSprite = /*#__PURE__*/styled__default.div.withConfig({
   return props.centered ? '0' : '8px';
 }, function (props) {
   return props.centered ? '0' : '8px';
-}, function (props) {
-  var filters = [];
-  if (props.grayScale) filters.push('grayscale(100%)');
-  if (props.tintColor) filters.push("brightness(0.8) contrast(1.2) sepia(100%) hue-rotate(" + (props.tintColor === '#FFD700' ? '40deg' : '210deg') + ") saturate(400%)");
-  return filters.length ? filters.join(' ') : 'none';
 }, function (props) {
   return props.opacity;
 }, function (props) {
   return props.borderRadius || '0';
+}, function (props) {
+  return props.grayScale && styled.css(["filter:grayscale(100%);"]);
+}, function (props) {
+  return props.tintColor && styled.css(["&::before{content:'';position:absolute;top:0;left:0;width:", "px;height:", "px;background-color:", ";mix-blend-mode:multiply;opacity:0.6;pointer-events:none;-webkit-mask-image:url(", ");-webkit-mask-position:-", "px -", "px;mask-image:url(", ");mask-position:-", "px -", "px;}&::after{content:'';position:absolute;top:0;left:0;width:", "px;height:", "px;background-color:", ";mix-blend-mode:soft-light;opacity:0.6;pointer-events:none;-webkit-mask-image:url(", ");-webkit-mask-position:-", "px -", "px;mask-image:url(", ");mask-position:-", "px -", "px;}"], props.frame.w, props.frame.h, props.tintColor, props.atlasIMG, props.frame.x, props.frame.y, props.atlasIMG, props.frame.x, props.frame.y, props.frame.w, props.frame.h, props.tintColor, props.atlasIMG, props.frame.x, props.frame.y, props.atlasIMG, props.frame.x, props.frame.y);
 });
 
 var frames = {
@@ -32768,48 +32769,139 @@ 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,
@@ -33140,7 +33232,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", {
@@ -33157,7 +33249,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) {
@@ -33176,7 +33268,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));
@@ -33190,7 +33282,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);
@@ -33199,46 +33291,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,
@@ -33284,7 +33336,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() {
@@ -33326,7 +33378,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;"]);
@@ -34094,7 +34146,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);
     }
@@ -34112,7 +34164,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;"]);