Trading works

This commit is contained in:
Bill 2021-07-07 05:05:27 -04:00
parent a9eff4f0ae
commit 4cdd89c25b
5 changed files with 223 additions and 87 deletions

View File

@ -1,4 +1,4 @@
import { AdvancedMap, BadgesEvent, BotAddedToInventoryEvent, BotInventoryMessageEvent, BotRemovedFromInventoryEvent, FurnitureListAddOrUpdateEvent, FurnitureListEvent, FurnitureListInvalidateEvent, FurnitureListItemParser, FurnitureListRemovedEvent, FurniturePostItPlacedEvent, PetAddedToInventoryEvent, PetData, PetInventoryEvent, PetRemovedFromInventory, TradingAcceptEvent, TradingCloseEvent, TradingCompletedEvent, TradingConfirmationEvent, TradingListItemEvent, TradingOpenEvent } from 'nitro-renderer'; import { AdvancedMap, BadgesEvent, BotAddedToInventoryEvent, BotInventoryMessageEvent, BotRemovedFromInventoryEvent, FurnitureListAddOrUpdateEvent, FurnitureListEvent, FurnitureListInvalidateEvent, FurnitureListItemParser, FurnitureListRemovedEvent, FurniturePostItPlacedEvent, PetAddedToInventoryEvent, PetData, PetInventoryEvent, PetRemovedFromInventory, TradingAcceptEvent, TradingCloseEvent, TradingCompletedEvent, TradingConfirmationEvent, TradingListItemEvent, TradingNotOpenEvent, TradingOpenEvent, TradingOpenFailedEvent, TradingOtherNotAllowedEvent, TradingYouAreNotAllowedEvent } from 'nitro-renderer';
import { FC, useCallback } from 'react'; import { FC, useCallback } from 'react';
import { GetRoomSession, GetSessionDataManager } from '../../api'; import { GetRoomSession, GetSessionDataManager } from '../../api';
import { CreateMessageHook } from '../../hooks/messages/message-event'; import { CreateMessageHook } from '../../hooks/messages/message-event';
@ -176,6 +176,59 @@ export const InventoryMessageHandler: FC<InventoryMessageHandlerProps> = props =
}); });
}, [ dispatchFurnitureState ]); }, [ dispatchFurnitureState ]);
const onTradingCloseEvent = useCallback((event: TradingCloseEvent) =>
{
const parser = event.getParser();
dispatchFurnitureState({
type: InventoryFurnitureActions.CLOSE_TRADE,
payload: {}
});
}, [ dispatchFurnitureState ]);
const onTradingCompletedEvent = useCallback((event: TradingCompletedEvent) =>
{
const parser = event.getParser();
dispatchFurnitureState({
type: InventoryFurnitureActions.CLOSE_TRADE,
payload: {}
});
}, [ dispatchFurnitureState ]);
const onTradingConfirmationEvent = useCallback((event: TradingConfirmationEvent) =>
{
const parser = event.getParser();
dispatchFurnitureState({
type: InventoryFurnitureActions.SET_TRADE_STATE,
payload: {
tradeState: TradeState.TRADING_STATE_COUNTDOWN
}
});
}, [ dispatchFurnitureState ]);
const onTradingListItemEvent = useCallback((event: TradingListItemEvent) =>
{
const parser = event.getParser();
console.log(parser);
dispatchFurnitureState({
type: InventoryFurnitureActions.UPDATE_TRADE,
payload: {
tradeParser: event.getParser()
}
});
}, [ dispatchFurnitureState ]);
const onTradingNotOpenEvent = useCallback((event: TradingNotOpenEvent) =>
{
const parser = event.getParser();
console.log(parser);
}, []);
const onTradingOpenEvent = useCallback((event: TradingOpenEvent) => const onTradingOpenEvent = useCallback((event: TradingOpenEvent) =>
{ {
const parser = event.getParser(); const parser = event.getParser();
@ -220,53 +273,26 @@ export const InventoryMessageHandler: FC<InventoryMessageHandlerProps> = props =
}); });
}, [ dispatchFurnitureState ]); }, [ dispatchFurnitureState ]);
const onTradingCloseEvent = useCallback((event: TradingCloseEvent) => const onTradingOpenFailedEvent = useCallback((event: TradingOpenFailedEvent) =>
{
const parser = event.getParser();
dispatchFurnitureState({
type: InventoryFurnitureActions.CLOSE_TRADE,
payload: {}
});
}, [ dispatchFurnitureState ]);
const onTradingCompletedEvent = useCallback((event: TradingCompletedEvent) =>
{
const parser = event.getParser();
dispatchFurnitureState({
type: InventoryFurnitureActions.SET_TRADE_STATE,
payload: {
tradeState: TradeState.TRADING_STATE_COMPLETED
}
});
}, [ dispatchFurnitureState ]);
const onTradingConfirmationEvent = useCallback((event: TradingConfirmationEvent) =>
{
const parser = event.getParser();
dispatchFurnitureState({
type: InventoryFurnitureActions.SET_TRADE_STATE,
payload: {
tradeState: TradeState.TRADING_STATE_CONFIRMED
}
});
}, [ dispatchFurnitureState ]);
const onTradingListItemEvent = useCallback((event: TradingListItemEvent) =>
{ {
const parser = event.getParser(); const parser = event.getParser();
console.log(parser); console.log(parser);
}, []);
dispatchFurnitureState({ const onTradingOtherNotAllowedEvent = useCallback((event: TradingOtherNotAllowedEvent) =>
type: InventoryFurnitureActions.UPDATE_TRADE, {
payload: { const parser = event.getParser();
tradeParser: event.getParser()
} console.log(parser);
}); }, []);
}, [ dispatchFurnitureState ]);
const onTradingYouAreNotAllowedEvent = useCallback((event: TradingYouAreNotAllowedEvent) =>
{
const parser = event.getParser();
console.log(parser);
}, []);
CreateMessageHook(FurnitureListAddOrUpdateEvent, onFurnitureListAddOrUpdateEvent); CreateMessageHook(FurnitureListAddOrUpdateEvent, onFurnitureListAddOrUpdateEvent);
CreateMessageHook(FurnitureListEvent, onFurnitureListEvent); CreateMessageHook(FurnitureListEvent, onFurnitureListEvent);
@ -281,11 +307,15 @@ export const InventoryMessageHandler: FC<InventoryMessageHandlerProps> = props =
CreateMessageHook(PetAddedToInventoryEvent, onPetAddedToInventoryEvent); CreateMessageHook(PetAddedToInventoryEvent, onPetAddedToInventoryEvent);
CreateMessageHook(BadgesEvent, onBadgesEvent); CreateMessageHook(BadgesEvent, onBadgesEvent);
CreateMessageHook(TradingAcceptEvent, onTradingAcceptEvent); CreateMessageHook(TradingAcceptEvent, onTradingAcceptEvent);
CreateMessageHook(TradingOpenEvent, onTradingOpenEvent);
CreateMessageHook(TradingCloseEvent, onTradingCloseEvent); CreateMessageHook(TradingCloseEvent, onTradingCloseEvent);
CreateMessageHook(TradingCompletedEvent, onTradingCompletedEvent); CreateMessageHook(TradingCompletedEvent, onTradingCompletedEvent);
CreateMessageHook(TradingConfirmationEvent, onTradingConfirmationEvent); CreateMessageHook(TradingConfirmationEvent, onTradingConfirmationEvent);
CreateMessageHook(TradingListItemEvent, onTradingListItemEvent); CreateMessageHook(TradingListItemEvent, onTradingListItemEvent);
CreateMessageHook(TradingNotOpenEvent, onTradingNotOpenEvent);
CreateMessageHook(TradingOpenEvent, onTradingOpenEvent);
CreateMessageHook(TradingOpenFailedEvent, onTradingOpenFailedEvent);
CreateMessageHook(TradingOtherNotAllowedEvent, onTradingOtherNotAllowedEvent);
CreateMessageHook(TradingYouAreNotAllowedEvent, onTradingYouAreNotAllowedEvent);
return null; return null;
} }

