mirror of
https://github.com/billsonnn/nitro-react.git
synced 2024-11-23 06:40:50 +01:00
Inventory updates
This commit is contained in:
parent
8d6167e3e2
commit
26f5445971
@ -1,12 +1,11 @@
|
|||||||
import classNames from 'classnames';
|
|
||||||
import { IRoomSession, RoomEngineObjectEvent, RoomEngineObjectPlacedEvent, RoomPreviewer, RoomSessionEvent } from 'nitro-renderer';
|
import { IRoomSession, RoomEngineObjectEvent, RoomEngineObjectPlacedEvent, RoomPreviewer, RoomSessionEvent } from 'nitro-renderer';
|
||||||
import { FC, useCallback, useEffect, useReducer, useState } from 'react';
|
import { FC, useCallback, useEffect, useReducer, useState } from 'react';
|
||||||
import { GetRoomEngine } from '../../api';
|
import { GetRoomEngine } from '../../api';
|
||||||
import { InventoryEvent } from '../../events';
|
import { InventoryEvent } from '../../events';
|
||||||
import { DraggableWindow } from '../../hooks/draggable-window/DraggableWindow';
|
|
||||||
import { useRoomEngineEvent } from '../../hooks/events/nitro/room/room-engine-event';
|
import { useRoomEngineEvent } from '../../hooks/events/nitro/room/room-engine-event';
|
||||||
import { useRoomSessionManagerEvent } from '../../hooks/events/nitro/session/room-session-manager-event';
|
import { useRoomSessionManagerEvent } from '../../hooks/events/nitro/session/room-session-manager-event';
|
||||||
import { useUiEvent } from '../../hooks/events/ui/ui-event';
|
import { useUiEvent } from '../../hooks/events/ui/ui-event';
|
||||||
|
import { NitroCardContentView, NitroCardHeaderView, NitroCardTabsItemView, NitroCardTabsView, NitroCardView } from '../../layout';
|
||||||
import { LocalizeText } from '../../utils/LocalizeText';
|
import { LocalizeText } from '../../utils/LocalizeText';
|
||||||
import { InventoryContextProvider } from './context/InventoryContext';
|
import { InventoryContextProvider } from './context/InventoryContext';
|
||||||
import { InventoryMessageHandler } from './InventoryMessageHandler';
|
import { InventoryMessageHandler } from './InventoryMessageHandler';
|
||||||
@ -100,25 +99,16 @@ export const InventoryView: FC<InventoryViewProps> = props =>
|
|||||||
return (
|
return (
|
||||||
<InventoryContextProvider value={ { furnitureState, dispatchFurnitureState, botState, dispatchBotState, petState, dispatchPetState, badgeState, dispatchBadgeState } }>
|
<InventoryContextProvider value={ { furnitureState, dispatchFurnitureState, botState, dispatchBotState, petState, dispatchPetState, badgeState, dispatchBadgeState } }>
|
||||||
<InventoryMessageHandler />
|
<InventoryMessageHandler />
|
||||||
{ isVisible && <DraggableWindow handle=".drag-handler">
|
{ isVisible &&
|
||||||
<div className="nitro-inventory d-flex flex-column">
|
<NitroCardView className="nitro-inventory">
|
||||||
<div className="drag-handler d-flex align-items-center bg-primary border border-bottom-0 rounded-top px-3 py-1">
|
<NitroCardHeaderView headerText={ LocalizeText('inventory.title') } onCloseClick={ event => setIsVisible(false) } />
|
||||||
<div className="d-flex flex-grow-1 justify-content-center align-items-center">
|
<NitroCardTabsView>
|
||||||
<div className="h4 m-0 text-white text-shadow">{ LocalizeText('inventory.title') }</div>
|
|
||||||
</div>
|
|
||||||
<div className="cursor-pointer" onClick={ event => setIsVisible(false) }>
|
|
||||||
<i className="fas fa-times"></i>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<ul className="nav nav-tabs justify-content-center bg-secondary border-start border-end px-3 pt-1">
|
|
||||||
{ tabs.map((name, index) =>
|
{ tabs.map((name, index) =>
|
||||||
{
|
{
|
||||||
return <li key={ index } className="nav-item me-1 cursor-pointer" onClick={ event => setCurrentTab(name) } >
|
return <NitroCardTabsItemView key={ index } tabText={ LocalizeText(name) } isActive={ (currentTab === name) } onClick={ event => setCurrentTab(name) } />
|
||||||
<span className={ 'nav-link ' + classNames({ 'active': (currentTab === name) }) }>{ LocalizeText(name) }</span>
|
|
||||||
</li>;
|
|
||||||
}) }
|
}) }
|
||||||
</ul>
|
</NitroCardTabsView>
|
||||||
<div className="bg-light rounded-bottom border border-top-0 px-3 py-2 shadow overflow-hidden content-area">
|
<NitroCardContentView>
|
||||||
{ (currentTab === InventoryTabs.FURNITURE ) &&
|
{ (currentTab === InventoryTabs.FURNITURE ) &&
|
||||||
<InventoryFurnitureView roomSession={ roomSession } roomPreviewer={ roomPreviewer } /> }
|
<InventoryFurnitureView roomSession={ roomSession } roomPreviewer={ roomPreviewer } /> }
|
||||||
{ (currentTab === InventoryTabs.BOTS ) &&
|
{ (currentTab === InventoryTabs.BOTS ) &&
|
||||||
@ -127,9 +117,8 @@ export const InventoryView: FC<InventoryViewProps> = props =>
|
|||||||
<InventoryPetView roomSession={ roomSession } roomPreviewer={ roomPreviewer } /> }
|
<InventoryPetView roomSession={ roomSession } roomPreviewer={ roomPreviewer } /> }
|
||||||
{ (currentTab === InventoryTabs.BADGES ) &&
|
{ (currentTab === InventoryTabs.BADGES ) &&
|
||||||
<InventoryBadgeView /> }
|
<InventoryBadgeView /> }
|
||||||
</div>
|
</NitroCardContentView>
|
||||||
</div>
|
</NitroCardView> }
|
||||||
</DraggableWindow> }
|
|
||||||
</InventoryContextProvider>
|
</InventoryContextProvider>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
@ -80,7 +80,7 @@ export const InventoryBadgeView: FC<InventoryBadgeViewProps> = props =>
|
|||||||
<div className="col-7">
|
<div className="col-7">
|
||||||
<InventoryBadgeResultsView badges={ badges } activeBadges={ activeBadges } />
|
<InventoryBadgeResultsView badges={ badges } activeBadges={ activeBadges } />
|
||||||
</div>
|
</div>
|
||||||
<div className="col-5">
|
<div className="col">
|
||||||
<p className="mb-1 text-black">{ LocalizeText('inventory.badges.activebadges') }</p>
|
<p className="mb-1 text-black">{ LocalizeText('inventory.badges.activebadges') }</p>
|
||||||
<InventoryActiveBadgeResultsView badges={ activeBadges } />
|
<InventoryActiveBadgeResultsView badges={ activeBadges } />
|
||||||
</div>
|
</div>
|
||||||
|
@ -85,7 +85,7 @@ export const InventoryBotView: FC<InventoryBotViewProps> = props =>
|
|||||||
<div className="col-7">
|
<div className="col-7">
|
||||||
<InventoryBotResultsView botItems={ botItems } />
|
<InventoryBotResultsView botItems={ botItems } />
|
||||||
</div>
|
</div>
|
||||||
<div className="d-flex flex-column col-5 justify-space-between">
|
<div className="d-flex flex-column col justify-space-between">
|
||||||
<RoomPreviewerView roomPreviewer={ roomPreviewer } height={ 140 } />
|
<RoomPreviewerView roomPreviewer={ roomPreviewer } height={ 140 } />
|
||||||
{ botItem && <div className="d-flex flex-column flex-grow-1">
|
{ botItem && <div className="d-flex flex-column flex-grow-1">
|
||||||
<p className="flex-grow-1 fs-6 text-black my-2">{ botItem.botData.name }</p>
|
<p className="flex-grow-1 fs-6 text-black my-2">{ botItem.botData.name }</p>
|
||||||
|
@ -116,11 +116,11 @@ export const InventoryFurnitureView: FC<InventoryFurnitureViewProps> = props =>
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="row h-100">
|
<div className="row h-100">
|
||||||
<div className="col col-7">
|
<div className="col-7">
|
||||||
<InventoryFurnitureSearchView groupItems={ groupItems } setGroupItems={ setFilteredGroupItems } />
|
<InventoryFurnitureSearchView groupItems={ groupItems } setGroupItems={ setFilteredGroupItems } />
|
||||||
<InventoryFurnitureResultsView groupItems={ filteredGroupItems } />
|
<InventoryFurnitureResultsView groupItems={ filteredGroupItems } />
|
||||||
</div>
|
</div>
|
||||||
<div className="d-flex flex-column col col-5 justify-space-between">
|
<div className="d-flex flex-column col justify-space-between">
|
||||||
<RoomPreviewerView roomPreviewer={ roomPreviewer } height={ 140 } />
|
<RoomPreviewerView roomPreviewer={ roomPreviewer } height={ 140 } />
|
||||||
{ groupItem && <div className="d-flex flex-column flex-grow-1">
|
{ groupItem && <div className="d-flex flex-column flex-grow-1">
|
||||||
<p className="flex-grow-1 fs-6 text-black my-2">{ groupItem.name }</p>
|
<p className="flex-grow-1 fs-6 text-black my-2">{ groupItem.name }</p>
|
||||||
|
@ -85,7 +85,7 @@ export const InventoryPetView: FC<InventoryPetViewProps> = props =>
|
|||||||
<div className="col-7">
|
<div className="col-7">
|
||||||
<InventoryPetResultsView petItems={ petItems } />
|
<InventoryPetResultsView petItems={ petItems } />
|
||||||
</div>
|
</div>
|
||||||
<div className="d-flex flex-column col-5 justify-space-between">
|
<div className="d-flex flex-column col justify-space-between">
|
||||||
<RoomPreviewerView roomPreviewer={ roomPreviewer } height={ 140 } />
|
<RoomPreviewerView roomPreviewer={ roomPreviewer } height={ 140 } />
|
||||||
{ petItem && <div className="d-flex flex-column flex-grow-1">
|
{ petItem && <div className="d-flex flex-column flex-grow-1">
|
||||||
<p className="flex-grow-1 fs-6 text-black my-2">{ petItem.petData.name }</p>
|
<p className="flex-grow-1 fs-6 text-black my-2">{ petItem.petData.name }</p>
|
||||||
|
Loading…
Reference in New Issue
Block a user