nitro/nitro-react
1
0
Fork 0
mirror of https://github.com/billsonnn/nitro-react.git synced 2025-01-18 21:36:27 +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';

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

@ -1,8 +1,8 @@
import { FC, useMemo } from 'react';
import { LimitedEditionStyledNumberView } from '../../views/shared/limited-edition/LimitedEditionStyledNumberView';
import { Base } from '../Base';
import { Column, ColumnProps } from '../Column';
import { LayoutItemCountView } from './LayoutItemCountView';
import { LayoutLimitedEditionStyledNumberView } from './limited-edition';
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 })` } } />
<div className="position-absolute bottom-0 unique-item-counter">
<LimitedEditionStyledNumberView value={ itemUniqueNumber } />
<LayoutLimitedEditionStyledNumberView value={ itemUniqueNumber } />
</div>
</> }
{ children }

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

@ -15,4 +15,5 @@ export * from './LayoutRarityLevelView';
export * from './LayoutRoomPreviewerView';
export * from './LayoutRoomThumbnailView';
export * from './LayoutTrophyView';
export * from './limited-edition';
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 { Base, BaseProps } from '../../../common/Base';
import { LimitedEditionStyledNumberView } from './LimitedEditionStyledNumberView';
import { Base, BaseProps } from '../../Base';
import { LayoutLimitedEditionStyledNumberView } from './LayoutLimitedEditionStyledNumberView';
export interface LimitedEditionCompactPlateViewProps extends BaseProps<HTMLDivElement>
interface LayoutLimitedEditionCompactPlateViewProps extends BaseProps<HTMLDivElement>
{
uniqueNumber: 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;
@ -24,10 +24,10 @@ export const LimitedEditionCompactPlateView: FC<LimitedEditionCompactPlateViewPr
return (
<Base classNames={ getClassNames } { ...rest }>
<div>
<LimitedEditionStyledNumberView value={ uniqueNumber } />
<LayoutLimitedEditionStyledNumberView value={ uniqueNumber } />
</div>
<div>
<LimitedEditionStyledNumberView value={ uniqueSeries } />
<LayoutLimitedEditionStyledNumberView value={ uniqueSeries } />
</div>
{ children }
</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 { LocalizeText } from '../../../api';
import { Base, BaseProps } from '../../../common/Base';
import { Column } from '../../../common/Column';
import { Flex } from '../../../common/Flex';
import { LimitedEditionStyledNumberView } from './LimitedEditionStyledNumberView';
import { Base, BaseProps } from '../../Base';
import { Column } from '../../Column';
import { Flex } from '../../Flex';
import { LayoutLimitedEditionStyledNumberView } from './LayoutLimitedEditionStyledNumberView';
export interface LimitedEditionCompletePlateViewProps extends BaseProps<HTMLDivElement>
interface LayoutLimitedEditionCompletePlateViewProps extends BaseProps<HTMLDivElement>
{
uniqueLimitedItemsLeft: number;
uniqueLimitedSeriesSize: number;
}
export const LimitedEditionCompletePlateView: FC<LimitedEditionCompletePlateViewProps> = props =>
export const LayoutLimitedEditionCompletePlateView: FC<LayoutLimitedEditionCompletePlateViewProps> = props =>
{
const { uniqueLimitedItemsLeft = 0, uniqueLimitedSeriesSize = 0, classNames = [], ...rest } = props;
@ -29,11 +29,11 @@ export const LimitedEditionCompletePlateView: FC<LimitedEditionCompletePlateView
<Column className="plate-container" gap={ 0 }>
<Flex justifyContent="between" alignItems="center">
{ LocalizeText('unique.items.left') }
<LimitedEditionStyledNumberView value={ uniqueLimitedItemsLeft } />
<LayoutLimitedEditionStyledNumberView value={ uniqueLimitedItemsLeft } />
</Flex>
<Flex justifyContent="between" alignItems="center">
{ LocalizeText('unique.items.number.sold') }
<LimitedEditionStyledNumberView value={ uniqueLimitedSeriesSize } />
<LayoutLimitedEditionStyledNumberView value={ uniqueLimitedSeriesSize } />
</Flex>
</Column>
</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';
export interface LimitedEditionStyledNumberViewProps
interface LayoutLimitedEditionStyledNumberViewProps
{
value: number;
}
export const LimitedEditionStyledNumberView: FC<LimitedEditionStyledNumberViewProps> = props =>
export const LayoutLimitedEditionStyledNumberView: FC<LayoutLimitedEditionStyledNumberViewProps> = 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 { Base, BaseProps } from '../../../../../common/Base';
import { LimitedEditionCompletePlateView } from '../../../../../views/shared/limited-edition/LimitedEditionCompletePlateView';
import { Base, BaseProps, LayoutLimitedEditionCompletePlateView } from '../../../../../common';
import { useCatalogContext } from '../../../CatalogContext';
import { Offer } from '../../../common/Offer';
@ -13,7 +12,7 @@ export const CatalogLimitedItemWidgetView: FC<BaseProps<HTMLDivElement>> = props
return (
<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 }
</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 { FC, useEffect, useState } from 'react';
import { GetRoomEngine, GetSessionDataManager, LocalizeText, SendMessageComposer } from '../../../../api';
import { AutoGrid, Button, Column, Grid, LayoutRarityLevelView, LayoutRoomPreviewerView, Text } from '../../../../common';
import { LimitedEditionCompactPlateView } from '../../../../views/shared/limited-edition/LimitedEditionCompactPlateView';
import { AutoGrid, Button, Column, Grid, LayoutLimitedEditionCompactPlateView, LayoutRarityLevelView, LayoutRoomPreviewerView, Text } from '../../../../common';
import { FurniCategory } from '../../common/FurniCategory';
import { attemptItemPlacement, attemptPlaceMarketplaceOffer } from '../../common/FurnitureUtilities';
import { GroupItem } from '../../common/GroupItem';
@ -116,7 +115,7 @@ export const InventoryFurnitureView: FC<InventoryFurnitureViewProps> = props =>
<Column overflow="hidden" position="relative">
<LayoutRoomPreviewerView roomPreviewer={ roomPreviewer } height={ 140 } />
{ 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) &&
<LayoutRarityLevelView className="top-2 end-2" position="absolute" level={ groupItem.stuffData.rarityLevel } /> }
</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 { FC, useCallback, useEffect, useState } from 'react';
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 { LimitedEditionCompactPlateView } from '../../../../views/shared/limited-edition/LimitedEditionCompactPlateView';
import { useRoomContext } from '../../RoomContext';
interface InfoStandWidgetFurniViewProps
@ -267,7 +266,7 @@ export const InfoStandWidgetFurniView: FC<InfoStandWidgetFurniViewProps> = props
<Flex position="relative" gap={ 1 }>
{ furniData.stuffData.isUnique &&
<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> }
{ (furniData.stuffData.rarityLevel > -1) &&
<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 "./nitropedia/NitropediaView";
@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;
}
}