add hc center - lineheight changes 2

public/ui-config.json

@@ -5,7 +5,7 @@
     "thumbnails.url": "https://nitro.nitrots.co/camera/thumbnail/%thumbnail%.png",
     "url.prefix": "http://localhost:3000",
     "floorplan.tile.url": "${asset.url}/floorplan-editor/tiles.json",
-    "habbopages.url": "http://localhost:3000/",
+    "habbopages.url": "https://swf.nitrots.co/gamedata/habbopages/",
     "chat.viewer.height.percentage": 0.40,
     "widget.dimmer.colorwheel": false,
     "hotelview": {
@@ -47,6 +47,15 @@
         5,
         101
     ],
+    "hc.center": {
+        "benefits.info": true,
+        "payday.info": true,
+        "gift.info": true,
+        "benefits.habbopage": "habboclub",
+        "payday.habbopage": "hcpayday",
+        "catalog.buy": "habbo_club",
+        "catalog.gifts": "club_gifts"
+    },
     "currency.display.number.short": false,
     "currency.asset.icon.url": "${images.url}/wallet/%type%.png",
     "catalog.asset.url": "${image.library.url}catalogue",

src/assets/styles/bootstrap/_nav.scss

@@ -20,6 +20,9 @@
     text-decoration: if($link-decoration == none, null, none);
     @include transition($nav-link-transition);
 
+    display: flex;
+    align-items: center;
+
     &:hover,
     &:focus {
         color: $nav-link-hover-color;
@@ -50,7 +53,7 @@
 
         &.active {
             &:before {
-        background: #FFFFFF;
+                background: #ffffff;
             }
         }
 
@@ -64,7 +67,7 @@
             left: 0;
             right: 0;
             margin: auto;
-      background: #C2C9D1;
+            background: #c2c9d1;
             z-index: 1;
         }
 
@@ -97,7 +100,6 @@
     }
 }
 
-
 //
 // Pills
 //
@@ -116,7 +118,6 @@
     }
 }
 
-
 //
 // Justified variants
 //
@@ -145,7 +146,6 @@
     }
 }
 
-
 // Tabbable tabs
 //
 // Hide tabbable panes to start, show them when `.active`

src/assets/styles/bootstrap/_reboot.scss

@@ -1,6 +1,5 @@
 // stylelint-disable declaration-no-important, selector-no-qualifying-type, property-no-vendor-prefix
 
-
 // Reboot
 //
 // Normalization of HTML elements, manually forked from Normalize.css to remove
@@ -8,7 +7,6 @@
 //
 // Normalize is licensed MIT. https://github.com/necolas/normalize.css
 
-
 // Document
 //
 // Change from `box-sizing: content-box` so that `width` is not affected by `padding` or `border`.
@@ -16,10 +14,10 @@
 *,
 *::before,
 *::after {
+    line-height: normal;
     box-sizing: border-box;
 }
 
-
 // Root
 //
 // Ability to the value of the root font sizes, affecting the value of `rem`.
@@ -37,7 +35,6 @@
     }
 }
 
-
 // Body
 //
 // 1. Remove the margin in all browsers.
@@ -60,7 +57,6 @@ body {
 }
 // scss-docs-end reboot-body-rules
 
-
 // Content grouping
 //
 // 1. Reset Firefox's gray color
@@ -78,7 +74,6 @@ hr:not([size]) {
     height: $hr-height; // 2
 }
 
-
 // Typography
 //
 // 1. Remove top margins from headings
@@ -125,7 +120,6 @@ h6 {
     @include font-size($h6-font-size);
 }
 
-
 // Reset margins on paragraphs
 //
 // Similarly, the top margin on `<p>`s get reset. However, we also reset the
@@ -136,7 +130,6 @@ p {
     margin-bottom: $paragraph-margin-bottom;
 }
 
-
 // Abbreviations
 //
 // 1. Duplicate behavior to the data-bs-* attribute for our tooltip plugin