View File

@ -1,13 +1,15 @@
import { IRoomSession, RoomEngineObjectEvent, RoomEngineObjectPlacedEvent, RoomPreviewer, RoomSessionEvent, TradingOpenComposer } from 'nitro-renderer'; import { IRoomSession, RoomEngineObjectEvent, RoomEngineObjectPlacedEvent, RoomPreviewer, RoomSessionEvent, TradingCancelComposer, TradingCloseComposer, TradingOpenComposer } from 'nitro-renderer';
import { FC, useCallback, useEffect, useReducer, useState } from 'react'; import { FC, useCallback, useEffect, useReducer, useState } from 'react';
import { GetConnection, GetRoomEngine } from '../../api'; import { GetConnection, GetRoomEngine } from '../../api';
import { InventoryEvent, InventoryTradeRequestEvent } from '../../events'; import { InventoryEvent, InventoryTradeRequestEvent } from '../../events';
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 { SendMessageHook } from '../../hooks/messages';
import { NitroCardContentView, NitroCardHeaderView, NitroCardTabsItemView, NitroCardTabsView, NitroCardView } from '../../layout'; import { NitroCardContentView, NitroCardHeaderView, NitroCardTabsItemView, NitroCardTabsView, NitroCardView } from '../../layout';
import { LocalizeText } from '../../utils/LocalizeText'; import { LocalizeText } from '../../utils/LocalizeText';
import { isObjectMoverRequested, setObjectMoverRequested } from './common/InventoryUtilities'; import { isObjectMoverRequested, setObjectMoverRequested } from './common/InventoryUtilities';
import { TradeState } from './common/TradeState';
import { InventoryContextProvider } from './context/InventoryContext'; import { InventoryContextProvider } from './context/InventoryContext';
import { InventoryMessageHandler } from './InventoryMessageHandler'; import { InventoryMessageHandler } from './InventoryMessageHandler';
import { InventoryTabs, InventoryViewProps } from './InventoryView.types'; import { InventoryTabs, InventoryViewProps } from './InventoryView.types';
@ -34,18 +36,47 @@ export const InventoryView: FC<InventoryViewProps> = props =>
const [ petState, dispatchPetState ] = useReducer(InventoryPetReducer, initialInventoryPet); const [ petState, dispatchPetState ] = useReducer(InventoryPetReducer, initialInventoryPet);
const [ badgeState, dispatchBadgeState ] = useReducer(InventoryBadgeReducer, initialInventoryBadge); const [ badgeState, dispatchBadgeState ] = useReducer(InventoryBadgeReducer, initialInventoryBadge);
const close = useCallback(() =>
{
if(furnitureState.tradeData)
{
switch(furnitureState.tradeData.state)
{
case TradeState.TRADING_STATE_RUNNING:
SendMessageHook(new TradingCloseComposer());
return;
case TradeState.TRADING_STATE_CONFIRMING:
SendMessageHook(new TradingCancelComposer());
return;
}
}
setIsVisible(false);
}, [ furnitureState.tradeData ]);
const onInventoryEvent = useCallback((event: InventoryEvent) => const onInventoryEvent = useCallback((event: InventoryEvent) =>
{ {
switch(event.type) switch(event.type)
{ {
case InventoryEvent.SHOW_INVENTORY: case InventoryEvent.SHOW_INVENTORY:
if(isVisible) return;
setIsVisible(true); setIsVisible(true);
return; return;
case InventoryEvent.HIDE_INVENTORY: case InventoryEvent.HIDE_INVENTORY:
setIsVisible(false); if(!isVisible) return;
close();
return; return;
case InventoryEvent.TOGGLE_INVENTORY: case InventoryEvent.TOGGLE_INVENTORY:
setIsVisible(value => !value); if(!isVisible)
{
setIsVisible(true);
}
else
{
close();
}
return; return;
case InventoryTradeRequestEvent.REQUEST_TRADE: { case InventoryTradeRequestEvent.REQUEST_TRADE: {
const tradeEvent = (event as InventoryTradeRequestEvent); const tradeEvent = (event as InventoryTradeRequestEvent);
@ -53,7 +84,7 @@ export const InventoryView: FC<InventoryViewProps> = props =>
GetConnection().send(new TradingOpenComposer(tradeEvent.objectId)); GetConnection().send(new TradingOpenComposer(tradeEvent.objectId));
} }
} }
}, []); }, [ isVisible, close ]);
useUiEvent(InventoryEvent.SHOW_INVENTORY, onInventoryEvent); useUiEvent(InventoryEvent.SHOW_INVENTORY, onInventoryEvent);
useUiEvent(InventoryEvent.HIDE_INVENTORY, onInventoryEvent); useUiEvent(InventoryEvent.HIDE_INVENTORY, onInventoryEvent);
@ -103,21 +134,11 @@ export const InventoryView: FC<InventoryViewProps> = props =>
} }
}, []); }, []);
useEffect(() =>
{
if(!furnitureState.tradeData) return;
setIsVisible(true);
}, [ furnitureState.tradeData ]);
useEffect(() => useEffect(() =>
{ {
if(!isVisible) if(!isVisible)
{ {
if(furnitureState.tradeData) if(furnitureState.tradeData) setIsVisible(true);
{
// cancel the trade
}
} }
}, [ furnitureState.tradeData, isVisible ]); }, [ furnitureState.tradeData, isVisible ]);
@ -126,7 +147,7 @@ export const InventoryView: FC<InventoryViewProps> = props =>
<InventoryMessageHandler /> <InventoryMessageHandler />
{ isVisible && { isVisible &&
<NitroCardView className="nitro-inventory"> <NitroCardView className="nitro-inventory">
<NitroCardHeaderView headerText={ LocalizeText('inventory.title') } onCloseClick={ event => setIsVisible(false) } /> <NitroCardHeaderView headerText={ LocalizeText('inventory.title') } onCloseClick={ close } />
{ !furnitureState.tradeData && { !furnitureState.tradeData &&
<> <>
<NitroCardTabsView> <NitroCardTabsView>
@ -152,7 +173,7 @@ export const InventoryView: FC<InventoryViewProps> = props =>
</> } </> }
{ furnitureState.tradeData && { furnitureState.tradeData &&
<NitroCardContentView> <NitroCardContentView>
<InventoryTradeView /> <InventoryTradeView cancelTrade={ close } />
</NitroCardContentView> } </NitroCardContentView> }
</NitroCardView> } </NitroCardView> }
</InventoryContextProvider> </InventoryContextProvider>

