billsonnn · oobjectt · Dec 14, 2022 · Dec 15, 2022
diff --git a/src/common/card/NitroCardHeaderView.tsx b/src/common/card/NitroCardHeaderView.tsx
@@ -6,14 +6,16 @@ interface NitroCardHeaderViewProps extends ColumnProps
 {
     headerText: string;
     isGalleryPhoto?: boolean;
+    isInfoToHabboPages?: boolean;
     noCloseButton?: boolean;
     onReportPhoto?: (event: MouseEvent) => void;
+    onClickInfoHabboPages?: (event: MouseEvent) => void;
     onCloseClick: (event: MouseEvent) => void;
 }
 
 export const NitroCardHeaderView: FC<NitroCardHeaderViewProps> = props =>
 {
-    const { headerText = null, isGalleryPhoto = false, noCloseButton = false, onReportPhoto = null, onCloseClick = null, justifyContent = 'center', alignItems = 'center', classNames = [], children = null, ...rest } = props;
+    const { headerText = null, isGalleryPhoto = false, isInfoToHabboPages = false, noCloseButton = false, onReportPhoto = null, onClickInfoHabboPages = null, onCloseClick = null, justifyContent = 'center', alignItems = 'center', classNames = [], children = null, ...rest } = props;
 
     const getClassNames = useMemo(() =>
     {
@@ -39,6 +41,11 @@ export const NitroCardHeaderView: FC<NitroCardHeaderViewProps> = props =>
                         <FontAwesomeIcon icon="flag" />
                     </Base>
                 }
+                { isInfoToHabboPages &&
+                    <Base position="absolute" className="end-4 nitro-card-header-info-habbopages" onClick={ onClickInfoHabboPages }>
+                        <FontAwesomeIcon icon="question" />
+                    </Base>
+                }
                 <Base position="absolute" className="end-2 nitro-card-header-close" onMouseDownCapture={ onMouseDown } onClick={ onCloseClick }>
                     <FontAwesomeIcon icon="times" />
                 </Base>

diff --git a/src/common/card/NitroCardView.scss b/src/common/card/NitroCardView.scss
@@ -68,6 +68,30 @@ $nitro-card-tabs-height: 33px;
                     filter: brightness(0.8);
                 }
             }
+
+            .nitro-card-header-info-habbopages {
+                cursor: pointer;
+                padding: 1px 3px;
+                line-height: 1;
+                border-radius: $border-radius;
+                box-shadow: 0 0 0 1.6px $white;
+                border: 2px solid #1E7295;
+                background: repeating-linear-gradient(
+                    rgba(30, 114, 149),
+                    rgba(30, 114, 149) 50%,
+                    rgb(9, 102, 133) 50%,
+                    rgb(25, 96, 126) 100%
+                );
+                margin-right: 10px;
+
+                &:hover {
+                    filter: brightness(1.2);
+                }
+
+                &:active {
+                    filter: brightness(0.8);
+                }
+            }
         }
 
         .nitro-card-tabs {
@@ -190,6 +214,31 @@ $nitro-card-tabs-height: 33px;
                     filter: brightness(0.8);
                 }
             }
+
+            .nitro-card-header-info-habbopages {
+                cursor: pointer;
+                padding: 0px 2px;
+                margin-right: 4px;
+                line-height: 1;
+                @include font-size($h7-font-size);
+                border-radius: $border-radius;
+                box-shadow: 0 0 0 1.6px $white;
+                border: 2px solid #1E7295;
+                background: repeating-linear-gradient(
+                    rgba(30, 114, 149),
+                    rgba(30, 114, 149) 50%,
+                    rgb(9, 102, 133) 50%,
+                    rgb(25, 96, 126) 100%
+                );
+
+                &:hover {
+                    filter: brightness(1.2);
+                }
+
+                &:active {
+                    filter: brightness(0.8);
+                }
+            }
         }
 
         .nitro-card-tabs {

diff --git a/src/components/camera/CameraWidgetView.scss b/src/components/camera/CameraWidgetView.scss
@@ -26,6 +26,31 @@
         }
     }
 
