nitro
/
nitro
mirror of https://github.com/Gurkengewuerz/nitro.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #1 from duckietm/main 

Default empty screens for catalog
This commit is contained in:
Niklas 2023-03-19 22:09:01 +01:00 committed by GitHub
parent aff5eade5b 223aec7e88
commit 61c1381c21
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
9 changed files with 219 additions and 90 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

78
apps/frontend/src/components/inventory/InventoryView.scss
View File

@ -1,17 +1,69 @@
.nitro-inventory {
width: $inventory-width;
height: $inventory-height;
width: $inventory-width;
height: $inventory-height;
.empty-image {
background: url("@/assets/images/inventory/empty.png");
width: 129px;
height: 181px;
}
.empty-image {
background: url('@/assets/images/inventory/empty.png');
width: 129px;
height: 181px;
}
.empty-image {
background: url('@/assets/images/inventory/empty.png');
background-repeat: no-repeat;
width: 129px;
height: 181px;
}
.empty-petsimage {
background: url('@/assets/images/inventory/petsempty.png');
background-repeat: no-repeat;
width: 220px;
height: 220px;
}
.empty-furniimage {
background: url('@/assets/images/inventory/furniempty.png');
background-repeat: no-repeat;
width: 220px;
height: 220px;
}
.empty-botsimage {
background: url('@/assets/images/inventory/botsempty.png');
background-repeat: no-repeat;
width: 220px;
height: 220px;
}
.bubble-inventory {
position: relative;
font-family: sans-serif;
font-size: 14px;
line-height: 5px;
width: auto;
background: #fff;
border-radius: 15px;
padding: 5px;
text-align: left;
color: #000;
}
.bubble-inventory-bottom-left:after {
content: '';
position: absolute;
bottom: 0;
left: 15%;
width: 0;
height: 0;
border: 20px solid transparent;
border-top-color: #fff;
border-bottom: 0;
border-right: 0;
margin-left: -10px;
margin-bottom: -20px;
}
.trade-button {
min-height: 0;
font-size: 8px;
padding: 1px 2px;
z-index: 5;
}
.trade-button {
min-height: 0;
font-size: 8px;
padding: 1px 2px;
z-index: 5;
}
}

2
apps/frontend/src/components/inventory/InventoryView.tsx
View File

