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

Update hotel view widgets

Browse Source
This commit is contained in:
Bill 2021-08-15 02:56:33 -04:00
parent 56961a448c
commit 69ef7412cf
10 changed files with 88 additions and 64 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/views/hotel-view/views/widgets/bonus-rare/BonusRareWidgetView.scss
View File

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

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

@ -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<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);
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();
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 (
<div className="bonus-rare widget d-flex">
{productType}
<div className="bg-light-dark rounded overflow-hidden position-relative bonus-bar-container">
<div className="d-flex justify-content-center align-items-center w-100 h-100 position-absolute small top-0">{(totalCoinsForBonus - coinsStillRequiredToBuy) + '/' + totalCoinsForBonus}</div>
<div className="small bg-info rounded position-absolute top-0 h-100" style={{ width: ((totalCoinsForBonus - coinsStillRequiredToBuy) / totalCoinsForBonus) * 100 + '%' }}></div>
</div>
</div>
);
if(!productType) return null;
return (
<div className="bonus-rare widget d-flex">
{ productType }
<div className="bg-light-dark rounded overflow-hidden position-relative bonus-bar-container">
<div className="d-flex justify-content-center align-items-center w-100 h-100 position-absolute small top-0">{(totalCoinsForBonus - coinsStillRequiredToBuy) + '/' + totalCoinsForBonus}</div>
<div className="small bg-info rounded position-absolute top-0 h-100" style={{ width: ((totalCoinsForBonus - coinsStillRequiredToBuy) / totalCoinsForBonus) * 100 + '%' }}></div>
</div>
</div>
);
}

21
src/views/hotel-view/views/widgets/hall-of-fame-item/HallOfFameItemView.tsx Normal file
View File

@ -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<HallOfFameItemViewProps> = props =>
{
const { data = null, level = 0 } = props;
return (
<div className="hof-user-container cursor-pointer">
<div className="hof-tooltip">
<div className="hof-tooltip-content">
<div className="fw-bold">{ level }. { data.userName }</div>
<div className="muted fst-italic small text-center">{ LocalizeText('landing.view.competition.hof.points', [ 'points' ], [ data.currentScore.toString() ])}</div>
</div>
</div>
<AvatarImageView figure={ data.figure } direction={ 2 } />
</div>
);
}

7
src/views/hotel-view/views/widgets/hall-of-fame-item/HallOfFameItemView.types.ts Normal file
View File

@ -0,0 +1,7 @@
import { HallOfFameEntryData } from '@nitrots/nitro-renderer';
export interface HallOfFameItemViewProps
{
data: HallOfFameEntryData;
level: number;
}

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

@ -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<HallOfFameWidgetViewProps> = props =>
{
const [data, setData] = useState<CommunityGoalHallOfFameData>(null);
useEffect(() =>
{
SendMessageHook(new GetCommunityGoalHallOfFameMessageComposer(props.conf));
}, [props.conf]);
const { slot = -1, conf = '' } = props;
const [ data, setData ] = useState<CommunityGoalHallOfFameData>(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 (
<div className="hall-of-fame widget">
{data.hof && (data.hof.length > 0) && data.hof.map((entry, ind) =>
<div className="hof-user-container cursor-pointer">
<div className="hof-tooltip">
<div className="hof-tooltip-content">
<div className="fw-bold">{ind + 1}. { entry.userName }</div>
<div className="muted fst-italic small text-center">{LocalizeText('landing.view.competition.hof.points', ['points'], [entry.currentScore.toString()])}</div>
</div>
</div>
<AvatarImageView figure={entry.figure} direction={2} key={ind} />
</div>
{ data.hof && (data.hof.length > 0) && data.hof.map((entry, index) =>
{
return <HallOfFameItemView data={ entry } level={ (index + 1) } />;
}
)}
</div>
);

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

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

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

@ -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<PromoArticleWidgetViewProps> = props =>
setIndex(selectedIndex);
};
useEffect(() =>
{
SendMessageHook(new GetPromoArticlesComposer());
}, []);
const onPromoArticlesMessageEvent = useCallback((event: PromoArticlesMessageEvent) =>
{
const parser = event.getParser();
@ -27,6 +22,11 @@ export const PromoArticleWidgetView: FC<PromoArticleWidgetViewProps> = props =>
CreateMessageHook(PromoArticlesMessageEvent, onPromoArticlesMessageEvent);
useEffect(() =>
{
SendMessageHook(new GetPromoArticlesComposer());
}, []);
if (!articles) return null;
return (

0
src/views/hotel-view/views/widgets/widgetcontainer/WidgetContainerView.scss → src/views/hotel-view/views/widgets/widget-container/WidgetContainerView.scss
View File

2
src/views/hotel-view/views/widgets/widgetcontainer/WIdgetContainerView.tsx → src/views/hotel-view/views/widgets/widget-container/WidgetContainerView.tsx
View File

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

0
src/views/hotel-view/views/widgets/widgetcontainer/WidgetContainerView.types.ts → src/views/hotel-view/views/widgets/widget-container/WidgetContainerView.types.ts
View File