2021-04-28 07:27:15 +02:00
|
|
|
import classNames from 'classnames';
|
|
|
|
import { IRoomSession, RoomPreviewer, RoomSessionEvent } from 'nitro-renderer';
|
|
|
|
import { FC, useCallback, useEffect, useState } from 'react';
|
|
|
|
import { GetRoomEngine } from '../../api';
|
2021-04-22 05:18:44 +02:00
|
|
|
import { InventoryEvent } from '../../events';
|
|
|
|
import { DraggableWindow } from '../../hooks/draggable-window/DraggableWindow';
|
2021-04-22 08:45:47 +02:00
|
|
|
import { useRoomSessionManagerEvent } from '../../hooks/events/nitro/session/room-session-manager-event';
|
2021-04-22 05:18:44 +02:00
|
|
|
import { useUiEvent } from '../../hooks/events/ui/ui-event';
|
|
|
|
import { LocalizeText } from '../../utils/LocalizeText';
|
|
|
|
import { InventoryMessageHandler } from './InventoryMessageHandler';
|
2021-04-24 03:03:34 +02:00
|
|
|
import { InventoryTabs, InventoryViewProps } from './InventoryView.types';
|
2021-04-28 07:27:15 +02:00
|
|
|
import { GroupItem } from './utils/GroupItem';
|
|
|
|
import { InventoryFurnitureView } from './views/furniture/InventoryFurnitureView';
|
2021-04-22 07:29:42 +02:00
|
|
|
|
2021-04-22 05:18:44 +02:00
|
|
|
export const InventoryView: FC<InventoryViewProps> = props =>
|
|
|
|
{
|
2021-04-24 03:03:34 +02:00
|
|
|
const tabs = [ InventoryTabs.FURNITURE, InventoryTabs.BOTS, InventoryTabs.PETS, InventoryTabs.BADGES ];
|
2021-04-22 07:29:42 +02:00
|
|
|
|
2021-04-24 03:03:34 +02:00
|
|
|
const [ isVisible, setIsVisible ] = useState(false);
|
|
|
|
const [ currentTab, setCurrentTab ] = useState<string>(tabs[0]);
|
2021-04-22 05:18:44 +02:00
|
|
|
|
2021-04-28 07:27:15 +02:00
|
|
|
const [ roomSession, setRoomSession ] = useState<IRoomSession>(null);
|
|
|
|
const [ needsFurniUpdate, setNeedsFurniUpdate ] = useState(true);
|
|
|
|
const [ groupItem, setGroupItem ] = useState<GroupItem>(null);
|
|
|
|
const [ groupItems, setGroupItems ] = useState<GroupItem[]>([]);
|
|
|
|
const [ roomPreviewer, setRoomPreviewer ] = useState<RoomPreviewer>(null);
|
|
|
|
|
2021-04-22 05:18:44 +02:00
|
|
|
const onInventoryEvent = useCallback((event: InventoryEvent) =>
|
|
|
|
{
|
|
|
|
switch(event.type)
|
|
|
|
{
|
|
|
|
case InventoryEvent.SHOW_INVENTORY:
|
|
|
|
setIsVisible(true);
|
|
|
|
return;
|
2021-04-28 07:27:15 +02:00
|
|
|
case InventoryEvent.HIDE_INVENTORY:
|
|
|
|
setIsVisible(false);
|
|
|
|
return;
|
2021-04-22 05:18:44 +02:00
|
|
|
case InventoryEvent.TOGGLE_INVENTORY:
|
|
|
|
setIsVisible(value => !value);
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
}, []);
|
|
|
|
|
|
|
|
useUiEvent(InventoryEvent.SHOW_INVENTORY, onInventoryEvent);
|
2021-04-28 07:27:15 +02:00
|
|
|
useUiEvent(InventoryEvent.HIDE_INVENTORY, onInventoryEvent);
|
2021-04-22 05:18:44 +02:00
|
|
|
useUiEvent(InventoryEvent.TOGGLE_INVENTORY, onInventoryEvent);
|
|
|
|
|
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;
|
|
|
|
}
|
|
|
|
}, []);
|
|
|
|
|
|
|
|
useRoomSessionManagerEvent(RoomSessionEvent.CREATED, onRoomSessionEvent);
|
|
|
|
useRoomSessionManagerEvent(RoomSessionEvent.ENDED, onRoomSessionEvent);
|
|
|
|
|
2021-04-28 07:27:15 +02:00
|
|
|
useEffect(() =>
|
|
|
|
{
|
|
|
|
setRoomPreviewer(new RoomPreviewer(GetRoomEngine(), ++RoomPreviewer.PREVIEW_COUNTER));
|
|
|
|
|
|
|
|
return () =>
|
|
|
|
{
|
|
|
|
setRoomPreviewer(prevValue =>
|
|
|
|
{
|
|
|
|
prevValue.dispose();
|
|
|
|
|
|
|
|
return null;
|
|
|
|
});
|
|
|
|
}
|
|
|
|
}, []);
|
|
|
|
|
2021-04-22 05:18:44 +02:00
|
|
|
function hideInventory(): void
|
|
|
|
{
|
|
|
|
setIsVisible(false);
|
|
|
|
}
|
|
|
|
|
|
|
|
return (
|
2021-04-28 07:27:15 +02:00
|
|
|
<>
|
|
|
|
<InventoryMessageHandler
|
|
|
|
setNeedsFurniUpdate={ setNeedsFurniUpdate }
|
|
|
|
setGroupItems={ setGroupItems } />
|
2021-04-22 05:18:44 +02:00
|
|
|
{ isVisible && <DraggableWindow handle=".drag-handler">
|
2021-04-28 07:27:15 +02:00
|
|
|
<div className="nitro-inventory d-flex flex-column">
|
|
|
|
<div className="drag-handler d-flex align-items-center bg-primary border border-bottom-0 rounded-top px-3 py-1">
|
|
|
|
<div className="d-flex flex-grow-1 justify-content-center align-items-center">
|
|
|
|
<div className="h4 m-0 text-white text-shadow">{ LocalizeText('inventory.title') }</div>
|
|
|
|
</div>
|
|
|
|
<div className="cursor-pointer" onClick={ hideInventory }>
|
2021-04-22 05:18:44 +02:00
|
|
|
<i className="fas fa-times"></i>
|
2021-04-28 07:27:15 +02:00
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<ul className="nav nav-tabs justify-content-center bg-secondary border-start border-end px-3 pt-1">
|
|
|
|
{ tabs.map((name, index) =>
|
|
|
|
{
|
|
|
|
return <li key={ index } className="nav-item me-1 cursor-pointer" onClick={ event => setCurrentTab(name) } >
|
|
|
|
<span className={ 'nav-link ' + classNames({ 'active': (currentTab === name) }) }>{ LocalizeText(name) }</span>
|
|
|
|
</li>;
|
|
|
|
}) }
|
|
|
|
</ul>
|
2021-04-28 07:41:26 +02:00
|
|
|
<div className="bg-light rounded-bottom border border-top-0 px-3 py-2 h-100 shadow overflow-hidden">
|
2021-04-28 07:27:15 +02:00
|
|
|
{ (currentTab === InventoryTabs.FURNITURE ) && <InventoryFurnitureView
|
|
|
|
needsFurniUpdate={ needsFurniUpdate }
|
|
|
|
setNeedsFurniUpdate={ setNeedsFurniUpdate }
|
|
|
|
groupItem={ groupItem }
|
|
|
|
setGroupItem={ setGroupItem }
|
|
|
|
groupItems={ groupItems }
|
|
|
|
roomSession={ roomSession }
|
|
|
|
roomPreviewer={ roomPreviewer } /> }
|
2021-04-22 05:18:44 +02:00
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</DraggableWindow> }
|
2021-04-28 07:27:15 +02:00
|
|
|
</>
|
2021-04-22 05:18:44 +02:00
|
|
|
);
|
|
|
|
}
|