🆕 Rebuild :Chooser and :Furni

src/api/room/widgets/ChooserSelectionFilter.ts

@@ -0,0 +1,111 @@
+import { ColorConverter, NitroFilter } from '@nitrots/nitro-renderer';
+
+const vertex = `
+attribute vec2 aVertexPosition;
+attribute vec2 aTextureCoord;
+uniform mat3 projectionMatrix;
+varying vec2 vTextureCoord;
+void main(void)
+{
+    gl_Position = vec4((projectionMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0);
+    vTextureCoord = aTextureCoord;
+}`;
+
+const fragment = `
+varying vec2 vTextureCoord;
+uniform sampler2D uSampler;
+uniform vec3 lineColor;
+uniform vec3 color;
+uniform float time; // Added time uniform for animation
+void main(void) {
+    vec4 currentColor = texture2D(uSampler, vTextureCoord);
+    vec3 colorLine = lineColor * currentColor.a;
+    vec3 colorOverlay = color * currentColor.a;
+
+    // Calculate fading factor using sine wave (oscillates between 0.5 and 1.0)
+    float fadeFactor = 0.75 + 0.25 * sin(time * 3.0); // Adjust speed with multiplier
+
+    if(currentColor.r == 0.0 && currentColor.g == 0.0 && currentColor.b == 0.0 && currentColor.a > 0.0) {
+        gl_FragColor = vec4(colorLine.r * fadeFactor, colorLine.g * fadeFactor, colorLine.b * fadeFactor, currentColor.a);
+    } else if(currentColor.a > 0.0) {
+        gl_FragColor = vec4(colorOverlay.r * fadeFactor, colorOverlay.g * fadeFactor, colorOverlay.b * fadeFactor, currentColor.a * 0.35);
+    }
+}`;
+
+export class ChooserSelectionFilter extends NitroFilter
+{
+    private _lineColor: number;
+    private _color: number;
+    private _time: number;
+
+    constructor(lineColor: number | number[] = [0.700, 0.880, 0.950], color: number | number[] = [0.290, 0.350, 0.390])
+    {
+        super(vertex, fragment);
+
+        this.uniforms.lineColor = new Float32Array(3);
+        this.uniforms.color = new Float32Array(3);
+        this.uniforms.time = 0.0; // Initialize time uniform
+        this._time = 0.0;
+        this.lineColor = lineColor;
+        this.color = color;
+    }
+
+    public get lineColor(): number | number[]
+    {
+        return this._lineColor;
+    }
+
+    public set lineColor(value: number | number[])
+    {
+        const arr = this.uniforms.lineColor;
+
+        if(typeof value === 'number')
+        {
+            ColorConverter.hex2rgb(value, arr);
+            this._lineColor = value;
+        }
+        else
+        {
+            arr[0] = value[0];
+            arr[1] = value[1];
+            arr[2] = value[2];
+
+            this._lineColor = ColorConverter.rgb2hex(arr);
+        }
+    }
+
+    public get color(): number | number[]
+    {
+        return this._color;
+    }
+
+    public set color(value: number | number[])
+    {
+        const arr = this.uniforms.color;
+
+        if(typeof value === 'number')
+        {
+            ColorConverter.hex2rgb(value, arr);
+            this._color = value;
+        }
+        else
+        {
+            arr[0] = value[0];
+            arr[1] = value[1];
+            arr[2] = value[2];
+
+            this._color = ColorConverter.rgb2hex(arr);
+        }
+    }
+
+    public get time(): number
+    {
+        return this._time;
+    }
+
+    public set time(value: number)
+    {
+        this._time = value;
+        this.uniforms.time = value;
+    }
+}

src/api/room/widgets/ChooserSelectionVisualizer.ts