+    .info-camera {
+        top: 8px;
+        right: 36px;
+        border-radius: $border-radius;
+        box-shadow: 0 0 0 1.5px $white;
+        border: 2px solid #1E7295;
+        background: repeating-linear-gradient(
+            rgba(30, 114, 149),
+            rgba(30, 114, 149) 50%,
+            rgb(9, 102, 133) 50%,
+            rgb(25, 96, 126) 100%
+        );
+        cursor: pointer;
+        line-height: 1;
+        padding: 1px 3px;
+
+        &:hover {
+            filter: brightness(1.2);
+        }
+
+        &:active {
+            filter: brightness(0.8);
+        }
+    }
+
     .camera-area {
         position: absolute;
         top: 37px;

diff --git a/src/components/camera/views/CameraWidgetCaptureView.tsx b/src/components/camera/views/CameraWidgetCaptureView.tsx
@@ -1,7 +1,7 @@
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { NitroRectangle, TextureUtils } from '@nitrots/nitro-renderer';
 import { FC, useRef } from 'react';
-import { CameraPicture, GetRoomEngine, GetRoomSession, LocalizeText, PlaySound, SoundNames } from '../../../api';
+import { CameraPicture, CreateLinkEvent, GetRoomEngine, GetRoomSession, LocalizeText, PlaySound, SoundNames } from '../../../api';
 import { Column, DraggableWindow, Flex } from '../../../common';
 import { useCamera, useNotification } from '../../../hooks';
 
@@ -28,7 +28,7 @@ export const CameraWidgetCaptureView: FC<CameraWidgetCaptureViewProps> = props =
         if(!elementRef || !elementRef.current) return null;
 
         const frameBounds = elementRef.current.getBoundingClientRect();
-        
+
         return new NitroRectangle(Math.floor(frameBounds.x), Math.floor(frameBounds.y), Math.floor(frameBounds.width), Math.floor(frameBounds.height));
     }
 
@@ -62,11 +62,14 @@ export const CameraWidgetCaptureView: FC<CameraWidgetCaptureViewProps> = props =
             <Column center className="nitro-camera-capture" gap={ 0 }>
                 { selectedPicture && <img alt="" className="camera-area" src={ selectedPicture.imageUrl } /> }
                 <div className="camera-canvas drag-handler">
+                    <div className="position-absolute info-camera" onClick={ () => CreateLinkEvent('habbopages/camera') }>
+                        <FontAwesomeIcon icon="question" />
+                    </div>
                     <div className="position-absolute header-close" onClick={ onClose }>
                         <FontAwesomeIcon icon="times" />
                     </div>
                     { !selectedPicture && <div ref={ elementRef } className="camera-area camera-view-finder" /> }
-                    { selectedPicture && 
+                    { selectedPicture &&
                         <div className="camera-area camera-frame">
                             <div className="camera-frame-preview-actions w-100 position-absolute bottom-0 py-2 text-center">
                                 <button className="btn btn-success me-3" title={ LocalizeText('camera.editor.button.tooltip') } onClick={ onEdit }>{ LocalizeText('camera.editor.button.text') }</button>

diff --git a/src/components/catalog/views/targeted-offer/OfferBubbleView.tsx b/src/components/catalog/views/targeted-offer/OfferBubbleView.tsx
@@ -10,7 +10,7 @@ export const OfferBubbleView = (props: { offer: TargetedOfferData, setOpen: Disp
     if (!offer) return;
 
     return <LayoutNotificationBubbleView fadesOut={ false } onClose={ null } onClick={ evt => setOpen(true) } gap={ 2 }>
-        <Base className="nitro-targeted-offer-icon" style={ { backgroundImage: `url(${ GetConfiguration('image.library.url') + offer._Str_13452 })` } }/>
+        <Base className="nitro-targeted-offer-icon" style={ { backgroundImage: `url(${ GetConfiguration('image.library.url') + offer.imageUrl })` } }/>
         <Text variant="light" className="ubuntu-bold">{ offer.title }</Text>
     </LayoutNotificationBubbleView>;
 }
diff --git a/src/components/hc-center/HcCenterView.tsx b/src/components/hc-center/HcCenterView.tsx
@@ -19,12 +19,12 @@ export const HcCenterView: FC<{}> = props =>
     const getClubText = () =>
     {
         if(purse.clubDays <= 0) return LocalizeText('purse.clubdays.zero.amount.text');
-        
+
         if((purse.minutesUntilExpiration > -1) && (purse.minutesUntilExpiration < (60 * 24)))
         {
             return FriendlyTime.shortFormat(purse.minutesUntilExpiration * 60);
         }
-        
+
         return FriendlyTime.shortFormat(((purse.clubPeriods * 31) + purse.clubDays) * 86400);
     }
 
@@ -64,9 +64,9 @@ export const HcCenterView: FC<{}> = props =>
             linkReceived: (url: string) =>
             {
                 const parts = url.split('/');
-        
+
                 if(parts.length < 2) return;
-        
+
                 switch(parts[1])
                 {
                     case 'open':
@@ -80,7 +80,7 @@ export const HcCenterView: FC<{}> = props =>
                             }
                         }
                         return;
-                } 
+                }
             },
             eventUrlPrefix: 'habboUI/'
         };
