nitro/apps/frontend/src/components/inventory/views/bot/InventoryBotView.tsx

92 lines
3.5 KiB
TypeScript

import {IRoomSession, RoomObjectVariable, RoomPreviewer} from "@nitro/renderer";
import {FC, useEffect, useState} from "react";
import {GetRoomEngine, LocalizeText, UnseenItemCategory, attemptBotPlacement} from "../../../../api";
import {AutoGrid, Button, Column, Grid, LayoutRoomPreviewerView, Text} from "../../../../common";
import {useInventoryBots, useInventoryUnseenTracker} from "../../../../hooks";
import {InventoryCategoryEmptyViewBots} from "../InventoryCategoryEmptyViewBots";
import {InventoryBotItemView} from "./InventoryBotItemView";
interface InventoryBotViewProps {
roomSession: IRoomSession;
roomPreviewer: RoomPreviewer;
}
export const InventoryBotView: FC<InventoryBotViewProps> = props => {
const {roomSession = null, roomPreviewer = null} = props;
const [isVisible, setIsVisible] = useState(false);
const {botItems = [], selectedBot = null, activate = null, deactivate = null} = useInventoryBots();
const {isUnseen = null, removeUnseen = null} = useInventoryUnseenTracker();
useEffect(() => {
if (!selectedBot || !roomPreviewer) return;
const botData = selectedBot.botData;
const roomEngine = GetRoomEngine();
let wallType = roomEngine.getRoomInstanceVariable<string>(roomEngine.activeRoomId, RoomObjectVariable.ROOM_WALL_TYPE);
let floorType = roomEngine.getRoomInstanceVariable<string>(roomEngine.activeRoomId, RoomObjectVariable.ROOM_FLOOR_TYPE);
let landscapeType = roomEngine.getRoomInstanceVariable<string>(roomEngine.activeRoomId, RoomObjectVariable.ROOM_LANDSCAPE_TYPE);
wallType = wallType && wallType.length ? wallType : "101";
floorType = floorType && floorType.length ? floorType : "101";
landscapeType = landscapeType && landscapeType.length ? landscapeType : "1.1";
roomPreviewer.reset(false);
roomPreviewer.updateRoomWallsAndFloorVisibility(true, true);
roomPreviewer.updateObjectRoom(floorType, wallType, landscapeType);
roomPreviewer.addAvatarIntoRoom(botData.figure, 0);
}, [roomPreviewer, selectedBot]);
useEffect(() => {
if (!selectedBot || !isUnseen(UnseenItemCategory.BOT, selectedBot.botData.id)) return;
removeUnseen(UnseenItemCategory.BOT, selectedBot.botData.id);
}, [selectedBot, isUnseen, removeUnseen]);
useEffect(() => {
if (!isVisible) return;
const id = activate();
return () => deactivate(id);
}, [isVisible, activate, deactivate]);
useEffect(() => {
setIsVisible(true);
return () => setIsVisible(false);
}, []);
if (!botItems || !botItems.length)
return <InventoryCategoryEmptyViewBots title={LocalizeText("inventory.empty.bots.title")} desc={LocalizeText("inventory.empty.bots.desc")} />;
return (
<Grid>
<Column size={7} overflow="hidden">
<AutoGrid columnCount={5}>
{botItems && botItems.length > 0 && botItems.map(item => <InventoryBotItemView key={item.botData.id} botItem={item} />)}
</AutoGrid>
</Column>
<Column size={5} overflow="auto">
<Column overflow="hidden" position="relative">
<LayoutRoomPreviewerView roomPreviewer={roomPreviewer} height={140} />
</Column>
{selectedBot && (
<Column grow justifyContent="between" gap={2}>
<Text grow truncate>
{selectedBot.botData.name}
</Text>
{!!roomSession && (
<Button variant="success" onClick={event => attemptBotPlacement(selectedBot)}>
{LocalizeText("inventory.furni.placetoroom")}
</Button>
)}
</Column>
)}
</Column>
</Grid>
);
};