nitro/nitro-react
1
0
Fork 0
mirror of https://github.com/billsonnn/nitro-react.git synced 2024-11-23 06:40:50 +01:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'dev' into purse-redesign

Browse Source
This commit is contained in:
Layne 2021-07-23 01:04:43 -04:00
commit 91f9e39844
15 changed files with 269 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/events/inventory/InventoryBadgesRequestEvent.ts Normal file
View File

@ -0,0 +1,6 @@
import { NitroEvent } from 'nitro-renderer';
export class InventoryBadgesRequestEvent extends NitroEvent
{
public static REQUEST_BADGES: string = 'IBRE_REQUEST_BADGES';
}

20
src/events/inventory/InventoryBadgesUpdatedEvent.ts Normal file
View File

@ -0,0 +1,20 @@
import { NitroEvent } from 'nitro-renderer';
export class InventoryBadgesUpdatedEvent extends NitroEvent
{
public static BADGES_UPDATED: string = 'IBUE_BADGES_UPDATED';
private _badges: string[] = [];
constructor(type: string, badges: string[] = [])
{
super(type);
this._badges = badges;
}
public get badges(): string[]
{
return this._badges;
}
}

1
src/events/inventory/index.ts
View File

@ -1,3 +1,4 @@
export * from './InventoryBadgesUpdatedEvent';
export * from './InventoryEvent';
export * from './InventoryTradeRequestEvent';
export * from './InventoryTradeStartEvent';

81
src/views/catalog/CatalogView.tsx
View File

@ -1,7 +1,6 @@
import { CatalogModeComposer, CatalogRequestGiftConfigurationComposer, ICatalogPageData, RoomPreviewer } from 'nitro-renderer';
import { CatalogModeComposer, CatalogPageComposer, CatalogRequestGiftConfigurationComposer, ICatalogPageData, ILinkEventTracker, RoomPreviewer } from 'nitro-renderer';
import { FC, useCallback, useEffect, useReducer, useState } from 'react';
import { GetRoomEngine } from '../../api';
import { GetCatalogPageComposer } from '../../api/catalog/GetCatalogPageComposer';
import { AddEventLinkTracker, GetRoomEngine, RemoveLinkEventTracker } from '../../api';
import { CatalogEvent } from '../../events';
import { useUiEvent } from '../../hooks/events/ui/ui-event';
import { SendMessageHook } from '../../hooks/messages/message-event';
@ -9,6 +8,7 @@ import { NitroCardContentView, NitroCardHeaderView, NitroCardTabsItemView, Nitro
import { LocalizeText } from '../../utils/LocalizeText';
import { CatalogMessageHandler } from './CatalogMessageHandler';
import { CatalogMode, CatalogViewProps } from './CatalogView.types';
import { GetCatalogPageTree } from './common/CatalogUtilities';
import { CatalogContextProvider } from './context/CatalogContext';
import { CatalogActions, CatalogReducer, initialCatalog } from './reducers/CatalogReducer';
import { CatalogNavigationView } from './views/navigation/CatalogNavigationView';
@ -42,6 +42,67 @@ export const CatalogView: FC<CatalogViewProps> = props =>
useUiEvent(CatalogEvent.TOGGLE_CATALOG, onCatalogEvent);
useUiEvent(CatalogEvent.CATALOG_RESET, onCatalogEvent);
const setCurrentTab = useCallback((page: ICatalogPageData) =>
{
dispatchCatalogState({
type: CatalogActions.SET_CATALOG_CURRENT_TAB,
payload: {
currentTab: page
}
});
}, [ dispatchCatalogState ]);
const navigateThroughTree = useCallback((tree: ICatalogPageData[]) =>
{
setCurrentTab(tree.shift());
}, [ setCurrentTab ]);
const navigateToPage = useCallback((pageId: number) =>
{
const pageTree: ICatalogPageData[] = [];
GetCatalogPageTree(root, pageId, pageTree);
if(!pageTree.length) return;
pageTree.reverse();
navigateThroughTree(pageTree);
}, [ root, navigateThroughTree ]);
const linkReceived = useCallback((url: string) =>
{
const parts = url.split('/');
if(parts.length < 2) return;
switch(parts[1])
{
case 'open':
if(parts.length > 2)
{
navigateToPage(parseInt(parts[2]));
}
else
{
setIsVisible(true);
}
return;
}
}, [ navigateToPage ]);
useEffect(() =>
{
const linkTracker: ILinkEventTracker = {
linkReceived,
eventUrlPrefix: 'catalog/'
};
AddEventLinkTracker(linkTracker);
return () => RemoveLinkEventTracker(linkTracker);
}, [ linkReceived]);
useEffect(() =>
{
if(!isVisible) return;
@ -51,13 +112,15 @@ export const CatalogView: FC<CatalogViewProps> = props =>
SendMessageHook(new CatalogModeComposer(CatalogMode.MODE_NORMAL));
SendMessageHook(new CatalogRequestGiftConfigurationComposer());
}
console.log(catalogState.root)
}, [ isVisible, catalogState.root ]);
useEffect(() =>
{
if(!currentTab) return;
SendMessageHook(GetCatalogPageComposer(currentTab.pageId, -1, CatalogMode.MODE_NORMAL));
SendMessageHook(new CatalogPageComposer(currentTab.pageId, -1, CatalogMode.MODE_NORMAL));
}, [ currentTab ]);
useEffect(() =>
@ -75,16 +138,6 @@ export const CatalogView: FC<CatalogViewProps> = props =>
}
}, []);
const setCurrentTab = useCallback((page: ICatalogPageData) =>
{
dispatchCatalogState({
type: CatalogActions.SET_CATALOG_CURRENT_TAB,
payload: {
currentTab: page
}
});
}, [ dispatchCatalogState ]);
const currentNavigationPage = ((searchResult && searchResult.page) || currentTab);
return (

17
src/views/catalog/common/CatalogUtilities.ts
View File

@ -149,3 +149,20 @@ export function GetPetAvailableColors(petIndex: number, palettes: SellablePetPal
}
}
}
export function GetCatalogPageTree(page: ICatalogPageData, targetPageId: number, tree: ICatalogPageData[])
{
if(page.pageId === targetPageId) return page;
for(const pageData of page.children)
{
const foundPageData = GetCatalogPageTree(pageData, targetPageId, tree);
if(foundPageData)
{
tree.push(pageData);
return pageData;
}
}
}