@@ -0,0 +1,105 @@
+import { IRoomObjectSpriteVisualization, RoomObjectCategory } from '@nitrots/nitro-renderer';
+import { ChooserSelectionFilter, GetRoomEngine } from '../..';
+
+export class chooserSelectionVisualizer
+{
+    private static glowFilter = new ChooserSelectionFilter(
+        [0.700, 0.880, 0.950],
+        [0.290, 0.350, 0.390]
+    );
+    private static activeFilters: Map<string, ChooserSelectionFilter> = new Map();
+    private static animationFrameId: number | null = null;
+
+    private static startAnimation(): void
+    {
+        if (this.animationFrameId !== null) return;
+
+        const animate = (time: number) => {
+            const elapsed = time / 1000; // Convert to seconds
+            this.activeFilters.forEach(filter => {
+                filter.time = elapsed; // Update time uniform
+            });
+            this.animationFrameId = requestAnimationFrame(animate);
+        };
+
+        this.animationFrameId = requestAnimationFrame(animate);
+    }
+
+    private static stopAnimation(): void
+    {
+        if (this.animationFrameId !== null) {
+            cancelAnimationFrame(this.animationFrameId);
+            this.animationFrameId = null;
+        }
+    }
+
+    public static show(id: number, category: number = RoomObjectCategory.FLOOR): void
+    {
+        const roomObject = GetRoomEngine().getRoomObject(GetRoomEngine().activeRoomId, id, category);
+        if (!roomObject) return;
+
+        const visualization = roomObject.visualization as IRoomObjectSpriteVisualization;
+        if (!visualization || !visualization.sprites || !visualization.sprites.length) return;
+
+        // Create a unique filter instance for this object
+        const filter = new ChooserSelectionFilter(
+            [0.700, 0.880, 0.950],
+            [0.290, 0.350, 0.390]
+        );
+        const key = `${id}_${category}`;
+        this.activeFilters.set(key, filter);
+
+        for (const sprite of visualization.sprites)
+        {
+            if (sprite.blendMode === 1) continue;
+            sprite.filters = [filter];
+        }
+
+        this.startAnimation();
+    }
+
+    public static hide(id: number, category: number = RoomObjectCategory.FLOOR): void
+    {
+        const roomObject = GetRoomEngine().getRoomObject(GetRoomEngine().activeRoomId, id, category);
+        if (!roomObject) return;
+
+        const visualization = roomObject.visualization as IRoomObjectSpriteVisualization;
+        if (!visualization) return;
+
+        const key = `${id}_${category}`;
+        this.activeFilters.delete(key);
+
+        for (const sprite of visualization.sprites)
+        {
+            sprite.filters = [];
+        }
+
+        if (this.activeFilters.size === 0) {
+            this.stopAnimation();
+        }
+    }
+
+    public static clearAll(): void
+    {
+        const roomEngine = GetRoomEngine();
+
+        const roomObjects = [
+            ...roomEngine.getRoomObjects(roomEngine.activeRoomId, RoomObjectCategory.FLOOR),
+            ...roomEngine.getRoomObjects(roomEngine.activeRoomId, RoomObjectCategory.WALL)
+        ];
+
+        for (const roomObject of roomObjects)
+        {
+            const visualization = roomObject.visualization as IRoomObjectSpriteVisualization;
+            if (!visualization) continue;
+
+            for (const sprite of visualization.sprites)
+            {
+                sprite.filters = [];
+            }
+        }
+
+        this.activeFilters.clear();
+        this.stopAnimation();
+    }
+}

src/api/room/widgets/index.ts

@@ -7,6 +7,8 @@ export * from './AvatarInfoUtilities';
 export * from './BotSkillsEnum';
 export * from './ChatBubbleMessage';
 export * from './ChatMessageTypeEnum';
+export * from './ChooserSelectionFilter';
+export * from './ChooserSelectionVisualizer';
 export * from './DimmerFurnitureWidgetPresetItem';
 export * from './DoChatsOverlap';
 export * from './FurnitureDimmerUtilities';

src/components/room/widgets/choosers/ChooserWidgetView.tsx

@@ -1,6 +1,6 @@
 import { FurniturePickupAllComposer } from '@nitrots/nitro-renderer';
 import { FC, useEffect, useMemo, useState } from 'react';
-import { GetSessionDataManager, LocalizeText, RoomObjectItem, SendMessageComposer } from '../../../../api';
+import { GetSessionDataManager, LocalizeText, RoomObjectItem, SendMessageComposer, chooserSelectionVisualizer } from '../../../../api';
 import { Base, Button, Flex, InfiniteScroll, NitroCardContentView, NitroCardHeaderView, NitroCardView, Text, classNames } from '../../../../common';
 
 const LIMIT_FURNI_PICKALL = 100;
