Inventory updates

This commit is contained in:
Bill 2021-05-02 00:16:03 -04:00
parent 8d6167e3e2
commit 26f5445971
5 changed files with 15 additions and 26 deletions

View File

@ -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>
); );
} }

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>