@@ -145,13 +138,13 @@ p {
 // 4. Prevent the text-decoration to be skipped.
 
 abbr[title],
-abbr[data-bs-original-title] { // 1
+abbr[data-bs-original-title] {
+    // 1
     text-decoration: underline dotted; // 2
     cursor: help; // 3
     text-decoration-skip-ink: none; // 4
 }
 
-
 // Address
 
 address {
@@ -160,7 +153,6 @@ address {
     line-height: inherit;
 }
 
-
 // Lists
 
 ol,
@@ -189,18 +181,16 @@ dt {
 // 1. Undo browser default
 
 dd {
-  margin-bottom: .5rem;
+    margin-bottom: 0.5rem;
     margin-left: 0; // 1
 }
 
-
 // Blockquote
 
 blockquote {
     margin: 0 0 1rem;
 }
 
-
 // Strong
 //
 // Add the correct font weight in Chrome, Edge, and Safari
@@ -210,7 +200,6 @@ strong {
     font-weight: $font-weight-bolder;
 }
 
-
 // Small
 //
 // Add the correct font size in all browsers
@@ -219,7 +208,6 @@ small {
     @include font-size($small-font-size);
 }
 
-
 // Mark
 
 mark {
@@ -227,7 +215,6 @@ mark {
     background-color: $mark-bg;
 }
 
-
 // Sub and Sup
 //
 // Prevent `sub` and `sup` elements from affecting the line height in
@@ -241,9 +228,12 @@ sup {
     vertical-align: baseline;
 }
 
-sub { bottom: -.25em; }
-sup { top: -.5em; }
-
+sub {
+    bottom: -0.25em;
+}
+sup {
+    top: -0.5em;
+}
 
 // Links
 
@@ -270,7 +260,6 @@ a:not([href]):not([class]) {
     }
 }
 
-
 // Code
 
 pre,
@@ -278,7 +267,9 @@ code,
 kbd,
 samp {
     font-family: $font-family-code;
-  @include font-size(1em); // Correct the odd `em` font sizing in all browsers.
+    @include font-size(
+        1em
+    ); // Correct the odd `em` font sizing in all browsers.
     direction: ltr #{"/* rtl:ignore */"};
     unicode-bidi: bidi-override;
 }
@@ -328,7 +319,6 @@ kbd {
     }
 }
 
-
 // Figures
 //
 // Apply a consistent margin strategy (matches our type styles).
@@ -337,7 +327,6 @@ figure {
     margin: 0 0 1rem;
 }
 
-
 // Images and content
 
 img,
@@ -345,7 +334,6 @@ svg {
     vertical-align: middle;
 }
 
-
 // Tables
 //
 // Prevent double borders
@@ -383,7 +371,6 @@ th {
     border-width: 0;
 }
 
-
 // Forms
 //
 // 1. Allow labels to use `margin` for spacing.
@@ -570,7 +557,6 @@ legend {
     padding: 0;
 }
 
-
 // Inherit font family and line height for file input buttons
 
 ::file-selector-button {
@@ -606,7 +592,6 @@ summary {
     cursor: pointer;
 }
 
-
 // Progress
 //
 // Add the correct vertical alignment in Chrome, Firefox, and Opera.
@@ -615,7 +600,6 @@ progress {
     vertical-align: baseline;
 }
 
-
 // Hidden attribute
 //
 // Always hide an element with the `hidden` HTML attribute.

src/assets/styles/bootstrap/_variables.scss

@@ -390,7 +390,7 @@ $enable-cssgrid:              true !default;
 $enable-button-pointers:      true !default;
 $enable-rfs:                  true !default;
 $enable-validation-icons:     true !default;
-$enable-negative-margins:     false !default;
+$enable-negative-margins:     true !default;
 $enable-deprecation-messages: true !default;
 $enable-important-utilities:  true !default;
 

src/events/hc-center/HcCenterEvent.ts

@@ -0,0 +1,6 @@
+import { NitroEvent } from '@nitrots/nitro-renderer';
+
+export class HcCenterEvent extends NitroEvent
+{
+    public static TOGGLE_HC_CENTER: string = 'HCC_TOGGLE';
+}

src/layout/card/NitroCardView.scss

@@ -66,6 +66,7 @@ $nitro-card-tabs-height: 33px;
 
         .nitro-card {
             width: 100%;
+            height: 100%;
             max-width: 100%;
             max-height: calc(100% - #{$toolbar-height});
             margin: 0;

src/views/Styles.scss

@@ -1,26 +1,27 @@
-@import './shared/Shared';
-@import './avatar-editor/AvatarEditorView';
-@import './camera/CameraWidgetView';
-@import './catalog/CatalogView';
-@import './friends/FriendsView';
-@import './groups/GroupView';
-@import './hotel-view/HotelView';
-@import './inventory/InventoryView';
-@import './loading/LoadingView';
-@import './main/MainView';
-@import './navigator/NavigatorView';
-@import './notification-center/NotificationCenterView';
-@import './purse/PurseView';
-@import './right-side/RightSideView';
-@import './room/RoomView';
-@import './room-host/RoomHostView';
-@import './toolbar/ToolbarView';
-@import './wired/WiredView';
-@import './mod-tools/ModToolsView';
-@import './achievements/AchievementsView';
-@import './user-settings/UserSettingsView';
-@import './user-profile/UserProfileVew';
-@import './chat-history/ChatHistoryView';
-@import './help/HelpView';
-@import './floorplan-editor/FloorplanEditorView';
-@import './nitropedia/NitropediaView';
+@import "./shared/Shared";
+@import "./avatar-editor/AvatarEditorView";
+@import "./camera/CameraWidgetView";
+@import "./catalog/CatalogView";
+@import "./friends/FriendsView";
+@import "./groups/GroupView";
+@import "./hotel-view/HotelView";
+@import "./inventory/InventoryView";
+@import "./loading/LoadingView";
+@import "./main/MainView";
+@import "./navigator/NavigatorView";
+@import "./notification-center/NotificationCenterView";
+@import "./purse/PurseView";
+@import "./right-side/RightSideView";
+@import "./room/RoomView";
+@import "./room-host/RoomHostView";
+@import "./toolbar/ToolbarView";
+@import "./wired/WiredView";
+@import "./mod-tools/ModToolsView";
+@import "./achievements/AchievementsView";
+@import "./user-settings/UserSettingsView";
+@import "./user-profile/UserProfileVew";
+@import "./chat-history/ChatHistoryView";
+@import "./help/HelpView";
+@import "./floorplan-editor/FloorplanEditorView";
+@import "./nitropedia/NitropediaView";
+@import "./hc-center/HcCenterView.scss";

src/views/catalog/views/page/layout/vip-buy/CatalogLayoutVipBuyView.tsx

@@ -169,13 +169,14 @@ export const CatalogLayoutVipBuyView: FC<CatalogLayoutVipBuyViewProps> = props =
                                     </div>
                                 </NitroCardGridItemView>
                             );
-                        }) }
+                    })}
+                    <div className="mt-auto text-black">{ LocalizeText('catalog.vip.buy.hccenter') }</div>
                 </NitroCardGridView>
             </NitroLayoutGridColumn>
             <NitroLayoutGridColumn size={ 5 }>
                 <NitroLayoutFlexColumn className="justify-content-center align-items-center h-100" overflow="hidden" gap={ 2 }>
                     { GetCatalogPageImage(pageParser, 1) && <img className="" alt="" src={ GetCatalogPageImage(pageParser, 1) } /> }
