@rpg-engine/long-bow 0.8.12 → 0.8.14

package/dist/utils/colorUtils.d.ts

@@ -0,0 +1 @@
+export declare const toUppercaseHexColor: (color: string | undefined) => string | undefined;

package/package.json

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

package/src/components/shared/SpriteFromAtlas.tsx

@@ -1,6 +1,7 @@
 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 {
   atlasJSON: any;
@@ -51,6 +52,11 @@ export const SpriteFromAtlas: React.FC<IProps> = ({
     return null;
   }
 
+  const normalizedTintColor = toUppercaseHexColor(tintColor);
+  // For white tint, we'll use a very light gray instead
+  const effectiveTintColor =
+    normalizedTintColor === '#FFFFFF' ? '#EEEEEE' : normalizedTintColor;
+
   return (
     <Container
       width={width}
@@ -69,7 +75,7 @@ export const SpriteFromAtlas: React.FC<IProps> = ({
         style={imgStyle}
         centered={centered}
         borderRadius={borderRadius}
-        tintColor={tintColor}
+        tintColor={effectiveTintColor}
       />
     </Container>
   );
@@ -112,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/utils/colorUtils.ts

@@ -0,0 +1,11 @@
+export const toUppercaseHexColor = (
+  color: string | undefined
+): string | undefined => {
+  if (!color) return undefined;
+
+  // Check if it's a valid hex color
+  const hexRegex = /^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/;
+  if (!hexRegex.test(color)) return color;
+
+  return color.toUpperCase();
+};