2021-07-24 10:03:46 +02:00
|
|
|
import { FriendlyTime, HabboClubLevelEnum, UserCurrencyComposer, UserSubscriptionComposer } from 'nitro-renderer';
|
|
|
|
import { FC, useCallback, useEffect, useMemo, useState } from 'react';
|
2021-06-23 10:05:23 +02:00
|
|
|
import { GetConfiguration } from '../../api';
|
2021-05-07 09:50:20 +02:00
|
|
|
import { SendMessageHook } from '../../hooks/messages/message-event';
|
2021-07-23 09:12:53 +02:00
|
|
|
import { LocalizeText } from '../../utils/LocalizeText';
|
|
|
|
import { CurrencyIcon } from '../shared/currency-icon/CurrencyIcon';
|
2021-07-24 10:03:46 +02:00
|
|
|
import { IPurse } from './common/IPurse';
|
|
|
|
import { Purse } from './common/Purse';
|
2021-05-07 09:50:20 +02:00
|
|
|
import { PurseContextProvider } from './context/PurseContext';
|
|
|
|
import { PurseMessageHandler } from './PurseMessageHandler';
|
2021-07-24 10:03:46 +02:00
|
|
|
import { CurrencyView } from './views/currency/CurrencyView';
|
|
|
|
import { SeasonalView } from './views/seasonal/SeasonalView';
|
2021-04-15 19:29:48 +02:00
|
|
|
|
2021-07-24 10:03:46 +02:00
|
|
|
export let GLOBAL_PURSE: IPurse = null;
|
|
|
|
|
|
|
|
export const PurseView: FC<{}> = props =>
|
2021-04-15 19:29:48 +02:00
|
|
|
{
|
2021-07-24 10:03:46 +02:00
|
|
|
const [ purse, setPurse ] = useState<IPurse>(new Purse());
|
|
|
|
const [ updateId, setUpdateId ] = useState(-1);
|
2021-05-07 09:50:20 +02:00
|
|
|
|
|
|
|
const displayedCurrencies = useMemo(() =>
|
2021-04-15 19:29:48 +02:00
|
|
|
{
|
2021-05-07 09:50:20 +02:00
|
|
|
return GetConfiguration<number[]>('system.currency.types', []);
|
2021-04-21 05:36:39 +02:00
|
|
|
}, []);
|
|
|
|
|
2021-07-24 10:03:46 +02:00
|
|
|
const getCurrencyElements = useCallback((offset: number, limit: number = -1, seasonal: boolean = false) =>
|
|
|
|
{
|
|
|
|
if(!purse.activityPoints.size) return null;
|
|
|
|
|
|
|
|
const types = Array.from(purse.activityPoints.keys()).filter(type => (displayedCurrencies.indexOf(type) >= 0));
|
|
|
|
|
|
|
|
let count = 0;
|
|
|
|
|
|
|
|
while(count < offset)
|
|
|
|
{
|
|
|
|
types.shift();
|
|
|
|
|
|
|
|
count++;
|
|
|
|
}
|
|
|
|
|
|
|
|
count = 0;
|
|
|
|
|
|
|
|
const elements: JSX.Element[] = [];
|
|
|
|
|
|
|
|
for(const type of types)
|
|
|
|
{
|
|
|
|
if((limit > -1) && (count === limit)) break;
|
|
|
|
|
|
|
|
if(seasonal) elements.push(<SeasonalView key={ type } type={ type } amount={ purse.activityPoints.get(type) } />);
|
|
|
|
else elements.push(<CurrencyView key={ type } type={ type } amount={ purse.activityPoints.get(type) } />);
|
|
|
|
|
|
|
|
count++;
|
|
|
|
}
|
|
|
|
|
|
|
|
return elements;
|
|
|
|
}, [ purse, displayedCurrencies ]);
|
|
|
|
|
|
|
|
const getClubText = useCallback(() =>
|
|
|
|
{
|
|
|
|
const totalDays = ((purse.clubPeriods * 31) + purse.clubDays);
|
|
|
|
const minutesUntilExpiration = purse.minutesUntilExpiration;
|
|
|
|
|
|
|
|
if(purse.clubLevel === HabboClubLevelEnum.NO_CLUB)
|
|
|
|
{
|
|
|
|
return LocalizeText('purse.clubdays.zero.amount.text');
|
|
|
|
}
|
|
|
|
|
|
|
|
else if((minutesUntilExpiration > -1) && (minutesUntilExpiration < (60 * 24)))
|
|
|
|
{
|
|
|
|
return FriendlyTime.shortFormat(minutesUntilExpiration * 60);
|
|
|
|
}
|
|
|
|
|
|
|
|
else
|
|
|
|
{
|
|
|
|
return FriendlyTime.shortFormat(totalDays * 86400);
|
|
|
|
}
|
|
|
|
}, [ purse ]);
|
|
|
|
|
2021-04-15 19:29:48 +02:00
|
|
|
useEffect(() =>
|
|
|
|
{
|
2021-07-24 10:03:46 +02:00
|
|
|
const purse = new Purse();
|
|
|
|
|
|
|
|
GLOBAL_PURSE = purse;
|
|
|
|
|
|
|
|
purse.notifier = () => setUpdateId(prevValue => (prevValue + 1));
|
|
|
|
|
|
|
|
setPurse(purse);
|
|
|
|
|
|
|
|
return () => (purse.notifier = null);
|
2021-04-15 19:29:48 +02:00
|
|
|
}, []);
|
|
|
|
|
2021-07-24 10:03:46 +02:00
|
|
|
useEffect(() =>
|
|
|
|
{
|
|
|
|
if(!purse) return;
|
|
|
|
|
|
|
|
SendMessageHook(new UserCurrencyComposer());
|
|
|
|
}, [ purse ]);
|
2021-05-10 19:11:16 +02:00
|
|
|
|
2021-07-24 10:03:46 +02:00
|
|
|
useEffect(() =>
|
2021-06-22 11:52:47 +02:00
|
|
|
{
|
2021-07-24 10:03:46 +02:00
|
|
|
SendMessageHook(new UserSubscriptionComposer('habbo_club'));
|
|
|
|
|
|
|
|
const interval = setInterval(() =>
|
|
|
|
{
|
|
|
|
SendMessageHook(new UserSubscriptionComposer('habbo_club'));
|
|
|
|
}, 50000);
|
|
|
|
|
|
|
|
return () => clearInterval(interval);
|
|
|
|
}, [ purse ]);
|
|
|
|
|
|
|
|
if(!purse) return null;
|
2021-06-22 11:52:47 +02:00
|
|
|
|
2021-04-15 19:29:48 +02:00
|
|
|
return (
|
2021-07-24 10:03:46 +02:00
|
|
|
<PurseContextProvider value={ { purse } }>
|
2021-05-07 09:50:20 +02:00
|
|
|
<PurseMessageHandler />
|
2021-07-07 04:26:22 +02:00
|
|
|
<div className="nitro-purse rounded-bottom d-flex flex-row justify-content-between">
|
2021-07-23 09:12:53 +02:00
|
|
|
<div className="row mx-0 w-100">
|
|
|
|
<div className="col-6 px-0">
|
|
|
|
<div className="d-flex flex-column nitro-currencies">
|
2021-07-24 10:03:46 +02:00
|
|
|
<CurrencyView type={ -1 } amount={ purse.credits } />
|
|
|
|
{ getCurrencyElements(0, 2) }
|
2021-07-23 09:12:53 +02:00
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div className="col-4 px-0">
|
|
|
|
<div className="nitro-purse-hc p-1 d-flex flex-column justify-content-center align-items-center h-100">
|
|
|
|
<CurrencyIcon className="flex-shrink-0" type="hc" />
|
2021-07-24 10:03:46 +02:00
|
|
|
<span>{ getClubText() }</span>
|
2021-07-23 09:12:53 +02:00
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div className="col-2 px-0">
|
|
|
|
<div className="d-flex flex-column nitro-purse-buttons h-100 justify-content-center">
|
|
|
|
<div className="nitro-purse-button text-white h-100 text-center d-flex align-items-center justify-content-center"><i className="fas fa-life-ring"/></div>
|
|
|
|
<div className="nitro-purse-button text-white h-100 text-center d-flex align-items-center justify-content-center"><i className="fas fa-cogs"/></div>
|
|
|
|
</div>
|
|
|
|
</div>
|
2021-07-07 04:26:22 +02:00
|
|
|
</div>
|
|
|
|
{/*<div className="notification-button px-2" onClick={toggleNotificationCenter}>
|
2021-06-22 11:52:47 +02:00
|
|
|
<i className="fas fa-bars" />
|
2021-07-07 04:26:22 +02:00
|
|
|
</div>*/}
|
2021-04-15 19:29:48 +02:00
|
|
|
</div>
|
2021-07-24 10:03:46 +02:00
|
|
|
{ getCurrencyElements(2, -1, true) }
|
2021-05-07 09:50:20 +02:00
|
|
|
</PurseContextProvider>
|
2021-04-15 19:29:48 +02:00
|
|
|
);
|
|
|
|
}
|