-                    <NitroLayoutBase className="text-center text-black" overflow="auto" dangerouslySetInnerHTML={ { __html: getSubscriptionDetails } } />
+                    <NitroLayoutBase className="text-center text-black" overflow="auto" dangerouslySetInnerHTML={{ __html: getSubscriptionDetails }} />
                 </NitroLayoutFlexColumn>
                 { pendingOffer && <div className="mt-auto w-100 text-black">
                     <div className="d-flex gap-2 mb-2 align-items-center">

src/views/hc-center/HcCenterView.scss

@@ -0,0 +1,44 @@
+.nitro-hc-center {
+    width: 430px;
+    resize: none;
+
+    .hc-logo {
+        width: 213px;
+        height: 37px;
+        background-image: url("../../assets/images/hc-center/hc_logo.gif");
+    }
+
+    .payday-special {
+        height: 128px;
+    }
+
+    .payday {
+        width: 222px;
+        height: 150px;
+        background-image: url("../../assets/images/hc-center/payday.png");
+        z-index: 3;
+        color: #6b3502;
+    }
+
+    .clock {
+        width: 24px;
+        height: 24px;
+        background-image: url("../../assets/images/hc-center/clock.png");
+    }
+
+    .streak-info {
+        min-height: 64px;
+        line-height: 16px;
+    }
+
+    .habbo-avatar {
+        z-index: 4;
+    }
+
+    .benefits {
+        background-image: url("../../assets/images/hc-center/benefits.png");
+        background-position: right top;
+        background-repeat: no-repeat;
+        height: 100%;
+    }
+}

src/views/hc-center/HcCenterView.tsx

@@ -0,0 +1,244 @@
+import { ClubGiftInfoEvent, FriendlyTime, GetClubGiftInfo, RequestBadgesComposer, ScrKickbackData, ScrSendKickbackInfoMessageEvent, UserInfoEvent, UserSubscriptionEvent } from '@nitrots/nitro-renderer';
+import { BadgesEvent, FigureUpdateEvent } from '@nitrots/nitro-renderer/src';
+import { ScrGetKickbackInfoMessageComposer } from '@nitrots/nitro-renderer/src/nitro/communication/messages/outgoing/user/ScrGetKickbackInfoMessageComposer';
+import { FC, useCallback, useEffect, useState } from 'react';
+import { OverlayTrigger, Popover } from 'react-bootstrap';
+import { CreateLinkEvent, GetConfiguration, LocalizeText } from '../../api';
+import { HcCenterEvent } from '../../events/hc-center/HcCenterEvent';
+import { CreateMessageHook, SendMessageHook, useUiEvent } from '../../hooks';
+import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../layout';
+import { AvatarImageView } from '../shared/avatar-image/AvatarImageView';
+import { BadgeImageView } from '../shared/badge-image/BadgeImageView';
+import { BadgeResolver } from './util/BadgeResolver';
+import { ClubStatus } from './util/ClubStatus';
+
+
+export const HcCenterView: FC<{}> = props =>
+{
+    const [isVisible, setIsVisible] = useState(false);
+    const [userFigure, setUserFigure] = useState<string>(null);
+    const [kickbackData, setKickbackData] = useState<ScrKickbackData>(null);
+    const [clubDays, setClubDays] = useState(0);
+    const [pastClubDays, setPastClubDays] = useState(0);
+    const [clubPeriods, setPastClubPeriods] = useState(0);
+    const [minsTillExpire, setMinsTillExpire] = useState(0);
+    const [clubStatus, setClubStatus] = useState(ClubStatus.NONE);
+    const [unclaimedGifts, setUnclaimedGifts] = useState(0);
+
+    const [badgeCode, setBadgeCode] = useState(BadgeResolver.default_badge);
+
+    const onUserInfoEvent = useCallback((event: UserInfoEvent) =>
+    {
+        const parser = event.getParser();
+        setUserFigure(parser.userInfo.figure);
+    }, []);
+
+    const onUserFigureEvent = useCallback((event: FigureUpdateEvent) =>
+    {
+        const parser = event.getParser();
+        setUserFigure(parser.figure);
+    }, []);
+
+    CreateMessageHook(UserInfoEvent, onUserInfoEvent);
+    CreateMessageHook(FigureUpdateEvent, onUserFigureEvent);
+
+    const onHcCenterEvent = useCallback((event: HcCenterEvent) =>
+    {
+        switch(event.type)
+        {
+            case HcCenterEvent.TOGGLE_HC_CENTER:
+                setIsVisible(!isVisible);
+                break;
+        }
+    }, [isVisible]);
+
+    useUiEvent(HcCenterEvent.TOGGLE_HC_CENTER, onHcCenterEvent);
+
+    const onClubGiftInfoEvent = useCallback((event: ClubGiftInfoEvent) =>
+    {
+        const parser = event.getParser();
+
+        setUnclaimedGifts(parser.giftsAvailable);
+    }, []);
+
+    const onScrSendKickbackInfo = useCallback((event: ScrSendKickbackInfoMessageEvent) =>
+    {
+        const parser = event.getParser();
+
+        setKickbackData(parser.data)
+    }, []);
+
+    const onBadges = useCallback((event: BadgesEvent) =>
+    {
+        const parser = event.getParser();
+
+        setBadgeCode(BadgeResolver.getClubBadge(parser.getAllBadgeCodes()));
+    }, [])
+
+    CreateMessageHook(ClubGiftInfoEvent, onClubGiftInfoEvent);
+    CreateMessageHook(ScrSendKickbackInfoMessageEvent, onScrSendKickbackInfo);
+    CreateMessageHook(BadgesEvent, onBadges);
+
+    useEffect(() =>
+    {
+        SendMessageHook(new GetClubGiftInfo());
+        SendMessageHook(new ScrGetKickbackInfoMessageComposer());
+        SendMessageHook(new RequestBadgesComposer());
+    }, []);
+
+    const onUserSubscriptionEvent = useCallback((event: UserSubscriptionEvent) =>
+    {
+        const parser = event.getParser();
+
+        const productName = parser.productName;
+
+        if((productName !== 'club_habbo') && (productName !== 'habbo_club')) return;
+
+        setClubDays(Math.max(0, parser.daysToPeriodEnd));
+        setPastClubPeriods(Math.max(0, parser.periodsSubscribedAhead));
+        setPastClubDays(Math.max(0, parser.pastClubDays));
+        setMinsTillExpire(Math.max(0, parser.minutesUntilExpiration));
+    }, []);
+
+    useEffect(() =>
+    {
+        if(clubDays > 0) return setClubStatus(ClubStatus.ACTIVE)
+        if(pastClubDays > 0) return setClubStatus(ClubStatus.EXPIRED);
+
+    }, [clubDays, pastClubDays]);
+
+    CreateMessageHook(UserSubscriptionEvent, onUserSubscriptionEvent);
+
+    const getClubText = useCallback(() =>
+    {
+        const totalDays = ((clubPeriods * 31) + clubDays);
+        const minutesUntilExpiration = minsTillExpire;
+
+        if(clubStatus !== ClubStatus.ACTIVE)
+        {
+            return LocalizeText('purse.clubdays.zero.amount.text');
+        }
+        else if((minutesUntilExpiration > -1) && (minutesUntilExpiration < (60 * 24)))
+        {
+            return FriendlyTime.shortFormat(minutesUntilExpiration * 60);
+        }
+        else
+        {
+            return FriendlyTime.shortFormat(totalDays * 86400);
+        }
+    }, [clubStatus, clubDays, clubPeriods, minsTillExpire]);
+
+    const getInfoText = useCallback(() =>
+    {
+        switch(clubStatus)
+        {
+            case ClubStatus.ACTIVE:
+                return LocalizeText('hccenter.status.' + clubStatus + '.info',
+                    ['timeleft', 'joindate', 'streakduration'],
+                    [getClubText(), kickbackData.firstSubscriptionDate, FriendlyTime.shortFormat(kickbackData.currentHcStreak * 86400)]);
+            case ClubStatus.EXPIRED:
+                return LocalizeText('hccenter.status.' + clubStatus + '.info', ['joindate'], [kickbackData.firstSubscriptionDate])
+            default:
+                return LocalizeText('hccenter.status.' + clubStatus + '.info');
+        }
+    }, [clubStatus, kickbackData, getClubText]);
+
+    const getHcPaydayTime = useCallback(() =>
+    {
+        if(kickbackData.timeUntilPayday < 60) return LocalizeText('hccenter.special.time.soon');
+        return FriendlyTime.shortFormat(kickbackData.timeUntilPayday * 60);
+    }, [kickbackData]);
+
+    const getHcPaydayAmount = useCallback(() =>
+    {
+        return LocalizeText('hccenter.special.sum', ['credits'], [(kickbackData.creditRewardForStreakBonus + kickbackData.creditRewardForMonthlySpent).toString()])
+    }, [kickbackData])
+
+    if(!isVisible) return null;
+
+    const popover = (
+        <Popover id="popover-basic">
+            <Popover.Body className="text-black py-2 px-3">
+                <h5>{LocalizeText('hccenter.breakdown.title')}</h5>
+                <div>{LocalizeText('hccenter.breakdown.creditsspent', ['credits'], [kickbackData.totalCreditsSpent.toString()])}</div>
+                <div>{LocalizeText('hccenter.breakdown.paydayfactor.percent', ['percent'], [(kickbackData.kickbackPercentage * 100).toString()])}</div>
+                <div>{LocalizeText('hccenter.breakdown.streakbonus', ['credits'], [kickbackData.creditRewardForStreakBonus.toString()])}</div>
+                <hr className="w-100 text-black my-1" />
+                <div>{LocalizeText('hccenter.breakdown.total', ['credits', 'actual'], [getHcPaydayAmount(),
+                ((((kickbackData.kickbackPercentage * kickbackData.totalCreditsSpent) + kickbackData.creditRewardForStreakBonus) * 100) / 100).toString()])}</div>
+                <div className="btn btn-link text-primary p-0" onClick={() => { CreateLinkEvent('habbopages/' + GetConfiguration('hc.center')['payday.habbopage']) }}>{
+                    LocalizeText('hccenter.special.infolink')}
+                </div>
+            </Popover.Body>
+        </Popover>
+    );
+
+    return (
+        <NitroCardView simple={true} className="nitro-hc-center">
+            <NitroCardHeaderView headerText={LocalizeText('generic.hccenter')} onCloseClick={() => setIsVisible(false)} />
+            <div className="bg-muted p-2 position-relative">
+                <div className="hc-logo mb-2" />
+                <button className="btn btn-success" onClick={ () => { CreateLinkEvent('catalog/open/' + GetConfiguration('hc.center')['catalog.buy']) } }>
+                    {LocalizeText(clubStatus === ClubStatus.ACTIVE ? 'hccenter.btn.extend' : 'hccenter.btn.buy')}
+                </button>
+                <div className="position-absolute end-0 p-4 top-0 habbo-avatar">
+                    <AvatarImageView figure={userFigure} direction={4} scale={2} />
+                </div>
+            </div>
+            <NitroCardContentView>
+                <div className="d-flex flex-row mb-1">
+                    <BadgeImageView badgeCode={badgeCode} className="align-self-center flex-shrink-0 me-1" />
+                    <div className="w-100 text-black streak-info">
+                        <h6 className="mb-0">{LocalizeText('hccenter.status.' + clubStatus)}</h6>
+                        <div dangerouslySetInnerHTML={{ __html: getInfoText() }} />
+                    </div>
+                </div>
+                {GetConfiguration('hc.center')['payday.info'] &&
+                    <div className="d-flex flex-row align-items-center mb-n2">
+                        <div className="rounded-start bg-primary p-2 payday-special mb-1 d-flex flex-column">
+                            <h4 className="mb-1">{LocalizeText('hccenter.special.title')}</h4>
+                            <div>{LocalizeText('hccenter.special.info')}</div>
+                            <div className="btn btn-link text-white p-0 mt-auto align-self-baseline" onClick={() => { CreateLinkEvent('habbopages/' + GetConfiguration('hc.center')['payday.habbopage']) }}>{LocalizeText('hccenter.special.infolink')}</div>
+                        </div>
+                        <div className="payday flex-shrink-0 p-2">
+                            <h5 className="mb-2 ms-2">{LocalizeText('hccenter.special.time.title')}</h5>
+                            <div className="d-flex flex-row mb-2">
+                                <div className="clock me-2" />
+                                <h6 className="mb-0 align-self-center">{getHcPaydayTime()}</h6>
+                            </div>
+                            {clubStatus === ClubStatus.ACTIVE &&
+                                <div className="pe-3">
+                                    <h5 className="ms-2 mb-1 bolder">{LocalizeText('hccenter.special.amount.title')}</h5>
+                                    <div className="d-flex flex-column">
+                                        <div className="w-100 text-center ms-4n">{getHcPaydayAmount()}</div>
+                                        <OverlayTrigger trigger="hover" placement="left" overlay={popover}>
+                                            <div className="btn btn-link align-self-end text-primary">
+                                                {LocalizeText('hccenter.breakdown.infolink')}
+                                            </div>
+                                        </OverlayTrigger>
+                                    </div>
+                                </div>
+                            }
+                        </div>
+                    </div>
+                }
+                {GetConfiguration('hc.center')['gift.info'] &&
+                    <div className="rounded bg-success p-2 d-flex flex-row mb-0">
+                        <div>
+                            <h4 className="mb-1">{LocalizeText('hccenter.gift.title')}</h4>
+                            <div dangerouslySetInnerHTML={{ __html: unclaimedGifts > 0 ? LocalizeText('hccenter.unclaimedgifts', ['unclaimedgifts'], [unclaimedGifts.toString()]) : LocalizeText('hccenter.gift.info') }}></div>
+                        </div>
+                        <button className="btn btn-primary btn-lg align-self-center ms-auto" onClick={() => { CreateLinkEvent('catalog/open/' + GetConfiguration('hc.center')['catalog.gifts']) }}>{LocalizeText(clubStatus === ClubStatus.ACTIVE ? 'hccenter.btn.gifts.redeem' : 'hccenter.btn.gifts.view')}</button>
+                    </div>
+                }
+                {GetConfiguration('hc.center')['benefits.info'] &&
+                    <div className="benefits text-black py-2">
+                        <h5 className="mb-1 text-primary">{LocalizeText('hccenter.general.title')}</h5>
+                        <div className="mb-2" dangerouslySetInnerHTML={{ __html: LocalizeText('hccenter.general.info') }} />
+                        <button className="btn btn-link p-0 text-primary" onClick={() => { CreateLinkEvent('habbopages/' + GetConfiguration('hc.center')['benefits.habbopage']) }}>{LocalizeText('hccenter.general.infolink')}</button>
+                    </div>
+                }
+            </NitroCardContentView>
+        </NitroCardView>
+    );
+}

src/views/hc-center/util/BadgeResolver.ts

@@ -0,0 +1,23 @@
+
+export class BadgeResolver 
+{
+    public static default_badge: string = 'HC1';
+    public static badges: string[] = ['ACH_VipHC1', 'ACH_VipHC2', 'ACH_VipHC3', 'ACH_VipHC4', 'ACH_VipHC5', 'HC1', 'HC2', 'HC3', 'HC4', 'HC5'];
+
+
+    public static getClubBadge(k: string[]): string
+    {
+        var badgeCode: string = null;
+
+        this.badges.forEach(badge =>
+        {
+            if (k.indexOf(badge) > -1)
+            {
+                badgeCode = badge;
+            }
+        });
+
+        return badgeCode || this.default_badge;
+    }
+
+}

src/views/hc-center/util/ClubStatus.ts

@@ -0,0 +1,6 @@
+export class ClubStatus 
+{
+    public static ACTIVE: string = 'active';
+    public static NONE: string = 'none';
+    public static EXPIRED: string = 'expired';
+}

src/views/main/MainView.tsx

@@ -11,6 +11,7 @@ import { ChatHistoryView } from '../chat-history/ChatHistoryView';
 import { FloorplanEditorView } from '../floorplan-editor/FloorplanEditorView';
 import { FriendsView } from '../friends/FriendsView';
 import { GroupsView } from '../groups/GroupsView';
+import { HcCenterView } from '../hc-center/HcCenterView';
 import { HelpView } from '../help/HelpView';
 import { HotelView } from '../hotel-view/HotelView';
 import { InventoryView } from '../inventory/InventoryView';
@@ -77,6 +78,7 @@ export const MainView: FC<MainViewProps> = props =>
             <HelpView />
             <FloorplanEditorView />
             <NitropediaView />
+            <HcCenterView />
         </div>
     );
 }