@ -31,7 +31,7 @@ const TAB_FURNITURE: string = "inventory.furni";
const TAB_BOTS: string = "inventory.bots";
const TAB_PETS: string = "inventory.furni.tab.pets";
const TAB_BADGES: string = "inventory.badges";
const TABS = [TAB_FURNITURE, TAB_BOTS, TAB_PETS, TAB_BADGES];
const TABS = [ TAB_FURNITURE, TAB_PETS, TAB_BADGES, TAB_BOTS ];
const UNSEEN_CATEGORIES = [UnseenItemCategory.FURNI, UnseenItemCategory.BOT, UnseenItemCategory.PET, UnseenItemCategory.BADGE];
export const InventoryView: FC<{}> = props => {

50
apps/frontend/src/components/inventory/views/InventoryCategoryEmptyView.tsx
View File

@ -1,27 +1,29 @@
import {FC} from "react";
import { FC } from 'react';
import { Column, Grid, GridProps, Text } from '../../../common';
import {Column, Grid, GridProps, Text} from "../../../common";
export interface InventoryCategoryEmptyViewProps extends GridProps {
title: string;
desc: string;
export interface InventoryCategoryEmptyViewProps extends GridProps
{
title: string;
desc: string;
}
export const InventoryCategoryEmptyView: FC<InventoryCategoryEmptyViewProps> = props => {
const {title = "", desc = "", children = null, ...rest} = props;
return (
<Grid {...rest}>
<Column center size={5} overflow="hidden">
<div className="empty-image" />
</Column>
<Column justifyContent="center" size={7} overflow="hidden">
<Text fontWeight="bold" fontSize={5} overflow="unset" truncate>
{title}
</Text>
<Text overflow="auto">{desc}</Text>
</Column>
{children}
</Grid>
);
};
export const InventoryCategoryEmptyView: FC<InventoryCategoryEmptyViewProps> = props =>
{
const { title = '', desc = '', children = null, ...rest } = props;
return (
<Grid { ...rest }>
<Column justifyContent="start" center size={ 6 } overflow="hidden">
<div className="empty-furniimage" />
</Column>
<Column justifyContent="center" size={ 6 } overflow="hidden">
<div className="bubble-inventory bubble-inventory-bottom-left">
<Text fontSize={ 6 } overflow="unset" truncate>{ title }</Text>
<Text overflow="auto" fontSize={ 6 }> { desc }</Text>
</div>
<div className="empty-image" />
</Column>
{ children }
</Grid>
);
}

29
apps/frontend/src/components/inventory/views/InventoryCategoryEmptyViewBots.tsx Normal file
View File

@ -0,0 +1,29 @@
import { FC } from 'react';
import { Column, Grid, GridProps, Text } from '../../../common';
export interface InventoryCategoryEmptyViewBotsProps extends GridProps
{
title: string;
desc: string;
}
export const InventoryCategoryEmptyViewBots: FC<InventoryCategoryEmptyViewBotsProps> = props =>
{
const { title = '', desc = '', children = null, ...rest } = props;
return (
<Grid { ...rest }>
<Column justifyContent="start" center size={ 6 } overflow="hidden">
<div className="empty-botsimage" />
</Column>
<Column justifyContent="center" size={ 6 } overflow="hidden">
<div className="bubble-inventory bubble-inventory-bottom-left">
<Text fontSize={ 6 } overflow="unset" truncate>{ title }</Text>
<Text overflow="auto" fontSize={ 6 }> { desc }</Text>
</div>
<div className="empty-image" />
</Column>
{ children }
</Grid>
);
}

29
apps/frontend/src/components/inventory/views/InventoryCategoryEmptyViewFurni.tsx Normal file
View File

@ -0,0 +1,29 @@
import { FC } from 'react';
import { Column, Grid, GridProps, Text } from '../../../common';
export interface InventoryCategoryEmptyViewFurniProps extends GridProps
{
title: string;
desc: string;
}
export const InventoryCategoryEmptyViewFurni: FC<InventoryCategoryEmptyViewFurniProps> = props =>
{
const { title = '', desc = '', children = null, ...rest } = props;
return (
<Grid { ...rest }>
<Column justifyContent="start" center size={ 6 } overflow="hidden">
<div className="empty-furniimage" />
</Column>
<Column justifyContent="center" size={ 6 } overflow="hidden">
<div className="bubble-inventory bubble-inventory-bottom-left">
<Text fontSize={ 6 } overflow="unset" truncate>{ title }</Text>
<Text overflow="auto" fontSize={ 6 }> { desc }</Text>
</div>
<div className="empty-image" />
</Column>
{ children }
</Grid>
);
}

29
apps/frontend/src/components/inventory/views/InventoryCategoryEmptyViewPets.tsx Normal file
View File

@ -0,0 +1,29 @@
import { FC } from 'react';
import { Column, Grid, GridProps, Text } from '../../../common';
export interface InventoryCategoryEmptyViewPetsProps extends GridProps
{
title: string;
desc: string;
}
export const InventoryCategoryEmptyViewPets: FC<InventoryCategoryEmptyViewPetsProps> = props =>
{
const { title = '', desc = '', children = null, ...rest } = props;
return (
<Grid { ...rest }>
<Column justifyContent="start" center size={ 6 } overflow="hidden">
<div className="empty-petsimage" />
</Column>
<Column justifyContent="center" size={ 6 } overflow="hidden">
<div className="bubble-inventory bubble-inventory-bottom-left">
<Text fontSize={ 6 } overflow="unset" truncate>{ title }</Text>
<Text overflow="auto" fontSize={ 6 }> { desc }</Text>
</div>
<div className="empty-image" />
</Column>
{ children }
</Grid>
);
}

5
apps/frontend/src/components/inventory/views/bot/InventoryBotView.tsx
View File

@ -4,7 +4,7 @@ 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 {InventoryCategoryEmptyView} from "../InventoryCategoryEmptyView";
import { InventoryCategoryEmptyViewBots } from '../InventoryCategoryEmptyViewBots';
import {InventoryBotItemView} from "./InventoryBotItemView";
interface InventoryBotViewProps {
@ -59,8 +59,7 @@ export const InventoryBotView: FC<InventoryBotViewProps> = props => {
return () => setIsVisible(false);
}, []);
if (!botItems || !botItems.length)
return <InventoryCategoryEmptyView title={LocalizeText("inventory.empty.bots.title")} desc={LocalizeText("inventory.empty.bots.desc")} />;
if(!botItems || !botItems.length) return <InventoryCategoryEmptyViewBots title={ LocalizeText('inventory.empty.bots.title') } desc={ LocalizeText('inventory.empty.bots.desc') } />;
return (
<Grid>

82
apps/frontend/src/components/inventory/views/furniture/InventoryFurnitureView.tsx
View File

@ -92,7 +92,7 @@ export const InventoryFurnitureView: FC<InventoryFurnitureViewProps> = props =>
resetItems(
UnseenItemCategory.FURNI,
selectedItem.items.map(item => item.id)
);
)
selectedItem.hasUnseenItems = false;
}, [selectedItem, resetItems]);
@ -109,55 +109,45 @@ export const InventoryFurnitureView: FC<InventoryFurnitureViewProps> = props =>
setIsVisible(true);
return () => setIsVisible(false);
}, []);
}, [])
if (!groupItems || !groupItems.length)
return <InventoryCategoryEmptyView title={LocalizeText("inventory.empty.title")} desc={LocalizeText("inventory.empty.desc")} />;
return (
<Grid>
<Column size={7} overflow="hidden">
<InventoryFurnitureSearchView groupItems={groupItems} setGroupItems={setFilteredGroupItems} />
<AutoGrid columnCount={5}>
{filteredGroupItems &&
filteredGroupItems.length > 0 &&
filteredGroupItems.map((item, index) => <InventoryFurnitureItemView key={index} groupItem={item} />)}
</AutoGrid>
</Column>
<Column size={5} overflow="auto">
<Column overflow="hidden" position="relative">
<LayoutRoomPreviewerView roomPreviewer={roomPreviewer} height={140} />
{selectedItem && selectedItem.stuffData.isUnique && (
<LayoutLimitedEditionCompactPlateView
className="top-2 end-2"
position="absolute"
uniqueNumber={selectedItem.stuffData.uniqueNumber}
uniqueSeries={selectedItem.stuffData.uniqueSeries}
/>
)}
{selectedItem && selectedItem.stuffData.rarityLevel > -1 && (
<LayoutRarityLevelView className="top-2 end-2" position="absolute" level={selectedItem.stuffData.rarityLevel} />
)}
</Column>
{selectedItem && (
<Column grow justifyContent="between" gap={2}>
<Column grow gap={1}>
<Text bold>{selectedItem.name}</Text>
<Text>{selectedItem.description}</Text>
<Grid>
<Column size={ 7 } overflow="hidden">
<InventoryFurnitureSearchView groupItems={ groupItems } setGroupItems={ setFilteredGroupItems } />
<AutoGrid columnCount={ 5 }>
{ filteredGroupItems && (filteredGroupItems.length > 0) && filteredGroupItems.map((item, index) => <InventoryFurnitureItemView key={ index } groupItem={ item } />) }
</AutoGrid>
</Column>
<Column gap={1}>
{!!roomSession && (
<Button variant="success" onClick={event => attemptItemPlacement(selectedItem)}>
{LocalizeText("inventory.furni.placetoroom")}
</Button>
)}
{selectedItem && selectedItem.isSellable && (
<Button onClick={event => attemptPlaceMarketplaceOffer(selectedItem)}>{LocalizeText("inventory.marketplace.sell")}</Button>
)}
<Column size={ 5 } overflow="auto">
<Column overflow="hidden" position="relative">
<LayoutRoomPreviewerView roomPreviewer={ roomPreviewer } height={ 140 } />
{ selectedItem && selectedItem.stuffData.isUnique &&
<LayoutLimitedEditionCompactPlateView className="top-2 end-2" position="absolute" uniqueNumber={ selectedItem.stuffData.uniqueNumber } uniqueSeries={ selectedItem.stuffData.uniqueSeries } /> }
{ (selectedItem && selectedItem.stuffData.rarityLevel > -1) &&
<LayoutRarityLevelView className="top-2 end-2" position="absolute" level={ selectedItem.stuffData.rarityLevel } /> }
</Column>
{ selectedItem &&
<Column grow justifyContent="between" gap={ 2 }>
<Column grow gap={ 1 }>
<Text bold>{ selectedItem.name }</Text>
<Text>{ selectedItem.description }</Text>
</Column>
<Column gap={ 1 }>
{ !!roomSession &&
<Button variant="success" onClick={ event => attemptItemPlacement(selectedItem) }>
{ LocalizeText('inventory.furni.placetoroom') }
</Button> }
{ (selectedItem && selectedItem.isSellable) &&
<Button onClick={ event => attemptPlaceMarketplaceOffer(selectedItem) }>
{ LocalizeText('inventory.marketplace.sell') }
</Button> }
</Column>
</Column> }
</Column>
</Column>
)}
</Column>
</Grid>
);
};
</Grid>
);
}