@@ -12,12 +12,13 @@ interface ChooserWidgetViewProps
     selectItem: (item: RoomObjectItem) => void;
     onClose: () => void;
     pickallFurni?: boolean;
+    type?: 'furni' | 'users';
 }
 
 export const ChooserWidgetView: FC<ChooserWidgetViewProps> = props =>
 {
-    const { title = null, items = [], selectItem = null, onClose = null, pickallFurni = false } = props;
+    const { title = null, items = [], selectItem = null, onClose = null, pickallFurni = false, type = 'furni' } = props;
-    const [ selectedItem, setSelectedItem ] = useState<RoomObjectItem>(null);
+    const [ selectedItems, setSelectedItems ] = useState<RoomObjectItem[]>([]);
     const [ searchValue, setSearchValue ] = useState('');
     const canSeeId = GetSessionDataManager().isModerator;
 
@@ -72,6 +73,8 @@ export const ChooserWidgetView: FC<ChooserWidgetViewProps> = props =>
         SendMessageComposer(new FurniturePickupAllComposer(...checkedIds));
         setCheckedIds([]);
         setCheckAll(false);
+        chooserSelectionVisualizer.clearAll();
+        setSelectedItems([]);
     }
 
     const filteredItems = useMemo(() =>
@@ -90,14 +93,38 @@ export const ChooserWidgetView: FC<ChooserWidgetViewProps> = props =>
 
     useEffect(() =>
     {
-        if(!selectedItem) return;
+        if (selectedItems.length === 0) return;
 
-        selectItem(selectedItem);
+        selectItem(selectedItems[selectedItems.length - 1]);
-    }, [ selectedItem, selectItem ]);
+
+        chooserSelectionVisualizer.clearAll();
+        selectedItems.forEach(item => {
+            if (item.id && item.category) {
+                chooserSelectionVisualizer.show(item.id, item.category);
+            }
+        });
+    }, [ selectedItems, selectItem ]);
+
+    const toggleItemSelection = (item: RoomObjectItem) => {
+        setSelectedItems(prev => {
+            if (prev.some(selected => selected.id === item.id)) {
+                chooserSelectionVisualizer.hide(item.id, item.category);
+                return prev.filter(selected => selected.id !== item.id);
+            } else {
+                return [...prev, item];
+            }
+        });
+    };
+
+    const handleClose = () => {
+        chooserSelectionVisualizer.clearAll();
+        setSelectedItems([]);
+        onClose();
+    };
 
     return (
         <NitroCardView className="nitro-chooser-widget" theme="primary-slim">
-            <NitroCardHeaderView headerText={ title + ' (' + filteredItems.length + ')' } onCloseClick={ onClose } />
+            <NitroCardHeaderView headerText={ title + ' (' + filteredItems.length + ')' } onCloseClick={ handleClose } />
             <NitroCardContentView overflow="hidden" gap={ 1 }>
                 <Flex gap={ 2 }>
                     <input 
@@ -124,10 +151,17 @@ export const ChooserWidgetView: FC<ChooserWidgetViewProps> = props =>
                         </select>
                     )}
                 </Flex>