src/views/purse/PurseView.scss

@@ -1,21 +1,22 @@
 .nitro-purse {
-    background-color: rgba($dark,.95);
+    background-color: rgba($dark, 0.95);
     font-size: $font-size-sm;
     pointer-events: all;
     margin-bottom: 5px;
     padding: 6px 5px;
-    box-shadow: inset 0px 5px lighten(rgba($dark,.6),2.5), inset 0 -4px darken(rgba($dark,.6),4);
+    box-shadow: inset 0px 5px lighten(rgba($dark, 0.6), 2.5),
+        inset 0 -4px darken(rgba($dark, 0.6), 4);
 
     .notification-button {
-        color:lighten($dark,20);
+        color: lighten($dark, 20);
         cursor: pointer;
         font-size: 0.9rem;
         pointer-events: all;
-        display: none
+        display: none;
     }
 
     .nitro-purse-hc {
-        background-color: rgba($light,.1);
+        background-color: rgba($light, 0.1);
         margin: 0 5px;
     }
 
@@ -29,9 +30,10 @@
         }
 
         &:hover {
-            background-color: rgba($light,.1);
+            background-color: rgba($light, 0.1);
+            cursor: pointer;
         }
     }
 }
 
-@import './views';
+@import "./views";

src/views/purse/PurseView.tsx

