mirror of
https://github.com/billsonnn/nitro-react.git
synced 2024-10-23 11:23:05 +02:00
More inventory changes
This commit is contained in:
Bill
parent
75d840f259
commit
867b2652ae
@ -2,6 +2,8 @@ import { RequestBadgesComposer } from '@nitrots/nitro-renderer';
|
||||
import { FC, useEffect } from 'react';
|
||||
import { LocalizeBadgeName, LocalizeText } from '../../../../api';
|
||||
import { SendMessageHook } from '../../../../hooks/messages/message-event';
|
||||
import { NitroLayoutButton, NitroLayoutFlex } from '../../../../layout';
|
||||
import { NitroLayoutBase } from '../../../../layout/base';
|
||||
import { NitroLayoutFlexColumn } from '../../../../layout/flex-column/NitroLayoutFlexColumn';
|
||||
import { NitroLayoutGridColumn } from '../../../../layout/grid/column/NitroLayoutGridColumn';
|
||||
import { NitroLayoutGrid } from '../../../../layout/grid/NitroLayoutGrid';
|
||||
@ -83,18 +85,18 @@ export const InventoryBadgeView: FC<InventoryBadgeViewProps> = props =>
|
||||
</NitroLayoutGridColumn>
|
||||
<NitroLayoutGridColumn className="justify-content-between" size={ 5 } gap={ 2 } overflow="auto">
|
||||
<NitroLayoutFlexColumn overflow="hidden" gap={ 2 }>
|
||||
<div className="text-black text-truncate">{ LocalizeText('inventory.badges.activebadges') }</div>
|
||||
<NitroLayoutBase className="text-black text-truncate">{ LocalizeText('inventory.badges.activebadges') }</NitroLayoutBase>
|
||||
<InventoryActiveBadgeResultsView badges={ activeBadges } />
|
||||
</NitroLayoutFlexColumn>
|
||||
{ badge && (badge.length > 0) &&
|
||||
<NitroLayoutFlexColumn gap={ 2 }>
|
||||
<div className="d-flex justify-content-between align-items-center">
|
||||
<div className="d-flex flex-grow-1 gap-2 align-items-center overflow-hidden">
|
||||
<NitroLayoutFlex className="justify-content-between align-items-center">
|
||||
<NitroLayoutFlex className="flex-grow-1 align-items-center" gap={ 2 } overflow="hidden">
|
||||
<BadgeImageView badgeCode={ badge } />
|
||||
<div className="flex-grow-1 text-black text-truncate">{ LocalizeBadgeName(badge) }</div>
|
||||
</div>
|
||||
</div>
|
||||
<button type="button" className={ 'btn btn-sm btn-' + (isWearingBadge(badge) ? 'danger' : 'success') } disabled={ !isWearingBadge(badge) && !canWearBadges() } onClick={ toggleBadge }>{ LocalizeText(isWearingBadge(badge) ? 'inventory.badges.clearbadge' : 'inventory.badges.wearbadge')}</button>
|
||||
<NitroLayoutBase className="flex-grow-1 text-black text-truncate">{ LocalizeBadgeName(badge) }</NitroLayoutBase>
|
||||
</NitroLayoutFlex>
|
||||
</NitroLayoutFlex>
|
||||
<NitroLayoutButton variant={ (isWearingBadge(badge) ? 'danger' : 'success') } size="sm" disabled={ !isWearingBadge(badge) && !canWearBadges() } onClick={ toggleBadge }>{ LocalizeText(isWearingBadge(badge) ? 'inventory.badges.clearbadge' : 'inventory.badges.wearbadge') }</NitroLayoutButton>
|
||||
</NitroLayoutFlexColumn> }
|
||||
</NitroLayoutGridColumn>
|
||||
</NitroLayoutGrid>
|
||||
|
||||
@ -2,6 +2,8 @@ import { GetBotInventoryComposer, RoomObjectVariable } from '@nitrots/nitro-rend
|
||||
import { FC, useEffect } from 'react';
|
||||
import { GetRoomEngine, LocalizeText } from '../../../../api';
|
||||
import { SendMessageHook } from '../../../../hooks/messages/message-event';
|
||||
import { NitroLayoutButton } from '../../../../layout';
|
||||
import { NitroLayoutBase } from '../../../../layout/base';
|
||||
import { NitroLayoutFlexColumn } from '../../../../layout/flex-column/NitroLayoutFlexColumn';
|
||||
import { NitroLayoutGridColumn } from '../../../../layout/grid/column/NitroLayoutGridColumn';
|
||||
import { NitroLayoutGrid } from '../../../../layout/grid/NitroLayoutGrid';
|
||||
@ -9,6 +11,7 @@ import { RoomPreviewerView } from '../../../shared/room-previewer/RoomPreviewerV
|
||||
import { attemptBotPlacement } from '../../common/BotUtilities';
|
||||
import { useInventoryContext } from '../../context/InventoryContext';
|
||||
import { InventoryBotActions } from '../../reducers/InventoryBotReducer';
|
||||
import { InventoryCategoryEmptyView } from '../category-empty/InventoryCategoryEmptyView';
|
||||
import { InventoryBotViewProps } from './InventoryBotView.types';
|
||||
import { InventoryBotResultsView } from './results/InventoryBotResultsView';
|
||||
|
||||
@ -65,22 +68,7 @@ export const InventoryBotView: FC<InventoryBotViewProps> = props =>
|
||||
roomPreviewer.addAvatarIntoRoom(botData.figure, 0);
|
||||
}, [ roomPreviewer, botItem ]);
|
||||
|
||||
if(!botItems || !botItems.length)
|
||||
{
|
||||
return (
|
||||
<div className="row h-100">
|
||||
<div className="col-5 d-flex justify-content-center align-items-center">
|
||||
<div className="empty-image"></div>
|
||||
</div>
|
||||
<div className="d-flex flex-column col-7 justify-content-center">
|
||||
<div className="h5 m-0 text-black fw-bold m-0 mb-2">
|
||||
{ LocalizeText('inventory.empty.bots.title') }
|
||||
</div>
|
||||
<div className="h6 text-black">{ LocalizeText('inventory.empty.bots.desc') }</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
if(!botItems || !botItems.length) return <InventoryCategoryEmptyView title={ LocalizeText('inventory.empty.bots.title') } desc={ LocalizeText('inventory.empty.bots.desc') } />;
|
||||
|
||||
return (
|
||||
<NitroLayoutGrid>
|
||||
@ -93,8 +81,11 @@ export const InventoryBotView: FC<InventoryBotViewProps> = props =>
|
||||
</NitroLayoutFlexColumn>
|
||||
{ botItem &&
|
||||
<NitroLayoutFlexColumn className="flex-grow-1" gap={ 2 }>
|
||||
<div className="flex-grow-1 text-black text-truncate">{ botItem.botData.name }</div>
|
||||
{ !!roomSession && <button type="button" className="btn btn-success btn-sm" onClick={ event => attemptBotPlacement(botItem) }>{ LocalizeText('inventory.furni.placetoroom') }</button> }
|
||||
<NitroLayoutBase className="flex-grow-1 text-black text-truncate">{ botItem.botData.name }</NitroLayoutBase>
|
||||
{ !!roomSession &&
|
||||
<NitroLayoutButton variant="success" size="sm" onClick={ event => attemptBotPlacement(botItem) }>
|
||||
{ LocalizeText('inventory.furni.placetoroom') }
|
||||
</NitroLayoutButton> }
|
||||
</NitroLayoutFlexColumn> }
|
||||
</NitroLayoutGridColumn>
|
||||
</NitroLayoutGrid>
|
||||
|
||||
@ -0,0 +1,21 @@
|
||||
import { FC } from 'react';
|
||||
import { NitroLayoutGrid, NitroLayoutGridColumn } from '../../../../layout';
|
||||
import { NitroLayoutBase } from '../../../../layout/base';
|
||||
import { InventoryCategoryEmptyViewProps } from './InventoryCategoryEmptyView.types';
|
||||
|
||||
export const InventoryCategoryEmptyView: FC<InventoryCategoryEmptyViewProps> = props =>
|
||||
{
|
||||
const { title = '', desc = '', ...rest } = props;
|
||||
|
||||
return (
|
||||
<NitroLayoutGrid { ...rest }>
|
||||
<NitroLayoutGridColumn className="justify-content-center align-items-center" size={ 5 } overflow="hidden">
|
||||
<div className="empty-image" />
|
||||
</NitroLayoutGridColumn>
|
||||
<NitroLayoutGridColumn className="justify-content-center" size={ 7 } overflow="hidden">
|
||||
<NitroLayoutBase className="text-black text-truncate fs-5 fw-bold">{ title }</NitroLayoutBase>
|
||||
<NitroLayoutBase className="text-black" overflow="auto">{ desc }</NitroLayoutBase>
|
||||
</NitroLayoutGridColumn>
|
||||
</NitroLayoutGrid>
|
||||
);
|
||||
}
|
||||
@ -0,0 +1,7 @@
|
||||
import { NitroLayoutGridProps } from '../../../../layout';
|
||||
|
||||
export interface InventoryCategoryEmptyViewProps extends NitroLayoutGridProps
|
||||
{
|
||||
title: string;
|
||||
desc: string;
|
||||
}
|
||||
@ -2,6 +2,8 @@ import { FurnitureListComposer, RoomObjectVariable, Vector3d } from '@nitrots/ni
|
||||
import { FC, useEffect, useState } from 'react';
|
||||
import { GetRoomEngine, GetSessionDataManager, LocalizeText } from '../../../../api';
|
||||
import { SendMessageHook } from '../../../../hooks/messages';
|
||||
import { NitroLayoutButton } from '../../../../layout';
|
||||
import { NitroLayoutBase } from '../../../../layout/base';
|
||||
import { NitroLayoutFlexColumn } from '../../../../layout/flex-column/NitroLayoutFlexColumn';
|
||||
import { NitroLayoutGridColumn } from '../../../../layout/grid/column/NitroLayoutGridColumn';
|
||||
import { NitroLayoutGrid } from '../../../../layout/grid/NitroLayoutGrid';
|
||||
@ -13,6 +15,7 @@ import { attemptItemPlacement } from '../../common/FurnitureUtilities';
|
||||
import { GroupItem } from '../../common/GroupItem';
|
||||
import { useInventoryContext } from '../../context/InventoryContext';
|
||||
import { InventoryFurnitureActions } from '../../reducers/InventoryFurnitureReducer';
|
||||
import { InventoryCategoryEmptyView } from '../category-empty/InventoryCategoryEmptyView';
|
||||
import { InventoryFurnitureViewProps } from './InventoryFurnitureView.types';
|
||||
import { InventoryFurnitureResultsView } from './results/InventoryFurnitureResultsView';
|
||||
import { InventoryFurnitureSearchView } from './search/InventoryFurnitureSearchView';
|
||||
@ -101,22 +104,7 @@ export const InventoryFurnitureView: FC<InventoryFurnitureViewProps> = props =>
|
||||
}
|
||||
}, [ roomPreviewer, groupItem ]);
|
||||
|
||||
if(!groupItems || !groupItems.length)
|
||||
{
|
||||
return (
|
||||
<div className="row h-100">
|
||||
<div className="col-5 d-flex justify-content-center align-items-center">
|
||||
<div className="empty-image"></div>
|
||||
</div>
|
||||
<div className="d-flex flex-column col-7 justify-content-center">
|
||||
<div className="h5 m-0 text-black fw-bold m-0 mb-2">
|
||||
{ LocalizeText('inventory.empty.title') }
|
||||
</div>
|
||||
<div className="h6 text-black">{ LocalizeText('inventory.empty.desc') }</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
if(!groupItems || !groupItems.length) return <InventoryCategoryEmptyView title={ LocalizeText('inventory.empty.title') } desc={ LocalizeText('inventory.empty.desc') } />;
|
||||
|
||||
return (
|
||||
<NitroLayoutGrid>
|
||||
@ -128,19 +116,21 @@ export const InventoryFurnitureView: FC<InventoryFurnitureViewProps> = props =>
|
||||
<NitroLayoutFlexColumn overflow="hidden" position="relative">
|
||||
<RoomPreviewerView roomPreviewer={ roomPreviewer } height={ 140 } />
|
||||
{ groupItem && groupItem.stuffData.isUnique &&
|
||||
<div className="position-absolute top-2 end-2">
|
||||
<NitroLayoutBase className="top-2 end-2" position="absolute">
|
||||
<LimitedEditionCompactPlateView uniqueNumber={ groupItem.stuffData.uniqueNumber } uniqueSeries={ groupItem.stuffData.uniqueSeries } />
|
||||
</div> }
|
||||
</NitroLayoutBase> }
|
||||
{ (groupItem && groupItem.stuffData.rarityLevel > -1) &&
|
||||
<div className="position-absolute top-2 end-2">
|
||||
<NitroLayoutBase className="top-2 end-2" position="absolute">
|
||||
<RarityLevelView level={ groupItem.stuffData.rarityLevel } />
|
||||
</div> }
|
||||
</NitroLayoutBase> }
|
||||
</NitroLayoutFlexColumn>
|
||||
{ groupItem &&
|
||||
<NitroLayoutFlexColumn className="flex-grow-1" gap={ 2 }>
|
||||
<div className="flex-grow-1 text-black text-truncate">{ groupItem.name }</div>
|
||||
<NitroLayoutBase className="flex-grow-1 text-black text-truncate">{ groupItem.name }</NitroLayoutBase>
|
||||
{ !!roomSession &&
|
||||
<button type="button" className="btn btn-success btn-sm" onClick={ event => attemptItemPlacement(groupItem) }>{ LocalizeText('inventory.furni.placetoroom') }</button> }
|
||||
<NitroLayoutButton variant="success" size="sm" onClick={ event => attemptItemPlacement(groupItem) }>
|
||||
{ LocalizeText('inventory.furni.placetoroom') }
|
||||
</NitroLayoutButton> }
|
||||
</NitroLayoutFlexColumn> }
|
||||
</NitroLayoutGridColumn>
|
||||
</NitroLayoutGrid>
|
||||
|
||||
@ -2,6 +2,7 @@ import { RequestPetsComposer, RoomObjectVariable } from '@nitrots/nitro-renderer
|
||||
import { FC, useEffect } from 'react';
|
||||
import { GetRoomEngine, LocalizeText } from '../../../../api';
|
||||
import { SendMessageHook } from '../../../../hooks/messages/message-event';
|
||||
import { NitroLayoutBase } from '../../../../layout/base';
|
||||
import { NitroLayoutFlexColumn } from '../../../../layout/flex-column/NitroLayoutFlexColumn';
|
||||
import { NitroLayoutGridColumn } from '../../../../layout/grid/column/NitroLayoutGridColumn';
|
||||
import { NitroLayoutGrid } from '../../../../layout/grid/NitroLayoutGrid';
|
||||
@ -9,6 +10,7 @@ import { RoomPreviewerView } from '../../../shared/room-previewer/RoomPreviewerV
|
||||
import { attemptPetPlacement } from '../../common/PetUtilities';
|
||||
import { useInventoryContext } from '../../context/InventoryContext';
|
||||
import { InventoryPetActions } from '../../reducers/InventoryPetReducer';
|
||||
import { InventoryCategoryEmptyView } from '../category-empty/InventoryCategoryEmptyView';
|
||||
import { InventoryPetViewProps } from './InventoryPetView.types';
|
||||
import { InventoryPetResultsView } from './results/InventoryPetResultsView';
|
||||
|
||||
@ -65,22 +67,7 @@ export const InventoryPetView: FC<InventoryPetViewProps> = props =>
|
||||
roomPreviewer.addPetIntoRoom(petData.figureString);
|
||||
}, [ roomPreviewer, petItem ]);
|
||||
|
||||
if(!petItems || !petItems.length)
|
||||
{
|
||||
return (
|
||||
<div className="row h-100">
|
||||
<div className="col-5 d-flex justify-content-center align-items-center">
|
||||
<div className="empty-image"></div>
|
||||
</div>
|
||||
<div className="d-flex flex-column col-7 justify-content-center">
|
||||
<div className="h5 m-0 text-black fw-bold m-0 mb-2">
|
||||
{ LocalizeText('inventory.empty.pets.title') }
|
||||
</div>
|
||||
<div className="h6 text-black">{ LocalizeText('inventory.empty.pets.desc') }</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
if(!petItems || !petItems.length) return <InventoryCategoryEmptyView title={ LocalizeText('inventory.empty.pets.title') } desc={ LocalizeText('inventory.empty.pets.desc') } />;
|
||||
|
||||
return (
|
||||
<NitroLayoutGrid>
|
||||
@ -93,7 +80,7 @@ export const InventoryPetView: FC<InventoryPetViewProps> = props =>
|
||||
</NitroLayoutFlexColumn>
|
||||
{ petItem &&
|
||||
<NitroLayoutFlexColumn className="flex-grow-1" gap={ 2 }>
|
||||
<div className="flex-grow-1 text-black text-truncate">{ petItem.petData.name }</div>
|
||||
<NitroLayoutBase className="flex-grow-1 text-black text-truncate">{ petItem.petData.name }</NitroLayoutBase>
|
||||
{ !!roomSession && <button type="button" className="btn btn-success btn-sm" onClick={ event => attemptPetPlacement(petItem) }>{ LocalizeText('inventory.furni.placetoroom') }</button> }
|
||||
</NitroLayoutFlexColumn> }
|
||||
</NitroLayoutGridColumn>
|
||||
|
||||
@ -2,8 +2,12 @@ import { FurnitureListComposer, IObjectData, TradingAcceptComposer, TradingConfi
|
||||
import { FC, useCallback, useEffect, useMemo, useState } from 'react';
|
||||
import { LocalizeText } from '../../../../api';
|
||||
import { SendMessageHook } from '../../../../hooks/messages';
|
||||
import { NitroLayoutButton, NitroLayoutFlex, NitroLayoutFlexColumn } from '../../../../layout';
|
||||
import { NitroLayoutBase } from '../../../../layout/base';
|
||||
import { NitroCardGridItemView } from '../../../../layout/card/grid/item/NitroCardGridItemView';
|
||||
import { NitroCardGridView } from '../../../../layout/card/grid/NitroCardGridView';
|
||||
import { NitroLayoutGridColumn } from '../../../../layout/grid/column/NitroLayoutGridColumn';
|
||||
import { NitroLayoutGrid } from '../../../../layout/grid/NitroLayoutGrid';
|
||||
import { FurniCategory } from '../../common/FurniCategory';
|
||||
import { GroupItem } from '../../common/GroupItem';
|
||||
import { IFurnitureItem } from '../../common/IFurnitureItem';
|
||||
@ -224,8 +228,9 @@ export const InventoryTradeView: FC<InventoryTradeViewProps> = props =>
|
||||
}, [ tradeData, dispatchFurnitureState ]);
|
||||
|
||||
return (
|
||||
<div className="row h-100">
|
||||
<div className="d-flex flex-column col-4 h-100">
|
||||
<NitroLayoutGrid>
|
||||
<NitroLayoutGridColumn size={ 4 } gap={ 2 }>
|
||||
<NitroLayoutFlexColumn className="h-100" overflow="auto" gap={ 2 }>
|
||||
<InventoryFurnitureSearchView groupItems={ groupItems } setGroupItems={ setFilteredGroupItems } />
|
||||
<NitroCardGridView columns={ 3 }>
|
||||
{ filteredGroupItems && (filteredGroupItems.length > 0) && filteredGroupItems.map((item, index) =>
|
||||
@ -242,10 +247,15 @@ export const InventoryTradeView: FC<InventoryTradeViewProps> = props =>
|
||||
);
|
||||
}) }
|
||||
</NitroCardGridView>
|
||||
<div className="col-12 badge bg-muted w-100 mt-1">{ groupItem ? groupItem.name : LocalizeText('catalog_selectproduct') }</div>
|
||||
</div>
|
||||
<div className="col-8 row mx-0">
|
||||
<div className="d-flex flex-column col-6">
|
||||
</NitroLayoutFlexColumn>
|
||||
<NitroLayoutBase className="badge bg-muted w-100">
|
||||
{ groupItem ? groupItem.name : LocalizeText('catalog_selectproduct') }
|
||||
</NitroLayoutBase>
|
||||
</NitroLayoutGridColumn>
|
||||
<NitroLayoutGridColumn size={ 8 } gap={ 2 }>
|
||||
<NitroLayoutGrid overflow="hidden">
|
||||
<NitroLayoutGridColumn size={ 6 } gap={ 2 }>
|
||||
<NitroLayoutFlexColumn className="h-100" overflow="auto" gap={ 2 }>
|
||||
<span className="d-flex justify-content-between align-items-center text-black small mb-1">{ LocalizeText('inventory.trading.you') } { LocalizeText('inventory.trading.areoffering') }: <i className={ 'small fas ' + (tradeData.ownUser.accepts ? 'fa-lock text-success' : 'fa-unlock text-danger') } /></span>
|
||||
<NitroCardGridView columns={ 3 }>
|
||||
{ Array.from(Array(MAX_ITEMS_TO_TRADE), (e, i) =>
|
||||
@ -263,10 +273,14 @@ export const InventoryTradeView: FC<InventoryTradeViewProps> = props =>
|
||||
</NitroCardGridItemView>
|
||||
);
|
||||
}) }
|
||||
<div className="col-12 badge bg-muted w-100">{ ownGroupItem ? ownGroupItem.name : LocalizeText('catalog_selectproduct') }</div>
|
||||
</NitroCardGridView>
|
||||
</div>
|
||||
<div className="d-flex flex-column col-6">
|
||||
</NitroLayoutFlexColumn>
|
||||
<NitroLayoutBase className="badge bg-muted w-100">
|
||||
{ ownGroupItem ? ownGroupItem.name : LocalizeText('catalog_selectproduct') }
|
||||
</NitroLayoutBase>
|
||||
</NitroLayoutGridColumn>
|
||||
<NitroLayoutGridColumn size={ 6 } gap={ 2 }>
|
||||
<NitroLayoutFlexColumn className="h-100" overflow="auto" gap={ 2 }>
|
||||
<span className="d-flex justify-content-between align-items-center text-black small mb-1">{ tradeData.otherUser.userName } { LocalizeText('inventory.trading.isoffering') }: <i className={ 'small fas ' + (tradeData.otherUser.accepts ? 'fa-lock text-success' : 'fa-unlock text-danger') } /></span>
|
||||
<NitroCardGridView columns={ 3 }>
|
||||
{ Array.from(Array(MAX_ITEMS_TO_TRADE), (e, i) =>
|
||||
@ -277,14 +291,18 @@ export const InventoryTradeView: FC<InventoryTradeViewProps> = props =>
|
||||
|
||||
return <NitroCardGridItemView key={ i } itemActive={ (otherGroupItem === item) } itemImage={ item.iconUrl } itemCount={ item.getTotalCount() } itemUniqueNumber={ item.stuffData.uniqueNumber } onClick={ event => setOtherGroupItem(item) } />;
|
||||
}) }
|
||||
<div className="col-12 badge bg-muted w-100">{ otherGroupItem ? otherGroupItem.name : LocalizeText('catalog_selectproduct') }</div>
|
||||
</NitroCardGridView>
|
||||
</div>
|
||||
<div className="d-flex col-12 justify-content-between align-items-end w-100">
|
||||
<button type="button" className="btn btn-danger" onClick={ cancelTrade }>{ LocalizeText('generic.cancel') }</button>
|
||||
</NitroLayoutFlexColumn>
|
||||
<NitroLayoutBase className="badge bg-muted w-100">
|
||||
{ otherGroupItem ? otherGroupItem.name : LocalizeText('catalog_selectproduct') }
|
||||
</NitroLayoutBase>
|
||||
</NitroLayoutGridColumn>
|
||||
</NitroLayoutGrid>
|
||||
<NitroLayoutFlex className="flex-grow-1 justify-content-between">
|
||||
<NitroLayoutButton variant="danger" onClick={ cancelTrade }>{ LocalizeText('generic.cancel') }</NitroLayoutButton>
|
||||
{ getTradeButton }
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</NitroLayoutFlex>
|
||||
</NitroLayoutGridColumn>
|
||||
</NitroLayoutGrid>
|
||||
);
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user