This commit is contained in:
Bill 2021-04-22 02:47:25 -04:00
commit 6f0ac2e7e8
19 changed files with 160 additions and 13 deletions

View File

@ -8,8 +8,8 @@ export function HotelView(props: HotelViewProps): JSX.Element
const sun = Nitro.instance.core.configuration.interpolate(Nitro.instance.getConfiguration('hotelview.images')['sun']);
const drape = Nitro.instance.core.configuration.interpolate(Nitro.instance.getConfiguration('hotelview.images')['drape']);
const left = Nitro.instance.core.configuration.interpolate(Nitro.instance.getConfiguration('hotelview.images')['left']);
const rightRepeat = Nitro.instance.core.configuration.interpolate(Nitro.instance.getConfiguration('hotelview.images')['right.repeat']);
const right = Nitro.instance.core.configuration.interpolate(Nitro.instance.getConfiguration('hotelview.images')['right']);
//const rightRepeat = Nitro.instance.core.configuration.interpolate(Nitro.instance.getConfiguration('hotelview.images')['right.repeat']);
//const right = Nitro.instance.core.configuration.interpolate(Nitro.instance.getConfiguration('hotelview.images')['right']);
return (
<div className="nitro-hotel-view" style={ (backgroundColor && backgroundColor) ? { background: backgroundColor } : {} }>

View File

@ -1,16 +1,28 @@
import { RoomSessionEvent } from 'nitro-renderer';
import { FC, useCallback, useState } from 'react';
import { createContext, FC, useCallback, useEffect, useState } from 'react';
import { InventoryEvent } from '../../events';
import { DraggableWindow } from '../../hooks/draggable-window/DraggableWindow';
import { useRoomSessionManagerEvent } from '../../hooks/events/nitro/session/room-session-manager-event';
import { useUiEvent } from '../../hooks/events/ui/ui-event';
import { LocalizeText } from '../../utils/LocalizeText';
import { InventoryMessageHandler } from './InventoryMessageHandler';
import { InventoryViewProps } from './InventoryView.types';
import { IInventoryContext, InventoryTabs, InventoryViewProps } from './InventoryView.types';
import { InventoryTabsContentView } from './tabs-content/InventoryTabsContentView';
import { InventoryTabsSelectorView } from './tabs-selector/InventoryTabsSelectorView';
export const InventoryContext = createContext<IInventoryContext>(null);
export const InventoryView: FC<InventoryViewProps> = props =>
{
const [ isVisible, setIsVisible ] = useState(false);
const [ isVisible, setIsVisible ] = useState(false);
const [ currentTab, setCurrentTab ] = useState<string>(null);
const [ tabs, setTabs ] = useState<string[]>([
InventoryTabs.FURNITURE, InventoryTabs.BOTS, InventoryTabs.PETS, InventoryTabs.BADGES
]);
useEffect(() => {
setCurrentTab(tabs[0]);
}, [ tabs ]);
const onInventoryEvent = useCallback((event: InventoryEvent) =>
{
@ -50,7 +62,7 @@ export const InventoryView: FC<InventoryViewProps> = props =>
}
return (
<>
<InventoryContext.Provider value={{ currentTab: currentTab, onSetCurrentTab: setCurrentTab }}>
<InventoryMessageHandler />
{ isVisible && <DraggableWindow handle=".drag-handler">
<div className="nitro-inventory d-flex flex-column bg-primary border border-black shadow rounded">
@ -60,11 +72,10 @@ export const InventoryView: FC<InventoryViewProps> = props =>
<i className="fas fa-times"></i>
</button>
</div>
<div className="d-flex p-3">
content
</div>
<InventoryTabsSelectorView tabs={ tabs } />
<InventoryTabsContentView />
</div>
</DraggableWindow> }
</>
</InventoryContext.Provider>
);
}

View File

@ -1,4 +1,16 @@
export interface InventoryViewProps
{}
export interface IInventoryContext
{
currentTab: string;
onSetCurrentTab: (tab: string) => void;
}
export class InventoryTabs
{
public static readonly FURNITURE: string = 'inventory.furni';
public static readonly BOTS: string = 'inventory.bots';
public static readonly PETS: string = 'inventory.furni.tab.pets';
public static readonly BADGES: string = 'inventory.badges';
}

View File

@ -0,0 +1,22 @@
import { FC, useContext } from 'react';
import { InventoryContext } from '../InventoryView';
import { InventoryTabs } from '../InventoryView.types';
import { InventoryTabBadgesView } from './badges/InventoryTabBadgesView';
import { InventoryTabBotsView } from './bots/InventoryTabBotsView';
import { InventoryTabFurnitureView } from './furniture/InventoryTabFurnitureView';
import { InventoryTabsContentViewProps } from './InventoryTabsContentView.types';
import { InventoryTabPetsView } from './pets/InventoryTabPetsView';
export const InventoryTabsContentView: FC<InventoryTabsContentViewProps> = props =>
{
const inventoryContext = useContext(InventoryContext);
return (
<div className="px-3 pb-3">
{ inventoryContext && inventoryContext.currentTab && inventoryContext.currentTab === InventoryTabs.FURNITURE && <InventoryTabFurnitureView /> }
{ inventoryContext && inventoryContext.currentTab && inventoryContext.currentTab === InventoryTabs.BOTS && <InventoryTabBotsView /> }
{ inventoryContext && inventoryContext.currentTab && inventoryContext.currentTab === InventoryTabs.PETS && <InventoryTabPetsView /> }
{ inventoryContext && inventoryContext.currentTab && inventoryContext.currentTab === InventoryTabs.BADGES && <InventoryTabBadgesView /> }
</div>
);
}

View File

@ -0,0 +1,2 @@
export interface InventoryTabsContentViewProps
{}

View File

@ -0,0 +1,12 @@
import { FC, useContext } from 'react';
import { InventoryContext } from '../../InventoryView';
import { InventoryTabBadgesViewProps } from './InventoryTabBadgesView.types';
export const InventoryTabBadgesView: FC<InventoryTabBadgesViewProps> = props =>
{
const inventoryContext = useContext(InventoryContext);
return (
<>Badges content</>
);
}

View File

@ -0,0 +1,2 @@
export interface InventoryTabBadgesViewProps
{}

View File

@ -0,0 +1,12 @@
import { FC, useContext } from 'react';
import { InventoryContext } from '../../InventoryView';
import { InventoryTabBotsViewProps } from './InventoryTabBotsView.types';
export const InventoryTabBotsView: FC<InventoryTabBotsViewProps> = props =>
{
const inventoryContext = useContext(InventoryContext);
return (
<>Bots content</>
);
}

View File

@ -0,0 +1,2 @@
export interface InventoryTabBotsViewProps
{}

View File

@ -0,0 +1,12 @@
import { FC, useContext } from 'react';
import { InventoryContext } from '../../InventoryView';
import { InventoryTabFurnitureViewProps } from './InventoryTabFurnitureView.types';
export const InventoryTabFurnitureView: FC<InventoryTabFurnitureViewProps> = props =>
{
const inventoryContext = useContext(InventoryContext);
return (
<>Furniture content</>
);
}

View File

@ -0,0 +1,2 @@
export interface InventoryTabFurnitureViewProps
{}

View File

@ -0,0 +1,12 @@
import { FC, useContext } from 'react';
import { InventoryContext } from '../../InventoryView';
import { InventoryTabPetsViewProps } from './InventoryTabPetsView.types';
export const InventoryTabPetsView: FC<InventoryTabPetsViewProps> = props =>
{
const inventoryContext = useContext(InventoryContext);
return (
<>Pets content</>
);
}

View File

@ -0,0 +1,2 @@
export interface InventoryTabPetsViewProps
{}

View File

@ -0,0 +1,18 @@
import { FC } from 'react';
import { InventoryTabsSelectorViewProps } from './InventoryTabsSelectorView.types';
import { InventoryTabView } from './tab/InventoryTabView';
export const InventoryTabsSelectorView: FC<InventoryTabsSelectorViewProps> = props =>
{
return (
<div className="p-3">
{ props.tabs &&
<div className="btn-group w-100">
{ props.tabs.map((tab, index) =>
{
return <InventoryTabView key={ index } tab={ tab } />
}) }
</div> }
</div>
);
}

View File

@ -0,0 +1,4 @@
export interface InventoryTabsSelectorViewProps
{
tabs: string[];
}

View File

@ -0,0 +1,18 @@
import classNames from 'classnames';
import { FC, useContext } from 'react';
import { LocalizeText } from '../../../../utils/LocalizeText';
import { InventoryContext } from '../../InventoryView';
import { InventoryTabViewProps } from './InventoryTabView.types';
export const InventoryTabView: FC<InventoryTabViewProps> = props =>
{
const inventoryContext = useContext(InventoryContext);
return (
<button type="button"
className={ 'btn btn-secondary btn-sm ' + classNames({ 'active': inventoryContext.currentTab === props.tab })}
onClick={ () => inventoryContext.onSetCurrentTab(props.tab) }>
{ LocalizeText(props.tab) }
</button>
);
}

View File

@ -0,0 +1,4 @@
export interface InventoryTabViewProps
{
tab?: string;
}

View File

@ -11,7 +11,7 @@ export function NavigatorMessageHandler(props: NavigatorMessageHandlerProps): JS
const onUserInfoEvent = useCallback((event: UserInfoEvent) =>
{
const parser = event.getParser();
//const parser = event.getParser();
SendMessageHook(new NavigatorCategoriesComposer());
SendMessageHook(new NavigatorSettingsComposer());

View File

@ -6,7 +6,7 @@ export function NavigatorTabsView(props: NavigatorTabsViewProps): JSX.Element
const { topLevelContext = null, topLevelContexts = null, setTopLevelContext = null } = props;
return (
<div className="d-flex flex-column p-3">
<div className="p-3">
{ topLevelContexts && topLevelContexts.length &&
<div className="btn-group w-100">
{ topLevelContexts.map((context, index) =>