added widget slots

src/views/hotel-view/HotelView.scss

@@ -80,49 +80,51 @@
 		overflow: hidden;
 	}
 
-	.slot-0 {
-		top: 5px;
-		width: 600px;
-		height: 100px;
-	}
-
 	.slot-1 {
-		top: 100px;
-		left: 100px;
-		width: 100px;
+		top: 5px;
+		left: 10px;
+		width: 100%;
 		height: 100px;
 	}
 
 	.slot-2 {
-		top: 300px;
+		top: 100px;
 		left: 100px;
-		width: 100px;
+		width: 200px;
 		height:100px;
 	}
 
 	.slot-3 {
-		top: 100px;
-		left: 600px;
-		width: 100px;
+		top: 300px;
+		left: 100px;
+		width: 200px;
 		height: 100px;
 	}
 
 	.slot-4 {
-		top: 300px;
+		top: 100px;
 		left: 600px;
-		width: 100px;
+		width: 200px;
 		height: 100px;
 	}
 
 	.slot-5 {
-		bottom: 5px;
-		width: 600px;
+		top: 300px;
+		left: 600px;
+		width: 200px;
 		height: 100px;
 	}
 
 	.slot-6 {
+		left: 10px;
+		bottom: 5px;
+		width: 100%;
+		height: 100px;
+	}
+
+	.slot-7 {
 		width: 100px;
-		height: 600px;
+		height: 100%;
 		right: 5px;
 	}
 }

src/views/hotel-view/HotelView.tsx

