From 374c90cef0a3b04b82015b813a2b3f54b981309f Mon Sep 17 00:00:00 2001 From: Dank074 Date: Thu, 22 Jul 2021 04:03:00 -0500 Subject: [PATCH 1/9] started hotelview widgets --- src/views/hotel-view/HotelView.scss | 54 +++++++++++++++++++ src/views/hotel-view/HotelView.tsx | 4 ++ .../views/widget-slot/WidgetSlotView.tsx | 12 +++++ .../views/widget-slot/WidgetSlotView.types.ts | 5 ++ .../views/widgets/GetWidgetLayout.tsx | 17 ++++++ .../views/widgets/GetWidgetLayout.types.ts | 4 ++ .../hall-of-fame/HallOfFameWidgetView.tsx | 9 ++++ .../HallOfFameWidgetView.types.ts | 2 + .../promo-article/PromoArticleWidgetView.scss | 4 ++ .../promo-article/PromoArticleWidgetView.tsx | 49 +++++++++++++++++ .../PromoArticleWidgetView.types.ts | 2 + 11 files changed, 162 insertions(+) create mode 100644 src/views/hotel-view/views/widget-slot/WidgetSlotView.tsx create mode 100644 src/views/hotel-view/views/widget-slot/WidgetSlotView.types.ts create mode 100644 src/views/hotel-view/views/widgets/GetWidgetLayout.tsx create mode 100644 src/views/hotel-view/views/widgets/GetWidgetLayout.types.ts create mode 100644 src/views/hotel-view/views/widgets/hall-of-fame/HallOfFameWidgetView.tsx create mode 100644 src/views/hotel-view/views/widgets/hall-of-fame/HallOfFameWidgetView.types.ts create mode 100644 src/views/hotel-view/views/widgets/promo-article/PromoArticleWidgetView.scss create mode 100644 src/views/hotel-view/views/widgets/promo-article/PromoArticleWidgetView.tsx create mode 100644 src/views/hotel-view/views/widgets/promo-article/PromoArticleWidgetView.types.ts diff --git a/src/views/hotel-view/HotelView.scss b/src/views/hotel-view/HotelView.scss index 97076eaf..4d3ae78f 100644 --- a/src/views/hotel-view/HotelView.scss +++ b/src/views/hotel-view/HotelView.scss @@ -73,4 +73,58 @@ background-repeat: no-repeat; background-position: right top; } + + .widget-slot { + position:absolute; + z-index: 4; + overflow: hidden; + } + + .slot-0 { + top: 5px; + width: 600px; + height: 100px; + } + + .slot-1 { + top: 100px; + left: 100px; + width: 100px; + height:100px; + } + + .slot-2 { + top: 300px; + left: 100px; + width: 100px; + height: 100px; + } + + .slot-3 { + top: 100px; + left: 600px; + width: 100px; + height: 100px; + } + + .slot-4 { + top: 300px; + left: 600px; + width: 100px; + height: 100px; + } + + .slot-5 { + bottom: 5px; + width: 600px; + height: 100px; + } + + .slot-6 { + width: 100px; + height: 600px; + right: 5px; + } } + +@import './views/widgets/promo-article/PromoArticleWidgetView.scss'; diff --git a/src/views/hotel-view/HotelView.tsx b/src/views/hotel-view/HotelView.tsx index 9222f3b8..74da6863 100644 --- a/src/views/hotel-view/HotelView.tsx +++ b/src/views/hotel-view/HotelView.tsx @@ -3,10 +3,12 @@ import { FC, useCallback, useState } from 'react'; import { GetConfiguration } from '../../api'; import { useRoomSessionManagerEvent } from '../../hooks/events/nitro/session/room-session-manager-event'; import { HotelViewProps } from './HotelView.types'; +import { WidgetSlotView } from './views/widget-slot/WidgetSlotView'; export const HotelView: FC = props => { const [ isVisible, setIsVisible ] = useState(true); + const widgetSlotCount = 7; const onRoomSessionEvent = useCallback((event: RoomSessionEvent) => { @@ -36,6 +38,8 @@ export const HotelView: FC = props => return (
+ {Array.from(Array(widgetSlotCount)).map((x, index) => )}
diff --git a/src/views/hotel-view/views/widget-slot/WidgetSlotView.tsx b/src/views/hotel-view/views/widget-slot/WidgetSlotView.tsx new file mode 100644 index 00000000..639cb0e3 --- /dev/null +++ b/src/views/hotel-view/views/widget-slot/WidgetSlotView.tsx @@ -0,0 +1,12 @@ +import { FC } from 'react'; +import { GetWidgetLayout } from '../widgets/GetWidgetLayout'; +import { WidgetSlotViewProps } from './WidgetSlotView.types'; + +export const WidgetSlotView: FC = props => +{ + return ( +
+ +
+ ); +} diff --git a/src/views/hotel-view/views/widget-slot/WidgetSlotView.types.ts b/src/views/hotel-view/views/widget-slot/WidgetSlotView.types.ts new file mode 100644 index 00000000..cbbefc31 --- /dev/null +++ b/src/views/hotel-view/views/widget-slot/WidgetSlotView.types.ts @@ -0,0 +1,5 @@ +export interface WidgetSlotViewProps +{ + widgetType: string; + slot: number; +} diff --git a/src/views/hotel-view/views/widgets/GetWidgetLayout.tsx b/src/views/hotel-view/views/widgets/GetWidgetLayout.tsx new file mode 100644 index 00000000..bd8d4b60 --- /dev/null +++ b/src/views/hotel-view/views/widgets/GetWidgetLayout.tsx @@ -0,0 +1,17 @@ +import { FC } from 'react'; +import { GetWidgetLayoutProps } from './GetWidgetLayout.types'; +import { HallOfFameWidgetView } from './hall-of-fame/HallOfFameWidgetView'; +import { PromoArticleWidgetView } from './promo-article/PromoArticleWidgetView'; + +export const GetWidgetLayout: FC = props => +{ + switch(props.widgetType) + { + case "news": + return ; + case "hof": + return ; + default: + return null; + } +} diff --git a/src/views/hotel-view/views/widgets/GetWidgetLayout.types.ts b/src/views/hotel-view/views/widgets/GetWidgetLayout.types.ts new file mode 100644 index 00000000..42ca0053 --- /dev/null +++ b/src/views/hotel-view/views/widgets/GetWidgetLayout.types.ts @@ -0,0 +1,4 @@ +export interface GetWidgetLayoutProps +{ + widgetType: string; +} diff --git a/src/views/hotel-view/views/widgets/hall-of-fame/HallOfFameWidgetView.tsx b/src/views/hotel-view/views/widgets/hall-of-fame/HallOfFameWidgetView.tsx new file mode 100644 index 00000000..d60ade22 --- /dev/null +++ b/src/views/hotel-view/views/widgets/hall-of-fame/HallOfFameWidgetView.tsx @@ -0,0 +1,9 @@ +import { FC } from 'react'; +import { HallOfFameWidgetViewProps } from './HallOfFameWidgetView.types'; + +export const HallOfFameWidgetView: FC = props => +{ + return ( +
+ ); +} diff --git a/src/views/hotel-view/views/widgets/hall-of-fame/HallOfFameWidgetView.types.ts b/src/views/hotel-view/views/widgets/hall-of-fame/HallOfFameWidgetView.types.ts new file mode 100644 index 00000000..c03c84a8 --- /dev/null +++ b/src/views/hotel-view/views/widgets/hall-of-fame/HallOfFameWidgetView.types.ts @@ -0,0 +1,2 @@ +export interface HallOfFameWidgetViewProps +{} diff --git a/src/views/hotel-view/views/widgets/promo-article/PromoArticleWidgetView.scss b/src/views/hotel-view/views/widgets/promo-article/PromoArticleWidgetView.scss new file mode 100644 index 00000000..b0521c2a --- /dev/null +++ b/src/views/hotel-view/views/widgets/promo-article/PromoArticleWidgetView.scss @@ -0,0 +1,4 @@ +.promo-article { + top: 50px; + left: 50px; +} diff --git a/src/views/hotel-view/views/widgets/promo-article/PromoArticleWidgetView.tsx b/src/views/hotel-view/views/widgets/promo-article/PromoArticleWidgetView.tsx new file mode 100644 index 00000000..e32ebbe3 --- /dev/null +++ b/src/views/hotel-view/views/widgets/promo-article/PromoArticleWidgetView.tsx @@ -0,0 +1,49 @@ +import { GetPromoArticlesComposer, PromoArticleData, PromoArticlesMessageEvent } from 'nitro-renderer'; +import { FC, useCallback, useEffect, useState } from 'react'; +import { Carousel } from 'react-bootstrap'; +import { CreateMessageHook, SendMessageHook } from '../../../../../hooks'; +import { PromoArticleWidgetViewProps } from './PromoArticleWidgetView.types'; + +export const PromoArticleWidgetView: FC = props => +{ + const [ articles, setArticles ] = useState(null); + const [index, setIndex] = useState(0); + + const handleSelect = (selectedIndex, e) => + { + setIndex(selectedIndex); + }; + + useEffect(() => + { + SendMessageHook(new GetPromoArticlesComposer()); + }, []); + + const onPromoArticlesMessageEvent = useCallback((event: PromoArticlesMessageEvent) => + { + const parser = event.getParser(); + setArticles(parser.articles); + }, []); + + CreateMessageHook(PromoArticlesMessageEvent, onPromoArticlesMessageEvent); + + return ( +
+ + { articles && (articles.length > 0) && articles.map(article => + + {article.title} + +

{article.title}

+

{article.bodyText}

+ + + ) } + +
+ ); +} diff --git a/src/views/hotel-view/views/widgets/promo-article/PromoArticleWidgetView.types.ts b/src/views/hotel-view/views/widgets/promo-article/PromoArticleWidgetView.types.ts new file mode 100644 index 00000000..e8a37dfa --- /dev/null +++ b/src/views/hotel-view/views/widgets/promo-article/PromoArticleWidgetView.types.ts @@ -0,0 +1,2 @@ +export interface PromoArticleWidgetViewProps +{} From 789aa3c183e253f63da31b557deda491b980a20f Mon Sep 17 00:00:00 2001 From: Dank074 Date: Fri, 23 Jul 2021 18:22:07 -0500 Subject: [PATCH 2/9] added widget slots --- src/views/hotel-view/HotelView.scss | 44 ++++++++++--------- src/views/hotel-view/HotelView.tsx | 41 +++++++++-------- .../views/widget-slot/WidgetSlotView.tsx | 2 +- .../views/widget-slot/WidgetSlotView.types.ts | 1 + .../views/widgets/GetWidgetLayout.tsx | 13 +++--- .../views/widgets/GetWidgetLayout.types.ts | 2 + .../bonus-rare/BonusRareWidgetView.tsx | 32 ++++++++++++++ .../bonus-rare/BonusRareWidgetView.types.ts | 2 + .../hall-of-fame/HallOfFameWidgetView.tsx | 25 ++++++++++- .../HallOfFameWidgetView.types.ts | 5 ++- .../promo-article/PromoArticleWidgetView.scss | 4 +- .../promo-article/PromoArticleWidgetView.tsx | 32 +++++++------- 12 files changed, 138 insertions(+), 65 deletions(-) create mode 100644 src/views/hotel-view/views/widgets/bonus-rare/BonusRareWidgetView.tsx create mode 100644 src/views/hotel-view/views/widgets/bonus-rare/BonusRareWidgetView.types.ts diff --git a/src/views/hotel-view/HotelView.scss b/src/views/hotel-view/HotelView.scss index 4d3ae78f..607bcec1 100644 --- a/src/views/hotel-view/HotelView.scss +++ b/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; - height:100px; + top: 5px; + left: 10px; + width: 100%; + height: 100px; } .slot-2 { - top: 300px; + top: 100px; left: 100px; - width: 100px; - height: 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; } } diff --git a/src/views/hotel-view/HotelView.tsx b/src/views/hotel-view/HotelView.tsx index 74da6863..dc8b2683 100644 --- a/src/views/hotel-view/HotelView.tsx +++ b/src/views/hotel-view/HotelView.tsx @@ -7,12 +7,12 @@ import { WidgetSlotView } from './views/widget-slot/WidgetSlotView'; export const HotelView: FC = 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 = 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 sun = Nitro.instance.core.configuration.interpolate(GetConfiguration('hotelview')['images']['sun']); - const drape = Nitro.instance.core.configuration.interpolate(GetConfiguration('hotelview')['images']['drape']); - const left = Nitro.instance.core.configuration.interpolate(GetConfiguration('hotelview')['images']['left']); - const rightRepeat = Nitro.instance.core.configuration.interpolate(GetConfiguration('hotelview')['images']['right.repeat']); - const right = Nitro.instance.core.configuration.interpolate(GetConfiguration('hotelview')['images']['right']); + const background = Nitro.instance.core.configuration.interpolate(GetConfiguration('hotelview')['images']['background']); + const sun = Nitro.instance.core.configuration.interpolate(GetConfiguration('hotelview')['images']['sun']); + const drape = Nitro.instance.core.configuration.interpolate(GetConfiguration('hotelview')['images']['drape']); + const left = Nitro.instance.core.configuration.interpolate(GetConfiguration('hotelview')['images']['left']); + const rightRepeat = Nitro.instance.core.configuration.interpolate(GetConfiguration('hotelview')['images']['right.repeat']); + const right = Nitro.instance.core.configuration.interpolate(GetConfiguration('hotelview')['images']['right']); return ( -
- {Array.from(Array(widgetSlotCount)).map((x, index) => )} -
-
-
-
-
-
+
+ {Array.from(Array(widgetSlotCount)).map((x, index) => + )} +
+
+
+
+
+
); } diff --git a/src/views/hotel-view/views/widget-slot/WidgetSlotView.tsx b/src/views/hotel-view/views/widget-slot/WidgetSlotView.tsx index 639cb0e3..d03e1a05 100644 --- a/src/views/hotel-view/views/widget-slot/WidgetSlotView.tsx +++ b/src/views/hotel-view/views/widget-slot/WidgetSlotView.tsx @@ -6,7 +6,7 @@ export const WidgetSlotView: FC = props => { return (
- +
); } diff --git a/src/views/hotel-view/views/widget-slot/WidgetSlotView.types.ts b/src/views/hotel-view/views/widget-slot/WidgetSlotView.types.ts index cbbefc31..ab1d6c8d 100644 --- a/src/views/hotel-view/views/widget-slot/WidgetSlotView.types.ts +++ b/src/views/hotel-view/views/widget-slot/WidgetSlotView.types.ts @@ -2,4 +2,5 @@ export interface WidgetSlotViewProps { widgetType: string; slot: number; + widgetConf: string; } diff --git a/src/views/hotel-view/views/widgets/GetWidgetLayout.tsx b/src/views/hotel-view/views/widgets/GetWidgetLayout.tsx index bd8d4b60..84351f3e 100644 --- a/src/views/hotel-view/views/widgets/GetWidgetLayout.tsx +++ b/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 = props => { - switch(props.widgetType) + switch (props.widgetType) { - case "news": - return ; - case "hof": - return ; + case "promoarticle": + return ; + case "achievementcompetition_hall_of_fame": + return ; + case "bonusrare": + return ; default: return null; } diff --git a/src/views/hotel-view/views/widgets/GetWidgetLayout.types.ts b/src/views/hotel-view/views/widgets/GetWidgetLayout.types.ts index 42ca0053..b06d5e7a 100644 --- a/src/views/hotel-view/views/widgets/GetWidgetLayout.types.ts +++ b/src/views/hotel-view/views/widgets/GetWidgetLayout.types.ts @@ -1,4 +1,6 @@ export interface GetWidgetLayoutProps { widgetType: string; + slot: number; + widgetConf: string; } diff --git a/src/views/hotel-view/views/widgets/bonus-rare/BonusRareWidgetView.tsx b/src/views/hotel-view/views/widgets/bonus-rare/BonusRareWidgetView.tsx new file mode 100644 index 00000000..6f135bd2 --- /dev/null +++ b/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 = props => +{ + const [productType, setProductType] = useState(null); + const [productClassId, setProductClassId] = useState(null); + const [totalCoinsForBonus, setTotalCoinsForBonus] = useState(null); + const [coinsStillRequiredToBuy, setCoinsStillRequiredToBuy] = useState(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 (
{productType}
); +} diff --git a/src/views/hotel-view/views/widgets/bonus-rare/BonusRareWidgetView.types.ts b/src/views/hotel-view/views/widgets/bonus-rare/BonusRareWidgetView.types.ts new file mode 100644 index 00000000..9157b7b2 --- /dev/null +++ b/src/views/hotel-view/views/widgets/bonus-rare/BonusRareWidgetView.types.ts @@ -0,0 +1,2 @@ +export interface BonusRareWidgetViewProps +{} diff --git a/src/views/hotel-view/views/widgets/hall-of-fame/HallOfFameWidgetView.tsx b/src/views/hotel-view/views/widgets/hall-of-fame/HallOfFameWidgetView.tsx index d60ade22..82300041 100644 --- a/src/views/hotel-view/views/widgets/hall-of-fame/HallOfFameWidgetView.tsx +++ b/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 = props => { + const [data, setData] = useState(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 ( -
+
+

showing hall of fame for event: {data ? data.goalCode : 'empty'}

+
); } diff --git a/src/views/hotel-view/views/widgets/hall-of-fame/HallOfFameWidgetView.types.ts b/src/views/hotel-view/views/widgets/hall-of-fame/HallOfFameWidgetView.types.ts index c03c84a8..955af179 100644 --- a/src/views/hotel-view/views/widgets/hall-of-fame/HallOfFameWidgetView.types.ts +++ b/src/views/hotel-view/views/widgets/hall-of-fame/HallOfFameWidgetView.types.ts @@ -1,2 +1,5 @@ export interface HallOfFameWidgetViewProps -{} +{ + slot: number; + conf: string; +} diff --git a/src/views/hotel-view/views/widgets/promo-article/PromoArticleWidgetView.scss b/src/views/hotel-view/views/widgets/promo-article/PromoArticleWidgetView.scss index b0521c2a..77dc0cb3 100644 --- a/src/views/hotel-view/views/widgets/promo-article/PromoArticleWidgetView.scss +++ b/src/views/hotel-view/views/widgets/promo-article/PromoArticleWidgetView.scss @@ -1,4 +1,4 @@ .promo-article { - top: 50px; - left: 50px; + width: 100%; + height: 100%; } diff --git a/src/views/hotel-view/views/widgets/promo-article/PromoArticleWidgetView.tsx b/src/views/hotel-view/views/widgets/promo-article/PromoArticleWidgetView.tsx index e32ebbe3..a17257ee 100644 --- a/src/views/hotel-view/views/widgets/promo-article/PromoArticleWidgetView.tsx +++ b/src/views/hotel-view/views/widgets/promo-article/PromoArticleWidgetView.tsx @@ -6,14 +6,14 @@ import { PromoArticleWidgetViewProps } from './PromoArticleWidgetView.types'; export const PromoArticleWidgetView: FC = props => { - const [ articles, setArticles ] = useState(null); + const [articles, setArticles] = useState(null); const [index, setIndex] = useState(0); const handleSelect = (selectedIndex, e) => { setIndex(selectedIndex); }; - + useEffect(() => { SendMessageHook(new GetPromoArticlesComposer()); @@ -27,22 +27,24 @@ export const PromoArticleWidgetView: FC = props => CreateMessageHook(PromoArticlesMessageEvent, onPromoArticlesMessageEvent); + if (!articles) return null; + return (
- { articles && (articles.length > 0) && articles.map(article => - - {article.title} - -

{article.title}

-

{article.bodyText}

- - - ) } + {articles && (articles.length > 0) && articles.map(article => + + {article.title} + +

{article.title}

+

{article.bodyText}

+ + + )}
); From 9594843e2e022a34952d78785b55db76e336c642 Mon Sep 17 00:00:00 2001 From: Dank074 Date: Sat, 24 Jul 2021 19:52:54 -0500 Subject: [PATCH 3/9] started bonus rare widget --- src/views/hotel-view/HotelView.scss | 1 + .../widgets/bonus-rare/BonusRareWidgetView.scss | 10 ++++++++++ .../widgets/bonus-rare/BonusRareWidgetView.tsx | 14 +++++++++++--- 3 files changed, 22 insertions(+), 3 deletions(-) create mode 100644 src/views/hotel-view/views/widgets/bonus-rare/BonusRareWidgetView.scss diff --git a/src/views/hotel-view/HotelView.scss b/src/views/hotel-view/HotelView.scss index 607bcec1..c8b31c7a 100644 --- a/src/views/hotel-view/HotelView.scss +++ b/src/views/hotel-view/HotelView.scss @@ -130,3 +130,4 @@ } @import './views/widgets/promo-article/PromoArticleWidgetView.scss'; +@import './views/widgets/bonus-rare/BonusRareWidgetView.scss'; diff --git a/src/views/hotel-view/views/widgets/bonus-rare/BonusRareWidgetView.scss b/src/views/hotel-view/views/widgets/bonus-rare/BonusRareWidgetView.scss new file mode 100644 index 00000000..c26da737 --- /dev/null +++ b/src/views/hotel-view/views/widgets/bonus-rare/BonusRareWidgetView.scss @@ -0,0 +1,10 @@ +.bonus-rare { + height: 100px; + justify-content: center; + + .bonus-bar-container { + height: 30px; + width: 300px; + border: 2px ridge #e2e2e2; + } +} diff --git a/src/views/hotel-view/views/widgets/bonus-rare/BonusRareWidgetView.tsx b/src/views/hotel-view/views/widgets/bonus-rare/BonusRareWidgetView.tsx index 6f135bd2..9cf62a10 100644 --- a/src/views/hotel-view/views/widgets/bonus-rare/BonusRareWidgetView.tsx +++ b/src/views/hotel-view/views/widgets/bonus-rare/BonusRareWidgetView.tsx @@ -26,7 +26,15 @@ export const BonusRareWidgetView: FC = props => CreateMessageHook(BonusRareInfoMessageEvent, onBonusRareInfoMessageEvent); - if(!productType) return (null); - - return (
{productType}
); + if (!productType) return (null); + + return ( +
+ {productType} +
+
{(totalCoinsForBonus - coinsStillRequiredToBuy) + '/' + totalCoinsForBonus}
+
+
+
+ ); } From ba63351b8aaec328b3f38c7f11efd48bf9ed4f59 Mon Sep 17 00:00:00 2001 From: Layne Date: Sun, 25 Jul 2021 01:50:29 -0400 Subject: [PATCH 4/9] miss change --- public/configuration.json | 556 ++++++++++++++++-- src/views/hotel-view/HotelView.scss | 62 +- src/views/hotel-view/HotelView.tsx | 57 +- .../views/widget-slot/WidgetSlotView.tsx | 12 +- .../views/widget-slot/WidgetSlotView.types.ts | 10 +- .../promo-article/PromoArticleWidgetView.scss | 29 +- .../promo-article/PromoArticleWidgetView.tsx | 77 +-- 7 files changed, 636 insertions(+), 167 deletions(-) diff --git a/public/configuration.json b/public/configuration.json index c46111bc..8d638a23 100644 --- a/public/configuration.json +++ b/public/configuration.json @@ -89,8 +89,20 @@ ], "hotelview": { "widgets": { - "types": "news,", - "slot1": "news" + "slot.1.widget": "promoarticle", + "slot.1.conf": "", + "slot.2.widget": "", + "slot.2.conf": "", + "slot.3.widget": "", + "slot.3.conf": "", + "slot.4.widget": "", + "slot.4.conf": "", + "slot.5.widget": "", + "slot.5.conf": "", + "slot.6.widget": "achievementcompetition_hall_of_fame", + "slot.6.conf": "", + "slot.7.widget": "", + "slot.7.conf": "" }, "images": { "background": "${asset.url}/images/reception/stretch_blue.png", @@ -460,262 +472,682 @@ ], "camera.available.effects": [ { - "name":"dark_sepia", - "colorMatrix": [0.4, 0.4, 0.1, 0, 110, 0.3, 0.4, 0.1, 0, 30, 0.3, 0.2, 0.1, 0, 0, 0, 0, 0, 1, 0], + "name": "dark_sepia", + "colorMatrix": [ + 0.4, + 0.4, + 0.1, + 0, + 110, + 0.3, + 0.4, + 0.1, + 0, + 30, + 0.3, + 0.2, + 0.1, + 0, + 0, + 0, + 0, + 0, + 1, + 0 + ], "minLevel": 0, "enabled": true }, { - "name":"increase_saturation", - "colorMatrix": [2, -0.5, -0.5, 0, 0, -0.5, 2, -0.5, 0, 0, -0.5, -0.5, 2, 0, 0, 0, 0, 0, 1, 0], + "name": "increase_saturation", + "colorMatrix": [ + 2, + -0.5, + -0.5, + 0, + 0, + -0.5, + 2, + -0.5, + 0, + 0, + -0.5, + -0.5, + 2, + 0, + 0, + 0, + 0, + 0, + 1, + 0 + ], "minLevel": 0, "enabled": true }, { - "name":"increase_contrast", - "colorMatrix": [1.5, 0, 0, 0, -50, 0, 1.5, 0, 0, -50, 0, 0, 1.5, 0, -50, 0, 0, 0, 1.5, 0], + "name": "increase_contrast", + "colorMatrix": [ + 1.5, + 0, + 0, + 0, + -50, + 0, + 1.5, + 0, + 0, + -50, + 0, + 0, + 1.5, + 0, + -50, + 0, + 0, + 0, + 1.5, + 0 + ], "minLevel": 0, "enabled": true }, { - "name":"shadow_multiply_02", + "name": "shadow_multiply_02", "colorMatrix": [], "minLevel": 0, "blendMode": 2, "enabled": true }, { - "name":"color_1", - "colorMatrix": [0.393, 0.769, 0.189, 0, 0, 0.349, 0.686, 0.168, 0, 0, 0.272, 0.534, 0.131, 0, 0, 0, 0, 0, 1, 0], + "name": "color_1", + "colorMatrix": [ + 0.393, + 0.769, + 0.189, + 0, + 0, + 0.349, + 0.686, + 0.168, + 0, + 0, + 0.272, + 0.534, + 0.131, + 0, + 0, + 0, + 0, + 0, + 1, + 0 + ], "minLevel": 1, "enabled": true }, { - "name":"hue_bright_sat", - "colorMatrix": [1, 0.6, 0.2, 0, -50, 0.2, 1, 0.6, 0, -50, 0.6, 0.2, 1, 0, -50, 0, 0, 0, 1, 0], + "name": "hue_bright_sat", + "colorMatrix": [ + 1, + 0.6, + 0.2, + 0, + -50, + 0.2, + 1, + 0.6, + 0, + -50, + 0.6, + 0.2, + 1, + 0, + -50, + 0, + 0, + 0, + 1, + 0 + ], "minLevel": 1, "enabled": true }, { - "name":"hearts_hardlight_02", + "name": "hearts_hardlight_02", "colorMatrix": [], "minLevel": 1, "blendMode": 9, "enabled": true }, { - "name":"texture_overlay", + "name": "texture_overlay", "colorMatrix": [], "minLevel": 1, "blendMode": 4, "enabled": true }, { - "name":"pinky_nrm", + "name": "pinky_nrm", "colorMatrix": [], "minLevel": 1, "blendMode": 0, "enabled": true }, { - "name":"color_2", - "colorMatrix": [0.333, 0.333, 0.333, 0, 0, 0.333, 0.333, 0.333, 0, 0, 0.333, 0.333, 0.333, 0, 0, 0, 0, 0, 1, 0], + "name": "color_2", + "colorMatrix": [ + 0.333, + 0.333, + 0.333, + 0, + 0, + 0.333, + 0.333, + 0.333, + 0, + 0, + 0.333, + 0.333, + 0.333, + 0, + 0, + 0, + 0, + 0, + 1, + 0 + ], "minLevel": 2, "enabled": true }, { - "name":"night_vision", - "colorMatrix": [0, 0, 0, 0, 0, 0, 1.1, 0, 0, -50, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0], + "name": "night_vision", + "colorMatrix": [ + 0, + 0, + 0, + 0, + 0, + 0, + 1.1, + 0, + 0, + -50, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 1, + 0 + ], "minLevel": 2, "enabled": true }, { - "name":"stars_hardlight_02", + "name": "stars_hardlight_02", "colorMatrix": [], "minLevel": 2, "blendMode": 9, "enabled": true }, { - "name":"coffee_mpl", + "name": "coffee_mpl", "colorMatrix": [], "minLevel": 2, "blendMode": 2, "enabled": true }, { - "name":"security_hardlight", + "name": "security_hardlight", "colorMatrix": [], "minLevel": 3, "blendMode": 9, "enabled": true }, { - "name":"bluemood_mpl", + "name": "bluemood_mpl", "colorMatrix": [], "minLevel": 3, "blendMode": 2, "enabled": true }, { - "name":"rusty_mpl", + "name": "rusty_mpl", "colorMatrix": [], "minLevel": 3, "blendMode": 2, "enabled": true }, { - "name":"decr_conrast", - "colorMatrix": [0.5, 0, 0, 0, 50, 0, 0.5, 0, 0, 50, 0, 0, 0.5, 0, 50, 0, 0, 0, 1, 0], + "name": "decr_conrast", + "colorMatrix": [ + 0.5, + 0, + 0, + 0, + 50, + 0, + 0.5, + 0, + 0, + 50, + 0, + 0, + 0.5, + 0, + 50, + 0, + 0, + 0, + 1, + 0 + ], "minLevel": 4, "enabled": true }, { - "name":"green_2", - "colorMatrix": [0.5, 0.5, 0.5, 0, 0, 0.5, 0.5, 0.5, 0, 90, 0.5, 0.5, 0.5, 0, 0, 0, 0, 0, 1, 0], + "name": "green_2", + "colorMatrix": [ + 0.5, + 0.5, + 0.5, + 0, + 0, + 0.5, + 0.5, + 0.5, + 0, + 90, + 0.5, + 0.5, + 0.5, + 0, + 0, + 0, + 0, + 0, + 1, + 0 + ], "minLevel": 4, "enabled": true }, { - "name":"alien_hrd", + "name": "alien_hrd", "colorMatrix": [], "minLevel": 4, "blendMode": 9, "enabled": true }, { - "name":"color_3", - "colorMatrix": [0.609, 0.609, 0.082, 0, 0, 0.309, 0.609, 0.082, 0, 0, 0.309, 0.609, 0.082, 0, 0, 0, 0, 0, 1, 0], + "name": "color_3", + "colorMatrix": [ + 0.609, + 0.609, + 0.082, + 0, + 0, + 0.309, + 0.609, + 0.082, + 0, + 0, + 0.309, + 0.609, + 0.082, + 0, + 0, + 0, + 0, + 0, + 1, + 0 + ], "minLevel": 5, "enabled": true }, { - "name":"color_4", - "colorMatrix": [0.8, -0.8, 1, 0, 70, 0.8, -0.8, 1, 0, 70, 0.8, -0.8, 1, 0, 70, 0, 0, 0, 1, 0], + "name": "color_4", + "colorMatrix": [ + 0.8, + -0.8, + 1, + 0, + 70, + 0.8, + -0.8, + 1, + 0, + 70, + 0.8, + -0.8, + 1, + 0, + 70, + 0, + 0, + 0, + 1, + 0 + ], "minLevel": 5, "enabled": true }, { - "name":"toxic_hrd", + "name": "toxic_hrd", "colorMatrix": [], "minLevel": 5, "blendMode": 9, "enabled": true }, { - "name":"hypersaturated", - "colorMatrix": [2, -1, 0, 0, 0, -1, 2, 0, 0, 0, 0, -1, 2, 0, 0, 0, 0, 0, 1, 0], + "name": "hypersaturated", + "colorMatrix": [ + 2, + -1, + 0, + 0, + 0, + -1, + 2, + 0, + 0, + 0, + 0, + -1, + 2, + 0, + 0, + 0, + 0, + 0, + 1, + 0 + ], "minLevel": 6, "enabled": true }, { - "name":"Yellow", - "colorMatrix": [1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0], + "name": "Yellow", + "colorMatrix": [ + 1, + 0, + 0, + 0, + 0, + 0, + 1, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 0, + 1, + 0 + ], "minLevel": 6, "enabled": true }, { - "name":"misty_hrd", + "name": "misty_hrd", "colorMatrix": [], "minLevel": 6, "blendMode": 9, "enabled": true }, { - "name":"x_ray", - "colorMatrix": [0, 1.2, 0, 0, -100, 0, 2, 0, 0, -120, 0, 2, 0, 0, -120, 0, 0, 0, 1, 0], + "name": "x_ray", + "colorMatrix": [ + 0, + 1.2, + 0, + 0, + -100, + 0, + 2, + 0, + 0, + -120, + 0, + 2, + 0, + 0, + -120, + 0, + 0, + 0, + 1, + 0 + ], "minLevel": 7, "enabled": true }, { - "name":"decrease_saturation", - "colorMatrix": [0.7, 0.2, 0.2, 0, 0, 0.2, 0.7, 0.2, 0, 0, 0.2, 0.2, 0.7, 0, 0, 0, 0, 0, 1, 0], + "name": "decrease_saturation", + "colorMatrix": [ + 0.7, + 0.2, + 0.2, + 0, + 0, + 0.2, + 0.7, + 0.2, + 0, + 0, + 0.2, + 0.2, + 0.7, + 0, + 0, + 0, + 0, + 0, + 1, + 0 + ], "minLevel": 7, "enabled": true }, { - "name":"drops_mpl", + "name": "drops_mpl", "colorMatrix": [], "minLevel": 8, "blendMode": 2, "enabled": true }, { - "name":"shiny_hrd", + "name": "shiny_hrd", "colorMatrix": [], "minLevel": 9, "blendMode": 9, "enabled": true }, { - "name":"glitter_hrd", + "name": "glitter_hrd", "colorMatrix": [], "minLevel": 10, "blendMode": 9, "enabled": true }, { - "name":"frame_gold", + "name": "frame_gold", "colorMatrix": [], "minLevel": 10, "blendMode": 0, "enabled": true }, { - "name":"frame_gray_4", + "name": "frame_gray_4", "colorMatrix": [], "minLevel": 10, "blendMode": 0, "enabled": true }, { - "name":"frame_black_2", + "name": "frame_black_2", "colorMatrix": [], "minLevel": 10, "blendMode": 0, "enabled": true }, { - "name":"frame_wood_2", + "name": "frame_wood_2", "colorMatrix": [], "minLevel": 10, "blendMode": 0, "enabled": true }, { - "name":"finger_nrm", + "name": "finger_nrm", "colorMatrix": [], "minLevel": 10, "blendMode": 0, "enabled": true }, { - "name":"color_5", - "colorMatrix": [3.309, 0.609, 1.082, 0.2, 0, 0.309, 0.609, 0.082, 0, 0, 1.309, 0.609, 0.082, 0, 0, 0, 0, 0, 1, 0], + "name": "color_5", + "colorMatrix": [ + 3.309, + 0.609, + 1.082, + 0.2, + 0, + 0.309, + 0.609, + 0.082, + 0, + 0, + 1.309, + 0.609, + 0.082, + 0, + 0, + 0, + 0, + 0, + 1, + 0 + ], "minLevel": 10, "enabled": true }, { - "name":"black_white_negative", - "colorMatrix": [-0.5, -0.5, -0.5, 0, 0, -0.5, -0.5, -0.5, 0, 0, -0.5, -0.5, -0.5, 0, 0, 0, 0, 0, 1, 0], + "name": "black_white_negative", + "colorMatrix": [ + -0.5, + -0.5, + -0.5, + 0, + 0, + -0.5, + -0.5, + -0.5, + 0, + 0, + -0.5, + -0.5, + -0.5, + 0, + 0, + 0, + 0, + 0, + 1, + 0 + ], "minLevel": 10, "enabled": true }, { - "name":"blue", - "colorMatrix": [0.5, 0.5, 0.5, 0, -255, 0.5, 0.5, 0.5, 0, -170, 0.5, 0.5, 0.5, 0, 0, 0, 0, 0, 1, 0], + "name": "blue", + "colorMatrix": [ + 0.5, + 0.5, + 0.5, + 0, + -255, + 0.5, + 0.5, + 0.5, + 0, + -170, + 0.5, + 0.5, + 0.5, + 0, + 0, + 0, + 0, + 0, + 1, + 0 + ], "minLevel": 10, "enabled": true }, { - "name":"red", - "colorMatrix": [0.5, 0.5, 0.5, 0, 0, 0.5, 0.5, 0.5, 0, -170, 0.5, 0.5, 0.5, 0, -170, 0, 0, 0, 1, 0], + "name": "red", + "colorMatrix": [ + 0.5, + 0.5, + 0.5, + 0, + 0, + 0.5, + 0.5, + 0.5, + 0, + -170, + 0.5, + 0.5, + 0.5, + 0, + -170, + 0, + 0, + 0, + 1, + 0 + ], "minLevel": 10, "enabled": true }, { - "name":"green", - "colorMatrix": [0.5, 0.5, 0.5, 0, -170, 0.5, 0.5, 0.5, 0, 0, 0.5, 0.5, 0.5, 0, -170, 0, 0, 0, 1, 0], + "name": "green", + "colorMatrix": [ + 0.5, + 0.5, + 0.5, + 0, + -170, + 0.5, + 0.5, + 0.5, + 0, + 0, + 0.5, + 0.5, + 0.5, + 0, + -170, + 0, + 0, + 0, + 1, + 0 + ], "minLevel": 10, "enabled": true } diff --git a/src/views/hotel-view/HotelView.scss b/src/views/hotel-view/HotelView.scss index c8b31c7a..c4973317 100644 --- a/src/views/hotel-view/HotelView.scss +++ b/src/views/hotel-view/HotelView.scss @@ -4,6 +4,7 @@ width: 100%; height: calc(100% - 55px); background: rgba($black, 1); + color:#000; .avatar-image { bottom: 12px; @@ -13,6 +14,7 @@ } .background { + top:0; height: 100%; width: 100%; background-position: left; @@ -74,58 +76,20 @@ background-position: right top; } + .landing-widgets { + z-index: 9; + position: relative; + + } + .widget-slot { - position:absolute; - z-index: 4; - overflow: hidden; + z-index: 9; } - .slot-1 { - top: 5px; - left: 10px; - width: 100%; - height: 100px; - } - - .slot-2 { - top: 100px; - left: 100px; - width: 200px; - height:100px; - } - - .slot-3 { - top: 300px; - left: 100px; - width: 200px; - height: 100px; - } - - .slot-4 { - top: 100px; - left: 600px; - width: 200px; - height: 100px; - } - - .slot-5 { - top: 300px; - left: 600px; - width: 200px; - height: 100px; - } - - .slot-6 { - left: 10px; - bottom: 5px; - width: 100%; - height: 100px; - } - - .slot-7 { - width: 100px; - height: 100%; - right: 5px; + hr { + background: $black; + box-shadow: 0 1px rgba($white,.5); + opacity: 0.5 } } diff --git a/src/views/hotel-view/HotelView.tsx b/src/views/hotel-view/HotelView.tsx index dc8b2683..6d1e3f3e 100644 --- a/src/views/hotel-view/HotelView.tsx +++ b/src/views/hotel-view/HotelView.tsx @@ -38,13 +38,56 @@ export const HotelView: FC = props => return (
- {Array.from(Array(widgetSlotCount)).map((x, index) => - )} +
+
+
+ +
+ + + + +
+ +
+
+ +
+
+
diff --git a/src/views/hotel-view/views/widget-slot/WidgetSlotView.tsx b/src/views/hotel-view/views/widget-slot/WidgetSlotView.tsx index d03e1a05..739b34c7 100644 --- a/src/views/hotel-view/views/widget-slot/WidgetSlotView.tsx +++ b/src/views/hotel-view/views/widget-slot/WidgetSlotView.tsx @@ -4,9 +4,11 @@ import { WidgetSlotViewProps } from './WidgetSlotView.types'; export const WidgetSlotView: FC = props => { - return ( -
- -
- ); + const { widgetType = null, widgetSlot = 0, widgetConf = null, className= '', ...rest } = props; + + return ( +
+ +
+ ); } diff --git a/src/views/hotel-view/views/widget-slot/WidgetSlotView.types.ts b/src/views/hotel-view/views/widget-slot/WidgetSlotView.types.ts index ab1d6c8d..e74dd1ec 100644 --- a/src/views/hotel-view/views/widget-slot/WidgetSlotView.types.ts +++ b/src/views/hotel-view/views/widget-slot/WidgetSlotView.types.ts @@ -1,6 +1,8 @@ -export interface WidgetSlotViewProps +import { DetailsHTMLAttributes } from 'react'; + +export interface WidgetSlotViewProps extends DetailsHTMLAttributes { - widgetType: string; - slot: number; - widgetConf: string; + widgetType: string; + widgetSlot: number; + widgetConf: string; } diff --git a/src/views/hotel-view/views/widgets/promo-article/PromoArticleWidgetView.scss b/src/views/hotel-view/views/widgets/promo-article/PromoArticleWidgetView.scss index 77dc0cb3..eed870d2 100644 --- a/src/views/hotel-view/views/widgets/promo-article/PromoArticleWidgetView.scss +++ b/src/views/hotel-view/views/widgets/promo-article/PromoArticleWidgetView.scss @@ -1,4 +1,27 @@ -.promo-article { - width: 100%; - height: 100%; +.promo-articles { + width: 100%; + height: 100%; + + .promo-articles-bullet { + border-radius: 50%; + background-color: $white; + border: 1px solid $white; + height: 13px; + width: 13px; + margin-right: 3px; + + &.promo-articles-bullet-active { + background: $black; + } + } + + .promo-article { + .promo-article-image { + width: 150px; + height: 150px; + margin-right: 10px; + background-repeat: no-repeat; + background-position: top center; + } + } } diff --git a/src/views/hotel-view/views/widgets/promo-article/PromoArticleWidgetView.tsx b/src/views/hotel-view/views/widgets/promo-article/PromoArticleWidgetView.tsx index a17257ee..a9dc0ca9 100644 --- a/src/views/hotel-view/views/widgets/promo-article/PromoArticleWidgetView.tsx +++ b/src/views/hotel-view/views/widgets/promo-article/PromoArticleWidgetView.tsx @@ -1,51 +1,54 @@ import { GetPromoArticlesComposer, PromoArticleData, PromoArticlesMessageEvent } from 'nitro-renderer'; import { FC, useCallback, useEffect, useState } from 'react'; -import { Carousel } from 'react-bootstrap'; import { CreateMessageHook, SendMessageHook } from '../../../../../hooks'; +import { LocalizeText } from '../../../../../utils/LocalizeText'; import { PromoArticleWidgetViewProps } from './PromoArticleWidgetView.types'; export const PromoArticleWidgetView: FC = props => { - const [articles, setArticles] = useState(null); - const [index, setIndex] = useState(0); + const [articles, setArticles] = useState(null); + const [index, setIndex] = useState(0); - const handleSelect = (selectedIndex, e) => - { - setIndex(selectedIndex); - }; + const handleSelect = (selectedIndex) => + { + setIndex(selectedIndex); + }; - useEffect(() => - { - SendMessageHook(new GetPromoArticlesComposer()); - }, []); + useEffect(() => + { + SendMessageHook(new GetPromoArticlesComposer()); + }, []); - const onPromoArticlesMessageEvent = useCallback((event: PromoArticlesMessageEvent) => - { - const parser = event.getParser(); - setArticles(parser.articles); - }, []); + const onPromoArticlesMessageEvent = useCallback((event: PromoArticlesMessageEvent) => + { + const parser = event.getParser(); + setArticles(parser.articles); + }, []); - CreateMessageHook(PromoArticlesMessageEvent, onPromoArticlesMessageEvent); + CreateMessageHook(PromoArticlesMessageEvent, onPromoArticlesMessageEvent); - if (!articles) return null; + if (!articles) return null; - return ( -
- - {articles && (articles.length > 0) && articles.map(article => - - {article.title} - -

{article.title}

-

{article.bodyText}

- - - )} - -
- ); + return ( +
+
+ { LocalizeText('landing.view.promo.article.header') } +
+
+
+ {articles && (articles.length > 0) && articles.map((article, ind) => +
handleSelect(ind)} /> + )} +
+ {articles && articles[index] && +
+
+
+

{articles[index].title}

+ { articles[index].bodyText } +
+
+ } +
+ ); } From ff8b140ac839260792cacdf2a9e83b1fc9d09566 Mon Sep 17 00:00:00 2001 From: Layne Date: Sun, 25 Jul 2021 03:02:11 -0400 Subject: [PATCH 5/9] changes --- public/configuration.json | 4 +- src/assets/styles/bootstrap/_variables.scss | 4 +- src/views/hotel-view/HotelView.scss | 1 + src/views/hotel-view/HotelView.tsx | 5 +- .../views/widgets/GetWidgetLayout.tsx | 3 ++ .../promo-article/PromoArticleWidgetView.tsx | 5 +- .../widgetcontainer/WIdgetContainerView.tsx | 47 +++++++++++++++++++ .../widgetcontainer/WidgetContainerView.scss | 0 .../WidgetContainerView.types.ts | 4 ++ 9 files changed, 66 insertions(+), 7 deletions(-) create mode 100644 src/views/hotel-view/views/widgets/widgetcontainer/WIdgetContainerView.tsx create mode 100644 src/views/hotel-view/views/widgets/widgetcontainer/WidgetContainerView.scss create mode 100644 src/views/hotel-view/views/widgets/widgetcontainer/WidgetContainerView.types.ts diff --git a/public/configuration.json b/public/configuration.json index 8d638a23..4a81f531 100644 --- a/public/configuration.json +++ b/public/configuration.json @@ -91,8 +91,8 @@ "widgets": { "slot.1.widget": "promoarticle", "slot.1.conf": "", - "slot.2.widget": "", - "slot.2.conf": "", + "slot.2.widget": "widgetcontainer", + "slot.2.conf": "image:${image.library.url}web_promo_small/spromo_Canal_Bundle.png,btn:HelloHELLO,btnLink:https://google.com/", "slot.3.widget": "", "slot.3.conf": "", "slot.4.widget": "", diff --git a/src/assets/styles/bootstrap/_variables.scss b/src/assets/styles/bootstrap/_variables.scss index 1d1de900..0fd0eeb4 100644 --- a/src/assets/styles/bootstrap/_variables.scss +++ b/src/assets/styles/bootstrap/_variables.scss @@ -80,6 +80,7 @@ $cello-light: #21516e !default; $cello-dark: #1e465e !default; $pale-sky: #677181 !default; $oslo-gray: #8F9297 !default; +$gainsboro: #d9d9d9 !default; $success: $green !default; $info: $cyan !default; @@ -122,7 +123,8 @@ $theme-colors: ( "white": $white, "black": $black, "muted": $muted, - "purple": $purple + "purple": $purple, + "gainsboro": $gainsboro ) !default; // scss-docs-end theme-colors-map diff --git a/src/views/hotel-view/HotelView.scss b/src/views/hotel-view/HotelView.scss index c4973317..1c719e38 100644 --- a/src/views/hotel-view/HotelView.scss +++ b/src/views/hotel-view/HotelView.scss @@ -95,3 +95,4 @@ @import './views/widgets/promo-article/PromoArticleWidgetView.scss'; @import './views/widgets/bonus-rare/BonusRareWidgetView.scss'; +@import './views/widgets/widgetcontainer/WidgetContainerView.scss' diff --git a/src/views/hotel-view/HotelView.tsx b/src/views/hotel-view/HotelView.tsx index 6d1e3f3e..e870654e 100644 --- a/src/views/hotel-view/HotelView.tsx +++ b/src/views/hotel-view/HotelView.tsx @@ -44,9 +44,10 @@ export const HotelView: FC = props => -
+
= props => { @@ -14,6 +15,8 @@ export const GetWidgetLayout: FC = props => return ; case "bonusrare": return ; + case "widgetcontainer": + return default: return null; } diff --git a/src/views/hotel-view/views/widgets/promo-article/PromoArticleWidgetView.tsx b/src/views/hotel-view/views/widgets/promo-article/PromoArticleWidgetView.tsx index a9dc0ca9..5b110db6 100644 --- a/src/views/hotel-view/views/widgets/promo-article/PromoArticleWidgetView.tsx +++ b/src/views/hotel-view/views/widgets/promo-article/PromoArticleWidgetView.tsx @@ -37,15 +37,16 @@ export const PromoArticleWidgetView: FC = props =>
{articles && (articles.length > 0) && articles.map((article, ind) => -
handleSelect(ind)} /> +
handleSelect(ind)} /> )}
{articles && articles[index] &&
-
+

{articles[index].title}

{ articles[index].bodyText } +
} diff --git a/src/views/hotel-view/views/widgets/widgetcontainer/WIdgetContainerView.tsx b/src/views/hotel-view/views/widgets/widgetcontainer/WIdgetContainerView.tsx new file mode 100644 index 00000000..d8a903ef --- /dev/null +++ b/src/views/hotel-view/views/widgets/widgetcontainer/WIdgetContainerView.tsx @@ -0,0 +1,47 @@ +import { FC, useCallback, useMemo } from 'react'; +import { GetConfigurationManager } from '../../../../../api/core/'; +import { WidgetContainerViewProps } from './WidgetContainerView.types'; + +export const WidgetContainerView: FC = props => +{ + const { conf = null } = props; + + const config = useMemo(() => + { + const config = {}; + + if(!conf || !conf.length) return config; + + let options = conf.split(","); + + options.forEach(option => + { + let [ key, value ] = option.split(':'); + + if(key && value) config[key] = value; + }); + + return config; + }, [ conf ]); + + const getOption = useCallback((key: string) => + { + const option = config[key]; + + if(!option) return null; + + switch(key) + { + case 'image': + return GetConfigurationManager().interpolate(option); + } + + return option; + }, [ config ]); + + return ( +
+ { getOption('image') } +
+ ); +} diff --git a/src/views/hotel-view/views/widgets/widgetcontainer/WidgetContainerView.scss b/src/views/hotel-view/views/widgets/widgetcontainer/WidgetContainerView.scss new file mode 100644 index 00000000..e69de29b diff --git a/src/views/hotel-view/views/widgets/widgetcontainer/WidgetContainerView.types.ts b/src/views/hotel-view/views/widgets/widgetcontainer/WidgetContainerView.types.ts new file mode 100644 index 00000000..55f5924f --- /dev/null +++ b/src/views/hotel-view/views/widgets/widgetcontainer/WidgetContainerView.types.ts @@ -0,0 +1,4 @@ +export interface WidgetContainerViewProps +{ + conf: string; +} From 3fc8c856eff7b9ff9650531a550d8a7a11128c40 Mon Sep 17 00:00:00 2001 From: Dank074 Date: Sun, 25 Jul 2021 02:07:34 -0500 Subject: [PATCH 6/9] started hall of fame --- src/views/hotel-view/HotelView.scss | 1 + .../hall-of-fame/HallOfFameWidgetView.scss | 15 +++++++++++++++ .../widgets/hall-of-fame/HallOfFameWidgetView.tsx | 14 ++++++++++---- 3 files changed, 26 insertions(+), 4 deletions(-) create mode 100644 src/views/hotel-view/views/widgets/hall-of-fame/HallOfFameWidgetView.scss diff --git a/src/views/hotel-view/HotelView.scss b/src/views/hotel-view/HotelView.scss index c4973317..8cda46bf 100644 --- a/src/views/hotel-view/HotelView.scss +++ b/src/views/hotel-view/HotelView.scss @@ -95,3 +95,4 @@ @import './views/widgets/promo-article/PromoArticleWidgetView.scss'; @import './views/widgets/bonus-rare/BonusRareWidgetView.scss'; +@import './views/widgets/hall-of-fame/HallOfFameWidgetView.scss'; diff --git a/src/views/hotel-view/views/widgets/hall-of-fame/HallOfFameWidgetView.scss b/src/views/hotel-view/views/widgets/hall-of-fame/HallOfFameWidgetView.scss new file mode 100644 index 00000000..f1b8c806 --- /dev/null +++ b/src/views/hotel-view/views/widgets/hall-of-fame/HallOfFameWidgetView.scss @@ -0,0 +1,15 @@ +.hall-of-fame { + .hof-user-container { + display:inline-flex; + height: 100%; + + .hof-tooltip { + position: absolute; + display: inline; + } + .avatar-image { + position:relative; + display:inline; + } + } +} diff --git a/src/views/hotel-view/views/widgets/hall-of-fame/HallOfFameWidgetView.tsx b/src/views/hotel-view/views/widgets/hall-of-fame/HallOfFameWidgetView.tsx index 82300041..8d527340 100644 --- a/src/views/hotel-view/views/widgets/hall-of-fame/HallOfFameWidgetView.tsx +++ b/src/views/hotel-view/views/widgets/hall-of-fame/HallOfFameWidgetView.tsx @@ -1,6 +1,7 @@ import { CommunityGoalHallOfFameData, CommunityGoalHallOfFameMessageEvent, GetCommunityGoalHallOfFameMessageComposer } from 'nitro-renderer'; import { FC, useCallback, useEffect, useState } from 'react'; import { CreateMessageHook, SendMessageHook } from '../../../../../hooks/messages/message-event'; +import { AvatarImageView } from '../../../../shared/avatar-image/AvatarImageView'; import { HallOfFameWidgetViewProps } from './HallOfFameWidgetView.types'; export const HallOfFameWidgetView: FC = props => @@ -19,12 +20,17 @@ export const HallOfFameWidgetView: FC = props => }, []); CreateMessageHook(CommunityGoalHallOfFameMessageEvent, onCommunityGoalHallOfFameMessageEvent); - - if(!data) return null; - + + if (!data) return null; + return (
-

showing hall of fame for event: {data ? data.goalCode : 'empty'}

+ {data.hof && (data.hof.length > 0) && data.hof.map((entry, ind) => +
+
{entry.userName}
+ +
+ )}
); } From 2b9c3591784b143bcc2046a6be446727c38a3829 Mon Sep 17 00:00:00 2001 From: Layne Date: Sun, 25 Jul 2021 04:19:09 -0400 Subject: [PATCH 7/9] landing widgets --- public/configuration.json | 4 +- src/views/hotel-view/HotelView.tsx | 8 +-- .../hall-of-fame/HallOfFameWidgetView.scss | 68 ++++++++++++++++--- .../hall-of-fame/HallOfFameWidgetView.tsx | 50 ++++++++------ .../promo-article/PromoArticleWidgetView.tsx | 2 +- .../widgetcontainer/WIdgetContainerView.tsx | 10 ++- .../widgetcontainer/WidgetContainerView.scss | 9 +++ 7 files changed, 109 insertions(+), 42 deletions(-) diff --git a/public/configuration.json b/public/configuration.json index 4a81f531..d93080f3 100644 --- a/public/configuration.json +++ b/public/configuration.json @@ -92,8 +92,8 @@ "slot.1.widget": "promoarticle", "slot.1.conf": "", "slot.2.widget": "widgetcontainer", - "slot.2.conf": "image:${image.library.url}web_promo_small/spromo_Canal_Bundle.png,btn:HelloHELLO,btnLink:https://google.com/", - "slot.3.widget": "", + "slot.2.conf": "image:${image.library.url}web_promo_small/spromo_Canal_Bundle.png,texts:2021NitroPromo,btnLink:https://google.com", + "slot.3.widget": "promoarticle", "slot.3.conf": "", "slot.4.widget": "", "slot.4.conf": "", diff --git a/src/views/hotel-view/HotelView.tsx b/src/views/hotel-view/HotelView.tsx index d2abb427..dd83ed44 100644 --- a/src/views/hotel-view/HotelView.tsx +++ b/src/views/hotel-view/HotelView.tsx @@ -52,25 +52,25 @@ export const HotelView: FC = props => widgetSlot={ 2 } widgetType={GetConfiguration('hotelview')['widgets']['slot.' + 2 + '.widget']} widgetConf={GetConfiguration('hotelview')['widgets']['slot.' + 2 + '.conf']} - className="col-6" + className="col-7" />
= props => { - const [data, setData] = useState(null); + const [data, setData] = useState(null); - useEffect(() => - { - SendMessageHook(new GetCommunityGoalHallOfFameMessageComposer(props.conf)); - }, [props.conf]); + useEffect(() => + { + SendMessageHook(new GetCommunityGoalHallOfFameMessageComposer(props.conf)); + }, [props.conf]); - const onCommunityGoalHallOfFameMessageEvent = useCallback((event: CommunityGoalHallOfFameMessageEvent) => - { - const parser = event.getParser(); - setData(parser.data); - }, []); + const onCommunityGoalHallOfFameMessageEvent = useCallback((event: CommunityGoalHallOfFameMessageEvent) => + { + const parser = event.getParser(); + setData(parser.data); + }, []); - CreateMessageHook(CommunityGoalHallOfFameMessageEvent, onCommunityGoalHallOfFameMessageEvent); + CreateMessageHook(CommunityGoalHallOfFameMessageEvent, onCommunityGoalHallOfFameMessageEvent); - if (!data) return null; + if (!data) return null; - return ( -
- {data.hof && (data.hof.length > 0) && data.hof.map((entry, ind) => -
-
{entry.userName}
- -
- )} -
- ); + return ( +
+ {data.hof && (data.hof.length > 0) && data.hof.map((entry, ind) => +
+
+
+
{ind + 1}. { entry.userName }
+
{LocalizeText('landing.view.competition.hof.points', ['points'], [entry.currentScore.toString()])}
+
+
+ +
+ )} +
+ ); } diff --git a/src/views/hotel-view/views/widgets/promo-article/PromoArticleWidgetView.tsx b/src/views/hotel-view/views/widgets/promo-article/PromoArticleWidgetView.tsx index 5b110db6..f124ab60 100644 --- a/src/views/hotel-view/views/widgets/promo-article/PromoArticleWidgetView.tsx +++ b/src/views/hotel-view/views/widgets/promo-article/PromoArticleWidgetView.tsx @@ -30,7 +30,7 @@ export const PromoArticleWidgetView: FC = props => if (!articles) return null; return ( -
+
{ LocalizeText('landing.view.promo.article.header') }
diff --git a/src/views/hotel-view/views/widgets/widgetcontainer/WIdgetContainerView.tsx b/src/views/hotel-view/views/widgets/widgetcontainer/WIdgetContainerView.tsx index d8a903ef..9541333f 100644 --- a/src/views/hotel-view/views/widgets/widgetcontainer/WIdgetContainerView.tsx +++ b/src/views/hotel-view/views/widgets/widgetcontainer/WIdgetContainerView.tsx @@ -1,5 +1,6 @@ import { FC, useCallback, useMemo } from 'react'; import { GetConfigurationManager } from '../../../../../api/core/'; +import { LocalizeText } from '../../../../../utils/LocalizeText'; import { WidgetContainerViewProps } from './WidgetContainerView.types'; export const WidgetContainerView: FC = props => @@ -40,8 +41,13 @@ export const WidgetContainerView: FC = props => }, [ config ]); return ( -
- { getOption('image') } +
+
+
+

{LocalizeText(`landing.view.${getOption('texts')}.header`)}

+ { LocalizeText(`landing.view.${getOption('texts')}.body`) } + +
); } diff --git a/src/views/hotel-view/views/widgets/widgetcontainer/WidgetContainerView.scss b/src/views/hotel-view/views/widgets/widgetcontainer/WidgetContainerView.scss index e69de29b..131b5603 100644 --- a/src/views/hotel-view/views/widgets/widgetcontainer/WidgetContainerView.scss +++ b/src/views/hotel-view/views/widgets/widgetcontainer/WidgetContainerView.scss @@ -0,0 +1,9 @@ +.widgetcontainer { + .widgetcontainer-image { + width: 150px; + height: 150px; + margin-right: 10px; + background-repeat: no-repeat; + background-position: top center; + } +} From 56961a448c3c080d123393f138b22d67032fae1b Mon Sep 17 00:00:00 2001 From: Bill Date: Sun, 15 Aug 2021 02:24:10 -0400 Subject: [PATCH 8/9] Update AvatarImageView --- .../shared/avatar-image/AvatarImageView.tsx | 22 ++++++++++++++----- 1 file changed, 17 insertions(+), 5 deletions(-) diff --git a/src/views/shared/avatar-image/AvatarImageView.tsx b/src/views/shared/avatar-image/AvatarImageView.tsx index a2a5ab56..ea9a823d 100644 --- a/src/views/shared/avatar-image/AvatarImageView.tsx +++ b/src/views/shared/avatar-image/AvatarImageView.tsx @@ -1,21 +1,23 @@ import { AvatarScaleType, AvatarSetType } from '@nitrots/nitro-renderer'; -import { FC, useEffect, useState } from 'react'; +import { FC, useEffect, useRef, useState } from 'react'; import { GetAvatarRenderManager } from '../../../api'; import { AvatarImageViewProps } from './AvatarImageView.types'; export const AvatarImageView: FC = props => { const { figure = '', gender = 'M', headOnly = false, direction = 0, scale = 1 } = props; - const [ avatarUrl, setAvatarUrl ] = useState(null); const [ randomValue, setRandomValue ] = useState(-1); + const isDisposed = useRef(false); useEffect(() => { - if(randomValue) {} - const avatarImage = GetAvatarRenderManager().createAvatarImage(figure, AvatarScaleType.LARGE, gender, { - resetFigure: figure => setRandomValue(Math.random()), + resetFigure: figure => { + if(isDisposed.current) return; + + setRandomValue(Math.random()); + }, dispose: () => {}, disposed: false }, null); @@ -35,6 +37,16 @@ export const AvatarImageView: FC = props => avatarImage.dispose(); }, [ figure, gender, direction, headOnly, randomValue ]); + useEffect(() => + { + isDisposed.current = false; + + return () => + { + isDisposed.current = true; + } + }, []); + const url = `url('${ avatarUrl }')`; return
; From 69ef7412cf397c5068a3f0e374f7c97e592375f4 Mon Sep 17 00:00:00 2001 From: Bill Date: Sun, 15 Aug 2021 02:56:33 -0400 Subject: [PATCH 9/9] Update hotel view widgets --- .../bonus-rare/BonusRareWidgetView.scss | 14 ++--- .../bonus-rare/BonusRareWidgetView.tsx | 57 ++++++++++--------- .../hall-of-fame-item/HallOfFameItemView.tsx | 21 +++++++ .../HallOfFameItemView.types.ts | 7 +++ .../hall-of-fame/HallOfFameWidgetView.tsx | 35 +++++------- .../HallOfFameWidgetView.types.ts | 4 +- .../promo-article/PromoArticleWidgetView.tsx | 12 ++-- .../WidgetContainerView.scss | 0 .../WidgetContainerView.tsx} | 2 +- .../WidgetContainerView.types.ts | 0 10 files changed, 88 insertions(+), 64 deletions(-) create mode 100644 src/views/hotel-view/views/widgets/hall-of-fame-item/HallOfFameItemView.tsx create mode 100644 src/views/hotel-view/views/widgets/hall-of-fame-item/HallOfFameItemView.types.ts rename src/views/hotel-view/views/widgets/{widgetcontainer => widget-container}/WidgetContainerView.scss (100%) rename src/views/hotel-view/views/widgets/{widgetcontainer/WIdgetContainerView.tsx => widget-container/WidgetContainerView.tsx} (99%) rename src/views/hotel-view/views/widgets/{widgetcontainer => widget-container}/WidgetContainerView.types.ts (100%) diff --git a/src/views/hotel-view/views/widgets/bonus-rare/BonusRareWidgetView.scss b/src/views/hotel-view/views/widgets/bonus-rare/BonusRareWidgetView.scss index c26da737..26f56d82 100644 --- a/src/views/hotel-view/views/widgets/bonus-rare/BonusRareWidgetView.scss +++ b/src/views/hotel-view/views/widgets/bonus-rare/BonusRareWidgetView.scss @@ -1,10 +1,10 @@ .bonus-rare { - height: 100px; - justify-content: center; + height: 100px; + justify-content: center; - .bonus-bar-container { - height: 30px; - width: 300px; - border: 2px ridge #e2e2e2; - } + .bonus-bar-container { + height: 30px; + width: 300px; + border: 2px ridge #e2e2e2; + } } diff --git a/src/views/hotel-view/views/widgets/bonus-rare/BonusRareWidgetView.tsx b/src/views/hotel-view/views/widgets/bonus-rare/BonusRareWidgetView.tsx index 9cf62a10..a19a9cda 100644 --- a/src/views/hotel-view/views/widgets/bonus-rare/BonusRareWidgetView.tsx +++ b/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 = props => { - const [productType, setProductType] = useState(null); - const [productClassId, setProductClassId] = useState(null); - const [totalCoinsForBonus, setTotalCoinsForBonus] = useState(null); - const [coinsStillRequiredToBuy, setCoinsStillRequiredToBuy] = useState(null); + const [ productType, setProductType ] = useState(null); + const [ productClassId, setProductClassId ] = useState(null); + const [ totalCoinsForBonus, setTotalCoinsForBonus ] = useState(null); + const [ coinsStillRequiredToBuy, setCoinsStillRequiredToBuy ] = useState(null); - useEffect(() => - { - SendMessageHook(new GetBonusRareInfoMessageComposer()); - }, []); + const onBonusRareInfoMessageEvent = useCallback((event: BonusRareInfoMessageEvent) => + { + const parser = event.getParser(); - const onBonusRareInfoMessageEvent = useCallback((event: BonusRareInfoMessageEvent) => - { - const parser = event.getParser(); - setProductType(parser.productType); - setProductClassId(parser.productClassId); - setTotalCoinsForBonus(parser.totalCoinsForBonus); - setCoinsStillRequiredToBuy(parser.coinsStillRequiredToBuy); - }, []); + setProductType(parser.productType); + setProductClassId(parser.productClassId); + setTotalCoinsForBonus(parser.totalCoinsForBonus); + setCoinsStillRequiredToBuy(parser.coinsStillRequiredToBuy); + }, []); - CreateMessageHook(BonusRareInfoMessageEvent, onBonusRareInfoMessageEvent); + CreateMessageHook(BonusRareInfoMessageEvent, onBonusRareInfoMessageEvent); - if (!productType) return (null); + useEffect(() => + { + SendMessageHook(new GetBonusRareInfoMessageComposer()); + }, []); - return ( -
- {productType} -
-
{(totalCoinsForBonus - coinsStillRequiredToBuy) + '/' + totalCoinsForBonus}
-
-
-
- ); + if(!productType) return null; + + return ( +
+ { productType } +
+
{(totalCoinsForBonus - coinsStillRequiredToBuy) + '/' + totalCoinsForBonus}
+
+
+
+ ); } diff --git a/src/views/hotel-view/views/widgets/hall-of-fame-item/HallOfFameItemView.tsx b/src/views/hotel-view/views/widgets/hall-of-fame-item/HallOfFameItemView.tsx new file mode 100644 index 00000000..06c29c03 --- /dev/null +++ b/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 = props => +{ + const { data = null, level = 0 } = props; + + return ( +
+
+
+
{ level }. { data.userName }
+
{ LocalizeText('landing.view.competition.hof.points', [ 'points' ], [ data.currentScore.toString() ])}
+
+
+ +
+ ); +} diff --git a/src/views/hotel-view/views/widgets/hall-of-fame-item/HallOfFameItemView.types.ts b/src/views/hotel-view/views/widgets/hall-of-fame-item/HallOfFameItemView.types.ts new file mode 100644 index 00000000..0e8c1e3a --- /dev/null +++ b/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; +} diff --git a/src/views/hotel-view/views/widgets/hall-of-fame/HallOfFameWidgetView.tsx b/src/views/hotel-view/views/widgets/hall-of-fame/HallOfFameWidgetView.tsx index c56ea2ea..4a13db2c 100644 --- a/src/views/hotel-view/views/widgets/hall-of-fame/HallOfFameWidgetView.tsx +++ b/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 { AvatarImageView } from '../../../../shared/avatar-image/AvatarImageView'; +import { HallOfFameItemView } from '../hall-of-fame-item/HallOfFameItemView'; import { HallOfFameWidgetViewProps } from './HallOfFameWidgetView.types'; export const HallOfFameWidgetView: FC = props => { - const [data, setData] = useState(null); - - useEffect(() => - { - SendMessageHook(new GetCommunityGoalHallOfFameMessageComposer(props.conf)); - }, [props.conf]); + const { slot = -1, conf = '' } = props; + const [ data, setData ] = useState(null); 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 (
- {data.hof && (data.hof.length > 0) && data.hof.map((entry, ind) => -
-
-
-
{ind + 1}. { entry.userName }
-
{LocalizeText('landing.view.competition.hof.points', ['points'], [entry.currentScore.toString()])}
-
-
- -
+ { data.hof && (data.hof.length > 0) && data.hof.map((entry, index) => + { + return ; + } )}
); diff --git a/src/views/hotel-view/views/widgets/hall-of-fame/HallOfFameWidgetView.types.ts b/src/views/hotel-view/views/widgets/hall-of-fame/HallOfFameWidgetView.types.ts index 955af179..0f165e26 100644 --- a/src/views/hotel-view/views/widgets/hall-of-fame/HallOfFameWidgetView.types.ts +++ b/src/views/hotel-view/views/widgets/hall-of-fame/HallOfFameWidgetView.types.ts @@ -1,5 +1,5 @@ export interface HallOfFameWidgetViewProps { - slot: number; - conf: string; + slot: number; + conf: string; } diff --git a/src/views/hotel-view/views/widgets/promo-article/PromoArticleWidgetView.tsx b/src/views/hotel-view/views/widgets/promo-article/PromoArticleWidgetView.tsx index f124ab60..e2f87ca6 100644 --- a/src/views/hotel-view/views/widgets/promo-article/PromoArticleWidgetView.tsx +++ b/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 = props => setIndex(selectedIndex); }; - useEffect(() => - { - SendMessageHook(new GetPromoArticlesComposer()); - }, []); - const onPromoArticlesMessageEvent = useCallback((event: PromoArticlesMessageEvent) => { const parser = event.getParser(); @@ -27,6 +22,11 @@ export const PromoArticleWidgetView: FC = props => CreateMessageHook(PromoArticlesMessageEvent, onPromoArticlesMessageEvent); + useEffect(() => + { + SendMessageHook(new GetPromoArticlesComposer()); + }, []); + if (!articles) return null; return ( diff --git a/src/views/hotel-view/views/widgets/widgetcontainer/WidgetContainerView.scss b/src/views/hotel-view/views/widgets/widget-container/WidgetContainerView.scss similarity index 100% rename from src/views/hotel-view/views/widgets/widgetcontainer/WidgetContainerView.scss rename to src/views/hotel-view/views/widgets/widget-container/WidgetContainerView.scss diff --git a/src/views/hotel-view/views/widgets/widgetcontainer/WIdgetContainerView.tsx b/src/views/hotel-view/views/widgets/widget-container/WidgetContainerView.tsx similarity index 99% rename from src/views/hotel-view/views/widgets/widgetcontainer/WIdgetContainerView.tsx rename to src/views/hotel-view/views/widgets/widget-container/WidgetContainerView.tsx index 9541333f..139c5a9b 100644 --- a/src/views/hotel-view/views/widgets/widgetcontainer/WIdgetContainerView.tsx +++ b/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'; diff --git a/src/views/hotel-view/views/widgets/widgetcontainer/WidgetContainerView.types.ts b/src/views/hotel-view/views/widgets/widget-container/WidgetContainerView.types.ts similarity index 100% rename from src/views/hotel-view/views/widgets/widgetcontainer/WidgetContainerView.types.ts rename to src/views/hotel-view/views/widgets/widget-container/WidgetContainerView.types.ts