@@ -1,6 +1,7 @@
 import { FriendlyTime, HabboClubLevelEnum, UserCurrencyComposer, UserSubscriptionComposer } from '@nitrots/nitro-renderer';
 import { FC, useCallback, useEffect, useMemo, useState } from 'react';
 import { GetConfiguration, LocalizeText } from '../../api';
+import { HcCenterEvent } from '../../events/hc-center/HcCenterEvent';
 import { HelpEvent } from '../../events/help/HelpEvent';
 import { UserSettingsUIEvent } from '../../events/user-settings/UserSettingsUIEvent';
 import { dispatchUiEvent } from '../../hooks';
@@ -30,6 +31,11 @@ export const PurseView: FC<{}> = props =>
         dispatchUiEvent(new HelpEvent(HelpEvent.TOGGLE_HELP_CENTER));
     }, []);
 
+    const handleHcCenterClick = useCallback(() =>
+    {
+        dispatchUiEvent(new HcCenterEvent(HcCenterEvent.TOGGLE_HC_CENTER));
+    }, []);
+
     const displayedCurrencies = useMemo(() =>
     {
         return GetConfiguration<number[]>('system.currency.types', []);
@@ -139,7 +145,8 @@ export const PurseView: FC<{}> = props =>
                         </div>
                     </div>
                     <div className="col-4 px-0">
-                        <div className="nitro-purse-hc rounded mx-1 p-1 d-flex flex-column justify-content-center align-items-center h-100">
+                        <div className="nitro-purse-hc nitro-purse-button rounded mx-1 p-1 d-flex flex-column justify-content-center align-items-center h-100"
+                        onClick={ handleHcCenterClick }>
                             <CurrencyIcon className="flex-shrink-0" type="hc" />
                             <span>{ getClubText() }</span>
                         </div>

src/views/purse/views/index.scss

@@ -1,2 +1,2 @@
-@import './currency/CurrencyView';
-@import './seasonal/SeasonalView';
+@import "./currency/CurrencyView";
+@import "./seasonal/SeasonalView";