Merge branch '@feature/sticky-notes' into '@fix/zalgo-text'

Fix sticky notes (issue #137) - (feature #238)

See merge request nitro/nitro-react!69

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

@@ -5,6 +5,8 @@ import { useFurnitureStickieWidget } from '../../../../hooks';
 
 const STICKIE_COLORS = [ '9CCEFF','FF9CFF', '9CFF9C','FFFF33' ];
 const STICKIE_COLOR_NAMES = [ 'blue', 'pink', 'green', 'yellow' ];
+const STICKIE_TYPES = [ 'post_it','post_it_shakesp', 'post_it_dreams','post_it_xmas', 'post_it_vd', 'post_it_juninas' ];
+const STICKIE_TYPE_NAMES = [ 'post_it', 'shakesp', 'dreams', 'christmas', 'heart', 'juninas' ];
 
 const getStickieColorName = (color: string) =>
 {
@@ -15,30 +17,42 @@ const getStickieColorName = (color: string) =>
     return STICKIE_COLOR_NAMES[index];
 }
 
+const getStickieTypeName = (type: string) =>
+{
+    let index = STICKIE_TYPES.indexOf(type);
+
+    if(index === -1) index = 0;
+
+    return STICKIE_TYPE_NAMES[index];
+}
+
 export const FurnitureStickieView: FC<{}> = props =>
 {
-    const { objectId = -1, color = '0', text = '', canModify = false, updateColor = null, updateText = null, trash = null, onClose = null } = useFurnitureStickieWidget();
+    const { objectId = -1, color = '0', text = '', type = '', canModify = false, updateColor = null, updateText = null, trash = null, onClose = null } = useFurnitureStickieWidget();
     const [ isEditing, setIsEditing ] = useState(false);
 
     useEffect(() =>
     {
         setIsEditing(false);
-    }, [ objectId, color, text ]);
+    }, [ objectId, color, text, type ]);
 
     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={ 'nitro-stickie nitro-stickie-image stickie-' + (type == 'post_it' ? getStickieColorName(color) : getStickieTypeName(type)) }>
                 <div className="d-flex align-items-center stickie-header drag-handler">
                     <div className="d-flex align-items-center flex-grow-1 h-100">
-                        { canModify && 
+                        { canModify &&
                         <>
                             <div className="nitro-stickie-image stickie-trash header-trash" onClick={ trash }></div>
-                            { STICKIE_COLORS.map(color =>
-                            {
-                                return <div key={ color } className="stickie-color ms-1" onClick={ event => updateColor(color) } style={ { backgroundColor: ColorUtils.makeColorHex(color) } } />
-                            }) }
+                            { type == 'post_it' &&
+                                <>
+                                    { STICKIE_COLORS.map(color =>
+                                    {
+                                        return <div key={ color } className="stickie-color ms-1" onClick={ event => updateColor(color) } style={ { backgroundColor: ColorUtils.makeColorHex(color) } } />
+                                    }) }
+                                </> }
                         </> }
                     </div>
                     <div className="d-flex align-items-center nitro-stickie-image stickie-close header-close" onClick={ onClose }></div>

src/components/room/widgets/furniture/FurnitureWidgets.scss

@@ -161,6 +161,26 @@
         background-position: -2px -184px;
     }
 
+    &.stickie-christmas {
+        background-image: url("../../../../assets/images/room-widgets/stickie-widget/stickie-christmas.png");
+    }
+
+    &.stickie-shakesp {
+        background-image: url("../../../../assets/images/room-widgets/stickie-widget/stickie-shakesp.png");
+    }
+
+    &.stickie-dreams {
+        background-image: url("../../../../assets/images/room-widgets/stickie-widget/stickie-dreams.png");
+    }
+
+    &.stickie-heart {
+        background-image: url("../../../../assets/images/room-widgets/stickie-widget/stickie-heart.png");
+    }
+
+    &.stickie-juninas {
+        background-image: url("../../../../assets/images/room-widgets/stickie-widget/stickie-juninas.png");
+    }
+
     &.stickie-close {
         width: 10px;
         height: 10px;
@@ -202,7 +222,7 @@
     font-weight: bold;
     font-size: 16px;
     text-shadow: 0px 1px white;
-    
+
     &.engraving-lock-3 {
         background-position: 0px -210px;
         color: #614110;
@@ -262,7 +282,7 @@
 
     .youtube-video-container {
         //min-height: 366px;
-        
+
         .empty-video {
             background-color: black;
             color: white;

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

@@ -10,6 +10,7 @@ const useFurnitureStickieWidgetState = () =>
     const [ category, setCategory ] = useState(-1);
     const [ color, setColor ] = useState('0');
     const [ text, setText ] = useState('');
+    const [ type, setType ] = useState('');
     const [ canModify, setCanModify ] = useState(false);
 
     const onClose = () =>
@@ -18,6 +19,7 @@ const useFurnitureStickieWidgetState = () =>
         setCategory(-1);
         setColor('0');
         setText('');
+        setType('');
         setCanModify(false);
     }
 
@@ -44,7 +46,7 @@ const useFurnitureStickieWidgetState = () =>
         const roomObject = GetRoomEngine().getRoomObject(event.roomId, event.objectId, event.category);
 
         if(!roomObject) return;
-        
+
         const data = roomObject.model.getValue<string>(RoomObjectVariable.FURNITURE_ITEMDATA);
 
         if(data.length < 6) return;
@@ -66,6 +68,7 @@ const useFurnitureStickieWidgetState = () =>
         setCategory(event.category);
         setColor(color || '0');
         setText(text || '');
+        setType(roomObject.type || 'post_it');
         setCanModify(GetRoomSession().isRoomOwner || GetSessionDataManager().isModerator || IsOwnerOfFurniture(roomObject));
     });
 
@@ -76,7 +79,7 @@ const useFurnitureStickieWidgetState = () =>
         onClose();
     });
 
-    return { objectId, color, text, canModify, updateColor, updateText, trash, onClose };
+    return { objectId, color, text, type, canModify, updateColor, updateText, trash, onClose };
 }
 
 export const useFurnitureStickieWidget = useFurnitureStickieWidgetState;