mirror of
https://github.com/duckietm/Nitro-V3.git
synced 2026-06-19 15:06:20 +00:00
Merge pull request #250 from simoleo89/feat/toolbar-habbo
Feat/toolbar habbo
This commit is contained in:
DuckieTM
Binary file not shown.
|
After Width: | Height: | Size: 4.7 KiB |
@@ -79,11 +79,17 @@ export const FriendBarView: FC<{ onlineFriends: MessengerFriend[]; requestsCount
|
||||
// below uses it, so a stale `indexOffset` (after the list shrinks or the fit
|
||||
// grows) renders correctly and self-corrects on the next arrow click — no
|
||||
// write-back effect needed.
|
||||
const maxOffset = Math.max(0, (onlineFriends.length - maxVisible));
|
||||
// Defensive: never let a null/undefined slip into the friend map. The
|
||||
// legacy bar padded empty slots with `null` and rendered each as a
|
||||
// FriendBarItemView (which falls back to the "find friends" chip), so an
|
||||
// empty list produced THREE "Trova Amici" buttons. Filtering here makes the
|
||||
// search chip below the ONLY source of that affordance — exactly one, always.
|
||||
const validFriends = onlineFriends.filter(Boolean);
|
||||
const maxOffset = Math.max(0, (validFriends.length - maxVisible));
|
||||
const safeOffset = Math.min(indexOffset, maxOffset);
|
||||
const canScrollLeft = (safeOffset > 0);
|
||||
const canScrollRight = (safeOffset < maxOffset);
|
||||
const visibleFriends = onlineFriends.slice(safeOffset, (safeOffset + maxVisible));
|
||||
const visibleFriends = validFriends.slice(safeOffset, (safeOffset + maxVisible));
|
||||
|
||||
return (
|
||||
<motion.div
|
||||
@@ -135,7 +141,7 @@ export const FriendBarView: FC<{ onlineFriends: MessengerFriend[]; requestsCount
|
||||
>
|
||||
<FriendBarItemView friend={ null } />
|
||||
</motion.div>
|
||||
{ (!onlineFriends.length && (requestsCount <= 0)) &&
|
||||
{ (!validFriends.length && (requestsCount <= 0)) &&
|
||||
<motion.div
|
||||
key="friend-empty"
|
||||
variants={ itemVariants }
|
||||
|
||||
@@ -96,10 +96,11 @@ export const HelpView: FC<{}> = props =>
|
||||
return (
|
||||
<>
|
||||
{ isVisible &&
|
||||
<NitroCardView className="nitro-help" theme="primary-slim">
|
||||
<NitroCardView className={ `nitro-help${ activeReport ? '' : ' w-[420px]' }` } theme="primary-slim">
|
||||
<NitroCardHeaderView headerText={ LocalizeText('help.button.cfh') } onCloseClick={ onClose } />
|
||||
<NitroCardContentView className="text-black">
|
||||
<Grid>
|
||||
{ activeReport
|
||||
? <Grid>
|
||||
<Column center overflow="hidden" size={ 5 }>
|
||||
<div className="index-image" />
|
||||
</Column>
|
||||
@@ -107,6 +108,7 @@ export const HelpView: FC<{}> = props =>
|
||||
<CurrentStepView />
|
||||
</Column>
|
||||
</Grid>
|
||||
: <CurrentStepView /> }
|
||||
</NitroCardContentView>
|
||||
</NitroCardView> }
|
||||
<SanctionSatusView />
|
||||
|
||||
@@ -1,9 +1,11 @@
|
||||
import { GetCfhStatusMessageComposer } from '@nitrots/nitro-renderer';
|
||||
import { FC } from 'react';
|
||||
import { DispatchUiEvent, GetConfigurationValue, LocalizeText, ReportState, ReportType, SendMessageComposer } from '../../../api';
|
||||
import { Button, Text } from '../../../common';
|
||||
import { FaArrowCircleRight } from 'react-icons/fa';
|
||||
import { CreateLinkEvent, DispatchUiEvent, GetConfigurationValue, LocalizeText, ReportState, ReportType, SendMessageComposer } from '../../../api';
|
||||
import { Text } from '../../../common';
|
||||
import { GuideToolEvent } from '../../../events';
|
||||
import { useHelp } from '../../../hooks';
|
||||
import helpDuck from '../../../assets/images/help/help-duck.png';
|
||||
|
||||
export const HelpIndexView: FC<{}> = props =>
|
||||
{
|
||||
@@ -21,17 +23,30 @@ export const HelpIndexView: FC<{}> = props =>
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="flex flex-col justify-center alignp-items-enter grow! gap-1">
|
||||
<Text fontSize={ 3 }>{ LocalizeText('help.main.frame.title') }</Text>
|
||||
<Text>{ LocalizeText('help.main.self.description') }</Text>
|
||||
<div className="flex flex-col gap-2 py-1">
|
||||
<Text bold fontSize={ 3 }>{ LocalizeText('help.main.frame.title') }</Text>
|
||||
<Text center className="text-[#5c5c5c]">{ LocalizeText('help.main.frame.description') }</Text>
|
||||
<div className="flex justify-center py-1">
|
||||
<img src={ helpDuck } alt="" className="h-[105px] w-auto [image-rendering:pixelated]" />
|
||||
</div>
|
||||
<div className="flex flex-col gap-1.5">
|
||||
<button type="button" className="habbo-btn-green" onClick={ onReportClick }>{ LocalizeText('help.main.bully.subtitle') }</button>
|
||||
<button type="button" className="habbo-btn-green" disabled={ !GetConfigurationValue('guides.enabled') } onClick={ () => DispatchUiEvent(new GuideToolEvent(GuideToolEvent.CREATE_HELP_REQUEST)) }>{ LocalizeText('help.main.help.title') }</button>
|
||||
</div>
|
||||
<div className="flex flex-col gap-1 pt-1">
|
||||
<button type="button" className="help-link" onClick={ () => CreateLinkEvent('habbopages/help') }>
|
||||
<FaArrowCircleRight className="help-link__icon" />
|
||||
{ LocalizeText('help.main.faq.link.text') }
|
||||
</button>
|
||||
<button type="button" className="help-link" onClick={ () => SendMessageComposer(new GetCfhStatusMessageComposer(false)) }>
|
||||
<FaArrowCircleRight className="help-link__icon" />
|
||||
{ LocalizeText('help.main.my.sanction.status') }
|
||||
</button>
|
||||
<button type="button" className="help-link" onClick={ () => SendMessageComposer(new GetCfhStatusMessageComposer(true)) }>
|
||||
<FaArrowCircleRight className="help-link__icon" />
|
||||
{ LocalizeText('help.main.my.reports.status') }
|
||||
</button>
|
||||
</div>
|
||||
<div className="flex flex-col gap-1">
|
||||
<Button onClick={ onReportClick }>{ LocalizeText('help.main.bully.subtitle') }</Button>
|
||||
<Button disabled={ !GetConfigurationValue('guides.enabled') } onClick={ () => DispatchUiEvent(new GuideToolEvent(GuideToolEvent.CREATE_HELP_REQUEST)) }>{ LocalizeText('help.main.help.title') }</Button>
|
||||
<Button disabled={ true }>{ LocalizeText('help.main.self.tips.title') }</Button>
|
||||
</div>
|
||||
<Button textColor="black" variant="link" onClick={ () => SendMessageComposer(new GetCfhStatusMessageComposer(false)) }>{ LocalizeText('help.main.my.sanction.status') }</Button>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
import { FC } from 'react';
|
||||
import { LocalizeText } from '../../../api';
|
||||
import { Button, Column, Grid, NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../common';
|
||||
import { FaArrowCircleRight } from 'react-icons/fa';
|
||||
import { CreateLinkEvent, LocalizeText } from '../../../api';
|
||||
import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../common';
|
||||
import { useHelp } from '../../../hooks';
|
||||
|
||||
export const SanctionSatusView: FC<{}> = props =>
|
||||
@@ -37,38 +38,45 @@ export const SanctionSatusView: FC<{}> = props =>
|
||||
if(!sanctionInfo) return null;
|
||||
|
||||
return (
|
||||
<NitroCardView className="nitro-help" theme="primary-slim">
|
||||
<NitroCardView className="nitro-help w-[420px]" theme="primary-slim">
|
||||
<NitroCardHeaderView headerText={ LocalizeText('help.sanction.info.title') } onCloseClick={ () => setSanctionInfo(null) } />
|
||||
<NitroCardContentView className="text-black">
|
||||
<Grid>
|
||||
<Column center overflow="hidden" size={ 5 }>
|
||||
<div className="index-image" />
|
||||
</Column>
|
||||
<Column justifyContent="between" overflow="hidden" size={ 7 }>
|
||||
<div className="flex min-h-[170px] flex-col">
|
||||
<div className="flex flex-col gap-1">
|
||||
{ (sanctionInfo.sanctionReason === 'cfh.reason.EMPTY')
|
||||
? <div className="col-span-12 font-bold ">{ LocalizeText('help.sanction.current.none') }</div>
|
||||
? <div className="font-bold">{ LocalizeText('help.sanction.current.none') }</div>
|
||||
: <>
|
||||
{ ((sanctionInfo.probationHoursLeft > 0) || (sanctionInfo.isSanctionActive)) &&
|
||||
<div className="col-span-12 font-bold ">{ LocalizeText('help.sanction.probation.reminder') }</div>
|
||||
<div className="font-bold">{ LocalizeText('help.sanction.probation.reminder') }</div>
|
||||
}
|
||||
<div className={ `col-span-12 font-bold ${ sanctionInfo.isSanctionNew ? 'text-danger' : '' }` }>
|
||||
<div className={ `font-bold ${ sanctionInfo.isSanctionNew ? 'text-danger' : '' }` }>
|
||||
{ LocalizeText('help.sanction.last.sanction') } { sanctionLocalization('current', sanctionInfo.sanctionName, sanctionInfo.sanctionLengthHours) }
|
||||
</div>
|
||||
<div className="col-span-12">{ LocalizeText('generic.start.time') } { sanctionInfo.sanctionCreationTime }</div>
|
||||
<div className="col-span-12">{ LocalizeText('generic.reason') } { sanctionInfo.sanctionReason }</div>
|
||||
<div className="col-span-12">{ LocalizeText('help.sanction.probation.days.left') } { Math.trunc((sanctionInfo.probationHoursLeft / 24)) + 1 }</div>
|
||||
<div>{ LocalizeText('generic.start.time') } { sanctionInfo.sanctionCreationTime }</div>
|
||||
<div>{ LocalizeText('generic.reason') } { sanctionInfo.sanctionReason }</div>
|
||||
<div>{ LocalizeText('help.sanction.probation.days.left') } { Math.trunc((sanctionInfo.probationHoursLeft / 24)) + 1 }</div>
|
||||
</>
|
||||
}
|
||||
{ ((sanctionInfo.hasCustomMute) && (!(sanctionInfo.isSanctionActive))) &&
|
||||
<div className="col-span-12 font-bold ">{ LocalizeText('help.sanction.custom.mute') }</div>
|
||||
<div className="font-bold">{ LocalizeText('help.sanction.custom.mute') }</div>
|
||||
}
|
||||
{ (sanctionInfo.tradeLockExpiryTime && sanctionInfo.tradeLockExpiryTime.length > 0) &&
|
||||
<div className="col-span-12 font-bold ">{ LocalizeText('trade.locked.until') } { sanctionInfo.tradeLockExpiryTime }</div>
|
||||
<div className="font-bold">{ LocalizeText('trade.locked.until') } { sanctionInfo.tradeLockExpiryTime }</div>
|
||||
}
|
||||
<div className="col-span-12">{ sanctionLocalization('next', sanctionInfo.nextSanctionName, sanctionInfo.nextSanctionLengthHours) }</div>
|
||||
<Button variant="success" onClick={ event => setSanctionInfo(null) }>{ LocalizeText('habbo.way.ok.button') }</Button>
|
||||
</Column>
|
||||
</Grid>
|
||||
{ (sanctionInfo.sanctionReason !== 'cfh.reason.EMPTY') &&
|
||||
<div>{ sanctionLocalization('next', sanctionInfo.nextSanctionName, sanctionInfo.nextSanctionLengthHours) }</div>
|
||||
}
|
||||
</div>
|
||||
<div className="mt-auto flex items-end justify-between gap-3 pt-3">
|
||||
<button type="button" className="help-link" onClick={ () => CreateLinkEvent('habbopages/help') }>
|
||||
<FaArrowCircleRight className="help-link__icon" />
|
||||
{ LocalizeText('help.main.faq.link.text') }
|
||||
</button>
|
||||
<button type="button" className="habbo-btn-green habbo-btn-green--auto" onClick={ () => setSanctionInfo(null) }>
|
||||
{ LocalizeText('habbo.way.ok.button') }
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</NitroCardContentView>
|
||||
</NitroCardView>
|
||||
);
|
||||
|
||||
@@ -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,153 @@
|
||||
import { FC } from 'react';
|
||||
import { PurseModernView } from './PurseModernView';
|
||||
import { CreateLinkEvent } from '@nitrots/nitro-renderer';
|
||||
import { FC, useCallback, useMemo, useState } 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 =>
|
||||
{
|
||||
return <PurseModernView />;
|
||||
const { purse = null, hcDisabled = false } = usePurse();
|
||||
const [ settingsMenuOpen, setSettingsMenuOpen ] = useState(false);
|
||||
|
||||
const openSettingsSection = useCallback((section: string) =>
|
||||
{
|
||||
CreateLinkEvent('user-settings/show/' + section);
|
||||
setSettingsMenuOpen(false);
|
||||
}, []);
|
||||
|
||||
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();
|
||||
CreateLinkEvent('habboUI/open/hccenter');
|
||||
}, []);
|
||||
|
||||
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(); setSettingsMenuOpen(value => !value);
|
||||
} } title={ LocalizeText('widget.memenu.settings.title') }>
|
||||
<FaCog />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{ settingsMenuOpen &&
|
||||
<div className="nitro-purse-menu">
|
||||
<button type="button" className="nitro-purse-menu__item" onClick={ () => openSettingsSection('audio') }>Impostazioni Audio</button>
|
||||
<button type="button" className="nitro-purse-menu__item nitro-purse-menu__item--disabled" disabled>Impostazioni Discord</button>
|
||||
<button type="button" className="nitro-purse-menu__item" onClick={ () => openSettingsSection('chat') }>Impostazioni Chat</button>
|
||||
<button type="button" className="nitro-purse-menu__item" onClick={ () => openSettingsSection('other') }>Altre Impostazioni</button>
|
||||
<button type="button" className="nitro-purse-menu__item" onClick={ () => { CreateLinkEvent('user-account-settings/show'); setSettingsMenuOpen(false); } }>Gestione Account</button>
|
||||
<button type="button" className="nitro-purse-menu__item nitro-purse-menu__item--disabled" disabled>Filtro Parole</button>
|
||||
</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>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -23,8 +23,11 @@ export const ChatInputStyleSelectorView: FC<ChatInputStyleSelectorViewProps> = p
|
||||
return (
|
||||
<Popover.Root open={selectorVisible} onOpenChange={setSelectorVisible}>
|
||||
<Popover.Trigger asChild>
|
||||
<div className="chatstyles-anchor">
|
||||
<div className="nitro-icon chatstyles-icon" />
|
||||
<div className="flex h-[26px] items-center gap-[3px] cursor-pointer select-none pl-[2px]" aria-label="Stili chat">
|
||||
<svg className="h-[9px] w-[9px] shrink-0 text-black/70" viewBox="0 0 24 24" fill="none" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={ 3 } d="M19 9l-7 7-7-7" />
|
||||
</svg>
|
||||
<div className="nitro-icon chatstyles-icon" style={ { filter: 'none' } } />
|
||||
</div>
|
||||
</Popover.Trigger>
|
||||
<Popover.Portal>
|
||||
|
||||
@@ -313,7 +313,7 @@ export const ChatInputView: FC<{}> = props =>
|
||||
|
||||
return (
|
||||
createPortal(
|
||||
<div className="nitro-chat-input-container relative flex h-[38px] w-full items-center justify-between overflow-visible rounded-[12px] border-2 border-black bg-white pr-[8px]">
|
||||
<div className="nitro-chat-input-container relative flex h-[38px] w-full items-center justify-between gap-[6px] overflow-visible rounded-[12px] border-2 border-black bg-[#dcdcdc] pl-[8px] pr-[8px]">
|
||||
{ commandSelectorVisible &&
|
||||
<ChatInputCommandSelectorView
|
||||
commands={ filteredCommands }
|
||||
@@ -331,14 +331,16 @@ export const ChatInputView: FC<{}> = props =>
|
||||
onSelect={ mention.apply }
|
||||
onHover={ mention.setSelectedIndex }
|
||||
/> }
|
||||
<div className="flex-1 items-center input-sizer">
|
||||
{ !floodBlocked &&
|
||||
<input ref={ inputRef } className="w-full border-none bg-transparent px-[10px] text-[0.86rem] text-black placeholder:text-[#6c757d] focus:border-current focus:shadow-none focus:ring-0" maxLength={ maxChatLength } placeholder={ LocalizeText('widgets.chatinput.default') } type="text" value={ chatValue } onChange={ event => updateChatInput(event.target.value) } onMouseDown={ event => setInputFocus() } /> }
|
||||
{ floodBlocked &&
|
||||
<Text variant="danger">{ LocalizeText('chat.input.alert.flood', [ 'time' ], [ floodBlockedSeconds.toString() ]) } </Text> }
|
||||
</div>
|
||||
<ChatInputEmojiSelectorView addChatEmoji={ addChatEmoji } />
|
||||
<ChatInputStyleSelectorView chatStyleId={ chatStyleId } chatStyleIds={ chatStyleIds } selectChatStyleId={ updateChatStyleId } />
|
||||
{ !floodBlocked &&
|
||||
<div className="flex-1 items-center input-sizer">
|
||||
<input ref={ inputRef } className="w-full border-none bg-transparent px-[10px] text-[0.86rem] text-black placeholder:text-[#6c757d] focus:border-current focus:shadow-none focus:ring-0" maxLength={ maxChatLength } placeholder={ LocalizeText('widgets.chatinput.default') } type="text" value={ chatValue } onChange={ event => updateChatInput(event.target.value) } onMouseDown={ event => setInputFocus() } />
|
||||
</div> }
|
||||
{ floodBlocked &&
|
||||
<div className="flex min-w-0 flex-1 items-center px-[10px]">
|
||||
<Text variant="danger" className="w-full truncate whitespace-nowrap text-[0.8rem] font-bold leading-none">{ LocalizeText('chat.input.alert.flood', [ 'time' ], [ floodBlockedSeconds.toString() ]) }</Text>
|
||||
</div> }
|
||||
<ChatInputEmojiSelectorView addChatEmoji={ addChatEmoji } />
|
||||
</div>, document.getElementById('toolbar-chat-input-container'))
|
||||
);
|
||||
};
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import { CreateLinkEvent, Dispose, DropBounce, EaseOut, JumpBy, Motions, NitroToolbarAnimateIconEvent, PerkAllowancesMessageEvent, PerkEnum, Queue, Wait, YouTubeRoomSettingsEvent } from '@nitrots/nitro-renderer';
|
||||
import { CreateLinkEvent, Dispose, DropBounce, EaseOut, FindNewFriendsMessageComposer, JumpBy, Motions, NitroToolbarAnimateIconEvent, PerkAllowancesMessageEvent, PerkEnum, Queue, Wait, YouTubeRoomSettingsEvent } from '@nitrots/nitro-renderer';
|
||||
import { AnimatePresence, motion, Variants } from 'framer-motion';
|
||||
import { FC, useCallback, useEffect, useMemo, useRef, useState } from 'react';
|
||||
import { GetConfigurationValue, isHousekeepingEnabled, MessengerIconState, OpenMessengerChat, setYoutubeRoomEnabled, VisitDesktop } from '../../api';
|
||||
import { FC, useEffect, useMemo, useState } from 'react';
|
||||
import { GetConfigurationValue, isHousekeepingEnabled, MessengerIconState, OpenMessengerChat, SendMessageComposer, setYoutubeRoomEnabled, VisitDesktop } from '../../api';
|
||||
import { Flex, LayoutAvatarImageView, LayoutItemCountView } from '../../common';
|
||||
import { useAchievements, useFriends, useHasPermission, useInventoryUnseenTracker, useMentionsSnapshot, useMessageEvent, useMessenger, useModTools, useNitroEvent, useSessionInfo, useSoundboard, useWiredTools } from '../../hooks';
|
||||
import { ToolbarItemView } from './ToolbarItemView';
|
||||
@@ -26,14 +26,14 @@ const shellVariants: Variants = {
|
||||
const SHELL_TRANSITION = { type: 'spring' as const, stiffness: 260, damping: 26 };
|
||||
const NAV_TRANSITION = { type: 'spring' as const, stiffness: 300, damping: 28 };
|
||||
const ME_POPOVER_TRANSITION = { type: 'spring' as const, stiffness: 420, damping: 28 };
|
||||
const TOGGLE_LOCK_MS = 220;
|
||||
|
||||
export const ToolbarView: FC<{ isInRoom: boolean }> = props =>
|
||||
{
|
||||
const { isInRoom } = props;
|
||||
const [ isMeExpanded, setMeExpanded ] = useState(false);
|
||||
const [ isToolbarOpen, setIsToolbarOpen ] = useState(false);
|
||||
const [ isTouchLayout, setIsTouchLayout ] = useState(false);
|
||||
const [ leftCollapsed, setLeftCollapsed ] = useState(false);
|
||||
const [ rightCollapsed, setRightCollapsed ] = useState(false);
|
||||
const [ staffStackBottom, setStaffStackBottom ] = useState<number | null>(null);
|
||||
const [ useGuideTool, setUseGuideTool ] = useState(false);
|
||||
const [ youtubeEnabled, setYoutubeEnabled ] = useState(false);
|
||||
@@ -54,26 +54,9 @@ export const ToolbarView: FC<{ isInRoom: boolean }> = props =>
|
||||
() => isMod ? tickets.filter(ticket => ticket && (ticket.state === 1)).length : 0,
|
||||
[ isMod, tickets ]
|
||||
);
|
||||
const isVisible = (isToolbarOpen || !isInRoom);
|
||||
const visibilityVariant = isVisible ? 'visible' : 'hidden';
|
||||
const toggleLockRef = useRef(false);
|
||||
const toggleTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
|
||||
const visibilityVariant = 'visible';
|
||||
|
||||
useEffect(() => () =>
|
||||
{
|
||||
if(toggleTimeoutRef.current) clearTimeout(toggleTimeoutRef.current);
|
||||
}, []);
|
||||
|
||||
const handleToggleClick = useCallback(() =>
|
||||
{
|
||||
if(toggleLockRef.current) return;
|
||||
toggleLockRef.current = true;
|
||||
setIsToolbarOpen(value => !value);
|
||||
if(toggleTimeoutRef.current) clearTimeout(toggleTimeoutRef.current);
|
||||
toggleTimeoutRef.current = setTimeout(() => { toggleLockRef.current = false; }, TOGGLE_LOCK_MS);
|
||||
}, []);
|
||||
|
||||
const compactFramePosition = (isToolbarOpen && isInRoom) ? 'bottom-[90px] min-[1700px]:bottom-0' : 'bottom-0';
|
||||
const compactFramePosition = 'bottom-[90px] min-[1700px]:bottom-[7px]';
|
||||
const mobileOnlyClasses = isTouchLayout ? '' : 'min-[1700px]:hidden';
|
||||
const desktopBlockClasses = isTouchLayout ? 'hidden' : 'hidden min-[1700px]:block';
|
||||
const desktopFlexClasses = isTouchLayout ? 'hidden' : 'hidden min-[1700px]:flex';
|
||||
@@ -196,20 +179,6 @@ export const ToolbarView: FC<{ isInRoom: boolean }> = props =>
|
||||
|
||||
{ isInRoom &&
|
||||
<div className={ `tb-frame fixed ${ compactFramePosition } left-1/2 -translate-x-1/2 z-40 flex h-[38px] w-[420px] max-w-[95vw] items-center px-[6px] py-[4px] pointer-events-none` }>
|
||||
<motion.div
|
||||
className="tb-toggle pointer-events-auto mr-2 flex-shrink-0"
|
||||
onClick={ handleToggleClick }
|
||||
whileTap={ { scale: 0.9 } }>
|
||||
<motion.svg
|
||||
className="h-3.5 w-3.5 text-white/70"
|
||||
animate={ { rotate: isToolbarOpen ? 180 : 0 } }
|
||||
transition={ { type: 'spring', stiffness: 320, damping: 24 } }
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={ 2.5 } d="M5 15l7-7 7 7" />
|
||||
</motion.svg>
|
||||
</motion.div>
|
||||
<Flex
|
||||
alignItems="center"
|
||||
justifyContent="center"
|
||||
@@ -218,21 +187,31 @@ export const ToolbarView: FC<{ isInRoom: boolean }> = props =>
|
||||
</div> }
|
||||
|
||||
<motion.div
|
||||
initial="hidden"
|
||||
initial="visible"
|
||||
animate={ visibilityVariant }
|
||||
variants={ shellVariants }
|
||||
transition={ SHELL_TRANSITION }
|
||||
className={ `pointer-events-none fixed bottom-0 left-0 right-0 z-[39] h-[52px] rounded-t-[12px] border border-b-0 border-white/8 bg-[rgba(10,10,12,0.58)] shadow-[0_-6px_18px_rgba(0,0,0,0.18)] ${ desktopBlockClasses }` } />
|
||||
className={ `pointer-events-none fixed bottom-0 left-0 right-0 z-[39] h-[52px] rounded-t-[12px] border border-b-0 border-white/8 bg-[rgba(62,64,72,0.55)] shadow-[0_-6px_18px_rgba(0,0,0,0.18)] ${ desktopBlockClasses }` } />
|
||||
|
||||
<motion.div
|
||||
initial="hidden"
|
||||
initial="visible"
|
||||
animate={ visibilityVariant }
|
||||
variants={ leftNavVariants }
|
||||
transition={ NAV_TRANSITION }
|
||||
className={ `tb-nav-clip fixed bottom-0 left-0 z-40 h-[52px] max-w-[calc(50vw-242px)] items-center pl-3 ${ desktopFlexClasses }` }>
|
||||
<button
|
||||
type="button"
|
||||
onClick={ () => setLeftCollapsed(value => !value) }
|
||||
aria-label="Mostra/Nascondi icone"
|
||||
className="tb-collapse pointer-events-auto mt-[6px] mr-[3px]">
|
||||
<svg className="h-3 w-3" viewBox="0 0 24 24" fill="none" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={ 3 } d={ leftCollapsed ? 'M9 5l7 7-7 7' : 'M15 19l-7-7 7-7' } />
|
||||
</svg>
|
||||
</button>
|
||||
<motion.div
|
||||
variants={ containerVariants }
|
||||
className="tb-open-shell flex h-[52px] max-w-full items-center gap-2 overflow-visible bg-transparent px-[8px] pt-[10px] pb-[2px]">
|
||||
{ !leftCollapsed && (<>
|
||||
<motion.div variants={ itemVariants }>
|
||||
{ isInRoom
|
||||
? <ToolbarItemView icon="habbo" onClick={ () => VisitDesktop() } className="tb-icon" />
|
||||
@@ -245,6 +224,7 @@ export const ToolbarView: FC<{ isInRoom: boolean }> = props =>
|
||||
<motion.div variants={ itemVariants }>
|
||||
<ToolbarItemView icon="game" onClick={ () => CreateLinkEvent('games/toggle') } className="tb-icon" />
|
||||
</motion.div> }
|
||||
</>) }
|
||||
<motion.div variants={ itemVariants }>
|
||||
<ToolbarItemView icon="catalog" onClick={ () => CreateLinkEvent('catalog/toggle/normal') } className="tb-icon" />
|
||||
</motion.div>
|
||||
@@ -282,6 +262,7 @@ export const ToolbarView: FC<{ isInRoom: boolean }> = props =>
|
||||
{ (getFullCount > 0) &&
|
||||
<LayoutItemCountView count={ getFullCount } className="absolute -right-1 top-0" /> }
|
||||
</motion.div>
|
||||
{ !leftCollapsed && (<>
|
||||
<motion.div variants={ itemVariants }>
|
||||
<ToolbarItemView icon="rare-values" onClick={ () => CreateLinkEvent('rare-values/toggle') } className="tb-icon" />
|
||||
</motion.div>
|
||||
@@ -292,10 +273,12 @@ export const ToolbarView: FC<{ isInRoom: boolean }> = props =>
|
||||
<motion.div variants={ itemVariants }>
|
||||
<ToolbarItemView icon="wired-tools" onClick={ openMonitor } className="tb-icon" />
|
||||
</motion.div> }
|
||||
</>) }
|
||||
{ isInRoom &&
|
||||
<motion.div variants={ itemVariants }>
|
||||
<ToolbarItemView icon="camera" onClick={ () => CreateLinkEvent('camera/toggle') } className="tb-icon" />
|
||||
</motion.div> }
|
||||
{ !leftCollapsed && (<>
|
||||
{ (isInRoom && youtubeEnabled) &&
|
||||
<motion.div variants={ itemVariants }>
|
||||
<ToolbarItemView icon="youtube" onClick={ openYouTubePlayer } className="tb-icon" />
|
||||
@@ -304,6 +287,7 @@ export const ToolbarView: FC<{ isInRoom: boolean }> = props =>
|
||||
<motion.div variants={ itemVariants }>
|
||||
<ToolbarItemView icon="soundboard" onClick={ () => CreateLinkEvent('soundboard/toggle') } className="tb-icon" />
|
||||
</motion.div> }
|
||||
</>) }
|
||||
{ isMod &&
|
||||
<motion.div variants={ itemVariants } className="relative">
|
||||
<ToolbarItemView icon="modtools" onClick={ () => CreateLinkEvent('mod-tools/toggle') } className="tb-icon" />
|
||||
@@ -321,7 +305,7 @@ export const ToolbarView: FC<{ isInRoom: boolean }> = props =>
|
||||
</motion.div>
|
||||
</motion.div>
|
||||
<motion.div
|
||||
initial="hidden"
|
||||
initial="visible"
|
||||
animate={ visibilityVariant }
|
||||
variants={ rightNavVariants }
|
||||
transition={ NAV_TRANSITION }
|
||||
@@ -334,6 +318,11 @@ export const ToolbarView: FC<{ isInRoom: boolean }> = props =>
|
||||
{ (requests.length > 0) &&
|
||||
<LayoutItemCountView count={ requests.length } className="absolute -right-2 -top-1" /> }
|
||||
</motion.div>
|
||||
{ rightCollapsed &&
|
||||
<motion.div variants={ itemVariants }>
|
||||
<ToolbarItemView icon="friendsearch" onClick={ () => SendMessageComposer(new FindNewFriendsMessageComposer()) } className="tb-icon" />
|
||||
</motion.div> }
|
||||
{ !rightCollapsed && (<>
|
||||
{ mentionsEnabled &&
|
||||
<motion.div variants={ itemVariants } className="relative">
|
||||
<ToolbarItemView icon="mentions" onClick={ () => CreateLinkEvent('mentions/toggle') } className="tb-icon" />
|
||||
@@ -346,14 +335,24 @@ export const ToolbarView: FC<{ isInRoom: boolean }> = props =>
|
||||
</motion.div> }
|
||||
<div className={ `mx-1 h-5 w-[1px] bg-white/20 ${ desktopBlockClasses }` } />
|
||||
<div className={ `h-full shrink-0 ${ desktopBlockClasses }` } id="toolbar-friend-bar-container-desktop" />
|
||||
</>) }
|
||||
</motion.div>
|
||||
<button
|
||||
type="button"
|
||||
onClick={ () => setRightCollapsed(value => !value) }
|
||||
aria-label="Mostra/Nascondi icone"
|
||||
className="tb-collapse pointer-events-auto mt-[6px] ml-[3px]">
|
||||
<svg className="h-3 w-3" viewBox="0 0 24 24" fill="none" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={ 3 } d={ rightCollapsed ? 'M15 19l-7-7 7-7' : 'M9 5l7 7-7 7' } />
|
||||
</svg>
|
||||
</button>
|
||||
</motion.div>
|
||||
<motion.div
|
||||
initial="hidden"
|
||||
initial="visible"
|
||||
animate={ visibilityVariant }
|
||||
variants={ mobileNavVariants }
|
||||
transition={ NAV_TRANSITION }
|
||||
className={ `fixed left-1/2 bottom-0 z-40 flex w-[95vw] -translate-x-1/2 items-center overflow-visible ${ mobileOnlyClasses } ${ isInRoom ? 'rounded-[12px] border border-white/8 bg-[rgba(10,10,12,0.58)] px-[6px] py-[4px] mb-[3px] shadow-[0_-6px_18px_rgba(0,0,0,0.18)]' : '' }` }>
|
||||
className={ `fixed left-1/2 bottom-0 z-40 flex w-[95vw] -translate-x-1/2 items-center overflow-visible ${ mobileOnlyClasses } ${ isInRoom ? 'rounded-[12px] border border-white/8 bg-[rgba(62,64,72,0.55)] px-[6px] py-[4px] mb-[3px] shadow-[0_-6px_18px_rgba(0,0,0,0.18)]' : '' }` }>
|
||||
<motion.div
|
||||
variants={ containerVariants }
|
||||
className="tb-bar-scroll flex h-full min-w-0 flex-1 items-center gap-2 overflow-x-auto overflow-y-visible px-1">
|
||||
@@ -443,12 +442,12 @@ export const ToolbarView: FC<{ isInRoom: boolean }> = props =>
|
||||
room. Always present (Builders Club), plus camera in-room
|
||||
and the staff-only tools when permitted. */ }
|
||||
<motion.div
|
||||
initial="hidden"
|
||||
initial="visible"
|
||||
animate={ visibilityVariant }
|
||||
variants={ mobileNavVariants }
|
||||
transition={ NAV_TRANSITION }
|
||||
style={ staffStackBottom != null ? { top: 'auto', bottom: `${ staffStackBottom }px` } : undefined }
|
||||
className={ `fixed left-1 z-40 flex flex-col items-center gap-2 rounded-[12px] border border-white/8 bg-[rgba(10,10,12,0.58)] px-[4px] py-[6px] shadow-[0_6px_18px_rgba(0,0,0,0.18)] ${ staffStackBottom == null ? 'top-1/2 -translate-y-1/2' : '' } ${ mobileOnlyClasses }` }>
|
||||
className={ `fixed left-1 z-40 flex flex-col items-center gap-2 rounded-[12px] border border-white/8 bg-[rgba(62,64,72,0.55)] px-[4px] py-[6px] shadow-[0_6px_18px_rgba(0,0,0,0.18)] ${ staffStackBottom == null ? 'top-1/2 -translate-y-1/2' : '' } ${ mobileOnlyClasses }` }>
|
||||
<motion.div variants={ itemVariants }>
|
||||
<ToolbarItemView icon="buildersclub" onClick={ () => CreateLinkEvent('catalog/toggle/builder') } className="tb-icon" />
|
||||
</motion.div>
|
||||
@@ -499,9 +498,7 @@ const TOOLBAR_STYLES = `
|
||||
Negative inset margins on the clip path keep vertical breathing
|
||||
room for the popover even on engines that fall back to 'hidden'. */
|
||||
.tb-nav-clip {
|
||||
overflow-x: clip;
|
||||
overflow-y: visible;
|
||||
overflow-clip-margin: 0 0 200px 0;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.tb-icon {
|
||||
@@ -518,26 +515,24 @@ const TOOLBAR_STYLES = `
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.tb-toggle {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
flex-shrink: 0;
|
||||
border-radius: 9px;
|
||||
background: rgba(18, 16, 14, 0.80);
|
||||
backdrop-filter: blur(16px);
|
||||
-webkit-backdrop-filter: blur(16px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.08);
|
||||
.tb-collapse {
|
||||
width: 15px;
|
||||
height: 34px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
border-radius: 6px;
|
||||
background: rgba(62, 64, 72, 0.55);
|
||||
border: 1px solid rgba(255, 255, 255, 0.10);
|
||||
color: rgba(255, 255, 255, 0.70);
|
||||
cursor: pointer;
|
||||
box-shadow: 0 3px 12px rgba(0, 0, 0, 0.5);
|
||||
transition: background 0.15s, border-color 0.15s;
|
||||
transition: color 0.15s, background 0.15s;
|
||||
}
|
||||
|
||||
.tb-toggle:hover {
|
||||
background: rgba(30, 26, 20, 0.88);
|
||||
border-color: rgba(255, 255, 255, 0.13);
|
||||
.tb-collapse:hover {
|
||||
color: #fff;
|
||||
background: rgba(80, 82, 90, 0.65);
|
||||
}
|
||||
|
||||
.tb-bar-scroll {
|
||||
|
||||
@@ -2,13 +2,24 @@ import { AddLinkEventTracker, CreateLinkEvent, ILinkEventTracker, NitroSettingsE
|
||||
import { FC, useEffect, useState } from 'react';
|
||||
import { FaUserCog, FaVolumeDown, FaVolumeMute, FaVolumeUp } from 'react-icons/fa';
|
||||
import { DispatchMainEvent, DispatchUiEvent, LocalizeText, SendMessageComposer } from '../../api';
|
||||
import { NitroCardContentView, NitroCardHeaderView, NitroCardView, Text } from '../../common';
|
||||
import { Button, NitroCardContentView, NitroCardHeaderView, NitroCardView, Text } from '../../common';
|
||||
import { useCatalogPlaceMultipleItems, useCatalogSkipPurchaseConfirmation, useChatWindow, useMessageEvent } from '../../hooks';
|
||||
import { classNames } from '../../layout';
|
||||
|
||||
const localizeWithFallback = (key: string, fallback: string) =>
|
||||
{
|
||||
const text = LocalizeText(key);
|
||||
return (text && text !== key) ? text : fallback;
|
||||
};
|
||||
|
||||
// null = full window (legacy). 'audio' | 'chat' | 'other' = focused section
|
||||
// opened from the purse gear dropdown.
|
||||
type SettingsSection = null | 'audio' | 'chat' | 'other';
|
||||
|
||||
export const UserSettingsView: FC<{}> = props =>
|
||||
{
|
||||
const [ isVisible, setIsVisible ] = useState(false);
|
||||
const [ section, setSection ] = useState<SettingsSection>(null);
|
||||
const [ userSettings, setUserSettings ] = useState<NitroSettingsEvent>(null);
|
||||
const [ catalogPlaceMultipleObjects, setCatalogPlaceMultipleObjects ] = useCatalogPlaceMultipleItems();
|
||||
const [ catalogSkipPurchaseConfirmation, setCatalogSkipPurchaseConfirmation ] = useCatalogSkipPurchaseConfirmation();
|
||||
@@ -100,12 +111,14 @@ export const UserSettingsView: FC<{}> = props =>
|
||||
switch(parts[1])
|
||||
{
|
||||
case 'show':
|
||||
setSection((parts[2] as SettingsSection) || null);
|
||||
setIsVisible(true);
|
||||
return;
|
||||
case 'hide':
|
||||
setIsVisible(false);
|
||||
return;
|
||||
case 'toggle':
|
||||
setSection((parts[2] as SettingsSection) || null);
|
||||
setIsVisible(prevValue => !prevValue);
|
||||
return;
|
||||
}
|
||||
@@ -127,15 +140,36 @@ export const UserSettingsView: FC<{}> = props =>
|
||||
|
||||
if(!isVisible || !userSettings) return null;
|
||||
|
||||
const showChat = (section === null || section === 'chat');
|
||||
const showOther = (section === null || section === 'other');
|
||||
const showAudio = (section === null || section === 'audio');
|
||||
const showAccountLink = (section === null);
|
||||
|
||||
const headerText = (section === 'audio')
|
||||
? localizeWithFallback('widget.memenu.settings.volume', 'Audio settings')
|
||||
: (section === 'chat')
|
||||
? localizeWithFallback('room.chat.settings.title', 'Chat settings')
|
||||
: (section === 'other')
|
||||
? localizeWithFallback('memenu.settings.other', 'Other settings')
|
||||
: LocalizeText('widget.memenu.settings.title');
|
||||
|
||||
return (
|
||||
<NitroCardView className="user-settings-window" theme="primary-slim" uniqueKey="user-settings">
|
||||
<NitroCardHeaderView headerText={ LocalizeText('widget.memenu.settings.title') } onCloseClick={ event => processAction('close_view') } />
|
||||
<NitroCardHeaderView headerText={ headerText } onCloseClick={ event => processAction('close_view') } />
|
||||
<NitroCardContentView className="text-black">
|
||||
{ showChat &&
|
||||
<div className="flex flex-col gap-1">
|
||||
<div className="flex items-center gap-1">
|
||||
<input checked={ userSettings.oldChat } className="form-check-input" type="checkbox" onChange={ event => processAction('oldchat', event.target.checked) } />
|
||||
<Text>{ LocalizeText('memenu.settings.chat.prefer.old.chat') }</Text>
|
||||
</div>
|
||||
<div className="flex items-center gap-1">
|
||||
<input checked={ chatWindowEnabled } className="form-check-input" type="checkbox" onChange={ event => setChatWindowEnabled(event.target.checked) } />
|
||||
<Text>{ LocalizeText('memenu.settings.other.enable.chat.window') }</Text>
|
||||
</div>
|
||||
</div> }
|
||||
{ showOther &&
|
||||
<div className="flex flex-col gap-1">
|
||||
<div className="flex items-center gap-1">
|
||||
<input checked={ userSettings.roomInvites } className="form-check-input" type="checkbox" onChange={ event => processAction('room_invites', event.target.checked) } />
|
||||
<Text>{ LocalizeText('memenu.settings.other.ignore.room.invites') }</Text>
|
||||
@@ -152,11 +186,8 @@ export const UserSettingsView: FC<{}> = props =>
|
||||
<input checked={ catalogSkipPurchaseConfirmation } className="form-check-input" type="checkbox" onChange={ event => setCatalogSkipPurchaseConfirmation(event.target.checked) } />
|
||||
<Text>{ LocalizeText('memenu.settings.other.skip.purchase.confirmation') }</Text>
|
||||
</div>
|
||||
<div className="flex items-center gap-1">
|
||||
<input checked={ chatWindowEnabled } className="form-check-input" type="checkbox" onChange={ event => setChatWindowEnabled(event.target.checked) } />
|
||||
<Text>{ LocalizeText('memenu.settings.other.enable.chat.window') }</Text>
|
||||
</div>
|
||||
</div>
|
||||
</div> }
|
||||
{ showAudio &&
|
||||
<div className="flex flex-col">
|
||||
<Text bold>{ LocalizeText('widget.memenu.settings.volume') }</Text>
|
||||
<div className="flex flex-col gap-1">
|
||||
@@ -186,7 +217,8 @@ export const UserSettingsView: FC<{}> = props =>
|
||||
<FaVolumeUp className={ classNames((userSettings.volumeTrax < 50) && 'text-muted', 'fa-icon') } />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div> }
|
||||
{ showAccountLink &&
|
||||
<div className="flex flex-col pt-2 mt-1 border-t border-black/10">
|
||||
<button
|
||||
type="button"
|
||||
@@ -201,7 +233,11 @@ export const UserSettingsView: FC<{}> = props =>
|
||||
</div>
|
||||
<span className="text-black/30 group-hover:text-[#1e7295] text-[10px]">›</span>
|
||||
</button>
|
||||
</div>
|
||||
</div> }
|
||||
{ (section !== null) &&
|
||||
<div className="flex pt-2 mt-1 border-t border-black/10">
|
||||
<Button variant="secondary" onClick={ event => processAction('close_view') }>{ localizeWithFallback('generic.back', 'Indietro') }</Button>
|
||||
</div> }
|
||||
</NitroCardContentView>
|
||||
</NitroCardView>
|
||||
);
|
||||
|
||||
@@ -0,0 +1,83 @@
|
||||
/* Aiuto (Help) + Sanctions windows — custom hotel restyle.
|
||||
Global (not an inline <style>) so it applies to BOTH the HelpView card and
|
||||
the separate SanctionStatusView card, regardless of which is mounted. */
|
||||
|
||||
/* Classic blue header + light-grey body (the shared 'primary-slim' theme is
|
||||
teal + cream). Higher specificity than the theme so it wins. The body element
|
||||
renders `.nitro-card-content-shell`, NOT `.content-area`. */
|
||||
.nitro-card.nitro-help .nitro-card-header {
|
||||
background: linear-gradient(180deg, #5a80b8 0%, #3f63a0 100%);
|
||||
border-color: #34548a;
|
||||
}
|
||||
|
||||
.nitro-card.nitro-help,
|
||||
.nitro-card.nitro-help .content-area,
|
||||
.nitro-card.nitro-help .nitro-card-content-shell {
|
||||
background: #ebebe3 !important;
|
||||
}
|
||||
|
||||
/* Beveled Habbo green button (matches the reference screenshots — the flat
|
||||
Bootstrap 'success' variant did not). Reused by the Help action buttons and
|
||||
the Sanctions "Ho capito" button. */
|
||||
.habbo-btn-green {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
min-height: 34px;
|
||||
padding: 6px 14px;
|
||||
border: 1px solid #4f7a22;
|
||||
border-radius: 6px;
|
||||
background: linear-gradient(180deg, #72b03a 0%, #5a8c2a 100%);
|
||||
color: #ffffff;
|
||||
font-size: 0.82rem;
|
||||
font-weight: 700;
|
||||
line-height: 1.1;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
box-shadow:
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.3),
|
||||
inset 0 -2px 0 rgba(0, 0, 0, 0.16);
|
||||
transition: filter 0.15s ease;
|
||||
}
|
||||
|
||||
.habbo-btn-green:hover { filter: brightness(1.06); }
|
||||
.habbo-btn-green:active { filter: brightness(0.95); }
|
||||
|
||||
.habbo-btn-green:disabled {
|
||||
background: linear-gradient(180deg, #cfcfcf 0%, #b6b6b6 100%);
|
||||
border-color: #9a9a9a;
|
||||
color: #f0f0f0;
|
||||
cursor: default;
|
||||
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
|
||||
/* Auto-width variant for footer buttons (e.g. "Ho capito"). */
|
||||
.habbo-btn-green--auto {
|
||||
width: auto;
|
||||
min-width: 96px;
|
||||
}
|
||||
|
||||
/* Green-arrow safety/status links at the bottom of the help windows. */
|
||||
.help-link {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 2px 0;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
color: #2f2f2f;
|
||||
font-size: 0.78rem;
|
||||
font-weight: 700;
|
||||
text-decoration: underline;
|
||||
text-align: left;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.help-link:hover { filter: brightness(1.15); }
|
||||
|
||||
.help-link__icon {
|
||||
flex: 0 0 auto;
|
||||
color: #46a01e;
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
@@ -121,13 +121,13 @@
|
||||
}
|
||||
|
||||
.nitro-purse__btn--join {
|
||||
border-color: rgba(255, 255, 255, 0.1);
|
||||
background: #33312c;
|
||||
border-color: #4f7a22;
|
||||
background: linear-gradient(180deg, #72b03a 0%, #5a8c2a 100%);
|
||||
}
|
||||
|
||||
.nitro-purse__btn--earnings {
|
||||
border-color: rgba(255, 255, 255, 0.1);
|
||||
background: #33312c;
|
||||
border-color: #4f7a22;
|
||||
background: linear-gradient(180deg, #72b03a 0%, #5a8c2a 100%);
|
||||
}
|
||||
|
||||
.nitro-purse__btn--help {
|
||||
@@ -230,6 +230,46 @@
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
/* ---- Settings dropdown (gear menu) ---- */
|
||||
.nitro-purse-menu {
|
||||
width: 100%;
|
||||
max-width: 234px;
|
||||
margin-top: 4px;
|
||||
margin-left: auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
border: 2px solid #41403c;
|
||||
border-radius: 8px;
|
||||
background: rgba(10, 10, 12, 0.92);
|
||||
box-shadow: 0 8px 18px rgba(0, 0, 0, 0.3);
|
||||
pointer-events: all;
|
||||
}
|
||||
|
||||
.nitro-purse-menu__item {
|
||||
padding: 2px 10px;
|
||||
text-align: left;
|
||||
font-size: 0.78rem;
|
||||
font-weight: 500;
|
||||
line-height: 1.3;
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
background: transparent;
|
||||
border: 0;
|
||||
cursor: pointer;
|
||||
transition: background 0.12s ease;
|
||||
}
|
||||
|
||||
.nitro-purse-menu__item:hover {
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
}
|
||||
|
||||
.nitro-purse-menu__item--disabled,
|
||||
.nitro-purse-menu__item--disabled:hover {
|
||||
color: rgba(255, 255, 255, 0.35);
|
||||
background: transparent;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.nitro-purse {
|
||||
max-width: 100%;
|
||||
|
||||
@@ -37,6 +37,8 @@ import './css/friends/FriendsView.css';
|
||||
|
||||
import './css/habbo/HabboSwfSkin.css';
|
||||
|
||||
import './css/help/HelpView.css';
|
||||
|
||||
import './css/hotelview/HotelView.css';
|
||||
|
||||
import './css/login/LoginView.css';
|
||||
|
||||
Reference in New Issue
Block a user