mirror of
https://github.com/duckietm/Nitro-V3.git
synced 2026-06-19 15:06:20 +00:00
refactor(purse): consolidate into a single PurseView
Inline the modern purse markup directly into PurseView and delete the unused PurseClassicView / PurseModernView components (+ dead PurseClassicView.css). PurseView is now the single purse component.
This commit is contained in:
simoleo89
@@ -1,165 +0,0 @@
|
|||||||
import { CreateLinkEvent, HabboClubLevelEnum } from '@nitrots/nitro-renderer';
|
|
||||||
import { FC, useCallback, useEffect, useMemo, useState } from 'react';
|
|
||||||
import { FaChevronDown, FaLanguage, FaQuestionCircle, FaSignOutAlt } from 'react-icons/fa';
|
|
||||||
import { ClearRememberLogin, FriendlyTime, GetConfigurationValue, GetRememberLogin, LocalizeText } from '../../api';
|
|
||||||
import { Column, Flex, LayoutCurrencyIcon, Text } from '../../common';
|
|
||||||
import { usePurse } from '../../hooks';
|
|
||||||
import purseIcon from '../../assets/images/rightside/purse.gif';
|
|
||||||
import { CurrencyView } from './views/CurrencyView';
|
|
||||||
import { SeasonalView } from './views/SeasonalView';
|
|
||||||
|
|
||||||
export const PurseClassicView: FC<{}> = props =>
|
|
||||||
{
|
|
||||||
const { purse = null, hcDisabled = false } = usePurse();
|
|
||||||
const [ isOpen, setIsOpen ] = useState(true);
|
|
||||||
const [ isCompact, setIsCompact ] = useState(false);
|
|
||||||
|
|
||||||
const displayedCurrencies = useMemo(() => GetConfigurationValue<number[]>('system.currency.types', []), []);
|
|
||||||
const currencyDisplayNumberShort = useMemo(() => GetConfigurationValue<boolean>('currency.display.number.short', false), []);
|
|
||||||
|
|
||||||
const getClubText = (() =>
|
|
||||||
{
|
|
||||||
if (!purse) return null;
|
|
||||||
|
|
||||||
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);
|
|
||||||
})();
|
|
||||||
|
|
||||||
const currencyTypes = useMemo(() =>
|
|
||||||
{
|
|
||||||
if (!purse || !purse.activityPoints || !purse.activityPoints.size) return [];
|
|
||||||
|
|
||||||
const types = Array.from(purse.activityPoints.keys()).filter(type => (displayedCurrencies.indexOf(type) >= 0));
|
|
||||||
types.sort((a, b) =>
|
|
||||||
{
|
|
||||||
if (a === 0) return -1;
|
|
||||||
if (b === 0) return 1;
|
|
||||||
if (a === 5) return -1;
|
|
||||||
if (b === 5) return 1;
|
|
||||||
return a - b;
|
|
||||||
});
|
|
||||||
|
|
||||||
return types;
|
|
||||||
}, [ displayedCurrencies, purse ]);
|
|
||||||
|
|
||||||
const primaryCurrencies = currencyTypes.slice(0, 2);
|
|
||||||
const seasonalCurrencies = currencyTypes.slice(2);
|
|
||||||
|
|
||||||
useEffect(() =>
|
|
||||||
{
|
|
||||||
if(isOpen)
|
|
||||||
{
|
|
||||||
setIsCompact(false);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
const timeout = window.setTimeout(() => setIsCompact(true), 220);
|
|
||||||
|
|
||||||
return () => window.clearTimeout(timeout);
|
|
||||||
}, [ isOpen ]);
|
|
||||||
|
|
||||||
const handleLogout = useCallback(async (event: React.MouseEvent) =>
|
|
||||||
{
|
|
||||||
event.stopPropagation();
|
|
||||||
|
|
||||||
const logoutUrl = GetConfigurationValue<string>('login.logout.endpoint', '/api/auth/logout');
|
|
||||||
const ssoTicket = (window.NitroConfig?.['sso.ticket'] as string) ?? '';
|
|
||||||
const rememberToken = GetRememberLogin()?.token || '';
|
|
||||||
|
|
||||||
try
|
|
||||||
{
|
|
||||||
await fetch(logoutUrl, {
|
|
||||||
method: 'POST',
|
|
||||||
credentials: 'include',
|
|
||||||
keepalive: true,
|
|
||||||
headers: {
|
|
||||||
'Content-Type': 'application/json',
|
|
||||||
'Accept': 'application/json',
|
|
||||||
'X-Requested-With': 'NitroPurseLogout'
|
|
||||||
},
|
|
||||||
body: JSON.stringify({ ssoTicket, rememberToken })
|
|
||||||
});
|
|
||||||
}
|
|
||||||
catch
|
|
||||||
{ /* best-effort — proceed with local logout regardless */ }
|
|
||||||
|
|
||||||
ClearRememberLogin();
|
|
||||||
if(window.NitroConfig) window.NitroConfig['sso.ticket'] = '';
|
|
||||||
window.location.reload();
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
if (!purse) return null;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Column alignItems="end" className="nitro-purse-container" gap={ 0 }>
|
|
||||||
<div className="nitro-purse-classic">
|
|
||||||
<div className={ `nitro-purse-shell ${ isCompact ? 'is-closed' : '' }` }>
|
|
||||||
<div className={ `nitro-purse ${ isCompact ? 'is-closed' : '' }` }>
|
|
||||||
<div className={ `nitro-purse__header ${ isCompact ? 'is-closed' : '' }` } onClick={ () => setIsOpen(value => !value) }>
|
|
||||||
<Flex alignItems="center" gap={ 1 } className={ isCompact ? 'nitro-purse__header-main is-closed' : 'nitro-purse__header-main' }>
|
|
||||||
<div className="nitro-purse__header-icon">
|
|
||||||
<img src={ purseIcon } alt="" className="nitro-purse__header-image" />
|
|
||||||
</div>
|
|
||||||
</Flex>
|
|
||||||
<div className={ `nitro-purse__header-toggle ${ isOpen ? 'is-open' : '' }` }>
|
|
||||||
<FaChevronDown className="fa-icon text-[10px]" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className={ `nitro-purse__content ${ isOpen ? 'is-open' : 'is-closed' }` }>
|
|
||||||
<div className={ `nitro-purse__summary nitro-purse__summary--compact ${ hcDisabled ? 'is-no-hc' : '' }` }>
|
|
||||||
<div className="nitro-purse__primary">
|
|
||||||
<CurrencyView type={ -1 } amount={ purse.credits } short={ currencyDisplayNumberShort } />
|
|
||||||
{ primaryCurrencies.map(type => <CurrencyView key={ type } type={ type } amount={ purse.activityPoints.get(type) || 0 } short={ currencyDisplayNumberShort } />) }
|
|
||||||
</div>
|
|
||||||
{ !hcDisabled &&
|
|
||||||
<div className="nitro-purse-subscription" onClick={ event =>
|
|
||||||
{
|
|
||||||
event.stopPropagation(); CreateLinkEvent('catalog/open/' + GetConfigurationValue<Record<string, string>>('catalog.links')?.['hc.buy_hc']);
|
|
||||||
} }>
|
|
||||||
<div className="nitro-purse-subscription__icon">
|
|
||||||
<LayoutCurrencyIcon type="hc" />
|
|
||||||
</div>
|
|
||||||
<div className="nitro-purse-subscription__copy">
|
|
||||||
<Text variant="white" className="nitro-purse-subscription__label">HC</Text>
|
|
||||||
<Text variant="white" className="nitro-purse-subscription__value">{ getClubText }</Text>
|
|
||||||
</div>
|
|
||||||
</div> }
|
|
||||||
<div className="nitro-purse__actions">
|
|
||||||
<button type="button" className="nitro-purse__action-button nitro-purse__action-button--translate" onClick={ event =>
|
|
||||||
{
|
|
||||||
event.stopPropagation(); CreateLinkEvent('translation-settings/toggle');
|
|
||||||
} } title="Google Translate">
|
|
||||||
<FaLanguage />
|
|
||||||
</button>
|
|
||||||
<button type="button" className="nitro-purse__action-button nitro-purse__action-button--help" onClick={ event =>
|
|
||||||
{
|
|
||||||
event.stopPropagation(); CreateLinkEvent('help/show');
|
|
||||||
} } title={ LocalizeText('help.button.name') }>
|
|
||||||
<FaQuestionCircle />
|
|
||||||
</button>
|
|
||||||
<button type="button" className="nitro-purse__action-button nitro-purse__action-button--settings" onClick={ event =>
|
|
||||||
{
|
|
||||||
event.stopPropagation(); CreateLinkEvent('user-settings/toggle');
|
|
||||||
} } title={ LocalizeText('widget.memenu.settings.title') }>
|
|
||||||
<i className="nitro-icon icon-cog" />
|
|
||||||
</button>
|
|
||||||
<button type="button" className="nitro-purse__action-button nitro-purse__action-button--logout" onClick={ handleLogout } title="Log out">
|
|
||||||
<FaSignOutAlt />
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
{ seasonalCurrencies.length > 0 &&
|
|
||||||
<div className="nitro-purse__other nitro-purse__other--classic">
|
|
||||||
{ seasonalCurrencies.map(type => <SeasonalView key={ type } type={ type } amount={ purse.activityPoints.get(type) || 0 } />) }
|
|
||||||
</div> }
|
|
||||||
</Column>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
@@ -1,139 +0,0 @@
|
|||||||
import { CreateLinkEvent } from '@nitrots/nitro-renderer';
|
|
||||||
import { FC, useCallback, useMemo } from 'react';
|
|
||||||
import { FaChartBar, FaCog, FaSignOutAlt } from 'react-icons/fa';
|
|
||||||
import { ClearRememberLogin, GetConfigurationValue, GetRememberLogin, LocalizeText } from '../../api';
|
|
||||||
import { Column, LayoutCurrencyIcon } from '../../common';
|
|
||||||
import { usePurse } from '../../hooks';
|
|
||||||
import { CurrencyView } from './views/CurrencyView';
|
|
||||||
import { SeasonalView } from './views/SeasonalView';
|
|
||||||
|
|
||||||
const localizeWithFallback = (key: string, fallback: string) =>
|
|
||||||
{
|
|
||||||
const text = LocalizeText(key);
|
|
||||||
return (text && text !== key) ? text : fallback;
|
|
||||||
};
|
|
||||||
|
|
||||||
export const PurseModernView: FC<{}> = props =>
|
|
||||||
{
|
|
||||||
const { purse = null, hcDisabled = false } = usePurse();
|
|
||||||
|
|
||||||
const displayedCurrencies = useMemo(() => GetConfigurationValue<number[]>('system.currency.types', []), []);
|
|
||||||
const currencyDisplayNumberShort = useMemo(() => GetConfigurationValue<boolean>('currency.display.number.short', false), []);
|
|
||||||
|
|
||||||
const currencyTypes = useMemo(() =>
|
|
||||||
{
|
|
||||||
if (!purse || !purse.activityPoints || !purse.activityPoints.size) return [];
|
|
||||||
|
|
||||||
const types = Array.from(purse.activityPoints.keys()).filter(type => (displayedCurrencies.indexOf(type) >= 0));
|
|
||||||
types.sort((a, b) =>
|
|
||||||
{
|
|
||||||
if (a === 0) return -1;
|
|
||||||
if (b === 0) return 1;
|
|
||||||
if (a === 5) return -1;
|
|
||||||
if (b === 5) return 1;
|
|
||||||
return a - b;
|
|
||||||
});
|
|
||||||
|
|
||||||
return types;
|
|
||||||
}, [ displayedCurrencies, purse ]);
|
|
||||||
|
|
||||||
const hasDiamonds = currencyTypes.indexOf(5) >= 0;
|
|
||||||
const hasDuckets = currencyTypes.indexOf(0) >= 0;
|
|
||||||
const otherCurrencies = currencyTypes.filter(type => (type !== 0 && type !== 5));
|
|
||||||
|
|
||||||
const joinLabel = useMemo(() => localizeWithFallback('purse.join', 'Join'), []);
|
|
||||||
const earningsLabel = useMemo(() => localizeWithFallback('earnings.title', 'Earnings'), []);
|
|
||||||
const helpLabel = useMemo(() => localizeWithFallback('help.button.name', 'Help'), []);
|
|
||||||
|
|
||||||
const openClub = useCallback((event: React.MouseEvent) =>
|
|
||||||
{
|
|
||||||
event.stopPropagation();
|
|
||||||
|
|
||||||
const page = GetConfigurationValue<string>('hc.buy_hc', 'habbo_club');
|
|
||||||
CreateLinkEvent('catalog/open/' + page);
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
const openEarnings = useCallback((event: React.MouseEvent) =>
|
|
||||||
{
|
|
||||||
event.stopPropagation();
|
|
||||||
CreateLinkEvent('habboUI/open/vault');
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
const handleLogout = useCallback(async (event: React.MouseEvent) =>
|
|
||||||
{
|
|
||||||
event.stopPropagation();
|
|
||||||
|
|
||||||
const logoutUrl = GetConfigurationValue<string>('login.logout.endpoint', '/api/auth/logout');
|
|
||||||
const ssoTicket = (window.NitroConfig?.['sso.ticket'] as string) ?? '';
|
|
||||||
const rememberToken = GetRememberLogin()?.token || '';
|
|
||||||
|
|
||||||
try
|
|
||||||
{
|
|
||||||
await fetch(logoutUrl, {
|
|
||||||
method: 'POST',
|
|
||||||
credentials: 'include',
|
|
||||||
keepalive: true,
|
|
||||||
headers: {
|
|
||||||
'Content-Type': 'application/json',
|
|
||||||
'Accept': 'application/json',
|
|
||||||
'X-Requested-With': 'NitroPurseLogout'
|
|
||||||
},
|
|
||||||
body: JSON.stringify({ ssoTicket, rememberToken })
|
|
||||||
});
|
|
||||||
}
|
|
||||||
catch
|
|
||||||
{ /* best-effort — proceed with local logout regardless */ }
|
|
||||||
|
|
||||||
ClearRememberLogin();
|
|
||||||
if(window.NitroConfig) window.NitroConfig['sso.ticket'] = '';
|
|
||||||
window.location.reload();
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
if (!purse) return null;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Column alignItems="end" className="nitro-purse-container" gap={ 0 }>
|
|
||||||
<div className="nitro-purse">
|
|
||||||
<div className="nitro-purse__body">
|
|
||||||
<div className="nitro-purse__currencies">
|
|
||||||
{ hasDiamonds && <CurrencyView type={ 5 } amount={ purse.activityPoints.get(5) || 0 } short={ currencyDisplayNumberShort } /> }
|
|
||||||
<CurrencyView type={ -1 } amount={ purse.credits } short={ currencyDisplayNumberShort } />
|
|
||||||
{ hasDuckets && <CurrencyView type={ 0 } amount={ purse.activityPoints.get(0) || 0 } short={ currencyDisplayNumberShort } /> }
|
|
||||||
</div>
|
|
||||||
<div className="nitro-purse__col nitro-purse__col--primary">
|
|
||||||
{ !hcDisabled &&
|
|
||||||
<button type="button" className="nitro-purse__btn nitro-purse__btn--join" onClick={ openClub } title={ joinLabel }>
|
|
||||||
<LayoutCurrencyIcon type="hc" />
|
|
||||||
<span>{ joinLabel }</span>
|
|
||||||
</button> }
|
|
||||||
<button type="button" className="nitro-purse__btn nitro-purse__btn--earnings" onClick={ openEarnings } title={ earningsLabel }>
|
|
||||||
<FaChartBar className="nitro-purse__btn-icon" />
|
|
||||||
<span>{ earningsLabel }</span>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
<div className="nitro-purse__col nitro-purse__col--actions">
|
|
||||||
<button type="button" className="nitro-purse__btn nitro-purse__btn--help" onClick={ event =>
|
|
||||||
{
|
|
||||||
event.stopPropagation(); CreateLinkEvent('help/show');
|
|
||||||
} } title={ helpLabel }>
|
|
||||||
<span>{ helpLabel }</span>
|
|
||||||
</button>
|
|
||||||
<button type="button" className="nitro-purse__btn nitro-purse__btn--icon nitro-purse__btn--logout" onClick={ handleLogout } title="Log out">
|
|
||||||
<FaSignOutAlt />
|
|
||||||
</button>
|
|
||||||
<button type="button" className="nitro-purse__btn nitro-purse__btn--icon nitro-purse__btn--settings" onClick={ event =>
|
|
||||||
{
|
|
||||||
event.stopPropagation(); CreateLinkEvent('user-settings/toggle');
|
|
||||||
} } title={ LocalizeText('widget.memenu.settings.title') }>
|
|
||||||
<FaCog />
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
{ otherCurrencies.length > 0 &&
|
|
||||||
<div className="nitro-purse__other">
|
|
||||||
{ otherCurrencies.map(type => <SeasonalView key={ type } type={ type } amount={ purse.activityPoints.get(type) || 0 } />) }
|
|
||||||
</div> }
|
|
||||||
</Column>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
@@ -1,7 +1,139 @@
|
|||||||
import { FC } from 'react';
|
import { CreateLinkEvent } from '@nitrots/nitro-renderer';
|
||||||
import { PurseModernView } from './PurseModernView';
|
import { FC, useCallback, useMemo } from 'react';
|
||||||
|
import { FaChartBar, FaCog, FaSignOutAlt } from 'react-icons/fa';
|
||||||
|
import { ClearRememberLogin, GetConfigurationValue, GetRememberLogin, LocalizeText } from '../../api';
|
||||||
|
import { Column, LayoutCurrencyIcon } from '../../common';
|
||||||
|
import { usePurse } from '../../hooks';
|
||||||
|
import { CurrencyView } from './views/CurrencyView';
|
||||||
|
import { SeasonalView } from './views/SeasonalView';
|
||||||
|
|
||||||
|
const localizeWithFallback = (key: string, fallback: string) =>
|
||||||
|
{
|
||||||
|
const text = LocalizeText(key);
|
||||||
|
return (text && text !== key) ? text : fallback;
|
||||||
|
};
|
||||||
|
|
||||||
export const PurseView: FC<{}> = props =>
|
export const PurseView: FC<{}> = props =>
|
||||||
{
|
{
|
||||||
return <PurseModernView />;
|
const { purse = null, hcDisabled = false } = usePurse();
|
||||||
|
|
||||||
|
const displayedCurrencies = useMemo(() => GetConfigurationValue<number[]>('system.currency.types', []), []);
|
||||||
|
const currencyDisplayNumberShort = useMemo(() => GetConfigurationValue<boolean>('currency.display.number.short', false), []);
|
||||||
|
|
||||||
|
const currencyTypes = useMemo(() =>
|
||||||
|
{
|
||||||
|
if (!purse || !purse.activityPoints || !purse.activityPoints.size) return [];
|
||||||
|
|
||||||
|
const types = Array.from(purse.activityPoints.keys()).filter(type => (displayedCurrencies.indexOf(type) >= 0));
|
||||||
|
types.sort((a, b) =>
|
||||||
|
{
|
||||||
|
if (a === 0) return -1;
|
||||||
|
if (b === 0) return 1;
|
||||||
|
if (a === 5) return -1;
|
||||||
|
if (b === 5) return 1;
|
||||||
|
return a - b;
|
||||||
|
});
|
||||||
|
|
||||||
|
return types;
|
||||||
|
}, [ displayedCurrencies, purse ]);
|
||||||
|
|
||||||
|
const hasDiamonds = currencyTypes.indexOf(5) >= 0;
|
||||||
|
const hasDuckets = currencyTypes.indexOf(0) >= 0;
|
||||||
|
const otherCurrencies = currencyTypes.filter(type => (type !== 0 && type !== 5));
|
||||||
|
|
||||||
|
const joinLabel = useMemo(() => localizeWithFallback('purse.join', 'Join'), []);
|
||||||
|
const earningsLabel = useMemo(() => localizeWithFallback('earnings.title', 'Earnings'), []);
|
||||||
|
const helpLabel = useMemo(() => localizeWithFallback('help.button.name', 'Help'), []);
|
||||||
|
|
||||||
|
const openClub = useCallback((event: React.MouseEvent) =>
|
||||||
|
{
|
||||||
|
event.stopPropagation();
|
||||||
|
|
||||||
|
const page = GetConfigurationValue<string>('hc.buy_hc', 'habbo_club');
|
||||||
|
CreateLinkEvent('catalog/open/' + page);
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const openEarnings = useCallback((event: React.MouseEvent) =>
|
||||||
|
{
|
||||||
|
event.stopPropagation();
|
||||||
|
CreateLinkEvent('habboUI/open/vault');
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const handleLogout = useCallback(async (event: React.MouseEvent) =>
|
||||||
|
{
|
||||||
|
event.stopPropagation();
|
||||||
|
|
||||||
|
const logoutUrl = GetConfigurationValue<string>('login.logout.endpoint', '/api/auth/logout');
|
||||||
|
const ssoTicket = (window.NitroConfig?.['sso.ticket'] as string) ?? '';
|
||||||
|
const rememberToken = GetRememberLogin()?.token || '';
|
||||||
|
|
||||||
|
try
|
||||||
|
{
|
||||||
|
await fetch(logoutUrl, {
|
||||||
|
method: 'POST',
|
||||||
|
credentials: 'include',
|
||||||
|
keepalive: true,
|
||||||
|
headers: {
|
||||||
|
'Content-Type': 'application/json',
|
||||||
|
'Accept': 'application/json',
|
||||||
|
'X-Requested-With': 'NitroPurseLogout'
|
||||||
|
},
|
||||||
|
body: JSON.stringify({ ssoTicket, rememberToken })
|
||||||
|
});
|
||||||
|
}
|
||||||
|
catch
|
||||||
|
{ /* best-effort — proceed with local logout regardless */ }
|
||||||
|
|
||||||
|
ClearRememberLogin();
|
||||||
|
if(window.NitroConfig) window.NitroConfig['sso.ticket'] = '';
|
||||||
|
window.location.reload();
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
if (!purse) return null;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Column alignItems="end" className="nitro-purse-container" gap={ 0 }>
|
||||||
|
<div className="nitro-purse">
|
||||||
|
<div className="nitro-purse__body">
|
||||||
|
<div className="nitro-purse__currencies">
|
||||||
|
{ hasDiamonds && <CurrencyView type={ 5 } amount={ purse.activityPoints.get(5) || 0 } short={ currencyDisplayNumberShort } /> }
|
||||||
|
<CurrencyView type={ -1 } amount={ purse.credits } short={ currencyDisplayNumberShort } />
|
||||||
|
{ hasDuckets && <CurrencyView type={ 0 } amount={ purse.activityPoints.get(0) || 0 } short={ currencyDisplayNumberShort } /> }
|
||||||
|
</div>
|
||||||
|
<div className="nitro-purse__col nitro-purse__col--primary">
|
||||||
|
{ !hcDisabled &&
|
||||||
|
<button type="button" className="nitro-purse__btn nitro-purse__btn--join" onClick={ openClub } title={ joinLabel }>
|
||||||
|
<LayoutCurrencyIcon type="hc" />
|
||||||
|
<span>{ joinLabel }</span>
|
||||||
|
</button> }
|
||||||
|
<button type="button" className="nitro-purse__btn nitro-purse__btn--earnings" onClick={ openEarnings } title={ earningsLabel }>
|
||||||
|
<FaChartBar className="nitro-purse__btn-icon" />
|
||||||
|
<span>{ earningsLabel }</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div className="nitro-purse__col nitro-purse__col--actions">
|
||||||
|
<button type="button" className="nitro-purse__btn nitro-purse__btn--help" onClick={ event =>
|
||||||
|
{
|
||||||
|
event.stopPropagation(); CreateLinkEvent('help/show');
|
||||||
|
} } title={ helpLabel }>
|
||||||
|
<span>{ helpLabel }</span>
|
||||||
|
</button>
|
||||||
|
<button type="button" className="nitro-purse__btn nitro-purse__btn--icon nitro-purse__btn--logout" onClick={ handleLogout } title="Log out">
|
||||||
|
<FaSignOutAlt />
|
||||||
|
</button>
|
||||||
|
<button type="button" className="nitro-purse__btn nitro-purse__btn--icon nitro-purse__btn--settings" onClick={ event =>
|
||||||
|
{
|
||||||
|
event.stopPropagation(); CreateLinkEvent('user-settings/toggle');
|
||||||
|
} } title={ LocalizeText('widget.memenu.settings.title') }>
|
||||||
|
<FaCog />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{ otherCurrencies.length > 0 &&
|
||||||
|
<div className="nitro-purse__other">
|
||||||
|
{ otherCurrencies.map(type => <SeasonalView key={ type } type={ type } amount={ purse.activityPoints.get(type) || 0 } />) }
|
||||||
|
</div> }
|
||||||
|
</Column>
|
||||||
|
);
|
||||||
};
|
};
|
||||||
|
|||||||
@@ -1,420 +0,0 @@
|
|||||||
/* Classic (original) purse style. All selectors are scoped under
|
|
||||||
.nitro-purse-classic so they never collide with the modern PurseView.css
|
|
||||||
rules that share class names like .nitro-purse. */
|
|
||||||
|
|
||||||
.nitro-purse-classic {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Extra (seasonal) currency in classic mode reuses the modern boxed
|
|
||||||
.nitro-purse__other styling, just constrained to the classic purse width. */
|
|
||||||
.nitro-purse__other--classic {
|
|
||||||
max-width: 125px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* The #41403c border on the extra-currency box is new-style-only;
|
|
||||||
classic mode has no border. */
|
|
||||||
.nitro-purse__other--classic .nitro-purse-seasonal-currency {
|
|
||||||
border: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nitro-purse-classic .nitro-purse-shell {
|
|
||||||
width: 100%;
|
|
||||||
max-width: 188px;
|
|
||||||
margin-top: 6px;
|
|
||||||
margin-left: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nitro-purse-classic .nitro-purse-shell.is-closed {
|
|
||||||
width: 52px;
|
|
||||||
max-width: 52px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nitro-purse-classic .nitro-purse {
|
|
||||||
width: 100%;
|
|
||||||
max-width: none;
|
|
||||||
margin: 0;
|
|
||||||
overflow: hidden;
|
|
||||||
border: 1px solid rgba(255, 255, 255, 0.07);
|
|
||||||
border-radius: 10px;
|
|
||||||
background: rgba(10, 10, 12, 0.58);
|
|
||||||
box-shadow:
|
|
||||||
inset 0 1px 0 rgba(255, 255, 255, 0.05),
|
|
||||||
0 8px 18px rgba(0, 0, 0, 0.14);
|
|
||||||
transition: width 0.24s cubic-bezier(0.22, 1, 0.36, 1), max-width 0.24s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.2s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nitro-purse-classic .nitro-purse.is-closed {
|
|
||||||
width: 52px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nitro-purse-classic .nitro-purse__header {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: space-between;
|
|
||||||
gap: 0.5rem;
|
|
||||||
padding: 5px 7px;
|
|
||||||
cursor: pointer;
|
|
||||||
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
|
|
||||||
background: linear-gradient(180deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.03));
|
|
||||||
transition: background-color 0.2s ease, border-color 0.2s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nitro-purse-classic .nitro-purse__header.is-closed {
|
|
||||||
justify-content: flex-end;
|
|
||||||
gap: 5px;
|
|
||||||
padding: 5px 6px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nitro-purse-classic .nitro-purse__header-main {
|
|
||||||
display: inline-flex;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nitro-purse-classic .nitro-purse__header-main.is-closed {
|
|
||||||
margin-right: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nitro-purse-classic .nitro-purse__header-icon {
|
|
||||||
display: inline-flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
width: 16px;
|
|
||||||
height: 16px;
|
|
||||||
opacity: 0.9;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nitro-purse-classic .nitro-purse__header-image {
|
|
||||||
display: block;
|
|
||||||
width: auto;
|
|
||||||
height: 14px;
|
|
||||||
object-fit: contain;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nitro-purse-classic .nitro-purse__header-title {
|
|
||||||
font-size: 0.82rem;
|
|
||||||
font-weight: 700;
|
|
||||||
line-height: 1;
|
|
||||||
color: rgba(255, 255, 255, 0.92) !important;
|
|
||||||
letter-spacing: 0.01em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nitro-purse-classic .nitro-purse__header-toggle {
|
|
||||||
display: inline-flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
width: 20px;
|
|
||||||
height: 20px;
|
|
||||||
border-radius: 6px;
|
|
||||||
color: rgba(255, 255, 255, 0.82);
|
|
||||||
background: rgba(255, 255, 255, 0.06);
|
|
||||||
transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1), background-color 0.2s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nitro-purse-classic .nitro-purse__header-toggle.is-open {
|
|
||||||
transform: rotate(180deg);
|
|
||||||
}
|
|
||||||
|
|
||||||
.nitro-purse-classic .nitro-purse__content {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 5px;
|
|
||||||
padding: 6px;
|
|
||||||
overflow: hidden;
|
|
||||||
transform-origin: top;
|
|
||||||
transition:
|
|
||||||
max-height 0.58s cubic-bezier(0.16, 1, 0.3, 1),
|
|
||||||
opacity 0.38s ease-out,
|
|
||||||
transform 0.58s cubic-bezier(0.16, 1, 0.3, 1),
|
|
||||||
padding 0.4s ease-out;
|
|
||||||
max-height: 280px;
|
|
||||||
opacity: 1;
|
|
||||||
transform: translateY(0);
|
|
||||||
background: transparent;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nitro-purse-classic .nitro-purse__content.is-closed {
|
|
||||||
max-height: 0;
|
|
||||||
opacity: 0;
|
|
||||||
transform: translateY(-8px) scaleY(0.95);
|
|
||||||
padding-top: 0;
|
|
||||||
padding-bottom: 0;
|
|
||||||
pointer-events: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nitro-purse-classic .nitro-purse__summary,
|
|
||||||
.nitro-purse-classic .nitro-purse__seasonal {
|
|
||||||
transition:
|
|
||||||
opacity 0.32s ease-out,
|
|
||||||
transform 0.48s cubic-bezier(0.16, 1, 0.3, 1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.nitro-purse-classic .nitro-purse__summary {
|
|
||||||
transition-delay: 0.08s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nitro-purse-classic .nitro-purse__seasonal {
|
|
||||||
transition-delay: 0.16s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nitro-purse-classic .nitro-purse__content.is-closed .nitro-purse__summary,
|
|
||||||
.nitro-purse-classic .nitro-purse__content.is-closed .nitro-purse__seasonal {
|
|
||||||
opacity: 0;
|
|
||||||
transform: translateY(-6px);
|
|
||||||
transition-delay: 0s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nitro-purse-classic .nitro-purse__summary {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: minmax(0, 1fr) 30px 26px;
|
|
||||||
gap: 5px;
|
|
||||||
align-items: stretch;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nitro-purse-classic .nitro-purse__summary.is-no-hc {
|
|
||||||
grid-template-columns: minmax(0, 1fr) 26px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nitro-purse-classic .nitro-purse__primary,
|
|
||||||
.nitro-purse-classic .nitro-purse__seasonal {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 3px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nitro-purse-classic .nitro-purse .nitro-purse-button,
|
|
||||||
.nitro-purse-classic .nitro-purse-seasonal-currency {
|
|
||||||
min-height: 22px;
|
|
||||||
padding: 2px 0;
|
|
||||||
border: 0 !important;
|
|
||||||
border-radius: 0 !important;
|
|
||||||
background: transparent !important;
|
|
||||||
box-shadow: none !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nitro-purse-classic .nitro-purse .allcurrencypurse,
|
|
||||||
.nitro-purse-classic .nitro-purse-seasonal-currency {
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nitro-purse-classic .nitro-purse .allcurrencypurse::after,
|
|
||||||
.nitro-purse-classic .nitro-purse-seasonal-currency::after {
|
|
||||||
content: '';
|
|
||||||
position: absolute;
|
|
||||||
left: 0;
|
|
||||||
right: 0;
|
|
||||||
bottom: -1px;
|
|
||||||
height: 1px;
|
|
||||||
background: rgba(255, 255, 255, 0.08);
|
|
||||||
}
|
|
||||||
|
|
||||||
.nitro-purse-classic .nitro-purse__primary > :last-child::after,
|
|
||||||
.nitro-purse-classic .nitro-purse__seasonal > :last-child::after {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nitro-purse-classic .nitro-purse .allcurrencypurse .text-white {
|
|
||||||
font-size: 0.76rem;
|
|
||||||
font-weight: 700;
|
|
||||||
line-height: 1;
|
|
||||||
letter-spacing: 0.01em;
|
|
||||||
color: rgba(255, 255, 255, 0.88) !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nitro-purse-classic .nitro-purse .nitro-purse-button.currency--1 .text-white {
|
|
||||||
color: #7fdcff !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nitro-purse-classic .nitro-purse .nitro-purse-button.currency-0 .text-white {
|
|
||||||
color: #ffd76d !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nitro-purse-classic .nitro-purse .nitro-purse-button.currency-5 .text-white {
|
|
||||||
color: #df95ff !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nitro-purse-classic .nitro-purse-subscription {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
gap: 2px;
|
|
||||||
min-height: 62px;
|
|
||||||
cursor: pointer;
|
|
||||||
border-left: 1px solid rgba(255, 255, 255, 0.08);
|
|
||||||
border-right: 1px solid rgba(255, 255, 255, 0.08);
|
|
||||||
background: rgba(255, 255, 255, 0.02);
|
|
||||||
}
|
|
||||||
|
|
||||||
.nitro-purse-classic .nitro-purse-subscription__icon {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
width: 16px;
|
|
||||||
height: 16px;
|
|
||||||
opacity: 0.95;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nitro-purse-classic .nitro-purse-subscription__copy {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
text-align: center;
|
|
||||||
gap: 1px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nitro-purse-classic .nitro-purse-subscription__label {
|
|
||||||
font-size: 0.5rem;
|
|
||||||
font-weight: 700;
|
|
||||||
color: rgba(255, 255, 255, 0.62) !important;
|
|
||||||
letter-spacing: 0.08em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nitro-purse-classic .nitro-purse-subscription__value {
|
|
||||||
font-size: 0.54rem;
|
|
||||||
font-weight: 700;
|
|
||||||
line-height: 1.05;
|
|
||||||
color: #ffffff !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nitro-purse-classic .nitro-purse__actions {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: 1fr;
|
|
||||||
gap: 3px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nitro-purse-classic .nitro-purse__action-button {
|
|
||||||
display: inline-flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
min-height: 20px;
|
|
||||||
padding: 0;
|
|
||||||
border: 1px solid rgba(7, 23, 31, 0.82);
|
|
||||||
border-radius: 7px;
|
|
||||||
color: rgba(255, 255, 255, 0.88);
|
|
||||||
background: rgba(255, 255, 255, 0.05);
|
|
||||||
box-shadow: none;
|
|
||||||
transition: background-color 0.18s ease, transform 0.18s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nitro-purse-classic .nitro-purse__action-button:hover {
|
|
||||||
background: rgba(255, 255, 255, 0.1);
|
|
||||||
transform: translateY(-1px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.nitro-purse-classic .nitro-purse__action-button .nitro-icon {
|
|
||||||
transform: scale(0.82);
|
|
||||||
}
|
|
||||||
|
|
||||||
.nitro-purse-classic .nitro-purse-seasonal-currency > div {
|
|
||||||
align-items: center;
|
|
||||||
gap: 6px;
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nitro-purse-classic .seasonal-row {
|
|
||||||
min-width: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nitro-purse-classic .seasonal-text-padding,
|
|
||||||
.nitro-purse-classic .seasonal-amount {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
margin-left: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nitro-purse-classic .seasonal-text {
|
|
||||||
min-width: 0;
|
|
||||||
font-size: 0.76rem;
|
|
||||||
font-weight: 700;
|
|
||||||
color: rgba(255, 255, 255, 0.76) !important;
|
|
||||||
line-height: 1;
|
|
||||||
letter-spacing: 0.01em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nitro-purse-classic .seasonal-amount {
|
|
||||||
margin-left: auto;
|
|
||||||
white-space: nowrap;
|
|
||||||
flex: 0 0 auto;
|
|
||||||
font-size: 0.76rem;
|
|
||||||
font-weight: 700;
|
|
||||||
line-height: 1;
|
|
||||||
color: rgba(255, 255, 255, 0.96) !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nitro-purse-classic .seasonal-image-padding {
|
|
||||||
display: inline-flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
padding: 0;
|
|
||||||
border-radius: 0;
|
|
||||||
background: transparent;
|
|
||||||
flex: 0 0 auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nitro-purse-classic .seasonal-image {
|
|
||||||
display: block;
|
|
||||||
width: auto;
|
|
||||||
height: 14px;
|
|
||||||
object-fit: contain;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 640px) {
|
|
||||||
.nitro-purse-classic .nitro-purse-shell {
|
|
||||||
max-width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nitro-purse-classic .nitro-purse-shell.is-closed {
|
|
||||||
max-width: 52px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nitro-purse-classic .nitro-purse {
|
|
||||||
border-radius: 9px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nitro-purse-classic .nitro-purse__content {
|
|
||||||
padding: 6px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nitro-purse-classic .nitro-purse__summary {
|
|
||||||
grid-template-columns: minmax(0, 1fr) 28px 24px;
|
|
||||||
gap: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nitro-purse-classic .nitro-purse__summary.is-no-hc {
|
|
||||||
grid-template-columns: minmax(0, 1fr) 24px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nitro-purse-classic .nitro-purse-subscription {
|
|
||||||
min-height: 58px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nitro-purse-classic .nitro-purse .allcurrencypurse .text-white,
|
|
||||||
.nitro-purse-classic .seasonal-text,
|
|
||||||
.nitro-purse-classic .seasonal-amount {
|
|
||||||
font-size: 0.72rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nitro-purse-classic .nitro-purse__header-title {
|
|
||||||
font-size: 0.78rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 420px) {
|
|
||||||
.nitro-purse-classic .nitro-purse__summary {
|
|
||||||
grid-template-columns: minmax(0, 1fr) 26px 22px;
|
|
||||||
gap: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nitro-purse-classic .nitro-purse__summary.is-no-hc {
|
|
||||||
grid-template-columns: minmax(0, 1fr) 22px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nitro-purse-classic .nitro-purse-subscription {
|
|
||||||
min-height: 54px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nitro-purse-classic .nitro-purse-subscription__value {
|
|
||||||
font-size: 0.55rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
Reference in New Issue
Block a user