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

started bonus rare widget

Browse Source
This commit is contained in:
Dank074 2021-07-24 19:52:54 -05:00
parent 789aa3c183
commit 9594843e2e
3 changed files with 22 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -130,3 +130,4 @@
}
@import './views/widgets/promo-article/PromoArticleWidgetView.scss';
@import './views/widgets/bonus-rare/BonusRareWidgetView.scss';

10
src/views/hotel-view/views/widgets/bonus-rare/BonusRareWidgetView.scss Normal file
View File

@ -0,0 +1,10 @@
.bonus-rare {
height: 100px;
justify-content: center;
.bonus-bar-container {
height: 30px;
width: 300px;
border: 2px ridge #e2e2e2;
}
}

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

@ -26,7 +26,15 @@ export const BonusRareWidgetView: FC<BonusRareWidgetViewProps> = props =>
CreateMessageHook(BonusRareInfoMessageEvent, onBonusRareInfoMessageEvent);
if(!productType) return (null);
return (<div className="bonus-rare widget">{productType}</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>
);
}