nitro/nitro-react
1
0
Fork 0
mirror of https://github.com/billsonnn/nitro-react.git synced 2024-11-23 14:40:50 +01:00
Code Issues Packages Projects Releases Wiki Activity

added widget slots

Browse Source
This commit is contained in:
Dank074 2021-07-23 18:22:07 -05:00
parent 374c90cef0
commit 789aa3c183
12 changed files with 138 additions and 65 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
src/views/hotel-view/HotelView.scss
View File

@ -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;
}
}

29
src/views/hotel-view/HotelView.tsx
View File

@ -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,7 +26,7 @@ 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']);
@ -37,15 +37,20 @@ export const HotelView: FC<HotelViewProps> = props =>
const right = Nitro.instance.core.configuration.interpolate(GetConfiguration('hotelview')['images']['right']);
return (
<div className="nitro-hotel-view" style={ (backgroundColor && backgroundColor) ? { background: backgroundColor } : {} }>
{Array.from(Array(widgetSlotCount)).map((x, index) => <WidgetSlotView slot={index}
widgetType={GetConfiguration('hotelview')['widgets']['slot.' + index]} />)}
<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 className="nitro-hotel-view" style={(backgroundColor && backgroundColor) ? { background: backgroundColor } : {}}>
{Array.from(Array(widgetSlotCount)).map((x, index) =>
<WidgetSlotView
slot={index + 1}
widgetType={GetConfiguration('hotelview')['widgets']['slot.' + (index + 1) + '.widget']}
widgetConf={GetConfiguration('hotelview')['widgets']['slot.' + (index + 1) +'.conf']}
key={index.toString()}
/>)}
<div className="background position-absolute" style={(background && background.length) ? { backgroundImage: `url(${background})` } : {}} />
<div className="sun position-absolute" style={(sun && sun.length) ? { backgroundImage: `url(${sun})` } : {}} />
<div className="drape position-absolute" style={(drape && drape.length) ? { backgroundImage: `url(${drape})` } : {}} />
<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>
);
}

2
src/views/hotel-view/views/widget-slot/WidgetSlotView.tsx
View File

@ -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>
);
}

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

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

13
src/views/hotel-view/views/widgets/GetWidgetLayout.tsx
View File

@ -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":
return <PromoArticleWidgetView/>;
case "hof":
return <HallOfFameWidgetView/>;
case "promoarticle":
return <PromoArticleWidgetView />;
case "achievementcompetition_hall_of_fame":
return <HallOfFameWidgetView slot={props.slot} conf={props.widgetConf} />;
case "bonusrare":
return <BonusRareWidgetView />;
default:
return null;
}

2
src/views/hotel-view/views/widgets/GetWidgetLayout.types.ts
View File

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

32
src/views/hotel-view/views/widgets/bonus-rare/BonusRareWidgetView.tsx Normal file
View File

@ -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>);
}

2
src/views/hotel-view/views/widgets/bonus-rare/BonusRareWidgetView.types.ts Normal file
View File

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

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

@ -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>
);
}

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

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

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

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

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

@ -6,7 +6,7 @@ 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) =>
@ -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 =>
<Carousel.Item>
{articles && (articles.length > 0) && articles.map(article =>
<Carousel.Item key={article.id.toString()}>
<img
className="d-block"
src= {article.imageUrl}
alt= {article.title}
src={article.imageUrl}
alt={article.title}
/>
<Carousel.Caption>
<h3>{article.title}</h3>
<p>{article.bodyText}</p>
</Carousel.Caption>
</Carousel.Item>
) }
)}
</Carousel>
</div>
);