mirror of
https://github.com/billsonnn/nitro-react.git
synced 2024-11-23 14:40:50 +01:00
Trading works
This commit is contained in:
Bill
parent
a9eff4f0ae
commit
4cdd89c25b
@ -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 { GetRoomSession, GetSessionDataManager } from '../../api';
|
||||
import { CreateMessageHook } from '../../hooks/messages/message-event';
|
||||
@ -176,6 +176,59 @@ export const InventoryMessageHandler: FC<InventoryMessageHandlerProps> = props =
|
||||
});
|
||||
}, [ 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 parser = event.getParser();
|
||||
@ -220,53 +273,26 @@ export const InventoryMessageHandler: FC<InventoryMessageHandlerProps> = props =
|
||||
});
|
||||
}, [ 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.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 onTradingOpenFailedEvent = useCallback((event: TradingOpenFailedEvent) =>
|
||||
{
|
||||
const parser = event.getParser();
|
||||
|
||||
console.log(parser);
|
||||
}, []);
|
||||
|
||||
dispatchFurnitureState({
|
||||
type: InventoryFurnitureActions.UPDATE_TRADE,
|
||||
payload: {
|
||||
tradeParser: event.getParser()
|
||||
}
|
||||
});
|
||||
}, [ dispatchFurnitureState ]);
|
||||
const onTradingOtherNotAllowedEvent = useCallback((event: TradingOtherNotAllowedEvent) =>
|
||||
{
|
||||
const parser = event.getParser();
|
||||
|
||||
console.log(parser);
|
||||
}, []);
|
||||
|
||||
const onTradingYouAreNotAllowedEvent = useCallback((event: TradingYouAreNotAllowedEvent) =>
|
||||
{
|
||||
const parser = event.getParser();
|
||||
|
||||
console.log(parser);
|
||||
}, []);
|
||||
|
||||
CreateMessageHook(FurnitureListAddOrUpdateEvent, onFurnitureListAddOrUpdateEvent);
|
||||
CreateMessageHook(FurnitureListEvent, onFurnitureListEvent);
|
||||
@ -281,11 +307,15 @@ export const InventoryMessageHandler: FC<InventoryMessageHandlerProps> = props =
|
||||
CreateMessageHook(PetAddedToInventoryEvent, onPetAddedToInventoryEvent);
|
||||
CreateMessageHook(BadgesEvent, onBadgesEvent);
|
||||
CreateMessageHook(TradingAcceptEvent, onTradingAcceptEvent);
|
||||
CreateMessageHook(TradingOpenEvent, onTradingOpenEvent);
|
||||
CreateMessageHook(TradingCloseEvent, onTradingCloseEvent);
|
||||
CreateMessageHook(TradingCompletedEvent, onTradingCompletedEvent);
|
||||
CreateMessageHook(TradingConfirmationEvent, onTradingConfirmationEvent);
|
||||
CreateMessageHook(TradingListItemEvent, onTradingListItemEvent);
|
||||
CreateMessageHook(TradingNotOpenEvent, onTradingNotOpenEvent);
|
||||
CreateMessageHook(TradingOpenEvent, onTradingOpenEvent);
|
||||
CreateMessageHook(TradingOpenFailedEvent, onTradingOpenFailedEvent);
|
||||
CreateMessageHook(TradingOtherNotAllowedEvent, onTradingOtherNotAllowedEvent);
|
||||
CreateMessageHook(TradingYouAreNotAllowedEvent, onTradingYouAreNotAllowedEvent);
|
||||
|
||||
return null;
|
||||
}
|
||||
|
||||
@ -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 { GetConnection, GetRoomEngine } from '../../api';
|
||||
import { InventoryEvent, InventoryTradeRequestEvent } from '../../events';
|
||||
import { useRoomEngineEvent } from '../../hooks/events/nitro/room/room-engine-event';
|
||||
import { useRoomSessionManagerEvent } from '../../hooks/events/nitro/session/room-session-manager-event';
|
||||
import { useUiEvent } from '../../hooks/events/ui/ui-event';
|
||||
import { SendMessageHook } from '../../hooks/messages';
|
||||
import { NitroCardContentView, NitroCardHeaderView, NitroCardTabsItemView, NitroCardTabsView, NitroCardView } from '../../layout';
|
||||
import { LocalizeText } from '../../utils/LocalizeText';
|
||||
import { isObjectMoverRequested, setObjectMoverRequested } from './common/InventoryUtilities';
|
||||
import { TradeState } from './common/TradeState';
|
||||
import { InventoryContextProvider } from './context/InventoryContext';
|
||||
import { InventoryMessageHandler } from './InventoryMessageHandler';
|
||||
import { InventoryTabs, InventoryViewProps } from './InventoryView.types';
|
||||
@ -34,18 +36,47 @@ export const InventoryView: FC<InventoryViewProps> = props =>
|
||||
const [ petState, dispatchPetState ] = useReducer(InventoryPetReducer, initialInventoryPet);
|
||||
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) =>
|
||||
{
|
||||
switch(event.type)
|
||||
{
|
||||
case InventoryEvent.SHOW_INVENTORY:
|
||||
if(isVisible) return;
|
||||
|
||||
setIsVisible(true);
|
||||
return;
|
||||
case InventoryEvent.HIDE_INVENTORY:
|
||||
setIsVisible(false);
|
||||
if(!isVisible) return;
|
||||
|
||||
close();
|
||||
return;
|
||||
case InventoryEvent.TOGGLE_INVENTORY:
|
||||
setIsVisible(value => !value);
|
||||
if(!isVisible)
|
||||
{
|
||||
setIsVisible(true);
|
||||
}
|
||||
else
|
||||
{
|
||||
close();
|
||||
}
|
||||
return;
|
||||
case InventoryTradeRequestEvent.REQUEST_TRADE: {
|
||||
const tradeEvent = (event as InventoryTradeRequestEvent);
|
||||
@ -53,7 +84,7 @@ export const InventoryView: FC<InventoryViewProps> = props =>
|
||||
GetConnection().send(new TradingOpenComposer(tradeEvent.objectId));
|
||||
}
|
||||
}
|
||||
}, []);
|
||||
}, [ isVisible, close ]);
|
||||
|
||||
useUiEvent(InventoryEvent.SHOW_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(() =>
|
||||
{
|
||||
if(!isVisible)
|
||||
{
|
||||
if(furnitureState.tradeData)
|
||||
{
|
||||
// cancel the trade
|
||||
}
|
||||
if(furnitureState.tradeData) setIsVisible(true);
|
||||
}
|
||||
}, [ furnitureState.tradeData, isVisible ]);
|
||||
|
||||
@ -126,7 +147,7 @@ export const InventoryView: FC<InventoryViewProps> = props =>
|
||||
<InventoryMessageHandler />
|
||||
{ isVisible &&
|
||||
<NitroCardView className="nitro-inventory">
|
||||
<NitroCardHeaderView headerText={ LocalizeText('inventory.title') } onCloseClick={ event => setIsVisible(false) } />
|
||||
<NitroCardHeaderView headerText={ LocalizeText('inventory.title') } onCloseClick={ close } />
|
||||
{ !furnitureState.tradeData &&
|
||||
<>
|
||||
<NitroCardTabsView>
|
||||
@ -152,7 +173,7 @@ export const InventoryView: FC<InventoryViewProps> = props =>
|
||||
</> }
|
||||
{ furnitureState.tradeData &&
|
||||
<NitroCardContentView>
|
||||
<InventoryTradeView />
|
||||
<InventoryTradeView cancelTrade={ close } />
|
||||
</NitroCardContentView> }
|
||||
</NitroCardView> }
|
||||
</InventoryContextProvider>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import { FurnitureListComposer, RoomObjectVariable, Vector3d } from 'nitro-renderer';
|
||||
import { FC, useEffect, useState } from 'react';
|
||||
import { GetRoomEngine } from '../../../../api';
|
||||
import { GetRoomEngine, GetSessionDataManager } from '../../../../api';
|
||||
import { SendMessageHook } from '../../../../hooks/messages';
|
||||
import { LocalizeText } from '../../../../utils/LocalizeText';
|
||||
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)
|
||||
{
|
||||
// insert a window if the type is landscape
|
||||
//_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);
|
||||
const data = GetSessionDataManager().getWallItemDataByName('noob_window_double');
|
||||
|
||||
if(data) roomPreviewer.addWallItemIntoRoom(data.id, new Vector3d(90, 0, 0), data.customParams);
|
||||
}
|
||||
}
|
||||
else
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import { FurnitureListComposer, IObjectData, TradingListAddItemComposer, TradingListAddItemsComposer, TradingListItemRemoveComposer } from 'nitro-renderer';
|
||||
import { FC, useCallback, useEffect, useState } from 'react';
|
||||
import { FurnitureListComposer, IObjectData, TradingAcceptComposer, TradingConfirmationComposer, TradingListAddItemComposer, TradingListAddItemsComposer, TradingListItemRemoveComposer, TradingUnacceptComposer } from 'nitro-renderer';
|
||||
import { FC, useCallback, useEffect, useMemo, useState } from 'react';
|
||||
import { SendMessageHook } from '../../../../hooks/messages';
|
||||
import { NitroCardGridItemView } from '../../../../layout/card/grid/item/NitroCardGridItemView';
|
||||
import { NitroCardGridView } from '../../../../layout/card/grid/NitroCardGridView';
|
||||
@ -7,6 +7,7 @@ import { LocalizeText } from '../../../../utils/LocalizeText';
|
||||
import { FurniCategory } from '../../common/FurniCategory';
|
||||
import { GroupItem } from '../../common/GroupItem';
|
||||
import { IFurnitureItem } from '../../common/IFurnitureItem';
|
||||
import { TradeState } from '../../common/TradeState';
|
||||
import { _Str_16998 } from '../../common/TradingUtilities';
|
||||
import { useInventoryContext } from '../../context/InventoryContext';
|
||||
import { InventoryFurnitureActions } from '../../reducers/InventoryFurnitureReducer';
|
||||
@ -17,16 +18,14 @@ const MAX_ITEMS_TO_TRADE: number = 9;
|
||||
|
||||
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 { 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) =>
|
||||
{
|
||||
@ -136,13 +135,94 @@ export const InventoryTradeView: FC<InventoryTradeViewProps> = props =>
|
||||
|
||||
SendMessageHook(new FurnitureListComposer());
|
||||
}
|
||||
else
|
||||
{
|
||||
setFilteredGroupItems(groupItems);
|
||||
}
|
||||
|
||||
}, [ 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 (
|
||||
<div className="row h-100">
|
||||
<div className="d-flex flex-column col-4 h-100">
|
||||
@ -162,10 +242,11 @@ 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="col-8 row">
|
||||
<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 }>
|
||||
{ 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 } />;
|
||||
|
||||
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) }>
|
||||
{ (item === selectedGroupItem) &&
|
||||
<NitroCardGridItemView key={ i } itemActive={ (ownGroupItem === item) } itemImage={ item.iconUrl } itemCount={ item.getTotalCount() } itemUnique={ item.stuffData.isUnique } itemUniqueNumber={ item.stuffData.uniqueNumber } onClick={ event => setOwnGroupItem(item) }>
|
||||
{ (ownGroupItem === item) &&
|
||||
<button className="btn btn-danger btn-sm trade-button left" onClick={ event => removeItem(item) }>
|
||||
<i className="fas fa-chevron-left" />
|
||||
</button> }
|
||||
</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">
|
||||
<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 }>
|
||||
{ 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 } />;
|
||||
|
||||
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>
|
||||
</div>
|
||||
<div className="d-flex col-12 bg-muted">
|
||||
plz
|
||||
<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>
|
||||
{ getTradeButton }
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,3 +1,4 @@
|
||||
export interface InventoryTradeViewProps
|
||||
{
|
||||
cancelTrade: () => void;
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user