-                { pickallFurni && <Flex gap={ 2 } className="text-black">
+                { pickallFurni && (
-                    <input className="form-check-input" type="checkbox" checked={ checkAll } onChange={ () => checkedId() } />
+                    <Flex gap={ 2 } className="text-black">
+                        <input 
+                            className="form-check-input" 
+                            type="checkbox" 
+                            checked={ checkAll } 
+                            onChange={ () => checkedId() } 
+                        />
                         <label className="form-check-label">{ LocalizeText('widget.chooser.checkall') }</label>
-                </Flex> }
+                    </Flex>
+                )}
                 <InfiniteScroll 
                     rows={ filteredItems } 
                     rowRender={ row =>
@@ -135,31 +169,37 @@ export const ChooserWidgetView: FC<ChooserWidgetViewProps> = props =>
                         return (
                             <Flex 
                                 alignItems="center" 
-                                className={ classNames('rounded p-1', (selectedItem === row) && 'bg-muted') } 
+                                className={ classNames('rounded p-1', selectedItems.some(item => item.id === row.id) && 'bg-muted') } 
                                 pointer 
-                                onClick={ event => setSelectedItem(row) }
+                                onClick={ event => {
+                                    toggleItemSelection(row);
+                                }}
                             >
-                                { pickallFurni && <input 
+                                { pickallFurni && (
+                                    <input 
                                         className="flex-shrink-0 mx-1 form-check-input" 
                                         type="checkbox" 
                                         checked={ isChecked(row.id) } 
                                         onChange={ () => checkedId(row.id) } 
-                                /> }
+                                    />
+                                )}
                                 <Text truncate>
                                     { row.name } { canSeeId && (' - ' + row.id) } 
-                                    { row.ownerName && row.ownerName !== '-' && ` (Owner: ${row.ownerName})` }
+                                    { type === 'furni' && row.ownerName && row.ownerName !== '-' && ` (Owner: ${row.ownerName})` }
                                 </Text>
                             </Flex>
                         );
                     } } 
                 />
-                { pickallFurni && <Button 
+                { pickallFurni && (
+                    <Button 
                         variant="secondary" 
                         onClick={ onClickPickAll } 
                         disabled={ !checkedIds.length }
                     >
                         { LocalizeText('widget.chooser.btn.pickall') }
-                </Button> }
+                    </Button>
+                )}
             </NitroCardContentView>
         </NitroCardView>
     );

src/components/room/widgets/choosers/FurniChooserWidgetView.tsx

@@ -1,6 +1,6 @@
 import { ILinkEventTracker } from '@nitrots/nitro-renderer';
 import { FC, useEffect } from 'react';
-import { AddEventLinkTracker, LocalizeText, RemoveLinkEventTracker } from '../../../../api';
+import { AddEventLinkTracker, LocalizeText, RemoveLinkEventTracker, chooserSelectionVisualizer } from '../../../../api';
 import { useFurniChooserWidget, useRoom } from '../../../../hooks';
 import { ChooserWidgetView } from './ChooserWidgetView';
 
@@ -23,10 +23,23 @@ export const FurniChooserWidgetView: FC<{}> = props =>
 
         AddEventLinkTracker(linkTracker);
 
-        return () => RemoveLinkEventTracker(linkTracker);
+        return () => {
+            chooserSelectionVisualizer.clearAll();
+            RemoveLinkEventTracker(linkTracker);
+        };
     }, [ populateChooser ]);
     
     if (!items) return null;
 
-    return <ChooserWidgetView title={ LocalizeText('widget.chooser.furni.title') } items={ items } selectItem={ selectItem } onClose={ onClose } pickallFurni={ roomSession?.isRoomOwner } />;
+    return <ChooserWidgetView 
+        title={ LocalizeText('widget.chooser.furni.title') } 
+        items={ items } 
+        selectItem={ selectItem } 
+        onClose={ () => {
+            chooserSelectionVisualizer.clearAll();
+            onClose();
+        }} 
+        pickallFurni={ roomSession?.isRoomOwner } 
+        type="furni"
+    />;
 }

src/components/room/widgets/choosers/UserChooserWidgetView.tsx

@@ -1,12 +1,13 @@
 import { ILinkEventTracker } from '@nitrots/nitro-renderer';
 import { FC, useEffect } from 'react';
