2022-03-30 18:42:04 +02:00
|
|
|
import { BadgePointLimitsEvent, ILinkEventTracker, IRoomSession, RoomEngineObjectEvent, RoomEngineObjectPlacedEvent, RoomPreviewer, RoomSessionEvent } from '@nitrots/nitro-renderer';
|
2022-03-30 16:19:09 +02:00
|
|
|
import { FC, useCallback, useEffect, useState } from 'react';
|
2022-03-30 18:42:04 +02:00
|
|
|
import { AddEventLinkTracker, GetLocalization, GetRoomEngine, LocalizeText, RemoveLinkEventTracker, UnseenItemCategory } from '../../api';
|
2022-03-30 16:19:09 +02:00
|
|
|
import { isObjectMoverRequested, setObjectMoverRequested } from '../../api/inventory/InventoryUtilities';
|
2022-03-03 08:23:01 +01:00
|
|
|
import { NitroCardContentView, NitroCardHeaderView, NitroCardTabsItemView, NitroCardTabsView, NitroCardView } from '../../common';
|
2022-03-30 18:46:48 +02:00
|
|
|
import { useInventoryTrade, useInventoryUnseenTracker, UseMessageEventHook, UseRoomEngineEvent, UseRoomSessionManagerEvent } from '../../hooks';
|
2022-03-30 16:19:09 +02:00
|
|
|
import { InventoryBadgeView } from './views/InventoryBadgeView';
|
|
|
|
import { InventoryBotView } from './views/InventoryBotView';
|
|
|
|
import { InventoryFurnitureView } from './views/InventoryFurnitureView';
|
|
|
|
import { InventoryPetView } from './views/InventoryPetView';
|
|
|
|
import { InventoryTradeView } from './views/InventoryTradeView';
|
2021-07-05 08:46:47 +02:00
|
|
|
|
2021-12-09 06:37:19 +01:00
|
|
|
const TAB_FURNITURE: string = 'inventory.furni';
|
|
|
|
const TAB_BOTS: string = 'inventory.bots';
|
|
|
|
const TAB_PETS: string = 'inventory.furni.tab.pets';
|
|
|
|
const TAB_BADGES: string = 'inventory.badges';
|
|
|
|
const TABS = [ TAB_FURNITURE, TAB_BOTS, TAB_PETS, TAB_BADGES ];
|
2021-07-16 19:17:52 +02:00
|
|
|
const UNSEEN_CATEGORIES = [ UnseenItemCategory.FURNI, UnseenItemCategory.BOT, UnseenItemCategory.PET, UnseenItemCategory.BADGE ];
|
2021-04-22 07:29:42 +02:00
|
|
|
|
2021-12-09 06:37:19 +01:00
|
|
|
export const InventoryView: FC<{}> = props =>
|
2021-04-22 05:18:44 +02:00
|
|
|
{
|
2021-04-24 03:03:34 +02:00
|
|
|
const [ isVisible, setIsVisible ] = useState(false);
|
2021-07-16 19:17:52 +02:00
|
|
|
const [ currentTab, setCurrentTab ] = useState<string>(TABS[0]);
|
2021-04-28 07:27:15 +02:00
|
|
|
const [ roomSession, setRoomSession ] = useState<IRoomSession>(null);
|
|
|
|
const [ roomPreviewer, setRoomPreviewer ] = useState<RoomPreviewer>(null);
|
2022-03-30 18:46:48 +02:00
|
|
|
const { isTrading = false, stopTrading = null } = useInventoryTrade();
|
|
|
|
const { getCount = null, resetCategory = null } = useInventoryUnseenTracker();
|
2021-04-28 07:27:15 +02:00
|
|
|
|
2022-03-30 18:42:04 +02:00
|
|
|
const close = () =>
|
2021-07-07 11:05:27 +02:00
|
|
|
{
|
2022-03-30 18:42:04 +02:00
|
|
|
if(isTrading) stopTrading();
|
2021-07-05 08:46:47 +02:00
|
|
|
|
2022-03-30 18:42:04 +02:00
|
|
|
setIsVisible(false);
|
|
|
|
}
|
2021-04-22 05:18:44 +02:00
|
|
|
|
2021-04-28 19:47:33 +02:00
|
|
|
const onRoomEngineObjectPlacedEvent = useCallback((event: RoomEngineObjectPlacedEvent) =>
|
|
|
|
{
|
|
|
|
if(!isObjectMoverRequested()) return;
|
|
|
|
|
|
|
|
setObjectMoverRequested(false);
|
|
|
|
|
2021-06-13 22:01:22 +02:00
|
|
|
if(!event.placedInRoom) setIsVisible(true);
|
2021-04-28 19:47:33 +02:00
|
|
|
}, []);
|
|
|
|
|
2022-03-03 10:11:31 +01:00
|
|
|
UseRoomEngineEvent(RoomEngineObjectEvent.PLACED, onRoomEngineObjectPlacedEvent);
|
2021-04-28 19:47:33 +02:00
|
|
|
|
2021-04-22 08:45:47 +02:00
|
|
|
const onRoomSessionEvent = useCallback((event: RoomSessionEvent) =>
|
|
|
|
{
|
|
|
|
switch(event.type)
|
|
|
|
{
|
|
|
|
case RoomSessionEvent.CREATED:
|
2021-04-28 07:27:15 +02:00
|
|
|
setRoomSession(event.session);
|
2021-04-22 08:45:47 +02:00
|
|
|
return;
|
|
|
|
case RoomSessionEvent.ENDED:
|
2021-04-28 07:27:15 +02:00
|
|
|
setRoomSession(null);
|
2021-04-22 08:45:47 +02:00
|
|
|
setIsVisible(false);
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
}, []);
|
|
|
|
|
2022-03-03 10:11:31 +01:00
|
|
|
UseRoomSessionManagerEvent(RoomSessionEvent.CREATED, onRoomSessionEvent);
|
|
|
|
UseRoomSessionManagerEvent(RoomSessionEvent.ENDED, onRoomSessionEvent);
|
2021-04-22 08:45:47 +02:00
|
|
|
|
2022-03-30 16:19:09 +02:00
|
|
|
const onBadgePointLimitsEvent = useCallback((event: BadgePointLimitsEvent) =>
|
2021-07-16 19:17:52 +02:00
|
|
|
{
|
2022-03-30 16:19:09 +02:00
|
|
|
const parser = event.getParser();
|
2021-07-16 19:17:52 +02:00
|
|
|
|
2022-03-30 16:19:09 +02:00
|
|
|
for(const data of parser.data) GetLocalization().setBadgePointLimit(data.badgeId, data.limit);
|
|
|
|
}, []);
|
2021-07-16 19:17:52 +02:00
|
|
|
|
2022-03-30 16:19:09 +02:00
|
|
|
UseMessageEventHook(BadgePointLimitsEvent, onBadgePointLimitsEvent);
|
2021-07-16 19:17:52 +02:00
|
|
|
|
2022-03-30 16:19:09 +02:00
|
|
|
useEffect(() =>
|
2021-07-16 19:17:52 +02:00
|
|
|
{
|
2022-03-30 16:19:09 +02:00
|
|
|
const linkTracker: ILinkEventTracker = {
|
|
|
|
linkReceived: (url: string) =>
|
|
|
|
{
|
|
|
|
const parts = url.split('/');
|
2021-07-16 19:17:52 +02:00
|
|
|
|
2022-03-30 16:19:09 +02:00
|
|
|
if(parts.length < 2) return;
|
|
|
|
|
|
|
|
switch(parts[1])
|
|
|
|
{
|
|
|
|
case 'show':
|
|
|
|
setIsVisible(true);
|
|
|
|
return;
|
|
|
|
case 'hide':
|
|
|
|
setIsVisible(false);
|
|
|
|
return;
|
|
|
|
case 'toggle':
|
|
|
|
setIsVisible(prevValue => !prevValue);
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
},
|
|
|
|
eventUrlPrefix: 'inventory/'
|
|
|
|
};
|
2021-07-16 19:17:52 +02:00
|
|
|
|
2022-03-30 16:19:09 +02:00
|
|
|
AddEventLinkTracker(linkTracker);
|
2021-07-16 19:17:52 +02:00
|
|
|
|
2022-03-30 16:19:09 +02:00
|
|
|
return () => RemoveLinkEventTracker(linkTracker);
|
|
|
|
}, []);
|
2021-07-16 19:17:52 +02:00
|
|
|
|
2021-04-28 07:27:15 +02:00
|
|
|
useEffect(() =>
|
|
|
|
{
|
|
|
|
setRoomPreviewer(new RoomPreviewer(GetRoomEngine(), ++RoomPreviewer.PREVIEW_COUNTER));
|
|
|
|
|
|
|
|
return () =>
|
|
|
|
{
|
|
|
|
setRoomPreviewer(prevValue =>
|
2022-04-01 22:12:46 +02:00
|
|
|
{
|
|
|
|
prevValue.dispose();
|
2021-04-28 07:27:15 +02:00
|
|
|
|
2022-04-01 22:12:46 +02:00
|
|
|
return null;
|
|
|
|
});
|
2021-04-28 07:27:15 +02:00
|
|
|
}
|
|
|
|
}, []);
|
|
|
|
|
2021-07-05 08:46:47 +02:00
|
|
|
useEffect(() =>
|
|
|
|
{
|
2022-03-30 18:42:04 +02:00
|
|
|
if(!isVisible && isTrading) setIsVisible(true);
|
|
|
|
}, [ isVisible, isTrading ]);
|
2022-03-30 16:19:09 +02:00
|
|
|
|
|
|
|
if(!isVisible) return null;
|
2021-07-23 06:27:55 +02:00
|
|
|
|
2021-04-22 05:18:44 +02:00
|
|
|
return (
|
2022-03-30 16:19:09 +02:00
|
|
|
<NitroCardView uniqueKey={'inventory'} className="nitro-inventory" theme={ isTrading ? 'primary-slim' : '' } >
|
|
|
|
<NitroCardHeaderView headerText={ LocalizeText('inventory.title') } onCloseClick={ close } />
|
|
|
|
{ !isTrading &&
|
|
|
|
<>
|
|
|
|
<NitroCardTabsView>
|
|
|
|
{ TABS.map((name, index) =>
|
2022-04-01 22:12:46 +02:00
|
|
|
{
|
|
|
|
const unseenCount = getCount(UNSEEN_CATEGORIES[index]);
|
|
|
|
|
|
|
|
return (
|
|
|
|
<NitroCardTabsItemView key={ index } isActive={ (currentTab === name) } onClick={ event => setCurrentTab(name) } count={ unseenCount }>
|
|
|
|
{ LocalizeText(name) }
|
|
|
|
</NitroCardTabsItemView>
|
|
|
|
);
|
|
|
|
}) }
|
2022-03-30 16:19:09 +02:00
|
|
|
</NitroCardTabsView>
|
|
|
|
<NitroCardContentView>
|
|
|
|
{ (currentTab === TAB_FURNITURE ) &&
|
|
|
|
<InventoryFurnitureView roomSession={ roomSession } roomPreviewer={ roomPreviewer } /> }
|
|
|
|
{ (currentTab === TAB_BOTS ) &&
|
|
|
|
<InventoryBotView roomSession={ roomSession } roomPreviewer={ roomPreviewer } /> }
|
|
|
|
{ (currentTab === TAB_PETS ) &&
|
|
|
|
<InventoryPetView roomSession={ roomSession } roomPreviewer={ roomPreviewer } /> }
|
|
|
|
{ (currentTab === TAB_BADGES ) &&
|
|
|
|
<InventoryBadgeView /> }
|
|
|
|
</NitroCardContentView>
|
|
|
|
</> }
|
|
|
|
{ isTrading &&
|
|
|
|
<NitroCardContentView>
|
|
|
|
<InventoryTradeView cancelTrade={ close } />
|
|
|
|
</NitroCardContentView> }
|
|
|
|
</NitroCardView>
|
2021-04-22 05:18:44 +02:00
|
|
|
);
|
|
|
|
}
|