2021-05-05 00:47:36 +02:00
|
|
|
import { UserCreditsEvent, UserCurrencyComposer, UserCurrencyEvent, UserCurrencyUpdateEvent } from 'nitro-renderer';
|
2021-04-21 05:36:39 +02:00
|
|
|
import { useCallback, useEffect, useState } from 'react';
|
2021-04-15 19:29:48 +02:00
|
|
|
import { CreateMessageHook, SendMessageHook } from '../../hooks/messages/message-event';
|
2021-04-21 05:36:39 +02:00
|
|
|
import { TransitionAnimation } from '../../transitions/TransitionAnimation';
|
|
|
|
import { TransitionAnimationTypes } from '../../transitions/TransitionAnimation.types';
|
2021-05-05 00:47:36 +02:00
|
|
|
import { GetConfiguration } from '../../utils/GetConfiguration';
|
2021-04-21 05:36:39 +02:00
|
|
|
import { CurrencySet } from './currency/CurrencySet';
|
2021-04-15 19:29:48 +02:00
|
|
|
import { CurrencyView } from './currency/CurrencyView';
|
|
|
|
import { PurseViewProps } from './PurseView.types';
|
|
|
|
|
|
|
|
export function PurseView(props: PurseViewProps): JSX.Element
|
|
|
|
{
|
2021-04-21 05:36:39 +02:00
|
|
|
const [ currencies, setCurrencies ] = useState<CurrencySet[]>([ new CurrencySet(-1, 0) ]);
|
2021-04-15 19:29:48 +02:00
|
|
|
const [ isReady, setIsReady ] = useState(false);
|
|
|
|
|
2021-05-05 00:47:36 +02:00
|
|
|
const displayedCurrencies = GetConfiguration<number[]>('system.currency.types', []);
|
2021-04-21 05:36:39 +02:00
|
|
|
|
|
|
|
const onUserCreditsEvent = useCallback((event: UserCreditsEvent) =>
|
2021-04-15 19:29:48 +02:00
|
|
|
{
|
|
|
|
const parser = event.getParser();
|
|
|
|
|
2021-04-21 05:36:39 +02:00
|
|
|
updateCurrency(-1, parseFloat(parser.credits));
|
|
|
|
}, []);
|
2021-04-15 19:29:48 +02:00
|
|
|
|
2021-04-21 05:36:39 +02:00
|
|
|
const onUserCurrencyEvent = useCallback((event: UserCurrencyEvent) =>
|
2021-04-15 19:29:48 +02:00
|
|
|
{
|
|
|
|
const parser = event.getParser();
|
|
|
|
|
2021-04-21 05:36:39 +02:00
|
|
|
for(const [ key, value ] of parser.currencies.entries()) updateCurrency(key, value);
|
2021-04-15 19:29:48 +02:00
|
|
|
|
|
|
|
setIsReady(true);
|
2021-04-21 05:36:39 +02:00
|
|
|
}, []);
|
2021-04-15 19:29:48 +02:00
|
|
|
|
2021-04-21 05:36:39 +02:00
|
|
|
const onUserCurrencyUpdateEvent = useCallback((event: UserCurrencyUpdateEvent) =>
|
2021-04-15 19:29:48 +02:00
|
|
|
{
|
|
|
|
const parser = event.getParser();
|
|
|
|
|
2021-04-21 05:36:39 +02:00
|
|
|
updateCurrency(parser.type, parser.amount)
|
|
|
|
}, []);
|
|
|
|
|
|
|
|
function updateCurrency(type: number, amount: number): void
|
|
|
|
{
|
|
|
|
setCurrencies(oldState =>
|
|
|
|
{
|
|
|
|
const newState: CurrencySet[] = [];
|
|
|
|
|
|
|
|
let found = false;
|
|
|
|
|
|
|
|
for(const set of oldState)
|
|
|
|
{
|
|
|
|
if(set.type !== type)
|
|
|
|
{
|
|
|
|
newState.push(set);
|
|
|
|
|
|
|
|
continue;
|
|
|
|
}
|
|
|
|
|
|
|
|
newState.push(new CurrencySet(set.type, amount));
|
|
|
|
|
|
|
|
found = true;
|
|
|
|
}
|
|
|
|
|
|
|
|
if(!found) newState.push(new CurrencySet(type, amount));
|
|
|
|
|
|
|
|
return newState;
|
|
|
|
});
|
|
|
|
}
|
2021-04-15 19:29:48 +02:00
|
|
|
|
2021-04-22 04:06:02 +02:00
|
|
|
CreateMessageHook(UserCreditsEvent, onUserCreditsEvent);
|
|
|
|
CreateMessageHook(UserCurrencyEvent, onUserCurrencyEvent);
|
|
|
|
CreateMessageHook(UserCurrencyUpdateEvent, onUserCurrencyUpdateEvent);
|
2021-04-15 19:29:48 +02:00
|
|
|
|
|
|
|
useEffect(() =>
|
|
|
|
{
|
|
|
|
SendMessageHook(new UserCurrencyComposer());
|
|
|
|
}, []);
|
|
|
|
|
|
|
|
return (
|
2021-04-21 05:36:39 +02:00
|
|
|
<TransitionAnimation className="nitro-purse position-relative mb-1" type={ TransitionAnimationTypes.FADE_DOWN } inProp={ isReady } timeout={ 300 }>
|
2021-05-05 00:47:36 +02:00
|
|
|
<div className="row row-cols-2 g-0">
|
2021-04-21 05:36:39 +02:00
|
|
|
{ currencies && currencies.map((set, index) =>
|
|
|
|
{
|
|
|
|
if(displayedCurrencies.indexOf(set.type) === -1) return null;
|
|
|
|
|
|
|
|
return <CurrencyView key={ index } currencySet={ set } />
|
|
|
|
}) }
|
2021-04-15 19:29:48 +02:00
|
|
|
</div>
|
2021-04-21 05:36:39 +02:00
|
|
|
</TransitionAnimation>
|
2021-04-15 19:29:48 +02:00
|
|
|
);
|
|
|
|
}
|