feat: show HC items more visible

by @oobjecct
5e6c8e60c3
fdc1b621f1
5c700793bd

apps/frontend/src/assets/styles/icons.scss

@@ -649,6 +649,12 @@
     height: 38px;
   }
 
+  &.icon-hc_mini {
+    background-image: url("@/assets/images/catalog/hc_mini.png");
+    width: 18px;
+    height: 18px;
+  }
+
   &.spin {
     animation: rotating 1s linear infinite;
   }

apps/frontend/src/components/avatar-editor/views/AvatarEditorWardrobeView.tsx

@@ -1,7 +1,16 @@
-import {IAvatarFigureContainer, SaveWardrobeOutfitMessageComposer} from "@nitro/renderer";
+import {HabboClubLevelEnum, IAvatarFigureContainer, SaveWardrobeOutfitMessageComposer} from "@nitro/renderer";
 import {Dispatch, FC, SetStateAction, useCallback, useMemo} from "react";
 
-import {FigureData, GetAvatarRenderManager, GetClubMemberLevel, GetConfiguration, LocalizeText, SendMessageComposer} from "../../../api";
+import {
+  CreateLinkEvent,
+  FigureData,
+  GetAvatarRenderManager,
+  GetClubMemberLevel,
+  GetConfiguration,
+  GetSessionDataManager,
+  LocalizeText,
+  SendMessageComposer,
+} from "../../../api";
 import {AutoGrid, Base, Button, Flex, LayoutAvatarImageView, LayoutCurrencyIcon, LayoutGridItem} from "../../../common";
 
 export interface AvatarEditorWardrobeViewProps {
@@ -31,6 +40,8 @@ export const AvatarEditorWardrobeView: FC<AvatarEditorWardrobeViewProps> = props
     (index: number) => {
       if (!figureData || index >= savedFigures.length || index < 0) return;
 
+      if (GetSessionDataManager().clubLevel === HabboClubLevelEnum.NO_CLUB) return CreateLinkEvent("habboUI/open/hccenter");
+
       const newFigures = [...savedFigures];
 
       const figure = figureData.getFigureString();

apps/frontend/src/components/avatar-editor/views/figure-set/AvatarEditorFigureSetView.tsx

@@ -1,6 +1,7 @@
+import {HabboClubLevelEnum} from "@nitro/renderer";
 import {Dispatch, FC, SetStateAction, useCallback, useEffect, useRef} from "react";
 
-import {AvatarEditorGridPartItem, CategoryData, IAvatarEditorCategoryModel} from "../../../../api";
+import {AvatarEditorGridPartItem, CategoryData, CreateLinkEvent, GetSessionDataManager, IAvatarEditorCategoryModel} from "../../../../api";
 import {AutoGrid} from "../../../../common";
 import {AvatarEditorFigureSetItemView} from "./AvatarEditorFigureSetItemView";
 
@@ -26,6 +27,8 @@ export const AvatarEditorFigureSetView: FC<AvatarEditorFigureSetViewProps> = pro
 
       if (index === -1) return;
 
+      if (item.isHC && GetSessionDataManager().clubLevel === HabboClubLevelEnum.NO_CLUB) return CreateLinkEvent("habboUI/open/hccenter");
+
       model.selectPart(category.name, index);
 
       const partItem = category.getCurrentPart();

apps/frontend/src/components/avatar-editor/views/palette-set/AvatarEditorPaletteSetView.tsx

@@ -1,6 +1,7 @@
+import {HabboClubLevelEnum} from "@nitro/renderer";
 import {FC, useCallback, useEffect, useRef} from "react";
 
-import {AvatarEditorGridColorItem, CategoryData, IAvatarEditorCategoryModel} from "../../../../api";
+import {AvatarEditorGridColorItem, CategoryData, CreateLinkEvent, GetSessionDataManager, IAvatarEditorCategoryModel} from "../../../../api";
 import {AutoGrid} from "../../../../common";
 import {AvatarEditorPaletteSetItem} from "./AvatarEditorPaletteSetItemView";
 
@@ -21,6 +22,8 @@ export const AvatarEditorPaletteSetView: FC<AvatarEditorPaletteSetViewProps> = p
 
       if (index === -1) return;
 
+      if (item.isHC && GetSessionDataManager().clubLevel === HabboClubLevelEnum.NO_CLUB) return CreateLinkEvent("habboUI/open/hccenter");
+
       model.selectColor(category.name, index, paletteIndex);
     },
     [model, category, paletteSet, paletteIndex]

apps/frontend/src/components/catalog/views/page/common/CatalogGridOfferView.tsx

@@ -1,8 +1,8 @@
-import {MouseEventType} from "@nitro/renderer";
+import {HabboClubLevelEnum, MouseEventType} from "@nitro/renderer";
 import {FC, MouseEvent, useMemo, useState} from "react";
 
 import {IPurchasableOffer, Offer, ProductTypeEnum} from "../../../../../api";
-import {LayoutAvatarImageView, LayoutGridItem, LayoutGridItemProps} from "../../../../../common";
+import {Base, LayoutAvatarImageView, LayoutGridItem, LayoutGridItemProps} from "../../../../../common";
 import {useCatalog, useInventoryFurni} from "../../../../../hooks";
 
 interface CatalogGridOfferViewProps extends LayoutGridItemProps {
@@ -55,8 +55,8 @@ export const CatalogGridOfferView: FC<CatalogGridOfferViewProps> = props => {
       onMouseDown={onMouseEvent}
       onMouseUp={onMouseEvent}
       onMouseOut={onMouseEvent}
-      {...rest}
-    >
+      {...rest}>
+      {offer.clubLevel !== HabboClubLevelEnum.NO_CLUB && <Base className="icon icon-hc_mini position-absolute top-0 end-1" />}
       {offer.product.productType === ProductTypeEnum.ROBOT && <LayoutAvatarImageView figure={offer.product.extraParam} headOnly={true} direction={3} />}
     </LayoutGridItem>
   );

apps/frontend/src/components/catalog/views/page/widgets/CatalogPurchaseWidgetView.tsx

@@ -130,13 +130,6 @@ export const CatalogPurchaseWidgetView: FC<CatalogPurchaseWidgetViewProps> = pro
     const priceCredits = currentOffer.priceInCredits * purchaseOptions.quantity;
     const pricePoints = currentOffer.priceInActivityPoints * purchaseOptions.quantity;
 
-    if (GetClubMemberLevel() < currentOffer.clubLevel)
-      return (
-        <Button variant="danger" disabled>
-          {LocalizeText("catalog.alert.hc.required")}
-        </Button>
-      );
-
     if (isLimitedSoldOut)
       return (
         <Button variant="danger" disabled>
@@ -197,6 +190,7 @@ export const CatalogPurchaseWidgetView: FC<CatalogPurchaseWidgetViewProps> = pro
             purchaseOptions.quantity > 1 ||
             !currentOffer.giftable ||
             isLimitedSoldOut ||
+            GetClubMemberLevel() < currentOffer.clubLevel ||
             (purchaseOptions.extraParamRequired && (!purchaseOptions.extraData || !purchaseOptions.extraData.length))
           }
           onClick={event => purchase(true)}