Add FurnitureSpamWallPostItWidget / :multi

src/components/room/widgets/furniture/FurnitureSpamWallPostItView.tsx

@@ -0,0 +1,46 @@
+import { FC } from 'react';
+import { ColorUtils } from '../../../../api';
+import { DraggableWindow, DraggableWindowPosition } from '../../../../common';
+import { useFurnitureSpamWallPostItWidget } from '../../../../hooks';
+
+const STICKIE_COLORS = [ '9CCEFF','FF9CFF', '9CFF9C','FFFF33' ];
+const STICKIE_COLOR_NAMES = [ 'blue', 'pink', 'green', 'yellow' ];
+
+const getStickieColorName = (color: string) =>
+{
+    let index = STICKIE_COLORS.indexOf(color);
+
+    if(index === -1) index = 0;
+
+    return STICKIE_COLOR_NAMES[index];
+}
+
+export const FurnitureSpamWallPostItView: FC<{}> = props =>
+{
+    const { objectId = -1, color = '0', setColor = null, text = '', setText = null, canModify = false, onClose = null } = useFurnitureSpamWallPostItWidget();
+
+    if(objectId === -1) return null;
+
+    return (
+        <DraggableWindow handleSelector=".drag-handler" windowPosition={ DraggableWindowPosition.TOP_LEFT }>
+            <div className={ 'nitro-stickie nitro-stickie-image stickie-' + getStickieColorName(color) }>
+                <div className="d-flex align-items-center stickie-header drag-handler">
+                    <div className="d-flex align-items-center flex-grow-1 h-100">
+                        { canModify && 
+                        <>
+                            <div className="nitro-stickie-image stickie-trash header-trash" onClick={ onClose }></div>
+                            { STICKIE_COLORS.map(color =>
+                            {
+                                return <div key={ color } className="stickie-color ms-1" onClick={ event => setColor(color) } style={ { backgroundColor: ColorUtils.makeColorHex(color) } } />
+                            }) }
+                        </> }
+                    </div>
+                    <div className="d-flex align-items-center nitro-stickie-image stickie-close header-close" onClick={ onClose }></div>
+                </div>
+                <div className="stickie-context">
+                    <textarea className="context-text" value={ text } onChange={ event => setText(event.target.value) } tabIndex={ 0 } autoFocus></textarea>
+                </div>
+            </div>
+        </DraggableWindow>
+    );
+}

src/components/room/widgets/furniture/FurnitureWidgetsView.tsx

@@ -12,6 +12,7 @@ import { FurnitureHighScoreView } from './FurnitureHighScoreView';
 import { FurnitureInternalLinkView } from './FurnitureInternalLinkView';
 import { FurnitureMannequinView } from './FurnitureMannequinView';
 import { FurnitureRoomLinkView } from './FurnitureRoomLinkView';
+import { FurnitureSpamWallPostItView } from './FurnitureSpamWallPostItView';
 import { FurnitureStackHeightView } from './FurnitureStackHeightView';
 import { FurnitureStickieView } from './FurnitureStickieView';
 import { FurnitureTrophyView } from './FurnitureTrophyView';
@@ -23,7 +24,6 @@ export const FurnitureWidgetsView: FC<{}> = props =>
         <Base fit position="absolute" className="nitro-room-widgets top-0 start-0">
             <FurnitureBackgroundColorView />
             <FurnitureBadgeDisplayView />
-            <FurnitureStackHeightView />
             <FurnitureDimmerView />
             <FurnitureExchangeCreditView />
             <FurnitureExternalImageView />
@@ -33,6 +33,8 @@ export const FurnitureWidgetsView: FC<{}> = props =>
             <FurnitureInternalLinkView />
             <FurnitureMannequinView />
             <FurnitureRoomLinkView />
+            <FurnitureSpamWallPostItView />
+            <FurnitureStackHeightView />
             <FurnitureStickieView />
             <FurnitureTrophyView />
             <FurnitureContextMenuView />

src/hooks/inventory/useInventoryFurni.ts

@@ -17,6 +17,34 @@ const useInventoryFurniState = () =>
     const { isVisible = false, activate = null, deactivate = null } = useSharedVisibility();
     const { isUnseen = null, resetCategory = null } = useInventoryUnseenTracker();
 
