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/layout/CatalogLayoutSoundMachineView.tsx

@@ -1,10 +1,4 @@
-import {
-  GetOfficialSongIdMessageComposer,
-  ISongInfo,
-  MusicPriorities,
-  OfficialSongIdMessageEvent,
-  TraxSongInfoMessageEvent,
-} from "@nitro/renderer";
+import {GetOfficialSongIdMessageComposer, ISongInfo, MusicPriorities, OfficialSongIdMessageEvent, TraxSongInfoMessageEvent} from "@nitro/renderer";
 import {FC, useEffect, useState} from "react";
 
 import {GetConfiguration, GetNitroInstance, LocalizeText, ProductTypeEnum, SendMessageComposer} from "../../../../../api";
@@ -25,14 +19,24 @@ export const CatalogLayoutSoundMachineView: FC<CatalogLayoutProps> = props => {
 
   const {page = null} = props;
   const [songId, setSongId] = useState(-1);
+  const [duration, setDuration] = useState("");
+  const [isPlaying, setIsPlaying] = useState(false);
   const [officialSongId, setOfficialSongId] = useState("");
   const [songName, setSongName] = useState("");
   const {currentOffer = null, currentPage = null} = useCatalog();
 
-  const previewSong = (previewSongId: number) =>
-    GetNitroInstance().soundManager.musicController?.playSong(previewSongId, MusicPriorities.PRIORITY_PURCHASE_PREVIEW, 15, 0, 0, 0);
+  const previewSong = (previewSongId: number) => (
+    GetNitroInstance().soundManager.musicController?.playSong(previewSongId, MusicPriorities.PRIORITY_PURCHASE_PREVIEW, 15, 0, 0, 0), setIsPlaying(true)
+  );
+  const stopPreviewSong = () => (GetNitroInstance().soundManager.musicController?.stop(MusicPriorities.PRIORITY_PURCHASE_PREVIEW), setIsPlaying(false));
 
   const displaySongName = (songData: ISongInfo): void => {
+    const duration = songData.length;
+    const seconds = Math.floor((duration / 1000) % 60);
+    const minutes = Math.floor((duration / 1000 / 60) % 60);
+
+    setDuration([minutes.toString(), seconds.toString().padStart(2, "0")].join(":"));
+
     setSongName(`${songData.creator} - ${songData.name}`);
   };
 
@@ -86,12 +90,12 @@ export const CatalogLayoutSoundMachineView: FC<CatalogLayoutProps> = props => {
       setSongId(-1);
     }
 
-    return () => GetNitroInstance().soundManager.musicController?.stop(MusicPriorities.PRIORITY_PURCHASE_PREVIEW);
+    return () => (GetNitroInstance().soundManager.musicController?.stop(MusicPriorities.PRIORITY_PURCHASE_PREVIEW), setIsPlaying(false));
   }, [currentOffer]);
 
   useEffect(() => {
     return () => {
-      GetNitroInstance().soundManager.musicController?.stop(MusicPriorities.PRIORITY_PURCHASE_PREVIEW);
+      GetNitroInstance().soundManager.musicController?.stop(MusicPriorities.PRIORITY_PURCHASE_PREVIEW), setIsPlaying(false);
       clearTraxSongInfoEvent();
     };
   }, []);
@@ -107,7 +111,7 @@ export const CatalogLayoutSoundMachineView: FC<CatalogLayoutProps> = props => {
           {!currentOffer && (
             <>
               {!!page.localization.getImage(1) && <LayoutImage imageUrl={page.localization.getImage(1)} />}
-              <Text center dangerouslySetInnerHTML={{__html: songName ?? page.localization.getText(0)}} />
+              <Text center dangerouslySetInnerHTML={{__html: page.localization.getText(0)}} />
             </>
           )}
           {currentOffer && (
@@ -126,7 +130,14 @@ export const CatalogLayoutSoundMachineView: FC<CatalogLayoutProps> = props => {
                 <Text grow truncate>
                   {songName ?? currentOffer.localizationName}
                 </Text>
-                {songId > -1 && <Button onClick={() => previewSong(songId)}>{LocalizeText("play_preview_button")}</Button>}
+                <Text>
+                  {LocalizeText("catalog.song.length", ["min", "sec"], [duration.split(":")[0], duration.split(":")[1]])}
+                </Text>
+                {songId > -1 && (
+                  <Button onClick={() => (!isPlaying ? previewSong(songId) : stopPreviewSong())}>
+                    {LocalizeText(!isPlaying ? "play_preview_button" : "playlist.editor.button.preview.stop")}
+                  </Button>
+                )}
                 <Flex justifyContent="between">
                   <Column gap={1}>
                     <CatalogSpinnerWidgetView />

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)}