From e5c9759823bb143d8176ab60341541be18d4d536 Mon Sep 17 00:00:00 2001 From: duckietm Date: Thu, 13 Mar 2025 16:27:58 +0100 Subject: [PATCH] :up: Redesign HotelView --- src/components/hotel-view/HotelView.tsx | 179 ++++++++---------- src/components/hotel-view/RoomWidgetView.tsx | 42 ++++ .../views/widgets/GetWidgetLayout.tsx | 29 --- .../views/widgets/WidgetSlotView.tsx | 20 -- .../bonus-rare/BonusRareWidgetView.tsx | 42 ---- .../hall-of-fame-item/HallOfFameItemView.tsx | 30 --- .../hall-of-fame/HallOfFameWidgetView.tsx | 37 ---- .../HallOfFameWidgetView.types.ts | 5 - .../promo-article/PromoArticleWidgetView.tsx | 46 ----- .../widget-container/WidgetContainerView.tsx | 39 ---- 10 files changed, 123 insertions(+), 346 deletions(-) create mode 100644 src/components/hotel-view/RoomWidgetView.tsx delete mode 100644 src/components/hotel-view/views/widgets/GetWidgetLayout.tsx delete mode 100644 src/components/hotel-view/views/widgets/WidgetSlotView.tsx delete mode 100644 src/components/hotel-view/views/widgets/bonus-rare/BonusRareWidgetView.tsx delete mode 100644 src/components/hotel-view/views/widgets/hall-of-fame-item/HallOfFameItemView.tsx delete mode 100644 src/components/hotel-view/views/widgets/hall-of-fame/HallOfFameWidgetView.tsx delete mode 100644 src/components/hotel-view/views/widgets/hall-of-fame/HallOfFameWidgetView.types.ts delete mode 100644 src/components/hotel-view/views/widgets/promo-article/PromoArticleWidgetView.tsx delete mode 100644 src/components/hotel-view/views/widgets/widget-container/WidgetContainerView.tsx diff --git a/src/components/hotel-view/HotelView.tsx b/src/components/hotel-view/HotelView.tsx index 7a6d4c8..2e1a942 100644 --- a/src/components/hotel-view/HotelView.tsx +++ b/src/components/hotel-view/HotelView.tsx @@ -1,106 +1,89 @@ -import { GetConfiguration, RoomSessionEvent } from '@nitrots/nitro-renderer'; -import { FC, useState } from 'react'; +import { GetConfiguration } from '@nitrots/nitro-renderer'; +import { FC, useRef, useState } from 'react'; import { GetConfigurationValue } from '../../api'; -import { LayoutAvatarImageView } from '../../common'; -import { useNitroEvent, useSessionInfo } from '../../hooks'; -import { WidgetSlotView } from './views/widgets/WidgetSlotView'; - -const widgetSlotCount = 7; - -export const HotelView: FC<{}> = props => -{ - const [ isVisible, setIsVisible ] = useState(true); - const { userFigure = null } = useSessionInfo(); - - useNitroEvent([ - RoomSessionEvent.CREATED, - RoomSessionEvent.ENDED ], event => - { - switch(event.type) - { - case RoomSessionEvent.CREATED: - setIsVisible(false); - return; - case RoomSessionEvent.ENDED: - setIsVisible(event.openLandingView); - return; - } - }); - - if(!isVisible) return null; +import { RoomWidgetView } from './RoomWidgetView'; +export const HotelView: FC<{}> = props => { const backgroundColor = GetConfigurationValue('hotelview')['images']['background.colour']; - const background = GetConfiguration().interpolate(GetConfigurationValue('hotelview')['images']['background']); - const sun = GetConfiguration().interpolate(GetConfigurationValue('hotelview')['images']['sun']); - const drape = GetConfiguration().interpolate(GetConfigurationValue('hotelview')['images']['drape']); - const left = GetConfiguration().interpolate(GetConfigurationValue('hotelview')['images']['left']); - const rightRepeat = GetConfiguration().interpolate(GetConfigurationValue('hotelview')['images']['right.repeat']); - const right = GetConfiguration().interpolate(GetConfigurationValue('hotelview')['images']['right']); + console.log('Background color:', backgroundColor); + + const containerRef = useRef(null); + const [isDragging, setIsDragging] = useState(false); + const [startX, setStartX] = useState(0); + const [startY, setStartY] = useState(0); + const [scrollLeft, setScrollLeft] = useState(0); + const [scrollTop, setScrollTop] = useState(0); + + const handleMouseDown = (e: React.MouseEvent) => { + if (e.button !== 0) return; // Only left mouse button + setIsDragging(true); + setStartX(e.pageX + scrollLeft); + setStartY(e.pageY + scrollTop); + if (containerRef.current) { + containerRef.current.style.cursor = 'grabbing'; + } + }; + + const handleMouseMove = (e: React.MouseEvent) => { + if (!isDragging) return; + e.preventDefault(); + const x = e.pageX; + const y = e.pageY; + const newScrollLeft = startX - x; + const newScrollTop = startY - y; + + if (containerRef.current) { + containerRef.current.scrollLeft = newScrollLeft; + containerRef.current.scrollTop = newScrollTop; + setScrollLeft(newScrollLeft); + setScrollTop(newScrollTop); + } + }; + + const handleMouseUp = () => { + setIsDragging(false); + if (containerRef.current) { + containerRef.current.style.cursor = 'grab'; + } + }; + + const handleMouseLeave = () => { + setIsDragging(false); + if (containerRef.current) { + containerRef.current.style.cursor = 'grab'; + } + }; return ( -
-
-
-
- -
- - - - -
- -
-
- -
-
+
+
+
+
-
-
-
-
-
-
- { GetConfigurationValue('hotelview')['show.avatar'] && ( -
- -
- ) }
); -}; +}; \ No newline at end of file diff --git a/src/components/hotel-view/RoomWidgetView.tsx b/src/components/hotel-view/RoomWidgetView.tsx new file mode 100644 index 0000000..bc5129f --- /dev/null +++ b/src/components/hotel-view/RoomWidgetView.tsx @@ -0,0 +1,42 @@ +import { CreateLinkEvent } from '@nitrots/nitro-renderer'; +import { FC } from 'react'; +import { GetConfigurationValue } from '../../api'; +import { Base } from '../../common'; + +export interface RoomWidgetViewProps {} + +export const RoomWidgetView: FC = props => { + const poolId = GetConfigurationValue('hotelview')['room.pool']; + const picnicId = GetConfigurationValue('hotelview')['room.picnic']; + const rooftopId = GetConfigurationValue('hotelview')['room.rooftop']; + const rooftopPoolId = GetConfigurationValue('hotelview')['room.rooftop.pool']; + const peacefulId = GetConfigurationValue('hotelview')['room.peaceful']; + const infobusId = GetConfigurationValue('hotelview')['room.infobus']; + const lobbyId = GetConfigurationValue('hotelview')['room.lobby']; + + return ( + <> + CreateLinkEvent('navigator/goto/' + rooftopId)}> + + + CreateLinkEvent('navigator/goto/' + rooftopPoolId)}> + + + CreateLinkEvent('navigator/goto/' + picnicId)}> + + + CreateLinkEvent('navigator/goto/' + infobusId)}> + + + CreateLinkEvent('navigator/goto/' + poolId)}> + + + CreateLinkEvent('navigator/goto/' + lobbyId)}> + + + CreateLinkEvent('navigator/goto/' + peacefulId)}> + + + + ); +}; \ No newline at end of file diff --git a/src/components/hotel-view/views/widgets/GetWidgetLayout.tsx b/src/components/hotel-view/views/widgets/GetWidgetLayout.tsx deleted file mode 100644 index ec97cc0..0000000 --- a/src/components/hotel-view/views/widgets/GetWidgetLayout.tsx +++ /dev/null @@ -1,29 +0,0 @@ -import { FC } from 'react'; -import { BonusRareWidgetView } from './bonus-rare/BonusRareWidgetView'; -import { HallOfFameWidgetView } from './hall-of-fame/HallOfFameWidgetView'; -import { PromoArticleWidgetView } from './promo-article/PromoArticleWidgetView'; -import { WidgetContainerView } from './widget-container/WidgetContainerView'; - -export interface GetWidgetLayoutProps -{ - widgetType: string; - slot: number; - widgetConf: any; -} - -export const GetWidgetLayout: FC = props => -{ - switch(props.widgetType) - { - case 'promoarticle': - return ; - case 'achievementcompetition_hall_of_fame': - return ; - case 'bonusrare': - return ; - case 'widgetcontainer': - return ; - default: - return null; - } -}; diff --git a/src/components/hotel-view/views/widgets/WidgetSlotView.tsx b/src/components/hotel-view/views/widgets/WidgetSlotView.tsx deleted file mode 100644 index d6755ca..0000000 --- a/src/components/hotel-view/views/widgets/WidgetSlotView.tsx +++ /dev/null @@ -1,20 +0,0 @@ -import { DetailsHTMLAttributes, FC } from 'react'; -import { GetWidgetLayout } from './GetWidgetLayout'; - -export interface WidgetSlotViewProps extends DetailsHTMLAttributes -{ - widgetType: string; - widgetSlot: number; - widgetConf: any; -} - -export const WidgetSlotView: FC = props => -{ - const { widgetType = null, widgetSlot = 0, widgetConf = null, className= '', ...rest } = props; - - return ( -
- -
- ); -}; diff --git a/src/components/hotel-view/views/widgets/bonus-rare/BonusRareWidgetView.tsx b/src/components/hotel-view/views/widgets/bonus-rare/BonusRareWidgetView.tsx deleted file mode 100644 index fac886d..0000000 --- a/src/components/hotel-view/views/widgets/bonus-rare/BonusRareWidgetView.tsx +++ /dev/null @@ -1,42 +0,0 @@ -import { BonusRareInfoMessageEvent, GetBonusRareInfoMessageComposer } from '@nitrots/nitro-renderer'; -import { FC, useEffect, useState } from 'react'; -import { SendMessageComposer } from '../../../../../api'; -import { useMessageEvent } from '../../../../../hooks'; - -export interface BonusRareWidgetViewProps -{ } - -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); - - useMessageEvent(BonusRareInfoMessageEvent, event => - { - const parser = event.getParser(); - - setProductType(parser.productType); - setProductClassId(parser.productClassId); - setTotalCoinsForBonus(parser.totalCoinsForBonus); - setCoinsStillRequiredToBuy(parser.coinsStillRequiredToBuy); - }); - - useEffect(() => - { - SendMessageComposer(new GetBonusRareInfoMessageComposer()); - }, []); - - if(!productType) return null; - - return ( -
- { productType } -
-
{ (totalCoinsForBonus - coinsStillRequiredToBuy) + '/' + totalCoinsForBonus }
-
-
-
- ); -}; diff --git a/src/components/hotel-view/views/widgets/hall-of-fame-item/HallOfFameItemView.tsx b/src/components/hotel-view/views/widgets/hall-of-fame-item/HallOfFameItemView.tsx deleted file mode 100644 index 89c2f7c..0000000 --- a/src/components/hotel-view/views/widgets/hall-of-fame-item/HallOfFameItemView.tsx +++ /dev/null @@ -1,30 +0,0 @@ -import { HallOfFameEntryData } from '@nitrots/nitro-renderer'; -import { FC } from 'react'; -import { LocalizeFormattedNumber, LocalizeText } from '../../../../../api'; -import { LayoutAvatarImageView, UserProfileIconView } from '../../../../../common'; - -export interface HallOfFameItemViewProps -{ - data: HallOfFameEntryData; - level: number; - active?: boolean; -} - -export const HallOfFameItemView: FC = props => -{ - const { data = null, level = 0, active = false } = props; - - - - return ( -
-
-
- { level }. { data.userName } -
-
{ LocalizeText('landing.view.competition.hof.points', [ 'points' ], [ LocalizeFormattedNumber(data.currentScore).toString() ]) }
-
- -
- ); -}; diff --git a/src/components/hotel-view/views/widgets/hall-of-fame/HallOfFameWidgetView.tsx b/src/components/hotel-view/views/widgets/hall-of-fame/HallOfFameWidgetView.tsx deleted file mode 100644 index dc649e7..0000000 --- a/src/components/hotel-view/views/widgets/hall-of-fame/HallOfFameWidgetView.tsx +++ /dev/null @@ -1,37 +0,0 @@ -import { CommunityGoalHallOfFameData, CommunityGoalHallOfFameMessageEvent, GetCommunityGoalHallOfFameMessageComposer } from '@nitrots/nitro-renderer'; -import { FC, useEffect, useState } from 'react'; -import { SendMessageComposer } from '../../../../../api'; -import { useMessageEvent } from '../../../../../hooks'; -import { HallOfFameItemView } from '../hall-of-fame-item/HallOfFameItemView'; -import { HallOfFameWidgetViewProps } from './HallOfFameWidgetView.types'; - -export const HallOfFameWidgetView: FC = props => -{ - const { slot = -1, conf = null } = props; - const [ data, setData ] = useState(null); - - useMessageEvent(CommunityGoalHallOfFameMessageEvent, event => - { - const parser = event.getParser(); - - setData(parser.data); - }); - - useEffect(() => - { - const campaign: string = conf ? conf['campaign'] : ''; - SendMessageComposer(new GetCommunityGoalHallOfFameMessageComposer(campaign)); - }, [ conf ]); - - if(!data) return null; - - return ( -
- { data.hof && (data.hof.length > 0) && data.hof.map((entry, index) => - { - return ; - } - ) } -
- ); -}; diff --git a/src/components/hotel-view/views/widgets/hall-of-fame/HallOfFameWidgetView.types.ts b/src/components/hotel-view/views/widgets/hall-of-fame/HallOfFameWidgetView.types.ts deleted file mode 100644 index 0f165e2..0000000 --- a/src/components/hotel-view/views/widgets/hall-of-fame/HallOfFameWidgetView.types.ts +++ /dev/null @@ -1,5 +0,0 @@ -export interface HallOfFameWidgetViewProps -{ - slot: number; - conf: string; -} diff --git a/src/components/hotel-view/views/widgets/promo-article/PromoArticleWidgetView.tsx b/src/components/hotel-view/views/widgets/promo-article/PromoArticleWidgetView.tsx deleted file mode 100644 index 78c5975..0000000 --- a/src/components/hotel-view/views/widgets/promo-article/PromoArticleWidgetView.tsx +++ /dev/null @@ -1,46 +0,0 @@ -import { GetPromoArticlesComposer, PromoArticleData, PromoArticlesMessageEvent } from '@nitrots/nitro-renderer'; -import { FC, useEffect, useState } from 'react'; -import { LocalizeText, OpenUrl, SendMessageComposer } from '../../../../../api'; -import { useMessageEvent } from '../../../../../hooks'; - -export const PromoArticleWidgetView: FC<{}> = props => -{ - const [ articles, setArticles ] = useState(null); - const [ index, setIndex ] = useState(0); - - useMessageEvent(PromoArticlesMessageEvent, event => - { - const parser = event.getParser(); - setArticles(parser.articles); - }); - - useEffect(() => - { - SendMessageComposer(new GetPromoArticlesComposer()); - }, []); - - if(!articles) return null; - - return ( -
-
- { LocalizeText('landing.view.promo.article.header') } -
-
-
- { articles && (articles.length > 0) && articles.map((article, ind) => -
setIndex(ind) } /> - ) } -
- { articles && articles[index] && -
-
-
-

{ articles[index].title }

- { articles[index].bodyText } - -
-
} -
- ); -}; diff --git a/src/components/hotel-view/views/widgets/widget-container/WidgetContainerView.tsx b/src/components/hotel-view/views/widgets/widget-container/WidgetContainerView.tsx deleted file mode 100644 index 9206820..0000000 --- a/src/components/hotel-view/views/widgets/widget-container/WidgetContainerView.tsx +++ /dev/null @@ -1,39 +0,0 @@ -import { GetConfiguration } from '@nitrots/nitro-renderer'; -import { FC } from 'react'; -import { LocalizeText, OpenUrl } from '../../../../../api'; - -export interface WidgetContainerViewProps -{ - conf: any; -} - -export const WidgetContainerView: FC = props => -{ - const { conf = null } = props; - - const getOption = (key: string) => - { - const option = conf[key]; - - if(!option) return null; - - switch(key) - { - case 'image': - return GetConfiguration().interpolate(option); - } - - return option; - }; - - return ( -
-
-
-

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

- { LocalizeText(`landing.view.${ getOption('texts') }.body`) } - -
-
- ); -};