Merge pull request #31 from duckietm/Dev

Dev

src/api/inventory/IPrefixItem.ts

@@ -0,0 +1,9 @@
+export interface IPrefixItem
+{
+    id: number;
+    text: string;
+    color: string;
+    icon: string;
+    effect: string;
+    active: boolean;
+}

src/api/inventory/UnseenItemCategory.ts

@@ -6,4 +6,5 @@ export class UnseenItemCategory
     public static BADGE: number = 4;
     public static BOT: number = 5;
     public static GAMES: number = 6;
+    public static PREFIX: number = 7;
 }

src/api/inventory/index.ts

@@ -5,6 +5,7 @@ export * from './GroupItem';
 export * from './IBotItem';
 export * from './IFurnitureItem';
 export * from './IPetItem';
+export * from './IPrefixItem';
 export * from './IUnseenItemTracker';
 export * from './InventoryUtilities';
 export * from './PetUtilities';

src/api/room/widgets/ChatBubbleMessage.ts

@@ -7,6 +7,10 @@ export class ChatBubbleMessage
     public height: number = 0;
     public elementRef: HTMLDivElement = null;
     public skipMovement: boolean = false;
+    public prefixText: string = '';
+    public prefixColor: string = '';
+    public prefixIcon: string = '';
+    public prefixEffect: string = '';
 
     private _top: number = 0;
     private _left: number = 0;

src/api/utils/PrefixUtils.ts

@@ -0,0 +1,53 @@
+export const PRESET_PREFIX_EFFECTS: { id: string; label: string; icon: string }[] = [
+    { id: '', label: 'None', icon: '—' },
+    { id: 'glow', label: 'Glow', icon: '✨' },
+    { id: 'shadow', label: 'Shadow', icon: '🌑' },
+    { id: 'italic', label: 'Italic', icon: '𝑰' },
+    { id: 'outline', label: 'Outline', icon: '🔲' },
+    { id: 'pulse', label: 'Pulse', icon: '💫' },
+    { id: 'bold-glow', label: 'Neon', icon: '💡' },
+];
+
+export const parsePrefixColors = (text: string, colorStr: string): string[] =>
+{
+    if(!colorStr || !text) return [];
+
+    const colors = colorStr.split(',');
+    return [ ...text ].map((_, i) => colors[Math.min(i, colors.length - 1)]);
+};
+
+export const getPrefixEffectStyle = (effect: string, color?: string): Record<string, string | number> =>
+{
+    const baseColor = color || '#FFFFFF';
+
+    switch(effect)
+    {
+        case 'glow':
+            return { textShadow: `0 0 6px ${ baseColor }, 0 0 12px ${ baseColor }80` };
+        case 'shadow':
+            return { textShadow: '2px 2px 4px rgba(0,0,0,0.7), 1px 1px 2px rgba(0,0,0,0.5)' };
+        case 'italic':
+            return { fontStyle: 'italic' };
+        case 'outline':
+            return {
+                WebkitTextStroke: '0.5px rgba(0,0,0,0.6)',
+                textShadow: '1px 1px 0 rgba(0,0,0,0.3), -1px -1px 0 rgba(0,0,0,0.3), 1px -1px 0 rgba(0,0,0,0.3), -1px 1px 0 rgba(0,0,0,0.3)'
+            };
+        case 'pulse':
+            return { animation: 'prefix-pulse 1.5s ease-in-out infinite' };
+        case 'bold-glow':
+            return {
+                textShadow: `0 0 4px ${ baseColor }, 0 0 8px ${ baseColor }, 0 0 16px ${ baseColor }60`,
+                fontWeight: 900
+            };
+        default:
+            return {};
+    }
+};
+
+export const PREFIX_EFFECT_KEYFRAMES = `
+@keyframes prefix-pulse {
+    0%, 100% { opacity: 1; }
+    50% { opacity: 0.5; }
+}
+`;

src/api/utils/index.ts

@@ -11,6 +11,7 @@ export * from './LocalizeFormattedNumber';
 export * from './LocalizeShortNumber';
 export * from './LocalizeText';
 export * from './PlaySound';
+export * from './PrefixUtils';
 export * from './ProductImageUtility';
 export * from './Randomizer';
 export * from './RoomChatFormatter';