Update hotel view widgets

src/views/hotel-view/views/widgets/bonus-rare/BonusRareWidgetView.scss

@@ -1,10 +1,10 @@
 .bonus-rare {
-  height: 100px;
+    height: 100px;
-  justify-content: center;
+    justify-content: center;
 
-  .bonus-bar-container {
+    .bonus-bar-container {
-    height: 30px;
+        height: 30px;
-    width: 300px;
+        width: 300px;
-    border: 2px ridge #e2e2e2;
+        border: 2px ridge #e2e2e2;
-  }
+    }
 }

src/views/hotel-view/views/widgets/bonus-rare/BonusRareWidgetView.tsx

@@ -1,40 +1,41 @@
-import { BonusRareInfoMessageEvent, GetBonusRareInfoMessageComposer } from 'nitro-renderer';
+import { BonusRareInfoMessageEvent, GetBonusRareInfoMessageComposer } from '@nitrots/nitro-renderer';
 import { FC, useCallback, useEffect, useState } from 'react';
 import { CreateMessageHook, SendMessageHook } from '../../../../../hooks/messages/message-event';
 import { BonusRareWidgetViewProps } from './BonusRareWidgetView.types';
 
 export const BonusRareWidgetView: FC<BonusRareWidgetViewProps> = props =>
 {
-  const [productType, setProductType] = useState<string>(null);
+    const [ productType, setProductType ] = useState<string>(null);
-  const [productClassId, setProductClassId] = useState<number>(null);
+    const [ productClassId, setProductClassId ] = useState<number>(null);
-  const [totalCoinsForBonus, setTotalCoinsForBonus] = useState<number>(null);
+    const [ totalCoinsForBonus, setTotalCoinsForBonus ] = useState<number>(null);
-  const [coinsStillRequiredToBuy, setCoinsStillRequiredToBuy] = useState<number>(null);
+    const [ coinsStillRequiredToBuy, setCoinsStillRequiredToBuy ] = useState<number>(null);
 
-  useEffect(() =>
+    const onBonusRareInfoMessageEvent = useCallback((event: BonusRareInfoMessageEvent) =>
-  {
+    {
-    SendMessageHook(new GetBonusRareInfoMessageComposer());
+        const parser = event.getParser();
-  }, []);
 
-  const onBonusRareInfoMessageEvent = useCallback((event: BonusRareInfoMessageEvent) =>
+        setProductType(parser.productType);
-  {
+        setProductClassId(parser.productClassId);
-    const parser = event.getParser();
+        setTotalCoinsForBonus(parser.totalCoinsForBonus);
-    setProductType(parser.productType);
+        setCoinsStillRequiredToBuy(parser.coinsStillRequiredToBuy);
-    setProductClassId(parser.productClassId);
+    }, []);
-    setTotalCoinsForBonus(parser.totalCoinsForBonus);
-    setCoinsStillRequiredToBuy(parser.coinsStillRequiredToBuy);
-  }, []);
 
-  CreateMessageHook(BonusRareInfoMessageEvent, onBonusRareInfoMessageEvent);
+    CreateMessageHook(BonusRareInfoMessageEvent, onBonusRareInfoMessageEvent);
 
-  if (!productType) return (null);
+    useEffect(() =>
+    {
+        SendMessageHook(new GetBonusRareInfoMessageComposer());
+    }, []);
 
-  return (
+    if(!productType) return null;
-    <div className="bonus-rare widget d-flex">
+
-      {productType}
+    return (
-      <div className="bg-light-dark rounded overflow-hidden position-relative bonus-bar-container">
+        <div className="bonus-rare widget d-flex">
-        <div className="d-flex justify-content-center align-items-center w-100 h-100 position-absolute small top-0">{(totalCoinsForBonus - coinsStillRequiredToBuy) + '/' + totalCoinsForBonus}</div>
+            { productType }
-        <div className="small bg-info rounded position-absolute top-0 h-100" style={{ width: ((totalCoinsForBonus - coinsStillRequiredToBuy) / totalCoinsForBonus) * 100 + '%' }}></div>
+            <div className="bg-light-dark rounded overflow-hidden position-relative bonus-bar-container">
-      </div>
+                <div className="d-flex justify-content-center align-items-center w-100 h-100 position-absolute small top-0">{(totalCoinsForBonus - coinsStillRequiredToBuy) + '/' + totalCoinsForBonus}</div>
-    </div>
+                <div className="small bg-info rounded position-absolute top-0 h-100" style={{ width: ((totalCoinsForBonus - coinsStillRequiredToBuy) / totalCoinsForBonus) * 100 + '%' }}></div>
-  );
+            </div>
+        </div>
+    );
 }

src/views/hotel-view/views/widgets/hall-of-fame-item/HallOfFameItemView.tsx

@@ -0,0 +1,21 @@
+import { FC } from 'react';
+import { LocalizeText } from '../../../../../utils';
+import { AvatarImageView } from '../../../../shared/avatar-image/AvatarImageView';
+import { HallOfFameItemViewProps } from './HallOfFameItemView.types';
+
+export const HallOfFameItemView: FC<HallOfFameItemViewProps> = props =>
+{
+    const { data = null, level = 0 } = props;
+
+    return (
+        <div className="hof-user-container cursor-pointer">
+            <div className="hof-tooltip">
+                <div className="hof-tooltip-content">
+                    <div className="fw-bold">{ level }. { data.userName }</div>
+                    <div className="muted fst-italic small text-center">{ LocalizeText('landing.view.competition.hof.points', [ 'points' ], [ data.currentScore.toString() ])}</div>
+                </div>
+            </div>
+            <AvatarImageView figure={ data.figure } direction={ 2 } />
+        </div>
+    );
+}