View File

@ -1,6 +1,6 @@
import { FurnitureListComposer, RoomObjectVariable, Vector3d } from 'nitro-renderer'; import { FurnitureListComposer, RoomObjectVariable, Vector3d } from 'nitro-renderer';
import { FC, useEffect, useState } from 'react'; import { FC, useEffect, useState } from 'react';
import { GetRoomEngine } from '../../../../api'; import { GetRoomEngine, GetSessionDataManager } from '../../../../api';
import { SendMessageHook } from '../../../../hooks/messages'; import { SendMessageHook } from '../../../../hooks/messages';
import { LocalizeText } from '../../../../utils/LocalizeText'; import { LocalizeText } from '../../../../utils/LocalizeText';
import { LimitedEditionCompactPlateView } from '../../../shared/limited-edition/compact-plate/LimitedEditionCompactPlateView'; import { LimitedEditionCompactPlateView } from '../../../shared/limited-edition/compact-plate/LimitedEditionCompactPlateView';
@ -80,9 +80,9 @@ export const InventoryFurnitureView: FC<InventoryFurnitureViewProps> = props =>
if(furnitureItem.category === FurniCategory._Str_3432) if(furnitureItem.category === FurniCategory._Str_3432)
{ {
// insert a window if the type is landscape const data = GetSessionDataManager().getWallItemDataByName('noob_window_double');
//_local_19 = this._model.controller._Str_18225("ads_twi_windw", ProductTypeEnum.WALL);
//this._roomPreviewer._Str_12087(_local_19.id, new Vector3d(90, 0, 0), _local_19._Str_4558); if(data) roomPreviewer.addWallItemIntoRoom(data.id, new Vector3d(90, 0, 0), data.customParams);
} }
} }
else else

