diff --git a/src/components/MainView.tsx b/src/components/MainView.tsx index 8c883c5..1d56034 100644 --- a/src/components/MainView.tsx +++ b/src/components/MainView.tsx @@ -45,6 +45,7 @@ import { TranslationSettingsView } from './translation/TranslationSettingsView'; import { UserProfileView } from './user-profile/UserProfileView'; import { UserAccountSettingsView } from './user-settings/UserAccountSettingsView'; import { UserSettingsView } from './user-settings/UserSettingsView'; +import { VaultView } from './vault/VaultView'; import { WiredView } from './wired/WiredView'; import { WiredCreatorToolsView } from './wired-tools/WiredCreatorToolsView'; import { MentionsView } from './mentions'; @@ -221,6 +222,7 @@ export const MainView: FC<{}> = props => + diff --git a/src/components/vault/VaultView.tsx b/src/components/vault/VaultView.tsx new file mode 100644 index 0000000..4579731 --- /dev/null +++ b/src/components/vault/VaultView.tsx @@ -0,0 +1,106 @@ +import { AddLinkEventTracker, ILinkEventTracker, RemoveLinkEventTracker } from '@nitrots/nitro-renderer'; +import { FC, useEffect, useState } from 'react'; +import { IconType } from 'react-icons'; +import { FaArrowUp, FaBoxOpen, FaBriefcase, FaCrown, FaGamepad, FaGift, FaHandHoldingHeart, FaShoppingBag, FaStore, FaTrophy } from 'react-icons/fa'; +import { LocalizeText } from '../../api'; +import { Button, LayoutCurrencyIcon, NitroCardContentView, NitroCardHeaderView, NitroCardView, Text } from '../../common'; + +const localizeWithFallback = (key: string, fallback: string) => +{ + const text = LocalizeText(key); + return (text && text !== key) ? text : fallback; +}; + +interface EarningRow +{ + key: string; + label: string; + Icon: IconType; + currencies: number[]; +} + +// Currency ids: 5 = diamonds, 0 = duckets. Amounts are placeholders (0) until +// the emulator exposes the earnings data + claim packets. +const EARNINGS: EarningRow[] = [ + { key: 'daily', label: 'Regalo giornaliero', Icon: FaGift, currencies: [ 5 ] }, + { key: 'games', label: 'Giochi', Icon: FaGamepad, currencies: [ 0 ] }, + { key: 'achievements', label: 'Traguardi', Icon: FaTrophy, currencies: [ 5, 0 ] }, + { key: 'marketplace', label: 'Mercatino', Icon: FaStore, currencies: [ 0 ] }, + { key: 'hcpayday', label: 'Bonus giorno di paga HC', Icon: FaCrown, currencies: [ 0 ] }, + { key: 'level', label: 'Progressione Livello', Icon: FaArrowUp, currencies: [ 5, 0 ] }, + { key: 'donations', label: 'Donazioni', Icon: FaHandHoldingHeart, currencies: [ 0 ] }, + { key: 'bonusbag', label: 'Sacco Bonus', Icon: FaShoppingBag, currencies: [ 0 ] }, + { key: 'surprise', label: 'Scatole Sorprese', Icon: FaBoxOpen, currencies: [ 5, 0 ] }, + { key: 'clubwork', label: 'Club e Lavoro', Icon: FaBriefcase, currencies: [ 0 ] } +]; + +export const VaultView: FC<{}> = props => +{ + const [ isVisible, setIsVisible ] = useState(false); + + useEffect(() => + { + const linkTracker: ILinkEventTracker = { + linkReceived: (url: string) => + { + const parts = url.split('/'); + + if(parts.length < 3) return; + if(parts[2] !== 'vault') return; + + switch(parts[1]) + { + case 'open': + setIsVisible(true); + return; + case 'close': + setIsVisible(false); + return; + case 'toggle': + setIsVisible(prevValue => !prevValue); + return; + } + }, + eventUrlPrefix: 'habboUI/' + }; + + AddLinkEventTracker(linkTracker); + + return () => RemoveLinkEventTracker(linkTracker); + }, []); + + if(!isVisible) return null; + + return ( + + setIsVisible(false) } /> + + { EARNINGS.map(row => + { + const RowIcon = row.Icon; + + return ( + + + + + { localizeWithFallback('earnings.' + row.key, row.label) } + + { row.currencies.map((currency, index) => ( + + + 0 + + )) } + + { localizeWithFallback('earnings.claim', 'Riscatta') } + + ); + }) } + + { localizeWithFallback('earnings.claim.all', 'Richiedili Tutti') } + + + + ); +};