src/views/hotel-view/views/widgets/hall-of-fame-item/HallOfFameItemView.types.ts

@@ -0,0 +1,7 @@
+import { HallOfFameEntryData } from '@nitrots/nitro-renderer';
+
+export interface HallOfFameItemViewProps
+{
+    data: HallOfFameEntryData;
+    level: number;
+}

src/views/hotel-view/views/widgets/hall-of-fame/HallOfFameWidgetView.tsx

@@ -1,41 +1,36 @@
-import { CommunityGoalHallOfFameData, CommunityGoalHallOfFameMessageEvent, GetCommunityGoalHallOfFameMessageComposer } from 'nitro-renderer';
+import { CommunityGoalHallOfFameData, CommunityGoalHallOfFameMessageEvent, GetCommunityGoalHallOfFameMessageComposer } from '@nitrots/nitro-renderer';
 import { FC, useCallback, useEffect, useState } from 'react';
 import { CreateMessageHook, SendMessageHook } from '../../../../../hooks/messages/message-event';
-import { LocalizeText } from '../../../../../utils/LocalizeText';
+import { HallOfFameItemView } from '../hall-of-fame-item/HallOfFameItemView';
-import { AvatarImageView } from '../../../../shared/avatar-image/AvatarImageView';
 import { HallOfFameWidgetViewProps } from './HallOfFameWidgetView.types';
 
 export const HallOfFameWidgetView: FC<HallOfFameWidgetViewProps> = props =>
 {
-    const [data, setData] = useState<CommunityGoalHallOfFameData>(null);
+    const { slot = -1, conf = '' } = props;
-
+    const [ data, setData ] = useState<CommunityGoalHallOfFameData>(null);
-    useEffect(() =>
-    {
-        SendMessageHook(new GetCommunityGoalHallOfFameMessageComposer(props.conf));
-    }, [props.conf]);
 
     const onCommunityGoalHallOfFameMessageEvent = useCallback((event: CommunityGoalHallOfFameMessageEvent) =>
     {
         const parser = event.getParser();
+
         setData(parser.data);
     }, []);
 
     CreateMessageHook(CommunityGoalHallOfFameMessageEvent, onCommunityGoalHallOfFameMessageEvent);
 
-    if (!data) return null;
+    useEffect(() =>
+    {
+        SendMessageHook(new GetCommunityGoalHallOfFameMessageComposer(conf));
+    }, [ conf ]);
+
+    if(!data) return null;
 
     return (
         <div className="hall-of-fame widget">
-        {data.hof && (data.hof.length > 0) && data.hof.map((entry, ind) =>
+            { data.hof && (data.hof.length > 0) && data.hof.map((entry, index) =>
-            <div className="hof-user-container cursor-pointer">
+                {
-                <div className="hof-tooltip">
+                    return <HallOfFameItemView data={ entry } level={ (index + 1) } />;
-                    <div className="hof-tooltip-content">
+                }
-                        <div className="fw-bold">{ind + 1}. { entry.userName }</div>
-                        <div className="muted fst-italic small text-center">{LocalizeText('landing.view.competition.hof.points', ['points'], [entry.currentScore.toString()])}</div>
-                    </div>
-                </div>
-                <AvatarImageView figure={entry.figure} direction={2} key={ind} />
-            </div>
         )}
         </div>
     );

src/views/hotel-view/views/widgets/hall-of-fame/HallOfFameWidgetView.types.ts

@@ -1,5 +1,5 @@
 export interface HallOfFameWidgetViewProps
 {
-  slot: number;
+    slot: number;
-  conf: string;
+    conf: string;
 }

src/views/hotel-view/views/widgets/promo-article/PromoArticleWidgetView.tsx

@@ -1,4 +1,4 @@
-import { GetPromoArticlesComposer, PromoArticleData, PromoArticlesMessageEvent } from 'nitro-renderer';
+import { GetPromoArticlesComposer, PromoArticleData, PromoArticlesMessageEvent } from '@nitrots/nitro-renderer';
 import { FC, useCallback, useEffect, useState } from 'react';
 import { CreateMessageHook, SendMessageHook } from '../../../../../hooks';
 import { LocalizeText } from '../../../../../utils/LocalizeText';
@@ -14,11 +14,6 @@ export const PromoArticleWidgetView: FC<PromoArticleWidgetViewProps> = props =>
     	setIndex(selectedIndex);
   	};
 
-  	useEffect(() =>
-  	{
-    	SendMessageHook(new GetPromoArticlesComposer());
-  	}, []);
-
   	const onPromoArticlesMessageEvent = useCallback((event: PromoArticlesMessageEvent) =>
   	{
     	const parser = event.getParser();
@@ -27,6 +22,11 @@ export const PromoArticleWidgetView: FC<PromoArticleWidgetViewProps> = props =>
 
   	CreateMessageHook(PromoArticlesMessageEvent, onPromoArticlesMessageEvent);
 
+	  useEffect(() =>
+  	{
+    	SendMessageHook(new GetPromoArticlesComposer());
+  	}, []);
+
   	if (!articles) return null;
 
   	return (

src/views/hotel-view/views/widgets/widget-container/WidgetContainerView.tsx

@@ -1,5 +1,5 @@
 import { FC, useCallback, useMemo } from 'react';
-import { GetConfigurationManager } from '../../../../../api/core/';
+import { GetConfigurationManager } from '../../../../../api/core';
 import { LocalizeText } from '../../../../../utils/LocalizeText';
 import { WidgetContainerViewProps } from './WidgetContainerView.types';