@@ -38,8 +38,13 @@ export const HotelView: FC<HotelViewProps> = props =>
 
     return (
         <div className="nitro-hotel-view" style={(backgroundColor && backgroundColor) ? { background: backgroundColor } : {}}>
-            {Array.from(Array(widgetSlotCount)).map((x, index) => <WidgetSlotView slot={index} 
-            widgetType={GetConfiguration('hotelview')['widgets']['slot.' + index]} />)}
+            {Array.from(Array(widgetSlotCount)).map((x, index) =>
+                <WidgetSlotView
+                    slot={index + 1}
+                    widgetType={GetConfiguration('hotelview')['widgets']['slot.' + (index + 1) + '.widget']}
+                    widgetConf={GetConfiguration('hotelview')['widgets']['slot.' + (index + 1) +'.conf']}
+                    key={index.toString()}
+                />)}
             <div className="background position-absolute" style={(background && background.length) ? { backgroundImage: `url(${background})` } : {}} />
             <div className="sun position-absolute" style={(sun && sun.length) ? { backgroundImage: `url(${sun})` } : {}} />
             <div className="drape position-absolute" style={(drape && drape.length) ? { backgroundImage: `url(${drape})` } : {}} />

src/views/hotel-view/views/widget-slot/WidgetSlotView.tsx

@@ -6,7 +6,7 @@ export const WidgetSlotView: FC<WidgetSlotViewProps> = props =>
 {
   return (
     <div className={"widget-slot slot-" + props.slot}>
-      <GetWidgetLayout widgetType={props.widgetType} />
+      <GetWidgetLayout widgetType={props.widgetType} slot={props.slot} widgetConf={props.widgetConf} />
     </div>
   );
 }

src/views/hotel-view/views/widget-slot/WidgetSlotView.types.ts

@@ -2,4 +2,5 @@ export interface WidgetSlotViewProps
 {
   widgetType: string;
   slot: number;
+  widgetConf: string;
 }

src/views/hotel-view/views/widgets/GetWidgetLayout.tsx

@@ -1,4 +1,5 @@
 import { FC } from 'react';
+import { BonusRareWidgetView } from './bonus-rare/BonusRareWidgetView';
 import { GetWidgetLayoutProps } from './GetWidgetLayout.types';
 import { HallOfFameWidgetView } from './hall-of-fame/HallOfFameWidgetView';
 import { PromoArticleWidgetView } from './promo-article/PromoArticleWidgetView';
@@ -7,10 +8,12 @@ export const GetWidgetLayout: FC<GetWidgetLayoutProps> = props =>
 {
   switch (props.widgetType)
   {
-    case "news":
+    case "promoarticle":
       return <PromoArticleWidgetView />;
-    case "hof":
-      return <HallOfFameWidgetView/>;
+    case "achievementcompetition_hall_of_fame":
+      return <HallOfFameWidgetView slot={props.slot} conf={props.widgetConf} />;
+    case "bonusrare":
+      return <BonusRareWidgetView />;
     default:
       return null;
   }

src/views/hotel-view/views/widgets/GetWidgetLayout.types.ts

@@ -1,4 +1,6 @@
 export interface GetWidgetLayoutProps
 {
   widgetType: string;
+  slot: number;
+  widgetConf: string;
 }

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

@@ -0,0 +1,32 @@
+import { BonusRareInfoMessageEvent, GetBonusRareInfoMessageComposer } from '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 [productClassId, setProductClassId] = useState<number>(null);
+  const [totalCoinsForBonus, setTotalCoinsForBonus] = useState<number>(null);
+  const [coinsStillRequiredToBuy, setCoinsStillRequiredToBuy] = useState<number>(null);
+
+  useEffect(() =>
+  {
+    SendMessageHook(new GetBonusRareInfoMessageComposer());
+  }, []);
+
+  const onBonusRareInfoMessageEvent = useCallback((event: BonusRareInfoMessageEvent) =>
+  {
+    const parser = event.getParser();
+    setProductType(parser.productType);
+    setProductClassId(parser.productClassId);
+    setTotalCoinsForBonus(parser.totalCoinsForBonus);
+    setCoinsStillRequiredToBuy(parser.coinsStillRequiredToBuy);
+  }, []);
+
+  CreateMessageHook(BonusRareInfoMessageEvent, onBonusRareInfoMessageEvent);
+
+  if(!productType) return (null);
+  
+  return (<div className="bonus-rare widget">{productType}</div>);
+}

src/views/hotel-view/views/widgets/bonus-rare/BonusRareWidgetView.types.ts

@@ -0,0 +1,2 @@
+export interface BonusRareWidgetViewProps
+{}

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

@@ -1,9 +1,30 @@
-import { FC } from 'react';
+import { CommunityGoalHallOfFameData, CommunityGoalHallOfFameMessageEvent, GetCommunityGoalHallOfFameMessageComposer } from 'nitro-renderer';
+import { FC, useCallback, useEffect, useState } from 'react';
+import { CreateMessageHook, SendMessageHook } from '../../../../../hooks/messages/message-event';
 import { HallOfFameWidgetViewProps } from './HallOfFameWidgetView.types';
 
 export const HallOfFameWidgetView: FC<HallOfFameWidgetViewProps> = 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;
+  
   return (
-    <div className="hall-of-fame widget"></div>
+    <div className="hall-of-fame widget">
+      <h1>showing hall of fame for event: {data ? data.goalCode : 'empty'}</h1>
+    </div>
   );
 }

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

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

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

@@ -1,4 +1,4 @@
 .promo-article {
-  top: 50px;
-  left: 50px;
+  width: 100%;
+  height: 100%;
 }

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

@@ -27,11 +27,13 @@ export const PromoArticleWidgetView: FC<PromoArticleWidgetViewProps> = props =>
 
   CreateMessageHook(PromoArticlesMessageEvent, onPromoArticlesMessageEvent);
 
+  if (!articles) return null;
+
   return (
     <div className="promo-article widget">
       <Carousel activeIndex={index} onSelect={handleSelect}>
         {articles && (articles.length > 0) && articles.map(article =>
-            <Carousel.Item>
+          <Carousel.Item key={article.id.toString()}>
             <img
               className="d-block"
               src={article.imageUrl}