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;
+		top: 5px;
-		left: 100px;
+		left: 10px;
-		width: 100px;
+		width: 100%;
-		height:100px;
+		height: 100px;
 	}
 
 	.slot-2 {
-		top: 300px;
+		top: 100px;
 		left: 100px;
-		width: 100px;
+		width: 200px;
-		height: 100px;
+		height:100px;
 	}
 
 	.slot-3 {
-		top: 100px;
+		top: 300px;
-		left: 600px;
+		left: 100px;
-		width: 100px;
+		width: 200px;
 		height: 100px;
 	}
 
 	.slot-4 {
-		top: 300px;
+		top: 100px;
 		left: 600px;
-		width: 100px;
+		width: 200px;
 		height: 100px;
 	}
 
 	.slot-5 {
-		bottom: 5px;
+		top: 300px;
-		width: 600px;
+		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

@@ -7,12 +7,12 @@ import { WidgetSlotView } from './views/widget-slot/WidgetSlotView';
 
 export const HotelView: FC<HotelViewProps> = props =>
 {
-    const [ isVisible, setIsVisible ] = useState(true);
+    const [isVisible, setIsVisible] = useState(true);
     const widgetSlotCount = 7;
 
     const onRoomSessionEvent = useCallback((event: RoomSessionEvent) =>
     {
-        switch(event.type)
+        switch (event.type)
         {
             case RoomSessionEvent.CREATED:
                 setIsVisible(false);
@@ -26,26 +26,31 @@ export const HotelView: FC<HotelViewProps> = props =>
     useRoomSessionManagerEvent(RoomSessionEvent.CREATED, onRoomSessionEvent);
     useRoomSessionManagerEvent(RoomSessionEvent.ENDED, onRoomSessionEvent);
 
-    if(!isVisible) return null;
+    if (!isVisible) return null;
 
     const backgroundColor = GetConfiguration('hotelview')['images']['background.colour'];
-    const background      = Nitro.instance.core.configuration.interpolate(GetConfiguration('hotelview')['images']['background']);
+    const background = Nitro.instance.core.configuration.interpolate(GetConfiguration('hotelview')['images']['background']);
-    const sun             = Nitro.instance.core.configuration.interpolate(GetConfiguration('hotelview')['images']['sun']);
+    const sun = Nitro.instance.core.configuration.interpolate(GetConfiguration('hotelview')['images']['sun']);
-    const drape           = Nitro.instance.core.configuration.interpolate(GetConfiguration('hotelview')['images']['drape']);
+    const drape = Nitro.instance.core.configuration.interpolate(GetConfiguration('hotelview')['images']['drape']);
-    const left            = Nitro.instance.core.configuration.interpolate(GetConfiguration('hotelview')['images']['left']);
+    const left = Nitro.instance.core.configuration.interpolate(GetConfiguration('hotelview')['images']['left']);
-    const rightRepeat     = Nitro.instance.core.configuration.interpolate(GetConfiguration('hotelview')['images']['right.repeat']);
+    const rightRepeat = Nitro.instance.core.configuration.interpolate(GetConfiguration('hotelview')['images']['right.repeat']);
-    const right           = Nitro.instance.core.configuration.interpolate(GetConfiguration('hotelview')['images']['right']);
+    const right = Nitro.instance.core.configuration.interpolate(GetConfiguration('hotelview')['images']['right']);
 
     return (
-        <div className="nitro-hotel-view" style={ (backgroundColor && backgroundColor) ? { background: backgroundColor } : {} }>
+        <div className="nitro-hotel-view" style={(backgroundColor && backgroundColor) ? { background: backgroundColor } : {}}>
-            {Array.from(Array(widgetSlotCount)).map((x, index) => <WidgetSlotView slot={index} 
+            {Array.from(Array(widgetSlotCount)).map((x, index) =>
-            widgetType={GetConfiguration('hotelview')['widgets']['slot.' + index]} />)}
+                <WidgetSlotView
-            <div className="background position-absolute" style={ (background && background.length) ? { backgroundImage: `url(${ background })` } : {} } />
+                    slot={index + 1}
-            <div className="sun position-absolute" style={ (sun && sun.length) ? { backgroundImage: `url(${ sun })` } : {} } />
+                    widgetType={GetConfiguration('hotelview')['widgets']['slot.' + (index + 1) + '.widget']}
-            <div className="drape position-absolute" style={ (drape && drape.length) ? { backgroundImage: `url(${ drape })` } : {} } />
+                    widgetConf={GetConfiguration('hotelview')['widgets']['slot.' + (index + 1) +'.conf']}
-            <div className="left position-absolute" style={ (left && left.length) ? { backgroundImage: `url(${ left })` } : {} } />
+                    key={index.toString()}
-            <div className="right-repeat position-absolute" style={ (rightRepeat && rightRepeat.length) ? { backgroundImage: `url(${ rightRepeat })` } : {} } />
+                />)}
-            <div className="right position-absolute" style={ (right && right.length) ? { backgroundImage: `url(${ right })` } : {} } />
+            <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})` } : {}} />
+            <div className="left position-absolute" style={(left && left.length) ? { backgroundImage: `url(${left})` } : {}} />
+            <div className="right-repeat position-absolute" style={(rightRepeat && rightRepeat.length) ? { backgroundImage: `url(${rightRepeat})` } : {}} />
+            <div className="right position-absolute" style={(right && right.length) ? { backgroundImage: `url(${right})` } : {}} />
         </div>
     );
 }

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,16 +1,19 @@
 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';
 
 export const GetWidgetLayout: FC<GetWidgetLayoutProps> = props =>
 {
-  switch(props.widgetType)
+  switch (props.widgetType)
   {
-    case "news":
+    case "promoarticle":
-      return <PromoArticleWidgetView/>;
+      return <PromoArticleWidgetView />;
-    case "hof":
+    case "achievementcompetition_hall_of_fame":
-      return <HallOfFameWidgetView/>;
+      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;
+  width: 100%;
-  left: 50px;
+  height: 100%;
 }

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

@@ -6,14 +6,14 @@ import { PromoArticleWidgetViewProps } from './PromoArticleWidgetView.types';
 
 export const PromoArticleWidgetView: FC<PromoArticleWidgetViewProps> = props =>
 {
-  const [ articles, setArticles ] = useState<PromoArticleData[]>(null);
+  const [articles, setArticles] = useState<PromoArticleData[]>(null);
   const [index, setIndex] = useState(0);
 
   const handleSelect = (selectedIndex, e) => 
   {
     setIndex(selectedIndex);
   };
-  
+
   useEffect(() =>
   {
     SendMessageHook(new GetPromoArticlesComposer());
@@ -27,22 +27,24 @@ 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 => 
+        {articles && (articles.length > 0) && articles.map(article =>
-            <Carousel.Item>
+          <Carousel.Item key={article.id.toString()}>
-        <img
+            <img
-          className="d-block"
+              className="d-block"
-          src= {article.imageUrl}
+              src={article.imageUrl}
-          alt= {article.title}
+              alt={article.title}
-        />
+            />
-        <Carousel.Caption>
+            <Carousel.Caption>
-          <h3>{article.title}</h3>
+              <h3>{article.title}</h3>
-          <p>{article.bodyText}</p>
+              <p>{article.bodyText}</p>
-        </Carousel.Caption>
+            </Carousel.Caption>
-      </Carousel.Item>
+          </Carousel.Item>
-        ) }
+        )}
       </Carousel>
     </div>
   );