+    const getWallItemById = (id: number) =>
+    {
+        if(!groupItems || !groupItems.length) return;
+
+        for(const groupItem of groupItems)
+        {
+            const item = groupItem.getItemById(id);
+
+            if(item && item.isWallItem) return groupItem;
+        }
+
+        return null;
+    }
+
+    const getFloorItemById = (id: number) =>
+    {
+        if(!groupItems || !groupItems.length) return;
+
+        for(const groupItem of groupItems)
+        {
+            const item = groupItem.getItemById(id);
+
+            if(item && !item.isWallItem) return groupItem;
+        }
+
+        return null;
+    }
+
     useMessageEvent<FurnitureListAddOrUpdateEvent>(FurnitureListAddOrUpdateEvent, event =>
     {
         const parser = event.getParser();
@@ -257,7 +285,7 @@ const useInventoryFurniState = () =>
         setNeedsUpdate(false);
     }, [ isVisible, needsUpdate ]);
 
-    return { isVisible, groupItems, setGroupItems, selectedItem, setSelectedItem, activate, deactivate };
+    return { isVisible, groupItems, setGroupItems, selectedItem, setSelectedItem, activate, deactivate, getWallItemById, getFloorItemById };
 }
 
 export const useInventoryFurni = () => useBetween(useInventoryFurniState);

src/hooks/rooms/widgets/furniture/index.ts

@@ -10,6 +10,7 @@ export * from './useFurnitureInternalLinkWidget';
 export * from './useFurnitureMannequinWidget';
 export * from './useFurniturePresentWidget';
 export * from './useFurnitureRoomLinkWidget';
+export * from './useFurnitureSpamWallPostItWidget';
 export * from './useFurnitureStackHeightWidget';
 export * from './useFurnitureStickieWidget';
 export * from './useFurnitureTrophyWidget';

src/hooks/rooms/widgets/furniture/useFurnitureSpamWallPostItWidget.ts

@@ -0,0 +1,59 @@
+import { AddSpamWallPostItMessageComposer, RequestSpamWallPostItMessageEvent, RoomObjectCategory } from '@nitrots/nitro-renderer';
+import { useState } from 'react';
+import { GetRoomEngine, SendMessageComposer } from '../../../../api';
+import { useMessageEvent } from '../../../events';
+import { useInventoryFurni } from '../../../inventory';
+
+const useFurnitureSpamWallPostItWidgetState = () =>
+{
+    const [ objectId, setObjectId ] = useState(-1);
+    const [ category, setCategory ] = useState(-1);
+    const [ itemType, setItemType ] = useState('');
+    const [ location, setLocation ] = useState('');
+    const [ color, setColor ] = useState('0');
+    const [ text, setText ] = useState('');
+    const [ canModify, setCanModify ] = useState(false);
+    const { getWallItemById = null } = useInventoryFurni();
+
+    const onClose = () =>
+    {
+        SendMessageComposer(new AddSpamWallPostItMessageComposer(objectId, location, color, text));
+
+        setObjectId(-1);
+        setCategory(-1);
+        setItemType('');
+        setLocation('');
+        setColor('0');
+        setText('');
+        setCanModify(false);
+    }
+
+    useMessageEvent<RequestSpamWallPostItMessageEvent>(RequestSpamWallPostItMessageEvent, event =>
+    {
+        const parser = event.getParser();
+        
+        setObjectId(parser.itemId);
+        setCategory(RoomObjectCategory.WALL);
+
+        const inventoryItem = getWallItemById(parser.itemId);
+
+        let itemType = 'post_it';
+
+        if(inventoryItem)
+        {
+            const wallItemType = GetRoomEngine().getFurnitureWallName(inventoryItem.type);
+
+            if(wallItemType.match('post_it_')) itemType = wallItemType;
+        }
+
+        setItemType(itemType);
+        setLocation(parser.location);
+        setColor('FFFF33');
+        setText('');
+        setCanModify(true);
+    });
+
+    return { objectId, color, setColor, text, setText, canModify, onClose };
+}
+
+export const useFurnitureSpamWallPostItWidget = useFurnitureSpamWallPostItWidgetState;