-import { AddEventLinkTracker, LocalizeText, RemoveLinkEventTracker } from '../../../../api';
+import { AddEventLinkTracker, LocalizeText, RemoveLinkEventTracker, chooserSelectionVisualizer } from '../../../../api';
-import { useUserChooserWidget } from '../../../../hooks';
+import { useUserChooserWidget, useRoom } from '../../../../hooks';
 import { ChooserWidgetView } from './ChooserWidgetView';
 
 export const UserChooserWidgetView: FC<{}> = props =>
 {
     const { items = null, onClose = null, selectItem = null, populateChooser = null } = useUserChooserWidget();
+    const { roomSession = null } = useRoom();
 
     useEffect(() =>
     {
@@ -22,10 +23,23 @@ export const UserChooserWidgetView: FC<{}> = props =>
 
         AddEventLinkTracker(linkTracker);
 
-        return () => RemoveLinkEventTracker(linkTracker);
+        return () => {
+            chooserSelectionVisualizer.clearAll();
+            RemoveLinkEventTracker(linkTracker);
+        };
     }, [ populateChooser ]);
     
     if (!items) return null;
 
-    return <ChooserWidgetView title={ LocalizeText('widget.chooser.user.title') } items={ items } selectItem={ selectItem } onClose={ onClose } />;
+    return <ChooserWidgetView 
+        title={ LocalizeText('widget.chooser.user.title') }
+        items={ items } 
+        selectItem={ selectItem } 
+        onClose={ () => {
+            chooserSelectionVisualizer.clearAll();
+            onClose();
+        }} 
+        pickallFurni={ false }
+        type="users"
+    />;
 }

src/hooks/rooms/widgets/useFurniChooserWidget.ts

@@ -13,6 +13,24 @@ const useFurniChooserWidgetState = () =>
 
     const selectItem = (item: RoomObjectItem) => item && GetRoomEngine().selectRoomObject(GetRoomSession().roomId, item.id, item.category);
 
+    const resolveType = (userType: number): string => {
+        switch(userType) {
+            case 1: return 'Habbo';
+            case 2: return 'Pet';
+            case 3: return 'Bot';
+            default: return '-';
+        }
+    }
+
+    const isPetOrBot = (roomObjectType: string): boolean => {
+        // Check for pet or bot furniture based on type
+        return roomObjectType.includes('pet_') || 
+               roomObjectType.includes('bot_') || 
+               roomObjectType === 'pet' || 
+               roomObjectType === 'bot' || 
+               roomObjectType.includes('rentableBot');
+    }
+
     const populateChooser = () =>
     {
         const sessionDataManager = GetSessionDataManager();
@@ -42,7 +60,12 @@ const useFurniChooserWidgetState = () =>
                              (sessionDataManager.getUserData ? sessionDataManager.getUserData(ownerId)?.name : null) || 
                              `User_${ownerId}`;
 
-            return new RoomObjectItem(roomObject.id, RoomObjectCategory.WALL, name, ownerId, ownerName);
+            // Skip pet/bot furniture
+            if(isPetOrBot(roomObject.type)) {
+                return null;
+            }
+
+            return new RoomObjectItem(roomObject.id, RoomObjectCategory.WALL, name, ownerId, ownerName, 'furniture');
         }).filter(item => item !== null);
 
         const floorItems = floorObjects.map(roomObject =>
@@ -61,7 +84,12 @@ const useFurniChooserWidgetState = () =>
                              (sessionDataManager.getUserData ? sessionDataManager.getUserData(ownerId)?.name : null) || 
                              `User_${ownerId}`;
 
-            return new RoomObjectItem(roomObject.id, RoomObjectCategory.FLOOR, name, ownerId, ownerName);
+            // Skip pet/bot furniture
+            if(isPetOrBot(roomObject.type)) {
+                return null;
+            }
+
+            return new RoomObjectItem(roomObject.id, RoomObjectCategory.FLOOR, name, ownerId, ownerName, 'furniture');
         }).filter(item => item !== null);
 
         setItems([ ...wallItems, ...floorItems ].sort((a, b) => ((a.name < b.name) ? -1 : 1)));
@@ -72,7 +100,6 @@ const useFurniChooserWidgetState = () =>
         if(event.id < 0) return;
 
         const roomObject = GetRoomEngine().getRoomObject(GetRoomSession().roomId, event.id, event.category);
-
         if(!roomObject) return;
 
         let item: RoomObjectItem = null;
@@ -99,8 +126,12 @@ const useFurniChooserWidgetState = () =>
                                  (GetSessionDataManager().getUserData ? GetSessionDataManager().getUserData(ownerId)?.name : null) || 
                                  `User_${ownerId}`;
 