View File

@ -1,5 +1,5 @@
import { FurnitureListComposer, IObjectData, TradingListAddItemComposer, TradingListAddItemsComposer, TradingListItemRemoveComposer } from 'nitro-renderer'; import { FurnitureListComposer, IObjectData, TradingAcceptComposer, TradingConfirmationComposer, TradingListAddItemComposer, TradingListAddItemsComposer, TradingListItemRemoveComposer, TradingUnacceptComposer } from 'nitro-renderer';
import { FC, useCallback, useEffect, useState } from 'react'; import { FC, useCallback, useEffect, useMemo, useState } from 'react';
import { SendMessageHook } from '../../../../hooks/messages'; import { SendMessageHook } from '../../../../hooks/messages';
import { NitroCardGridItemView } from '../../../../layout/card/grid/item/NitroCardGridItemView'; import { NitroCardGridItemView } from '../../../../layout/card/grid/item/NitroCardGridItemView';
import { NitroCardGridView } from '../../../../layout/card/grid/NitroCardGridView'; import { NitroCardGridView } from '../../../../layout/card/grid/NitroCardGridView';
@ -7,6 +7,7 @@ import { LocalizeText } from '../../../../utils/LocalizeText';
import { FurniCategory } from '../../common/FurniCategory'; import { FurniCategory } from '../../common/FurniCategory';
import { GroupItem } from '../../common/GroupItem'; import { GroupItem } from '../../common/GroupItem';
import { IFurnitureItem } from '../../common/IFurnitureItem'; import { IFurnitureItem } from '../../common/IFurnitureItem';
import { TradeState } from '../../common/TradeState';
import { _Str_16998 } from '../../common/TradingUtilities'; import { _Str_16998 } from '../../common/TradingUtilities';
import { useInventoryContext } from '../../context/InventoryContext'; import { useInventoryContext } from '../../context/InventoryContext';
import { InventoryFurnitureActions } from '../../reducers/InventoryFurnitureReducer'; import { InventoryFurnitureActions } from '../../reducers/InventoryFurnitureReducer';
@ -17,16 +18,14 @@ const MAX_ITEMS_TO_TRADE: number = 9;
export const InventoryTradeView: FC<InventoryTradeViewProps> = props => export const InventoryTradeView: FC<InventoryTradeViewProps> = props =>
{ {
const { cancelTrade = null } = props;
const [ groupItem, setGroupItem ] = useState<GroupItem>(null);
const [ ownGroupItem, setOwnGroupItem ] = useState<GroupItem>(null);
const [ otherGroupItem, setOtherGroupItem ] = useState<GroupItem>(null);
const [ filteredGroupItems, setFilteredGroupItems ] = useState<GroupItem[]>(null);
const [ countdownTick, setCountdownTick ] = useState(3);
const { furnitureState = null, dispatchFurnitureState = null } = useInventoryContext(); const { furnitureState = null, dispatchFurnitureState = null } = useInventoryContext();
const { needsFurniUpdate = false, groupItems = [], tradeData = null } = furnitureState; const { needsFurniUpdate = false, groupItems = [], tradeData = null } = furnitureState;
const [ groupItem, setGroupItem ] = useState<GroupItem>(null);
const [ selectedGroupItem, setSelectedGroupItem ] = useState<GroupItem>(null);
const [ filteredGroupItems, setFilteredGroupItems ] = useState<GroupItem[]>(null);
const close = useCallback(() =>
{
}, []);
const canTradeItem = useCallback((isWallItem: boolean, spriteId: number, category: number, groupable: boolean, stuffData: IObjectData) => const canTradeItem = useCallback((isWallItem: boolean, spriteId: number, category: number, groupable: boolean, stuffData: IObjectData) =>
{ {
@ -136,13 +135,94 @@ export const InventoryTradeView: FC<InventoryTradeViewProps> = props =>
SendMessageHook(new FurnitureListComposer()); SendMessageHook(new FurnitureListComposer());
} }
else
{
setFilteredGroupItems(groupItems);
}
}, [ needsFurniUpdate, groupItems, dispatchFurnitureState ]); }, [ needsFurniUpdate, groupItems, dispatchFurnitureState ]);
const progressTrade = useCallback(() =>
{
switch(tradeData.state)
{
case TradeState.TRADING_STATE_RUNNING:
if(!tradeData.otherUser.itemCount && !tradeData.ownUser.accepts)
{
//this._notificationService.alert('${inventory.trading.warning.other_not_offering}');
}
if(tradeData.ownUser.accepts)
{
SendMessageHook(new TradingUnacceptComposer());
}
else
{
SendMessageHook(new TradingAcceptComposer());
}
return;
case TradeState.TRADING_STATE_CONFIRMING:
SendMessageHook(new TradingConfirmationComposer());
dispatchFurnitureState({
type: InventoryFurnitureActions.SET_TRADE_STATE,
payload: {
tradeState: TradeState.TRADING_STATE_CONFIRMED
}
});
return;
}
}, [ tradeData, dispatchFurnitureState ]);
const getTradeButton = useMemo(() =>
{
if(!tradeData) return null;
switch(tradeData.state)
{
case TradeState.TRADING_STATE_READY:
return <button type="button" className="btn btn-secondary" disabled={ (!tradeData.ownUser.itemCount && !tradeData.otherUser.itemCount) } onClick={ progressTrade }>{ LocalizeText('inventory.trading.accept') }</button>;
case TradeState.TRADING_STATE_RUNNING:
return <button type="button" className="btn btn-secondary" disabled={ (!tradeData.ownUser.itemCount && !tradeData.otherUser.itemCount) } onClick={ progressTrade }>{ LocalizeText(tradeData.ownUser.accepts ? 'inventory.trading.modify' : 'inventory.trading.accept') }</button>;
case TradeState.TRADING_STATE_COUNTDOWN:
return <button type="button" className="btn btn-secondary" disabled>{ LocalizeText('inventory.trading.countdown', [ 'counter' ], [ countdownTick.toString() ]) }</button>;
case TradeState.TRADING_STATE_CONFIRMING:
return <button type="button" className="btn btn-secondary" onClick={ progressTrade }>{ LocalizeText('inventory.trading.button.restore') }</button>;
case TradeState.TRADING_STATE_CONFIRMED:
return <button type="button" className="btn btn-secondary">{ LocalizeText('inventory.trading.info.waiting') }</button>;
}
}, [ tradeData, countdownTick, progressTrade ]);
useEffect(() =>
{
if(!tradeData || (tradeData.state !== TradeState.TRADING_STATE_COUNTDOWN)) return;
setCountdownTick(3);
const interval = setInterval(() =>
{
setCountdownTick(prevValue =>
{
const newValue = (prevValue - 1);
if(newValue === -1)
{
dispatchFurnitureState({
type: InventoryFurnitureActions.SET_TRADE_STATE,
payload: {
tradeState: TradeState.TRADING_STATE_CONFIRMING
}
});
clearInterval(interval);
}
return newValue;
});
}, 1000);
return () =>
{
clearInterval(interval);
}
}, [ tradeData, dispatchFurnitureState ]);
return ( return (
<div className="row h-100"> <div className="row h-100">
<div className="d-flex flex-column col-4 h-100"> <div className="d-flex flex-column col-4 h-100">
@ -162,10 +242,11 @@ export const InventoryTradeView: FC<InventoryTradeViewProps> = props =>
); );
}) } }) }
</NitroCardGridView> </NitroCardGridView>
<div className="col-12 badge bg-muted w-100 mt-1">{ groupItem ? groupItem.name : LocalizeText('catalog_selectproduct') }</div>
</div> </div>
<div className="col-8 row mx-0"> <div className="col-8 row">
<div className="d-flex flex-column col-6"> <div className="d-flex flex-column col-6">
<div className="badge bg-primary w-100 p-1 mb-1 me-1">{ LocalizeText('inventory.trading.you') }</div> <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 }> <NitroCardGridView columns={ 3 }>
{ Array.from(Array(MAX_ITEMS_TO_TRADE), (e, i) => { Array.from(Array(MAX_ITEMS_TO_TRADE), (e, i) =>
{ {
@ -174,18 +255,19 @@ export const InventoryTradeView: FC<InventoryTradeViewProps> = props =>
if(!item) return <NitroCardGridItemView key={ i } />; if(!item) return <NitroCardGridItemView key={ i } />;
return ( return (
<NitroCardGridItemView key={ i } itemActive={ (item === selectedGroupItem) } itemImage={ item.iconUrl } itemCount={ item.getTotalCount() } itemUnique={ item.stuffData.isUnique } itemUniqueNumber={ item.stuffData.uniqueNumber } onClick={ event => setSelectedGroupItem(item) }> <NitroCardGridItemView key={ i } itemActive={ (ownGroupItem === item) } itemImage={ item.iconUrl } itemCount={ item.getTotalCount() } itemUnique={ item.stuffData.isUnique } itemUniqueNumber={ item.stuffData.uniqueNumber } onClick={ event => setOwnGroupItem(item) }>
{ (item === selectedGroupItem) && { (ownGroupItem === item) &&
<button className="btn btn-danger btn-sm trade-button left" onClick={ event => removeItem(item) }> <button className="btn btn-danger btn-sm trade-button left" onClick={ event => removeItem(item) }>
<i className="fas fa-chevron-left" /> <i className="fas fa-chevron-left" />
</button> } </button> }
</NitroCardGridItemView> </NitroCardGridItemView>
); );
}) } }) }
<div className="col-12 badge bg-muted w-100">{ ownGroupItem ? ownGroupItem.name : LocalizeText('catalog_selectproduct') }</div>
</NitroCardGridView> </NitroCardGridView>
</div> </div>
<div className="d-flex flex-column col-6"> <div className="d-flex flex-column col-6">
<div className="badge bg-primary w-100 p-1 mb-1 me-1">{ tradeData.otherUser.userName }</div> <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 }> <NitroCardGridView columns={ 3 }>
{ Array.from(Array(MAX_ITEMS_TO_TRADE), (e, i) => { Array.from(Array(MAX_ITEMS_TO_TRADE), (e, i) =>
{ {
@ -193,12 +275,14 @@ export const InventoryTradeView: FC<InventoryTradeViewProps> = props =>
if(!item) return <NitroCardGridItemView key={ i } />; if(!item) return <NitroCardGridItemView key={ i } />;
return <NitroCardGridItemView key={ i } itemActive={ (item === selectedGroupItem) } itemImage={ item.iconUrl } itemCount={ item.getTotalCount() } itemUnique={ item.stuffData.isUnique } itemUniqueNumber={ item.stuffData.uniqueNumber } onClick={ event => setSelectedGroupItem(item) } />; return <NitroCardGridItemView key={ i } itemActive={ (otherGroupItem === item) } itemImage={ item.iconUrl } itemCount={ item.getTotalCount() } itemUnique={ item.stuffData.isUnique } 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> </NitroCardGridView>
</div> </div>
<div className="d-flex col-12 bg-muted"> <div className="d-flex col-12 justify-content-between align-items-end w-100">
plz <button type="button" className="btn btn-danger" onClick={ cancelTrade }>{ LocalizeText('generic.cancel') }</button>
{ getTradeButton }
</div> </div>
</div> </div>
</div> </div>

View File

@ -1,3 +1,4 @@
export interface InventoryTradeViewProps export interface InventoryTradeViewProps
{ {
cancelTrade: () => void;
} }