nitro/nitro-react
1
0
Fork 0
mirror of https://github.com/billsonnn/nitro-react.git synced 2025-01-31 10:22:36 +01:00
Code Issues Packages Projects Releases Wiki Activity

Update layout components

Browse Source
This commit is contained in:
Bill 2022-03-12 00:52:59 -05:00
parent 763fe1fe0f
commit 9cddf652ba
13 changed files with 188 additions and 189 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

160
src/common/index.scss
View File

@ -387,5 +387,165 @@
} }
} }
.unique-item {
.unique-bg-override {
background-position: center;
background-repeat: no-repeat;
z-index: 2;
}
&:before {
position: absolute;
content: '';
width: 100%;
height: 100%;
background: url("../assets/images/unique/grid-bg.png") center no-repeat;
z-index: 1;
}
&:after {
position: absolute;
content: '';
width: 100%;
height: 100%;
background: url("../assets/images/unique/grid-bg-glass.png") center no-repeat;
bottom: 0;
z-index: 4;
}
&.sold-out:after {
background: url("../assets/images/unique/grid-bg-sold-out.png") center no-repeat,
url("../assets/images/unique/grid-bg-glass.png") center no-repeat;
}
.unique-item-counter {
margin: 0 auto;
display: flex;
justify-content: center;
align-items: center;
bottom: 1px;
width: 100%;
height: 9px;
background: url("../assets/images/unique/grid-count-bg.png") center no-repeat;
z-index: 3;
}
}
.unique-sold-out-blocker {
width: 364px;
height: 30px;
background: url("../assets/images/unique/catalog-info-sold-out.png");
div {
float: right;
width: 140px;
text-align: center;
font-weight: bold;
margin-top: 5px;
margin-right: 17px;
color: #000;
}
}
.unique-compact-plate {
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: center;
right: 16px;
width: 34px;
height: 37px;
background: url("../assets/images/unique/inventory-info-amount-bg.png");
div {
display: flex;
justify-content: center;
align-items: center;
height: 9.5px;
}
}
.unique-complete-plate {
width: 170px;
height: 29px;
background: url("../assets/images/unique/catalog-info-amount-bg.png") no-repeat center;
z-index: 1;
padding-top: 3px;
.plate-container {
margin-left: 45px;
width: 100px;
font-size: 10px;
color: black;
> :first-child {
margin-bottom: 2px;
}
}
}
.limited-edition-number {
display: inline-block;
outline: 0;
height: 5px;
margin-right: 1px;
background-image: url('../assets/images/unique/numbers.png');
background-repeat: no-repeat;
&:last-child {
margin-right: 0px;
}
&.n-0 {
width: 4px;
background-position: -1px 0px;
}
&.n-1 {
width: 2px;
background-position: -6px 0px;
}
&.n-2 {
width: 4px;
background-position: -9px 0px;
}
&.n-3 {
width: 4px;
background-position: -14px 0px;
}
&.n-4 {
width: 4px;
background-position: -19px 0px;
}
&.n-5 {
width: 4px;
background-position: -24px 0px;
}
&.n-6 {
width: 4px;
background-position: -29px 0px;
}
&.n-7 {
width: 4px;
background-position: -34px 0px;
}
&.n-8 {
width: 4px;
background-position: -39px 0px;
}
&.n-9 {
width: 4px;
background-position: -44px 0px;
}
}
@import './card/NitroCardView'; @import './card/NitroCardView';

4
src/common/layout/LayoutGridItem.tsx
View File

@ -1,8 +1,8 @@
import { FC, useMemo } from 'react'; import { FC, useMemo } from 'react';
import { LimitedEditionStyledNumberView } from '../../views/shared/limited-edition/LimitedEditionStyledNumberView';
import { Base } from '../Base'; import { Base } from '../Base';
import { Column, ColumnProps } from '../Column'; import { Column, ColumnProps } from '../Column';
import { LayoutItemCountView } from './LayoutItemCountView'; import { LayoutItemCountView } from './LayoutItemCountView';
import { LayoutLimitedEditionStyledNumberView } from './limited-edition';
export interface LayoutGridItemProps extends ColumnProps export interface LayoutGridItemProps extends ColumnProps
{ {
@ -66,7 +66,7 @@ export const LayoutGridItem: FC<LayoutGridItemProps> = props =>
<> <>
<Base fit className="unique-bg-override" style={ { backgroundImage: `url(${ itemImage })` } } /> <Base fit className="unique-bg-override" style={ { backgroundImage: `url(${ itemImage })` } } />
<div className="position-absolute bottom-0 unique-item-counter"> <div className="position-absolute bottom-0 unique-item-counter">
<LimitedEditionStyledNumberView value={ itemUniqueNumber } /> <LayoutLimitedEditionStyledNumberView value={ itemUniqueNumber } />
</div> </div>
</> } </> }
{ children } { children }

