diff --git a/src/assets/images/room-widgets/stickie-widget/stickie-dreams.png b/src/assets/images/room-widgets/stickie-widget/stickie-dreams.png new file mode 100644 index 00000000..27ccbdbc Binary files /dev/null and b/src/assets/images/room-widgets/stickie-widget/stickie-dreams.png differ diff --git a/src/assets/images/room-widgets/stickie-widget/stickie-heart.png b/src/assets/images/room-widgets/stickie-widget/stickie-heart.png new file mode 100644 index 00000000..45523851 Binary files /dev/null and b/src/assets/images/room-widgets/stickie-widget/stickie-heart.png differ diff --git a/src/assets/images/room-widgets/stickie-widget/stickie-juninas.png b/src/assets/images/room-widgets/stickie-widget/stickie-juninas.png new file mode 100644 index 00000000..1d64ddab Binary files /dev/null and b/src/assets/images/room-widgets/stickie-widget/stickie-juninas.png differ diff --git a/src/assets/images/room-widgets/stickie-widget/stickie-shakesp.png b/src/assets/images/room-widgets/stickie-widget/stickie-shakesp.png new file mode 100644 index 00000000..d5011c74 Binary files /dev/null and b/src/assets/images/room-widgets/stickie-widget/stickie-shakesp.png differ diff --git a/src/components/room/widgets/furniture/FurnitureStickieView.tsx b/src/components/room/widgets/furniture/FurnitureStickieView.tsx index cfa23e26..2f0e0fee 100644 --- a/src/components/room/widgets/furniture/FurnitureStickieView.tsx +++ b/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 ( -
+
- { canModify && + { canModify && <>
- { STICKIE_COLORS.map(color => - { - return
updateColor(color) } style={ { backgroundColor: ColorUtils.makeColorHex(color) } } /> - }) } + { type == 'post_it' && + <> + { STICKIE_COLORS.map(color => + { + return
updateColor(color) } style={ { backgroundColor: ColorUtils.makeColorHex(color) } } /> + }) } + } }
diff --git a/src/components/room/widgets/furniture/FurnitureWidgets.scss b/src/components/room/widgets/furniture/FurnitureWidgets.scss index a129da04..e7d8bdf2 100644 --- a/src/components/room/widgets/furniture/FurnitureWidgets.scss +++ b/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; diff --git a/src/hooks/rooms/widgets/furniture/useFurnitureStickieWidget.ts b/src/hooks/rooms/widgets/furniture/useFurnitureStickieWidget.ts index f1e89134..7cc15975 100644 --- a/src/hooks/rooms/widgets/furniture/useFurnitureStickieWidget.ts +++ b/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(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;