-                item = new RoomObjectItem(roomObject.id, RoomObjectCategory.WALL, name, ownerId, ownerName);
+                // Skip pet/bot furniture
+                if(isPetOrBot(roomObject.type)) {
+                    return;
+                }
 
+                item = new RoomObjectItem(roomObject.id, RoomObjectCategory.WALL, name, ownerId, ownerName, 'furniture');
                 break;
             }
             case RoomObjectCategory.FLOOR: {
@@ -116,7 +147,13 @@ const useFurniChooserWidgetState = () =>
                                  (GetSessionDataManager().getUserData ? GetSessionDataManager().getUserData(ownerId)?.name : null) || 
                                  `User_${ownerId}`;
 
-                item = new RoomObjectItem(roomObject.id, RoomObjectCategory.FLOOR, name, ownerId, ownerName);
+                // Skip pet/bot furniture
+                if(isPetOrBot(roomObject.type)) {
+                    return;
+                }
+
+                item = new RoomObjectItem(roomObject.id, RoomObjectCategory.FLOOR, name, ownerId, ownerName, 'furniture');
+                break;
             }
         }
 
@@ -138,7 +175,6 @@ const useFurniChooserWidgetState = () =>
                 if((existingValue.id !== event.id) || (existingValue.category !== event.category)) continue;
 
                 newValue.splice(i, 1);
-
                 break;
             }
 

src/hooks/rooms/widgets/useUserChooserWidget.ts

@@ -11,7 +11,19 @@ const useUserChooserWidgetState = () =>
 
     const onClose = () => setItems(null);
 
-    const selectItem = (item: RoomObjectItem) => item && GetRoomEngine().selectRoomObject(GetRoomSession().roomId, item.id, item.category);
+    const selectItem = (item: RoomObjectItem) =>
+        item && GetRoomEngine().selectRoomObject(GetRoomSession().roomId, item.id, item.category);
+
+    const resolveType = (userType: number): string =>
+    {
+        switch(userType)
+        {
+            case 1: return 'Habbo';
+            case 2: return 'Pet';
+            case 3: return 'Bot';
+            default: return '-';
+        }
+    }
 
     const populateChooser = () =>
     {
@@ -24,12 +36,19 @@ const useUserChooserWidgetState = () =>
                 if(roomObject.id < 0) return null;
 
                 const userData = roomSession.userDataManager.getUserDataByIndex(roomObject.id);
-
                 if(!userData) return null;
 
-                return new RoomObjectItem(userData.roomIndex, RoomObjectCategory.UNIT, userData.name);
+                if(userData.type !== 1) {
+                    return null;
+                }
+
+                const type = resolveType(userData.type);
+                const item = new RoomObjectItem(userData.roomIndex, RoomObjectCategory.UNIT, userData.name, 0, '-', type);
+                return item;
             })
-            .sort((a, b) => ((a.name < b.name) ? -1 : 1)));
+            .filter(Boolean)
+            .sort((a, b) => ((a.name < b.name) ? -1 : 1))
+        );
     }
 
     useUserAddedEvent(!!items, event =>
@@ -37,16 +56,20 @@ const useUserChooserWidgetState = () =>
         if(event.id < 0) return;
 
         const userData = GetRoomSession().userDataManager.getUserDataByIndex(event.id);
-
         if(!userData) return;
 
+        if(userData.type !== 1) {
+            return;
+        }
+
+        const type = resolveType(userData.type);
+        const item = new RoomObjectItem(userData.roomIndex, RoomObjectCategory.UNIT, userData.name, 0, '-', type);
+
         setItems(prevValue =>
         {
             const newValue = [ ...prevValue ];
-
+            newValue.push(item);
-            newValue.push(new RoomObjectItem(userData.roomIndex, RoomObjectCategory.UNIT, userData.name));
             newValue.sort((a, b) => ((a.name < b.name) ? -1 : 1));
-
             return newValue;
         });
     });
@@ -66,7 +89,6 @@ const useUserChooserWidgetState = () =>
                 if((existingValue.id !== event.id) || (existingValue.category !== event.category)) continue;
 
                 newValue.splice(i, 1);
-
                 break;
             }