@@ -130,7 +130,7 @@ export const HcCenterView: FC<{}> = props =>
 
     return (
         <NitroCardView theme="primary-slim" className="nitro-hc-center">
-            <NitroCardHeaderView headerText={ LocalizeText('generic.hccenter') } onCloseClick={ () => setIsVisible(false) } />
+            <NitroCardHeaderView headerText={ LocalizeText('generic.hccenter') } isInfoToHabboPages={ true } onClickInfoHabboPages={ () => CreateLinkEvent('habbopages/' + GetConfiguration('hc.center')['benefits.habbopage']) } onCloseClick={ () => setIsVisible(false) } />
             <Flex position="relative" className="bg-muted p-2">
                 <Column gap={ 1 }>
                     <div className="hc-logo" />
@@ -154,7 +154,7 @@ export const HcCenterView: FC<{}> = props =>
                 </Flex>
                 { GetConfiguration('hc.center')['payday.info'] &&
                     <Flex alignItems="center">
-                        
+
                         <Column className="rounded-start bg-primary p-2 payday-special mb-1">
                             <h4 className="mb-1">{ LocalizeText('hccenter.special.title') }</h4>
                             <div>{ LocalizeText('hccenter.special.info') }</div>

diff --git a/src/components/navigator/NavigatorView.tsx b/src/components/navigator/NavigatorView.tsx
@@ -1,7 +1,7 @@
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { ConvertGlobalRoomIdMessageComposer, HabboWebTools, ILinkEventTracker, LegacyExternalInterface, NavigatorInitComposer, NavigatorSearchComposer, RoomSessionEvent } from '@nitrots/nitro-renderer';
 import { FC, useCallback, useEffect, useRef, useState } from 'react';
-import { AddEventLinkTracker, LocalizeText, RemoveLinkEventTracker, SendMessageComposer, TryVisitRoom } from '../../api';
+import { AddEventLinkTracker, CreateLinkEvent, LocalizeText, RemoveLinkEventTracker, SendMessageComposer, TryVisitRoom } from '../../api';
 import { Base, Column, NitroCardContentView, NitroCardHeaderView, NitroCardTabsItemView, NitroCardTabsView, NitroCardView } from '../../common';
 import { useNavigator, useRoomSessionManagerEvent } from '../../hooks';
 import { NavigatorDoorStateView } from './views/NavigatorDoorStateView';
@@ -77,9 +77,9 @@ export const NavigatorView: FC<{}> = props =>
             linkReceived: (url: string) =>
             {
                 const parts = url.split('/');
-        
+
                 if(parts.length < 2) return;
-        
+
                 switch(parts[1])
                 {
                     case 'show': {
@@ -94,10 +94,10 @@ export const NavigatorView: FC<{}> = props =>
                         if(isVisible)
                         {
                             setIsVisible(false);
-        
+
                             return;
                         }
-        
+
                         setIsVisible(true);
                         setNeedsSearch(true);
                         return;
@@ -110,17 +110,17 @@ export const NavigatorView: FC<{}> = props =>
                         return;
                     case 'goto':
                         if(parts.length <= 2) return;
-        
+
                         switch(parts[2])
                         {
                             case 'home':
                                 if(navigatorData.homeRoomId <= 0) return;
-        
+
                                 TryVisitRoom(navigatorData.homeRoomId);
                                 break;
                             default: {
                                 const roomId = parseInt(parts[2]);
-        
+
                                 TryVisitRoom(roomId);
                             }
                         }
@@ -133,13 +133,13 @@ export const NavigatorView: FC<{}> = props =>
                         if(parts.length > 2)
                         {
                             const topLevelContextCode = parts[2];
-        
+
                             let searchValue = '';
-        
+
                             if(parts.length > 3) searchValue = parts[3];
-        
+
                             pendingSearch.current = { value: searchValue, code: topLevelContextCode };
-        
+
                             setIsVisible(true);
                             setNeedsSearch(true);
                         }
@@ -197,7 +197,7 @@ export const NavigatorView: FC<{}> = props =>
         <>
             { isVisible &&
                 <NitroCardView uniqueKey="navigator" className="nitro-navigator">
-                    <NitroCardHeaderView headerText={ LocalizeText(isCreatorOpen ? 'navigator.createroom.title' : 'navigator.title') } onCloseClick={ event => setIsVisible(false) } />
+                    <NitroCardHeaderView headerText={ LocalizeText(isCreatorOpen ? 'navigator.createroom.title' : 'navigator.title') } isInfoToHabboPages={ true } onClickInfoHabboPages={ () => CreateLinkEvent('habbopages/navigator') } onCloseClick={ event => setIsVisible(false) } />
                     <NitroCardTabsView>
                         { topLevelContexts && (topLevelContexts.length > 0) && topLevelContexts.map((context, index) =>
                         {

diff --git a/src/components/room/widgets/chat-input/ChatInputView.scss b/src/components/room/widgets/chat-input/ChatInputView.scss
@@ -37,7 +37,7 @@
         vertical-align: top;
         height: 100%;
         padding: 0 10px;
-        
+
         &::after,
         input,
         textarea {
@@ -51,7 +51,7 @@
             border: none;
             outline: none;
         }
-        
+
         &::after {
             content: attr(data-value) '  ';
             visibility: hidden;
@@ -82,3 +82,26 @@
         }
     }
 }
+
+.info-habbopages {
+    cursor: pointer;
+    line-height: 1;
+    border-radius: $border-radius;
+    box-shadow: 0 0 0 1.6px $white;
+    border: 2px solid #1E7295;
+    background: repeating-linear-gradient(
+        rgba(30, 114, 149),
+        rgba(30, 114, 149) 50%,
+        rgb(9, 102, 133) 50%,
+        rgb(25, 96, 126) 100%
+    );
+    margin-left: 6px;
+
+    &:hover {
+        filter: brightness(1.2);
+    }
+
+    &:active {
+        filter: brightness(0.8);
+    }
+}
diff --git a/src/components/room/widgets/chat-input/ChatInputView.tsx b/src/components/room/widgets/chat-input/ChatInputView.tsx
@@ -1,14 +1,16 @@
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { HabboClubLevelEnum, RoomControllerLevel } from '@nitrots/nitro-renderer';
 import { FC, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
-import { ChatMessageTypeEnum, GetClubMemberLevel, GetConfiguration, GetRoomSession, GetSessionDataManager, LocalizeText, RoomWidgetUpdateChatInputContentEvent } from '../../../../api';
-import { Text } from '../../../../common';
+import { ChatMessageTypeEnum, CreateLinkEvent, GetClubMemberLevel, GetConfiguration, GetRoomSession, GetSessionDataManager, LocalizeText, RoomWidgetUpdateChatInputContentEvent } from '../../../../api';
+import { Base, Text } from '../../../../common';
 import { useChatInputWidget, useSessionInfo, useUiEvent } from '../../../../hooks';
 import { ChatInputStyleSelectorView } from './ChatInputStyleSelectorView';
 
 export const ChatInputView: FC<{}> = props =>
 {
     const [ chatValue, setChatValue ] = useState<string>('');
+    const [ showInfoHabboPages, setShowInfohabboPages ] = useState<boolean>(false);
     const { chatStyleId = 0, updateChatStyleId = null } = useSessionInfo();
     const { selectedUsername = '', floodBlocked = false, floodBlockedSeconds = 0, setIsTyping = null, setIsIdle = null, sendChat = null } = useChatInputWidget();
     const inputRef = useRef<HTMLInputElement>();
@@ -234,14 +236,20 @@ export const ChatInputView: FC<{}> = props =>
 
     return (
         createPortal(
-            <div className="nitro-chat-input-container">
+            <div className="nitro-chat-input-container" onMouseEnter={ () => setShowInfohabboPages(true) } onMouseLeave={ () => setTimeout(() => setShowInfohabboPages(false), 100) }>
                 <div className="input-sizer align-items-center">
                     { !floodBlocked &&
                     <input ref={ inputRef } type="text" className="chat-input" placeholder={ LocalizeText('widgets.chatinput.default') } value={ chatValue } maxLength={ maxChatLength } onChange={ event => updateChatInput(event.target.value) } onMouseDown={ event => setInputFocus() } /> }
                     { floodBlocked &&
                     <Text variant="danger">{ LocalizeText('chat.input.alert.flood', [ 'time' ], [ floodBlockedSeconds.toString() ]) } </Text> }
                 </div>
                 <ChatInputStyleSelectorView chatStyleId={ chatStyleId } chatStyleIds={ chatStyleIds } selectChatStyleId={ updateChatStyleId } />
-            </div>, document.getElementById('toolbar-chat-input-container'))
+                { (showInfoHabboPages) &&
+                    <Base className="info-habbopages" onClick={ () => CreateLinkEvent('habbopages/chat/chatting') }>
+                        <FontAwesomeIcon icon="question" />
+                    </Base>
+                }
+            </div>
+            , document.getElementById('toolbar-chat-input-container'))
     );
 }