5
apps/frontend/src/components/inventory/views/pet/InventoryPetView.tsx
View File

@ -4,7 +4,7 @@ import {FC, useEffect, useState} from "react";
import {GetRoomEngine, LocalizeText, UnseenItemCategory, attemptPetPlacement} from "../../../../api";
import {AutoGrid, Button, Column, Grid, LayoutRoomPreviewerView, Text} from "../../../../common";
import {useInventoryPets, useInventoryUnseenTracker} from "../../../../hooks";
import {InventoryCategoryEmptyView} from "../InventoryCategoryEmptyView";
import { InventoryCategoryEmptyViewPets } from '../InventoryCategoryEmptyViewPets';
import {InventoryPetItemView} from "./InventoryPetItemView";
interface InventoryPetViewProps {
@ -58,8 +58,7 @@ export const InventoryPetView: FC<InventoryPetViewProps> = props => {
return () => setIsVisible(false);
}, []);
if (!petItems || !petItems.length)
return <InventoryCategoryEmptyView title={LocalizeText("inventory.empty.pets.title")} desc={LocalizeText("inventory.empty.pets.desc")} />;
if(!petItems || !petItems.length) return <InventoryCategoryEmptyViewPets title={ LocalizeText('inventory.empty.pets.title') } desc={ LocalizeText('inventory.empty.pets.desc') } />;
return (
<Grid>