1
src/views/catalog/views/page/layout/CatalogLayout.scss
View File

@ -1,3 +1,4 @@
@import './badge-display/CatalogLayoutBadgeDisplayView';
@import './default/CatalogLayoutDefaultView';
@import './frontpage4/CatalogLayoutFrontpage4View';
@import './pets/CatalogLayoutPetView';

5
src/views/catalog/views/page/layout/GetCatalogLayout.tsx
View File

@ -1,4 +1,5 @@
import { ICatalogPageParser, RoomPreviewer } from 'nitro-renderer';
import { CatalogLayoutBadgeDisplayView } from './badge-display/CatalogLayoutBadgeDisplayView';
import { CatalogLayoutDefaultView } from './default/CatalogLayoutDefaultView';
import { CatalogLayoutFrontpage4View } from './frontpage4/CatalogLayoutFrontpage4View';
import { CatalogLayouGuildCustomFurniView } from './guild-custom-furni/CatalogLayoutGuildCustomFurniView';
@ -47,9 +48,11 @@ export const GetCatalogLayout = (pageParser: ICatalogPageParser, roomPreviewer:
case 'spaces_new':
return <CatalogLayoutSpacesView roomPreviewer={ roomPreviewer } pageParser={ pageParser } />;
case 'trophies':
return <CatalogLayoutTrophiesView roomPreviewer={roomPreviewer} pageParser={pageParser} />;
return <CatalogLayoutTrophiesView roomPreviewer={roomPreviewer} pageParser={ pageParser } />;
case 'info_loyalty':
return <CatalogLayoutInfoLoyaltyView roomPreviewer={ roomPreviewer } pageParser={ pageParser } />;
case 'badge_display':
return <CatalogLayoutBadgeDisplayView roomPreviewer={roomPreviewer} pageParser={ pageParser } />;
case 'bots':
case 'default_3x3':
default:

7
src/views/catalog/views/page/layout/badge-display/CatalogLayoutBadgeDisplayView.scss Normal file
View File

@ -0,0 +1,7 @@
.nitro-catalog-layout-badge-display {
.inventory-badge-grid {
height: 200px;
max-height: 200px;
}
}

80
src/views/catalog/views/page/layout/badge-display/CatalogLayoutBadgeDisplayView.tsx Normal file
View File

@ -0,0 +1,80 @@
import { StringDataType } from 'nitro-renderer';
import { FC, useCallback, useEffect, useMemo, useState } from 'react';
import { InventoryBadgesUpdatedEvent } from '../../../../../../events';
import { InventoryBadgesRequestEvent } from '../../../../../../events/inventory/InventoryBadgesRequestEvent';
import { dispatchUiEvent, useUiEvent } from '../../../../../../hooks';
import { NitroCardGridItemView } from '../../../../../../layout/card/grid/item/NitroCardGridItemView';
import { NitroCardGridView } from '../../../../../../layout/card/grid/NitroCardGridView';
import { BadgeImageView } from '../../../../../shared/badge-image/BadgeImageView';
import { GetOfferName } from '../../../../common/CatalogUtilities';
import { useCatalogContext } from '../../../../context/CatalogContext';
import { CatalogRoomPreviewerView } from '../../../catalog-room-previewer/CatalogRoomPreviewerView';
import { CatalogPageOffersView } from '../../offers/CatalogPageOffersView';
import { CatalogPurchaseView } from '../../purchase/CatalogPurchaseView';
import { CatalogLayoutBadgeDisplayViewProps } from './CatalogLayoutBadgeDisplayView.types';
export const CatalogLayoutBadgeDisplayView: FC<CatalogLayoutBadgeDisplayViewProps> = props =>
{
const { roomPreviewer = null, pageParser = null } = props;
const { catalogState = null, dispatchCatalogState = null } = useCatalogContext();
const { activeOffer = null } = catalogState;
const [ currentBadge, setCurrentBadge ] = useState<string>(null);
const [ badges, setBadges ] = useState<string[]>([]);
const product = ((activeOffer && activeOffer.products[0]) || null);
const onInventoryBadgesUpdatedEvent = useCallback((event: InventoryBadgesUpdatedEvent) =>
{
console.log(event);
setBadges(event.badges);
}, []);
useUiEvent(InventoryBadgesUpdatedEvent.BADGES_UPDATED, onInventoryBadgesUpdatedEvent);
const badgeElements = useMemo(() =>
{
return badges.map(code =>
{
return (
<NitroCardGridItemView key={ code } itemActive={ (currentBadge === code) } onMouseDown={ event => setCurrentBadge(code) }>
<BadgeImageView badgeCode={ code } />
</NitroCardGridItemView>
);
});
}, [ badges, currentBadge ]);
useEffect(() =>
{
dispatchUiEvent(new InventoryBadgesRequestEvent(InventoryBadgesRequestEvent.REQUEST_BADGES));
}, []);
useEffect(() =>
{
if(!currentBadge || !activeOffer) return;
const stuffData = new StringDataType();
stuffData.setValue([ null, currentBadge ]);
roomPreviewer.updateObjectStuffData(stuffData);
}, [ currentBadge, activeOffer, roomPreviewer ]);
return (
<div className="row h-100 nitro-catalog-layout-badge-display">
<div className="d-flex flex-column col-7 h-100">
<CatalogPageOffersView offers={ pageParser.offers } />
<div className="d-flex mt-2">
<NitroCardGridView className="inventory-badge-grid">
{ badgeElements }
</NitroCardGridView>
</div>
</div>
{ product &&
<div className="position-relative d-flex flex-column col">
<CatalogRoomPreviewerView roomPreviewer={ roomPreviewer } height={ 140 } />
<div className="fs-6 text-black mt-1 overflow-hidden">{ GetOfferName(activeOffer) }</div>
<CatalogPurchaseView offer={ activeOffer } pageId={ pageParser.pageId } extra={ 'Bill 22-7-2021 ADM' } />
</div> }
</div>
);
}

6
src/views/catalog/views/page/layout/badge-display/CatalogLayoutBadgeDisplayView.types.ts Normal file
View File

@ -0,0 +1,6 @@
import { CatalogLayoutProps } from '../CatalogLayout.types';
export interface CatalogLayoutBadgeDisplayViewProps extends CatalogLayoutProps
{
}

36
src/views/inventory/InventoryMessageHandler.tsx
View File

@ -1,7 +1,10 @@
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, UnseenItemsEvent } from 'nitro-renderer';
import { AdvancedMap, BadgeReceivedEvent, BadgesEvent, BotAddedToInventoryEvent, BotInventoryMessageEvent, BotRemovedFromInventoryEvent, FurnitureListAddOrUpdateEvent, FurnitureListEvent, FurnitureListInvalidateEvent, FurnitureListItemParser, FurnitureListRemovedEvent, FurniturePostItPlacedEvent, PetAddedToInventoryEvent, PetData, PetInventoryEvent, PetRemovedFromInventory, RequestBadgesComposer, TradingAcceptEvent, TradingCloseEvent, TradingCompletedEvent, TradingConfirmationEvent, TradingListItemEvent, TradingNotOpenEvent, TradingOpenEvent, TradingOpenFailedEvent, TradingOtherNotAllowedEvent, TradingYouAreNotAllowedEvent, UnseenItemsEvent } from 'nitro-renderer';
import { FC, useCallback } from 'react';
import { GetRoomSession, GetSessionDataManager } from '../../api';
import { CreateMessageHook } from '../../hooks/messages/message-event';
import { InventoryBadgesUpdatedEvent } from '../../events';
import { InventoryBadgesRequestEvent } from '../../events/inventory/InventoryBadgesRequestEvent';
import { dispatchUiEvent, useUiEvent } from '../../hooks';
import { CreateMessageHook, SendMessageHook } from '../../hooks/messages/message-event';
import { mergeFurniFragments } from './common/FurnitureUtilities';
import { mergePetFragments } from './common/PetUtilities';
import { TradeState } from './common/TradeState';
@ -17,7 +20,7 @@ let petMsgFragments: Map<number, PetData>[] = null;
export const InventoryMessageHandler: FC<InventoryMessageHandlerProps> = props =>
{
const { dispatchFurnitureState = null, dispatchBotState = null, dispatchPetState = null, dispatchBadgeState = null, unseenTracker = null } = useInventoryContext();
const { dispatchFurnitureState = null, dispatchBotState = null, dispatchPetState = null, badgeState = null, dispatchBadgeState = null, unseenTracker = null } = useInventoryContext();
const onFurnitureListAddOrUpdateEvent = useCallback((event: FurnitureListAddOrUpdateEvent) =>
{
@ -163,6 +166,18 @@ export const InventoryMessageHandler: FC<InventoryMessageHandlerProps> = props =
});
}, [ dispatchBadgeState ]);
const onBadgeReceivedEvent = useCallback((event: BadgeReceivedEvent) =>
{
const parser = event.getParser();
dispatchBadgeState({
type: InventoryBadgeActions.ADD_BADGE,
payload: {
badgeCode: parser.badgeCode
}
});
}, [ dispatchBadgeState ]);
const onTradingAcceptEvent = useCallback((event: TradingAcceptEvent) =>
{
const parser = event.getParser();
@ -318,6 +333,7 @@ export const InventoryMessageHandler: FC<InventoryMessageHandlerProps> = props =
CreateMessageHook(PetRemovedFromInventory, onPetRemovedFromInventory);
CreateMessageHook(PetAddedToInventoryEvent, onPetAddedToInventoryEvent);
CreateMessageHook(BadgesEvent, onBadgesEvent);
CreateMessageHook(BadgeReceivedEvent, onBadgeReceivedEvent);
CreateMessageHook(TradingAcceptEvent, onTradingAcceptEvent);
CreateMessageHook(TradingCloseEvent, onTradingCloseEvent);
CreateMessageHook(TradingCompletedEvent, onTradingCompletedEvent);
@ -330,5 +346,19 @@ export const InventoryMessageHandler: FC<InventoryMessageHandlerProps> = props =
CreateMessageHook(TradingYouAreNotAllowedEvent, onTradingYouAreNotAllowedEvent);
CreateMessageHook(UnseenItemsEvent, onUnseenItemsEvent);
const onInventoryBadgesRequestEvent = useCallback((event: InventoryBadgesRequestEvent) =>
{
if(badgeState.needsBadgeUpdate)
{
SendMessageHook(new RequestBadgesComposer());
return;
}
dispatchUiEvent(new InventoryBadgesUpdatedEvent(InventoryBadgesUpdatedEvent.BADGES_UPDATED, badgeState.badges));
}, [ badgeState ])
useUiEvent(InventoryBadgesRequestEvent.REQUEST_BADGES, onInventoryBadgesRequestEvent);
return null;
}

11
src/views/inventory/InventoryView.tsx
View File

@ -1,10 +1,10 @@
import { IRoomSession, RoomEngineObjectEvent, RoomEngineObjectPlacedEvent, RoomPreviewer, RoomSessionEvent, TradingCancelComposer, TradingCloseComposer, TradingOpenComposer } from 'nitro-renderer';
import { FC, useCallback, useEffect, useReducer, useState } from 'react';
import { GetRoomEngine } from '../../api';
import { InventoryEvent, InventoryTradeRequestEvent } from '../../events';
import { InventoryBadgesUpdatedEvent, 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 { dispatchUiEvent, 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';
@ -186,6 +186,13 @@ export const InventoryView: FC<InventoryViewProps> = props =>
}
}, [ furnitureState.tradeData, isVisible ]);
useEffect(() =>
{
if(!badgeState.badges) return;
dispatchUiEvent(new InventoryBadgesUpdatedEvent(InventoryBadgesUpdatedEvent.BADGES_UPDATED, badgeState.badges));
}, [ badgeState.badges ]);
return (
<InventoryContextProvider value={ { furnitureState, dispatchFurnitureState, botState, dispatchBotState, petState, dispatchPetState, badgeState, dispatchBadgeState, unseenTracker } }>
<InventoryMessageHandler />

19
src/views/inventory/reducers/InventoryBadgeReducer.tsx
View File

@ -23,11 +23,12 @@ export interface IInventoryBadgeAction
export class InventoryBadgeActions
{
public static SET_NEEDS_UPDATE: string = 'IBDA_SET_NEEDS_UPDATE';
public static SET_BADGE: string = 'IBDA_SET_BADGE';
public static SET_BADGES: string = 'IBDA_SET_BADGES';
public static ADD_ACTIVE_BADGE: string = 'IBDA_ADD_ACTIVE_BADGE';
public static REMOVE_ACTIVE_BADGE: string = 'IBDA_REMOVE_ACTIVE_BADGE';
public static SET_NEEDS_UPDATE: string = 'IBA_SET_NEEDS_UPDATE';
public static SET_BADGE: string = 'IBA_SET_BADGE';
public static SET_BADGES: string = 'IBA_SET_BADGES';
public static ADD_BADGE: string = 'IBA_ADD_BADGE';
public static ADD_ACTIVE_BADGE: string = 'IBA_ADD_ACTIVE_BADGE';
public static REMOVE_ACTIVE_BADGE: string = 'IBA_REMOVE_ACTIVE_BADGE';
}
export const initialInventoryBadge: IInventoryBadgeState = {
@ -77,6 +78,14 @@ export const InventoryBadgeReducer: Reducer<IInventoryBadgeState, IInventoryBadg
return { ...state, badges, activeBadges };
}
case InventoryBadgeActions.ADD_BADGE: {
const badges = [ ...state.badges ];
const badge = (action.payload.badgeCode);
if(badges.indexOf(badge) === -1) badges.push(badge);
return { ...state, badges };
}
case InventoryBadgeActions.ADD_ACTIVE_BADGE: {
const badgeCode = action.payload.badgeCode;

1
src/views/inventory/views/badge/InventoryBadgeView.tsx
View File

@ -19,6 +19,7 @@ export const InventoryBadgeView: FC<InventoryBadgeViewProps> = props =>
{
if(needsBadgeUpdate)
{
console.log('yee')
dispatchBadgeState({
type: InventoryBadgeActions.SET_NEEDS_UPDATE,
payload: {

5
src/views/navigator/NavigatorView.tsx
View File

@ -1,6 +1,7 @@
import { ILinkEventTracker, NavigatorInitComposer, NavigatorSearchComposer, RoomSessionEvent } from 'nitro-renderer';
import { FC, useCallback, useEffect, useReducer, useState } from 'react';
import { AddEventLinkTracker, RemoveLinkEventTracker } from '../../api';
import { TryVisitRoom } from '../../api/navigator/TryVisitRoom';
import { NavigatorEvent } from '../../events';
import { useRoomSessionManagerEvent } from '../../hooks/events/nitro/session/room-session-manager-event';
import { useUiEvent } from '../../hooks/events/ui/ui-event';
@ -93,7 +94,7 @@ export const NavigatorView: FC<NavigatorViewProps> = props =>
default: {
const roomId = parseInt(parts[2]);
//if(roomId > 0) this.goToPrivateRoom(roomId);
TryVisitRoom(roomId);
}
}
}
@ -105,7 +106,7 @@ export const NavigatorView: FC<NavigatorViewProps> = props =>
{
const linkTracker: ILinkEventTracker = {
linkReceived,
eventUrlPrefix: 'navigator'
eventUrlPrefix: 'navigator/'
};
AddEventLinkTracker(linkTracker);