@rpg-engine/long-bow 0.8.13 → 0.8.15

package/dist/stories/UI/dropdownsAndSelectors/ItemPropertyColorSelector.stories.d.ts

@@ -1,3 +1,6 @@
 declare const _default: import("@storybook/csf").ComponentAnnotations<import("@storybook/react").ReactFramework, import("@storybook/react").Args>;
 export default _default;
 export declare const Default: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactFramework, import("@storybook/react").Args>;
+export declare const WithCostWarning: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactFramework, import("@storybook/react").Args>;
+export declare const WithCustomCurrency: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactFramework, import("@storybook/react").Args>;
+export declare const Closed: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactFramework, import("@storybook/react").Args>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rpg-engine/long-bow",
-  "version": "0.8.13",
+  "version": "0.8.15",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",

package/src/components/ConfirmModal.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { ReactNode } from 'react';
 import styled from 'styled-components';
 import ModalPortal from './Abstractions/ModalPortal';
 import { Button, ButtonTypes } from './Button';
@@ -7,34 +7,46 @@ import { DraggableContainer } from './DraggableContainer';
 export interface IConfirmModalProps {
   onConfirm: () => void;
   onClose: () => void;
-  message?: string;
+  message?: string | ReactNode;
 }
 
 export const ConfirmModal: React.FC<IConfirmModalProps> = ({
   onConfirm,
   onClose,
-  message,
+  message = 'Are you sure?',
 }) => {
+  const handleConfirm = (e: React.MouseEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    onConfirm();
+  };
+
+  const handleClose = (e: React.MouseEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    onClose();
+  };
+
   return (
     <ModalPortal>
       <Background />
-      <Container onPointerDown={onClose}>
+      <Container onClick={handleClose}>
         <DraggableContainer width="auto" dragDisabled>
-          <Wrapper onPointerDown={e => e.stopPropagation()}>
-            <p>{message ?? 'Are you sure?'}</p>
+          <Wrapper onClick={e => e.stopPropagation()}>
+            {typeof message === 'string' ? <p>{message}</p> : message}
 
             <ButtonsWrapper>
               <div className="cancel-button">
                 <Button
                   buttonType={ButtonTypes.RPGUIButton}
-                  onPointerDown={onClose}
+                  onClick={handleClose}
                 >
                   No
                 </Button>
               </div>
               <Button
                 buttonType={ButtonTypes.RPGUIButton}
-                onPointerDown={onConfirm}
+                onClick={handleConfirm}
               >
                 Yes
               </Button>

package/src/components/Item/Inventory/ItemPropertyColorSelector.tsx

@@ -1,75 +1,162 @@
 import React, { useEffect, useState } from 'react';
 import { HexColorPicker } from 'react-colorful';
 import styled from 'styled-components';
+import { uiColors } from '../../../constants/uiColors';
 import { Button, ButtonTypes } from '../../Button';
+import { ConfirmModal } from '../../ConfirmModal';
 import { DraggableContainer } from '../../DraggableContainer';
 import { RPGUIContainerTypes } from '../../RPGUI/RPGUIContainer';
 
-interface Props {
+interface IColorSelectorProps {
   selectedColor: string;
   isOpen: boolean;
   onClose: () => void;
   onConfirm: (color: string) => void;
   onChange: (color: string) => void;
+  costWarning?: {
+    cost: number;
+    currency?: string;
+  };
 }
 
-export const ColorSelector: React.FC<Props> = ({
+export const ColorSelector: React.FC<IColorSelectorProps> = ({
   selectedColor,
   isOpen,
   onClose,
   onConfirm,
   onChange,
+  costWarning,
 }) => {
   const [currentColor, setCurrentColor] = useState(selectedColor);
+  const [showConfirmModal, setShowConfirmModal] = useState(false);
 
   useEffect(() => {
     if (isOpen) setCurrentColor(selectedColor);
   }, [isOpen, selectedColor]);
 
-  const handleConfirm = () => {
+  const handleConfirm = (e: React.MouseEvent) => {
+    e.preventDefault();
+    if (costWarning) {
+      setShowConfirmModal(true);
+    } else {
+      onConfirm(currentColor);
+      onClose();
+    }
+  };
+
+  const handleConfirmCost = () => {
     onConfirm(currentColor);
+    setShowConfirmModal(false);
     onClose();
   };
 
+  const handleClose = () => {
+    setShowConfirmModal(false);
+  };
+
+  const renderConfirmMessage = () => (
+    <ConfirmContent>
+      <p>
+        Cost:
+        <CostDisplay>
+          {costWarning?.cost.toLocaleString()}
+          {costWarning?.currency || ' gold'}
+        </CostDisplay>
+      </p>
+      <p>Proceed with color change?</p>
+    </ConfirmContent>
+  );
+
   if (!isOpen) return null;
 
-  return isOpen ? (
-    <DraggableContainer
-      type={RPGUIContainerTypes.Framed}
-      cancelDrag=".react-colorful"
-      width="20rem"
-      onCloseButton={onClose}
-    >
-      <Container>
-        <Header>Select Color</Header>
-        <HexColorPicker
-          color={currentColor}
-          onChange={color => {
-            setCurrentColor(color);
-            onChange(color);
-          }}
+  return (
+    <>
+      <DraggableContainer
+        type={RPGUIContainerTypes.Framed}
+        cancelDrag=".react-colorful"
+        width="25rem"
+        onCloseButton={onClose}
+      >
+        <Container>
+          <Header>Select Color</Header>
+          <ColorPickerWrapper>
+            <HexColorPicker
+              color={currentColor}
+              onChange={color => {
+                setCurrentColor(color);
+                onChange(color);
+              }}
+            />
+          </ColorPickerWrapper>
+          <ButtonContainer>
+            <Button
+              buttonType={ButtonTypes.RPGUIButton}
+              type="button"
+              onClick={handleConfirm}
+            >
+              Confirm
+            </Button>
+          </ButtonContainer>
+        </Container>
+      </DraggableContainer>
+
+      {showConfirmModal && costWarning && (
+        <ConfirmModal
+          message={renderConfirmMessage()}
+          onConfirm={handleConfirmCost}
+          onClose={handleClose}
         />
-        <Button
-          buttonType={ButtonTypes.RPGUIButton}
-          type="button"
-          onClick={handleConfirm}
-        >
-          Confirm
-        </Button>
-      </Container>
-    </DraggableContainer>
-  ) : null;
+      )}
+    </>
+  );
 };
 
 const Container = styled.div`
-  padding: 2rem;
   text-align: center;
   background: inherit;
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+  align-items: center;
+  width: 100%;
+  max-width: 24rem;
+  margin: 0 auto;
 `;
 
 const Header = styled.h2`
-  font-family: 'Press Start 2P', cursive;
   color: white;
   font-size: 1rem;
-  margin-bottom: 1rem;
+  margin: 0;
+  width: 100%;
+  text-align: center;
+`;
+
+const ColorPickerWrapper = styled.div`
+  display: flex;
+  justify-content: center;
+  width: 100%;
+
+  .react-colorful {
+    width: 100%;
+    max-width: 200px;
+  }
+`;
+
+const ButtonContainer = styled.div`
+  display: flex;
+  justify-content: center;
+  width: 100%;
+`;
+
+const ConfirmContent = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  text-align: center;
+  font-family: 'Press Start 2P', cursive;
+  font-size: 0.75rem;
+`;
+
+const CostDisplay = styled.span`
+  color: ${uiColors.yellow} !important;
 `;

package/src/components/shared/SpriteFromAtlas.tsx

@@ -1,6 +1,6 @@
 import { GRID_HEIGHT, GRID_WIDTH } from '@rpg-engine/shared';
 import React from 'react';
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 import { toUppercaseHexColor } from '../../utils/colorUtils';
 
 interface IProps {
@@ -53,6 +53,9 @@ export const SpriteFromAtlas: React.FC<IProps> = ({
   }
 
   const normalizedTintColor = toUppercaseHexColor(tintColor);
+  // For white tint, we'll use a very light gray instead
+  const effectiveTintColor =
+    normalizedTintColor === '#FFFFFF' ? '#EEEEEE' : normalizedTintColor;
 
   return (
     <Container
@@ -72,7 +75,7 @@ export const SpriteFromAtlas: React.FC<IProps> = ({
         style={imgStyle}
         centered={centered}
         borderRadius={borderRadius}
-        tintColor={normalizedTintColor}
+        tintColor={effectiveTintColor}
       />
     </Container>
   );
@@ -115,23 +118,59 @@ const ImgSprite = styled.div<IImgSpriteProps>`
   width: ${props => props.frame.w}px;
   height: ${props => props.frame.h}px;
   background-image: url(${props => props.atlasIMG});
-  background-position: -${props => props.frame.x}px -${props => props.frame.y}px;
+  background-position: -${props => props.frame.x}px -${props =>
+  props.frame.y}px;
   transform: scale(${props => props.scale});
   position: relative;
   top: ${props => (props.centered ? '0' : '8px')};
   left: ${props => (props.centered ? '0' : '8px')};
-  filter: ${props => {
-    const 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';
-  }};
   opacity: ${props => props.opacity};
   border-radius: ${props => props.borderRadius || '0'};
   overflow: hidden;
+
+  /* Apply grayscale if needed */
+  ${props =>
+    props.grayScale &&
+    css`
+      filter: grayscale(100%);
+    `}
+
+  /* Add tint overlay if tintColor is provided */
+  ${props =>
+    props.tintColor &&
+    css`
+      &::before {
+        content: '';
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: ${props.frame.w}px;
+        height: ${props.frame.h}px;
+        background-color: ${props.tintColor};
+        mix-blend-mode: multiply;
+        opacity: 0.6;
+        pointer-events: none;
+        -webkit-mask-image: url(${props.atlasIMG});
+        -webkit-mask-position: -${props.frame.x}px -${props.frame.y}px;
+        mask-image: url(${props.atlasIMG});
+        mask-position: -${props.frame.x}px -${props.frame.y}px;
+      }
+
+      &::after {
+        content: '';
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: ${props.frame.w}px;
+        height: ${props.frame.h}px;
+        background-color: ${props.tintColor};
+        mix-blend-mode: soft-light;
+        opacity: 0.6;
+        pointer-events: none;
+        -webkit-mask-image: url(${props.atlasIMG});
+        -webkit-mask-position: -${props.frame.x}px -${props.frame.y}px;
+        mask-image: url(${props.atlasIMG});
+        mask-position: -${props.frame.x}px -${props.frame.y}px;
+      }
+    `}
 `;

package/src/mocks/itemContainer.mocks.ts

@@ -8,6 +8,44 @@ import {
   UserAccountTypes,
 } from '@rpg-engine/shared';
 
+const createBagItem = (id: string, tintColor: string): IItem => ({
+  _id: id,
+  hasUseWith: false,
+  type: ItemType.Container,
+  subType: ItemSubType.Other,
+  textureAtlas: 'items',
+  allowedEquipSlotType: [ItemSlotType.Inventory],
+  isEquipable: false,
+  isStackable: true,
+  maxStackSize: 100,
+  isUsable: false,
+  isStorable: true,
+  isTwoHanded: false,
+  layer: 1,
+  isItemContainer: true,
+  isSolid: false,
+  key: 'bag',
+  texturePath: 'containers/bag.png',
+  textureKey: 'bag',
+  name: 'Bag',
+  generateContainerSlots: 10,
+  description:
+    'You see a bag. It has made using leather and it has 10 total slots.',
+  attack: 7,
+  defense: 3,
+  weight: 13,
+  tiledId: 67,
+  x: 320,
+  y: 144,
+  scene: 'MainScene',
+  fullDescription:
+    'You see a bag. It has made using leather and it has 10 total slots.',
+  createdAt: '2022-06-04T03:18:09.335Z',
+  updatedAt: '2022-06-04T18:16:49.056Z',
+  rarity: ItemRarities.Common,
+  tintColor,
+});
+
 export const items: IItem[] = [
   {
     _id: '629acef1c7c8e8002ff60736',
@@ -286,44 +324,14 @@ export const items: IItem[] = [
     updatedAt: '2022-06-04T18:16:49.056Z',
     rarity: ItemRarities.Common,
   },
-  {
-    _id: '392acek4j7c8e8002ff60404',
-    hasUseWith: false,
-    type: ItemType.Container,
-    subType: ItemSubType.Other,
-    textureAtlas: 'items',
-    allowedEquipSlotType: [ItemSlotType.Inventory],
-    isEquipable: false,
-    isStackable: true,
-    maxStackSize: 100,
-
-    isUsable: false,
-    isStorable: true,
-    isTwoHanded: false,
-    layer: 1,
-    isItemContainer: true,
-    isSolid: false,
-    key: 'bag',
-    texturePath: 'containers/bag.png',
-    textureKey: 'bag',
-    name: 'Bag',
-    generateContainerSlots: 10,
-    description:
-      'You see a bag. It has made using leather and it has 10 total slots.',
-    attack: 7,
-    defense: 3,
-    weight: 13,
-    tiledId: 67,
-    x: 320,
-    y: 144,
-    scene: 'MainScene',
-    fullDescription:
-      'You see a bag. It has made using leather and it has 10 total slots.',
-    createdAt: '2022-06-04T03:18:09.335Z',
-    updatedAt: '2022-06-04T18:16:49.056Z',
-    rarity: ItemRarities.Common,
-    tintColor: '#FFD700',
-  },
+  createBagItem('392acek4j7c8e8002ff60404', '#FF0000'), // red
+  createBagItem('392acek4j7c8e8002ff60405', '#0000FF'), // blue
+  createBagItem('392acek4j7c8e8002ff60406', '#00FF00'), // green
+  createBagItem('392acek4j7c8e8002ff60407', '#FFFF00'), // yellow
+  createBagItem('392acek4j7c8e8002ff60408', '#800080'), // purple
+  createBagItem('392acek4j7c8e8002ff60409', '#FFA500'), // orange
+  createBagItem('392acek4j7c8e8002ff60410', '#00FFFF'), // cyan
+  createBagItem('392acek4j7c8e8002ff60411', '#FFFFFF'), // white
   {
     _id: '392acek4j7c8e80d2fs60404',
     hasUseWith: false,

package/src/stories/UI/dropdownsAndSelectors/ItemPropertyColorSelector.stories.tsx

@@ -1,39 +1,36 @@
 import { Meta, Story } from '@storybook/react';
 import React, { useState } from 'react';
-import { ItemPropertySimpleHandler } from '../../../components/Item/Inventory/ItemPropertySimpleHandler';
+import { ColorSelector } from '../../../components/Item/Inventory/ItemPropertyColorSelector';
+import { RPGUIRoot } from '../../../components/RPGUI/RPGUIRoot';
 
 export default {
-  title: 'UI/Dropdowns & Selectors/ItemPropertySimpleHandler',
-  component: ItemPropertySimpleHandler,
+  title: 'UI/Dropdowns & Selectors/Item Property Color Selector',
+  component: ColorSelector,
   parameters: {
+    layout: 'centered',
     docs: {
       description: {
         component:
-          'A simple handler for selecting and confirming item properties, including colors.',
+          'A color selector component for items with optional cost warning.',
       },
     },
   },
   argTypes: {
-    isOpen: {
-      control: { type: 'boolean' },
-      description: 'Controls whether the color selector is open.',
-    },
     selectedColor: {
       control: { type: 'color' },
       description: 'Initial selected color.',
     },
-    onClose: {
-      action: 'onClose',
-      description: 'Callback when the selector is closed.',
-    },
-    onConfirm: {
-      action: 'onConfirm',
-      description: 'Callback when a color is confirmed.',
+    isOpen: {
+      control: { type: 'boolean' },
+      description: 'Controls whether the color selector is open.',
     },
-    onChange: {
-      action: 'onChange',
-      description: 'Callback when a color is being selected.',
+    costWarning: {
+      control: 'object',
+      description: 'Optional warning about the cost of changing colors.',
     },
+    onClose: { action: 'closed' },
+    onConfirm: { action: 'confirmed' },
+    onChange: { action: 'changed' },
   },
 } as Meta;
 
@@ -60,13 +57,16 @@ const Template: Story = args => {
   };
 
   return (
-    <ItemPropertySimpleHandler
-      isOpen={isOpen}
-      selectedColor={currentColor}
-      onClose={handleClose}
-      onConfirm={handleConfirm}
-      onChange={handleChange}
-    />
+    <RPGUIRoot>
+      <ColorSelector
+        isOpen={isOpen}
+        selectedColor={currentColor}
+        onClose={handleClose}
+        onConfirm={handleConfirm}
+        onChange={handleChange}
+        {...args}
+      />
+    </RPGUIRoot>
   );
 };
 
@@ -75,3 +75,29 @@ Default.args = {
   isOpen: true,
   selectedColor: '#ff0000',
 };
+
+export const WithCostWarning = Template.bind({});
+WithCostWarning.args = {
+  isOpen: true,
+  selectedColor: '#ff0000',
+  costWarning: {
+    cost: 10000,
+    currency: ' gold',
+  },
+};
+
+export const WithCustomCurrency = Template.bind({});
+WithCustomCurrency.args = {
+  isOpen: true,
+  selectedColor: '#ff0000',
+  costWarning: {
+    cost: 5000,
+    currency: ' crystals',
+  },
+};
+
+export const Closed = Template.bind({});
+Closed.args = {
+  isOpen: false,
+  selectedColor: '#ff0000',
+};