1
src/common/layout/index.ts
View File

@ -15,4 +15,5 @@ export * from './LayoutRarityLevelView';
export * from './LayoutRoomPreviewerView'; export * from './LayoutRoomPreviewerView';
export * from './LayoutRoomThumbnailView'; export * from './LayoutRoomThumbnailView';
export * from './LayoutTrophyView'; export * from './LayoutTrophyView';
export * from './limited-edition';
export * from './UserProfileIconView'; export * from './UserProfileIconView';

12
src/views/shared/limited-edition/LimitedEditionCompactPlateView.tsx → src/common/layout/limited-edition/LayoutLimitedEditionCompactPlateView.tsx
View File

@ -1,14 +1,14 @@
import { FC, useMemo } from 'react'; import { FC, useMemo } from 'react';
import { Base, BaseProps } from '../../../common/Base'; import { Base, BaseProps } from '../../Base';
import { LimitedEditionStyledNumberView } from './LimitedEditionStyledNumberView'; import { LayoutLimitedEditionStyledNumberView } from './LayoutLimitedEditionStyledNumberView';
export interface LimitedEditionCompactPlateViewProps extends BaseProps<HTMLDivElement> interface LayoutLimitedEditionCompactPlateViewProps extends BaseProps<HTMLDivElement>
{ {
uniqueNumber: number; uniqueNumber: number;
uniqueSeries: number; uniqueSeries: number;
} }
export const LimitedEditionCompactPlateView: FC<LimitedEditionCompactPlateViewProps> = props => export const LayoutLimitedEditionCompactPlateView: FC<LayoutLimitedEditionCompactPlateViewProps> = props =>
{ {
const { uniqueNumber = 0, uniqueSeries = 0, classNames = [], children = null, ...rest } = props; const { uniqueNumber = 0, uniqueSeries = 0, classNames = [], children = null, ...rest } = props;
@ -24,10 +24,10 @@ export const LimitedEditionCompactPlateView: FC<LimitedEditionCompactPlateViewPr
return ( return (
<Base classNames={ getClassNames } { ...rest }> <Base classNames={ getClassNames } { ...rest }>
<div> <div>
<LimitedEditionStyledNumberView value={ uniqueNumber } /> <LayoutLimitedEditionStyledNumberView value={ uniqueNumber } />
</div> </div>
<div> <div>
<LimitedEditionStyledNumberView value={ uniqueSeries } /> <LayoutLimitedEditionStyledNumberView value={ uniqueSeries } />
</div> </div>
{ children } { children }
</Base> </Base>

16
src/views/shared/limited-edition/LimitedEditionCompletePlateView.tsx → src/common/layout/limited-edition/LayoutLimitedEditionCompletePlateView.tsx
View File

@ -1,17 +1,17 @@
import { FC, useMemo } from 'react'; import { FC, useMemo } from 'react';
import { LocalizeText } from '../../../api'; import { LocalizeText } from '../../../api';
import { Base, BaseProps } from '../../../common/Base'; import { Base, BaseProps } from '../../Base';
import { Column } from '../../../common/Column'; import { Column } from '../../Column';
import { Flex } from '../../../common/Flex'; import { Flex } from '../../Flex';
import { LimitedEditionStyledNumberView } from './LimitedEditionStyledNumberView'; import { LayoutLimitedEditionStyledNumberView } from './LayoutLimitedEditionStyledNumberView';
export interface LimitedEditionCompletePlateViewProps extends BaseProps<HTMLDivElement> interface LayoutLimitedEditionCompletePlateViewProps extends BaseProps<HTMLDivElement>
{ {
uniqueLimitedItemsLeft: number; uniqueLimitedItemsLeft: number;
uniqueLimitedSeriesSize: number; uniqueLimitedSeriesSize: number;
} }
export const LimitedEditionCompletePlateView: FC<LimitedEditionCompletePlateViewProps> = props => export const LayoutLimitedEditionCompletePlateView: FC<LayoutLimitedEditionCompletePlateViewProps> = props =>
{ {
const { uniqueLimitedItemsLeft = 0, uniqueLimitedSeriesSize = 0, classNames = [], ...rest } = props; const { uniqueLimitedItemsLeft = 0, uniqueLimitedSeriesSize = 0, classNames = [], ...rest } = props;
@ -29,11 +29,11 @@ export const LimitedEditionCompletePlateView: FC<LimitedEditionCompletePlateView
<Column className="plate-container" gap={ 0 }> <Column className="plate-container" gap={ 0 }>
<Flex justifyContent="between" alignItems="center"> <Flex justifyContent="between" alignItems="center">
{ LocalizeText('unique.items.left') } { LocalizeText('unique.items.left') }
<LimitedEditionStyledNumberView value={ uniqueLimitedItemsLeft } /> <LayoutLimitedEditionStyledNumberView value={ uniqueLimitedItemsLeft } />
</Flex> </Flex>
<Flex justifyContent="between" alignItems="center"> <Flex justifyContent="between" alignItems="center">
{ LocalizeText('unique.items.number.sold') } { LocalizeText('unique.items.number.sold') }
<LimitedEditionStyledNumberView value={ uniqueLimitedSeriesSize } /> <LayoutLimitedEditionStyledNumberView value={ uniqueLimitedSeriesSize } />
</Flex> </Flex>
</Column> </Column>
</Base> </Base>

4
src/views/shared/limited-edition/LimitedEditionStyledNumberView.tsx → src/common/layout/limited-edition/LayoutLimitedEditionStyledNumberView.tsx
View File

@ -1,11 +1,11 @@
import { FC } from 'react'; import { FC } from 'react';
export interface LimitedEditionStyledNumberViewProps interface LayoutLimitedEditionStyledNumberViewProps
{ {
value: number; value: number;
} }
export const LimitedEditionStyledNumberView: FC<LimitedEditionStyledNumberViewProps> = props => export const LayoutLimitedEditionStyledNumberView: FC<LayoutLimitedEditionStyledNumberViewProps> = props =>
{ {
const { value = 0 } = props; const { value = 0 } = props;

3
src/common/layout/limited-edition/index.ts Normal file
View File

@ -0,0 +1,3 @@
export * from './LayoutLimitedEditionCompactPlateView';
export * from './LayoutLimitedEditionCompletePlateView';
export * from './LayoutLimitedEditionStyledNumberView';

5
src/components/catalog/views/page/widgets/CatalogLimitedItemWidgetView.tsx
View File

@ -1,6 +1,5 @@
import { FC } from 'react'; import { FC } from 'react';
import { Base, BaseProps } from '../../../../../common/Base'; import { Base, BaseProps, LayoutLimitedEditionCompletePlateView } from '../../../../../common';
import { LimitedEditionCompletePlateView } from '../../../../../views/shared/limited-edition/LimitedEditionCompletePlateView';
import { useCatalogContext } from '../../../CatalogContext'; import { useCatalogContext } from '../../../CatalogContext';
import { Offer } from '../../../common/Offer'; import { Offer } from '../../../common/Offer';
@ -13,7 +12,7 @@ export const CatalogLimitedItemWidgetView: FC<BaseProps<HTMLDivElement>> = props
return ( return (
<Base { ...rest }> <Base { ...rest }>
<LimitedEditionCompletePlateView className="mx-auto" uniqueLimitedItemsLeft={ currentOffer.product.uniqueLimitedItemsLeft } uniqueLimitedSeriesSize={ currentOffer.product.uniqueLimitedItemSeriesSize } /> <LayoutLimitedEditionCompletePlateView className="mx-auto" uniqueLimitedItemsLeft={ currentOffer.product.uniqueLimitedItemsLeft } uniqueLimitedSeriesSize={ currentOffer.product.uniqueLimitedItemSeriesSize } />
{ children } { children }
</Base> </Base>
); );

5
src/components/inventory/views/furniture/InventoryFurnitureView.tsx
View File

@ -1,8 +1,7 @@
import { FurnitureListComposer, IRoomSession, RoomObjectVariable, RoomPreviewer, Vector3d } from '@nitrots/nitro-renderer'; import { FurnitureListComposer, IRoomSession, RoomObjectVariable, RoomPreviewer, Vector3d } from '@nitrots/nitro-renderer';
import { FC, useEffect, useState } from 'react'; import { FC, useEffect, useState } from 'react';
import { GetRoomEngine, GetSessionDataManager, LocalizeText, SendMessageComposer } from '../../../../api'; import { GetRoomEngine, GetSessionDataManager, LocalizeText, SendMessageComposer } from '../../../../api';
import { AutoGrid, Button, Column, Grid, LayoutRarityLevelView, LayoutRoomPreviewerView, Text } from '../../../../common'; import { AutoGrid, Button, Column, Grid, LayoutLimitedEditionCompactPlateView, LayoutRarityLevelView, LayoutRoomPreviewerView, Text } from '../../../../common';
import { LimitedEditionCompactPlateView } from '../../../../views/shared/limited-edition/LimitedEditionCompactPlateView';
import { FurniCategory } from '../../common/FurniCategory'; import { FurniCategory } from '../../common/FurniCategory';
import { attemptItemPlacement, attemptPlaceMarketplaceOffer } from '../../common/FurnitureUtilities'; import { attemptItemPlacement, attemptPlaceMarketplaceOffer } from '../../common/FurnitureUtilities';
import { GroupItem } from '../../common/GroupItem'; import { GroupItem } from '../../common/GroupItem';
@ -116,7 +115,7 @@ export const InventoryFurnitureView: FC<InventoryFurnitureViewProps> = props =>
<Column overflow="hidden" position="relative"> <Column overflow="hidden" position="relative">
<LayoutRoomPreviewerView roomPreviewer={ roomPreviewer } height={ 140 } /> <LayoutRoomPreviewerView roomPreviewer={ roomPreviewer } height={ 140 } />
{ groupItem && groupItem.stuffData.isUnique && { groupItem && groupItem.stuffData.isUnique &&
<LimitedEditionCompactPlateView className="top-2 end-2" position="absolute" uniqueNumber={ groupItem.stuffData.uniqueNumber } uniqueSeries={ groupItem.stuffData.uniqueSeries } /> } <LayoutLimitedEditionCompactPlateView className="top-2 end-2" position="absolute" uniqueNumber={ groupItem.stuffData.uniqueNumber } uniqueSeries={ groupItem.stuffData.uniqueSeries } /> }
{ (groupItem && groupItem.stuffData.rarityLevel > -1) && { (groupItem && groupItem.stuffData.rarityLevel > -1) &&
<LayoutRarityLevelView className="top-2 end-2" position="absolute" level={ groupItem.stuffData.rarityLevel } /> } <LayoutRarityLevelView className="top-2 end-2" position="absolute" level={ groupItem.stuffData.rarityLevel } /> }
</Column> </Column>

5
src/components/room/widgets/infostand/InfoStandWidgetFurniView.tsx
View File

@ -2,9 +2,8 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { CrackableDataType, GroupInformationComposer, GroupInformationEvent, RoomControllerLevel, RoomObjectCategory, RoomObjectVariable, RoomWidgetEnumItemExtradataParameter, RoomWidgetFurniInfoUsagePolicyEnum, SetObjectDataMessageComposer, StringDataType } from '@nitrots/nitro-renderer'; import { CrackableDataType, GroupInformationComposer, GroupInformationEvent, RoomControllerLevel, RoomObjectCategory, RoomObjectVariable, RoomWidgetEnumItemExtradataParameter, RoomWidgetFurniInfoUsagePolicyEnum, SetObjectDataMessageComposer, StringDataType } from '@nitrots/nitro-renderer';
import { FC, useCallback, useEffect, useState } from 'react'; import { FC, useCallback, useEffect, useState } from 'react';
import { CreateLinkEvent, GetGroupInformation, GetRoomEngine, LocalizeText, RoomWidgetFurniActionMessage, RoomWidgetUpdateInfostandFurniEvent, SendMessageComposer } from '../../../../api'; import { CreateLinkEvent, GetGroupInformation, GetRoomEngine, LocalizeText, RoomWidgetFurniActionMessage, RoomWidgetUpdateInfostandFurniEvent, SendMessageComposer } from '../../../../api';
import { Button, Column, Flex, LayoutBadgeImageView, LayoutRarityLevelView, Text, UserProfileIconView } from '../../../../common'; import { Button, Column, Flex, LayoutBadgeImageView, LayoutLimitedEditionCompactPlateView, LayoutRarityLevelView, Text, UserProfileIconView } from '../../../../common';
import { BatchUpdates, UseMessageEventHook } from '../../../../hooks'; import { BatchUpdates, UseMessageEventHook } from '../../../../hooks';
import { LimitedEditionCompactPlateView } from '../../../../views/shared/limited-edition/LimitedEditionCompactPlateView';
import { useRoomContext } from '../../RoomContext'; import { useRoomContext } from '../../RoomContext';
interface InfoStandWidgetFurniViewProps interface InfoStandWidgetFurniViewProps
@ -267,7 +266,7 @@ export const InfoStandWidgetFurniView: FC<InfoStandWidgetFurniViewProps> = props
<Flex position="relative" gap={ 1 }> <Flex position="relative" gap={ 1 }>
{ furniData.stuffData.isUnique && { furniData.stuffData.isUnique &&
<div className="position-absolute end-0"> <div className="position-absolute end-0">
<LimitedEditionCompactPlateView uniqueNumber={ furniData.stuffData.uniqueNumber } uniqueSeries={ furniData.stuffData.uniqueSeries } /> <LayoutLimitedEditionCompactPlateView uniqueNumber={ furniData.stuffData.uniqueNumber } uniqueSeries={ furniData.stuffData.uniqueSeries } />
</div> } </div> }
{ (furniData.stuffData.rarityLevel > -1) && { (furniData.stuffData.rarityLevel > -1) &&
<div className="position-absolute end-0"> <div className="position-absolute end-0">

1
src/views/Styles.scss
View File

@ -1,4 +1,3 @@
@import "./shared/Shared";
@import "./hotel-view/HotelView"; @import "./hotel-view/HotelView";
@import "./nitropedia/NitropediaView"; @import "./nitropedia/NitropediaView";
@import "./hc-center/HcCenterView.scss"; @import "./hc-center/HcCenterView.scss";

1
src/views/shared/Shared.scss
View File

@ -1 +0,0 @@
@import "./limited-edition/LimitedEdition";

160
src/views/shared/limited-edition/LimitedEdition.scss
View File

@ -1,160 +0,0 @@
.unique-item {
.unique-bg-override {
background-position: center;
background-repeat: no-repeat;
z-index: 2;
}
&:before {
position: absolute;
content: '';
width: 100%;
height: 100%;
background: url("../../../assets/images/unique/grid-bg.png") center no-repeat;
z-index: 1;
}
&:after {
position: absolute;
content: '';
width: 100%;
height: 100%;
background: url("../../../assets/images/unique/grid-bg-glass.png") center no-repeat;
bottom: 0;
z-index: 4;
}
&.sold-out:after {
background: url("../../../assets/images/unique/grid-bg-sold-out.png") center no-repeat,
url("../../../assets/images/unique/grid-bg-glass.png") center no-repeat;
}
.unique-item-counter {
margin: 0 auto;
display: flex;
justify-content: center;
align-items: center;
bottom: 1px;
width: 100%;
height: 9px;
background: url("../../../assets/images/unique/grid-count-bg.png") center no-repeat;
z-index: 3;
}
}
.unique-sold-out-blocker {
width: 364px;
height: 30px;
background: url("../../../assets/images/unique/catalog-info-sold-out.png");
div {
float: right;
width: 140px;
text-align: center;
font-weight: bold;
margin-top: 5px;
margin-right: 17px;
color: #000;
}
}
.unique-compact-plate {
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: center;
right: 16px;
width: 34px;
height: 37px;
background: url("../../../assets/images/unique/inventory-info-amount-bg.png");
div {
display: flex;
justify-content: center;
align-items: center;
height: 9.5px;
}
}
.unique-complete-plate {
width: 170px;
height: 29px;
background: url("../../../assets/images/unique/catalog-info-amount-bg.png") no-repeat center;
z-index: 1;
padding-top: 3px;
.plate-container {
margin-left: 45px;
width: 100px;
font-size: 10px;
color: black;
> :first-child {
margin-bottom: 2px;
}
}
}
.limited-edition-number {
display: inline-block;
outline: 0;
height: 5px;
margin-right: 1px;
background-image: url('../../../assets/images/unique/numbers.png');
background-repeat: no-repeat;
&:last-child {
margin-right: 0px;
}
&.n-0 {
width: 4px;
background-position: -1px 0px;
}
&.n-1 {
width: 2px;
background-position: -6px 0px;
}
&.n-2 {
width: 4px;
background-position: -9px 0px;
}
&.n-3 {
width: 4px;
background-position: -14px 0px;
}
&.n-4 {
width: 4px;
background-position: -19px 0px;
}
&.n-5 {
width: 4px;
background-position: -24px 0px;
}
&.n-6 {
width: 4px;
background-position: -29px 0px;
}
&.n-7 {
width: 4px;
background-position: -34px 0px;
}
&.n-8 {
width: 4px;
background-position: -39px 0px;
}
&.n-9 {
width: 4px;
background-position: -44px 0px;
}
}